<!--
 * @Author: 曹捷
 * @Date: 2020-06-22 20:37:04
 * @LastEditors: 曹捷
 * @LastEditTime: 2022-06-10 09:28:12
 * @Description: 自定义查询条件 接口下拉列表
 { name: '统计类型',  valuename: 'codeField', labelname: 'codeDesc', ajaxurl: '/processReport/getTypeList' }
--> 
<template>
  <template v-if="!multiple">
    <obitSelect :class="class" v-if="type === 'select'" :labelName="itemInfo.labelname" :placeholder="placeholder" :remote="remote" :selectList="selectList" :valueName="itemInfo.valuename"
      :disabled="disabled" v-model:selectName="selectLableName" @change="changeValue" @remoteMethod="initData" clearable v-model:value="cValue" @focusd="focus">
    </obitSelect>
    <a-radio-group :class="class" @change="changeValue" :disabled="disabled" v-else-if="type === 'radio'" v-model:value="cValue">
      <a-radio :key="item[itemInfo.valuename]" :value="item[itemInfo.valuename]" v-for="item in selectList">
        {{ item[itemInfo.labelname] }}
      </a-radio>
    </a-radio-group>
  </template>
  <template v-if="multiple">
    <a-select :class="class" v-if="type === 'select'" mode="multiple" v-model:value="cValue" :placeholder="placeholder" @change="changeValue">
      <a-select-option v-for="item in selectList" :key="item[itemInfo.valuename]">
        {{ item[itemInfo.labelname] }}
      </a-select-option>
    </a-select>
    <a-checkbox-group :class="class" @change="changeValue" v-else-if="type === 'radio'" v-model:value="cValue">
      <a-checkbox v-for="item in selectList" :key="item[itemInfo.valuename]" :value="item[itemInfo.valuename]">
        {{ item[itemInfo.labelname] }}
      </a-checkbox>
    </a-checkbox-group>
  </template>
</template>

<script>
import { inject, onMounted, reactive, toRefs, watch } from "vue";
import obitSelect from "./../obit-select/obit-select.vue";
export default {
  inheritAttrs: false,
  emits: ["selectName"],
  props: {
    class: {
      type: String
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "select",
    },
    value: {
      type: [Number, String, Array],
    },
    /**
    valuename: 'roleId',
    labelname: 'roleName',
    ajaxurl: '/manager/role/getList',
    // 自定义过滤数据
    customFilter: {
      type: Function,
    },
     */
    itemInfo: {
      type: Object,
    },
    placeholder: {
      type: String,
      default: "请选择对应值",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    // selectCode: { type: String },
    selectName: { type: String },
  },
  emits: [
    "focus",
    "change",
    "blur",
    "update:value",
    "changeInfo",
    "update:selectName",
  ],
  setup (props, context) {
    let http = inject("http");
    let _data = reactive({
      remote: false, //是否为远程搜索
      cValue: props.value,
      selectList: [],
      selectLableName: props.selectName,
    });
    watch(
      () => props.value,
      (value) => {
        _data.cValue =
          props.value === null || props.value === undefined ? "" : props.value;
      }
    );
    // watch(() => props.selectCode, () => {
    //   _methods.initData(props.itemInfo.initValue)
    // })
    watch(
      () => props.multiple,
      (value) => {
        if (value) {
          _data.cValue = [];
        } else {
          _data.cValue = "";
        }
      }
    );
    watch(
      () => props.itemInfo.ajaxurl,
      () => {
        _methods.initData(props.itemInfo.initValue);
      },
      { deep: true }
    );

    let _methods = {
      focus (value) {
        context.emit("focus");
      },
      changeValue (value) {
        context.emit("update:value", value);
        context.emit("change", value);
        context.emit(
          "changeInfo",
          _data.selectList.find((el) => el[props.itemInfo.valuename] == value)
        );
        context.emit("update:selectName", _data.selectLableName);
      },
      initData (searchText) {
        searchText = searchText ? searchText : "";
        let config = http.getConfig();
        if (!props.itemInfo.ajaxurl) return;
        let type = props.itemInfo.ajaxType || "post";
        http.getDataByUrl(
          `${props.itemInfo.ajaxurl}${searchText}`,
          props.itemInfo.data,
          type
        ).then((res) => {
          if (props.itemInfo.customFilter && props.itemInfo.customFilter instanceof Function) {
            _data.selectList = props.itemInfo.customFilter(res);
          } else {
            let list;
            if (res.data) {
              list = res.data;
            } else if (res instanceof Array) {
              list = res;
            }
            if (list) {
              list.forEach((element, index) => {
                let type = Object.prototype.toString.call(element);
                if (type.indexOf("String") !== -1) {
                  let info = {};
                  info[props.itemInfo.valuename] = element;
                  info[props.itemInfo.labelname] = element;
                  list[index] = info;
                }
              });
              _data.selectList = list;
            }
          }
        });
      },
    };

    if (props.itemInfo.remote === 1) {
      _data.remote = true;
    }
    if (props.itemInfo.type === 4) {
      if (!props.itemInfo.labelname) {
        props.itemInfo.labelname = "lable";
        props.itemInfo.valuename = "value";
      }
    }

    onMounted(() => {
      _methods.initData(props.itemInfo.initValue);
    });
    return {
      ...toRefs(_data),
      ..._methods,
    };
  },
  components: { obitSelect },
};
</script>

<style>
</style>