<template>
    <el-dialog custom-class="select-sale-dialog"
        title="选择销售"
        :visible.sync="isSelectSaleShow"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        @close="$emit('close')"
        width="692px"
        v-dialogDrag
        center
    >
        <div class="dialog-content-wrap" v-loading="dialogLoading" :element-loading-text="loadingText">
            <el-cascader v-model="sales" 
                ref="saleCascader"
                placeholder="请选择销售"
                :key="saleCascaderKey"
                :options="AllSalesArr" 
                :props="{
                    value: 'AdminId',
                    label: 'RealName',
                    children: 'ChildrenList',
                    multiple: true,
                    emitPath:false,
                }"
                collapse-tags :show-all-levels="false"
                clearable filterable
                @change="changeSelect"
                ></el-cascader>
            <p style="margin-top:20px;">已选用户</p>
            <div class="selected-wrap">
                <div class="select-item" v-for="item in selectList" :key="item.value">
                    <span>{{ item.label }}</span>
                    <i class="el-icon-error" @click="cancelSelect(item)"></i>
                </div>
            </div>
        </div>
        <div class="btn-wrap">
            <el-button type="primary" plain @click="$emit('close')">取消</el-button>
            <el-button type="primary" @click="choosedSales" :disabled="dialogLoading">确认</el-button>
        </div>
    </el-dialog>
</template>

<script>

import {dataAuthInterface , customInterence } from '@/api/api.js'
export default {
    props:{
        isSelectSaleShow:{
            type:Boolean,
            default:false
        },
        selectedSalesArr:{
            type:Array,
            default:[]
        }
    },
    data() {
        return {
            sales:[],
            selectList:[],
            saleCascaderKey:0,
            AllSalesArr:[],
            dialogLoading:false,
            loadingText:''
        };
    },
    watch:{
        isSelectSaleShow(newval){
            if(newval){
                this.getSalesList()
            }else{
                this.loadingText = ''
            }
        }
    },
    methods: {
        //获取销售列表
        //由于中英文客户的销售列表不一致,获取系统全部人员列表作为销售列表
        getSalesList(){
            this.dialogLoading = true
            customInterence.getSale({Status:0}).then(res=>{
                this.dialogLoading = false
                if(res.Ret!==200) {
                    this.AllSalesArr = []
                    this.sales=[]
                    this.selectList=[]
                    return 
                }
                this.AllSalesArr = res.Data?(res.Data.List||[]):[]
                //有选择的指标,回显
                if(this.selectedSalesArr.length){
                    this.sales = this.selectedSalesArr.map(i=>(i.SellerId))
                    this.$nextTick(()=>{
                        this.changeSelect()
                    })
                }
            })
        },
        changeSelect(){
            const nodes = this.$refs.saleCascader.getCheckedNodes()
            this.selectList = nodes.filter(i=>{
                /* if(i.value<10000&&!i.children.length){
                    return i
                } */
                if(!Number.isNaN(Number(i.value))&&!i.children.length){
                    return i
                }
            })
        },
        cancelSelect(item){
            const index = this.selectList.findIndex(i=>i.value==item.value)
            index!==-1&&this.selectList.splice(index,1)
            const saleIndex = this.sales.findIndex(i=>i==item.value)
            saleIndex!==-1&&this.sales.splice(saleIndex,1)
            this.saleCascaderKey++
        },
        //对比上次选择的销售，保存
        choosedSales(){
            let AddSellerIdArr = []
            let DelSellerIdArr = []
            const oldSales = this.selectedSalesArr.map(i=>(Number(i.SellerId)))
            const tempSales = this.sales.map(i=>(Number(i)))
            oldSales.forEach(i=>{
                if(tempSales.includes(i)){
                    AddSellerIdArr.push(i)
                }else{
                    DelSellerIdArr.push(i)
                }
            })
            AddSellerIdArr = Array.from(new Set([...AddSellerIdArr,...tempSales]))
            this.loadingText = '保存销售中，请勿关闭弹窗...'
            this.dialogLoading = true
            this.$emit('saveSales',{AddSellerIdArr,DelSellerIdArr,sales:this.selectList})
        }
    },
};
</script>

<style lang="scss">
.select-sale-dialog{
    .el-cascader{
        width:100%;
        .el-input{
            width:100% !important;
        }
    }
    .selected-wrap{
        margin:20px 0;
        display: flex;
        flex-wrap: wrap;
        gap:10px;
        .select-item{
            cursor: pointer;
            padding: 5px 10px;
            background-color: #f0f2f5;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            i{
                margin-left: 5px;
                color: #909399;
                font-size: 14px;
            }
        }
    }
    .btn-wrap{
        text-align: center;
        padding-bottom: 20px;
    }
}
</style>
