<template>
  <div>
<!--    <el-row class="edit-table-operate">-->
<!--      <el-button size="small" plain icon="el-icon-plus" type="success" @click="handleAdd" >新增产品</el-button>-->
<!--    </el-row>-->

    <el-table
      :data="form.prodList"
      size="mini"
      stripe
      :header-cell-style="headerCellStyle"
      class="mini-table"
    >
      <el-table-column type="expand" width="50" align="left">
        <template slot-scope="d">
          <div class="expand-container">
            <prod-process-list v-model="d.row.processList" :prop-prefix="`prodList[${d.$index}].processList`" :rules="rules.processList"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column type="index" width="50" align="center" label="序号"/>
      <table-form-col label="主图" prop-prefix="prodList" prop="picture" width="200">
        <template slot-scope="d">
          <hover-show>
            <template #show>
              <image-preview :src="d.row.picture" :width="50" :height="50"/>
            </template>
            <image-upload v-model="d.row.picture" :limit="1" :is-show-tip="false"/>
          </hover-show>
        </template>
      </table-form-col>
      <table-form-col label="名称" prop-prefix="prodList" prop="name" required :rules="rules.name">
        <el-input slot-scope="d" v-model="d.row.name" placeholder="请输入名称"/>
      </table-form-col>
      <table-form-col label="数量" prop-prefix="prodList" prop="num" required :rules="rules.num">
        <el-input-number slot-scope="d" v-model="d.row.num" placeholder="请输入数量" :min="0" controls-position="right" style="width: 100%"/>
      </table-form-col>
      <table-form-col label="加工商" prop-prefix="prodList" prop="workType" :rules="rules.workType" required>
        <el-select slot-scope="d" v-model="d.row.workType" placeholder="请选择加工商">
          <el-option v-for="item in dict.type.order_prod_work_type" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </table-form-col>
      <table-form-col label="物料编码" prop-prefix="prodList" prop="materialNo">
        <el-input slot-scope="d" v-model="d.row.materialNo" placeholder="请输入物料编码"/>
      </table-form-col>
      <table-form-col label="规格" prop-prefix="prodList" prop="spec">
        <el-input slot-scope="d" v-model="d.row.spec" placeholder="请输入规格"/>
      </table-form-col>
      <table-form-col label="成品" prop-prefix="prodList" prop="isEnd" width="80">
        <el-checkbox slot-scope="d" v-model="d.row.isEnd" />
      </table-form-col>
<!--      <table-form-col label="排序" prop-prefix="prodList" prop="sort" width="80">-->
<!--        <template slot-scope="d">{{d.row.sort}}</template>-->
<!--      </table-form-col>-->
      <table-form-col label="备注" prop-prefix="prodList" prop="remark">
        <template slot-scope="d">
          <el-input v-model="d.row.remark" placeholder="请输入备注" maxlength="200" show-word-limit type="textarea"/>
        </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>
  </div>
</template>

<script>
import TableFormCol from '@/components/TableFormCol/index.vue'
import ProdProcessList from '@/views/bst/order/edit/components/ProdProcessList.vue'
import BooleanTag from '@/components/BooleanTag/index.vue'
import HoverShow from '@/components/HoverShow/index.vue'

export default {
  name: "OrderProdList",
  dicts: ['order_prod_work_type'],
  components: { HoverShow, BooleanTag, ProdProcessList, TableFormCol},
  props: {
    form: {
      type: Object,
      default: () =>({
        prodList: [], // 产品列表
      })
    },
    rules: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      headerCellStyle: {
        backgroundColor: "#f5f7fa",
      },
    }
  },
  methods: {
    // 新增行
    handleAdd() {
      this.form.prodList.push(this.getNewRow())
      this.reorder();
    },
    getNewRow() {
      return {
        name:null,
        materialNo:null,
        picture:null,
        spec:null,
        num: null,
        remark:null,
        isEnd: false,
        workType: "1",
        sort: this.getNewSort(),
        processList: [],
      }
    },
    // 重新排序，根据sort字段，从小到大排序
    reorder() {
      if (this.form == null || this.form.prodList == null) {
        return;
      }
      this.form.prodList.sort((a, b) => a.sort - b.sort);
    },
    handleChangeSort(index, offset) {
      if (index + offset < 0) {
        return;
      }
      if (index + offset > this.form.prodList.length) {
        return;
      }
      // 交换顺序
      let upItem = this.form.prodList[index + offset];
      let current = this.form.prodList[index];
      let temp = upItem.sort;
      upItem.sort = current.sort;
      current.sort = temp;
      this.reorder();
    },
    // 获取最新的排序
    getNewSort() {
      let max = 0;
      if (this.form != null && this.form.prodList != null) {
        this.form.prodList.forEach(item => {
          max = item.sort > max ? item.sort : max;
        })
      }
      return max + 1;
    },
    // 删除行
    handleDel(index, row)  {
      this.$confirm(`是否删除第 ${index + 1} 行的产品?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.form.prodList.splice(index, 1)
      })
    }
  }
}
</script>
