<template>
  <div class="page-wrapper app">
    <breadcrumb v-if="!multiPage" :breadcrumb-data="breadcrumbData" />
    <div class="page-container">
      <a-form-model
        slot="main"
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
      >
        <!-- 基础信息 -->
        <a-collapse
          v-model="activeKeyA"
          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('MOLD')}${$t('CODE')}`"
                  prop="moldCode"
                >
                  <a-input
                    v-model="form.moldCode"
                    disabled
                    :placeholder="$t('PLACEENTER')"
                    @change="form.moldCode = form.moldCode.slice(0, 50).trim()"
                  /> </a-form-model-item
              ></a-col>
              <a-col :span="8">
                <a-form-model-item
                  :label="`${$t('MOLD')}${$t('NAME')}`"
                  prop="moldName"
                >
                  <a-input
                    v-model="form.moldName"
                    disabled
                    :placeholder="$t('PLACEENTER')"
                    @change="form.moldName = form.moldName.slice(0, 50).trim()"
                  /> </a-form-model-item
              ></a-col>
              <a-col :span="8">
                <a-form-model-item :label="$t('MOLD_TYPE')" prop="moldTypeId">
                  <SelectSearch
                    disabled
                    request-api="/api/epm/mam/mold-type/search"
                    option-label="moldTypeName"
                    query-list-key="moldTypeName"
                    :show-multiple="false"
                    :default-selected-keys="form.moldTypeId"
                    :default-selected-names="form.moldTypeName"
                  >
                  </SelectSearch>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item
                  :label="$t('NUMBER_OF_ACUPOINTS')"
                  prop="moldHoleNum"
                >
                  <a-input-number
                    v-model="form.moldHoleNum"
                    disabled
                    style="width: 100%"
                    :precision="0"
                    :max="999999"
                    :min="1"
                    :placeholder="$t('PLACEENTER')"
                  />
                </a-form-model-item>
              </a-col>
              <a-col v-if="form.hasOwnProperty('owner')" :span="8">
                <a-form-model-item :label="$t('LEADER_NAME')" prop="owner">
                  <template>
                    <div style="position: relative">
                      <a-input
                        v-model="form.ownerName"
                        disabled
                        :placeholder="$t('PLACEENTER')"
                      />
                    </div>
                  </template>
                </a-form-model-item>
              </a-col>
              <a-col v-if="form.hasOwnProperty('imgUrl')" :span="8">
                <a-form-model-item
                  :label="`${$t('MOLD')}${$t('CORE_PICTURE')}`"
                  prop="imgUrl"
                >
                  <SingleUpload
                    v-model="form.imgUrl"
                    disabled
                  /> </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('ATTRIBUTE')}`">
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item
                  :label="$t('MOLD_CONTROL_MODE')"
                  prop="manageType"
                >
                  <a-radio-group v-model="form.manageType" disabled>
                    <a-radio
                      v-for="item in typeList"
                      :key="item.value"
                      :value="item.value"
                      >{{ item.label }}</a-radio
                    >
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item
                  :label="$t('INITIAL_VALUE_OF_CURRENT_USE')"
                  prop="initValue"
                >
                  <div class="flex" style="width: 100%">
                    <a-input-number
                      v-model="form.initValue"
                      disabled
                      class="relative"
                      style="width: 100%"
                      :precision="0"
                      :max="999999"
                      :min="0"
                      :placeholder="$t('PLACEENTER')"
                    />
                    <span
                      v-if="form.manageType === 'TIME'"
                      style="min-width: 20px; margin-left: 10px"
                      >min</span
                    >
                    <span v-else style="min-width: 20px; margin-left: 10px">{{
                      $t("FREQUENCY")
                    }}</span>
                  </div>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item
                  :label="$t('INITIAL_VALUE_OF_PREVIOUS_USE')"
                  prop="totalInitValue"
                >
                  <div class="flex" style="width: 100%">
                    <a-input-number
                      v-model="form.totalInitValue"
                      disabled
                      class="relative"
                      style="width: 100%"
                      :precision="0"
                      :max="999999"
                      :min="0"
                      :placeholder="$t('PLACEENTER')"
                    />
                    <span
                      v-if="form.manageType === 'TIME'"
                      style="min-width: 20px; margin-left: 10px"
                      >min</span
                    >
                    <span v-else style="min-width: 20px; margin-left: 10px">{{
                      $t("FREQUENCY")
                    }}</span>
                  </div>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
          <!-- 扩展字段 -->
          {{ fieldExRenderFn($createElement, { layout: "grid", itemSpan: 8 }) }}
          <slot name="RenderFieldExtendDom"></slot>
        </a-collapse>
      </a-form-model>
    </div>
    <div class="page-bottom-op">
      <a-button @click="handleCancel()">
        <i class="iconfont icon-quxiao" />
        {{ $t("BACK") }}
      </a-button>
    </div>
  </div>
</template>

<script lang="ts">
import { mapGetters, mapState } from "vuex";
import ApiConstant from "@/api/ApiConstant";
import breadcrumb from "@/components/breadcrumb/index.vue";
import FieldExtendMixin from "@/mixins/fieldExtend";
import SingleUpload from "@/components/uploadPicture/singleUpload.vue";

export default {
  components: { breadcrumb, SingleUpload },
  mixins: [FieldExtendMixin],
  data() {
    return {
      breadcrumbData: [
        {
          name: this.$t("MOLD_ACCOUNT"),
          url: "/eam/mold_management/mold_account",
        },
        { name: this.$t("EQUIPMENT_TYPE"), url: "" },
      ],
      activeKeyA: "a",
      activeKeyB: "b",
      form: {
        id: null,
        moldCode: "",
        moldName: "",
        imgUrl: "",
        owner: "",
        manageType: "TIME",
        moldTypeId: "",
        moldHoleNum: 1,
        initValue: null,
        totalInitValue: null,
      },
      typeList: [],
      tableNameList: [
        {
          key: "epm_mold",
          tab: "模具台账",
        },
      ],
      dataAttr: {
        form: "form",
      },
    };
  },
  computed: {
    ...mapState("setting", ["multiPage"]),
    ...mapGetters(["modules"]),
    rules(): object {
      return {
        moldName: [
          {
            required: true,
            max: 50,
            message: `${this.$t("PLACEENTER")}50${this.$t("LENGTH_TIP")}`,
            trigger: "blur",
          },
        ],
        moldTypeId: [
          {
            required: true,
            message: `${this.$t("PLACESELECT")}`,
            trigger: "change",
          },
        ],
        moldHoleNum: [
          {
            required: true,
            message: `${this.$t("PLACEENTER")}6${this.$t("LENGTH_TIP")}`,
            trigger: "change",
          },
        ],
        manageType: [
          {
            required: true,
            message: `${this.$t("PLACESELECT")}`,
            trigger: "change",
          },
        ],
      };
    },
  },
  mounted() {
    const { id } = this.$route.query;
    if (id) {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/epm/mam/mold/get-by-id/${id}`)
        .then((res) => {
          this.form = { ...res?.data?.data };
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-ignore
          this.queryFieldExtend().then(() => {});
        });
    } else {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      this.queryFieldExtend().then(() => {});
    }
    // 初始化数据
    this.init();
  },
  methods: {
    // 初始化数据，获取数据字典数据
    init() {
      return Promise.all([
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/sys/dict-data/DIC:EPM:MOLD_MANAGE_TYPE`
        ), // 模具管控方式
      ]).then(([typeRes]) => {
        this.typeList = typeRes.data.data;
      });
    },
    // 监听取消点击事件
    handleCancel() {
      this.$store.dispatch("tagsView/jumpBeforeView", {
        to: {
          path: "/eam/mold_management/mold_account",
        },
        vm: this,
      });
    },
  },
};
</script>
