<template>
    <div v-loading="fullscreenLoading">
        <div class="group-list">
            <div class="group-box">
                <div>
                    <el-select style="width:250px" v-model="value" clearable placeholder="请选择" @change="filterStatus(value)">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-input
                    style="width:200px;"
                    placeholder="请输入查询内容"
                    v-model="input"
                    clearable>
                    </el-input>
                    <el-button @click="Inquireclick()" type="primary">查 询</el-button>
                </div>
                <div>
                    <el-button @click="addgroup()" type="primary">新增团组</el-button>
                </div>
            </div>
            <div class="group-title">
                <div>团组列表</div>
            </div>
            <template>
                <el-table
                :data="groupDatas"
                border
                style="width: 100%">
                    <el-table-column
                        prop="num"
                        label="序 号"
                        width="55">
                        <template slot-scope="scope">
                            {{(currentPage - 1) * pageSize + scope.$index + 1}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="department"
                        width="100"
                        label="所属部门">
                        <template slot-scope="scope">
                            <div v-if="scope.row.department=='市场部'" style="background-color: #67C23A;color:#fff;border-radius: 5px;">市场客户</div>
                            <div v-if="scope.row.department=='国交部'" style="background-color: #409EFF;color:#fff;border-radius: 5px;">公司客户</div>
                            <div v-if="scope.row.department!='国交部'&&scope.row.department!='市场部'">{{ scope.row.department }}</div>
                        </template>
                    </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
                        width="100" 
                        prop="salesQuoteNo"
                        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="编辑"
                            @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i></el-button>
                            <el-button
                            size="mini"
                            title="删除"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row,groupDatas)"><i class="el-icon-delete"></i></el-button>
                            <el-button v-if="scope.row.tourCode==''" size="mini" title="确认出团" type="primary" @click="confirmDeparture(scope.$index, scope.row)"><i class="el-icon-check"></i></el-button>
                            <el-button
                            v-if="scope.row.tourCode!=''"
                            size="mini"
                            title="已出团"
                            ><i class="el-icon-check"></i></el-button>
                        </template>
                        </el-table-column>
                </el-table>
            </template>
            <div class="block">
                <el-pagination align='center' 
                    @size-change="handleSizeChange" 
                    @current-change="handleCurrentChange"
                    :current-page="currentPage" 
                    :page-sizes="[10,12,15,20]" 
                    :page-size="pageSize" 
                    layout="total, sizes, prev, pager, next" 
                    :total="count">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    beforeRouteLeave(to, from, next) {
        if(to.name!='Groupedit'){
            localStorage.removeItem('tzczval');
        }
        next()
    },
    // beforeRouteLeave(to, from, next) {
    //     console.log(to);
    //     console.log(from);
    //     if(to.name!='Groupedit'){
    //         from.meta.keepAlive = false;
    //     }
    //     next()
    // },
    data() {
        return {
            options: [
                {
                    value: '-1',
                    label: '全部'
                }, {
                    value: '0',
                    label: '未完成'
                }, {
                    value: '1',
                    label: '已完成'
                }
            ],
            value: '-1',
            groupDatas:[],
            groupData: [],
            groupDatass:[],
            count:0,//总条数
            currentPage: 1, // 当前页码
            pageSize: 10 ,// 每页的数据条数
            input:'',
            token:'',
            fullscreenLoading:false,
            userid:'',
            pageId:''
        }
    },
    
    activated() {
        if(!this.$route.meta.isBack){
            // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
            console.log("表明需要获取新数据")
        }
        // 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
        this.$route.meta.isBack=false
    },
    methods:{
        //分页api
        PostGroupPageList(){
            var url = "/api/Groups/PostGroupPageList"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    pageId:that.pageId,
                    userId:that.userid,
                    pageIndex: that.currentPage,
                    pageSize: that.pageSize,
                    isSure: that.value,
                    searchCriteria: that.input,
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    that.groupDatas=res.data.data.data
                    that.count=res.data.count
                }
                console.log(that.count)
            })
        },
         //每页条数改变时触发 选择一页显示多少行
         handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
            this.PostGroupPageList()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.PostGroupPageList()
        },
        Inquireclick(){
            this.currentPage=1;
            this.PostGroupPageList()
        },
        addgroup(){
            this.$router.push({path: '/home/Groupedit'});
        },
        filteryear(val){
            let gstime=val.visitDate.split(' ')[0]
            return gstime;
        },
        //筛选状态
        filterStatus(){
            this.currentPage=1;
            this.PostGroupPageList()
        },
        //编辑
        handleEdit(index, row,rows) {
            var tzczval={
                currentPage:this.currentPage,
                value:this.value,
                input:this.input,
            }
            localStorage.setItem('tzczval', JSON.stringify(tzczval));
            this.$router.push({path: '/home/Groupedit?id=' + row.id +''});
        },
        confirmDeparture(index, row){
            console.log(row)
            this.$confirm('此操作将会确认出团, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                var url="/api/Groups/SetConfirmationGroup"
                var that=this
                this.$axios({
                    method: 'post',
                    url:url,
                    headers:{
                        Authorization:'Bearer '+this.token
                    },
                    data:{
                        portType: 1,
                        groupId:row.id,
                        groupsOperator:that.userid
                    }
                }).then(function(res){
                    console.log(res)
                    if(res.data.code==200){
                        that.$message({
                            message:res.data.msg ,
                            type: 'success',
                            offset:50
                        });
                        row.tourCode=res.data.data;
                        // rows.splice(index, 1);
                    }else{
                        row.tourCode=res.data.msg;
                        that.$message({
                            message:res.data.msg ,
                            type: 'warning',
                            offset:50
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消确认出团'
                });          
            });
        },
        //删除
        handleDelete(index, row,rows) {
            this.$confirm('此操作将删除该条信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                var url="/api/Groups/GroupDel"
                var that=this
                this.$axios({
                    method: 'post',
                    url:url,
                    headers:{
                        Authorization:'Bearer '+this.token
                    },
                    data:{
                        portType: 1,
                        id:row.id,
                        userId:that.userid
                    }
                }).then(function(res){
                    if(res.data.code==200){
                        that.$message({
                            message:res.data.msg ,
                            type: 'success',
                            offset:50
                        });
                        rows.splice(index, 1);
                    }else{
                        that.$message({
                            message:res.data.msg ,
                            type: 'warning',
                            offset:50
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            
        }
    },
    created(){
        if(JSON.parse(localStorage.getItem('tzczval'))){
            this.currentPage=JSON.parse(localStorage.getItem('tzczval')).currentPage;
            this.value=JSON.parse(localStorage.getItem('tzczval')).value;
            this.input=JSON.parse(localStorage.getItem('tzczval')).input;
        }
    },
    mounted(){
        this.token=JSON.parse(localStorage.getItem('userinif')).token;
        this.pageId=Number(localStorage.getItem('indexs').split('-')[1]);//页面id
        this.userid=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.PostGroupPageList();
    }
}
</script>
<style>
    .group-list{
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 0 5px #0005;
        border-radius: 10px;
        min-height: 830px;
    }
    .group-title{
        display: flex;
        font-size: 17px;
        font-weight:600 ;
        color: #555;
        margin-top: 8px;
        margin-bottom: 2px;
        justify-content: space-between;
        align-items: center;
    }
    .group-box{
        display: flex;
        justify-content: space-between;
    }
    .group-box>button{
        margin-left: 10px;
        padding: 8px 20px;
    }
    .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
        text-align: center;
    }
    .group-box>.el-input{
        margin-left: 10px;
    }
</style>