<template>
  <div class="target-info_content">
    <div  style="display:flex;width:100%;" :style="{height:(calBusicodes&&calBusicodes.length>0)?'250px':'200px'}">
      <div  class="target-info-left block-item">
        <tsLoading :loading="loading" />
        <ts-row class="target-info-title" style="height:60px;">
          <div style="min-width:400px;">
            <bi-filter  :fastKey="false" :initData="initDataObj"  @change="initData"></bi-filter>
          </div>
        </ts-row>
        <ts-row type="flex" class="target-info-title" >
          <ts-col :flex="1" v-for="(item,index) of infoTitleData" :key="index">
            <div style="padding:20px 10px">
              <p class="text font16">
                {{item.title}}
                <span
                  v-if="index==0&&infoTitleData[1].value<item.value"
                  class="iconfont icon-jiantoushangsheng font20 red"
                ></span>
                <span v-if="index==1&&infoTitleData[0].value<item.value" class="font20 red">▲</span>
              </p>
              <p class="number font26">{{item.value}}   <span class="font20">{{item.targetUnit || ''}}</span></p>
            </div>
          </ts-col>
       </ts-row>
       <div v-if="calBusicodes&&calBusicodes.length>0" class="calBusicodesBox">
          <div v-for="(item,index) in calBusicodes" :key="index" class="calBusicodesItem">  
            <div class="calBusicodesName">{{item.targetName}}</div>
             <div class="calBusicodesValue"> {{item.thisVal}}</div>
            </div>
       </div>
      </div>
      <div  class="target-info-right" v-show="infoTitleData.length > 0">
        <ts-g2-plot :loading="loading" title="月度同比分析" init :chartType="2" :data="target_.chartData" />
      </div>
    </div>

    <ts-row type="flex" class="table-contanier" :style="{height:(calBusicodes&&calBusicodes.length>0)?'calc(100% - 250px)':'calc(100% - 200px)'}">
      <ts-col :flex="2"  style="padding:0 5px">
       <ts-title-panel title="数据明细" borderRadius isShadow> 
         <div class="exportBtn"  @click="exportDataEvent('tsTable',(target_.targetName||'') + '(数据明细)')">
          导出
           </div>
          <ts-table :source="source" border="inner" @cellClick="getDept" width="100%" height="100%" ref="tsTable"></ts-table>
       </ts-title-panel>
      </ts-col>
      <ts-col :flex="3"  style="padding:0 5px">
         <ts-title-panel :title="'科室排名'+monthName" borderRadius isShadow> 
             <div class="exportBtn"  @click="exportDataEvent('tsTableDept',(target_.targetName||'') + '(科室排名)')">
          导出
           </div>
          <ts-table :source="sourceDept"  border="inner" @cellClick="getDoctor" width="100%" height="100%" ref="tsTableDept"></ts-table>
       </ts-title-panel>

      </ts-col>
      <ts-col :flex="3" style="padding:0 5px">
        <ts-title-panel :title="'医生排名'+deptName"   borderRadius isShadow> 
            <div class="exportBtn"  @click="exportDataEvent('tsTableDoct',(target_.targetName||'') + '(医生排名)')">
          导出
           </div>
          <ts-table :source="sourceDoct" border="inner" width="100%" height="100%" ref="tsTableDoct"></ts-table>
       </ts-title-panel>
      </ts-col>
    </ts-row>
  </div>
</template>

<script>
import biFilter from '../uiElement/biFilter.vue'
import biUtils from '../../utils/biUtils'
export default {
  name: 'biTargetInfoTable',
  components: { biFilter},
  props: {
    target: {
      type: Object,
      default: () => {
        return { id: '60002' }
      }
    }
  },
  data() {
    return {
      loading:false,
      monthName:'',
      deptName:'',
      initDataObj:this.target.params,
      areaCode:'',
      initTime:'',
      params:{},
      target_: { ...this.target },
      infoTitleData: [],
      calBusicodes:[
  // {
  //   "targetId": "81001",
  //   "targetName": "住院收入",
  //   "dataOf": "AMOUNT",
  //   "targetUnit": "万元",
  //   "alias": null,
  //   "thisVal": "0",
  //   "proportion": null,
  //   "sameVal": "0",
  //   "sameRate": "0.00",
  //   "sameDiffVal": "0",
  //   "chainVal": "0",
  //   "chainRate": "0.00",
  //   "chainDiffVal": "0",
  //   "chartData": null,
  //   "thisYearVal": "0",
  //   "chainYearVal": "0",
  //   "chainYearDiffVal": null,
  //   "chainYearRate": "0.00",
  //   "calBusicodes": null
  // },
  // {
  //   "targetId": "80001",
  //   "targetName": "门诊收入",
  //   "dataOf": "AMOUNT",
  //   "targetUnit": "万元",
  //   "alias": null,
  //   "thisVal": "0",
  //   "proportion": null,
  //   "sameVal": "0",
  //   "sameRate": "0.00",
  //   "sameDiffVal": "0",
  //   "chainVal": "0",
  //   "chainRate": "0.00",
  //   "chainDiffVal": "0",
  //   "chartData": null,
  //   "thisYearVal": "0",
  //   "chainYearVal": "0",
  //   "chainYearDiffVal": null,
  //   "chainYearRate": "0.00",
  //   "calBusicodes": null
  // }
],
      source: this.sourceFn(),
      sourceDept:this.sourceDeptFn(),
      sourceDoct:this.sourceDoctFn()
    }
  },
  created() {},
  mounted() {
    this.getDetailInfo(this.target)
    
  },
  methods: {
    initData(e){
      this.target_.params.beginDate = e.s || this.target_.beginDate
      this.target_.params.endDate = e.e || this.target_.endDate
      this.target_.params.orgIds = e.area ||this.target_.orgIds 
       this.getDept()
      this.getDoctor()
      this.getChartData()
    },
    exportDataEvent(name,tableName) {
      this.$refs[name].$refs.tstable.exportData({
        filename: tableName,
        sheetName: 'Sheet1',
        type: 'xlsx'
      })
    },
    getDept(row){
    this.$refs.tsTableDept.loading=true
          let _this = this
           _this.deptName = ''
          _this.$refs.tsTableDept.data = []
             _this.$refs.tsTableDoct.data = [] 
         let params = {...this.target.params}
          let year = params.beginDate.substring(0, 4)
          if(row){
             this.monthName = row.category?'【'+row.category+'】':''
              let month = row.category.substring(0, 2)
             params.beginDate = year + '-' + month + '-01'
             let days = new Date(year, month, 0).getDate()
             params.endDate = year + '-' + month + '-' + days
          }else{
          
          }
        
          params.sortOrder = "desc"
           if(params.orgIds){
            let orgIdsList = params.orgIds.split(',')
            if(orgIdsList.length>1){
                params.showOrg = true
                 params.sortName = 'orgId'
            }else{

            }
          }
          this.params = params
        
      this.$api({
          method:'post',
          url:'/ts-bi/api/v3/busi/dept/month/statistic',
          headers: {
            'Content-Type': 'application/json; charset=utf-8'
          },
          data:params
      }).then(res=>{
        if(res.success){
          if(res.object&&res.object.length>0){
               _this.$refs.tsTableDept.data = res.object
            //  _this.$refs.tsTableDept.$refs.tstable.setCurrentRow(res.object[0])
            
            // _this.getDoctor(res.object[0])
          }else{
             _this.$refs.tsTableDept.data = []
             _this.$refs.tsTableDoct.data = [] 
          }
          _this.$refs.tsTableDept.loading=false
        
        }
      }).catch(err=>{
         _this.$refs.tsTableDept.data = []
         _this.$refs.tsTableDoct.data = [] 
          _this.$refs.tsTableDept.loading=false
      })
    },
        getDoctor(row){
          let _this = this
           _this.$refs.tsTableDoct.loading=true
           if(row){
              this.deptName = row.deptName?'【'+row.deptName+'】':''
              this.params.deptCode = row.deptCode
           }else{
             this.params.deptCode = ''
           }
           this.params.loadAllDoctors=true,
      this.$api({
          method:'post',
          url:'/ts-bi/api/v3/busi/doct/month/statistic',
          headers: {
            'Content-Type': 'application/json; charset=utf-8'
          },
          data:this.params
      }).then(res=>{
          if(res.success){
            if(res.object&&res.object.length>0){
               _this.$refs.tsTableDoct.data = res.object
            }else{
               _this.$refs.tsTableDoct.data = [] 
            }
             _this.$refs.tsTableDoct.loading=false
        }
      }).catch(err=>{
         _this.$refs.tsTableDoct.data = [] 
          _this.$refs.tsTableDoct.loading=false
      })
    },
    // 获取详情信息
    getDetailInfo(target) {
      this.target_ = { ...target }
      const _this = this
      _this.infoTitleData = [
        {
          title: '本期',
          value: biUtils.splitNum(this.target_.thisVal, this.target_.dataOf),
          targetUnit:this.target_.targetUnit
          
        },
        {
          title: '同期',
          value: biUtils.splitNum(this.target_.sameVal, this.target_.dataOf),
          targetUnit:this.target_.targetUnit
        },
        {
          title: '上期',
          value: biUtils.splitNum(this.target_.chainVal, this.target_.dataOf),
          targetUnit:this.target_.targetUnit
        }
      ]
      this.getDept()
      this.getDoctor()
      
      // 为表格
      if(this.target_.chartData&&this.target_.chartData.length>0){
        let tableData = biUtils.changeChart2TableData(this.target_.chartData)
        _this.calBusicodes = _this.target_.calBusicodes
        tableData.reverse()
        _this.$refs.tsTable.data = tableData
          // _this.$refs.tsTable.$refs.tstable.setCurrentRow(tableData[0])
        //  _this.getDept(tableData[0])
      }else{
        _this.getChartData()
      }
      
      
    },
    getChartData(){
      this.target_.chartData =[]
       this.$refs.tsTable.data = []
       this.$refs.tsTableDept.data = []
       this.$refs.tsTableDoct.data = []
      this.loading = true
         let _this = this
         let params = {...this.target_.params}
         params.hideChartData = false
         this.$api({
          url:'/ts-bi/api/v3/busi/statistic',
          method:'post',
           headers: {
            'Content-Type': 'application/json; charset=utf-8'
          },
          data:params
      }).then(res=>{
        if(res?.success){
           _this.calBusicodes = res.object.calBusicodes
                _this.infoTitleData = [
        {
          title: '本期',
          value: biUtils.splitNum(res.object.thisVal, res.object.dataOf),
           targetUnit:res.object.targetUnit
        },
        {
          title: '同期',
          value: biUtils.splitNum(res.object.sameVal, res.object.dataOf),
          targetUnit:res.object.targetUnit
        },
        {
          title: '上期',
          value: biUtils.splitNum(res.object.chainVal,  res.object.dataOf),
          targetUnit:res.object.targetUnit
        }
      ]
         if(res?.object?.chartData){
           _this.target_.chartData = res.object.chartData
        let tableData = biUtils.changeChart2TableData(_this.target_.chartData)
         tableData.reverse()
        _this.$refs.tsTable.data = tableData
          // _this.$refs.tsTable.$refs.tstable.setCurrentRow(tableData[0])
        //  _this.getDept(tableData[0])
         } 

        }
        _this.loading = false
      }).catch(err=>{
        _this.loading = false
      })
    },
    // 列表配置
    sourceFn() {
      let self = this
      return {
        showOverflow: true,
        offPage: false,
        rownumbers: false,
        dataType: 'local',
        colModel: this.colFn(),
        offPage: true,
         isHideFunc:true
      }
    },
       sourceDeptFn() {
      let self = this
      return {
        showOverflow: true,
        offPage: false,
        rownumbers: false,
        dataType: 'local',
        colModel: this.colDeptFn(),
        offPage: true,
        isHideFunc:true
      }
    },
     sourceDoctFn() {
      let self = this
      return {
        showOverflow: true,
        offPage: false,
        rownumbers: false,
        dataType: 'local',
        colModel: this.colDoctFn(),
        offPage: true,
         isHideFunc:true
      }
    },
    
    colFn() {
      let self = this
      return [
        {
           sortable:true,
          title: '月份',
          field: 'category',
          width: 50,
          formatter: function({ cellValue, row, column }) {
            return cellValue
          }
        },
        {
           sortable:true,
          title: '本期',
          field: 'thisVal',
          align: 'right',
          helpDetail: '当前月份',
          formatter: function({ cellValue, row, column }) {
            return biUtils.splitNum(cellValue, self.target_.dataOf)
          }
        },
        {
           sortable:true,
          title: '同期',
          field: 'sameVal',
          align: 'right',
          helpDetail: '去年同月份',
          formatter: function({ cellValue, row, column }) {
            return biUtils.splitNum(cellValue, self.target_.dataOf)
          }
        },
              {
          sortable:true,
          title: '上期',
          field: 'chainVal',
          align: 'right',
          helpDetail: '上个区间',
          formatter: function({ cellValue, row, column }) {
            return biUtils.splitNum(cellValue, self.target_.dataOf)
          }
        },
        {
          title: '同比%',
          field: 'sameRate',
          type: 'html',
          align: 'right',
          formatter: function({ cellValue, row, column }) {
            return biUtils.formatUpDown(self.$utils.thousandsNum(cellValue))
          }
        },
      ]
    },
        colDeptFn() {
      let self = this
      return [
            {
          sortable:true,
          title: '院区',
          field: 'orgName',
          width: 50,
          align:'center',
          formatter: function({ cellValue, row, column }) {
            return (row.orgName? row.orgName.substring(0,1) :'')
          }
        },
        {
          title: '科室',
           sortable:true,
          field: 'deptName',
          width: 150,
          formatter: function({ cellValue, row, column }) {
            return cellValue
            // return cellValue+ (row.orgName?'('+ row.orgName +')':'')
          }
        },
    

        {
          title: '本期',
          field: 'thisVal',
           sortable:true,
          align: 'right',
          helpDetail: '当前月份',
          formatter: function({ cellValue, row, column }) {
            return biUtils.splitNum(cellValue, self.target_.dataOf)
          }
        },
        {
          title: '同期',
           sortable:true,
          field: 'sameVal',
          align: 'right',
          helpDetail: '去年同月份',
          formatter: function({ cellValue, row, column }) {
            return biUtils.splitNum(cellValue, self.target_.dataOf)
          }
        },
              {
          title: '上期',
           sortable:true,
          field: 'chainVal',
          align: 'right',
          helpDetail: '上个区间',
          formatter: function({ cellValue, row, column }) {
            return biUtils.splitNum(cellValue, self.target_.dataOf)
          }
        },
        {
          title: '同比%',
          field: 'sameRate',
          type: 'html',
          align: 'right',
          formatter: function({ cellValue, row, column }) {
            return biUtils.formatUpDown(self.$utils.thousandsNum(cellValue))
          }
        },
      ]
    },
        colDoctFn() {
      let self = this
      return [
        {
          title: '医生',
          field: 'doctName',
          width: 150,
           sortable:true,
          formatter: function({ cellValue, row, column }) {
            return cellValue
          }
        },
        {
          title: '本期',
           sortable:true,
          field: 'thisVal',
          align: 'right',
          helpDetail: '当前月份',
          formatter: function({ cellValue, row, column }) {
            return biUtils.splitNum(cellValue, self.target_.dataOf)
          }
        },
        {
          title: '同期',
           sortable:true,
          field: 'sameVal',
          align: 'right',
          helpDetail: '去年同月份',
          formatter: function({ cellValue, row, column }) {
            return biUtils.splitNum(cellValue, self.target_.dataOf)
          }
        },
          {
          title: '上期',
           sortable:true,
          field: 'chainVal',
          align: 'right',
          helpDetail: '上个区间',
          formatter: function({ cellValue, row, column }) {
            return biUtils.splitNum(cellValue, self.target_.dataOf)
          }
        },
        {
          title: '同比%',
          field: 'sameRate',
          type: 'html',
          align: 'right',
          formatter: function({ cellValue, row, column }) {
            return biUtils.formatUpDown(self.$utils.thousandsNum(cellValue))
          }
        },
      ]
    },
    loadChildrenMethod({ row }) {
    }
  },
  watch: {
    target: {
      handler(n) {
        this.initDataObj =Object.assign({},n.params) 
        this.getDetailInfo(n)
      },
      deep:true
    }
  },
  beforeDestroy: function() {}
}
</script>
<style lang="less" scoped>
.calBusicodesBox{
  height: 90px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.calBusicodesItem{
  text-align: center;
}
.calBusicodesName{
  font-size: 16px;
  
  line-height: 30px;

}
.calBusicodesValue{
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}
.exportBtn{
  position: absolute;
  right: 8px;
  top: 4px;
  background-color: var(--button_color);
  text-align: center;
  color: #fff;
  height: 26px;
  line-height: 26px;
  text-align: center;
  width: 50px;
  border-radius: 5px;
  cursor: pointer;
}
.exportBtn:hover{
 background: #4997eb;
}
.target-info_content {
  width: 100%;
  .red {
    color: red;
  }
  .table-contanier {
    height: calc(100% - 200px);
    margin: 10px 5px 5px 5px;
    width: calc(100% - 10px) !important;
  }
  height: calc(100% - 25px);
  /deep/.block-item {
    background: #fff;
    border-top: 1px solid #fff;
    border-radius: 6px !important;
  }
  /deep/.block-item:first-child {
    border-top: 1px solid #fff !important;
  }
  .no_data {
    width: 100%;
  }
  .target-info-left {
    width: 600px;
    // border-right: 1px solid  var(--border_color);
    padding: 0px 15px 0 15px;
    .target-info-title {
      height: 100px;
      border-bottom: 1px solid var(--border_color);
      line-height: 30px;
      align-items: center;
      p {
        text-align: center;
      }
      .tip {
        // position: absolute;
        // top: 40px;
        background: rgb(245, 164, 83);
        padding: 0px 6px;
        color: rgb(255, 255, 255);
        border-radius: 4px;
        width: 30px;
        line-height: 25px;
      }
    }
    .target-info-left-content {
      height: calc(100% - 100px);
      padding-top: 20px;
      overflow: hidden;
      overflow-y: auto;
      p {
        line-height: 30px;
      }
      ul {
        line-height: 30px;
        width: 100%;
        font-size: 12px;
        li {
          width: 100%;
          float: left;
          display: flex;
          .param-name {
            width: 10%;
            color: #888;
            text-align: left;
          }
          .param-value {
            text-indent: 1em;
            width: 60%;
            color: var(--base-black);
          }
        }
      }
    }
  }
  .target-info-right {
    width: calc(100% - 600px);
    .vxe-body--column .vxe-body--column {
      color: black !important;
    }
  }
  .text {
    color: #707271;
    line-height: 35px;
  }
  .number {
    color: black;
    line-height: 40px;
  }
}
</style>
