<script setup>
import {computed, ref, watch} from 'vue'
import apiReportEn from '@/api/reportEn'
import apiReportVarietyEn from '@/api/reportVarietyEn'
import { showToast } from 'vant'

const props=defineProps({
    defaultThemeVal:{
        type:String,
        default:''
    },
    reportId:{
        type:Number,
        default:0
    }
})
const emits=defineEmits(['close'])


const emailOpt=ref([])
const allEmailOpt = ref([])
// 获取用户邮箱数据
const showAllUser=ref(false)
function getEmailList(){
    apiReportEn.getCustomEmailList({
        CurrentIndex:1,
        PageSize:10000,
        ListParam:4,
        SortType:1,
        SortParam:3
    }).then(res=>{
        if(res.Ret===200){
            emailOpt.value=res.Data?.List||[]
            allEmailOpt.value = res.Data?.List||[]
            // handleCheckAllChange()
        }
    })
}
getEmailList()

//获取报告对应的品种数据
const showSelectVariety=ref(false)
const varietyOpts=ref([])
const isSlideCancelSend = ref(false);
function getVarietyList(){
    apiReportVarietyEn.varietyList({
         ReportId:props.reportId
    }).then(res=>{
       if(res.Ret===200){
           res.Data&&res.Data.forEach(item=>{
               item.Child&&item.Child.forEach(_item=>{
                   varietyOpts.value.push({
                       EnPermissionId:_item.EnPermissionId,
                       EnPermissionName:_item.EnPermissionName,
                       select:true
                   })
               })
           })
       }
    })
}
getVarietyList()

function clearVariety(item) {
    item.select=false

    if(!selectVariety.value.length) {
        isSlideCancelSend.value = false
        searchCustomVal.value=''
        checkedCustom.value=[]
    }
}

//选中的品种
const selectVariety=computed(()=>{
    return varietyOpts.value.filter(e=>e.select)
})

//发送邮件按钮是否禁用
const sendBtnDisabled=computed(()=>{
    if(!themeVal.value||(checked.value.length===0&&selectVariety.value.length===0)) return true
    return false
})

//邮件主题
const themeVal=ref(props.defaultThemeVal||'')

// 有多少用户是禁用状态
const disabledNum=computed(()=>{
    return emailOpt.value.filter(item=>item.Enabled===0).length
})
const checked=ref([])//选择的用户
const checkedAll=ref(false)
const checkedSendOtherList = ref([]);
const searchVal=ref('')
function handleSearchFilter(){
    checked.value=[]
    emailOpt.value=allEmailOpt.value.filter(item=>item.Name.indexOf(searchVal.value)>-1)
}
function handleCheckAllChange(){
    if(checkedAll.value){
        checked.value=[]
    }else{
        checked.value=emailOpt.value.filter(item=>item.Enabled!==0).map(e=>e.Id)
    }
}

watch(
    ()=>checked.value,
    (n)=>{
        if(n.length&&n.length===(emailOpt.value.length-disabledNum.value)){
            checkedAll.value=true
        }else{
            checkedAll.value=false
        }
        checkedSendOtherList.value = emailOpt.value.filter(_ => n.includes(_.Id))
    }
)

watch(
    ()=>selectVariety.value,
    (n)=>{
        n.length&&getCustomListEnFun()
    }
)


const showCustomPop=ref(false)
const searchCustomVal=ref('')
const checkedCustom=ref([])
const allCustomOptions=ref([])
const customOptions = ref([])
/* 品种关联的客户 */
async function getCustomListEnFun(){
    if(!selectVariety.value.length) return

    const res = await apiReportEn.getCustomListEn({
        PageSize:100000,
        CurrentIndex:1,
        EnPermissionIds:selectVariety.value.map(_ =>_.EnPermissionId).join(',')
    })
    if(res.Ret!==200) return 
    customOptions.value = res.Data.List || []
    allCustomOptions.value = res.Data.List || []
}

function handleSearchFilterCustom() {
    checkedCustom.value=[]
    customOptions.value=allCustomOptions.value.filter(item=>item.CompanyName.indexOf(searchCustomVal.value)>-1)
}

const checkedCustomList = computed(() => {
    return customOptions.value.filter(_ => checkedCustom.value.includes(_.CompanyId))
})



// 发送邮件
function handleConfirmSendEmail(){
    if(!themeVal.value){
        showToast('请填写邮件主题')
        return
    }
    if(themeVal.value.length>100){
        showToast('邮件主题请控制在100个字符以内')
        return
    }

    if(!selectVariety.value.length && !checked.value.length) return showToast('收件人、抄送至少填写一个')


    const varietyIds=[]
    selectVariety.value.forEach(item=>{
        varietyIds.push(item.EnPermissionId)
    })
    apiReportEn.sendEmail({
        ReportId:props.reportId,
        EmailIds:checked.value.join(','),
        Theme:themeVal.value,
        EnPermissions:varietyIds,
        NoCompanyIds:checkedCustom.value,
    }).then(res=>{
        if(res.Ret===200){
            showToast('发送成功')
            emits('close')
        }
    })

}

</script>

<template>
    <div class="send-email-wrap">
        <div class="top-box">
            <label class="form-label">收件人</label>
            <ul class="left-variety-box">
                <li v-for="item in selectVariety" :key="item.EnPermissionId">
                    <span>{{item.EnPermissionName}}</span>
                    <img class="icon" src="@/assets/imgs/icon_close.png" alt="" @click="clearVariety(item)">
                </li>
            </ul>
            <!-- <van-search readonly placeholder="搜索" @click="handleShowSearch" /> -->
            <img class="add-icon" src="@/assets/imgs/report/icon_add.png" alt="" @click="showSelectVariety=true">

            <van-icon :name="isSlideCancelSend?'arrow-up':'arrow-down'" style="margin-left:10px;font-size:24px" v-if="selectVariety.length" @click="isSlideCancelSend=!isSlideCancelSend"/>
        </div>
        <div class="top-box" v-if="isSlideCancelSend">
            <label class="form-label">取消发送</label>
            <ul class="left-variety-box">
                <li v-for="(item,index) in checkedCustomList" :key="item.CompanyId">
                    <span>{{item.CompanyName}}</span>
                    <img class="icon" src="@/assets/imgs/icon_close.png" alt="" @click="checkedCustom.splice(index,1)">
                </li>
            </ul>
            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 48 48" fill="none" @click="showCustomPop=true;">
                <rect width="48" height="48" rx="24" fill="#0052D9"/>
                <path d="M16.75 17.3043C16.75 13.2703 19.94 10 23.875 10C27.81 10 31 13.2703 31 17.3043C31 21.3384 27.81 24.6087 23.875 24.6087C19.94 24.6087 16.75 21.3384 16.75 17.3043ZM28.625 17.3043C28.625 14.615 26.4984 12.4348 23.875 12.4348C21.2516 12.4348 19.125 14.615 19.125 17.3043C19.125 19.9937 21.2516 22.1739 23.875 22.1739C26.4984 22.1739 28.625 19.9937 28.625 17.3043Z" fill="white"/>
                <path d="M23.875 25.8261C25.5152 25.8261 27.1068 26.0391 28.625 26.4397V28.9667C27.1199 28.5075 25.5256 28.2609 23.875 28.2609C20.3428 28.2609 17.0679 29.3902 14.375 31.3158L14.375 35.5652H28.625V38H14.375C13.0633 38 12 36.9099 12 35.5652V31.1249C12 30.2117 12.4984 29.3753 13.2909 28.9585L14.6644 28.2609H14.6695C17.3966 26.7095 20.5352 25.8261 23.875 25.8261Z" fill="white"/>
                <rect x="27" y="30" width="10" height="3" fill="white"/>
            </svg>
        </div>
        <div class="top-box">
            <label class="form-label">抄送</label>
            <ul class="left-variety-box">
                <li v-for="(item,index) in checkedSendOtherList" :key="item.Id">
                    <span>{{item.Name}}</span>
                    <img class="icon" src="@/assets/imgs/icon_close.png" alt="" @click="checkedSendOtherList.splice(index,1)">
                </li>
            </ul>
        
            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 48 48" fill="none" @click="showAllUser=true;checked=checkedSendOtherList.map(_ =>_.Id)">
                <rect width="48" height="48" rx="24" fill="#0052D9"/>
                <path d="M16.7273 17.3043C16.7273 13.2703 19.902 10 23.8182 10C27.7344 10 30.9091 13.2703 30.9091 17.3043C30.9091 21.3384 27.7344 24.6087 23.8182 24.6087C19.902 24.6087 16.7273 21.3384 16.7273 17.3043ZM28.5455 17.3043C28.5455 14.615 26.429 12.4348 23.8182 12.4348C21.2074 12.4348 19.0909 14.615 19.0909 17.3043C19.0909 19.9937 21.2074 22.1739 23.8182 22.1739C26.429 22.1739 28.5455 19.9937 28.5455 17.3043Z" fill="white"/>
                <path d="M23.8182 25.8261C25.4505 25.8261 27.0345 26.0391 28.5455 26.4397V28.9667C27.0476 28.5075 25.4608 28.2609 23.8182 28.2609C20.3029 28.2609 17.0436 29.3902 14.3636 31.3158L14.3636 35.5652H28.5455V38H14.3636C13.0582 38 12 36.9099 12 35.5652V31.1249C12 30.2117 12.496 29.3753 13.2847 28.9585L14.6517 28.2609H14.6567C17.3708 26.7095 20.4943 25.8261 23.8182 25.8261Z" fill="white"/>
                <path d="M33.2727 25.8261V30.6957H38V33.1304H33.2727V38H30.9091V33.1304H26.1818V30.6957H30.9091V25.8261H33.2727Z" fill="white"/>
            </svg>
        </div>
        <div class="theme-text-box">
            <van-field 
                v-model="themeVal" 
                label="主题" 
                type="textarea"
                placeholder="请输入主题"
                rows="4"
                maxlength="100"
                show-word-limit
                label-width="40px"
            />
        </div>

        <div class="list-wrap">
            <!-- <div class="check-all-btn">
                <van-checkbox :modelValue="checkedAll" @click="handleCheckAllChange">全选</van-checkbox>
            </div>
            <van-checkbox-group v-model="checked">
                <van-checkbox
                    v-for="item in emailOpt" 
                    :key="item.Id"
                    :name="item.Id" 
                    :disabled="item.Enabled===0"
                >{{item.Name}}&lt;{{item.Email}}&gt;</van-checkbox>
            </van-checkbox-group> -->
        </div>
        <van-button 
            class="submit-btn" 
            block 
            type="primary"
            :disabled="sendBtnDisabled"
            @click="handleConfirmSendEmail"
        >发送</van-button>
    </div>
    <!-- 选择品种 -->
    <van-popup 
        v-model:show="showSelectVariety"
        position="bottom"
        round
        closeable
    >
        <div class="send-email-wrap search-wrap">
            <div class="head-box">选择品种</div>
            <div class="list-wrap">
                <van-checkbox
                    v-for="item in varietyOpts"
                    :key="item.EnPermissionId"
                    v-model="item.select"
                >{{item.EnPermissionName}}</van-checkbox>
            </div>
        </div>
    </van-popup>
    <!-- 所有邮箱 -->
    <van-popup 
        v-model:show="showAllUser"
        position="bottom"
        round
        closeable
    >
        <div class="send-email-wrap search-wrap">
            <div class="head-box">选择联系人</div>
            <div class="search-box">
                <van-search v-model="searchVal" placeholder="搜索" @search="handleSearchFilter" @clear="handleSearchFilter"/>
            </div>
            <div class="list-wrap">
                <div class="check-all-btn">
                    <van-checkbox :modelValue="checkedAll" @click="handleCheckAllChange">全选</van-checkbox>
                </div>
                <van-checkbox-group v-model="checked">
                    <van-checkbox
                        v-for="item in emailOpt" 
                        :key="item.Id"
                        :name="item.Id" 
                        :disabled="item.Enabled===0"
                    >{{item.Name}}&lt;{{item.Email}}&gt;</van-checkbox>
                </van-checkbox-group>
            </div>
        </div>
    </van-popup>

    <!-- 英文客户列表 -->
    <van-popup 
        v-model:show="showCustomPop"
        position="bottom"
        round
        closeable
    >
        <div class="send-email-wrap search-wrap">
            <div class="head-box">选择客户</div>
            <div class="search-box">
                <van-search v-model="searchCustomVal" placeholder="请输入客户名称" @search="handleSearchFilterCustom" @clear="handleSearchFilterCustom"/>
            </div>
            <div class="list-wrap">
                <van-checkbox-group v-model="checkedCustom">
                    <van-checkbox
                        v-for="item in customOptions" 
                        :key="item.CompanyId"
                        :name="item.CompanyId" 
                        :disabled="item.Enabled===0"
                    >{{item.CompanyName}}</van-checkbox>
                </van-checkbox-group>
            </div>
        </div>
    </van-popup>
</template>

<style lang="scss" scoped>
.send-email-wrap{
    padding-top: 50px;
    height: 100%;
    display: flex;
    flex-direction: column;
    .top-box{
        padding: 20px 30px;
        min-height: 100px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid $border-color;
        .form-label { margin-right: 10px;}
        .left-variety-box{
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            position: relative;
            padding-right: 10px;
            margin-right: 10px;
            /* &::after{
                content:'';
                display: block;
                width: 4px;
                height: 40px;
                background-color: $theme-color;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 0;
            } */
            li{
                padding: 8px 20px;
                border-radius: 80px;
                background-color: #F2F6FA;
                display: flex;
                align-items: center;
                line-height: 1;
                margin-bottom: 20px;
                .icon{
                    width: 36px;
                    height: 36px;
                    margin-left: 5px;
                }
            }
            
        }
        :deep(.van-search__content){
            border: none;
            padding-left: 0;
        }
        .van-search{
            padding: 0;
            width: 150px;
        }
        .add-icon{
            width: 70px;
            height: 70px;
            margin-left: 20px;
        }
    }
    .theme-text-box{
        border-bottom: 1px solid $border-color;
    }
    .list-wrap{
        flex: 1;
        overflow-y: auto;
        padding-left: 35px;
        &::-webkit-scrollbar{
            display: none;
        }
        :deep(.van-checkbox__label){
            padding: 32px 32px 32px 0;
            border-bottom: 1px solid $border-color;
            flex: 1;
        }
    }

    .submit-btn{
        width: 90%;
        margin: 20px auto;
    }
}
.search-wrap{
    padding-top: 0;
    .head-box{
        position: relative;
        text-align: center;
        line-height: 100px;
        border-bottom: 1px solid $border-color;
        font-size: 32px;
    }
    .list-wrap{
        height: 50vh;
        flex: none;
    }
}
@media screen and (min-width:$media-width){
    .send-email-wrap{
        padding-top: 30px;
        .top-box{
            padding: 0 15px;
            min-height: 64px;
            .form-label { margin-right: 10px;}
            .left-variety-box{
                padding-right: 5px;
                margin-right: 5px;
                /* &::after{
                    width: 2px;
                    height: 20px;
                } */
                li{
                    padding: 4px 10px;
                    border-radius: 40px;
                    margin-bottom: 10px;
                    .icon{
                        width: 18px;
                        height: 18px;
                        margin-left: 3px;
                    }
                }
                
            }
            .van-search{
                width: 200px;
            }
            .add-icon{
                width: 35px;
                height: 35px;
                margin-left: 10px;
            }
        }
        .list-wrap{
            padding-left: 17px;
            :deep(.van-checkbox__label){
                padding: 16px 16px 16px 0;
            }
        }
        .submit-btn{
            margin: 10px auto;
        }
    }
    .search-wrap{
        .head-box{
            line-height: 50px;
            font-size: 18px;
        }
    }
}
</style>