<template>
    <div class="DownloadOpitinerary-all" element-loading-text="加载数据量过大，请稍等。" v-loading.fullscreen.lock="fullscreenLoading">
        <div class="DownloadOpitinerary-search-head">
            <el-form label-width="75px">
                <el-form-item label="国家:">
                    <el-select @change="SwitchingCountry" filterable clearable v-model="countryData" placeholder="请选择国家">
                        <el-option v-for="(item,index) in countryDatas" :key="index" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-form label-width="75px">
                <el-form-item label="地区:">
                    <el-select @change="switchingArea($event)" filterable clearable v-model="citiesData" placeholder="请选择地区">
                        <el-option v-for="(item,index) in citiesDatas" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-form label-width="75px">
                <el-form-item label="团组名:">
                    <el-select @change="SwitchingGroup" filterable clearable v-model="teamNameData" placeholder="请选择团组名">
                        <el-option v-for="(item,index) in teamNameDatas" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="DownloadOpitinerary-table">
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                    <!-- <el-table-column
                        prop="row_Number"
                        label="序 号"
                        width="55">
                    </el-table-column> -->
                    <el-table-column
                        prop="teamLev"
                        label="级 别"
                        width="70">
                        <template slot-scope="scope">
                            {{ scope.row.teamLev=='暂未定级'?'-':scope.row.teamLev }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="tourCode"
                        width="100"
                        label="团 号">
                    </el-table-column>
                    <el-table-column
                        prop="teamType"
                        label="团组类型"
                        width="110">
                    </el-table-column>
                    
                    <el-table-column
                        prop="teamName"
                        label="团队名称"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="clientName"
                        label="客户名称"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="clientUnit"
                        label="客户单位">
                    </el-table-column>
                    <el-table-column
                        prop="visitDate"
                        :formatter="filteryear"
                        label="出访时间"
                        width="110">
                    </el-table-column>
                    <el-table-column
                        prop="visitDays"
                        label="天数"
                        width="50">
                    </el-table-column>
                    <el-table-column
                        prop="visitPNumber"
                        label="人数"
                        width="50">
                    </el-table-column>
                    <el-table-column
                        prop="jietuanOperator"
                        label="接团操作人"
                        width="110">
                    </el-table-column>
                    <el-table-column label="操作"  width="200">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            title="下载OP行程单"
                            type="primary"
                            @click="PostMateOpGroupDownload(scope.row)">下载OP行程单</el-button>
                        </template>
                    </el-table-column>
            </el-table>
            <div class="block" style="margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageIndex"
                    :page-sizes="[10, 12, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tabletotal">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            userId:'',
            citiesData:'',
            citiesDatas:[],
            countryData:'',
            countryDatas:[],
            teamNameData:'',
            teamNameDatas:[],
            currentPage4: 1,
            tableData: [],
            tabletotal:0,
            pageIndex:1,
            pageSize:12,
            fullscreenLoading:false,
        }
    },
    methods: {
        handleSizeChange(val) {
            this.pageSize=val;
            this.PostMateOpGroupPageList();
        },
        handleCurrentChange(val) {
            this.pageIndex=val;
            this.PostMateOpGroupPageList();
        },
        filteryear(val){
            let gstime=val.visitDate.split(' ')[0]
            return gstime;
        },
        //获取下拉框
        PostMateOpGroupInit() {
            this.fullscreenLoading=true;
            var url = "/api/Groups/PostMateOpGroupInit"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    currUserId:that.userId
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.countryDatas=res.data.data.countriesDatas;
                    that.teamNameDatas=res.data.data.teamNames;
                    that.citiesDatas=res.data.data.citiesDatas;
                    that.fullscreenLoading=false;
                    that.PostMateOpGroupPageList();
                }else{
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                    that.fullscreenLoading=false;
                }
            }).catch(function (error) {
                that.fullscreenLoading=false;
                that.$message.error('请联系信息部！');
            });
        },
        //获取表格
        PostMateOpGroupPageList() {
            console.log(this.pageIndex);
            var url = "/api/Groups/PostMateOpGroupPageList"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    portType:1,
                    userId:that.userId,
                    pageId:183,
                    pageIndex:that.pageIndex,
                    pageSize:that.pageSize,
                    country:that.countryData,
                    area:'',
                    teamName:that.teamNameData
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.tableData=res.data.data;
                    that.tabletotal=res.data.count;
                }else{
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                }
            }).catch(function (error) {
                that.$message.error('请联系信息部！');
            });
        },
        //切换地区
        switchingArea(val){
            this.pageIndex=1;
            for (let i = 0; i < this.citiesDatas.length; i++) {
                if(val==this.citiesDatas[i].id){
                    for (let j = 0; j < this.countryDatas.length; j++) {
                        if (this.citiesDatas[i].parentId==this.countryDatas[j].id) {
                            this.countryData=this.countryDatas[j].name;
                        }
                    }
                }
            }
            this.PostMateOpGroupPageList()
        },
        //切换国家
        SwitchingCountry(val){
            this.pageIndex=1;
            this.PostMateOpGroupPageList();
        },
        //切换团组
        SwitchingGroup(val){
            this.pageIndex=1;
            this.PostMateOpGroupPageList();
        },
        //下载op行程单
        PostMateOpGroupDownload(roew) {
            this.fullscreenLoading=true;
            var url = "/api/Groups/PostMateOpGroupDownload"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    portType:1,
                    userId:that.userId,
                    pageId:183,
                    diId:roew.id,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: "导出成功！",
                        type: 'success'
                    });
                    window.open(res.data.data)
                    that.fullscreenLoading=false;
                }else{
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                    that.fullscreenLoading=false;
                }
            }).catch(function (error) {
                that.fullscreenLoading=false;
                that.$message.error('请联系信息部！');
            });
        },
    },
    mounted(){
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.PostMateOpGroupInit();
        // this.PostMateOpGroupPageList();
    }
}
</script>
<style>
.DownloadOpitinerary-all{
    background-color: #fff;

    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    min-height: 830px;
    
}
.DownloadOpitinerary-search-head{
    display: flex;
}
.DownloadOpitinerary-search-head .el-form{
    width: 300px;
}
.DownloadOpitinerary-search-head .el-select{
    width: 100%;
}
.DownloadOpitinerary-table .block{
    text-align: center;
    
}
</style>