<template>
    <div v-loading="fullscreenLoading">
        <div class="customer-list">
            <div class="title">客户资料</div>
            <div class="customer-title">
                <div class="logotype-box">
                    <div class="logotype-li">
                        <div><label>预计出团:</label> <span>10</span></div>
                        <div><label>预计出团总量:</label> <span>100</span></div>
                    </div>
                    <div class="logotype-li">
                        <div><label>已出团:</label> <span>40</span></div>
                        <div><label>已出团总量:</label> <span>456</span></div>
                    </div>
                </div>
                <div class="customer-box">
                    <el-form ref="form" :model="form" label-width="80px">
                        <div>
                            <el-form-item label="负责人">
                                <el-select v-model="form.region" placeholder="请选择活动区域">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="省 域">
                                <el-select v-model="form.region" placeholder="请选择活动区域">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="客户级别">
                                <el-select v-model="form.region" placeholder="请选择活动区域">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div style="margin-top: 10px;">
                            <el-form-item label="客户类别">
                                <el-select v-model="form.region" placeholder="请选择活动区域">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="业务分类">
                                <el-select v-model="form.region" placeholder="请选择活动区域">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <div style="display: flex;">
                                <el-form-item label="查 询">
                                    <el-input
                                    @input="Inquireclick()"
                                    placeholder="请输入查询内容"
                                    v-model="input"
                                    clearable>
                                    </el-input>
                                </el-form-item>
                                <el-button style="margin-left: 10px;" @click="addgroup()" type="primary">新 建</el-button>
                            </div>
                        </div>
                    </el-form>
                </div>
            </div>
            <template>
                <el-table
                :data="customerArr.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                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="flats"
                        width="150"
                        label="单位">
                    </el-table-column>
                    <el-table-column
                        prop="contact"
                        label="联系人"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="post"
                        label="职位"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="cellphone"
                        label="手机"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        prop="landline"
                        label="座机"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="urban"
                        label="所在城市"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="weight"
                        label="权重"
                        width="50">
                    </el-table-column>
                    <el-table-column
                        prop="attribution"
                        label="业务归属"
                        width="200">
                    </el-table-column>
                    <el-table-column
                        prop="charge"
                        label="负责人">
                    </el-table-column>
                    <el-table-column
                        prop="expected"
                        label="预计出团"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="Toured"
                        label="已出团"
                        width="80">
                    </el-table-column>
                    <el-table-column label="操作"
                    width="150">
                        <template slot-scope="scope">
                          <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i></el-button>
                          <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row,groupDatas)"><i class="el-icon-delete"></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="customerArr.length">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            form: {
                region: '',
            },
            customerArr:[
                {
                    flats:'四川大学',
                    contact:'张嗣杰',
                    post:'处长',
                    cellphone:'181-0819-8891',
                    landline:'028-85403072',
                    urban:'成都 武侯区',
                    birthday:'',
                    weight:'A',
                    attribution:'',
                    charge:'',
                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
                    expected:'4',
                    Toured:''
                },
                {
                    flats:'四川大学',
                    contact:'张嗣杰',
                    post:'处长',
                    cellphone:'181-0819-8891',
                    landline:'028-85403072',
                    urban:'成都 武侯区',
                    birthday:'',
                    weight:'A',
                    attribution:'',
                    charge:'',
                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
                    expected:'4',
                    Toured:''
                },
                {
                    flats:'四川大学',
                    contact:'张嗣杰',
                    post:'国合与交流处 处长',
                    cellphone:'181-0819-8891',
                    landline:'028-85403072',
                    urban:'成都 武侯区',
                    birthday:'',
                    weight:'A',
                    attribution:'',
                    charge:'',
                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
                    expected:'4',
                    Toured:''
                },
                {
                    flats:'四川大学',
                    contact:'张嗣杰',
                    post:'国合与交流处 处长',
                    cellphone:'181-0819-8891',
                    landline:'028-85403072',
                    urban:'成都 武侯区',
                    birthday:'',
                    weight:'A',
                    attribution:'',
                    charge:'',
                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
                    expected:'4',
                    Toured:''
                },
                {
                    flats:'四川大学',
                    contact:'张嗣杰',
                    post:'国合与交流处 处长',
                    cellphone:'181-0819-8891',
                    landline:'028-85403072',
                    urban:'成都 武侯区',
                    birthday:'',
                    weight:'A',
                    attribution:'',
                    charge:'',
                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
                    expected:'4',
                    Toured:''
                },
                {
                    flats:'四川大学',
                    contact:'张嗣杰',
                    post:'国合与交流处 处长',
                    cellphone:'181-0819-8891',
                    landline:'028-85403072',
                    urban:'成都 武侯区',
                    birthday:'',
                    weight:'A',
                    attribution:'',
                    charge:'',
                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
                    expected:'4',
                    Toured:''
                },
                {
                    flats:'四川大学',
                    contact:'张嗣杰',
                    post:'国合与交流处 处长',
                    cellphone:'181-0819-8891',
                    landline:'028-85403072',
                    urban:'成都 武侯区',
                    birthday:'',
                    weight:'A',
                    attribution:'',
                    charge:'',
                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
                    expected:'4',
                    Toured:''
                },
                {
                    flats:'四川大学',
                    contact:'张嗣杰',
                    post:'国合与交流处 处长',
                    cellphone:'181-0819-8891',
                    landline:'028-85403072',
                    urban:'成都 武侯区',
                    birthday:'',
                    weight:'A',
                    attribution:'',
                    charge:'',
                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
                    expected:'4',
                    Toured:''
                },
                {
                    flats:'四川大学',
                    contact:'张嗣杰',
                    post:'国合与交流处 处长',
                    cellphone:'181-0819-8891',
                    landline:'028-85403072',
                    urban:'成都 武侯区',
                    birthday:'',
                    weight:'A',
                    attribution:'',
                    charge:'',
                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
                    expected:'4',
                    Toured:''
                },
                {
                    flats:'四川大学',
                    contact:'张嗣杰',
                    post:'国合与交流处 处长',
                    cellphone:'181-0819-8891',
                    landline:'028-85403072',
                    urban:'成都 武侯区',
                    birthday:'',
                    weight:'A',
                    attribution:'',
                    charge:'',
                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
                    expected:'4',
                    Toured:''
                },
                {
                    flats:'四川大学',
                    contact:'张嗣杰',
                    post:'国合与交流处 处长',
                    cellphone:'181-0819-8891',
                    landline:'028-85403072',
                    urban:'成都 武侯区',
                    birthday:'',
                    weight:'A',
                    attribution:'',
                    charge:'',
                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
                    expected:'4',
                    Toured:''
                },
                {
                    flats:'四川大学',
                    contact:'张嗣杰',
                    post:'国合与交流处 处长',
                    cellphone:'181-0819-8891',
                    landline:'028-85403072',
                    urban:'成都 武侯区',
                    birthday:'',
                    weight:'A',
                    attribution:'',
                    charge:'',
                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
                    expected:'4',
                    Toured:''
                },
                {
                    flats:'四川大学',
                    contact:'张嗣杰',
                    post:'国合与交流处 处长',
                    cellphone:'181-0819-8891',
                    landline:'028-85403072',
                    urban:'成都 武侯区',
                    birthday:'',
                    weight:'A',
                    attribution:'',
                    charge:'',
                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
                    expected:'4',
                    Toured:''
                },
                {
                    flats:'四川大学',
                    contact:'张嗣杰',
                    post:'国合与交流处 处长',
                    cellphone:'181-0819-8891',
                    landline:'028-85403072',
                    urban:'成都 武侯区',
                    birthday:'',
                    weight:'A',
                    attribution:'',
                    charge:'',
                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
                    expected:'4',
                    Toured:''
                },
                {
                    flats:'四川大学',
                    contact:'张嗣杰',
                    post:'国合与交流处 处长',
                    cellphone:'181-0819-8891',
                    landline:'028-85403072',
                    urban:'成都 武侯区',
                    birthday:'',
                    weight:'A',
                    attribution:'',
                    charge:'',
                    remark:'张嗣杰 国际合作与交流处处长 港澳台办主任 gjc@scu.edu.cn 505',
                    expected:'4',
                    Toured:''
                }
            ],
            options: [
                {
                    value: '0',
                    label: '全部'
                }, {
                    value: '1',
                    label: '已完成'
                }, {
                    value: '2',
                    label: '未完成'
                }
            ],
            value: '0',
            groupDatas:[],
            groupData: [
                
            ],
            groupDatass:[],
            currentPage: 1, // 当前页码
            pageSize: 10 ,// 每页的数据条数
            input:'',
            token:'',
            fullscreenLoading:false,
            userid:''
        }
    },
    methods:{
         //每页条数改变时触发 选择一页显示多少行
         handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        Inquireclick(){
            console.log(this.groupDatass)
            var newarr=[];
            if(this.input==""){
                if(this.value=="0"){
                    console.log(123)
                    newarr=this.groupData;
                }else{
                    newarr=this.groupDatass;
                }
            }else{
                for(var i=0;i<this.groupDatas.length;i++){
                    if(this.groupDatas[i].clientName.indexOf(this.input)!=-1){
                        newarr.push(this.groupDatas[i]);
                    }
                    else if(this.groupDatas[i].clientUnit.indexOf(this.input)!=-1){
                        newarr.push(this.groupDatas[i]);
                    }
                    else if(this.groupDatas[i].jietuanOperator.indexOf(this.input)!=-1){
                        newarr.push(this.groupDatas[i]);
                    }
                    else if(this.groupDatas[i].salesQuoteNo.indexOf(this.input)!=-1){
                        newarr.push(this.groupDatas[i]);
                    }
                    else if(this.groupDatas[i].teamLev.indexOf(this.input)!=-1){
                        newarr.push(this.groupDatas[i]);
                    }
                    else if(this.groupDatas[i].teamName.indexOf(this.input)!=-1){
                        newarr.push(this.groupDatas[i]);
                    }
                    else if(this.groupDatas[i].teamType.indexOf(this.input)!=-1){
                        newarr.push(this.groupDatas[i]);
                    }
                    else if(this.groupDatas[i].tourCode.indexOf(this.input)!=-1){
                        newarr.push(this.groupDatas[i]);
                    }else if(this.groupDatas[i].visitDate.indexOf(this.input)!=-1){
                        newarr.push(this.groupDatas[i]);
                    }
                }
            }
            this.groupDatas=newarr;
        },
        addgroup(){
            this.$router.push({path: '/home/Groupedit'});
        },
        //
        Grouplist(){
            var url="/api/Groups/GetGroupList"
            var that=this
            that.fullscreenLoading = true;
            this.$axios({
                method: 'post',
                url:url,
                headers:{
                    Authorization:'Bearer '+this.token
                },
                data:{
                    portType: 1,
                }
            }).then(function(res){
                if(res.data.code==200){
                    that.groupData=res.data.data
                    that.groupData.forEach(item=>{
                        if(item.clientName==null){
                            item.clientName = ''
                        } 
                        if(item.clientUnit==null){
                            item.clientUnit = ''
                        } 
                        if(item.id==null){
                            item.id = ''
                        } 
                        if(item.isSure==null){
                            item.isSure = ''
                        } 
                        if(item.jietuanOperator==null){
                            item.jietuanOperator = ''
                        } 
                        if(item.salesQuoteNo==null){
                            item.salesQuoteNo = ''
                        } 
                        if(item.teamName==null){
                            item.teamName = ''
                        } 
                        if(item.teamType==null){
                            item.teamType = ''
                        } 
                        if(item.tourCode==null){
                            item.tourCode = ''
                        } 
                        if(item.visitDate==null){
                            item.visitDate = ''
                        } 
                        if(item.visitDays==null){
                            item.visitDays = ''
                        } 
                        if(item.visitPNumber==null){
                            item.visitPNumber = ''
                        } 
                    })
                    that.groupDatas=that.groupData;
                    console.log(that.groupData)
                    that.fullscreenLoading = false;
                }
            })
        },
        filteryear(val){
            let gstime=val.visitDate.split(' ')[0]
            return gstime;
        },
        //筛选状态
        filterStatus(val){
            console.log(val)
            var newgroup=[];
            if(this.input==""){
                if(val=="0"||val==""){
                    newgroup=this.groupData;
                }else if(val=="1"){
                    for(var j=0;j<this.groupData.length;j++){
                        if(this.groupData[j].isSure==1){
                            newgroup.push(this.groupData[j])
                        }
                    }
                }else if(val=="2"){
                    for(var j=0;j<this.groupData.length;j++){
                        if(this.groupData[j].isSure==0){
                            newgroup.push(this.groupData[j])
                        }
                    }
                }
                this.groupDatas=newgroup
                this.groupDatass=newgroup 
            }else{
                if(val=="0"||val==""){
                    newgroup=this.groupData
                }else if(val=="1"){
                    for(var j=0;j<this.groupData.length;j++){
                        if(this.groupData[j].isSure==1){
                            newgroup.push(this.groupData[j])
                        }
                    }
                }else if(val=="2"){
                    for(var j=0;j<this.groupData.length;j++){
                        if(this.groupData[j].isSure==0){
                            newgroup.push(this.groupData[j])
                        }
                    }
                }
                this.groupDatas=newgroup
                this.groupDatass=newgroup 
                this.Inquireclick()
            }
        },
        //编辑
        handleEdit(index, row,rows) {
            console.log(index, row.id);
            this.$router.push({path: '/home/Groupedit?id=' + row.id +''});
        },
        //删除
        handleDelete(index, row,rows) {
            this.$confirm('此操作将删除该条信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                var url="/api/Groups/GroupDel"
                var that=this
                console.log(that.userid+'----'+row.id)
                this.$axios({
                    method: 'post',
                    url:url,
                    headers:{
                        Authorization:'Bearer '+this.token
                    },
                    data:{
                        portType: 1,
                        id:row.id,
                        userId:that.userid
                    }
                }).then(function(res){
                    console.log(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: '已取消删除'
                });          
            });
            
        }
    },
    mounted(){
        this.token=JSON.parse(localStorage.getItem('userinif')).token;
        this.userid=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        console.log(this.token)
        this.Grouplist();
    }
}
</script>
<style>
    .customer-list{
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 0 5px #0005;
        border-radius: 10px;
    }
    .customer-list .title{
        font-size: 17px;
        font-weight:600 ;
        color: #555;
    }
    .customer-title{
        display: flex;
        margin-bottom: 10px;
        justify-content: space-between;
        align-items: center;
    }
    .customer-box{
        display: flex;
        width: 61.7%;
    }
    .customer-box .el-form-item{
        margin-bottom:0px;
    }
    .customer-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;
    }
    .customer-box>.el-input{
        margin-left: 10px;
    }
    .customer-box .el-form>div{
        display: flex;
    }
    .logotype-li{
        display: flex;
        line-height: 42px;
    }
    .logotype-li>div{
        width: 50%;
    }
    .logotype-box{
        width: 37%;
    }
    .logotype-li label{
        display: inline-block;
        width: 120px;
        text-align:right ;
    }
    .logotype-li span{
        font-size: 17px;
        font-weight:600 ;
        color: #555;
    }
</style>