<template>
  <div class="process-prod">
    <!-- 设置工装量具弹窗 -->
    <el-dialog
      :visible.sync="showProcessProd"
      width="800px"
      :before-close="beforeClose"
      append-to-body
      title="设置工装量具"
    >
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
          >新增</el-button
          >
        </el-col>
      </el-row>
      <el-table :data="tableData">
        <el-table-column label="编号" align="center" prop="toolCode" >
        </el-table-column>
        <el-table-column label="名称" align="center" prop="toolName" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="品牌" align="center" prop="brand" :show-overflow-tooltip="true"/>
        <el-table-column label="型号" align="center" prop="spec" :show-overflow-tooltip="true"/>
        <el-table-column label="类型" align="center" prop="toolTypeName" />
        <el-table-column label="要求数量" align="center" prop="quantity" />
        <el-table-column label="备注" prop="remark" align="center" />
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="{ row, $index }">
            <el-button
              type="text"
              icon="el-icon-edit"
              size="small"
              @click="updateRow(row, $index)"
            >修改</el-button
            >
            <el-button
              type="text"
              icon="el-icon-delete"
              size="small"
              @click="deleteRow($index)"
            >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer">
        <el-button type="primary" size="small" @click="cancleConnect"
        >关闭</el-button
        >
      </div>
    </el-dialog>

    <!-- 编辑工装量具关联信息 -->
    <el-dialog
      :visible.sync="editConnectVisible"
      width="800px"
      title="编辑工装量具关联信息"
    >
      <el-form ref="form" :model="form" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="工装量具编码" prop="toolCode" >
              <el-input v-model="form.toolCode"  placeholder="请选择测项编码"
                        readonly>
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="$refs['TmToolSelectRef'].showFlag = true"
                ></el-button>
              </el-input>
              <TmToolSelect ref="TmToolSelectRef" @onSelected="onTmToolSelect" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="要求数量" prop="quantity">
              <el-input
                type="number"
                v-model="form.quantity"
                placeholder="请输入要求数量"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" :rows="3"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button type="primary" size="small" @click="addOrEditubmit"
        >确认</el-button
        >
        <el-button size="small" @click="editConnectVisible = false"
        >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import TmToolSelect from "@/components/TmTool/index.vue";
  export default {
    props: {
      process: {
        type: Object,
        default: () => ({}),
      },
    },
    components: { TmToolSelect },
    dicts: ['mes_index_type'],
    data() {
      return {
        form: {
          toolCode: "",
          toolName: "",
          brand: "",
          spec:"",
          toolTypeName:"",
          remark: "",
          quantity: "",
          toolId:"",
        },
        currentRowIdx: undefined,
        tableData: [],
        selectedItemId: undefined,
        selectedRows: null,
        showFlag: false,
        optType:null,
        showProcessProd: false,
        editConnectVisible: false,
      };
    },
    computed: {
      title() {
        return "设置" + this.process.itemName + "工装量具";
      },
    },
    watch: {
      process: {
        handler(val) {
          this.tableData = val.toolList;
        },
        deep: true,
      },
    },
    methods: {
      handleRowChange(row) {
        if (row) {
          this.selectedRows = row;
        }
      },
      handleRowDbClick(row) {
        if (row) {
          this.selectedRows = row;
          this.tableData.unshift(this.selectedRows);
          this.showFlag = false;
        }
      },
      /**新增按钮 */
      handleAdd() {
        this.resetForm();
        this.optType='add';
        this.editConnectVisible = true;
      },
      /**编辑 */
      updateRow(row, idx) {
        this.resetForm();
        Object.assign(this.form, row);
        this.currentRowIdx = idx;
        this.optType='edit';
        this.editConnectVisible = true;
      },
      /**新增 */
      configmSelect() {
        if (this.form.toolCode == null || this.form.toolCode == 0) {
          return;
        }
        console.log(this.process.processId);
        this.tableData.unshift({
          ...this.form,
          processId: this.process.processId,

        });
        this.editConnectVisible = false;
      },
      /** 提交编辑关联信息 */
      submitEditConnect() {
        this.tableData.splice(this.currentRowIdx, 1, {
          ...this.form,
        });
        this.editConnectVisible = false;
      },
      addOrEditubmit(){
        if(this.optType=='add'){
          this.configmSelect();
        }else{
          this.submitEditConnect();
        }
      },
      deleteRow(index) {
        this.tableData.splice(index, 1);
      },
      cancleConnect() {
        this.$emit("updateTool", this.tableData);
        this.showProcessProd = false;
      },
      beforeClose(done) {
        // 更新父组件的processItemList
        this.$emit("updateTool", this.tableData);
        done();
      },
      /**重置表单 */
      resetForm() {
        this.form = {
          toolCode: "",
          toolName: "",
          brand: "",
          spec:"",
          toolTypeName:"",
          toolId:"",
          quantity: "",
          remark: "",
        };
      },
      onTmToolSelect(row){
        if (row != undefined && row != null) {
          this.form.toolCode = row.toolCode;
          this.form.toolName = row.toolName;
          this.form.brand = row.brand;
          this.form.spec = row.spec;
          this.form.toolTypeName = row.toolTypeName;
          this.form.toolId = row.toolId;
        }
      }
    },
  };
</script>

<style>
  .process-prod {
    padding: 0 20px;
  }
</style>
