<script>
import { defineComponent, ref } from "@vue/composition-api";
import request from "@/utils/request";

export default defineComponent({
  props: {
    value: String,
    label: String,
    url: {
      type: String,
      default: "/common/sjzd/option",
    },
    d: Object,
    field: {
      type: String,
      default: "v,n",
    },
  },
  setup(props, content) {
    const fields = props.field.split(",");
    const attrs = content.attrs;
    const modelValue = ref();

    const options = ref([]);

    request({
      url: props.url,
      data: {
        limit: 99,
        ...props.d,
      },
    }).then((res) => {
      options.value = (res.data.option || res.data.page_data).map((item) => ({
        value: item[fields[0]],
        label: item[fields[1]],
      }));
      if (props.value) {
        modelValue.value = options.value.find(
          (item) => item.value === props.value
        );
      }
    });

    function handleChange(item) {
      content.emit("input", item.value);
      content.emit("update:label", item.label);
    }

    return {
      modelValue,
      options,
      handleChange,
    };
  },
});
</script>

<template>
  <el-select v-model="modelValue" value-key="value" filterable clearable>
    <el-option
      v-for="(option, i) in options"
      :key="i"
      :label="option.label"
      :value="option"
    />
  </el-select>
</template>
