<template>
  <el-select
    v-model="value"
    :size="size || 'medium'"
    style="width: 100%"
    filterable
    clearable
    :placeholder="placeholder || ''"
    :disabled="disabled"
    :loading="selectLoading"
    @change="selectChange"
  >
    <el-option
      v-for="(item, index) in options"
      :key="item.rate + index + ''"
      :label="item.rate"
      :value="item.rate"
      :disabled="item.status === '0'"
    />
  </el-select>
</template>

<script>
import asyncRequest from "./http";
import resToken from "@/mixins/resToken";
export default {
  name: "SearchTax",
  mixins: [resToken],
  props: ["size", "value", "placeholder", "isDetail", "disabled", "type", "names"],
  /**
   * 属性集合
   * @param {String}        size             : 组件大小            非必填
   * @param {Array}         value            : 选中值              必填
   * @param {String}        placeholder      : 提示信息            非必填
   * @param {Boolean}       isDetail         : 是否是详情逻辑       必填
   * @param {Boolean}       disabled         : 是否禁用            必填
   * @param {String}        names            : 选中值label         展示详情必填
   */
  /**
   * 事件集合
   * @searchChange             : 选中值变化调用   抛出选中数据
   */
  data() {
    return {
      options: [],
      selectLoading: false,
      searchName: "",
    };
  },
  // watch: {
  //  names: function (val, old) {
  //   // console.log(val, old);
  //   this.searchName = val;
  //   if (this.isDetail && this.searchName) {
  //     this.remoteMethod(this.searchName);
  //   }
  // },
  // },
  mounted() {
    this.options = [];
    this.selectLoading = false;
    this.remoteMethod();
  },
  methods: {
    async selectChange(e) {
      // console.log(e);
      // let index = this.options.findIndex((v) => v.rate_cn === e);
      // if (index !== -1) {
      //   let model = {
      //     id: this.options[index].rate_cn,
      //     code: this.options[index].rate_cn,
      //     label: this.options[index].rate,
      //   };
      //   this.$emit("searchChange", model);
      // } else {
      this.$emit("searchChange", e);
      // }
    },
    async remoteMethod() {
      this.selectLoading = true;
      const res = await asyncRequest.list({});
      const { code, data, message } = await this.useResHandle(res);
      if (code === 0) {
        // let list=data
        this.options = data;
        this.options.forEach((i) => {
          i.rate += "%";
        });
      } else {
        this.options = [];
      }

      this.selectLoading = false;
    },
  },
};
</script>

<style></style>
