<template>
  <div class="mytablefdt" style="display: flex;justify-content: center;align-items: center;">
    <vxe-grid
      id="id"
      ref="xGridFd"
      :empty-text="emtext"
      :height="520"
      resizable
      :columns="tableColumn"
      :data="tableData"
      :show-header="false"
      align="center"
      @cell-click="cellClick"
      border=none
      :cell-style="cellStyle"
    >
    </vxe-grid>
  </div>
</template>

<script>
export default {
  name:'Zgt',
  props:{
    czbh:String,
  },
  data(){
    return{
      columns:[],
      tableData:[],
      tableColumn: [],
      tableDataMainAll:[],
      fds:[],
      emtext:''
    }
  },
  methods:{
    show(res){
      this.tableColumn=[]
      this.emtext=this.czbh+"尚未定义直观图请于分段制造部管理人员联系！"
      if(res.success) {
        const col = res.data.col;
        for (let i = 0; i <= col; i++) {
          let ii = i + '';
          let aaa = 'column' + ii.padStart(3, '0');
          this.columns.push(aaa);
          let temp1 = {
            title: `111`, width: "35px", field: `column${ii.padStart(3, '0')}`, type: "html",
            slots: {
              // 使用 JSX 渲染
              default: ({row, column}) => {
                return [
                  <a>{row[column.property]}</a>
                ]
              }
            }
          };
          this.tableColumn.push(temp1)
        }
        this.tableData=res.data.data
        this.tableDataMainAll=res.data.fdqk
        this.fds=res.data.fd
      }
    },
    cellClick({row,column}){
      if( row[column.field] ==='' ||  row[column.field]===undefined ||  row[column.field]===null){
        return
      }else{
        this.$confirm('是否选择'+ row[column.field] +'分段数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          distinguishCancelAndClose: false,
          type: 'warning'
        }).then(type => {
          this.row = row
          this.column = column
          this.tableDataMain = this.tableDataMainAll.filter((item) => {
            return item.fdh == row[column.field];
          });
        })
      }
    },
    cellStyle({ row, rowIndex, column }) {
      for(let index of this.fds) {
        if(index.fdh===row[column.property]){
          if(index.color==='green'){
            if (this.row === row && this.column === column) {
              return {
                backgroundColor: '#00FF00',
                border:'1px solid black',
                color:'blue'
              }
            }else{
              return {
                backgroundColor: '#00FF00',
                border:'1px solid black',
                color:'black'
              }
            }
          }
          if(index.color==='yellow'){
            if (this.row === row && this.column === column) {
              return {
                backgroundColor: '#FFFF00',
                border:'1px solid black',
                color:'blue'
              }
            }else{
              return {
                backgroundColor: '#FFFF00',
                border:'1px solid black',
                color:'black'
              }
            }
          }
          if(index.color==='red'){
            if (this.row === row && this.column === column) {
              return {
                backgroundColor: '#FF0000',
                border:'1px solid black',
                color:'blue'

              }
            }else{
              return {
                backgroundColor: '#FF0000',
                border:'1px solid black',
                color:'black'
              }
            }
          }
        }
      }

      if(row[column.property]){
        if (this.row === row && this.column === column) {
          return {
            border:'1px solid black',
            color:'blue'
          }
        }else{
          return {
            border:'1px solid black',
            color:'black'
          }
        }
      }
    },
  }
}
</script>
