<template>
  <div>
    <!-- <a-table :columns="columns" :data-source="data" bordered :scroll="{ x: 4750 }" :pagination="ipagination" rowKey="id"> -->
    <!-- <a-table :columns="columns" :data-source="tableData" bordered :scroll="{ x:true }" :pagination="false" rowKey="id">
    </a-table> -->
    <a-table
      ref="table"
      :scroll="{x:true}"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="tableData"
      :pagination="false"
      class="j-table-force-nowrap">
    </a-table>
    <!-- :loading="loading" -->
    <!-- size="middle" -->
    <!-- :pagination="ipagination" -->
    <!-- <div class="extra-item" style="margin-top: 20px;">
      <a-button :type="selectedMode==='single'?'primary':'link'" @click="selectedMode = 'single'">单选</a-button>
      <a-button :type="selectedMode==='multiple'?'primary':'link'" @click="selectedMode = 'multiple'">多选</a-button>
    </div> -->
    <lineBarChart :xAxisData="xAxisData" :seriesData="seriesData" :selectedMode="selectedMode" style="height: 360px;margin-top: 22px;"></lineBarChart>
  </div>
  
</template>
<script>
import '@/assets/less/TableExpand.less'
// import { mixinDevice } from '@/utils/mixin'
// import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getDbList, getHjList } from '@/api/kzksApi.js'
import lineBarChart from './components/lineBarChart.vue'

export default {
  // mixins:[JeecgListMixin, mixinDevice],
  components: { lineBarChart },
  // props: {
  //   // 对比表格数据
  //   duibiList: {
  //     type: Object,
  //     default: ()=>{},
  //     required: false
  //   }
  // },
  props: ['chooseRowType', 'duibiIds'],
  data() {
    return {
      tableData: [],
      compareOne: [],
      columns: [
        {
          title:'任务号',
          fixed:"left",
          align:"center",
          width: 140,
          dataIndex: 'taskno',
        },
        {
          title:'任务名称',
          align:"center",
          fixed:"left",
          width: 120,
          dataIndex: 'taskname'
        },
        {
          title:'型号',
          align:"center",
          dataIndex: 'xhname'
        },
        {
          title:'计划完成时间',
          align:"center",
          dataIndex: 'jhwcsj',
        },
        {
          title:'阶段',
          align:"center",
          dataIndex: 'yzjdname'
        },
        {
          title:'项目进度',
          align:"center",
          dataIndex: 'processpercent'
        },
        {
          title:'成本进度',
          align:"center",
          dataIndex: 'costPercent'
        },
        {
          title:'研制数量',
          align:"center",
          dataIndex: 'yzsl',
        },
        {
          title:'单台收入',
          align:"center",
          dataIndex: 'oneIncome',
          isEcharts: true,
        },
        {
          title:'单台成本',
          align:"center",
          dataIndex: 'oneCost',
          isEcharts: true,
        },
        {
          title:'单台利润',
          align:"center",
          dataIndex: 'oneProfit',
          isEcharts: true,
        },
        {
          title:'利润额',
          align:"center",
          dataIndex: 'lre',
        },
        {
          title:'利润率',
          align:"center",
          dataIndex: 'lrl',
        },
        {
          title:'预估价',
          align:"center",
          dataIndex: 'estimationcoat',
        },
        {
          title:'合同额',
          align:"center",
          dataIndex: 'contractfpe',
        },
        {
          title:'已收款',
          align:"center",
          dataIndex: 'taskmoney',
        },
        {
          title:'总成本',
          align:"center",
          dataIndex: 'zcb',
        },
        {
          title:'材料费',
          align:"center",
          dataIndex: 'clf',
          isEcharts: true,
        },
        {
          title:'专用费',
          align:"center",
          dataIndex: 'zyf',
          isEcharts: true,
        },
        {
          title:'事务费',
          align:"center",
          dataIndex: 'swf',
          isEcharts: true,
        },
        {
          title:'外协费',
          align:"center",
          dataIndex: 'wxf',
          isEcharts: true,
        },
        {
          title:'燃动费',
          align:"center",
          dataIndex: 'rldlf',
          isEcharts: true,
        },
        {
          title:'折旧费',
          align:"center",
          dataIndex: 'gdzczj',
          isEcharts: true,
        },
        {
          title:'工时费',
          align:"center",
          dataIndex: 'gzjlwf',
          isEcharts: true,
        },
        {
          title:'管理费',
          align:"center",
          dataIndex: 'glf',
          isEcharts: true,
        },
        {
          title:'装机成本',
          align:"center",
          dataIndex: 'zjcb',
          isEcharts: true,
        },
        {
          title:'内部试验',
          align:"center",
          dataIndex: 'lbsy',
          isEcharts: true,
        },
        {
          title:'工时(h)',
          align:"center",
          dataIndex: 'workhour',
          isEcharts: true,
        },
        {
          title:'责任部门',
          align:"center",
          dataIndex: 'zrbm'
        },
        {
          title:'下达部门',
          align:"center",
          dataIndex: 'jycs'
        },
        {
          title:'横向纵向',
          align:"center",
          dataIndex: 'hxzxname'
        },
        {
          title:'任务类型',
          align:"center",
          dataIndex: 'tasktype'
        },
        {
          title:'审计审价',
          align:"center",
          dataIndex: 'auditprice'
        },
        {
          title:'任务状态',
          align:"center",
          dataIndex: 'iflag'
        },
        {
          title:'提出单位简称',
          align:"center",
          dataIndex: 'brief'
        },
        {
          title:'父级任务',
          align:"center",
          dataIndex: 'reftaskno'
        },
        {
          title:'批产任务号',
          align:"center",
          dataIndex: 'pccode'
        },
        {
          title:'备产任务号',
          align:"center",
          dataIndex: 'bccode'
        },
        {
          title:'备料任务号',
          align:"center",
          dataIndex: 'blcode'
        },
        {
          title:'业务员',
          align:"center",
          dataIndex: 'businessman'
        },
        {
          title:'设计工时',
          align:"center",
          dataIndex: 'sjgs',
        },
        {
          title:'生产工时',
          align:"center",
          dataIndex: 'scgs',
        },
      ],
      selectedMode: 'multiple',
      // echarts
      // xAxisData: ['单台成本', '收入', '利润', '材料费', '外协费', '事务费', '专用费', '工时费', '燃动费', '管理费', '折旧费', '装机成本', '内部试验', '工时']
    };
  },
  watch: {
    duibiList: {
      handler(newValue, oldValue){
        console.log(newValue, oldValue)
        if(newValue){
          this.tableData = newValue.compareAll
          this.compareOne = newValue.compareOne
          // var arr = columns.filter(cur => cur.isEcharts)
          // var data = arr.map(res => {
          //   var liData = this.tableData.map((item) => {
          //     return item[res.dataIndex]
          //   })
          //   console.log(liData)
          //   return {
          //     name: res.title,
          //     data: liData
          //   }
          // })
        }
      },
      deep: true,
      immediate: true
    },
  },
  computed: {
    xAxisData(){
      if(this.tableData.length === 0){
        return []
      }
      var arr = this.columns.filter(cur => cur.isEcharts)
      var data = arr.map(res => {
        return res.title
      })
      console.log(data)
      return data
    },
    seriesData(){
      if(this.tableData.length === 0){
        return []
      }
      var arr = this.columns.filter(cur => cur.isEcharts)
      var data = this.compareOne.map(res => {
        // console.log(res)
        var liData = arr.map((item) => {
          console.log(item.dataIndex, res[item.dataIndex])
          return res[item.dataIndex]
        })
        // console.log(liData)
        return {
          name: res.taskno,
          data: liData
        }
      })
      // console.log(data)
      return data
    },
  },
  created(){
    this.loadData()
  },
  methods: {
    // 数据处理
    loadData(){
      // console.log(this.duibiclList)
      if (this.chooseRowType == 1) {
        getHjList({ids: this.duibiIds}).then((res) => {
          console.log(res)
          // this.duibiList = res
          this.tableData = res.compareAll
          this.compareOne = res.compareOne
        })
      } else {
        getDbList({ids: this.duibiIds}).then((res) => {
          console.log(res)
          // this.duibiList = res
          this.tableData = res.compareAll
          this.compareOne = res.compareOne
        })
      }
    }
  },
};
</script>