<template>
  <div class="detail">
    <div class="container normal-panel">
      <p class="normal-title normal-margin">基础信息</p>
      <el-descriptions :column="3" v-if="detail">
          <el-descriptions-item label="单号">{{detail.billnum?detail[0].billnum:'未知'}}</el-descriptions-item>
          <el-descriptions-item label="预测模板">{{detail[0].title?detail[0].title:'未知'}}</el-descriptions-item>
          <el-descriptions-item label="提报周期">{{detail[0].periodpoint | timer(detail[0].periodtype)}}</el-descriptions-item>
          <el-descriptions-item label="提报要求">
            <span v-if="detail[0].baseonproject == 1">按项目及产品类别预测</span>
            <span v-else>按产品类别预测</span>
          </el-descriptions-item>
          <el-descriptions-item label="提报人">{{detail[0]?detail[0].createby : '未知'}}</el-descriptions-item>
          <el-descriptions-item label="部门">{{detail[0]?detail[0].depname:'未知'}}</el-descriptions-item>
          <el-descriptions-item label="职位">{{detail[0]?detail[0].position:'未知'}}</el-descriptions-item>
          <el-descriptions-item label="提报时间">{{detail[0]?detail[0].createdate:'未知'}}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="container normal-panel" style="margin-top:16px">
      <p class="normal-title normal-margin">提报内容</p>
      <div class="handle">
        <div class="left">
          <Search @searchActive="Search" @clearData="clearData"/>
          <DownSelect title="提报要求:" :list="[{value:'按产品类别'},{value:'按产品类别 + 项目'}]" style="margin-right:16px" />
        </div>
      </div>
      <tableLayout v-if="projectList" :layout="tablecols" :custom="false" :data="projectList">
      </tableLayout>
    </div>
  </div>
</template>

<script>
import Search from '@/components/search/index'
import DownSelect from '@/components/down_select/index'
import mergeTable from '../components/mergeTable'
export default {
  name: 'historyDetail',
  data() {
    return {
      id:this.$route.query.id,
      detail:'',
      tablecols:'',
      projectList:'',
      condition:''
    };
  },
  components:{Search,DownSelect,mergeTable},
  computed:{
  },
  filters: {
    timer (val, type) {
      if (type == '月') {
        return '每月' + val.substr(1, val.length - 2) + '日'
      } else {
        return '每周' + val.substr(1, val.length - 2)
      }
    }
  },
  watch:{
  },
  created() {
    this.getDetail()
    this.getSubmitList()
    this.tablecols = this.tool.tabelCol(this.$route.name).productDetailTable.tablecols.splice(0,7)
    console.log(this.tablecols);
  },
  methods: {
    /* 获取头部详情 */
    async getDetail() {
      let res = await this.$api.requested({
          "id": 20220914104603,
          "version":1,
          "content": {
              "sa_salesforecastbillid":this.id
          }
        })
      this.detail = res.data
      console.log(this.detail);
    },
    /* 获取详情提报内容数据 */
    async getSubmitList() {
      let res = await this.$api.requested({
          "id": 20220906154703,
          "version":1,
          "content": {
              "nocache":true,
              "sa_salesforecastbillid":this.id,
              "where":{
                  "condition":this.condition
              }
          }
      })
      res.data[0].itemclassname ? this.projectList = res.data : this.projectList = []
    },
    Search(data) {
      this.condition = data
      this.getSubmitList()
    },
    clearData() {
      this.condition = ''
      this.getSubmitList()
    }
  },
};
</script>

<style scoped>
  .handle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }
  .handle .left {
    display: flex;
    align-items: center;
  }
</style>
