
<template>
    <el-dialog class="tag-dialog" title="请选择上线城市" :visible.sync="Pvisible" :close-on-click-modal="false">
        <div>
            <el-tabs v-model="activeTab">
                <el-tab-pane v-for="tab in tabs" :key="tab" :label="tab" :name="tab"></el-tab-pane>
            </el-tabs>
            <div class="mt20">
                <div class="tag-group-container">
                    <div v-for="item in provinces" :key="item" class="tag-group">
                        <div class="tag-group-name">{{ item }}</div>
                        <div class="tag-group-list flex">
                            <div class="tag-list">
                                <el-button v-for="unit in citys.filter(city => city.province == item)" :key="unit.id"
                                    :class="isChecked(unit) ? 'selected' : ''" @click="selectOneTag(unit)">{{ unit.cityName
                                    }}</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="height:auto;margin-top: 8px;height: auto;">
                <div v-if="activeTab=='抖音鲸致'">
                <div>抖音商城 ({{ selectedCitys.filter(item => item.channel == 26).length }}个城市)：</div>
                <el-button v-for="p in selectedCitys.filter(item => item.channel == 26)" :key="p.id" class="selected"
                    @click="deleteOneTag(p)">{{
                        p.city }}</el-button>
                 </div>
                 <div v-if="activeTab=='抖音云嘉'">
                <div>抖音云嘉 ({{ selectedCitys.filter(item => item.channel == 107).length }}个城市)：</div>
                <el-button v-for="p in selectedCitys.filter(item => item.channel == 107)" :key="p.id" class="selected"
                    @click="deleteOneTag(p)">{{
                        p.city }}</el-button>
                 </div>
                <div v-if="activeTab=='微信商城'">
                <div style="margin-top:10px">微信商城 ({{ selectedCitys.filter(item => item.channel == 5).length }}个城市)：</div>
                <el-button v-for="p in selectedCitys.filter(item => item.channel == 5)" :key="p.id" class="selected"
                    @click="deleteOneTag(p)">{{
                        p.city }}</el-button>
                </div>
                <div v-if="activeTab=='支付宝'">
                <div style="margin-top:10px">支付宝 ({{ selectedCitys.filter(item => item.channel == 110).length }}个城市)：</div>
                <el-button v-for="p in selectedCitys.filter(item => item.channel == 110)" :key="p.id" class="selected"
                    @click="deleteOneTag(p)">{{
                        p.city }}</el-button>
                </div>
                <div v-if="activeTab=='花王'">
                <div style="margin-top:10px">花王 ({{ selectedCitys.filter(item => item.channel == 112).length }}个城市)：</div>
                <el-button v-for="p in selectedCitys.filter(item => item.channel == 112)" :key="p.id" class="selected"
                    @click="deleteOneTag(p)">{{
                        p.city }}</el-button>
                </div>
            </div>
            <div slot="footer" style="display: flex; align-items: center;justify-content: space-between;">
                <div>

                    <el-button type="info" style="float:right;padding:5px 10px" @click="selectAllNo">全不选</el-button>
                                        <el-button type="primary" style="float:right;padding:5px 10px;margin-right:10px;" @click="selectAll">全选</el-button>
                </div>
                <div>
                    <el-button @click="closed">取 消</el-button>
                    <el-button type="primary" :loading="loading" @click="submit">确 定</el-button>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import { allChannel } from "@/api/channel";
import { listAllCity } from "@/api/city";

export default {
    name: 'SelectCity',
    props: {
        // 添加标签显隐
        visible: {
            type: Boolean,
            default: false,
        },
        selected: {
            type: Array,
            default: () => [],
        },
        loading: {
            type: Boolean,
            default: false,
        }, 
        activeTab:{
            type:String,
            default:() =>'抖音商城'
        },
        tabs:{
             type: Array,
             default:() =>  ['抖音商城'],
        },
       
    },
    data() {
        return {
            // activeTab: '抖音商城',
            // tabs: ['抖音商城', '微信商城'],
            provinces: [],
            citys: [],
            selectedCitys:this.selected, 
            dialogVisibleAddTag: false,
        };
    },
    computed: {
        Pvisible: {
            get() {
                return this.visible;
            },
            set(val) {
                this.$emit('update:visible', val);
            },
        },
       
    },
    watch: {
        selected(val) {
            this.dealSelectCity(val);
        },

    },
    created() {
        this.getCitys();
    },
    methods: {
        getCitys() {
            listAllCity().then(res => {
                this.citys = res.data.data;
                let provinces = [];
                this.citys.forEach(city => {
                    if (provinces.join(',').indexOf(city.province) < 0)
                        provinces.push(city.province);
                })
                this.provinces = provinces;
            })
        },
        submit() {
            // if (!this.selectedCitys.length) {
            //     this.$message({
            //         type: "提醒",
            //         message: "请至少选择一个上线城市!",
            //     });
            //     return;
            // }
            this.$emit('success', { 'citySelected': this.selectedCitys });
        },
        dealSelectCity(val) {
            this.selectedCitys = val;
        },
        isChecked(unit) {
            if (this.activeTab == '微信商城')
                return this.selectedCitys.some((el) => {
                    return unit.id === el.cityId && el.channel === 5;
                });
            else if(this.activeTab == '抖音鲸致')
                return this.selectedCitys.some((el) => {
                    return unit.id === el.cityId && el.channel === 26;
                });
            else if(this.activeTab == '抖音云嘉')
                return this.selectedCitys.some((el) => {
                    return unit.id === el.cityId && el.channel === 107;
                });
            else if (this.activeTab == '支付宝')
                return this.selectedCitys.some((el) => {
                    return unit.id === el.cityId && el.channel === 110;
                }); 
            else if (this.activeTab == '花王')
                return this.selectedCitys.some((el) => {
                    return unit.id === el.cityId && el.channel === 112;
                });       
        },
        selectOneTag(city) {
            // let channel = this.activeTab == '微信商城' ? 5 : 26;
            let channel =5;
            if(this.activeTab=='抖音鲸致'){
                channel=26;
            }
            if(this.activeTab=='抖音云嘉'){
                channel=107;
            }
            if(this.activeTab=='支付宝'){
                channel=110;
            }
            if(this.activeTab=='花王'){
                channel=112;
            }
            const index = this.selectedCitys.findIndex((ele) => ele.cityId === city.id && ele.channel == channel);
            if (index === -1) {
                this.selectedCitys.push({ cityId: city.id, city: city.cityName, channel: channel, province: city.province });
            }else
                this.selectedCitys.splice(index, 1); 
        },
        deleteOneTag(city) {
            const index = this.selectedCitys.findIndex((ele) => ele.cityId === city.cityId && ele.channel == city.channel);
            if (index >= 0)
                this.selectedCitys.splice(index, 1);
        },
        selectAll() { 
            // let channel = this.activeTab == '微信商城' ? 5 : 26;
            let channel =5;
            if(this.activeTab=='抖音鲸致'){
                channel=26;
            }
            if(this.activeTab=='抖音云嘉'){
                channel=107;
            }
            if(this.activeTab=='支付宝'){
                channel=110;
            }
            if(this.activeTab=='花王'){
                channel=112;
            }
            let filterCity = this.selectedCitys.filter(item => item.channel != channel);
            this.selectedCitys = filterCity.concat(this.citys.map(city => { return { cityId: city.id, city: city.cityName, channel: channel, province: city.province } }))
        },
           selectAllNo() {
               this.selectedCitys=[];
           }, 
        closed() {
            this.selectedCitys = this.selected;
            this.Pvisible = false;
        },
    },
};
</script>


<style lang="scss" scoped>
@import '~@/styles/mixin.scss';

.selected {
    color: #09afff;
    border-color: #09afff;
    margin-bottom: 5px;
    padding: 5px 10px;
}

.el-radio {
    margin-right: 15px;
}

.el-radio__label {
    padding-left: 2px;
}

.user-list {
    .el-row {
        line-height: 26px;
    }
}

.mr30 {
    margin-right: 30px;
}


.search-area {
    display: flex;

    .el-select {
        width: 207px;
        border-radius: 3px 0 0 3px;
    }

    .el-input {
        flex: 1;
        border-radius: 0 3px 3px 0;
    }
}

.tag-group-container {
    max-height: 350px;
    overflow-y: auto;
    display: flex;
    flex: auto;
    border-bottom: 1px solid #999;
    padding-bottom: 2px;
}

.tag-group {
    margin-bottom: 10px;
    flex: 4;

    .el-button {
        height: 28px;
        font-size: 12px;
        color: #7f7f7f;
        padding: 7px 10px;
        border-color: #d9d9d9;
        background: #ffffff;



        &.selected {
            background-color: #6bb4ab;
            color: white;
        }
    }
}

.tag-group-name {
    border-left-width: 3px;
    border-left-style: solid;
    font-size: 14px;
    color: #606266;
    padding-left: 5px;
    line-height: 20px;
}

.tag-group-list {
    margin-top: 10px;

    >div {
        margin-left: 5px;

        .el-button {
            margin-right: 5px;
            margin-left: unset;
        }
    }
}

.tag-list {
    .el-button {
        margin-bottom: 5px;
    }
}
</style>
