<template>
  <VueScrollbar :class="$style.content">
    <div :class="$style['flaw-detail']">
      <div :class="$style['flaw-title']">
        设备名称
      </div>
      <div :class="$style['flaw-title']">
        配方名称
      </div>
      <div :class="$style['flaw-title']">
        物料bom
      </div>
      <div :class="$style['flaw-title']">
        工艺类型
      </div>
      <div :class="$style['flaw-title']">
        描述
      </div>
      <div :class="$style['flaw-title']">
        备注
      </div>
      <div :class="$style['flaw-btns']">
        <el-button
          type="success"
          icon="el-icon-plus"
          circle
          @click="flawAdd()"
        />
      </div>
    </div>
    <div
      v-for="(item, index) in process.processFlowEquipmentParams"
      :key="index"
      :class="$style['flaw-detail']"
    >
      <el-select
        v-model="item.equipmentId"
        :class="$style['flaw-select']"
        filterable
        clearable
        placeholder="请选择"
        @change="equipmentChange($event, item)"
      >
        <el-option
          v-for="equipment in equipmentList"
          :key="equipment.id"
          :label="equipment.name"
          :value="equipment.id"
        />
      </el-select>
      <el-select
        v-model="item.equipmentRecipeId"
        :class="$style['flaw-select']"
        filterable
        clearable
        placeholder="请选择"
      >
        <el-option
          v-for="param in item.params"
          :key="param.id"
          :label="param.name"
          :value="param.id"
        />
      </el-select>
      <el-select
        v-model="item.equipmentBomId"
        :class="$style['flaw-select']"
        filterable
        clearable
        placeholder="请选择"
      >
        <el-option
          v-for="bom in item.boms"
          :key="bom.id"
          :label="bom.name"
          :value="bom.id"
        />
      </el-select>
      <el-select
        v-model="item.nodeType"
        :class="$style['flaw-select']"
        filterable
        clearable
        placeholder="请选择"
      >
        <el-option
          v-for="nodeType in nodeTypes"
          :key="nodeType.value"
          :label="nodeType.label"
          :value="nodeType.value"
        />
      </el-select>
      <el-input v-model="item.description" :class="$style['flaw-select']" />
      <el-input v-model="item.remark" :class="$style['flaw-select']" />
      <el-button
        type="success"
        icon="el-icon-plus"
        circle
        @click="flawAdd(item)"
      />
      <el-button
        type="danger"
        icon="el-icon-delete"
        circle
        @click="flawDel(item)"
      />
      <el-button
        type="info"
        icon="el-icon-document"
        circle
        @click="$emit('on-detail', item)"
      />
    </div>
  </VueScrollbar>
</template>
<script>
import {
  listAllEquipmentBom,
  listAllEquipmentRecipe,
  addProcessFlows,
  listProcessFlowNode
} from '@/api/art-manage/art.js'
import { listEquipment } from '@/api/material-manage/material'
import remove from 'lodash/remove.js'
import findIndex from 'lodash/findIndex.js'
import VueScrollbar from 'vue-perfect-scrollbar'
export default {
  name: 'ProcessTable',
  components: { VueScrollbar },
  props: {
    processFlowId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      defaultFlaws: [],
      process: {
        processFlowId: this.processFlowId,
        processFlowEquipmentParams: [
          {
            equipmentId: null,
            equipmentRecipeId: null,
            equipmentBomId: null,
            nodeType: null,
            processFlowId: this.processFlowId,
            remark: null,
            description: null,
            boms: [],
            params: []
          }
        ]
      },
      currentFlawRow: {},
      productDetBarcode: '',
      warehouseBarcode: '',
      equipmentList: [],
      equipmentBomList: [],
      equipmentParamList: [],
      // 1、上片设备，2、加工设备，3、下片设备
      nodeTypes: [
        {
          value: '1',
          label: '上片设备'
        },
        {
          value: '2',
          label: '加工设备'
        },
        {
          value: '3',
          label: '下片设备'
        }
      ]
    }
  },
  created() {
    this.init()
    this.$bus.on('on-process-save', this.save)
  },
  beforeDestroy() {
    this.$bus.off('on-process-save', this.save)
  },
  mounted() {},
  methods: {
    flawAdd(item) {
      const mid = [
        {
          equipmentId: null,
          equipmentRecipeId: null,
          equipmentBomId: null,
          nodeType: null,
          processFlowId: this.processFlowId,
          remark: null,
          description: null,
          boms: [],
          params: []
        }
      ]
      if (!item) {
        this.process.processFlowEquipmentParams = mid.concat(
          this.process.processFlowEquipmentParams
        )
        return
      }
      const index = findIndex(
        this.process.processFlowEquipmentParams,
        f => f === item
      )
      console.log(index)
      const { length } = this.process.processFlowEquipmentParams
      const beg = this.process.processFlowEquipmentParams.slice(0, index + 1)
      const end = this.process.processFlowEquipmentParams.slice(
        index + 1,
        length
      )

      this.process.processFlowEquipmentParams = [].concat(beg, mid, end)
    },
    flawDel(item) {
      console.log(item)
      remove(this.process.processFlowEquipmentParams, f => f === item)
      console.log(this.process.processFlowEquipmentParams)
      this.process.processFlowEquipmentParams = this.process.processFlowEquipmentParams.concat(
        []
      )
    },
    focusFlaw(item) {
      console.log(item)
      this.currentFlawRow = item
    },
    setFlaw(flaw) {
      console.log(flaw)
      this.currentFlawRow.description = flaw.defectName
      this.currentFlawRow.fabricId = flaw.id
    },
    reset() {
      console.log(this.defaultFlaws)
      this.process.processFlowEquipmentParams = JSON.parse(
        JSON.stringify(this.defaultFlaws)
      )
    },
    save() {
      const vm = this
      console.log(JSON.stringify(vm.process))
      if (vm.process.processFlowEquipmentParams.length === 0) {
        vm.$alert('工艺节点为空，您确定要保存吗？', '[温馨提示]', {
          confirmButtonText: '确定',
          callback: action => {
            console.log('保存')
            addProcessFlows(vm.process)
          }
        })
      } else {
        addProcessFlows(vm.process)
      }
    },
    async init() {
      const allBomRes = await listAllEquipmentBom()
      this.equipmentBomList = allBomRes.data
      const allRecipeRes = await listAllEquipmentRecipe()
      this.equipmentParamList = allRecipeRes.data
      const allEquipmentRes = await listEquipment()
      this.equipmentList = allEquipmentRes.data
      const allNodeRes = await listProcessFlowNode({ processFlowId: this.processFlowId })
      console.log(allNodeRes)
      const allNodes = allNodeRes.data
      console.log(allNodes)
      if (allNodes && allNodes.length === 0) {
        return
      }
      this.process.processFlowEquipmentParams = allNodes.map(m => {
        return {
          ...m,
          nodeType: null,
          processFlowId: this.processFlowId,
          boms: this.equipmentBomList.filter(f => f.equipmentId === m.equipmentId),
          params: this.equipmentParamList.filter(f => f.equipmentId === m.equipmentId),
          id: null
        }
      })
      console.log(this.process.processFlowEquipmentParams)
    },
    equipmentChange(val, item) {
      console.log(val, item)
      item.boms = this.equipmentBomList.filter(f => f.equipmentId === val)
      item.params = this.equipmentParamList.filter(f => f.equipmentId === val)
    }
  }
}
</script>
<style lang="scss" module>
$colWidth: 200px;
.content {
  padding: 16px;
  margin: 16px;
  position: relative;
  height: calc(100vh - 150px);
  .flaw-detail {
    width: 1400px;
    position: relative;
    display: flex;
    align-items: center;
    .flaw-title {
      position: relative;
      width: $colWidth;
      text-align: center;
      border: 1px solid #ccc;
      background-color: #eee;
      padding: 8px;
    }
    .flaw-btns {
      position: relative;
      width: $colWidth;
      text-align: left;
    }
    .flaw-select {
      position: relative;
      width: $colWidth;
      height: 40px;
    }
  }
}
</style>
