<template>
  <div class="target-info_content">
    <ts-row type="flex" style="height:25%">
      <ts-col :flex="1" class="target-info-left block-item">
        <tsLoading :loading="loading" />
        <ts-row type="flex" class="target-info-title">
          <div style="line-height:35px">
            <div class="tip">最新</div>
            {{target.params?target.params.beginDate+' 至 '+target.params.endDate:''}}
          </div>
          <ts-col :flex="1" v-for="(item,index) of infoTitleData" :key="index">
            <div style="padding:20px">
              <p class="text font12">
                {{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 font24">{{item.value}}</p>
            </div>
          </ts-col>
          <!-- <ts-col :flex="1.5">
            <span class="font12">月变化趋势</span>
            <div style="height:calc(100% - 30px)">
              <ts-g2-chart
                :chartType="1"
                :data="target_.chartData"
                :annotation="false"
                :isSlider="false"
                :axis="false"
                :legend="false"
              ></ts-g2-chart>
            </div>
          </ts-col>-->
        </ts-row>
      </ts-col>
      <ts-col :flex="1" class="target-info-right" v-show="infoTitleData.length > 0">
        <ts-g2-plot title="月度同比分析" :chartType="2" :data="target_.chartData" />
      </ts-col>
    </ts-row>
    <ts-row type="flex" class="table-contanier">
      <ts-table :source="source" width="100%" height="100%" ref="tsTable"></ts-table>
    </ts-row>
  </div>
</template>

<script>
import biUtils from '../../utils/biUtils'
export default {
  name: 'biTargetInfoTable',
  components: { },
  props: {
    target: {
      type: Object,
      default: () => {
        return { id: '60002' }
      }
    }
  },
  data() {
    return {
      loading: false,
      target_: { ...this.target },
      infoTitleData: [],
      source: this.sourceFn()
    }
  },
  created() {},
  mounted() {
    this.getDetailInfo(this.target)
  },
  methods: {
    // 获取详情信息
    getDetailInfo(target) {
      this.optType = '编辑'
      this.target_ = { ...target }
      const _this = this
      _this.infoTitleData = [
        {
          title: '本期',
          value: biUtils.splitNum(this.target_.thisVal, this.target_.dataOf)
        },
        {
          title: '同期',
          value: biUtils.splitNum(this.target_.sameVal, this.target_.dataOf)
        }
      ]
      // 为表格
      let tableData = biUtils.changeChart2TableData(this.target_.chartData)
      for (let item of tableData) {
        item.hasChild = true
        item.parentId = 0
      }
      _this.$refs.tsTable.data = tableData
    },
    // 列表配置
    sourceFn() {
      let self = this
      return {
        showOverflow: true,
        offPage: false,
        rownumbers: false,
        dataType: 'local',
        colModel: this.colFn(),
        offPage: true,
        loadChildrenMethod: this.loadChildrenMethod,
        lazyOption: {
          lazyUrl: '/ts-bi/api/v3/busi/reportDrill/statistic',
          reqType: 'post',
          contentType: 'application/json',
          lazyType: 'url',
          lazyId: 'targetId'
        },
        treeNode: true
        // totalSetCfg: { title: '合计', color: 'red', isTop: true }
      }
    },
    colFn() {
      let self = this
      return [
        {
          title: '月份',
          field: 'category',
          width: 200,
          formatter: function({ cellValue, row, column }) {
            return cellValue
          }
        },
        {
          title: '本期',
          field: 'thisVal',
          align: 'right',
          helpDetail: '当前月份',
          formatter: function({ cellValue, row, column }) {
            return biUtils.splitNum(cellValue, self.target_.dataOf)
          }
        },
        ,{
          title: '上期',
          field: 'chainVal',
          align: 'right',
          helpDetail: '当年上月份',
          formatter: function({ cellValue, row, column }) {
            return biUtils.splitNum(cellValue, self.target_.dataOf)
          }
        },
        {
          title: '环比%',
          field: 'chainRate',
          type: 'html',
          align: 'right',
          formatter: function({ cellValue, row, column }) {
            return biUtils.formatUpDown(self.$utils.thousandsNum(cellValue))
          }
        },{
          title: '环比差',
          field: 'chainDiffVal',
          align: 'right',
          formatter: function({ cellValue, row, column }) {
            return biUtils.splitNum(cellValue, self.target_.dataOf)
          }
        },
        {
          title: '同期',
          field: 'sameVal',
          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))
          }
        },
        {
          title: '同比差',
          field: 'sameDiffVal',
          align: 'right',
          formatter: function({ cellValue, row, column }) {
            return biUtils.splitNum(cellValue, self.target_.dataOf)
          }
        },
      ]
    },
    loadChildrenMethod({ row }) {
      let _this = this
      let params = {...this.target.params}
      return new Promise(resolve => {
        let url = ''
        if (!row.level || row.level == 0) {
          // 时间，进入第二级
          row.level = 0
          url = '/ts-bi/api/v3/busi/dept/month/statistic'
          let year = params.beginDate.substring(0, 4)
          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
          params.sortOrder = "desc"
        } else if ((row.level = 1)) {
          // 进入第三级
          url = '/ts-bi/api/v3/busi/doct/month/statistic'
          params = row.params
          params.deptCode = row.deptCode
        }
        this.$api({
          url: url,
          data: params,
          method: 'post',
          headers: {
            'Content-Type': 'application/json; charset=utf-8'
          }
        })
          .then(res => {
            if (res.success) {
              let data = res.object || res.rows
              data.forEach(re => {
                re.level = row.level + 1 // 层级加1
                if (row.level == 0) {
                  re.category = re.deptName
                  re.hasChild = true
                  re.params = params
                } else if (row.level == 1) {
                  re.category = re.doctName
                }
              })
              resolve(data)
            } else {
              resolve([])
            }
          })
          .catch(res => {
            setTimeout(() => {
              resolve([])
            }, 500)
          })
      }).catch(res => {
        setTimeout(() => {
          resolve([])
        }, 500)
      })
    }
  },
  watch: {
    target: {
      handler(n) {
        this.getDetailInfo(n)
      }
    }
  },
  beforeDestroy: function() {}
}
</script>
<style lang="less" scoped>
.target-info_content {
  .red {
    color: red;
  }
  .table-contanier {
    height: 75%;
    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 {
    // 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 {
    .vxe-body--column .vxe-body--column {
      color: black !important;
    }
  }
  .text {
    color: #707271;
  }
  .number {
    color: black;
  }
}
</style>
