/**
 * 选择系统代理商
 */
Vue.component('select-agent', {
    template: `<el-select v-model="agent"
                          :placeholder="placeholder"
                          :disabled="isDisabled"
                          :size="size"
                          value-key="id"
                          @change="changeAgent"
                          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: {
        'agentId': {
            type: String,
            default: '',
        },//选择的代理商ID
        'agentName': {
            type: String,
            default: '',
        },//选择的代理商名称
        'isDisabled': {
            type: Boolean,
            default: false,
        },//是否禁止修改
        'placeholder': {
            type: String,
            default: '选择代理商'
        },
        'size': {
            type: String,
            default: 'small',
        },
        'showStatus': {
            type: Boolean,
            default: false,
        },//是否显示代理商状态
    },
    data() {
        return {
            agent: {
                id: '',
                name: '',
            },//已选中代理商
            dataList: [],// 数据
        };
    },
    methods: {
        //切换代理商
        changeAgent(val) {
            this.$emit('update:agentId', this.agent.id);
            this.$emit('update:agentName', this.agent.name);
            this.$emit('change', val);
        },
        //获取代理商列表
        getAgentList(callback) {
            this.dataList = [];
            this.sendRequest('Admin/Agent/getChooseAgent', {
                success: (res) => {
                    if (res.status == 1) {
                        this.dataList = res.data;
                        typeof callback == "function" && callback();
                    }
                },
            })
        },
        unitAgent(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.getAgentList(() => {
            this.agent = this.unitAgent(this.agentId, this.agentName);
        });
    },
    watch: {
        agentId(n) {
            if (this.agent.id != n) {
                this.agent = this.unitAgent(this.agentId, this.agentName);
            }
        },
        agentName(n) {
            if (this.agent.name != n) {
                this.agent = this.unitAgent(this.agentId, this.agentName);
            }
        }
    }
});