<template>
  <div class="SelectI18n">
    <a-select
      v-model="name"
      style="width: 100%"
      show-search
      :filter-option="false"
      :default-active-first-option="false"
      @change="handChange"
      @search="remoteMethod"
    >
      <div slot="dropdownRender" slot-scope="menu">
        <v-nodes :vnodes="menu" />
        <a-divider style="margin: 4px 0" />
        <div
          class="selectAdd"
          @mousedown="(e) => e.preventDefault()"
          @click="changeI18n"
        >
          <a-icon type="plus" style="margin: 3px 5px 0 0" /> {{ $t("ADD") }}
        </div>
      </div>
      <a-select-option
        v-for="item in menuNameList"
        :key="item.id"
        :value="item.id"
      >
        {{ item.i18nCode }}({{ item.dataValue }})
      </a-select-option>
    </a-select>
    <MegaModal
      class="dictDialog"
      :title="$t('I18N_INFO')"
      :visible="i18nDialogVisible"
      :centered="true"
      :mask-closable="false"
      :destroy-on-close="true"
      @cancel="cancel"
    >
      <i-form
        ref="drawerForm"
        :label-width="100"
        :form-item="dialogFormItem"
        :search-form="dialogForm"
        :span="1"
      />
      <template slot="footer">
        <a-button type="primary" @click="save">
          <Icon type="icon-cur-save_1" :size="18" /> {{ $t("SAVE") }}
        </a-button>
        <a-button @click="cancel">
          <Icon type="icon-dir-f-rollback" :size="18" /> {{ $t("CANCEL") }}
        </a-button>
      </template>
    </MegaModal>
  </div>
</template>
<script>
import { Modal as MegaModal, Icon } from "@mega-design/ui-vue";
import { mapState } from "vuex";
import ApiConstant from "@/api/ApiConstant";

export default {
  components: {
    MegaModal,
    Icon,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes,
    },
  },
  props: {
    // 需要展示的key
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      i18nDialogVisible: false,
      name: "",
      menuNameList: [],
      dialogForm: {
        id: null,
        clientType: "",
        i18nCode: "",
        type: "",
      },
      momVersionList: [], // mom 版本列表
      typeList: [],
      // 表单的配置项详情
      dialogFormItem: {
        i18nCode: {
          i18n: "CODE", // 编码
          isRequired: true,
          rule: {
            max: 128,
            required: true,
            message: this.$t("PLACEENTER") + 128 + this.$t("LENGTH_TIP"),
            trigger: "blur",
          },
        },
        clientType: {
          itemType: "select",
          isRequired: true,
          i18n: "MOM_VERSION",
          width: 80,
          options: this.momVersionList,
        },
        type: {
          itemType: "select",
          isRequired: true,
          i18n: "TYPE",
          width: 80,
          options: this.typeList,
        },
      },
    };
  },
  computed: {
    ...mapState({
      locale: (state) => state.app.locale,
    }),
  },
  watch: {
    typeList: {
      handler(newVal, oldVal) {
        if (newVal && newVal.length > 0) {
          this.dialogFormItem.type.options = newVal;
        }
      },
      deep: true,
      immediate: true,
    },
    momVersionList: {
      handler(newVal, oldVal) {
        if (newVal && newVal.length > 0) {
          this.dialogFormItem.clientType.options = newVal;
        }
      },
      deep: true,
      immediate: true,
    },
    value: {
      handler(newVal) {
        this.name = newVal;
      },
    },
  },
  beforeMount() {
    this.$store.state.app.languages.forEach((item) => {
      this.$set(this.dialogFormItem, item.value, {
        inputType: "textarea",
        i18n: item.label,
      });
    });
  },
  mounted() {
    Promise.all([
      this.getDictByCode("DIC:CORE:MOM_VERSION"),
      this.getDictByCode("DIC:CORE:I18N_TYPE"),
    ]).then(([res, resType]) => {
      this.momVersionList = res.data.data || [];
      this.typeList = resType.data.data || [];
    });
  },
  methods: {
    remoteMethod(val) {
      const params = {
        searchKey: val,
      };
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/sys/i18n/list-for-select`, {
          params,
        })
        .then((res) => {
          this.menuNameList = res.data.data.filter(
            (item, index) => index < 150
          );
        });
    },
    changeI18n() {
      this.dialogForm.id = null;
      this.$store.state.app.languages.forEach((item) => {
        this.$store.state.app.languages.forEach((code) => {
          this.dialogForm[code.value] = "";
          this.$set(this.dialogForm, code.value, "");
        });
      });
      this.$set(this.dialogForm, "i18nCode", "");
      this.$set(this.dialogForm, "clientType", this.momVersionList[0]?.value);
      this.i18nDialogVisible = true;
    },
    save() {
      this.$emit("confirm", this.dialogForm);
      this.name = `${this.dialogForm.i18nCode}(${
        this.dialogForm[this.locale]
      })`;
    },
    cancel() {
      this.i18nDialogVisible = false;
      this.menuNameList = [];
    },
    handChange(value) {
      this.menuNameList.forEach((element) => {
        if (element.id === value) {
          this.$emit(
            "handChange",
            `${element.i18nCode}(${element.dataValue})`,
            element.i18nCode
          );
          this.name = `${element.i18nCode}(${element.dataValue})`;
        }
      });
    },
  },
};
</script>
<style lang="less">
.selectAdd {
  padding: 4px 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  height: 32px;
  color: #005583;
}
</style>
