<template>
  <a-form-model
    ref="qualityForm"
    :model="form"
    :rules="rules"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    style="border-top: 8px solid #f0f2f5; border-bottom: 8px solid #f0f2f5"
  >
    <a-collapse
      v-model="activeKeyC"
      expand-icon-position="right"
      class="collapse-header-divide"
      :class="{ 'show-red-border': showRedBorder == true }"
    >
      <a-collapse-panel
        key="c"
        :header="`${$t('EQUIPMENT_CONDITION_MGMT')}${$t(
          'RELEVANT_INFORMATION'
        )}`"
      >
        <a-row :gutter="24" type="flex">
          <a-col v-if="form.hasOwnProperty('changeStatusFlag')" :span="8">
            <a-form-model-item
              :label="$t('CHANGEABLE_STATUS')"
              prop="changeStatusFlag"
            >
              <a-radio-group v-model="form.changeStatusFlag">
                <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-col v-if="form.hasOwnProperty('oeeFlag')" :span="8">
            <a-form-model-item :label="$t('USE_OEE')" prop="oeeFlag">
              <a-radio-group v-model="form.oeeFlag">
                <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-col v-if="form.hasOwnProperty('keyEqpFlag')" :span="8">
            <a-form-model-item :label="$t('KEY_LINE')" prop="keyEqpFlag">
              <a-select
                v-model="form.keyEqpFlag"
                :placeholder="$t('PLACESELECT')"
              >
                <a-select-option
                  v-for="(item, index) in keyEqpFlagList"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-collapse-panel>
    </a-collapse>
    <a-collapse
      v-model="activeKeyD"
      expand-icon-position="right"
      class="collapse-header-divide"
      :class="{ 'show-red-border': showRedBorder == true }"
    >
      <a-collapse-panel
        key="d"
        :header="`${$t('EPMS_CALL_REPAIR')}${$t('RELEVANT_INFORMATION')}`"
      >
        <a-row :gutter="24" type="flex">
          <a-col v-if="form.hasOwnProperty('eqpCategory')" :span="8">
            <a-form-model-item :label="$t('ACCOUNT_TYPE')" prop="eqpCategory">
              <a-select
                v-model="form.eqpCategory"
                :placeholder="$t('PLACESELECT')"
              >
                <a-select-option
                  v-for="(item, index) in eqpCategoryList"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col
            v-if="
              form.locationFirstIdArr &&
              form.locationFirstIdArr.length &&
              form.locationFirstIdArr[0] === 'LINE'
            "
            :span="8"
          >
            <a-form-model-item :label="$t('STATION')" prop="stationId">
              <a-select
                v-model="form.stationId"
                :placeholder="$t('PLACESELECT')"
              >
                <a-select-option
                  v-for="(item, index) in stationList"
                  :key="index"
                  :value="item.id"
                >
                  {{ item.stationName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-tooltip placement="top" :title="$t('STATION_TIPS')">
              <span class="station-tips">{{ $t("STATION_TIPS") }}</span>
            </a-tooltip>
          </a-col>
          <a-col v-if="form.hasOwnProperty('autoCallFlag')" :span="8">
            <a-form-model-item
              :label="$t('AUTOMATIC_REPAIR')"
              prop="autoCallFlag"
            >
              <a-radio-group v-model="form.autoCallFlag">
                <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
      v-model="activeKeyE"
      expand-icon-position="right"
      class="collapse-header-divide"
      :class="{ 'show-red-border': showRedBorder == true }"
    >
      <a-collapse-panel
        key="e"
        :header="`${$t('PM')}${$t('RELEVANT_INFORMATION')}`"
      >
        <a-row :gutter="24" type="flex">
          <a-col v-if="form.hasOwnProperty('lifeRemain')" :span="8">
            <a-form-model-item :label="$t('EQUIPMENT_LIFE')" prop="lifeRemain">
              <a-input-number
                v-model="form.lifeRemain"
                class="relative"
                style="width: 94%"
                :min="1"
                :placeholder="$t('PLACEENTER')"
              />
              <div class="input_right_text">{{ $t("MONTH") }}</div>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-collapse-panel>
    </a-collapse>
  </a-form-model>
</template>

<script>
import { mapState } from "vuex";
import ApiConstant from "@/api/ApiConstant";

export default {
  name: "",
  components: {},
  props: {
    form: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      activeKeyC: "c",
      activeKeyD: "d",
      activeKeyE: "e",
      yesNoList: [],
      keyEqpFlagList: [],
      eqpCategoryList: [], // 台账类型
      selectedUser: [],
      stationList: [],
      oldLocalLineId: "",
    };
  },
  computed: {
    ...mapState({
      showRedBorder: (state) => state.pagination.showRedBorder,
    }),
    rules() {
      return {
        eqpCategory: [
          {
            required: true,
            message: this.$t("PLACESELECT"),
            trigger: "change",
          },
        ],
        changeStatusFlag: [
          {
            required: true,
            message: this.$t("PLACESELECT"),
            trigger: "change",
          },
        ],
        oeeFlag: [
          {
            required: true,
            message: this.$t("PLACESELECT"),
            trigger: "change",
          },
        ],
        autoCallFlag: [
          {
            required: true,
            message: this.$t("PLACESELECT"),
            trigger: "change",
          },
        ],
        // stationId: [
        //   {
        //     required: true,
        //     message: this.$t("PLACESELECT"),
        //     trigger: "change",
        //   },
        // ],
      };
    },
  },
  watch: {
    form: {
      handler(newVal, oldVal) {
        if (
          newVal.locationFirstIdArr &&
          newVal.locationFirstIdArr[3] &&
          this.oldLocalLineId !== newVal.locationFirstIdArr[3]
        ) {
          if (newVal.locationFirstIdArr[0] === "LINE") {
            // eslint-disable-next-line prefer-destructuring
            this.oldLocalLineId = newVal.locationFirstIdArr[3];
            this.getStationList(newVal.locationFirstIdArr[3]);
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      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/dict-data/DIC:EPM:EQP_CATEGORY`
        ), // 台账类型
      ]).then(([yesNoRes, eqpCategoryRes]) => {
        this.yesNoList = yesNoRes.data.data;
        this.keyEqpFlagList = yesNoRes.data.data;
        this.eqpCategoryList = eqpCategoryRes.data.data;
      });
    },
    getValidate() {
      return new Promise((resolve, reject) => {
        this.$refs.qualityForm.validate((valid) => {
          if (valid) {
            resolve({ valid, form: this.form });
          }
        });
      });
    },
    // 负责人弹框显示
    selectUser() {
      this.$refs.selectUser.openDialog();
    },
    getStationList(id) {
      this.$axios
        .get(
          `${ApiConstant.PREFIX_CORE}/api/mdm/fac-station/list-by-line-id?lineIdList=${id}`
        )
        .then((res) => {
          this.stationList = res.data.data;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.show-red-border {
  border: 2px solid red !important;
  border-radius: 6px;
}
.el-select-tree {
  width: 100%;
}
.equipment-add {
  /deep/ .el-input-number,
  .el-date-editor {
    min-width: 100%;
  }
}
.input_right_text {
  position: absolute;
  top: -10px;
  right: -20px;
}
.station-tips {
  position: absolute;
  display: inline-block;
  width: 66.5%;
  top: 42px;
  left: 33.5%;
  font-size: 14px;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
