<template>
    <div class="custom-city-list-wrap">
        <div class="select-box box-wrap">
            <el-cascader v-model="searchCitys" 
                :props="{multiple: true,value:'name',children:'city',label:'name'}" 
                :options="locationOptions"
                clearable collapse-tags 
                placeholder="请选择客户地址"
                @change="handleChangeLocation" >
            </el-cascader>
            <el-input placeholder="客户名称/原销售/分配销售" 
                prefix-icon="el-icon-search" 
                v-model="searchText" 
                clearable
                @input="getTableList"></el-input>
        </div>
        <div class="table-box box-wrap">
            <el-table :data="tableData" border>
                <el-table-column 
                    v-for="item in tableColumns" :key="item.key"
                    :label="item.label" align="center"
                    >
                    <template slot-scope="{row}">
                        {{ row[item.key] }}
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination 
                layout="prev,pager,next,total" 
                background
                :current-page="pageNo"
                @current-change="currentChange"
                :page-size="pageSize" 
                :total="total"
                >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {locationOptions} from "./location"
import { customInterence } from '@/api/api.js'
export default {
    data() {
        this.locationOptions = locationOptions
        return {
            searchCitys:[],
            provinceValue:'',
            cityValue:'',
            searchText:'',
            tableColumns:[
                {
                    label:'客户名称',
                    key:'CompanyName'
                },{
                    label:'类型',
                    key:'CompanyType'
                },{
                    label:'所属行业',
                    key:'IndustryName'
                },{
                    label:'客户地址',
                    key:'City'
                },{
                    label:'原销售',
                    key:'SellerName'
                },{
                    label:'分配销售',
                    key:'ShareSeller'
                },{
                    label:'状态',
                    key:'Status'
                }
            ],
            tableData:[],
            tableLoading:false,
            pageNo:1,
            pageSize:10,
            total:0,
        };
    },
    methods: {
        handleChangeLocation(){
            const provinceArr = []
            const cityArr = []
            this.searchCitys.forEach(item=>{
                // 省
                provinceArr.push(item[0])
                // 市
                cityArr.push(item[1])
            })
        //provinceArr需要去重
            this.provinceValue = [...new Set(provinceArr)].join(',')
            this.cityValue = cityArr.join(',')
            this.page_no = 1;
            this.getTableList();
        },
        getTableList(){
            this.tableLoading=true
            customInterence.getCustomCityList({
                PageSize:this.pageSize,
                CurrentIndex:this.pageNo,
                Keyword:this.searchText,
                Province:this.provinceValue,
                City:this.cityValue
            }).then(res=>{
                if(res.Ret!==200) return
                this.tableData = res.Data.List
                this.total = res.Data.Paging.Totals
            })
            
        },
        currentChange(page){
            this.pageNo=page
            this.getTableList()
        }
    },
    mounted(){
        this.getTableList()
    }
};
</script>

<style scoped lang="scss">
.custom-city-list-wrap{
    .box-wrap{
        padding:30px;
        background-color: #fff;
        border-radius: 4px;
    }
    .select-box{
        display: flex;
        justify-content: space-between;
        .el-input{
            width:400px;
        }
    }
    .table-box{
        margin-top: 30px;
        .el-pagination{
            margin-top: 30px;
            text-align: right;
        }
    }
}
</style>
