<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-card shadow="hover" class="mgb20">
                    <div class="flex-between">
                        <div class="per_title" v-preventReClick @click="goback('back')">
                            <i class="el-icon-arrow-left"></i>
                            <span class="per_back">返回</span>
                            <span class="per_school">选择客户</span>
                        </div>
                        <el-button type="primary" size="small" round class="mag" v-preventReClick @click="goback()">确定</el-button>
                    </div>              
                </el-card>
            </el-col>

            <el-col :span="24">
                <el-card shadow="hover" class="mgb20">
                    <div>
                        <div class="flex-center mgb20">
                            <p class="hr_tag"></p>
                            <span>筛选</span>
                        </div>
                        <div>
                            <el-form label-width="80px">
                                <el-col :span="6">
                                    <el-form-item label="国家">
                                        <el-select v-model="form.countries" placeholder="请选择国家">
                                            <el-option v-for="(item,index) in countryList" :key="index" :label="item.name" :value="item.name"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="省份">
                                        <el-select v-model="form.provinces" clearable placeholder="请选择省份" @change="getCity" @clear="clearprovince">
                                            <el-option v-for="(item,index) in provinceList" :key="index" :label="item.provinceName" :value="item.provinceId"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="城市">
                                        <el-select v-model="form.city" clearable placeholder="请选择城市" :disabled="form.provinces ? false : true" @change="initData">
                                            <el-option v-for="(item,index) in cityList" :key="index" :label="item.cityName" :value="item.cityId"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item>
                                        <el-input placeholder="请输入客户名称/管理员姓名/电话" @clear="clearSearch" @keyup.enter.native="getData" prefix-icon="el-icon-search" v-model="form.keyword" clearable></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-form>
                        </div>
                    </div>  
                </el-card>
            </el-col>

            <el-col :span="24">
                <el-card shadow="hover" class="mgb20">
                    <div class="flex-between mgb20">
                        <div class="flex-center">
                            <p class="hr_tag"></p>
                            <span>客户列表</span>
                        </div>
                        <div>
                        </div>
                    </div>
                    <el-table :data="listData" class="table" stripe header-align="center" row-key="customerId">
                        <!-- <el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> -->
                        <el-table-column type="index" width="100" label="序号" align="center">
                            <template slot-scope="scope">
                                {{scope.$index + (page - 1) * pageSize + 1}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="customerName" label="客户名称" align="center">
                        </el-table-column>
                        <el-table-column label="行业" align="center">
                            <template slot-scope="scope">
                                <span class="ellipsis">{{scope.row.industryName}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="countries" label="国家" align="center">
                        </el-table-column>
                        <el-table-column prop="provinceName" label="省份" align="center">
                        </el-table-column>
                        <el-table-column prop="cityName" label="城市" align="center">
                        </el-table-column>
                        <el-table-column prop="name" label="联系人" align="center">
                        </el-table-column>
                        <el-table-column prop="account" label="账号" align="center">
                        </el-table-column>
                        <el-table-column label="操作" width="270" align="center">
                            <template slot-scope="scope">
                                <el-checkbox @change="checkboxChenge(scope.row)" v-model="scope.row.checked"></el-checkbox>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="page">
                        </el-pagination>
                    </div>
                </el-card>
            </el-col>

        </el-row>
    </div>
</template>
<script>
export default {
    props:{
        refresh:{
            type:Boolean,
            default:false
        }
    },
    data(){
        return{
            page: 1,
            pageSize: 10,
            total: 1,
            countryList: [{
                name:'中国'
            }],
            listData: [],
            form: {
                countries:'中国',
                provinces: '',
                city: '',
                keyword: ''
            },
            provinceList:[],
            cityList:[],
            checkedID:'',// 选中客户ID
            checkedName:'',// 客户名称

        }
    },
    created(){
        this.getData()
        this.getProvince()
    },
    watch:{
        refresh:function(val,val2){
            if(val){
                this.getData()
                this.getProvince()

            }
        }
    },
    methods:{
        // 取得列表
        getData(){
            this.$post(this.api.queryCustomer,{
                countries: this.form.countries,
                provinceId: this.form.provinces,
                cityId: this.form.city,
                searchContent: this.form.keyword,
                page: this.page,
                size: this.pageSize
            }).then(res => {
                res.message.list.map(e=>{
                    e.checked = false
                    if(this.checkedID){
                        if(e.customerId===this.checkedID){
                            e.checked = true
                        }                        
                    }
                })
                this.listData = res.message.list
                this.total = res.message.totalCount
            }).catch(res => {})
        },
        // 省份
        getProvince(){
            this.$get(this.api.queryProvince).then(res => {
                this.provinceList = res.list
                this.$store.commit("provinceData", { provinceList : this.provinceList})
            }).catch(res => {})
        },
        clearprovince(){
            this.form.city = ''
        },
        getCity(){
           this.clearprovince()
           this.getCityData()
           this.page = 1
           this.initData()
        },
        getCityData(){
            let data = {
                provinceId: this.form.provinces
            }
            this.$get(this.api.queryCity,data).then(res => {
                this.cityList = res.list
            }).catch(res => {})
        },
        async goback(val){
            if(val){
                this.$emit('back',{show:true})
            }else{
                if(!this.checkedName){
                    return this.$message('请选择客户后再确定！')
                }
                let param = {
                    show:true,
                    id:this.checkedID,
                    name:this.checkedName,

                }
                await this.$get(this.api.queryCustomerDetails,{customerId:this.checkedID}).then(res=>{
                    console.log(res,'当前的res');
                    let data = res.result.customer
                    param.email = data.email
                    param.phone = data.phone
                    param.name = data.name

                })
                this.$emit('back',param)
            }
        },
        initData(){
            this.page = 1
            this.getData()
        },
        handleCurrentChange(val) {
            this.page = val
            this.getData()
        },
        // checkbox交互
        checkboxChenge(row){
            this.listData.map(e=>{
                e.checked = false
            })
            row.checked = true
            this.checkedName = row.customerName
            this.checkedID = row.customerId

        },
        clearSearch(){

            this.getData()
        }
    }
    
}
</script>
<style lang="scss" scoped>
.mag{
    margin-right: 20px;
}
/deep/ .el-checkbox__inner{
    border-radius: 50%;
    width: 17px;
    height: 17px;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background: #FFF;

}
/deep/ .el-checkbox__inner::after{
    transform: none;
    transition: all .3s ease-in;
    width: 0;
    height: 0;
    position: relative;
    top: 50%;
    left: 50%;
    border-radius: 50%;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner::after{
    width: 13px;
    height: 13px;
    background: #9278FF;
    position: relative;
    top: 10%;
    left: 10%;
    transform: none;
    display: block;
    border-radius: 50%;
    transition: all .3s ease-in;
    border: 0;

}
</style>