<template>
  <div class="mainContent">
    <el-select
      class="select-merchant"
      @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"
        :disabled="isDisabled(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
    },
    merchant_type:{
      type: String|Number,
      default: 0
    },
    is_multiple: {
      type: Boolean,
      default: false
    },
    selected_shop:{
      type: Object|Array,
      default: function () {
        return {};
      },
    },
    agent_id:{
      type: String|Number,
      default: 0
    },
  },
  data() {
    return {
      loading: false,
      list: {},
      // 商户已经选中处理
      selected_shop_mer_ids: {},
      current_agent_selected: {},
    };
  },
  watch: {
    // 当前角色已选中商户id列表变更
    mer_id: {
      handler: function () {
        if(Object.values(this.list).length <= 0){

          this.searchMer('');
        }
      },
      immediate: true
    },
    // 所有同类型角色已选中商品ID列表
    selected_shop: {
      handler: function () {
        let agentId = this.agent_id || 0;
        let merIds = {};
        let currentAgentSelected = {};
        Object.values(this.selected_shop).forEach(function (item,index) {
          merIds[index] = Number(item.mer_id);
          if (item.agent_id == agentId) currentAgentSelected[index] = Number(item.mer_id);
        })
        this.selected_shop_mer_ids = merIds;
        this.current_agent_selected = Object.values(currentAgentSelected);
      },
      immediate: true
    },
  },
  mounted() {},
  methods: {
    // 搜索商户
    searchMer(event) {
      let _this = this;
      let params = {
        keyword: event
      };

      _this.getMerchantList(params);
    },
    // 获取商户列表
    getMerchantList(params){
      let _this = this;
      _this.loading = true;
      // 参数补充
      params.merchant_type = _this.merchant_type || 0;
      params.status = 1;
      params.limit = 1000;
      // 发起请求
      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);
    },
    // 当前角色是否允许选择当前商户
    isDisabled(mer_id){
      // 判断：当前商户是否已经被选中  未被选中可以进行操作
      if(Object.values(this.selected_shop_mer_ids).includes(Number(mer_id))){
        // 已被选中  判断是否被当前代理选中
        return !Object.values(this.current_agent_selected).includes(Number(mer_id))
      }

      return false;
    }

  },
};
</script>

<style lang="scss" scoped>
.select-merchant{
  width: 100% !important;
}
</style>
