<template>
  <div class="page-wrapper">
    <breadcrumb v-if="!multiPage" :breadcrumb-data="breadcrumbData" />
    <div class="page-container">
      <!-- 设备信息 -->
      <EqpInfo :eqp-current-detail="orderData.eqpCurrentDetail"></EqpInfo>
      <!-- 叫修工单 开始 -->
      <CallCard
        :repair-ticket-detail="orderData.repairTicketDetail"
        :error-level-list="errorLevelList"
        @returnData="handleReturnData"
      ></CallCard>
      <!-- 叫修工单 结束 -->
      <a-collapse
        v-model="activeKeyC"
        expand-icon-position="right"
        class="collapse-header-divide"
      >
        <a-collapse-panel key="c" :header="$t('DISPATCH')">
          <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :label-col="{ span: 7 }"
            :wrapper-col="{ span: 17 }"
          >
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item
                  :label="$t('EPMS_REPAIR_PERSONNEL')"
                  prop="planRepairUser"
                  allow-clear
                >
                  <SelectUser
                    ref="selectRoleRef"
                    v-model="form.planRepairUser"
                    :multiple="false"
                    :default-selected-rows="selectUser"
                    show-key="name"
                    style="position: relative"
                    @confirm="getReturnData"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <div class="page-bottom-op">
      <a-button type="primary" :loading="confirmLoading" @click="handleSave">
        <i class="iconfont icon-baocun"></i>
        {{ $t("SAVE") }}
      </a-button>
      <a-button @click="handleCancel">
        <i class="iconfont icon-quxiao"></i>
        {{ $t("CANCEL") }}
      </a-button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import ApiConstant from "@/api/ApiConstant";
import CallCard from "@/components/callOrderDetail/callCard";
import EqpInfo from "@/components/callOrderDetail/eqpInfo";
import SelectUser from "@/components/epms/SelectUser";
import breadcrumb from "@/components/breadcrumb";

export default {
  components: { CallCard, EqpInfo, SelectUser, breadcrumb },
  data() {
    return {
      breadcrumbData: [
        {
          name: this.$t("DISPATCH_MGMT"),
          url: "/eam/repair_management/fault_repair",
        },
        { name: this.$t("DISPATCH"), url: "" },
      ],
      activeKey: "a",
      activeKeyB: "b",
      activeKeyC: "c",
      confirmLoading: false,
      dataSource: [],
      columns: [
        {
          dataIndex: "errorAppearanceCode", // 故障现象码
          width: 200,
          ellipsis: true,
          title: () => this.$t("SYMPTOM_CODE"),
        },
        {
          dataIndex: "errorAppearanceName", // 故障现象描述
          width: 350,
          ellipsis: true,
          title: () => this.$t("SYMPTOM_DESCRIBE"),
        },
        {
          dataIndex: "errorAppearanceRemark", // 备注
          ellipsis: true,
          title: () => this.$t("REMARK"),
        },
      ],
      form: {
        planRepairUser: "",
        repairTicketIdList: [],
      },
      errorAppearances: [
        {
          errorAppearanceId: "",
          errorAppearanceRemark: "",
        },
      ],
      orderData: {
        eqpCurrentDetail: {},
        repairTicketDetail: {
          errorAppearanceList: [],
          imgUrlList: [],
        },
        repairResultDetail: {
          repairResultList: [],
        },
        repairTransferList: [],
      },
      imgUrlList: [],
      // 当前树节点下的负责人
      selectUser: [
        {
          id: "",
          name: "",
          tel: "",
        },
      ],
      errorLevelList: [], // 故障等级列表
    };
  },
  computed: {
    ...mapState("setting", ["multiPage"]),
    rules() {
      return {
        planRepairUser: [
          {
            required: true,
            message: this.$t("PLACESELECT"),
            trigger: "change",
          },
        ],
      };
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const { id } = this.$route.query;
      this.form.repairTicketIdList[0] = id;
      return Promise.all([
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/epm/erm/repair-ticket/detail/${id}`
        ), // 设备详情
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/sys/dict-data/DIC:EPM:FAULT_LEVEL`
        ), // 故障等级
      ]).then(([detailoRes, levelRes]) => {
        this.orderData = detailoRes.data?.data;
        const { imgUrlList } = { ...detailoRes.data?.data?.repairTicketDetail };
        this.imgUrlList = imgUrlList || [];
        this.errorLevelList = levelRes.data?.data;
      });
    },
    handleReturnData() {
      this.init();
    },
    // 获取选择用户组件返回数据
    getReturnData(selectedRowKeys, selectedRows) {
      if (selectedRows.length > 0) {
        this.selectUser = selectedRows;
        this.form.planRepairUser = selectedRows[0]?.userName;
      } else {
        this.selectUser = selectedRows;
        this.form.planRepairUser = [];
      }
    },
    // 保存
    handleSave() {
      const { id } = this.$route.query;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$axios
            .put(
              `${ApiConstant.PREFIX_CORE}/api/epm/erm/repair-ticket/assign`,
              this.form
            )
            .then(() => {
              this.confirmLoading = false;
              this.$message.success(this.$t("SAVE_SUCCESS"));
              this.handleCancel();
            })
            .catch((e) => {
              this.confirmLoading = false;
            });
        }
      });
    },
    // 取消
    handleCancel() {
      const { from } = this.$route.query;
      if (from === "list") {
        this.$store.dispatch("tagsView/jumpBeforeView", {
          to: {
            path: "/eam/repair_management/fault_repair",
            query: {
              tab: "3",
            },
          },
          vm: this,
        });
      } else if (from === "toDo") {
        this.$store.dispatch("tagsView/jumpBeforeView", {
          to: {
            path: "/eam/to_do/eqp_fix",
          },
          vm: this,
        });
      } else {
        this.$store.dispatch("tagsView/jumpBeforeView", {
          to: {
            path: "/eam/repair_management/fault_repair/dispatch",
          },
          vm: this,
        });
      }
    },
    // 页面埋点
    handleFuncUseRate(data) {
      this.$axios
        .put(`${ApiConstant.PREFIX_CORE}/api/epm/eam/use`, data)
        .then(() => {});
    },
  },
};
</script>
<style lang="less" scoped>
@import "@/assets/css/fault_repair.less";
/deep/ .mega-design-business-table .mega-design-pro-table {
  padding: 0 !important;
  margin-bottom: 24px;
}
</style>
