<template>
    <div v-loading="fullscreenLoading">
        <el-dialog top="35vh" width="640px" title="文件下载" :visible.sync="contractVisible" :close-on-click-modal="false">
            <el-button @click="DownGroupContractFile(hetonggroupId, 1)" type="primary">预付款80%合同</el-button>
            <el-button @click="DownGroupContractFile(hetonggroupId, 2)" type="primary">团组结束后付款合同</el-button>
            <el-button @click="GroupQuotationsFileDown(hetonggroupId)" type="primary">报价单（收款单）</el-button>
            <el-button @click="GroupQuotationsDetailFileDown(hetonggroupId)" type="primary">报价细项单</el-button>
        </el-dialog>
        <el-dialog top="35vh" width="400px" title="团组清单下载" :visible.sync="groupVisible" :close-on-click-modal="false">
            <el-date-picker style="width:100%;" v-model="downloadtime" type="daterange" align="right" unlink-panels
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
            <div class="group-dialog-btn">
                <el-button @click="groupVisible = false">取消</el-button>
                <el-button @click="GroupListFile" type="primary">下载</el-button>
            </div>
        </el-dialog>
        <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-select style="width:150px" v-model="customertype" clearable placeholder="请选择"
                        @change="filterStatus">
                        <el-option v-for="item in customertypeoptions" :key="item.value" :label="item.value"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select style="width:150px" v-model="customerlevel" clearable placeholder="请选择"
                        @change="filterStatus">
                        <el-option v-for="item in customerleveloptions" :key="item.id" :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                    <el-autocomplete style="width:300px;" v-model="input"
                        :fetch-suggestions="querySearchAsync" :trigger-on-focus="false" placeholder="请输入或选择团组"
                        @select="handleSelect">
                        <template slot-scope="{ item }">
                            <div>{{ item.teamName }}</div>
                        </template>
                    </el-autocomplete>
                    <!-- <el-select style="width:300px" v-model="input" clearable filterable remote
                        :remote-method="GroupItemKeywordSearch" :loading="selectLoading" @change="Inquireclick()"
                        placeholder="请选择">
                        <el-option v-for="item in inputArr" :key="item.id" :label="item.teamName+' '+item.clientUnit"
                            :value="item.teamName">
                        </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 v-if="evocationdownloadqx" @click="evocationdownload" type="primary">团组清单下载</el-button>
                    <el-button @click="addgroup()" type="primary">新增团组</el-button>
                </div>
            </div>
            <div class="group-title">
                <div>团组列表</div>
            </div>
            <template>
                <el-table :row-style="changRed" :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 == '国交部' || 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 != '策划部'">
                                {{ scope.row.department }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="teamLev" label="级 别" width="80">
                        <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="团队名称">
                        <template slot-scope="scope">
                            <span @click="tofile(scope.row)" style="color: #409EFF;cursor:pointer;">{{
                                scope.row.teamName }}</span>
                        </template>
                    </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 prop="operatorLabel" width="100" label="各部门操作人">
                        <template slot-scope="scope">
                            <el-popover placement="top" width="300" trigger="hover">
                                <div style="white-space: pre-wrap;">{{ scope.row.operatorLabel }}</div>
                                <span
                                    style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:1; overflow: hidden;cursor: pointer;color: #48a2ff;"
                                    slot="reference">移上查看</span>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column
                        prop="tourCode"
                        width="100"
                        label="进 度">
                    </el-table-column> -->
                    <el-table-column label="操作" width="250">
                        <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="合同下载" @click="contracton(scope.row)"><i
                                    class="el-icon-document"></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 != ''" :type="scope.row.step == 2 ? 'primary' : ''"
                                @click="EnterpriseWeChatNotificationAsyncBaoPi(scope.$index, scope.row)" size="mini"
                                :title="scope.row.step == 2 ? '已通知开始业务操作' : '通知国交部各岗位可以开始业务操作'"><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: '',
            inputArr: [],
            selectLoading: false,
            token: '',
            fullscreenLoading: false,
            userid: '',
            pageId: '',
            groupVisible: false,
            //下载团组清单时间
            downloadtime: '',
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            evocationdownloadqx: false,
            customerlevel: '',
            customertype: '',
            customertypeoptions: [],
            customerleveloptions: [],
            contractVisible: false,
            hetonggroupId: 0,
        }
    },
    activated() {
        if (!this.$route.meta.isBack) {
            // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
            console.log("表明需要获取新数据")
        }
        // 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
        this.$route.meta.isBack = false
    },
    methods: {
        // 异步搜索方法
        querySearchAsync(queryString, cb) {
            if (queryString === '' || queryString.trim() === '') {
                cb(this.inputArr);
                return;
            }

            this.selectLoading = true;
            var url = "/api/Groups/GroupItemKeywordSearch?keyword=" + queryString;
            var that = this;

            this.$axios({
                method: 'get',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
            }).then(function (res) {
                if (res.data.code == 200) {
                    const results = res.data.data || [];
                    // 如果没有搜索结果，添加一个自定义选项
                    if (results.length === 0 && queryString.trim() !== '') {
                        results.push({
                            id: 'custom',
                            teamName: queryString,
                            clientUnit: '自定义输入',
                            isCustom: true
                        });
                    }
                    cb(results);
                } else {
                    cb([]);
                }
            }).finally(() => {
                that.selectLoading = false;
            });
        },

        // 处理选择
        handleSelect(item) {
            if (item.isCustom) {
                // 如果是自定义输入，直接使用输入的值
                this.input = item.teamName;
                this.Inquireclick();
            } else {
                this.input = item.teamName;
                this.Inquireclick();
            }
        },




        
        changRed({ row }) {
            if (row.useRedBackground) { // 变颜色的条件
                return {
                    color: "red"  // 这个return的就是样式 可以是color 也可以是backgroundColor
                }
            }
        },
        //处理时间
        disposeTime(val) {
            var date = new Date(val);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let time = y + '-' + m + '-' + d;
            return time
        },
        //搜索提示
        GroupItemKeywordSearch(query) {
            if (query !== '') {
                this.selectLoading=true;
                var url = "/api/Groups/GroupItemKeywordSearch?keyword=" + query
                var that = this
                this.$axios({
                    method: 'get',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    },
                }).then(function (res) {
                    if (res.data.code == 200) {
                        that.inputArr = res.data.data;
                    }else{
                        that.inputArr=[];
                    }
                }).finally(()=>{
                    that.selectLoading=false;
                })
            }
        },
        //分页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,
                    department: that.customertype,
                    rank: that.customerlevel + '',
                }
            }).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)
            })
        },
        //合同下载
        DownGroupContractFile(val, vals) {
            var url = "/api/Groups/DownGroupContractFile"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data: {
                    groupId: val,
                    fileType: vals,
                    userId: that.userid,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                    });
                    window.open(res.data.data.url);
                    that.contractVisible = false;
                } else {
                    that.$message.error(res.data.msg);
                    that.contractVisible = false;
                }

            })
        },
        //报价word
        GroupQuotationsFileDown(val) {
            var url = "/api/Groups/GroupQuotationsFileDown"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data: {
                    diid: val,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                    });
                    window.open(res.data.data.url);
                    that.contractVisible = false;
                } else {
                    that.$message.error(res.data.msg);
                }

            })
        },
        //报价word
        GroupQuotationsFileDown(val) {
            var url = "/api/Groups/GroupQuotationsFileDown"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data: {
                    diid: val,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                    });
                    window.open(res.data.data.url);
                    that.contractVisible = false;
                } else {
                    that.$message.error(res.data.msg);
                }

            })
        },
        //报批
        EnterpriseWeChatNotificationAsyncBaoPi(index, row) {
            if (row.step == 2) {
                this.$message.error("已通知开始业务操作，无需重复操作！");
                return
            }
            var url = "/api/Groups/EnterpriseWeChatNotificationAsyncBaoPi"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data: {
                    currUserId: that.userid,
                    diid: row.id,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                    });
                } else {
                    that.$message.error(res.data.msg);
                }

            })
        },
        //报价word
        GroupQuotationsDetailFileDown(val) {
            var url = "/api/Groups/GroupQuotationsDetailFileDown"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data: {
                    diid: val,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                    });
                    window.open(res.data.data.url);
                    that.contractVisible = false;
                } else {
                    that.$message.error(res.data.msg);
                }

            })
        },
        contracton(val) {
            this.hetonggroupId = 0;
            this.hetonggroupId = val.id;
            this.contractVisible = true
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
            this.PostGroupPageList()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.PostGroupPageList()
        },
        Inquireclick() {
            this.currentPage = 1;
            this.PostGroupPageList()
        },
        //唤起团组清单下载
        evocationdownload() {
            this.downloadtime = "";
            this.groupVisible = true;
        },
        //跳转到文件
        tofile(val) {
            this.$router.push({ path: '/home/SharedFile?diId=' + val.id });
        },
        //团组清单下载
        GroupListFile() {
            if (this.downloadtime == null || this.downloadtime == "") {
                this.$message.error("请选择时间！");
                return
            }
            var url = "/api/Groups/GroupListFile?beginDt=" + this.disposeTime(this.downloadtime[0]) + "&endDt=" + this.disposeTime(this.downloadtime[1])
            var that = this
            this.$axios({
                method: 'get',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                    });
                    window.open(res.data.data);
                    that.groupVisible = false;
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        addgroup() {
            this.$router.push({ path: '/home/Groupedit' });
        },
        filteryear(val) {
            let gstime = val.visitDate.split(' ')[0]
            return gstime;
        },
        //筛选状态
        filterStatus() {
            this.currentPage = 1;
            this.PostGroupPageList()
        },
        //获取基础数据
        PostGroupPageListInit() {
            var url = "/api/Groups/PostGroupPageListInit"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.customertypeoptions = res.data.data.depData;
                    that.customerleveloptions = res.data.data.rankData;
                } else {
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                        offset: 50
                    });
                }
            })
        },
        //编辑
        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() {
        this.PostGroupPageListInit();
        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() {
        //权限
        let authData = JSON.parse(localStorage.getItem('userinif')).authData;
        let Permissions = [];
        for (let k = 0; k < authData.length; k++) {
            for (let m = 0; m < authData[k].pageList.length; m++) {
                if (authData[k].pageList[m].webUrl == '/OPgroup') {
                    Permissions = authData[k].pageList[m].pageAuth;
                }
            }
        }
        for (let r = 0; r < Permissions.length; r++) {
            if (Permissions[r].funid == 4) {
                this.evocationdownloadqx = true;
            }
        }

        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;
}

.group-dialog-btn {
    text-align: right;
    margin-top: 30px;
}
</style>