<template>
  <div class="mainContent">
    <el-select @change="changeMer" :value="mer_id ? mer_id : '' " :multiple="is_multiple" filterable remote reserve-keyword placeholder="请输入关键词搜索商户" :remote-method="searchMer" :loading="loading">
      <el-option v-for="(item,index) in list" :key="index" :label="item.mer_name" :value="item.mer_id"></el-option>
    </el-select>
  </div>
</template>

<script>
import {merchantListApi} from "@/api/merchant";

export default {
  props: {
    mer_id:{
      type: String|Number|Object|Array,
      default: 0
    },
    is_multiple: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      loading: false,
      list: {},
    };
  },
  watch: {
    mer_id: {
      handler: function () {
        if(Object.values(this.list).length <= 0){
          this.getMer(this.mer_id);
        }
      },
      immediate: true
    },
  },
  mounted() {},
  methods: {
    // 搜索商户
    searchMer(event) {
      let _this = this;
      this.loading = true;
      let params = {
        keyword: event,
      };
      merchantListApi(params).then((res) => {
        if(res.status == 200){
          this.list = res.data.list;
        }
        this.loading = false;
      }).catch((res) => {
        this.loading = false;
        this.$message.error(res.message);
      });
    },
    // 获取商户
    getMer(mer_id) {
      let _this = this;
      this.loading = true;
      let type = typeof mer_id;
      let params = {};
      if(type === 'object'){
        params.mer_id_list = mer_id;
      }else{
        params.mer_id = mer_id;
      }
      merchantListApi(params).then((res) => {
        if(res.status == 200){
          _this.list = res.data.list;
        }
        _this.loading = false;
      }).catch((res) => {
        _this.loading = false;
        _this.$message.error(res.message);
      });
    },
    // 商户选中
    changeMer(event){
      // 获取选择的内容
      let list = Object.assign({},this.list);
      let info = {};
      Object.values(list).some((item) => {
        if(item.mer_id == event){
          info = item;
          return true;
        }
      });
      info.event = event;

      this.$emit('change', info);
    }
  },
};
</script>

<style lang="scss" scoped>

</style>
