<template>
  <div class="main-contain new-main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div
      class="app-container"
      style="display: flex; flex: 1; padding: 10px 20px 0px 20px"
    >
      <div class="mainLeft">
        <div>
          <div
            style="
              margin: 10px 0;
              display: flex;
              justify-content: space-between;
            "
          >
            <el-input
              size="small"
              style="width: 130px"
              v-model="keywords"
              class="filter-item"
              placeholder="请输入患者名称"
            />
            <el-button
              size="small"
              class="filter-item"
              type="primary"
              @click="searchAction"
              >搜索
            </el-button>
          </div>

          <el-table
            :row-class-name="tableRowClassName"
            @row-click="onRowClick"
            :data="patientTableData"
            :height="tableHeight"
            border
            style="width: 100%"
            :row-style="{ color: '#303133' }"
            :header-cell-style="{
              backgroundColor: 'rgb(245, 247, 250)',
              color: '#606266',
            }"
            highlight-current-row
            ref="singleTable"
            @current-change="handleCurrentChange"
          >
            <el-table-column align="center" prop="name" label="姓名" wdith="89">
              <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="mainRight">
        <el-date-picker
          v-model="chargeDate"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          @change="changeDate"
          end-placeholder="结束日期"
        >
        </el-date-picker>
         <el-button  size="small" type="primary" @click="exportList" style="width:50px">导出</el-button>
        <el-table
        :data="tableList"
         border
        style="width: 100%">
         <el-table-column prop="date" label="姓名"  width="100" align="center">
           <template slot-scope="scope" >
            {{ scope.row.patient.name }}
           </template>
        </el-table-column>
        <el-table-column  prop="date"  label="身份证"  width="200" align="center">
           <template slot-scope="scope" >
            {{ scope.row.patient.id_card_no }}
           </template> 
        </el-table-column>
        <el-table-column prop="name"  label="医保类型" width="100" align="center">
          <template slot-scope="scope" >
            <span v-if="scope.row.order.insutype == 0">居民</span>
            <span v-if="scope.row.order.insutype == 310">职工</span>
            <span v-if="scope.row.order.insutype == 390">居民</span>
           </template>  
        </el-table-column>
        <el-table-column  prop="address" label="年"  width="50" align="center">
          <template slot-scope="scope" >
            {{getTime(scope.row.order.settle_accounts_date)}}
         </template>  
        </el-table-column>
         <el-table-column prop="address" label="月"  width="50"  align="center">
          <template slot-scope="scope">
            {{getTimeOne(scope.row.order.settle_accounts_date)}}
           </template>  
        </el-table-column>
         <el-table-column prop="address" label="药品编码"  width="100" align="center">
           <template slot-scope="scope" >
             <span v-if="scope.row.his_doctor_advice.id > 0">
               {{scope.row.his_doctor_advice.id}}
             </span>
             <span v-if="scope.row.his_prescription_project.id > 0">
               {{scope.row.his_prescription_project.id}}
             </span>
           </template>  
        </el-table-column>
         <el-table-column prop="address" label="名称"  width="100" align="center">
           <template slot-scope="scope" >
             <span v-if="scope.row.his_doctor_advice.id > 0">
               {{scope.row.his_doctor_advice.advice_name}}
             </span>
             <span v-if="scope.row.his_prescription_project.id > 0">
               {{scope.row.his_prescription_project.good_info.good_name}}
             </span>
           </template>  
          </el-table-column>
       
         <el-table-column  prop="address"  label="单位"  width="130" align="center">
         <template slot-scope="scope" >
          
             <span v-if="scope.row.his_doctor_advice.id > 0">
               {{scope.row.his_doctor_advice.prescribing_number_unit}}
             </span>
             <span v-if="scope.row.his_prescription_project.id > 0">
               {{scope.row.his_prescription_project.unit}}
             </span>
           </template>  
        </el-table-column>
        <el-table-column  prop="address"  label="数量"  width="130" align="center">
         <template slot-scope="scope" >
               {{scope.row.cnt}}
           </template>  
        </el-table-column>
       <el-table-column  prop="address"  label="金额"  width="130" align="center">
         <template slot-scope="scope" >   
               {{(scope.row.cnt * scope.row.pric).toFixed(2)}}
           </template>  
        </el-table-column>
         </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { GetDetailPatients,getHisAdviceOrderList } from "@/api/his/his_tools";
import BreadCrumb from "@/xt_pages/components/bread-crumb";
const moment = require("moment");
import { uParseTime } from '@/utils/tools'
export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      currentRowIndex: 0,
      patientTableData: [],
      tableHeight: 400,
      crumbs: [
        { path: false, name: "His工具" },
        { path: false, name: "明细汇总统计" },
      ],
      titleType: "明细",
      patient_id: 0,
      keywords: "",
      tableList:[],
      tableData:[],
      chargeDate: [
        moment(new Date()).add("year", 0).format("YYYY-MM-DD"),
        moment(new Date()).add("year", 0).format("YYYY-MM-DD"),
      ],
      start_time:"",
      end_time:"",
      drugList:[],
      goodList:[],
    };
  },

  // beforeRouteEnter(to, from, next){
  //     if(from.path == '/hisTool/detailPrint'){
  //       next((vm) => {
  //         vm.titleType = "明细"
  //       })
  //     }else if(from.path == '/hisTool/gatherPrint'){
  //       vm.titleType = "汇总"
  //       next((vm) => {
  //         vm.titleType = "汇总"
  //       })
  //     }else{
  //       next()
  //     }
  // },

  //判断列表页是否刷新
  beforeRouteLeave(to, from, next) {
    console.log(to, "beforeRouteEnter");
    if (to.path != "/hisTool/detailPrint"&&to.path != "/hisTool/gatherPrint") {
      this.$store.getters.pagedata.list.table_id = 0
      next()
    } else {
     next()
    }
  },

  watch:{
    'titleType':{
      handler(val){
        this.$store.commit('SET_PAGENAME',val)
      }
    }
  },

  methods: {
    getPatientList() {
      var params = {
        keyword: this.keywords,
      };
      GetDetailPatients(params).then((response) => {
        if (response.data.state == 0) {
          this.$message.error(response.data.msg);
          return false;
        } else {
          this.patientTableData = response.data.data.patient;
          this.patient_id = this.patientTableData[0].id;
          if (this.$store.getters.pagedata.list.table_id == 0) {
            this.$refs.singleTable.setCurrentRow(this.patientTableData[0]);
          } else {
            this.$refs.singleTable.setCurrentRow(
              this.patientTableData[
                this.$store.getters.pagedata.list.table_id
              ]
            );
          }
        }
      });
    },

    tableRowClassName({ row, rowIndex }) {
      row.row_index = rowIndex;
    },

    onRowClick(row, event, column) {
      this.currentRowIndex = row.row_index;
      this.$store.commit("SET_PAGEDATA", {
        table_id: this.currentRowIndex,
      });
      // console.log(this.$store.getters.pagedata.list.table_id, "列表行id");
    },
    searchAction() {
      this.getPatientList();
    },
    handleCurrentChange(row) {
      this.patient_id = row.id;
      this.tableList = []
      this.tableData = []
      this.getHisAdviceOrderList(row.id)
    },
    getHisAdviceOrderList(id){
       var params = {
        patient_id:id,
        start_time:this.start_time,
        end_time:this.end_time,
       } 
     getHisAdviceOrderList(params).then(response=>{
        if(response.data.state == 1){
          var arr= []
           var list =  response.data.data.list
           console.log("list2323322323我的",list)
           for(let i=0;i<list.length;i++){
             if(list[i].order.order_status  == 2){
               arr.push(list[i])
             }
           }
           this.tableList = arr
           this.tableData = arr
         
        }
     })
    },
    changeDate(){
      this.start_time = this.chargeDate[0];
      this.end_time = this.chargeDate[1];  
      this.tableData = []
      this.tableList = []
      this.getHisAdviceOrderList(this.patient_id) 
    },
   getTime(val) {
     if(val < 0){
       return ""
      }
     if(val == ""){
       return ""
      }else {
      return uParseTime(val, '{y}')
      }
    },
   getTimeOne(val) {
     if(val < 0){
       return ""
      }
     if(val == ""){
       return ""
      }else {
      return uParseTime(val, '{m}')
      }
    },
    getCount(val){
      var count = 0
      for(let i=0;i<val.length;i++){
        count +=val[i].cnt
      }
      if(count >0){
        return count
      }else{
        return ""
      }
    },
    getAllPrice(val){
      var total_price = 0
      for(let i=0;i<val.length;i++){
        total_price +=val[i].cnt * val[i].pric
      }
      if(total_price >0){
        return total_price.toFixed(2)
      }else{
        return ""
      }
    },
    exportList(){
      import('@/vendor/Export2Excel').then(excel => {
      for(let i=0;i<this.tableData.length;i++){
          if(this.tableData[i].insutype == 310){
          this.tableData[i].insutype = "职工"
          }
          if(this.tableData[i].insutype == 390){
          this.tableData[i].insutype = "居民"
          }
          
          this.tableData[i].year = this.getTime(this.tableData[i].settle_accounts_date)
          this.tableData[i].month = this.getTimeOne(this.tableData[i].settle_accounts_date)
          
          if(this.tableData[i].med_chrgitm_type == "01"){
            this.tableData[i].med_chrgitm_type = "床位费"
          }
          if(this.tableData[i].med_chrgitm_type == "02"){
            this.tableData[i].med_chrgitm_type = "诊察费"
          }
          if(this.tableData[i].med_chrgitm_type == "03"){
            this.tableData[i].med_chrgitm_type = "检查费"
          }
          if(this.tableData[i].med_chrgitm_type == "04"){
            this.tableData[i].med_chrgitm_type = "化验费"
          }
          if(this.tableData[i].med_chrgitm_type == "05"){
            this.tableData[i].med_chrgitm_type = "治疗费"
          }
          if(this.tableData[i].med_chrgitm_type == "06"){
            this.tableData[i].med_chrgitm_type = "治疗费"
          }
          if(this.tableData[i].med_chrgitm_type == "08"){
            this.tableData[i].med_chrgitm_type = "材料费"
          }
          if(this.tableData[i].med_chrgitm_type == "09"){
            this.tableData[i].med_chrgitm_type = "西药费"
          }
          if(this.tableData[i].med_chrgitm_type == "11"){
            this.tableData[i].med_chrgitm_type = "中成费"
          }
          if(this.tableData[i].med_chrgitm_type == "14"){
            this.tableData[i].med_chrgitm_type = "其他费"
          }

        this.tableData[i].name = this.tableData[i].patient.name
        this.tableData[i].id_card_no = this.tableData[i].patient.id_card_no 
        this.tableData[i].total_price = (this.tableData[i].cnt * this.tableData[i].pric).toFixed(2)
        if(this.tableData[i].his_doctor_advice.id > 0){
          this.tableData[i].his_advice_name = this.tableData[i].his_doctor_advice.advice_name
          this.tableData[i].his_prescribing_number_unit = this.tableData[i].his_doctor_advice.prescribing_number_unit
        }
        if(this.tableData[i].his_prescription_project.id > 0){
          this.tableData[i].his_advice_name = this.tableData[i].his_prescription_project.good_info.good_name
          this.tableData[i].his_prescribing_number_unit = this.tableData[i].his_prescription_project.unit
        }
        if(this.tableData[i].order.insutype == 0){
           this.tableData[i].insutype = "居民"
        }
        if(this.tableData[i].order.insutype == 310){
          this.tableData[i].insutype = "职工"
        }
        if(this.tableData[i].order.insutype == 390){
          this.tableData[i].insutype = "居民"
        }
        
        this.tableData[i].year = this.getTime(this.tableData[i].order.settle_accounts_date)
        this.tableData[i].month = this.getTimeOne(this.tableData[i].order.settle_accounts_date)
      }
      const tHeader = ['姓名','身份证','医保类型','年','月','名称','单位','数量','金额']
      const filterVal = ['name', 'id_card_no','insutype','year','month','his_advice_name','his_prescribing_number_unit','cnt','total_price']

      const data = this.formatJson(filterVal,this.tableData)

      excel.export_json_to_excel({
        header: tHeader,
        data,
        filename: '药品信息'
      })
      this.downloadLoading = false

    })
   },
   formatJson(filterVal, jsonData) {
     return jsonData.map(v => filterVal.map(j => v[j]))
    },
    getDrugNumber(drug_id){
      
      var id = ""
      for(let i=0;i<this.drugList.length;i++){
        if(this.drugList[i].id == drug_id){
          id = this.drugList[i].id
        }
      }
      return id
    },
    getGoodNumber(good_id){
      var good_name = ""
      for(let i=0;i<this.goodList.length;i++){
        if(this.goodList[i].id == good_id){
           good_name = this.goodList[i].good_name
        }
      }
      return good_name
    }
  },
  created() {

    let type = this.$store.getters.pagedata.pagestate
    if(type == ""){
      this.titleType = "明细"
    }else{
      this.titleType = type
    }
    const tableHeight = document.body.clientHeight - 290;
    this.tableHeight = tableHeight;
    this.start_time = moment(new Date()).add("year", 0).format("YYYY-MM-DD")
    this.end_time = moment(new Date()).add("year", 0).format("YYYY-MM-DD")
    this.getPatientList();
    
  },

  mounted() {}
};
</script>

<style lang="scss" scoped>
.new-main-contain {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.app-container {
  height: 100%;
}

.mainCell {
  height: 36px;
  display: flex;
  align-items: center;
}

.mainLeft {
  width: 200px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .el-radio {
    margin-right: 5px;
  }
}
.mainRight {
  margin-left: 10px;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;

  .cellSpan {
    min-width: 80px;
    display: inline-block;
    margin-right: 10px;
  }
}
.mainCenter {
  display: flex;
  flex: 1;
}

.centerLeft {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;

  .el-form-item {
    width: 32%;
    margin-right: 1%;
    float: left;
  }

  .el-form-item__label {
    text-align: left;
  }
}
.backColor {
  background: #f6f8f9;
  height: 5px;
  margin-bottom: 5px;
}

.tabsBox {
  position: relative;
  height: 76%;
  overflow-y: auto;
  margin-bottom: 60px;

  .el-tabs__item {
    padding: 0 10px;
  }
}
.preTabs {
  height: 100%;
  display: flex;
  flex-direction: column;

  .el-tabs__content {
    flex: 1;
    overflow-y: auto;
  }
}

.costBox {
  width: 100%;
  height: 60px;
  background: #fff;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
}

.addTab {
  position: absolute;
  right: 0;
  top: 14px;
  z-index: 20;
}

.centerRight {
  width: 300px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.rightTab {
  height: 40px;
  width: 100%;
  border: 1px solid #d2d2d2;
  box-sizing: border-box;

  p {
    width: 50%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #eee;
    float: left;
  }

  > p:last-child {
    border-left: 1px solid #d2d2d2;
    float: right;
  }

  .activeP {
    background: #409eff;
    color: #fff;
  }
}
.comfirmBox {
  width: 100%;
  height: 60px;
  background: #fff;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mainHeader {
  width: 100%;
  background: #fff;
  position: fixed;
  z-index: 100;
  height: 36px;
}

.titleBox {
  position: fixed;
  z-index: 99;
  background: #fff;
}

.fixedCell {
  position: fixed;
  z-index: 99;
  right: 30px;
  background: #fff;
  width: 300px;
  display: flex;
  justify-content: space-between;
}
</style>

<style lang="scss">
.centerLeft {
  .el-form-item__label {
    text-align: left;
  }
}
.tabsBox {
  .el-tabs__item {
    padding: 0 10px;
  }

  .el-tabs--bottom
    .el-tabs--left
    > .el-tabs__header
    .el-tabs__item:nth-child(2),
  .el-tabs--bottom
    .el-tabs--right
    > .el-tabs__header
    .el-tabs__item:nth-child(2),
  .el-tabs--bottom.el-tabs--border-card
    > .el-tabs__header
    .el-tabs__item:nth-child(2),
  .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2),
  .el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2),
  .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2),
  .el-tabs--top.el-tabs--border-card
    > .el-tabs__header
    .el-tabs__item:nth-child(2),
  .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2) {
    padding: 0 10px;
  }

  .el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:last-child,
  .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:last-child,
  .el-tabs--bottom.el-tabs--border-card
    > .el-tabs__header
    .el-tabs__item:last-child,
  .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:last-child,
  .el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:last-child,
  .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:last-child,
  .el-tabs--top.el-tabs--border-card
    > .el-tabs__header
    .el-tabs__item:last-child,
  .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:last-child {
    padding: 0 10px;
  }

  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable {
    padding: 0 10px;
  }
}
.centerRight {
  .el-tabs__nav-scroll {
    display: flex;
  }

  .el-tabs__nav {
    margin: 0 auto;
  }

  .el-table th .cell,
  .el-table td .cell {
    padding: 0 2px;
  }
}
.preTabs {
  .el-tabs__content {
  }
}
.rightTabs {
  height: 100%;

  .el-tabs__content {
  }
}
.centerDialog {
  .el-dialog__body {
    max-height: calc(100vh - 100px) !important;
    padding: 0 20px;
  }
}
</style>
