<!--
 * @Author: 曹捷
 * @Date: 2019-08-22 15:24:21
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-12-31 14:59:01
 * @Description: 字典组件
 -->
<template>
  <a-select :allowClear="clearable" :disabled="disabled" :mode="multiple ? 'multiple' : undefined" :placeholder="placeholder" v-if="type === 'select'" v-model:value="dictValue">
    <a-select-option :key="item[valueName]" :value="item[valueName]" v-for="item in dictValueList">
      {{ item[labelName] }}
    </a-select-option>
  </a-select>
  <a-radio-group :disabled="disabled" v-else-if="type === 'radio'" v-model:value="dictValue">
    <a-radio :key="item[valueName]" :value="item[valueName]" v-for="item in dictValueList">{{ item[labelName] }}
    </a-radio>
  </a-radio-group>
</template>

<script>
import { inject, reactive, ref, toRefs, watch, onMounted } from "vue";
import dictStore from "./dictStore.js";
export default {
  emits: ["change", "update:value"],
  components: {
    // aSelect: Select,Radio
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    // 是否可以多选
    multiple: {
      type: Boolean,
      default: false,
    },
    value: {
      type: [Number, String, Array],
    },
    // 字典编码
    dictCode: {
      type: String,
      required: true,
    },
    placeholder: {
      type: String,
      default: "请选择",
    },
    // 展示名称key
    labelName: {
      type: String,
      default: "dictLabel",
    },
    // 数据保存对应的key名称
    valueName: {
      type: String,
      default: "dictValue",
    },
    // 字典展示方式   select  radio
    type: {
      type: String,
      default: "select",
    },
  },
  setup (props, context) {
    let http = inject("http");
    let _data = reactive({
      dictValue: props.value ? props.value : undefined,
      dictValueList: [],
    });
    let _methods = {
      initValue () {
        if (props.multiple) {
          if (props.value instanceof Array) {
            let arr = [];
            props.value.forEach((element) => {
              arr.push(element + "");
            });
            _data.dictValue = arr;
          } else {
            _data.dictValue = [];
          }
        } else {
          _data.dictValue = props.value;
        }
      },
      initData () {
        dictStore.getDictList(props.dictCode, http).then((res) => {
          _data.dictValueList = res;
          _methods.initValue();
        });
      },
      changeDict (value) {
        context.emit("update:value", value);
        context.emit("change", value);
      },
    };
    watch(
      () => props.value,
      () => {
        _methods.initValue();
      }
    );
    watch(
      () => props.dictCode,
      () => {
        _methods.initValue();
      }
    );
    watch(
      () => _data.dictValue,
      (value, oldvalue) => {
        if (value instanceof Array) {
          if (!oldvalue || value.length !== oldvalue.length) {
            _methods.changeDict(value);
          }
        } else {
          _methods.changeDict(value);
        }
      }
    );
    onMounted(() => {
      _methods.initData();
    });
    // 返回数据和方法
    return {
      ...toRefs(_data),
      ..._methods,
    };
  },
};
</script>

<style>
</style>