<template>
  <div>
    <el-table
      :data="value"
      size="mini"
      stripe
      class="mini-table"
    >
      <el-table-column align="center" label="序号" width="50" type="index"/>
      <table-form-col label="生产车间" :prop-prefix="propPrefix" prop="deptId" required :rules="rules.deptId" width="250">
        <dept-input slot-scope="d" v-model="d.row.deptId"/>
      </table-form-col>
      <table-form-col label="数量" :prop-prefix="propPrefix" prop="num" required :rules="rules.num" width="250">
        <el-input-number slot-scope="d" v-model="d.row.num" :min="0" controls-position="right" style="width: 100%"/>
      </table-form-col>
      <table-form-col label="最终工序" :prop-prefix="propPrefix" prop="isEnd" width="100" tips="最终工序，表示该工序是产品的最终工序，每个产品有且仅有一个最终工序">
        <el-checkbox slot-scope="d" :value="d.row.isEnd" @change="handleIsEndChange(d.index)"/>
      </table-form-col>
      <table-form-col label="备注" :prop-prefix="propPrefix" prop="remark">
        <el-input slot-scope="d" v-model="d.row.remark" placeholder="请输入备注" :maxlength="200" show-word-limit />
      </table-form-col>
      <el-table-column label="操作" align="center" width="160">
        <template #header>
          <el-button size="small" icon="el-icon-plus" type="text" @click="handleAdd" >新增工序</el-button>
        </template>
        <template slot-scope="d">
          <el-button
            type="text"
            @click="handleChangeSort(d.$index, -1)"
            icon="el-icon-upload2"
            size="small"
          >上移</el-button>
          <el-button
            type="text"
            @click="handleChangeSort(d.$index, 1)"
            icon="el-icon-download"
            size="small"
          >下移</el-button>
          <el-button
            type="text"
            @click="handleDel(d.$index, d.row)"
            icon="el-icon-delete"
            size="small"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <dept-dialog
      :show.sync="showDeptDialog"
      :query="deptQuery"
      @select="handleSelectDept"
      multiple
    />
  </div>
</template>

<script>
import TableFormCol from '@/components/TableFormCol/index.vue'
import DeptTreeSelect from '@/components/Business/Dept/DeptTreeSelect.vue'
import BooleanTag from '@/components/BooleanTag/index.vue'
import DeptInput from '@/components/Business/Dept/DeptInput.vue'
import DeptDialog from '@/components/Business/Dept/DeptDialog.vue'

export default {
  name: "ProdProcessList",
  components: { DeptDialog, DeptInput, BooleanTag, DeptTreeSelect, TableFormCol },
  props: {
    // 数据
    value: {
      type: Array,
      default: () => ([])
    },
    rules: {
      type: Object,
      default: () => ({})
    },
    propPrefix: {
      type: String,
      default: null,
    },
    prod: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      showDeptDialog: false,
    }
  },
  computed: {
    deptQuery() {
      return {
      }
    }
  },
  methods: {
    // 只允许一个工序是最终工序
    handleIsEndChange(index) {
      this.value.forEach((item, idx) => {
        item.isEnd = idx === index;
      })
    },
    // 新增
    handleAdd() {
      this.showDeptDialog = true;
    },
    // 选中并新增
    handleSelectDept(deptList) {
      if (this.value == null) {
        this.$emit('input', []);
      }
      deptList.forEach(dept => {
        this.value.push({
          id: null,
          orderProdId: null,
          deptId: dept.deptId,
          num: this.prod.num,
          isEnd: false,
          remark: null,
          sort: this.getNewSort(),
        });
      })
      this.showDeptDialog = false;
      this.reorder();
    },
    // 删除行
    handleDel(index, row)  {
      this.$confirm(`是否删除第 ${index + 1} 行的工序?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.value.splice(index, 1)
      })
    },
    // 重新排序，根据sort字段，从小到大排序
    reorder() {
      this.value.sort((a, b) => a.sort - b.sort);
    },
    handleChangeSort(index, offset) {
      if (index + offset < 0) {
        return;
      }
      if (index + offset > this.value.length) {
        return;
      }
      // 交换顺序
      let upItem = this.value[index + offset];
      let current = this.value[index];
      let temp = upItem.sort;
      upItem.sort = current.sort;
      current.sort = temp;
      this.reorder();
    },
    // 获取最新的排序
    getNewSort() {
      let max = 0;
      this.value.forEach(item => {
        max = item.sort > max ? item.sort : max;
      })
      return max + 1;
    },
  }
}
</script>
