<template>
  <div>
    <el-table :data="tableData">
      <el-table-column label="工序名称" prop="processName" align="center" />
      <el-table-column label="工序编码" prop="processCode" align="center" />
      <el-table-column
        label="与下一道工序关系"
        prop="linkType"
        align="center"
      />
      <el-table-column label="工作站" prop="workstationName" align="center" />
      <el-table-column label="标准工时" prop="stdWorkingTime" align="center" />
      <el-table-column label="甘特图显示颜色" prop="colorCode" align="center" />
      <el-table-column
        v-if="mode != 'info'"
        label="操作"
        align="center"
        width="300"
        fixed="right"
      >
        <template slot-scope="{ row, $index }">
          <el-button
            type="text"
            size="small"
            @click="openSetProd(row, $index)"
          >
            设置物料
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="openSetQrindex(row, $index)"
          >
            设置检验项
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="openSetTool(row, $index)"
          >
            设置工装量具
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="updateRow(row, $index)"
          >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <ProcessProd
      :process="currentRow"
      :bomList="bomList"
      ref="ProcessProdRef"
      @updateItem="updateItem"
    />
    <ProcessQcindex
      :process="currentRow"
      ref="ProcessQcindexRef"
    />
        <ProcessTool
          :process="currentRow"
          ref="ProcessToolRef"
        />


    <el-dialog
      v-dialogDrag
      :visible.sync="showFlag"
      width="800px"
      title="工序修改"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        inline
        label-width="100px"
        size="small"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="工作站" prop="workstationName">
              <el-input
                v-model="form.workstationName"
                disabled
                placeholder="请选择工作站信息"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="handleWorkstationSelect"
                ></el-button>
              </el-input>
              <WorkstationSelect
                ref="WorkstationSelect"
                :processId="form.processId"
                @onSelected="onWorkstationSelected"
              ></WorkstationSelect>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标准工时" prop="stdWorkingTime">
              <el-input
                type="number"
                v-model="form.stdWorkingTime"
                placeholder="请输入标准工时"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button type="default" @click="showFlag = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import ItemBomSelect from "@/components/itemBomSelect/single.vue";
  import ProcessProd from "./ProcessProd.vue";
  import ProcessQcindex from "./ProcessQcindex.vue";
  import ProcessTool from "./ProcessTool.vue";
  import WorkstationSelect from "@/components/workstationSelect/simpletableSingle.vue";
  export default {
    components: { ItemBomSelect, ProcessProd, ProcessTool, ProcessQcindex ,WorkstationSelect },
    inject: ["mode"],
    props: {
      bomList: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        /**弹窗状态 */
        showFlag: false,
        /**表格数据 */
        tableData: [],
        /**表单规则 */
        rules: {},
        /**表单初始化数据 */
        form: {
          stdWorkingTime: "",
          workstationId: "",
          workstationName: "",
        },
        currentRow: {},
        currentRowIndex: undefined,
      };
    },
    methods: {
      setList(rows) {
        this.tableData = rows.map((item) => {
          item.processItemList = [];
          item.qcindexList = [];
          item.toolList = [];
          return item;
        });
      },
      /** 更新工序的物料信息 */
      updateItem(items) {
        this.tableData[this.currentRowIndex].processItemList = items;
      },
      updateTool(items) {
        this.tableData[this.currentRowIndex].toolList = items;
      },
      updateQcindex(items) {
        this.tableData[this.currentRowIndex].qcindexList = items;
      },
      openSetProd(row, idx) {
        this.currentRow = row;
        this.currentRowIndex = idx;
        this.$refs["ProcessProdRef"].showProcessProd = true;
      },
      openSetQrindex(row, idx) {
        this.currentRow = row;
        this.currentRowIndex = idx;
        this.$refs["ProcessQcindexRef"].showProcessProd = true;
      },
      openSetTool(row, idx) {
        this.currentRow = row;
        this.currentRowIndex = idx;
        this.$refs["ProcessToolRef"].showProcessProd = true;
      },
      /**更新行 */
      updateRow(row, idx) {
        Object.assign(this.form, row);
        this.currentRowIndex = idx;
        this.showFlag = true;
      },
      /**表单提交 */
      submitForm() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            this.showFlag = false;
            this.tableData.splice(this.currentRowIndex, 1, {
              ...this.currentRow,
              ...this.form,
            });
          }
        });
      },
      getComData() {
        return this.tableData;
      },
      /**重置表单 */
      resetForm() {
        this.form = {
          stdWorkingTime: "",
          workstationId: "",
          workstationName: "",
        };
      },
      /**重置组件状态 */
      resetState() {
        this.resetForm();
        this.tableData = [];
      },
      // 查询工作站信息
      handleWorkstationSelect() {
        this.$refs.WorkstationSelect.showFlag = true;
      },
      onWorkstationSelected(row) {
        if (row != undefined && row != null) {
          this.form.workstationId = row.workstationId;
          this.form.workstationName = row.workstationName;
          this.form.stdWorkingTime = row.stdWorkingTime;
        }
      },
    },
  };
</script>

<style></style>
