<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: 8 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-collapse
          default-active-key="a"
          expand-icon-position="right"
          class="collapse-header-divide"
        >
          <a-collapse-panel key="a" :header="$t('BASE_INFO')">
            <a-row :gutter="24" type="flex">
              <a-col v-if="form.hasOwnProperty('itemCode')" :span="8">
                <a-form-model-item
                  :label="`${$t('CHECK_CONTENT')}${$t('CODE')}`"
                  prop="itemCode"
                >
                  <a-input
                    v-model="form.itemCode"
                    disabled
                    :placeholder="$t('PLACEENTER')"
                    @change="form.itemCode = form.itemCode.slice(0, 50).trim()"
                  />
                </a-form-model-item>
              </a-col>
              <a-col v-if="form.hasOwnProperty('itemName')" :span="8">
                <a-form-model-item
                  :label="`${$t('CHECK_CONTENT')}${$t('NAME')}`"
                  prop="itemName"
                >
                  <a-input
                    v-model="form.itemName"
                    disabled
                    :placeholder="$t('PLACEENTER')"
                    @change="form.itemName = form.itemName.slice(0, 50).trim()"
                  />
                </a-form-model-item>
              </a-col>
              <a-col v-if="form.hasOwnProperty('pcCategoryId')" :span="8">
                <a-form-model-item
                  :label="$t('CHECK_TYPE')"
                  prop="pcCategoryId"
                >
                  <SelectSearch
                    disabled
                    :show-multiple="false"
                    request-api="/api/epm/pcm/pc-category/search"
                    :show-red-border="showRedBorder"
                    option-label="pcCategoryName"
                    query-list-key="pcCategoryName"
                    :default-selected-keys="form.pcCategoryId"
                    :default-selected-names="form.pcCategoryName"
                    @change="onSelectSearchChange"
                  >
                  </SelectSearch>
                </a-form-model-item>
              </a-col>
              <a-col v-if="form.hasOwnProperty('imgFlag')" :span="8">
                <a-form-model-item :label="$t('IMG_FLAG')" prop="imgFlag">
                  <a-radio-group v-model="form.imgFlag" disabled>
                    <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-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
        <!-- 点检方式 -->
        <a-collapse
          default-active-key="b"
          expand-icon-position="right"
          class="collapse-header-divide"
        >
          <a-collapse-panel key="b" :header="$t('EQP_CHECK_METHOD')">
            <a-row :gutter="24" type="flex">
              <a-col v-if="form.hasOwnProperty('checkStyle')" :span="24">
                <div class="method-box flex">
                  <div
                    v-for="(item, index) in chechStyleList"
                    :key="index"
                    class="method-card flex items-center justify-center"
                    :class="{
                      'method-active': form.checkStyle === item.value,
                    }"
                  >
                    <div class="method-icon iconfont icon-dangqianweizhi"></div>
                    <div>
                      {{ item.label }}
                      <div
                        v-show="form.checkStyle === item.value"
                        class="icon-box"
                      >
                        <div class="iconfont icon-gougou"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </a-col>
              <a-col
                v-if="
                  form.hasOwnProperty('itemType') &&
                  form.checkStyle === 'NUMBER'
                "
                :span="8"
              >
                <a-form-model-item :label="$t('PROJECT_TYPE')" prop="itemType">
                  <a-select
                    v-model="form.itemType"
                    disabled
                    :placeholder="$t('PLACESELECT')"
                  >
                    <a-select-option
                      v-for="(item, index) in itemTypeList"
                      :key="index"
                      :value="item.value"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col
                v-if="
                  form.hasOwnProperty('autoMatchKey') &&
                  form.checkStyle === 'NUMBER' &&
                  form.itemType === 'AUTO'
                "
                :span="8"
              >
                <a-form-model-item
                  :label="$t('AUTO_MATCH_KEY')"
                  prop="autoMatchKey"
                >
                  <a-input
                    v-model="form.autoMatchKey"
                    disabled
                    :placeholder="$t('PLACEENTER')"
                    @change="
                      form.autoMatchKey = form.autoMatchKey.slice(0, 32).trim()
                    "
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" type="flex">
              <a-col
                v-if="
                  form.hasOwnProperty('compareType') &&
                  form.checkStyle === 'NUMBER'
                "
                :span="8"
              >
                <a-form-model-item
                  :label="$t('COMPARISON_MODE')"
                  prop="compareType"
                >
                  <a-select
                    v-model="form.compareType"
                    disabled
                    :placeholder="$t('PLACESELECT')"
                  >
                    <a-select-option
                      v-for="(item, index) in compareTypeList"
                      :key="index"
                      :value="item.value"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col
                v-if="
                  form.hasOwnProperty('lowerLimit') &&
                  form.checkStyle === 'NUMBER' &&
                  form.compareType &&
                  !noShowLow
                "
                :span="8"
              >
                <a-form-model-item
                  :label="$t('STANDARD_LOWER_LIMIT')"
                  prop="lowerLimit"
                >
                  <a-input-number
                    v-model="form.lowerLimit"
                    disabled
                    style="width: 100%"
                  />
                </a-form-model-item>
              </a-col>
              <a-col
                v-if="
                  form.hasOwnProperty('upperLimit') &&
                  form.checkStyle === 'NUMBER' &&
                  form.compareType &&
                  !noShowUp
                "
                :span="8"
              >
                <a-form-model-item
                  :label="$t('STANDARD_UPPER_LIMIT')"
                  prop="upperLimit"
                >
                  <a-input-number
                    v-model="form.upperLimit"
                    disabled
                    style="width: 100%"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" type="flex">
              <a-col
                v-if="
                  form.hasOwnProperty('textValue') && form.checkStyle === 'TEXT'
                "
                :span="8"
              >
                <a-form-model-item
                  :label="$t('STANDARD_VALUE')"
                  prop="textValue"
                >
                  <a-input
                    v-model="form.textValue"
                    disabled
                    :placeholder="$t('PLACEENTER')"
                    @change="
                      form.textValue = form.textValue.slice(0, 255).trim()
                    "
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col v-if="form.hasOwnProperty('opDescription')" :span="21">
                <a-form-model-item
                  prop="opDescription"
                  :label="$t('OPERATING_INSTRUCTION')"
                  :label-col="{ span: 3 }"
                  :wrapper-col="{ span: 19 }"
                >
                  <a-input
                    v-model="form.opDescription"
                    disabled
                    :placeholder="$t('PLACEENTER')"
                  />
                </a-form-model-item>
              </a-col>
              <a-col
                v-if="form.hasOwnProperty('opUrl') && form.opUrl"
                :span="8"
              >
                <a-form-model-item
                  prop="opUrl"
                  :label="`${$t('OPERATION')}${$t('GUIDE')}${$t(
                    'CORE_PICTURE'
                  )}`"
                >
                  <SingleUpload v-model="form.opUrl" :disabled="true" />
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
        <!-- 扩展字段 -->
        {{ fieldExRenderFn($createElement, { layout: "grid", itemSpan: 8 }) }}
        <slot name="RenderFieldExtendDom"></slot>
      </a-form-model>
    </div>
    <div class="page-bottom-op">
      <a-button @click="cancel">
        <i class="iconfont icon-quxiao"></i>
        {{ $t("BACK") }}
      </a-button>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import ApiConstant from "@/api/ApiConstant";
import FieldExtendMixin from "@/mixins/fieldExtend";
import breadcrumb from "@/components/breadcrumb";

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

export default {
  components: {
    breadcrumb,
    SelectSearch,
    SingleUpload,
  },
  mixins: [FieldExtendMixin],
  data() {
    return {
      modalVisible: true,
      breadcrumbData: [
        {
          name: this.$t("CHECK_CONTENT"),
          url: "/eam/eqp_check/check_content",
        },
        { name: this.$t("ADD"), url: "" },
      ],
      tableNameList: [
        {
          key: "epm_pc_item",
          tab: "点检项目",
        },
      ],
      chechStyleList: [],
      itemTypeList: [],
      noShowLow: false,
      noShowUp: false,
      compareTypeList: [],
      yesNoList: [],
      dataAttr: {
        form: "form",
      },
      curIndex: 0,
      activeKey: "a",
      fileUrl: `${ApiConstant.PREFIX_CORE}/api/sys/file`,
      formA: {},
      form: {
        id: "",
        itemCode: "", // 点检项目编码
        itemName: "", // 点检项目名称
        opDescription: "", // 操作说明
        checkStyle: "BOOL", // 点检方式
        itemType: "NORMAL", // 点检项类型
        upperLimit: "", // 上线
        lowerLimit: "", // 下线
        compareType: "", // 比较方式
        autoMatchKey: "", // 自动匹配的Key
        textValue: "", // 标准值
        pcCategoryId: "", // 点检分类
        opUrl: "", // 设备图片地址
        imgFlag: "N", // 是否上传点检图片：是(Y);否(N)
      },
      formOld: {
        id: "",
        itemCode: "", // 点检项目编码
        itemName: "", // 点检项目名称
        opDescription: "", // 操作说明
        checkStyle: "BOOL", // 点检方式
        itemType: "NORMAL", // 点检项类型
        upperLimit: "", // 上线
        lowerLimit: "", // 下线
        compareType: "", // 比较方式
        autoMatchKey: "", // 自动匹配的Key
        textValue: "", // 标准值
        pcCategoryId: "", // 点检分类
        opUrl: "", // 设备图片地址
        imgFlag: "N", // 是否上传点检图片：是(Y);否(N)
      },
    };
  },
  computed: {
    ...mapState("setting", ["multiPage"]),
    ...mapGetters(["modules"]),
    ...mapState({
      showRedBorder: (state) => state.pagination.showRedBorder,
    }),
    rules() {
      return {
        itemCode: [
          {
            required: true,
            max: 50,
            message: this.$t("PLACEENTER") + 50 + this.$t("LENGTH_TIP"),
            trigger: "blur",
          },
        ],
        itemName: [
          {
            required: true,
            max: 50,
            message: this.$t("PLACEENTER") + 50 + this.$t("LENGTH_TIP"),
            trigger: "blur",
          },
        ],
        upperLimit: [
          {
            required: true,
            message: this.$t("PLACEENTER"),
            trigger: "blur",
          },
        ],
        lowerLimit: [
          {
            required: true,
            message: this.$t("PLACEENTER"),
            trigger: "blur",
          },
        ],
        imgFlag: [
          {
            required: true,
          },
        ],
      };
    },
  },
  mounted() {
    const { id } = this.$route.query;
    if (id) {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/epm/pcm/pc-item/get-by-id/${id}`)
        .then((res) => {
          this.form = this.fieldExResDataFn(res.data?.data);
          this.formOld = {
            ...this.form,
            ...this.formOld,
          };
          this.noShowLow = false;
          this.noShowUp = false;
          switch (this.form.compareType) {
            case "<": // <: "点检值<上限"
              this.noShowLow = true;
              break;
            case ">": // >: "点检值>下限"
              this.noShowUp = true;
              break;
            default:
              break;
          }
          this.queryFieldExtend().then(() => {
            // this.$refs.fieldAuthRef.init();
          });
        });
    }
    this.init();
  },
  methods: {
    init() {
      return Promise.all([
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/sys/dict-data/DIC:EPM:PC_CHECK_STYLE`
        ), // 点检方式
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/sys/dict-data/DIC:EPM:PC_ITEM_TYPE`
        ), // 点检项类型
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/sys/dict-data/DIC:EPM:PC_COMPARE_TYPE`
        ), // 点检项比较方式
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/sys/dict-data/DIC:COMMON:WHETHER_CHAR`
        ), // 是否
      ]).then(([chechStyleRes, itemTypeRes, compareTypeRes, yesNoRes]) => {
        this.chechStyleList = chechStyleRes.data.data;
        this.itemTypeList = itemTypeRes.data.data;
        this.compareTypeList = compareTypeRes.data.data;
        this.yesNoList = yesNoRes.data.data;
      });
    },
    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();
        this.$forceUpdate();
      });
    },
    onSelectSearchChange(e) {
      this.form.pcCategoryId = e;
    },
    onChangeStatus({ id }) {
      this.form.compareType = id;
      this.$refs.ruleForm.validate();
    },
    onChangeCompare(e) {
      this.noShowLow = false;
      this.noShowUp = false;
      switch (e) {
        case "<": // <: "点检值<上限"
          this.noShowLow = true;
          break;
        case ">": // >: "点检值>下限"
          this.noShowUp = true;
          break;
        default:
          break;
      }
    },
    cancel() {
      this.$store.dispatch("tagsView/jumpBeforeView", {
        to: { path: "/eam/eqp_check/check_content" },
        vm: this,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-select-tree {
  width: 100%;
}
.equipment-add {
  /deep/ .el-input-number,
  .el-date-editor {
    min-width: 100%;
  }
}
.method-box {
  margin: 30px 0;
  margin-left: 100px;
}
.method-card {
  position: relative;
  margin-right: 50px;
  width: 200px;
  height: 80px;
  background: #fff;
  color: #c0c4cc;
  border: 1px solid #c0c4cc;
  opacity: 1;
  border-radius: 4px;
}
.method-active {
  border: 1px solid #006896;
  color: #006896;
}
.method-icon {
  font-size: 50px;
  margin-right: 20px;
}
.icon-box {
  padding: 5px;
  position: absolute;
  right: -1px;
  bottom: -1px;
  border-radius: 4px;
  color: #006896;
  background-color: #006896;
  .icon-gougou {
    color: #fff;
    height: 4px;
    font-size: 12px;
  }
  .icon-gougou::before {
    position: relative;
    top: -7px;
  }
}
</style>
