<!--
 /*
* @Author: lb
* @Date: 2022-03-24 13:30:00
 * @LastEditTime: 2022-05-10 18:38:28
 * @LastEditors: gtz
* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
*/
-->
<template>
  <div>
    <div class="app-container">
      <top-title />
      <head-form
        :form-config="headFormConfig"
        @headBtnClick="btnClick"
      />
      <base-table
        :page="listQuery.current"
        :limit="listQuery.size"
        :table-config="trueTableProps.length ? trueTableProps: tableProps"
        :table-data="tableData.length ? tableData : []"
        :span-method="spanMethod"
        :is-loading="listLoading"
        :index-config="{ align: 'left', fixed: 'left' }"
      />
    </div>
    <div class="app-container">
      <el-radio-group v-model="chartType" class="data-analysis-radio" size="mini" @change="changeChartType">
        <el-radio-button v-for="(item, index) in chartDataArr" :key="index" :label="index">{{ item.equipmentName }}</el-radio-button>
      </el-radio-group>
      <Line-chart :chart-data="chartDataItem" width="100%" height="400px" />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import i18n from '@/lang'
import TopTitle from '@/components/TopTitle'
import HeadForm from '@/components/basicData/HeadForm'
import BaseTable from '@/components/BaseTable/index-compound'
import LineChart from '@/components/Charts/LineChart'
import { lineList } from '@/api/DataAnalysis/productionLineBalance'
// import { timeFormatter } from '@/filters'
/**
 * 表格表头配置项 TypeScript接口注释
 * tableConfig<ConfigItem> = []
 *
 * Interface ConfigItem = {
 *  prop: string,
 *  label: string,
 *  width: string,
 *  align: string,
 *  subcomponent: function,
 *  filter: function
 * }
 *
 *
 */

const tableProps = [
  {
    prop: 'process',
    label: i18n.t('module.dataAnalysis.productionLineBalance.process'),
    align: 'center',
    fixed: 'left'
  },
  {
    prop: 'equipmentName',
    label: i18n.t('module.dataAnalysis.productionLineBalance.equipmentName'),
    align: 'center',
    fixed: 'left'
  }
]

const testData = [
  {
    process: '清洗',
    data: [
      {
        equipmentName: '上料清洗1',
        data: [
          {
            time: '2022-5-6',
            eqCT: 0.46,
            eqTT: 0.12,
            lineCT: 0.68,
            lineTT: 0.25
          },
          {
            time: '2022-5-7',
            eqCT: 0.34,
            eqTT: 0.25,
            lineCT: 0.42,
            lineTT: 0.4733
          },
          {
            time: '2022-5-8',
            eqCT: 0.01,
            eqTT: 0.62,
            lineCT: 0.73,
            lineTT: 0.45
          }
        ]
      },
      {
        equipmentName: '上料清洗2',
        data: [
          {
            time: '2022-5-6',
            eqCT: 0.46,
            eqTT: 0.62,
            lineCT: 0.24,
            lineTT: 0.70
          },
          {
            time: '2022-5-7',
            eqCT: 0.32,
            eqTT: 0.58,
            lineCT: 0.46,
            lineTT: 0.80
          },
          {
            time: '2022-5-8',
            eqCT: 0.35,
            eqTT: 0.83,
            lineCT: 0.29,
            lineTT: 0.90
          }
        ]
      }
    ]
  },
  {
    process: '磨边',
    data: [
      {
        equipmentName: '磨边1',
        data: [
          {
            time: '2022-5-6',
            eqCT: 0.16,
            eqTT: 0.42,
            lineCT: 0.85,
            lineTT: 0.26
          },
          {
            time: '2022-5-7',
            eqCT: 0.31,
            eqTT: 0.21,
            lineCT: 0.11,
            lineTT: 0.46
          },
          {
            time: '2022-5-8',
            eqCT: 0.82,
            eqTT: 0.25,
            lineCT: 0.09,
            lineTT: 0.23
          }
        ]
      },
      {
        equipmentName: '磨边2',
        data: [
          {
            time: '2022-5-6',
            eqCT: 0.33,
            eqTT: 0.62,
            lineCT: 0.37,
            lineTT: 0.22
          },
          {
            time: '2022-5-7',
            eqCT: 0.32,
            eqTT: 0.24,
            lineCT: 0.21,
            lineTT: 0.25
          },
          {
            time: '2022-5-8',
            eqCT: 0.11,
            eqTT: 0.23,
            lineCT: 0.45,
            lineTT: 0.21
          }
        ]
      }
    ]
  }
]

export default {
  name: 'ProductPool',
  components: { TopTitle, BaseTable, HeadForm, LineChart },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      addOrUpdateVisible: false,
      trueWidth: 240,
      tableProps,
      testData,
      tableData: [],
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        current: 1,
        size: 10
      },
      lineList: [],
      headFormConfig: [
        {
          type: 'select',
          label: i18n.t('module.dataAnalysis.productionLineBalance.line'),
          placeholder: this.$t('module.dataAnalysis.productionLineBalance.line'),
          param: 'line',
          width: 300,
          selectOptions: []
        },
        {
          type: 'datePicker',
          label: this.$t('module.dataAnalysis.productionLineBalance.time'),
          dateType: 'daterange',
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd',
          rangeSeparator: '-',
          startPlaceholder: this.$t('module.dataAnalysis.productionLineBalance.startTime'),
          endPlaceholder: this.$t('module.dataAnalysis.productionLineBalance.endTime'),
          param: 'searchTime'
        },
        {
          type: 'button',
          btnName: 'btn.search',
          name: 'search',
          color: 'primary'
        }
      ],
      trueTableProps: [],
      headFormValue: {},
      numArr: [],
      chartDataArr: [],
      chartType: 0,
      chartDataItem: {}
    }
  },
  created() {
    this.getLineList()
    this.getList()
  },
  methods: {
    // 获取产线列表
    getLineList() {
      lineList({ current: 1, size: 999 }).then(res => {
        if (res.code === 0) {
          this.lineList = res.data.records
          Vue.set(this.headFormConfig[0], 'selectOptions', this.lineList)
        }
        console.log(res)
      })
    },
    getList() {
      this.numArr = []
      let num = 0
      const tableConfig = []
      this.chartDataArr = []
      const dataArr = this.testData.map((item, index) => {
        let dataArr = []
        if (item.data) {
          this.chartDataArr = this.chartDataArr.concat(item.data)
          num += item.data.length
          this.numArr.push(num)
          dataArr = item.data.map((z, idx) => {
            const dataArr = {}
            z.data.forEach(i => {
              // 动态生成tableConfig
              if (index === 0 && idx === 0) {
                tableConfig.push({
                  label: i.time,
                  children: [
                    { prop: i.time + 'eqCT', label: '设备CT' },
                    { prop: i.time + 'eqTT', label: '设备TT' },
                    { prop: i.time + 'lineCT', label: '产线CT' },
                    { prop: i.time + 'lineTT', label: '产线TT' }
                  ]
                })
              }
              // 合并数据集
              dataArr[i.time + 'eqCT'] = i.eqCT
              dataArr[i.time + 'eqTT'] = i.eqTT
              dataArr[i.time + 'lineCT'] = i.lineCT
              dataArr[i.time + 'lineTT'] = i.lineTT
              dataArr.process = item.process
              dataArr.equipmentName = z.equipmentName
            })
            return dataArr
          })
        }
        return dataArr
      })
      this.trueTableProps = this.tableProps.concat(tableConfig)
      this.tableData = this.flatten(dataArr)
      this.$nextTick(() => {
        this.changeChartType(this.chartType)
      })
    },
    changeChartType(idx) {
      const chartDataItem = {
        timeArr: [],
        eqCT: [],
        eqTT: [],
        lineCT: [],
        lineTT: []
      }
      this.chartDataArr[idx].data.forEach(item => {
        chartDataItem.timeArr.push(item.time)
        chartDataItem.eqCT.push(item.eqCT)
        chartDataItem.eqTT.push(item.eqTT)
        chartDataItem.lineCT.push(item.lineCT)
        chartDataItem.lineTT.push(item.lineTT)
      })
      this.chartDataItem = chartDataItem
    },
    spanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        if (rowIndex === 0) {
          return [this.numArr[0], 1]
        } else if (this.numArr.indexOf(rowIndex) >= 0) {
          const rowNum = this.numArr[this.numArr.indexOf(rowIndex) + 1] - this.numArr[this.numArr.indexOf(rowIndex)]
          return [rowNum, 1]
        } else {
          return [0, 0]
        }
      }
    },
    // 数组扁平
    flatten(arr) {
      var res = []
      for (var i = 0; i < arr.length; i++) {
        if (Array.isArray(arr[i])) {
          res = res.concat(this.flatten(arr[i]))
        } else {
          res.push(arr[i])
        }
      }
      return res
    },
    btnClick(val) {
      this.headFormValue = val
      if (this.headFormValue.btnName === 'search') {
        this.getList()
      }
    }
  }
}
</script>
