<template>
  <div class="workspace-merge-table">
    <el-table :data="tableData" header-row-class-name="custom-table-header" @expand-change="expandChange" >
      <el-table-column type="expand">
        <template slot-scope="props">
          <common-table :data="showData[props.row.index]" :params="params" :field="field" @option="handleOption" />
        </template>
      </el-table-column>
      <el-table-column v-for="column in columnList" :label="column.label" :prop="column.prop" show-overflow-tooltip></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { workspaceOptions } from "./mixins";
import { formatDate, formatTableDate } from "@/utils";
import CommonTable from "./CommonTable";

export default {
  props: {
    commonData: Object,
    params: Object,
    field: []
  },
  mixins: [workspaceOptions],
  components: {
    CommonTable
  },
  data() {
    return {
      columnList: [],
      tableData: [],
      showData: []
    }
  },
  watch: {
    group() {
      this.initData()
    },
    data() {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    handleOption(data) {
      this.$emit('option', data)
    },
    expandChange(row, expandedRows) {
      let data = [], ids = []
      this.data.map(item => item.month = formatTableDate(item.createTime, 'YYYY-MM'))
      for (let key in row) {
        switch (parseInt(key)) {
          case 1:
            ids.push(this.data.filter(item => item.scenarioName&& item.scenarioName.indexOf(row[key]) !== -1).map(item => item.id))
            break;
          case 2:
            ids.push(this.data.filter(item => item.typeName&&item.typeName.indexOf(row[key]) !== -1).map(item => item.id))
            break;
          case 3:
            ids.push(this.data.filter(item => row[key] === item.clientName).map(item => item.id))
            break;
          case 5:
            ids.push(this.data.filter(item => row[key] === item.month).map(item => item.id))
            break;
        }
      }
      const newIds = ids.reduce((prev, cur) => {
        return prev.filter(v => cur.includes(v))
      });
      this.showData[row.index] = this.data.filter(item => newIds.indexOf(item.id) !== -1)
      // console.log(this.showData)
    },
    initData() {
      this.columnList = []
      this.tableData = []
      const groupList = this.commonData.QUERY_GROUP
      const clientList = [...new Set(this.data.filter(item => item.clientName).map(item => item.clientName))]
      const scenarioList = [...new Set(this.data.map(item => item.scenarioName).flat())]
      const typeList = [...new Set(this.data.map(item => item.typeName).flat())]
      const monthList = [...new Set(this.data.map(item => formatTableDate(item.createTime, 'YYYY-MM')))]
      for (let key of this.group) {
        this.columnList.push({
          prop: String(key),
          label: groupList.find(item => parseInt(item.value) === key).label
        })
        switch (key) {
          case 1:
            this.setTableData(scenarioList, key)
            break;
          case 2:
            this.setTableData(typeList, key)
            break;
          case 3:
            this.setTableData(clientList, key)
            break;
          case 5:
            this.setTableData(monthList, key)
            break;
        }
      }
      let i = 0
      this.tableData.map(item => this.$set(item, 'index', i++))
     var data2=[]
      for(var j=0;j<this.tableData.length;j++){
        // console.log(this.tableData[j])
        this.expandChange(this.tableData[j])
        // this.tableData[j].show=this.showData[j]
        if(this.showData[j].length!=0){
          data2.push(this.tableData[j])
        }
        
        // console.log(this.showData)
      }
      this.tableData=data2
    // console.log(this.tableData)
    },
    setTableData(data, key) {
      if (this.tableData.length === 0) {
        data.forEach(item => {
          let d = {}
          d[key] = item
          this.tableData.push(d)
        })
      } else {
        let f = []
        this.tableData.forEach(item => {
          data.forEach(d => {
            this.$set(item, key, d)
            f.push({ ...item })
          })
        })
        this.tableData = f
      }
    }
  }
}
</script>

<style lang="scss">
.workspace-merge-table {

}
</style>