import { ElOption, ElSelect } from "element-plus";
import { defineComponent, ref, unref, computed } from "vue";
import { RemoteSelectProps } from "./types";
import { useResponseHandle } from "/@/hooks";

const RemoteSelect = defineComponent({
  name: "RemoteSelect",
  props: RemoteSelectProps,
  emits: ["listChange", "itemChange", "itenDetail", "update:value", "inital", "clear"],
  setup(props, { emit, expose }) {
    const value = computed({
      get() {
        return props.value;
      },
      set(newVal) {
        emit("update:value", newVal);
      }
    });

    const responseHandle = useResponseHandle();

    const list = ref<Array<any>>([]);

    const loading = ref(false);

    async function initalData(params) {
      const { responseLabelProp, responseValProp, subLabelProp, api } = props;

      loading.value = true;
      const { code, data, message } = await api({
        ...params,
        ...(props.proData ? props.proData() : {})
      });
      loading.value = false;

      responseHandle({
        code,
        message,
        handler: () => {
          const _data = props.isRoot ? data : data.list;
          list.value = _data.map(item => ({
            ...item,
            label: item[responseLabelProp],
            value: item[responseValProp],
            subLabel: item[subLabelProp]
          }));

          emit("inital", list.value[0][responseValProp], list.value[0]);
        }
      });

      return list.value;
    }

    async function remoteMethod(val: string) {
      if (!val) return;
      const {
        responseLabelProp,
        responseValProp,
        requestProp,
        subLabelProp,
        api
      } = props;

      loading.value = true;

      const { code, data, message } = await api({
        [requestProp ? requestProp : responseLabelProp]: val,
        ...(props.proData ? props.proData() : {})
      });

      responseHandle({
        code,
        message,
        handler: () => {
          const _data = props.isRoot ? data : data.list;

          list.value = _data.map(item => ({
            ...item,
            label: item[responseLabelProp],
            value: item[responseValProp],
            subLabel: item[subLabelProp]
          }));

          emit("listChange", unref(list));
        }
      });

      loading.value = false;
    }

    expose({
      initalData
    });

    return () => (
      <ElSelect
        v-model={value.value}
        placeholder={props.placeholder}
        remoteMethod={remoteMethod}
        loading={loading.value}
        reserveKeyword
        filterable
        clearable
        remote
        style={{
          wdith: props.width ? props.width + "px" : ""
        }}
        onChange={val => {
          emit(
            "itemChange",
            list.value.find(i => i.value === val)
          );
        }}
      >
        {list.value.map((item, index) => (
          <ElOption
            label={
              props.getLabel
                ? props.getLabel(item)
                : item.subLabel
                  ? item.label + " - " + item.subLabel
                  : item.label
            }
            key={index}
            value={item.value}
            disabled={item.value === props.disabledValue}
          >
            <span style="float: left">
              {props.getLabel ? props.getLabel(item) : item.label}
            </span>

            <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">
              {item.subLabel}
            </span>
          </ElOption>
        ))}
      </ElSelect>
    );
  }
});

export default RemoteSelect;
