
<script setup>
import { ref,watch,nextTick } from 'vue';
import {dataAuthInterface , customInterence } from '@/api/api.js'


const props = defineProps({
		isSelectSaleShow:{
				type:Boolean,
				default:false
		},
		selectedSalesArr:{
				type:Array,
				default:[]
		}
})
const emit = defineEmits(['saveSales','close'])


const sales= ref([])
const AllSalesArr = ref([])
const dialogLoading = ref(false)
//获取销售列表
//由于中英文客户的销售列表不一致,获取系统全部人员列表作为销售列表
function getSalesList(){
	dialogLoading.value = true
	customInterence.getSale({Status:0}).then(res=>{
			dialogLoading.value = false
			if(res.Ret!==200) {
					AllSalesArr.value = []
					sales.value=[]
					selectList.value=[]
					return 
			}
			AllSalesArr.value = res.Data?(res.Data.List||[]):[]
			//有选择的指标,回显
			if(selectedSalesArr.value.length){
					sales.value = selectedSalesArr.value.map(i=>(i.SellerId))
					nextTick(()=>{
							changeSelect()
					})
			}
	})
}

const saleCascader = ref(null)
const selectList= ref([])
const saleCascaderKey= ref(0)
function changeSelect(){
		const nodes = saleCascader.value.getCheckedNodes()
		selectList.value = nodes.filter(i=>{
				/* if(i.value<10000&&!i.children.length){
						return i
				} */
				if(!Number.isNaN(Number(i.value))&&!i.children.length){
						return i
				}
		})
}


function cancelSelect(item){
		const index = selectList.value.findIndex(i=>i.value==item.value)
		index!==-1&&selectList.value.splice(index,1)
		const saleIndex = sales.value.findIndex(i=>i==item.value)
		saleIndex!==-1&&sales.value.splice(saleIndex,1)
		saleCascaderKey.value++
}


//对比上次选择的销售，保存
const loadingText= ref('')
function choosedSales(){
		let AddSellerIdArr = []
		let DelSellerIdArr = []
		const oldSales = selectedSalesArr.value.map(i=>(Number(i.SellerId)))
		const tempSales = sales.value.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]))
		loadingText.value = '保存销售中，请勿关闭弹窗...'
		dialogLoading.value = true
		emit('saveSales',{AddSellerIdArr,DelSellerIdArr,sales:selectList.value})
}


watch(
	() => props.isSelectSaleShow,
	(newval) =>{
		if(newval){
				getSalesList()
		}else{
				loadingText.value = ''
		}
})
    
</script>

<template>
    <el-dialog 
				class="select-sale-dialog"
        title="选择销售"
        :model-value="isSelectSaleShow"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        @close="emit('close')"
        width="692px"
        draggable
        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>

<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>
