<template>
  <el-drawer title="工艺流程" :visible.sync="visible" size="70%">
    <div class="box">
      <base-table
        :page="1"
        :limit="1000"
        :table-props="tableProps"
        :table-data="tableData"
        :max-height="tableH"
      >
        <method-btn
          v-if="tableBtn.length"
          slot="handleBtn"
          :width="180"
          label="操作"
          :method-list="tableBtn"
          @clickBtn="handleClick"
        />
      </base-table>
      <el-drawer
        title="工艺参数"
        :append-to-body="true"
        :visible.sync="processParametersVisible"
        size="50%"
      >
        <base-table
          :page="1"
          :limit="1000"
          :table-props="tablePropsP"
          :table-data="tableDataP"
          :max-height="tableH"
        />
      </el-drawer>
      <el-drawer
        title="设备参数"
        :append-to-body="true"
        :visible.sync="deviceParametersVisible"
        size="50%"
      >
        <div class="box">
          <base-table
            :page="1"
            :limit="1000"
            :table-props="tablePropsD"
            :table-data="tableDataD"
            :max-height="tableH"
          />
        </div>
      </el-drawer>
    </div>
  </el-drawer>
</template>
<script>
import { tableHeight } from '@/utils/index'
const tableProps = [
  {
    prop: 'processName',
    label: '工序名称',
    minWidth: 120
  },
  {
    prop: 'deviceName',
    label: '设备名称',
    minWidth: 120
  },
  {
    prop: 'glassId',
    label: '玻璃ID',
    minWidth: 150
  },
  {
    prop: 'deviceLaunchTime',
    label: '设备上片时间',
    minWidth: 160
  },
  {
    prop: 'deviceUnloadingTime',
    label: '设备下片时间',
    minWidth: 160
  },
  {
    prop: 'grindingTrayId',
    label: '面磨托盘ID',
    minWidth: 150
  }
]
const tableBtn = [
  {
    type: 'processParameters',
    btnName: '工艺参数'
  },
  {
    type: 'deviceParameters',
    btnName: '设备参数'
  }
]
const tablePropsP = [
  {
    prop: 'process',
    label: '工艺'
  },
  {
    prop: 'currentValue',
    label: '当前值'
  }
]
const tablePropsD = [
  {
    prop: 'device',
    label: '设备'
  },
  {
    prop: 'status',
    label: '状态'
  },
  {
    prop: 'changeTime',
    label: '变更时间'
  }
]
export default {
  name: 'processFlowDetail',
  data() {
    return {
      visible: false,
      tableProps,
      tableData: [],
      tableBtn,
      tableH: tableHeight(115),
      processParametersVisible: false,
      deviceParametersVisible: false,
      tablePropsP,
      tablePropsD,
      tableDataP: [
        { process: 'X切刀工作时的高度', currentValue: '20' },
        { process: 'X方向划线速度', currentValue: '6' }
      ],
      tableDataD: [
        {
          device: '面研磨上片工位_取纸机器人',
          status: '生产',
          changeTime: '2022-04-02 00:00:00 000'
        },
        {
          device: '面研磨上片工位_取纸机器人',
          status: '生产',
          changeTime: '2022-04-02 00:00:00 000'
        },
        {
          device: '面研磨上片工位_取纸机器人',
          status: '生产',
          changeTime: '2022-04-02 00:00:00 000'
        },
        {
          device: '面研磨上片工位_取纸机器人',
          status: '待料',
          changeTime: '2022-04-02 00:00:00 000'
        }
      ]
    }
  },
  methods: {
    init() {
      this.visible = true
      window.addEventListener('resize', () => {
        this.tableH = tableHeight(115)
      })
      for (let i = 0; i < 30; i++) {
        let obj = {}
        obj.processName = '1'
        obj.deviceName = '设备名称' + i
        obj.glassId = '玻璃ID' + i
        obj.deviceLaunchTime = '2022-08-22 08:12:15'
        obj.deviceUnloadingTime = '2022-08-22 08:12:15'
        obj.grindingTrayId = '面磨托盘ID' + i
        this.tableData.push(obj)
      }
    },
    handleClick(val) {
      console.log(val)
      if (val.type === 'processParameters') {
        this.processParametersVisible = true
      } else if (val.type === 'deviceParameters') {
        this.deviceParametersVisible = true
      }
    },
    handleCloseProcess() {},
    handleCloseDevice() {}
  }
}
</script>
<style lang="scss" scoped>
.box {
  padding: 0 32px;
}
</style>
