<template>
  <div class="page-wrapper">
    <breadcrumb v-if="!multiPage" :breadcrumb-data="breadcrumbData" />
    <div class="page-container">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="{ span: 7 }"
        :wrapper-col="{ span: 17 }"
      >
        <a-collapse
          v-model="activeKey"
          expand-icon-position="right"
          class="collapse-header-divide"
        >
          <a-collapse-panel key="a" :header="$t('BASE_INFO')">
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item
                  :label="$t('MAINTENANCE_FORM_CODE')"
                  prop="pmFrmCode"
                  allow-clear
                >
                  <a-input
                    v-model="form.pmFrmCode"
                    :placeholder="`${$t('SYSTEM_DEFAULT_CODE')}BYBD+${$t(
                      'NUMBER'
                    )}`"
                    @change="
                      form.pmFrmCode = form.pmFrmCode.slice(0, 50).trim()
                    "
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item
                  :label="$t('FORM_NAME')"
                  prop="pmFrmName"
                  allow-clear
                >
                  <a-input
                    v-model="form.pmFrmName"
                    :placeholder="$t('PLACEENTER')"
                    @change="
                      form.pmFrmName = form.pmFrmName.slice(0, 50).trim()
                    "
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item :label="$t('EQP_TYPE')" prop="eqpTypeId">
                  <SelectSearch
                    :show-multiple="false"
                    request-api="/api/epm/eam/eqp-type/search"
                    option-label="eqpTypeName"
                    query-list-key="eqpTypeName"
                    :default-selected-keys="form.eqpTypeId"
                    :default-selected-names="form.eqpTypeName"
                    @change="onSelectSearchChange"
                  >
                  </SelectSearch>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row v-if="form.hasOwnProperty('opUrl')" :gutter="24">
              <a-col :span="8">
                <a-form-model-item :label="$t('MAINTENANCE_SOP')" prop="opUrl">
                  <SingleUploadFile
                    v-model="form.opUrl"
                    :accept="'.mp4, .pdf, .PDF'"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
        <a-collapse
          v-model="activeKeyB"
          expand-icon-position="right"
          class="collapse-header-divide"
        >
          <a-collapse-panel key="b" :header="$t('MAINTENANCE_MODE')">
            <MomTable
              ref="MomTable"
              row-key="itemName"
              :action-buttons="actionButtons"
              :columns="columns"
              :data-source="pmFrmItemList"
              :pagination="false"
              @edit="handleEdit"
              @delete="handleDelete"
            >
              <div slot="toolbar" class="button-top-table">
                <a-button @click="handleAdd">
                  <a-icon type="plus" /> {{ $t("ADD") }}
                </a-button>
                <a-button @click="handleMaintenanceContent()">{{
                  `${$t("SELECT")}${$t("MAINTENANCE_CONTENT")}`
                }}</a-button>
                <a-button @click="handleSelectHistoryForm()">
                  <i class="iconfont icon-zhengque"></i>
                  {{ $t("USE_HISTORY_FORM") }}
                </a-button>
                <!-- <a-button
                  :disabled="selectedRowKeys.length === 0"
                  type="danger"
                  ghost
                  @click="handleBatchDelete"
                >
                  <a-icon type="delete" />
                  {{ $t("DELETE") }}
                </a-button> -->
              </div>
              <div slot="uploadFlag" slot-scope="text, record">
                <span>{{ getAttrValue(yesNoList, record.uploadFlag) }}</span>
              </div>
            </MomTable>
          </a-collapse-panel>
        </a-collapse>
        <!-- 扩展字段 -->
        {{ fieldExRenderFn($createElement, { layout: "grid", itemSpan: 8 }) }}
        <slot name="RenderFieldExtendDom"></slot>
      </a-form-model>
    </div>
    <div class="page-bottom-op">
      <!-- <slot name="RenderFieldButton"></slot> -->
      <!-- 字段授权 -->
      <!-- <FieldAuth
        ref="fieldAuthRef"
        :form-data="formOld"
        :table-name-list="tableNameList"
        @formBack="onFormBack"
      /> -->
      <a-button
        type="primary"
        :loading="confirmLoading"
        @click="handleSave('save')"
      >
        <i class="iconfont icon-baocun"></i>
        {{ $t("SAVE") }}
      </a-button>
      <a-button
        :loading="confirmLoading"
        type="primary"
        @click="handleSave('saveAndAdd')"
      >
        <i class="iconfont icon-baocun"></i>
        {{ $t("SAVE_AND_ADD_NEXT") }}
      </a-button>
      <a-button @click="handleCancel">
        <i class="iconfont icon-quxiao"></i>
        {{ $t("CANCEL") }}
      </a-button>
    </div>
    <!-- 选择保养项目组件 -->
    <select-maintenance-content
      ref="selectMaintenanceContent"
      show-key="id"
      :eqp-type-id="form.eqpTypeId"
      :show-slot="false"
      @confirm="getReturnData"
    />
    <!-- 选择历史保养表单组件 -->
    <select-history-form
      ref="selectHistoryForm"
      show-key="id"
      :show-slot="false"
      @confirm="getReturnDataForm"
    />
    <MegaDrawer
      width="520"
      :title="
        isEdit
          ? $t('MAINTENANCE_CONTENT') + $t('EDIT')
          : $t('MAINTENANCE_CONTENT') + $t('ADD')
      "
      :visible="drawerVisible"
      :confirm-loading="confirmLoading"
      @close="handleCloseDrawer"
      @cancel="handleCloseDrawer"
      @ok="handleSaveDrawer"
    >
      <a-form-model
        slot="main"
        ref="ruleFormDrawer"
        layout="vertical"
        :model="drawerForm"
        :rules="rulesDrawer"
      >
        <a-form-model-item :label="$t('PM_ITEM_NAME')" prop="itemName">
          <a-input
            v-model="drawerForm.itemName"
            :placeholder="$t('PLACEENTER')"
            @change="
              drawerForm.itemName = drawerForm.itemName.slice(0, 50).trim()
            "
          />
        </a-form-model-item>
        <a-form-model-item
          :label="$t('MAINTENANCE_PROJECT_TYPE')"
          prop="pmItemCategoryId"
        >
          <SelectSearch
            :show-multiple="false"
            request-api="/api/epm/pmm/pm-item-category/search"
            query-list-key="pmItemCategoryName"
            :show-red-border="showRedBorder"
            :is-show-add="true"
            option-label="pmItemCategoryName"
            :default-selected-keys="drawerForm.pmItemCategoryId"
            :default-selected-names="pmItemCategoryName"
            @change="onSelectSearchChangeDrawer"
            @add="onAddMaintainType"
          >
          </SelectSearch>
        </a-form-model-item>
        <a-form-model-item
          :label="$t('IMG_FLAG')"
          prop="uploadFlag"
          allow-clear
        >
          <a-radio-group v-model="drawerForm.uploadFlag">
            <a-radio
              v-for="item in yesNoList"
              :key="item.value"
              :value="item.value"
              >{{ item.label }}</a-radio
            >
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item
          prop="opDescription"
          :label="$t('OPERATING_INSTRUCTION')"
        >
          <a-input
            v-model="drawerForm.opDescription"
            :placeholder="$t('PLACEENTER')"
          />
        </a-form-model-item>
        <a-form-model-item
          :label="`${$t('IMPORT')}${$t('OPERATION')}${$t('CORE_PICTURE')}`"
          prop="opUrl"
        >
          <SingleUpload v-model="drawerForm.opUrl" />
        </a-form-model-item>
        <a-form-model-item
          v-for="(fileItem, fileIndex) in drawerForm.fieldExtendList"
          :key="fileIndex"
          :label="$t(fileItem.i18nCode)"
          :prop="fileItem.fieldName"
          allow-clear
        >
          <a-input
            v-model="drawerForm[fileItem.fieldName]"
            :placeholder="$t('PLACEENTER')"
          />
        </a-form-model-item>
      </a-form-model>
    </MegaDrawer>
    <MegaDrawer
      width="520"
      :title="$t('ADD')"
      :visible="dialogVisble"
      @close="dialogVisble = false"
      @cancel="dialogVisble = false"
      @ok="onSave"
    >
      <a-form-model
        slot="main"
        ref="dialogRuleForm"
        layout="vertical"
        :model="dialogForm"
        :rules="dialogRules"
      >
        <a-form-model-item
          :label="$t('CATEGORY_NAME')"
          prop="pmItemCategoryName"
        >
          <a-input
            v-model="dialogForm.pmItemCategoryName"
            :placeholder="$t('PLACEENTER')"
            @change="
              dialogForm.pmItemCategoryName = dialogForm.pmItemCategoryName
                .slice(0, 50)
                .trim()
            "
          />
        </a-form-model-item>
      </a-form-model>
    </MegaDrawer>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { uniqBy } from "lodash";
import { Drawer as MegaDrawer } from "@mega-design/ui-vue";
import ApiConstant from "@/api/ApiConstant";
// import FieldAuth from "@/components/FieldAuth";
import { fieldExReqDataFn } from "@/utils/fieldExtend";
import FieldExtendMixin from "@/mixins/fieldExtend";
import breadcrumb from "@/components/breadcrumb";
import SelectMaintenanceContent from "@/components/SelectMaintenanceContent";
import SelectHistoryForm from "@/components/SelectMaintenanceHistoryForm";

import SelectSearch from "@/components/epms/SelectSearch";
import SingleUpload from "@/components/uploadPicture/singleUpload";
import SingleUploadFile from "@/components/uploadFile/singleUpload";

export default {
  components: {
    // FieldAuth,
    breadcrumb,
    MegaDrawer,
    SelectMaintenanceContent,
    SelectHistoryForm,
    SelectSearch,
    SingleUpload,
    SingleUploadFile,
  },
  mixins: [FieldExtendMixin],
  data() {
    return {
      breadcrumbData: [
        {
          name: this.$t("CHECK_FORM"),
          url: "/eam/eqp_check/check_form",
        },
        { name: this.$t("CHECK_FORM_ADD"), url: "" },
      ],
      tableNameList: [
        {
          key: "epm_pm_frm",
          tab: "保养表单",
        },
      ],
      dialogVisble: false,
      dialogForm: {
        pmItemCategoryName: "", // 	分类名称
      },
      dataAttr: {
        form: "form",
      },
      activeKey: "a",
      activeKeyB: "b",
      isShowButton: true,
      confirmLoading: false,
      dataSource: [],
      form: {
        pmFrmCode: "", // 保养表单编码
        pmFrmName: "", // 保养表单名称
        eqpTypeId: "", // 设备类型
        opUrl: "", // 图片或视频地址
      },
      formOld: {
        id: "",
        pmFrmCode: "", // 保养表单编码
        pmFrmName: "", // 保养表单名称
        eqpTypeId: "", // 设备类型
        opUrl: "", // 图片或视频地址
      },
      drawerForm: {
        itemName: "", // 保养项名称
        pmItemCategoryId: "", // 保养项分类名称
        pmItemCategoryName: "", // 保养项分类名称
        uploadFlag: "Y", // 是否上传保养图片或视频：是(Y);否(N)
        opDescription: "", // 操作说明
        opUrl: "", // 操作说明地址：图片或视频
      },
      pmItemCategoryName: "",
      drawerVisible: false,
      isEdit: false,
      editIndex: 0,
      actionButtons: ["edit", "delete"],
      pmFrmItemList: [],
      itemObj: {
        itemName: "", // 	点检项名称
        itemType: "", // 点检项类型
        checkStyle: "", // 点检方式
        compareType: "", // 比较方式
        lowerLimit: "", // 标准下限
        textValue: "", // 文本标准值
        autoMatchKey: "", // 自动匹配的Key
        opDescription: "", // 操作说明
        opUrl: "", // 操作说明地址：图片或视频
        imgFlag: "Y", // 是否上传点检图片
        noShowLow: true,
        noShowUp: true,
        fieldExtendList: [],
      },
      yesNoList: [], // 是否列表
      fieldExtendList: [], // 字段扩展列表
      dynamicFieldList: [], // 字段扩展列表动态
      defaultList: [
        {
          dataIndex: "itemName", // 保养项目
          sorter: false,
          ellipsis: true,
          title: () => this.$t("MAINTENANCE_CONTENT"),
        },
        {
          dataIndex: "pmItemCategoryName", // 保养项目分类
          sorter: false,
          ellipsis: true,
          title: () => this.$t("MAINTENANCE_PROJECT_TYPE"),
        },
        {
          dataIndex: "pmItemCategoryName", // 保养分类名称分类
          title: () => `${this.$t("MAINTENANCE_TYPE")}${this.$t("NAME")}`,
          ellipsis: true,
          sorter: false,
        },
        {
          dataIndex: "uploadFlag",
          align: "left",
          sorter: false,
          ellipsis: true,
          title: () => this.$t("IMG_FLAG"), //
          scopedSlots: { customRender: "uploadFlag" },
        },
        {
          dataIndex: "opDescription", // 操作说明
          sorter: false,
          ellipsis: true,
          title: () => this.$t("OPERATING_INSTRUCTION"),
        },
      ],
      selectedRowKeys: [], // 选中行 key 数据
      selectedRows: [], // 选中行 数据
      columnsItem: {
        dataIndex: "",
        title: "",
        ellipsis: true,
        sorter: false,
      },
      columnsList: [],
    };
  },
  computed: {
    ...mapState("setting", ["multiPage"]),
    ...mapState({
      showRedBorder: (state) => state.pagination.showRedBorder,
    }),
    dialogRules() {
      return {
        pmItemCategoryName: [
          {
            required: true,
            max: 50,
            message: this.$t("PLACEENTER") + 50 + this.$t("LENGTH_TIP"),
            trigger: "blur",
          },
        ],
      };
    },
    rules() {
      return {
        pmFrmName: [
          {
            required: true,
            max: 50,
            message: () => this.$t("PLACEENTER") + 50 + this.$t("LENGTH_TIP"),
            trigger: "blur",
          },
        ],
      };
    },
    rulesDrawer() {
      return {
        itemName: [
          {
            required: true,
            max: 50,
            message: () => this.$t("PLACEENTER") + 50 + this.$t("LENGTH_TIP"),
            trigger: "blur",
          },
        ],
        pmItemCategoryId: [
          {
            required: false,
            message: this.$t("PLACEENTER"),
            trigger: "change",
          },
        ],
      };
    },
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys;
          if (this.selectedRowKeys.length) {
            this.selectedRows = uniqBy(this.selectedRows.concat(selectedRows));
          } else {
            this.selectedRows = selectedRows;
          }
        },
      };
    },
    columns() {
      return [...this.defaultList, ...this.columnsList];
    },
  },
  watch: {},
  mounted() {
    const { id } = this.$route.query;
    if (id) {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/epm/pmm/pm-frm/get-by-id/${id}`)
        .then((detailRes) => {
          const { pmFrmItemList } = { ...detailRes.data?.data };
          if (pmFrmItemList && pmFrmItemList.length > 0) {
            this.pmFrmItemList = pmFrmItemList.map((item) => {
              const req = this.fieldExResDataFn(item);
              return req;
            });
          }
          this.form = { ...detailRes.data?.data };
          this.form.id = "";
          this.form.pmFrmCode = "";
        });
    }
    this.queryFieldExtend().then(() => {
      // this.$refs.fieldAuthRef.init();
    });
    // 初始化数据
    this.init();
  },
  methods: {
    // 获取返回数据，保养项目
    getReturnData(selectedKeys, selectedRows) {
      if (selectedRows && selectedRows.length > 0) {
        this.pmFrmItemList = this.pmFrmItemList.concat(selectedRows);
        this.handleItemList();
      }
    },
    // 获取返回数据，保养表单
    getReturnDataForm(selectedKeys, selectedRows) {
      if (selectedKeys && selectedKeys.length > 0) {
        const params = {
          ids: selectedKeys.join(","),
        };
        this.$axios
          .get(
            `${ApiConstant.PREFIX_CORE}/api/epm/pmm/pm-frm/get-item-by-ids`,
            {
              params,
            }
          )
          .then((res) => {
            if (res.data?.data && res.data.data.length > 0) {
              this.pmFrmItemList = this.pmFrmItemList.concat(res.data.data);
              this.handleItemList();
            }
          });
      }
    },
    cancel() {
      this.$store.dispatch("tagsView/jumpBeforeView", {
        to: { path: "/eam/eqp_maintain/maintenance_content" },
        vm: this,
      });
    },
    onSave() {
      this.$refs.dialogRuleForm.validate((valid) => {
        if (valid) {
          this.$axios
            .post(
              `${ApiConstant.PREFIX_CORE}/api/epm/pmm/pm-item-category`,
              this.dialogForm
            )
            .then(({ data }) => {
              this.$message.success(this.$t("ADD_SUCCESS"));
              this.drawerForm.pmItemCategoryId = data.data;
              this.drawerForm.pmItemCategoryName =
                this.dialogForm.pmItemCategoryName;
              this.pmItemCategoryName = this.dialogForm.pmItemCategoryName;
              this.dialogVisble = false;
            })
            .catch((e) => {
              this.confirmLoading = false;
            });
        }
      });
    },
    // 获取返回数据，设备类型
    onSelectSearchChange(e) {
      this.form.eqpTypeId = e;
    },
    onFormBack(formBackData) {
      this.$nextTick(() => {
        Object.keys(this.form).forEach((key) => {
          // eslint-disable-next-line no-prototype-builtins
          if (!formBackData.hasOwnProperty(key)) {
            delete this.form[key];
          }
        });
        Object.keys(formBackData).forEach((key1) => {
          // eslint-disable-next-line no-prototype-builtins
          if (!this.form.hasOwnProperty(key1)) {
            this.form[key1] = "";
          }
        });
        this.queryFieldExtend();
      });
    },
    // 初始化数据
    init() {
      const params = {
        tableNameList: "epm_pm_item",
        moduleCode: this.$store.state.activatedModule,
      };
      return Promise.all([
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/sys/dict-data/DIC:COMMON:WHETHER_CHAR`
        ), // 是否
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/sys/filed-extend-config/detail-batch`,
          {
            params,
          }
        ), // 扩展字段，保养项目
      ]).then(([yesNoRes, detailBatchRes]) => {
        this.yesNoList = yesNoRes.data.data;
        // this.$refs.fieldAuthRef.init();
        /* eslint-disable */
        this.fieldExtendList =
          detailBatchRes.data?.data?.fieldExtendConfigList[0]?.items.filter(
            (item) => [1, "Y"].includes(item.enableFlag)
          ) || [];
        if (this.fieldExtendList && this.fieldExtendList.length > 0) {
          this.fieldExtendList.forEach((item, index) => {
            if (detailBatchRes.data.data?.fieldHiddenConfigList?.length) {
              // eslint-disable-next-line array-callback-return
              detailBatchRes.data.data.fieldHiddenConfigList.forEach((ele) => {
                if (ele.fieldName === item.fieldName) {
                  this.fieldExtendList.splice(index, 1);
                }
              });
            }
          });
        }
        if (this.fieldExtendList && this.fieldExtendList.length > 0) {
          this.fieldExtendList.forEach((item) => {
            this.itemObj[item.fieldName] = "";
            if (item.type === "DYNAMIC") {
              this.dynamicFieldList.push(item.fieldName);
            }
            // 动态添加表格列
            const columnsItem = { ...this.columnsItem };
            columnsItem.dataIndex = item.fieldName;
            columnsItem.title = () => this.$t(`${item.i18nCode}`);
            if (!["code", "name"].includes(item.fieldName)) {
              this.columnsList.push(columnsItem);
            }
          });
        }
        /* eslint-enable */
      });
    },
    // 监听选择保养项目
    handleMaintenanceContent() {
      this.$refs.selectMaintenanceContent.openDialog();
    },
    // 监听选择历史表单组件
    handleSelectHistoryForm() {
      this.$refs.selectHistoryForm.openDialog();
    },
    // 点检方式切换
    handleMethodChange(e, index) {
      this.pmFrmItemList[index].checkStyle = e;
      this.$forceUpdate();
    },
    // 监听保养项目列表
    handleItemList() {
      // eslint-disable-next-line array-callback-return
      this.pmFrmItemList.map((item, index) => {
        // eslint-disable-next-line no-param-reassign
        item.fieldExtendList = this.fieldExtendList;
      });
      this.pmFrmItemList = uniqBy(this.pmFrmItemList, "itemName"); // 去重
    },
    // 监听新增点击事件
    handleAdd() {
      this.drawerForm = {
        itemName: "", // 保养项名称
        pmItemCategoryId: "", // 保养项分类名称
        pmItemCategoryName: "", // 保养项分类名称
        uploadFlag: "Y", // 是否上传保养图片或视频：是(Y);否(N)
        opDescription: "", // 操作说明
        opUrl: "", // 操作说明地址：图片或视频
        fieldExtendList: this.fieldExtendList ? [...this.fieldExtendList] : [],
      };
      this.isEdit = false;
      this.drawerVisible = true;
    },
    handleEdit(row) {
      const index = this.pmFrmItemList.findIndex(
        (item) => item.itemName === row.itemName
      );
      this.editIndex = index;
      this.isEdit = true;
      this.drawerForm = { ...row };
      this.pmItemCategoryName = row.pmItemCategoryName;
      this.drawerVisible = true;
    },
    onSelectSearchChangeDrawer(e, item) {
      this.drawerForm.pmItemCategoryId = e;
      this.drawerForm.pmItemCategoryName = item.pmItemCategoryName;
    },
    onAddMaintainType() {
      this.dialogVisble = true;
    },
    handleDelete(row) {
      const index = this.pmFrmItemList.findIndex(
        (item) => item.itemName === row.itemName
      );
      this.$confirm({
        title: this.$t("DELETE"),
        content: this.$t("DELETE_INFO"),
        okText: this.$t("DELETE"),
        cancelText: this.$t("CANCEL"),
        centered: false,
        icon: "close-circle",
        onOk: () => {
          this.pmFrmItemList.splice(index, 1);
        },
      });
    },
    handleSaveDrawer() {
      this.$refs.ruleFormDrawer.validate((valid) => {
        if (valid) {
          if (
            !this.isEdit &&
            this.pmFrmItemList.some(
              (val) => val.itemName === this.drawerForm.itemName
            )
          ) {
            this.$message.warning(
              `${this.$t("PM_ITEM_NAME")}${this.$t("CANNOT_REPEAT")}`
            );
            return;
          }
          this.handleCloseDrawer();
          if (!this.isEdit) {
            this.pmFrmItemList.push({ ...this.drawerForm });
          } else {
            this.pmFrmItemList[this.editIndex] = { ...this.drawerForm };
          }
          this.selectedRowKeys = [];
          this.selectedRows = [];
        }
      });
    },
    handleCloseDrawer() {
      this.confirmLoading = false;
      this.$refs.ruleFormDrawer.clearValidate();
      this.drawerVisible = false;
    },
    // 监听保存按钮点击事件
    handleSave(type) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // const { pmFrmCode, pmFrmName, eqpTypeId, opUrl } = this.form;
          let pmFrmItemList = [];
          if (this.pmFrmItemList.length > 0) {
            // eslint-disable-next-line array-callback-return
            pmFrmItemList = this.pmFrmItemList.map((item) => {
              const req = fieldExReqDataFn(item, this.dynamicFieldList);
              return req;
            });
          }
          this.confirmLoading = true;
          const params = {
            ...this.form,
            pmFrmItemList,
          };
          this.$axios
            .post(`${ApiConstant.PREFIX_CORE}/api/epm/pmm/pm-frm`, params)
            .then(() => {
              this.confirmLoading = false;
              this.$message.success(this.$t("SAVE_SUCCESS"));
              if (type === "saveAndAdd") {
                // this.form = {
                //   id: null,
                //   pmFrmCode: "", // 保养表单编码
                //   pmFrmName: "", // 保养表单名称
                //   eqpTypeId: "", // 设备类型
                //   opUrl: "", // 图片或视频地址
                // };
                // this.formOld = {
                //   id: null,
                //   pmFrmCode: "", // 保养表单编码
                //   pmFrmName: "", // 保养表单名称
                //   eqpTypeId: "", // 设备类型
                //   opUrl: "", // 图片或视频地址
                // };
                // this.pmFrmItemList = [];
              } else {
                this.handleCancel();
              }
            })
            .catch((e) => {
              this.confirmLoading = false;
            });
        }
      });
    },
    // 监听批量删除点击事件
    handleBatchDelete() {
      if (this.selectedRowKeys.length < 1) {
        this.$message.warning(this.$t("SELECT_ONE_DATA"));
        return;
      }
      const params = {
        ids: this.selectedRowKeys,
      };
      this.$confirm({
        title: this.$t("DELETE"),
        content: this.$t("DELETE_INFO"),
        okText: this.$t("DELETE"),
        cancelText: this.$t("CANCEL"),
        centered: false,
        icon: "close-circle",
        onOk: () => {
          this.$message.success(this.$t("DELETE_SUCCESS"));
        },
      });
    },
    // 监听取消按钮点击事件
    handleCancel() {
      this.$store.dispatch("tagsView/jumpBeforeView", {
        to: {
          path: "/eam/eqp_maintain/maintenance_form",
        },
        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;
}
/deep/ .ant-form-item-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

<style lang="less">
.icon-bianji2 {
  color: @primary-color !important;
}
.status-btn {
  cursor: pointer;
  margin-top: 0;
  margin-left: 6px;
  min-width: 100px;
  height: 36px;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  text-align: center;
  line-height: 36px;
  position: relative;
  padding: 0 6px;
}
.statusActive {
  border: 1px solid #ff3250;
}
.icon-box {
  padding: 5px;
  position: absolute;
  right: -1px;
  bottom: -1px;
  border-radius: 4px;
  .icon-gougou {
    color: #fff;
    height: 4px;
    font-size: 12px;
  }
  .icon-gougou::before {
    position: relative;
    top: -16px;
  }
}
</style>
