/**
 * 选择系统商户
 */
Vue.component('select-merchant', {
    template: `<el-select v-model="merchant"
                          :placeholder="placeholder"
                          :disabled="isDisabled"
                          :size="size"
                          value-key="id"
                          @change="changeMerchant"
                          clearable filterable>
                    <el-option v-for="item in dataList"
                            :key="item.id"
                            :label="item.name"
                            :value="item">
                            <template v-if="showStatus">
                                <span style="float: left">{{ item.name }}</span>
                                <span style="float: right; color: #8492A6; font-size: 12px">{{item.status==1?'正常':'禁用'}}</span>
                            </template>
                    </el-option>
                </el-select>`,
    props: {
        'merchantId': {
            type: String,
            default: '',
        },//选择的商户ID
        'merchantName': {
            type: String,
            default: '',
        },//选择的商户名称
        'isDisabled': {
            type: Boolean,
            default: false,
        },//是否禁止修改
        'placeholder': {
            type: String,
            default: '选择商户'
        },
        'size': {
            type: String,
            default: 'small',
        },
        'showStatus': {
            type: Boolean,
            default: false,
        },//是否显示商户状态
    },
    data() {
        return {
            merchant: {
                id: '',
                name: '',
            },//已选中商户
            dataList: [],// 数据
        };
    },
    methods: {
        //切换商户
        changeMerchant(val) {
            this.$emit('update:merchantId', this.merchant.id);
            this.$emit('update:merchantName', this.merchant.name);
            this.$emit('change', val);
        },
        //获取商户列表
        getMerchantList(callback) {
            this.dataList = [];
            this.sendRequest('Agent/Merchant/getChooseMerchant', {
                success: (res) => {
                    if (res.status == 1) {
                        this.dataList = res.data.list;
                        typeof callback == "function" && callback();
                    }
                },
            })
        },
        unitMerchant(id, name) {
            if (!id && !name) {
                return {
                    id: '',
                    name: '',
                }
            }
            if (id && name) {
                return {
                    id: id,
                    name: name,
                }
            }
            for (let i in this.dataList) {
                if (this.dataList[i].id == id || this.dataList[i].name == name) {
                    return {
                        id: this.dataList[i].id,
                        name: this.dataList[i].name,
                    }
                }
            }
            return {
                id: '',
                name: '',
            };
        }
    },
    created() {
        this.getMerchantList(() => {
            this.merchant = this.unitMerchant(this.merchantId, this.merchantName);
        });
    },
    watch: {
        merchantId(n) {
            if (this.merchant.id != n) {
                this.merchant = this.unitMerchant(this.merchantId, this.merchantName);
            }
        },
        merchantName(n) {
            if (this.merchant.name != n) {
                this.merchant = this.unitMerchant(this.merchantId, this.merchantName);
            }
        }
    }
});