<template>
    <view>
        <view class="visa_Box column">
            <view class="visa_search">
                <view class="search-box" style="margin-top: 24rpx;">
                    <view style="width: 1px; flex: 1;">
                        <u-search placeholder="输入目的地" v-model="msg.Name" @search="getList(1)" input-align="left" :value="msg.Name"
                        text-color="#111" bg-color="rgba(0,0,0,0)" :show-action="false"></u-search>
                    </view>
                </view>
            </view>
            <view class="visa_country hidden row">
                <view class="visa_countryL column"
                :class="[msg.VisaCountryId==0?'':'active']" style="padding: 20rpx 0 0 0;"
                @click="getVisaCountry({Id:msg.VisaCountryId})">
                    <view>所有</view>
                    <view>目的地</view>
                </view>
                <view class="col visa_countryR">
                    <scroll-view scroll-x :scroll-left="scrollLeft" show-scrollbar="false"
                    scroll-with-animation style="white-space: nowrap;width: 570rpx;">
                        <view class="row col">
                            <template v-for="(item,index) in Countrys">
                                <view class="visa_couRTitle" style="padding: 30rpx 0 10rpx 0;"
                                :class="[item.Id==msg.VisaCountryId?'active':'']"
                                :key="index" v-if="item.Id!=0"
                                @click="getVisaCountry(item)">
                                    <view><image mode="aspectFill" :src="item.Icon" width="100%"/></view>
                                    <text>{{ item.CountryName }}</text>
                                </view>
                            </template>
                        </view>
                    </scroll-view>
                </view>
            </view>
            <view class="col column" style="height:1px">
                <view style="padding: 0 30rpx 0 30rpx;">
                    <view class="uDropdownBox">
                        <u-dropdown ref="uDropdown" @open="open" @close="close" active-color="#B99846" inactive-color="#444">
                            <u-dropdown-item class="col" v-model="msg.ManagementName" 
                            :title="optionsTitle[0]" :options="VisaTypeList"
                            @change="(index)=>{changeVisaCountry(index,1)}">
                            </u-dropdown-item>
                            <u-dropdown-item class="col" v-model="msg.EntryType" :title="optionsTitle[1]" :options="EntryTypeList"
                            @change="(index)=>{changeVisaCountry(index,2)}">
                            </u-dropdown-item>
                        </u-dropdown>
                    </view>
                </view>
                <view class="col column" style="padding: 0 30rpx 31rpx 30rpx;overflow: hidden;">
                    <view class="visaListBox col">
                        <u-empty v-if="dataList.length==0 && !loading" text="暂无数据" mode="data"></u-empty>
                        <scroll-view v-else :scroll-y="true" :enable-back-to-top="true"
                            @scrolltolower="lower"
                                :enable-flex="true"  :style="{ height: '100%' }"> 
                                <template v-for="(item,index) in dataList">
                                    <view class="visaList row" :key="index"
                                    @click.stop="goDetail(item)">
                                        <view class="visaListL">
                                            <image mode="aspectFill" :src="item.newCoverImg"/>
                                            <text style="position: absolute;left: 0;top: 0;
                                            border-radius: 14rpx 0rpx 14rpx 0rpx;
                                            background: #B99846;padding: 4rpx 9rpx;font-size: 20rpx;color: #fff;">
                                            {{ item.visaType==1?'个签':item.visaType==2?'团签':'' }}
                                            </text>
                                        </view>
                                        <view class="visaListR col column">
                                            <view class="visaListTitle">{{ item.name }}</view>
                                            <view class="visaListText row">
                                                <template v-for="x in item.typeTagList">
                                                    <text :key="index" v-if="x.tagTame">
                                                        {{ x.tagTame }}
                                                    </text>
                                                </template>
                                                <text :key="index" v-if="item.sendCityName">
                                                    {{ item.sendCityName }}送签
                                                </text>
                                                <text v-if="item.manageDuration" style="background: rgba(23,23,23,0);">
                                                    办理时长：{{item.manageDuration}}个工作日
                                                </text>
                                            </view>
                                            <view class="col"></view>
                                            <view class="visaListNum row">
                                                <view class="visaListNumL row items-center">
                                                    <template v-if="item.bookAdvance">
                                                        <image class="inlineblock" mode="widthFix" 
                                                        style="width: 19rpx;height: 21rpx"
                                                        src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638750535244017143.png" />
                                                        <text>提前{{item.bookAdvance}}天预订</text>
                                                    </template>
                                                </view>
                                                <view class="visaListNumR">
                                                    <text style="font-size: 20rpx;">CNY</text>
                                                    <text class="price-Num">{{ $utils.getretailer()?item.visaPrice:item.visaB2CPrice }}</text>
                                                    <text class="price-stuff" style="font-size: 20rpx;color: rgba(164, 164, 164, 1)">元</text>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </template> 
                        </scroll-view>
                    </view>
                </view>
            </view>
        </view>
        <u-picker mode="selector" v-model="showVisaType" :default-selector="[0]" :range="VisaTypeList" @confirm='(e)=>{changeDown(e,1)}'
		 range-key="label" @input="showType=null"></u-picker>
         <u-picker mode="selector" v-model="showEntryType" :default-selector="[0]" :range="EntryTypeList" @confirm='(e)=>{changeDown(e,2)}'
		 range-key="label" @input="showType=null"></u-picker>
        <auth v-if="showAuth&&is_show_auth==1" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
    </view>
</template>
<script>
import auth from "@/components/auth/index.vue";
export default {
    components: {
        auth,
    },
    data() {
        return {
            scrollLeft: 5,
            dataList: [],
            showVisaType: false,
            showEntryType: false,
            AddressName: '目的地',
            loading: false,
            msg:{
                pageIndex: 1,
                pageSize: 10,
                Name: '',
                ManagementName: '',
                EntryType: 0,
                VisaCountryId: 0
            },
            AddressList: [],
            optionsTitle: [
                "类别",
                "次数",
            ],
            VisaTypeList: [],
            EntryTypeList: [],
            Countrys: [],
            b2bUser: {}, //同行信息
            mallUserInfo: {},
            showAuth: false,
            is_show_auth: 0, //是否显示授权弹窗
            status: "加载中",
            loadText: {
                loadmore: "轻轻上拉，加载更多",
                loading: "努力加载中",
                nomore: "没有更多了",
            },
            scrollTop: 0,
	        headStyle: {},
            showType: null,
        }
    },
    onLoad(option) {
        let basedata = uni.getStorageSync("basedata");
        //判断后台是否开启自动授权
        if (basedata && basedata.mall && basedata.mall.setting && basedata.mall.setting && basedata.mall.setting.is_show_auth ==
            1) {
            this.is_show_auth = 1;
        }
        this.b2bUser = uni.getStorageSync("b2b_user");
        this.mallUserInfo = uni.getStorageSync("mall_UserInfo");
        if (!this.mallUserInfo) {
            this.mallUserInfo = {
                nickName: "未登录",
                avatarUrl: "",
            };
            this.showAuth = true;
        } else if (!this.b2bUser && this.is_show_auth == 1) {
            this.U = {
                nickName: "未登录",
                avatarUrl: "",
            };
            this.showAuth = true;
        }
    },
    created() {
        this.b2bUser = uni.getStorageSync("b2b_user");
    },
    mounted() {
        this.getEnumeration()
        this.getList()
    },
    methods: {
        goDetail(item) {
            uni.navigateTo({
                url: "/pages/visa/visaDetail?id="+item.id
            })
        },
        clickType(type) {
            if (type == 0) {
                this.showVisaType = !this.showVisaType;
            }	
            if (type == 1) {
                this.showEntryType = !this.showEntryType;
            }
            if(this.showVisaType==true||this.showEntryType==true)this.showType = type
            else this.showType = null
        },
        scrollHandler(e) {
            this.scrollTop = e.detail.scrollTop;
        },
        scrollTopHandler() {
            this.scrollTop = 0;
        },
        getVisaCountry(item){
            if(this.msg.VisaCountryId==item.Id){
                this.msg.VisaCountryId = 0
                this.AddressName = '目的地'
                this.research()
                return
            }
            this.msg.VisaCountryId=item.Id
            this.AddressName=item.CountryName
            this.research()
        },
        changeDown(e,type) {
            let i = e[0]
            this.showVisaType = false;
            this.showEntryType = false
            if(type==1) {
                if(this.VisaTypeList[i].value>0) {
                    this.msg.ManagementName = this.VisaTypeList[i].label
                    this.optionsTitle[0] = this.VisaTypeList[i].label
                }else{
                    this.msg.ManagementName = ''
                    this.optionsTitle[0] = '类别'
                }
            }
            if(type==2) {
                if(this.EntryTypeList[i].value>0) {
                    this.msg.EntryType = this.EntryTypeList[i].value
                    this.optionsTitle[1] = this.EntryTypeList[i].label
                }else{
                    this.msg.EntryType = 0
                    this.optionsTitle[1] = '次数'
                }
            }
            this.getList(1)
        },
        getEnumeration(){
            this.apipost(
                "b2c_get_GetVisaProductSelect",
                {GroupId:this.b2bUser.groupId},
                (res) => {
                    if (res.resultCode == 1) {
                        res.data.Country = res.data.Country.sort((a,b)=> {return a.Id-b.Id})
                        let Countrys = res.data.Country
                        let Country = {
                            Id: 0,
                            CountryName: '不限',
                            Icon: ''
                        }
                        Countrys.unshift(Country)
                        for (let i = 0; i < Countrys.length; i++) {
                            this.Countrys.push({
                                ...Countrys[i],
                                label: Countrys[i].CountryName,
                                value: Countrys[i].Id,
                            })
                        }
                        let VisaTypeList = res.data.VisaTypeList
                        let VisaType = {
                            Id: 0,
                            Name: '不限',
                        }
                        VisaTypeList.unshift(VisaType)
                        for (let i = 0; i < VisaTypeList.length; i++) {
                            this.VisaTypeList.push({
                                label: VisaTypeList[i].Name,
                                value: VisaTypeList[i].Id,
                            })
                        }

                        let EntryTypeList = res.data.EntryTypeList
                        let EntryType = {
                            Id: 0,
                            Name: '不限',
                        }
                        EntryTypeList.unshift(EntryType)
                        for (let i = 0; i < EntryTypeList.length; i++) {
                            this.EntryTypeList.push({
                                label: EntryTypeList[i].Name,
                                value: EntryTypeList[i].Id,
                            })
                        }
                        
                    }
                },
                (err) => {}
            );
        },
        //获取数据
        getList(type) {
            if (type == 1) {
                this.dataList = [];
                this.msg.pageIndex = 1;
            }
            uni.showLoading({
                title: '加载中',
                icon: 'none'
            })
            this.apipost(
                "b2c_get_GetB2CVisaProductList",
                this.msg,
                res => {
                    if (res.resultCode == 1) {
                        let arrList = function(arr) {
                            for (let i = 0; i < arr.length; i++) {
                                arr[i].newCoverImg = ''
                            }
                        }
                        arrList(res.data.pageData)
                        let format = res.data.pageData
                        if (format && format.length > 0) {
                            format.forEach(item => {
                                if (item.coverImageList && item.coverImageList.length>0) {
                                    try {
                                        item.coverImageList = item.coverImageList.filter(item=>{
                                            return item.url!=null
                                        })
                                        var imgArray = item.coverImageList;
                                        if (imgArray && imgArray.length > 0) {
                                            item.newCoverImg = imgArray[0].url;
                                        } else {
                                            item.newCoverImg = "";
                                        }
                                    } catch (e) {}
                                }
                            });
                        }
                        this.dataList = this.dataList.concat(format);
                        this.page_count = res.data.pageCount;
                        this.status = "loadmore";
                        if(this.page_count==1) this.status = "nomore";
                    }
                    this.loading = false
                    uni.hideLoading();
                },
                err => {
                    this.loading = false
                }
            );
        },
        lower(e) {
            if (this.msg.pageIndex < this.page_count) {
                this.msg.pageIndex++;
                this.status = "loading";
                this.getList();
            } else {
                this.status = "nomore";
            }
        },
        research() {
            this.dataList = [];
            this.msg.pageIndex = 1;
            this.getList(1)
        },
        changeVisaCountry(index,type) {
            let temp = {}
            if(type==1){
            	temp = this.VisaTypeList.find(x => {
                    if (x.value == index) {
                        return x
                    } else {
                        return false
                    }
                })
                if(temp.value>0){
                    this.optionsTitle[0] = temp.label
                    this.msg.ManagementName = temp.label
                }else{
                    this.optionsTitle[0] = '类别'
                    this.msg.ManagementName = '' 
                }
                	 
            }
            if(type==2){
            	temp = this.EntryTypeList.find(x => {
                    if (x.value == index) {
                        return x
                    } else {
                        return false
                    }
                })
                if(temp.value>0){
                    this.optionsTitle[1] = temp.label
                    this.msg.EntryType = temp.value
                }else{
                    this.optionsTitle[1] = '次数'
                    this.msg.EntryType = 0 
                } 
            }
            
            this.research();
        },
        open(index) {
            this.$refs.uDropdown.highlight();
        },
        close(index) {
            this.$refs.uDropdown.highlight(index);
        },
        reloadUserinfo() {
            this.b2bUser = uni.getStorageSync("b2b_user");
            this.mallUserInfo = uni.getStorageSync("mall_UserInfo");
        },
        //关闭登录窗口
        gbAuth() {
            this.showAuth = false;
        },
    }
}
</script>
<style lang="scss" scoped>
@import url("@/asset/css/flex.css");
.headStatus {
	overflow: hidden;
	position: relative;
	width: 140vw;
	padding-right: 40vw;
	padding-top: 0;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	display: flex;
    z-index: 22;
}
.visa_Box{
    background: #F3F1EF;
    height: 100vh;
    overflow: hidden;
}
.visa_search{
    width: 100%;
    height: 99rpx;
}
.search-box {
    height: 60rpx;
    background: #FFF;
    border-radius:12rpx;
    display: flex;
    align-items: center;
    padding: 19rpx 30rpx;
    margin: 0 30rpx;
    // position: absolute;
    // bottom: 29rpx;
    // left: 0;
    // right: 0;
}

.search-box .date {
    height: 50rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #111111;
    line-height: 50rpx;
    margin-right: 30rpx;
    display: flex;
    align-items: center;
}
.visa_country{
    padding-left: 34rpx;
}
.visa_countryL{
    font-family: PingFang SC;
    font-weight: 800;
    font-size: 28rpx;
    color: #B99846;
    white-space: nowrap;
    text-align: center;
    margin-right: 9rpx;
    letter-spacing: 2rpx;
}
.visa_countryL.active{
    color: black;
}
.visa_couRTitle{
    width: 102rpx;
    text-align: center;
    margin-right: 0;
    margin-left: 30rpx;
}
.visa_couRTitle view{
    width: 102rpx;
    height: 60rpx;
    overflow: hidden;
    border: 2rpx solid #F3F1EF;
}
.visa_couRTitle.active view{
    border: 2rpx solid #E2AB4E;
    box-shadow:0 0 8px 0 #E2AB4E;
}
.visa_couRTitle.active text{
    color: #B99846;
}
.visa_couRTitle view image{
    width: 100%;
    height: 100%;
}
.visa_couRTitle text{
    display: block;
    padding-top: 11rpx;
    font-size: 22rpx;
    
}
.uDropdownBox{
    height: 76rpx;
    width: 100%;
    background: #fff;
    margin-top: 34rpx;
    border-radius: 22rpx 22rpx 0 0;
}
/deep/.u-flex{
    justify-content: center;
}
.visaListBox{
	background: #ffffff;
	border-top: 1rpx solid #F3F1EF;
    border-radius: 0 0 22rpx 22rpx;
    padding-top: 37rpx;
    padding-bottom: 40rpx;
    overflow: hidden;
}
.visaList{
    padding: 0 31rpx;
    margin-bottom: 60rpx;
}
.visaListL{
    width: 161rpx;
    height: 190rpx;
    overflow: hidden;
    margin-right: 19rpx;
    position: relative;
    border-radius: 14rpx;
}
.visaListL image{
    width: 100%;
    height: 100%;
    border-radius: 14rpx;
}
.visaListTitle{
    font-weight: bold;
    font-size: 28rpx;
    color: #111111;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2; 
    overflow: hidden;  
    margin-bottom: 10rpx;
}
.visaListText text{
    background-color: rgba(226, 194, 122, .3);
    color: #B99846;
    margin-right: 16rpx;
    white-space: nowrap;
    border-radius: 6rpx;
    padding: 5rpx 9rpx;
    font-size: 20rpx;
}
.visaListNum{
    justify-content: space-between;
    align-items: center;
}
.visaListNumL text{
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 20rpx;
    color: #080A09;
    margin-left: 10rpx;
}
.visaListNumR{
    color: rgba(255, 49, 102, 1);
}
.price-Num{
    font-size: 34rpx;
    margin-left: 5rpx;
    font-weight: bold;
}
.uDropdownText text{
    color: #444;
}
.uDropdownText.active text{
    color: #B99846;
    font-weight: bold;
}
</style>