<template>
  <div>
<!--    <el-row class="edit-table-operate">-->
<!--      <el-button size="small" icon="el-icon-plus" type="text" @click="handleAdd" >新增工序</el-button>-->
<!--    </el-row>-->

    <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">
        <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">
        <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">
        <el-checkbox slot-scope="d" v-model="d.row.isEnd" />
      </table-form-col>
      <table-form-col label="处理方式" :prop-prefix="propPrefix" prop="handleWay">
        <el-input slot-scope="d" v-model="d.row.handleWay" placeholder="请输入处理方式"/>
      </table-form-col>
      <table-form-col label="效果" :prop-prefix="propPrefix" prop="effect">
        <el-input slot-scope="d" v-model="d.row.effect" placeholder="请输入效果"/>
      </table-form-col>
      <table-form-col label="颜色" :prop-prefix="propPrefix" prop="color">
        <el-input slot-scope="d" v-model="d.row.color" placeholder="请输入颜色"/>
      </table-form-col>
      <table-form-col label="盖子颜色" :prop-prefix="propPrefix" prop="coverColor">
        <el-input slot-scope="d" v-model="d.row.coverColor" placeholder="请输入盖子颜色"/>
      </table-form-col>
<!--      <table-form-col label="排序" :prop-prefix="propPrefix" prop="sort" width="80">-->
<!--        <template slot-scope="d">{{d.row.sort}}</template>-->
<!--      </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,
    }
  },
  data () {
    return {
      showDeptDialog: false,
    }
  },
  computed: {
    deptQuery() {
      return {
      }
    }
  },
  methods: {
    // 新增
    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: null,
          isEnd: false,
          handleWay: null,
          effect: null,
          color: null,
          coverColor: null,
          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>
