<template>
  <div class="newOperations">
    <!--    newOperations盒子开始-->
    <div class="left">
      <!--        左边第一个是隔离点组件-->
      <!--        第二个是车间组件-->

      <SeparationPoint
        v-show="this.activeName == 'second'"
        @selection-changed="handleSelectPoint"
        :points="points"
      ></SeparationPoint>
      <keep-alive>
        <WorkShop
          v-show="this.activeName == 'first' || this.activeName == 'third'"
          @product-line-selected="handleProductLineSelected"
          @work-shop-selected="handleWorkshopSelected"
          :jobProps="jobProps"
        ></WorkShop>
      </keep-alive>
    </div>
    <div class="right">
      <div class="right_top">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-size: 18px">{{ this.getTicketTitle }}</span>
            <span
              style="
                float: right;
                padding: 1px 0;
                font-size: 22px;
                cursor: pointer;
              "
              type="text"
              @click="goBack"
            >×</span
            >
          </div>
          <div class="text item">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="作业票信息" name="first">
                <!--                  新增作业票信息-->
                <el-form ref="form" :model="form" label-width="90px">
                  <el-form-item label="选择SOP" prop="sop">
                    <el-select
                      :disabled="this.getSopLook"
                      v-model="form.sopId"
                      placeholder="请选择sop"
                      clearable
                      style="width: 100%"
                      @clear="handleClearSop"
                      @change="handleSelectSOP"
                    >
                      <el-option
                        v-for="dict in this.sopOptions"
                        :key="dict.sopId"
                        :label="dict.sopName"
                        :value="dict.sopId"
                      />
                    </el-select>
                  </el-form-item>
                  <el-row>
                    <el-col :span="16">
                      <el-form-item label="作业票编号" prop="ticketCode">
                        <el-input
                          :disabled="this.getSopLook"
                          v-model="form.ticketCode"
                          placeholder="请输入作业票编号"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label-width="80">
                        <el-switch
                          :disabled="this.getSopLook"
                          v-model="autoGenFlag"
                          active-color="#13ce66"
                          active-text="自动生成"
                          @change="handleAutoGenChange(autoGenFlag)"
                        >
                        </el-switch>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-form-item label="作业票名称" prop="ticketName">
                    <el-input
                      :disabled="this.getSopLook"
                      v-model="form.ticketName"
                      placeholder="请输入作业票名称"
                      style="width: 100%"
                    />
                  </el-form-item>
                  <el-form-item label="作业票类型" prop="ticketType">
                    <el-select
                      :disabled="this.getSopLook"
                      v-model="form.ticketType"
                      placeholder="请选择作业类型"
                      clearable
                      style="width: 100%"
                    >
                      <el-option
                        v-for="dict in dict.type.ticket_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="作业内容" prop="ticketContent">
                    <el-input
                      :disabled="this.getSopLook"
                      type="textarea"
                      v-model="form.ticketContent"
                      :rows="4"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="" prop="" style="margin-top: 80%">
                    <el-button v-no-more-click
                      type="primary"
                      class="workTicket_btn"
                      @click="nextStep('second')"
                    >下一步
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="选择隔离点" name="second">
                <!-- 隔离点信息-->
                <el-form ref="form" :model="form" label-width="90px">
                  <el-form-item label="车间名称" prop="workshopName">
                    <el-input
                      v-model="form.workshopName"
                      placeholder="请输入车间名称"
                      style="width: 100%"
                      disabled
                    />
                  </el-form-item>
                  <el-form-item label="区域" prop="workline">
                    <el-input
                      v-model="form.workline"
                      placeholder="请输入区域"
                      style="width: 100%"
                      disabled
                    />
                  </el-form-item>
                  <div class="text item">
                    <p
                      style="color: #606266; font-weight: 600; font-size: 14px"
                    >
                      已选隔离点
                    </p>
                    <el-table
                      :data="tableData"
                      stripe
                      height="480"
                      style="width: 100%"
                    >
                      <el-table-column prop="pointId" label="序号" width="60">
                      </el-table-column>
                      <el-table-column prop="pointName" label="已选隔离点">
                        <template slot-scope="scope">
                          <span style="color: #2a87ff">{{
                              scope.row.pointName
                            }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="pointType" label="隔离点类型">
                        <template slot-scope="scope">
                          {{ scope.row.pointType }}
                          <!--                          <dict-tag-->
                          <!--                            :options="dict.type.point_type"-->
                          <!--                            :value="scope.row.pointType"-->
                          <!--                          />-->
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="powerType"
                        label="危险能量类型"
                        width="100"
                      >
                        <template slot-scope="scope">
                          {{ scope.row.powerType }}
                          <!--                          <dict-tag-->
                          <!--                            :options="dict.type.power_type"-->
                          <!--                            :value="scope.row.powerType"-->
                          <!--                          />-->
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <el-form-item label="" prop="">
                    <el-button v-no-more-click
                      style="float: right; height: 30px; line-height: 10px"
                      type="primary"
                      @click="nextStep('third')"
                    >下一步
                    </el-button>
                    <el-button v-no-more-click
                      plain
                      style="
                        float: right;
                        height: 30px;
                        line-height: 10px;
                        margin-right: 19%;
                      "
                      type="primary"
                      @click="previousStep('first')"
                    >上一步
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="人员选择" name="third">
                <!--人员选择-->
                <el-form ref="form" :model="form" label-width="70px">
                  <el-form-item label="开始时间" prop="ticketStartTime">
                    <el-date-picker
                      :disabled="this.getSopLook"
                      v-model="form.ticketStartTime"
                      type="datetime"
                      placeholder="选择日期时间"
                      align="right"
                      :picker-options="pickerOptions"
                      style="width: 100%"
                      @change="ticketStartTimeChange"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="结束时间" prop="ticketEndTime">
                    <el-date-picker
                      :disabled="this.getSopLook"
                      v-model="form.ticketEndTime"
                      type="datetime"
                      placeholder="选择日期时间"
                      align="right"
                      :picker-options="pickerOptions"
                      style="width: 100%"
                      @change="ticketEndTimeChange"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="上锁人" prop="locker">
                    <el-select
                      :disabled="this.getSopLook"
                      v-model="form.locker"
                      placeholder="上锁人"
                      clearable
                      style="width: 100%"
                      @change="handlelockerChage"
                    >
                      <el-option
                        v-for="dict in this.listUserOption"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                  <!--
                  <el-form-item label="共锁人" prop="coLocker">
                    <el-select
                      v-model="form.coLocker"
                      placeholder="共锁人"
                      clearable
                      multiple
                      style="width: 100%"
                      @change="handleCoLockerChange"
                      ref="coLockerSelect"
                    >
                      <el-option
                        v-for="dict in sortedTicketUserDTOList"
                        :key="dict.userId"
                        :label="dict.username"
                        :value="dict.username"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item> -->
                  <el-form-item label="共锁人" prop="coLocker">
                    <el-button v-no-more-click
                      type="primary"
                      @click="addInside"
                      class="gsr"
                      size="mini"
                    >添加内部人员
                    </el-button>
                    <el-button v-no-more-click type="primary" @click="addOutside" size="mini"
                    >添加外部人员
                    </el-button>
                  </el-form-item>
                  <div class="text item">
                    <el-table
                      :data="sortedTicketUserDTOList"
                      stripe
                      height="400"
                      style="width: 100%"
                    >
                      <el-table-column prop="userId" label="序号" width="50">
                      </el-table-column>
                      <el-table-column
                        prop="userName"
                        label="共锁人"
                        width="120"
                      >
                        <template slot-scope="scope">
                          <span style="color: #2a87ff">{{
                              scope.row.userName
                            }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="userRole" label="共锁人来源">
                        <template slot-scope="scope">
                          <span>{{
                              scope.row.userRole == "0" ? "内部" : "外部"
                            }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="" width="80">
                        <template slot-scope="scope">
                          <el-button v-no-more-click
                            @click.native.prevent="
                              deleteRow(scope.$index, sortedTicketUserDTOList)
                            "
                            type="text"
                            size="small"
                          >
                            移除
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>

                  <el-form-item label="" prop="">
                    <el-button v-no-more-click
                      style="float: right; height: 30px; line-height: 10px"
                      type="primary"
                      @click="confirm"
                    >完 成
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </div>
    </div>
    <!-- 添加或修改设备维修单对话框 -->
    <el-dialog
      :visible.sync="open"
      width="450px"
      append-to-body
      style="margin-top: 13%"
    >
      <div slot="title" class="dialog-title">
        <i></i>
        <span class="title">{{ title }}</span>
      </div>
      <el-form
        ref="dialogForm"
        :model="dialogForm"
        :rules="rules"
        label-width="70px"
      >
        <el-form-item label="部门" prop="deptId" v-if="insideMumber">
          <el-select
            v-model="dialogForm.deptId"
            placeholder="请选择部门"
            clearable
            style="width: 100%"
            @change="DeptChage"
          >
            <el-option
              v-for="dict in this.listDeptOption"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择人员" prop="nickName" v-if="insideMumber">
          <el-select
            v-model="dialogForm.nickName"
            placeholder="请选择人员"
            clearable
            style="width: 100%"
            multiple
            @change="changeInsideUser"
          >
            <el-option
              v-for="dict in this.listUserOption"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="人员ID" prop="mumberId" v-if="outsideMumber">
          <el-input
            v-model="dialogForm.username"
            placeholder="请输入人员ID"
            style="width: 100%"
            @change="outSideUserInput"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-no-more-click type="primary" @click="cancel">确认</el-button>
        <el-button v-no-more-click @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!--    newOperations盒子结束-->
  </div>
</template>


<script>
import SeparationPoint from "@/components/separationPoint/index1.vue";
import WorkShop from "@/components/separationPoint/workshop.vue";
import {
  listJobTicket,
  getJobTicketInfo,
  addJobTicket,
  updateJobTicket,
  deleteIsJobTicket,
  getworkareaList,
} from "@/api/mes/job/job";

import { mapGetters, mapActions } from "vuex";

import { listWorkshop } from "@/api/mes/md/workshop";
import { listWorkarea } from "@/api/mes/wa/workarea";
import { getIsSopPage } from "@/api/mes/sop/sopindex-booz";
import { listUser } from "@/api/system/user";
import { listDept } from "@/api/system/dept";
import IsolationLeftVue from "@/components/separationPoint/index1.vue";
import { genCode } from "@/api/system/autocode/rule";

export default {
  name: "addView",
  dicts: ["ticket_type", "power_type", "point_type", "is_user_type"],
  components: {
    IsolationLeftVue,
    SeparationPoint,
    WorkShop,
  },
  data() {
    return {
      //自动生成编码
      autoGenFlag: false,
      activeName: "first",
      form: {
        sopId: "",
        pointIds: "",
        ticketId: "",
        ticketType: "",
        ticketName: "",
        ticketCode: "",
        ticketContent: "",
        workshopName: "", //车间名称
        workline: "", //区域
        spoint: [], //已选隔离点
        locker: "", //上锁人
        coLocker: "", //共锁人
        ticketStartTime: "", //开始时间
        ticketEndTime: "", //结束时间
        ticketUserDTOList: [
          // {
          //   userId: '',
          //   userName: '',
          //   userRole: '',//作业票角色 暂时不传递 内部人还是外部人
          //   userType: ''//用户类型 上锁人或共锁人
          // }
        ], //所选择的用户
      },
      // 用来清空form
      initialFormState: {
        // 初始状态对象
        sopId: "",
        pointIds: "",
        ticketId: "",
        ticketType: "",
        ticketName: "",
        ticketCode: "",
        ticketContent: "",
        workshopName: "", //车间名称
        workline: "", //区域
        spoint: [], //已选隔离点
        locker: "", //上锁人
        coLocker: "", //共锁人
        ticketStartTime: "", //开始时间
        ticketEndTime: "", //结束时间
        ticketUserDTOList: [
          // {
          //   userId: '',
          //   userName: '',
          //   userRole: '',//作业票角色 暂时不传递 内部人还是外部人
          //   userType: ''//用户类型 上锁人或共锁人
          // }
        ], //所选择的用户
      },
      dialogForm: {
        deptId: "",
        nickName: "",
        username: "",
      },
      listUserOption: null,
      listDeptOption: null,
      // 已选隔离点
      tableData: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      // 是否显示弹出层
      open: false,
      // 弹出层标题
      title: "",
      // 弹框中显示的form表单内容
      insideMumber: false,
      outsideMumber: false,
      points: null, //逆向传递拿到隔离点的数据
      sopOptions: [], //sop下拉
      jobProps: [], //正向传递给车间components

      // 表单校验
      rules: {
        teamCode: [
          { required: true, message: "班组编号不能为空", trigger: "blur" },
        ],
        teamName: [
          { required: true, message: "班组名称不能为空", trigger: "blur" },
        ],
        calendarType: [
          { required: true, message: "清选择班组类型", trigger: "blur" },
        ],
      },
      newticketUserDTOList: [], //为了上锁人单独传递数据
    };
  },
  watch: {
    tableData: {
      handler(newVal) {
        // 将 pointId 提取出来并连接成一个字符串
        if (newVal && newVal.length > 0) {
          this.form.pointIds = this.tableData
            .map((item) => item.pointId)
            .join(",");
          // console.log(this.form.pointIds, this.tableData, 'pointIds')
        }
      },
      deep: true,
    },
    "form.ticketStartTime": {
      handler(newVal) {
        if (newVal && newVal.length > 0) {
          console.log(newVal, "编辑监听开始时间");
          this.ticketStartTimeChange(newVal);
        }
      },
    },
  },
  computed: {
    ...mapGetters("sopSelectPoints", [
      "getPointTableData",
      "getSelectSopPoints",
      "getSopEdit",
      "getTicketTitle",
      "getSopLook",
    ]),
    // 排序 ticketUserDTOList，将 userRole 为 0 的选项放在前面
    sortedTicketUserDTOList() {
      return this.form.ticketUserDTOList.sort(
        (a, b) => Number(a.userRole) - Number(b.userRole)
      );
    },
  },
  mounted() {
    this.getSopList();
    this.getUser();
    if (this.$route.query.ticketId !== "null") {
      this.getTicket();
      this.form.ticketId = this.$route.query.ticketId;
      if (this.getSopLook) {
        this.setTicketTitle("查看作业票");
      } else {
        this.setTicketTitle("编辑作业票");
      }
    } else {
      this.setSelectSopPoints([]);
      this.setPointTableData([]);
      this.setTicketTitle("新建作业票");
    }
    // console.log(this.getPointTableData, 'this.getPointTableData')
    if (this.getPointTableData) {
      this.tableData = this.getPointTableData.pointDetailVOList.map((item) => {
        return {
          pointId: item.pointId,
          pointName: item.pointName,
          pointType: item.pointType,
          powerType: item.powerType,
        };
      });
    }
  },

  methods: {
    // 编辑的时候给隔离点重新存储值
    ...mapActions("sopSelectPoints", [
      "setSelectSopPoints",
      "setPointTableData",
      "setSopEdit",
      "setTicketTitle",
    ]),
    formatDateTime(date) {
      const year = date.getFullYear().toString().padStart(2, "0");
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      const hours = date.getHours().toString().padStart(2, "0");
      const minutes = date.getMinutes().toString().padStart(2, "0");
      const seconds = date.getSeconds().toString().padStart(2, "0");

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    getTicket() {
      this.getUser();

      const ticketId = this.$route.query.ticketId;
      getJobTicketInfo(ticketId).then((response) => {
        console.log(response, "编辑拿到路由参数");
        this.form = {
          ...this.form,
          workshopId: response.data.workshopId,
          workareaId: response.data.workareaId,
          sopId: response.data.sopId,
          ticketCode: response.data.ticketCode,
          ticketContent: response.data.ticketContent,
          spoint: response.data.pointDetailVOList,
          ticketUserDTOList: response.data.jobTicketUserList
            .filter((item) => item.userType !== "0")
            .map((item) => ({
              userName: item.userName,
              userType: item.userType,
              userRole: item.userRole,
              userId: item.userId,
            })),
          // ticketUserDTOList: response.data.jobTicketUserList.map((item) => {
          //   return {
          //     userName: item.userName,
          //     userType: item.userType,
          //     userRole: item.userRole,
          //     userId: item.userId
          //   }
          // }),
          locker: response.data.jobTicketUserList
            .filter((item) => item.userType == "0")
            .map((item) => item.userName),
          coLocker: response.data.jobTicketUserList.map((item) => {
            return item.userType !== "0" ? item.userName : null;
          }),
          ticketStartTime: response.data.ticketStartTime,
          ticketEndTime: response.data.ticketEndTime,
          ticketId: response.data.ticketId,
          ticketName: response.data.ticketName,
          ticketStatus: response.data.ticketStatus,
          ticketType: response.data.ticketType,
          EditBool: true,
        };
        this.jobProps = [this.form];
        // this.listUserOption = response.data.jobTicketUserList
        console.log(this.form, "form");
      });
    },

    getSopList() {
      const query = {
        current: 1,
        size: 100000,
      };
      getIsSopPage(query).then((res) => {
        console.log(res, "sop列表接口");
        // 插入一个默认的空选项
        const defaultOption = {
          sopId: null,
          sopName: "不使用sop模板  ",
        };

        // 将默认选项添加到结果的最前面
        this.sopOptions = [defaultOption, ...res.data.records];
      });
    },
    getUser() {
      const query = {
        pageNum: 1,
        pageSize: 100000,
      };
      listUser(query).then((res) => {
        // console.log(res, '用户列表')
        this.listUserOption = res.rows.map((item) => {
          return {
            label: item.nickName,
            value: item.userId,
          };
        });
      }),
        listDept(query).then((res) => {
          // console.log(res, '部门列表')
          this.listDeptOption = res.data.map((item) => {
            return {
              label: item.deptName,
              value: item.deptId,
            };
          });
        });
    },
    // 添加内部人员 部门下拉的chage事件
    DeptChage(val) {
      console.log(val, " 部门下拉");
      // 每次选中先清空用户下拉
      // this.listUserOption = []
      this.dialogForm.nickName = null;
      const query = {
        pageNum: 1,
        pageSize: 100000,
        deptId: this.dialogForm.deptId,
      };
      listUser(query).then((res) => {
        console.log(res, "用户列表");
        this.listUserOption = res.rows.map((item) => {
          return {
            label: item.nickName,
            value: item.userId,
          };
        });
      });
    },
    // sop下拉change事件 可以传递sopOptions一整个对象过去
    handleSelectSOP(value) {
      if (value == null) {
        this.jobProps = [];
        console.log(this.form.sopId, this.form, "sop下拉change事件");
      } else {
        this.jobProps = this.sopOptions.filter((item) => item.sopId == value);
        this.form.ticketType = this.jobProps[0].sopType;
        this.form.ticketName = "sop_";
        console.log(this.jobProps, "父组件jobProps");
      }
    },
    // 清除sop下拉框
    handleClearSop() {
      this.form.ticketType = "";
      this.form.ticketName = "";
    },
    // 上锁人下拉选择change事件
    handlelockerChage(val) {
      console.log(val, "上锁人chage");
      const user = this.listUserOption.find((item) => item.value === val);

      if (user && this.form.locker !== "") {
        const existingUser = this.form.ticketUserDTOList.find(
          (u) => u.userName === user.label
        );
        if (!existingUser) {
          this.newticketUserDTOList.push({
            userName: user.label,
            userId: user.value,
            userType: 0,
            userRole: "0",
          });
          // this.form.ticketUserDTOList.push({
          //   userName: user.label,
          //   userId: user.value,
          //   userType: 0,
          //   userRole: '0',
          // })
          console.log(this.newticketUserDTOList, "用户");
        } else {
          // console.log('用户已存在', user.label)
        }
      }
    },

    // 添加内部人员的用户新增到ticketUserDTOList这个数据里
    changeInsideUser(values) {
      const usersinside = values
        .map((value) =>
          this.listUserOption.find((item) => item.value === value)
        )
        .filter(Boolean);
      usersinside.forEach((user) => {
        const existingUser = this.form.ticketUserDTOList.find(
          (u) => u.userName === user.label
        );
        // console.log(usersinside, 'usersinside----67')
        if (!existingUser) {
          this.form.ticketUserDTOList.push({
            userName: user.label,
            userId: user.value,
            userType: 1,
            userRole: 0,
            bgColor: "green",
          });
          console.log(this.form.ticketUserDTOList, "用户");
        } else {
          // console.log('用户已存在', user.label)
        }
      });
      this.updateCoLocker();

      // console.log(this.form.ticketUserDTOList, '用户')
    },
    // 添加外部人员 输入名称 userType==1是共锁人 0是上锁人 userId==0
    outSideUserInput(value) {
      // console.log(value, '外部人员名称')
      const existingUser = this.form.ticketUserDTOList.find(
        (u) => u.userName === value
      );

      if (!existingUser) {
        this.form.ticketUserDTOList.push({
          userName: value,
          userId: 0,
          userType: 1,
          userRole: 1,
          bgColor: "red",
        });
        console.log(this.form.ticketUserDTOList, "用户");
      } else {
        // console.log('用户已存在', value)
      }
      this.updateCoLocker();
    },
    // 更新界面中共锁人下拉框显示的内容
    // 更新 coLocker 数据
    updateCoLocker() {
      // 获取现有的 coLocker 数据
      const existingCoLocker = new Set(this.form.coLocker);
      // console.log(existingCoLocker, 'existingCoLocker----1');

      // 将 ticketUserDTOList 中的新用户名字添加到 existingCoLocker 中

      this.form.ticketUserDTOList.forEach((user) => {
        existingCoLocker.add(user.userName);
      });
      // console.log(this.form.ticketUserDTOList, 'this.form.ticketUserDTOList----2');

      // 将 Set 转换回数组
      this.form.coLocker = Array.from(existingCoLocker);
      // console.log(this.form.coLocker, 'this.form.coLocker----3');

      // 检查并补充 ticketUserDTOList 中缺少的用户
      this.form.coLocker.forEach((name) => {
        const existingUser = this.form.ticketUserDTOList.find(
          (u) => u.userName === name
        );

        if (!existingUser) {
          this.form.ticketUserDTOList.push({
            userName: name,
            userId: 0,
            userType: 1,
            userRole: 1,
            bgColor: "red",
          });
        }
      });

      console.log(this.form.ticketUserDTOList, "最终的 ticketUserDTOList");
    },
    // 设置多选下拉框样式
    // updateTagBackgrounds() {
    //   this.$nextTick(() => {
    //     const elTags = this.$refs.coLockerSelect.$el.querySelectorAll('.el-tag')
    //
    //     elTags.forEach(tag => {
    //       const tagText = tag.textContent.trim()
    //       const option = this.form.ticketUserDTOList.find(dict => dict.userName === tagText)
    //
    //       if (option) {
    //         tag.style.backgroundColor = option.bgColor
    //
    //       }
    //     })
    //   })
    // },
    // 共锁人下拉框删除事件
    // handleCoLockerChange(newValues) {
    //   console.log(newValues, 'ticketUserDTOList-newsValue')
    //
    //   // 根据新值更新 this.form.ticketUserDTOList
    //   this.form.ticketUserDTOList = this.form.ticketUserDTOList.filter((user) =>
    //     newValues.includes(user.userName)
    //   )
    //
    //   // 更新 coLocker 显示的内容
    //   this.updateCoLocker()
    // },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    previousStep(val) {
      this.activeName = val;
    },
    nextStep(val) {
      console.log(val, "nextStep");
      this.activeName = val;
      console.log("我点击了下一步");
    },
    async getWorkareaId(query) {
      try {
        const res = await listWorkarea(query);
        console.log(res, "作业区域page");
        return res.data.records[0].workareaId;
      } catch (error) {
        console.error("获取作业区域ID失败", error);
        throw error;
      }
    },

    async getWorkshopId(query) {
      try {
        const res = await listWorkshop(query);
        console.log(res, "车间id");
        return res.rows[0].workshopId;
      } catch (error) {
        console.error("获取车间ID失败", error);
        throw error;
      }
    },

    async confirm() {
      try {
        // 格式化时间
        this.form.ticketStartTime = this.formatDateTime(
          new Date(this.form.ticketStartTime)
        );
        this.form.ticketEndTime = this.formatDateTime(
          new Date(this.form.ticketEndTime)
        );
        console.log(this.form, "拿到的所有参数确认");

        const query = {
          current: 1,
          size: 100000,
          workareaName: this.form.workline,
        };

        const query1 = {
          current: 1,
          size: 100000,
          workshopName: this.form.workshopName,
        };

        const workareaId = await this.getWorkareaId(query);
        const workshopId = await this.getWorkshopId(query1);

        // 合并 newticketUserDTOList 到 this.form.ticketUserDTOList
        if (this.form.locker) {
          const selectedUser = this.listUserOption.find(
            (option) => option.label === this.form.locker
          );
          if (selectedUser) {
            this.form.ticketUserDTOList.push({
              userName: selectedUser.label,
              userId: selectedUser.value,
              userType: "0",
              userRole: "0",
            });
          }
        }
        this.form.ticketUserDTOList.push(...this.newticketUserDTOList);
        const data = {
          pointIds: this.form.pointIds,
          sopId: this.form.sopId,
          ticketCode: this.form.ticketCode,
          ticketContent: this.form.ticketContent,
          ticketEndTime: this.form.ticketEndTime,
          ticketName: this.form.ticketName,
          ticketStartTime: this.form.ticketStartTime,
          ticketType: this.form.ticketType,
          ticketUserDTOList: this.form.ticketUserDTOList,
          workareaId: workareaId,
          workshopId: workshopId,
        };
        const editdata = {
          pointIds: this.form.spoint.join(","),
          sopId: this.form.sopId,
          ticketCode: this.form.ticketCode,
          ticketContent: this.form.ticketContent,
          ticketId: this.form.ticketId,
          ticketEndTime: this.form.ticketEndTime,
          ticketName: this.form.ticketName,
          ticketStartTime: this.form.ticketStartTime,
          ticketType: this.form.ticketType,
          ticketUserDTOList: this.form.ticketUserDTOList,
          workareaId: workareaId,
          workshopId: workshopId,
        };

        // 检查 route.query.ticketId 是否为 null
        console.log(this.$route.query.ticketId, "this.$route.query.ticketId");
        if (this.$route.query.ticketId !== "null") {
          // 调用编辑接口
          const res = await updateJobTicket(editdata);
          if (res.code === 200) {
            // this.$router.go(-1);
            this.$router.push("/job/jobm");
            localStorage.removeItem("workshopId");
            localStorage.removeItem("workareaId");
          } else {
            console.error("编辑工单失败", res);
          }
        } else {
          // 调用新增接口
          const res = await addJobTicket(data);
          if (res.code === 200) {
            // this.$router.go(-1);
            this.$router.push("/job/jobm");
          } else {
            console.error("提交工单失败", res);
          }
        }
      } catch (error) {
        console.error("确认过程中发生错误", error);
      }

      console.log("确认");
    },
    // 子组件逆向传递选中的隔离点

    handleSelectPoint(points) {
      // console.log(points, '父组件接收逆向传递选中的隔离点')

      // 使用 Set 来存储传递过来的点值
      const newValues = new Set(points.map((point) => point.pointId));

      // 1. 删除取消选中的点
      this.tableData = this.tableData.filter((item) =>
        newValues.has(item.pointId)
      );

      // 2. 确保新增点不会重复
      const existingValues = new Set(
        this.tableData.map((item) => item.pointId)
      );

      points.forEach((point) => {
        // 如果当前传递的点不在已有的点集中，则添加
        if (!existingValues.has(point.pointId)) {
          this.tableData.push({
            pointName: point.pointName, // 显示的名称
            pointId: point.pointId, // 对应的值
            pointType: point.pointType,
            powerType: point.powerType,
          });
          // 将新点值添加到 Set 中
          existingValues.add(point.value);
        }
      });

      // 更新 form.spoint 为最新选中的隔离点数组
      this.form.spoint = points.map((point) => point.pointId);
    },
    // 车间你逆向传递拿到的隔离点数据产线
    handleProductLineSelected(selectedOption) {
      // console.log(selectedOption, '父组件接收到的 selectedOption');
      this.points = selectedOption;
      this.form.workline = selectedOption.label;
    },
    // 车间子组件逆传递车间相关数据车间
    handleWorkshopSelected(selectedOption) {
      console.log(selectedOption, "handleWorkshopSelected");
      this.emitWorkShop = selectedOption;
      this.form.workshopName = selectedOption.label;
    },
    // 添加内部人员
    addInside() {
      this.open = true;
      this.title = "添加内部人员";
      this.insideMumber = true;
      this.outsideMumber = false;
      // this.form.ticketUserDTOList = [];
      this.dialogForm.deptId = "";
      this.dialogForm.nickName = "";
    },
    addOutside() {
      this.open = true;
      this.title = "添加外部人员";
      this.insideMumber = false;
      this.outsideMumber = true;
      this.dialogForm.username = null;
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    // 人员列表删除
    // deleteRow(index, rows) {
    //   console.log(index, rows, '删除的行')
    //   rows.splice(index, 1)
    //   this.form.ticketUserDTOList.splice(index, 1)
    // },
    deleteRow(index, rows) {
      console.log(index, rows, "删除的行");
      const deletedItem = rows[index]; // 获取要删除的项
      rows.splice(index, 1); // 从显示的列表中删除
      const formIndex = this.form.ticketUserDTOList.findIndex(
        (item) => item.userId === deletedItem.userId
      );
      if (formIndex !== -1) {
        this.form.ticketUserDTOList.splice(formIndex, 1); // 从 form.ticketUserDTOList 中删除
      }
    },
    //   时间选项
    ticketStartTimeChange(value) {
      this.form.ticketStartTime = value;
      // 更新 pickerOptions 中的 disabledDate 方法
      this.updatePickerOptions();
    },
    ticketEndTimeChange(value) {
      this.form.ticketEndTime = value;
    },
    disabledDate(time) {
      const startTime = new Date(this.form.ticketStartTime);
      return startTime && !isNaN(startTime.getTime())
        ? time.getTime() < startTime.getTime()
        : false;
    },
    updatePickerOptions() {
      this.pickerOptions.disabledDate = this.disabledDate;
    },

    reset() {
      (this.form = {
        sopId: "",
        pointIds: "",
        ticketType: "",
        ticketName: "",
        ticketCode: "",
        ticketContent: "",
        workshopName: "", //车间名称
        workline: "", //区域
        spoint: [], //已选隔离点
        locker: "", //上锁人
        coLocker: "", //共锁人
        ticketStartTime: "", //开始时间
        ticketEndTime: "", //结束时间
        ticketUserDTOList: [
          // {
          //   userId: '',
          //   userName: '',
          //   userRole: '',//作业票角色 暂时不传递
          //   userType: ''//用户类型 上锁人或共锁人
          // }
        ],
      }),
        (this.autoGenFlag = false);
    },

    // 侧边x关闭函数
    goBack() {
      this.$router.push("/job/jobm");
    },
    //自动生成编码
    handleAutoGenChange(autoGenFlag) {
      if (autoGenFlag) {
        genCode("JOB_TICKET_CODE").then((response) => {
          this.form.ticketCode = response;
        });
      } else {
        this.form.ticketCode = null;
      }
    },
  },
};
</script>


<style scoped lang="scss">
.newOperations {
  width: 99%;
  height: 100%;
  //background: pink;
  margin: 10px;
  display: flex;

  .left {
    width: 75%;
    height: 830px;
    // background: #eee;
    margin-right: 10px;
  }

  .right {
    height: 100%;
    flex: 1;

    .right_top {
      height: 550px;
    }

    .workTicket_btn {
      position: relative;
      left: 63%;
      height: 30px;
      line-height: 10px;
    }

    .gsr {
      margin-left: 60px;
    }
  }
}

//右侧卡片样式开始
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;

  p {
    font-size: 18px;
    font-weight: bolder;
    font-family: SourceHanSansSC-bold;
  }
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  width: 320px;
}

.clearfix:after {
  clear: both;
}

.box-card {
  // width: 390px;
  width: 95%;
  height: 850px;
}

//右侧卡片样式结束
//隔离点多选框样式
.selects {
  .el-input.el-input--medium.el-input--suffix {
    // 调整箭头符号块的宽度
    width: 175px !important;
  }

  .el-input.el-input--medium.el-input--suffix {
    .el-input__inner {
      // 调整输入框的宽高
      height: 36px !important;
      width: 220px !important;
    }

    .el-input__suffix-inner {
      // 调整箭头符号的位置
      position: absolute;
      right: -45px;
    }
  }

  .el-select__tags {
    // 调整输入框里面的多选不换行
    flex-wrap: nowrap !important;
  }
}

//隔离点多选框样式结束
</style>

<style scoped lang="scss" src="@/assets/styles/dialog-title.scss">
</style>
