<template>
  <div class="process-prod">
    <!-- 设置检验项弹窗 -->
    <el-dialog
      :visible.sync="showProcessProd"
      width="800px"
      :before-close="beforeClose"
      append-to-body
      :title="$t('设置检验项')"
    >
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-if="!(optType === 'detail')"
          >{{ $t('common.add') }}</el-button
          >
        </el-col>
      </el-row>
      <el-table :data="tableData">
        <el-table-column :label="$t('检测项编码')" align="center" prop="indexCode" />
        <el-table-column :label="$t('检测项名称')" align="center" prop="indexName" />
        <el-table-column :label="$t('检测项类型')" align="center" prop="indexType">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.mes_index_type" :value="scope.row.indexType"/>
          </template>
        </el-table-column>
        <el-table-column :label="$t('检测工具')" align="center" prop="qcTool" />
        <el-table-column :label="$t('common.remark')" prop="remark" align="center" />
        <el-table-column
          :label="$t('common.option')"
          align="center"
          width="150"
          v-if="!(optType === 'detail')"
        >
          <template slot-scope="{ row, $index }">
            <el-button
              type="text"
              icon="el-icon-edit"
              size="small"
              @click="updateRow(row, $index)"
              >{{ $t('common.edit') }}</el-button
            >
            <el-button
              type="text"
              icon="el-icon-delete"
              size="small"
              @click="deleteRow($index)"
              >{{ $t('common.del') }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('common.option')"
          align="center"
          width="150"
          v-if="optType === 'detail'"
        >
          <template slot-scope="{ row, $index }">
            <el-button
              type="text"
              icon="el-icon-edit"
              size="small"
              @click="SearchRow(row, $index)"
              >{{$t('查看详情')}}</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer">
        <el-button type="primary" size="small" @click="cancleConnect"
        >{{$t('role.close')}}</el-button
        >
      </div>
    </el-dialog>

    <!-- 编辑检验项关联信息 -->
    <el-dialog
      :visible.sync="editConnectVisible"
      width="800px"
      :title="$t('检验项关联信息')"
    >
      <el-form ref="form" :model="form" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('检测项编码')" prop="indexCode" >
              <el-input v-model="form.indexCode" 
                        readonly>
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="$refs['QcindexSelectRef'].showFlag = true"
                ></el-button>
              </el-input>
              <QcindexSelect ref="QcindexSelectRef" @onSelected="onQcindexSelect" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('common.remark')" 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"
        v-if="!(optType === 'detail')"
        >{{$t('确认')}}</el-button
        >
        <el-button size="small" @click="editConnectVisible = false"
        >{{ $t('common.cancel') }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>


  import QcindexSelect from "@/components/qcindexSelect/single.vue";
  export default {
    props: {
      process: {
        type: Object,
        default: () => ({}),
      },
    },
    components: { QcindexSelect },
    dicts: ['mes_index_type'],
    data() {
      return {
        optType: "add",
        form: {
          indexCode: "",
          indexName: "",
          indexType: "",
          qcTool:"",
          qcindexId:"",
          remark: "",
        },
        currentRowIdx: undefined,
        tableData: [],
        selectedItemId: undefined,
        selectedRows: null,
        showFlag: false,
        optType:null,
        showProcessProd: false,
        editConnectVisible: false,
      };
    },
    computed: {
      title() {
        return this.$t('设置') + this.process.itemName + this.$t('检验项');
      },
    },
    watch: {
      process: {
        handler(val) {
          this.tableData = val.qcindexList;
        },
        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;
    },
    /**查看详情 */
    SearchRow(row, idx) {
      this.resetForm();
      Object.assign(this.form, row);
      this.currentRowIdx = idx;
      this.optType = "detail";
      this.editConnectVisible = true;
    },
      /**新增 */
      configmSelect() {
        if (this.form.indexCode == null || this.form.indexCode == 0) {
          return;
        }
        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("updateQcindex", this.tableData);
        this.showProcessProd = false;
      },
      beforeClose(done) {
        // 更新父组件的processItemList
        this.$emit("updateQcindex", this.tableData);
        done();
      },
      /**重置表单 */
      resetForm() {
        this.form = {
          indexCode: "",
          indexName: "",
          indexType: "",
          qcTool:"",
          qcindexId:"",
          remark: "",
        };
      },
      onQcindexSelect(row){
        if (row != undefined && row != null) {
          this.form.indexCode = row.indexCode;
          this.form.indexName = row.indexName;
          this.form.qcTool = row.qcTool;
          this.form.qcindexId = row.indexId;
        }
      }
    },
  };
</script>

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