<template>
  <div class="detail">
    <div class="container normal-panel" v-if="$route.query.header == 'panel'">
      <p class="normal-title normal-margin">模板信息</p>
      <el-descriptions :column="3" v-if="detail">
          <el-descriptions-item label="模板编号">{{detail.billnum?detail.billnum:'未知'}}</el-descriptions-item>
          <el-descriptions-item label="提报要求">
            <span v-if="detail.baseonproject == '1'">按项目及产品类别预测</span>
            <span v-else>按产品类别预测</span>
          </el-descriptions-item>
          <el-descriptions-item label="提报周期">{{detail.periodpoint | timer(detail.periodtype)}}</el-descriptions-item>
          <el-descriptions-item label="模板名称">{{detail.title?detail.title:'未知'}}</el-descriptions-item>
          <el-descriptions-item label="提报有效期">{{detail.begdate}}至{{detail.enddate}}</el-descriptions-item>
          <el-descriptions-item label="备注">{{detail.remarks ? detail.remarks : '暂无'}}</el-descriptions-item>
      </el-descriptions>
    </div>
    <!--提报头部-->
    <div class="container normal-panel" v-else>
      <p class="normal-title normal-margin">基础信息</p>
      <el-descriptions :column="3" v-if="detail">
          <el-descriptions-item label="单号">{{detail.billnum?detail.billnum:'未知'}}</el-descriptions-item>
          <el-descriptions-item label="预测模板">{{detail.title?detail.title:'未知'}}</el-descriptions-item>
          <el-descriptions-item label="提报周期">{{detail.periodpoint | timer(detail.periodtype)}}</el-descriptions-item>
          <el-descriptions-item label="提报要求">
            <span v-if="detail.baseonproject == '1'">按项目及产品类别预测</span>
            <span v-else>按产品类别预测</span>
          </el-descriptions-item>
          <el-descriptions-item label="提报人">{{detail.createby}}</el-descriptions-item>
          <el-descriptions-item label="部门">{{detail.depname}}</el-descriptions-item>
          <el-descriptions-item label="职位">{{detail.position}}</el-descriptions-item>
          <el-descriptions-item label="提报时间">{{detail.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 class="right">
          <add-product v-if="tool.checkAuth($route.name,'projectProductListManage')" type="product" :productList="productList" :tablecols="addProductTablecols"
            @addSuccess="getSubmitList" />
        </div>
      </div>
      <tableLayout v-if="projectList && tablecols" height="350px" :layout="tablecols" :custom="false" :data="projectList">
        <template v-slot:opreation="scope">
          <div style="display:flex">
            <Delete v-if="tool.checkAuth($route.name,'delete')" :rowData="scope.data" :projectid="0" @deleteSuccess="getSubmitList" />
            <Edit v-if="tool.checkAuth($route.name,'update')" :editData="scope.data" :tablecols="addProductTablecols" @editSuccess="getSubmitList" />
          </div>
        </template>
      </tableLayout>
      <div style="margin-top:16px;text-align:right">
        <el-pagination
          background
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="params.content.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Search from '@/components/search/index'
import DownSelect from '@/components/down_select/index'
import mergeTable from '../components/mergeTable'
import addProduct from '../components/addProduct'
import Delete from '../components/delete'
import Edit from '../components/edit'
export default {
  name: 'historyDetail',
  data () {
    return {
      id: this.$route.query.id,
      detail: '',
      tablecols: '',
      addProductTablecols: '',
      projectList: '',
      condition: '',
      productList: '',
      currentPage:1,
      total:0,
      params: {
        "id": 20220906154703,
        "version": 1,
        "content": {
          "nocache": true,
          "sa_salesforecastbillid": '',
          "where": {
            "condition": ""
          }
        }
      }
    };
  },
  components: { Search, DownSelect, mergeTable, addProduct, Delete, Edit },
  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.getProductList()
    this.tablecols = this.tool.tabelCol(this.$route.name).productDetailTable.tablecols
    this.addProductTablecols = this.tool.tabelCol(this.$route.name).addProductTable.tablecols
    
  },
  methods: {
    /* 获取头部详情 */
    async getDetail () {
      let res
      if (this.$route.query.header == 'panel') {
        res = await this.$api.requested({
          "id": 20220906154603,
          "version": 1,
          "content": {
            "sa_salesforecastmodelid": this.$route.query.id2
          }
        })
        this.detail = res.data
      } else {
        res = await this.$api.requested({
          "id": 20220914104603,
          "version": 1,
          "content": {
            "sa_salesforecastbillid": this.id
          }
        })
        this.detail = res.data[0]
      }
    },
    /* 获取详情提报内容数据 */
    async getSubmitList () {
      this.params.content.sa_salesforecastbillid = this.id
      this.params.content.where.condition = this.condition
      let res = await this.$api.requested(this.params)
      console.log(res.data);
      this.total = res.total
      console.log(res.data,1111);
      
      !res.data[0].itemclassnum ? this.projectList = [] : this.projectList = res.data

    },
    /* 获取所有产品数据 */
    async getProductList () {
      let res = await this.$api.requested({
        "id": 20220906154903,
        "version": 1,
        "content": {
        }
      })
      this.productList = res.data
      console.log(this.productList);
    },
    Search (data) {
      this.condition = data
      this.getSubmitList()
    },
    clearData () {
      this.condition = ''
      this.getSubmitList()
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.getSubmitList(null,this.params.content.pageNumber)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.getSubmitList(null,val)
    },
  },
};
</script>

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