<template>
    <div>
        <el-row :gutter="280">
            <el-col :span="24">
                <div class="flex-between border-b ht50">
                    <div class="flex-center">
                        <img src="../../assets/img/icon_c.png" class="mgr10" />
                        <p class="fz-18 c-black">客户资源管理系统</p>
                    </div>
                    <back @click.native="goto('background')"></back>
                    <!-- <el-button type="text"><i class="el-icon-arrow-left"></i>返回</el-button> -->
                </div>
                <div class="flex-between mgtb20">
                    <div class="df-ac">
                        <div class=" not-zoom mgr20 font-blue">创建时间</div>
                        <el-radio-group class="round-radio" v-model="searchForm.month" @change="itemRadio">
                            <el-radio-button class="btn-group" v-for="(item, index) in dateList" :key="index" :label="item.id">{{item.name}}</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="df-ac wd25">
                        <div class="df-ac not-zoom mgr20 mgl20 font-blue font">自定义</div>
                        <div label="自定义" class=" system">
                            <el-date-picker
                                class="wd100"
                                v-model="searchForm.date"
                                align="right"
                                unlink-panels
                                type="daterange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                @change="selectTime"
                                clearable
                            >
                            </el-date-picker>
                        </div>
                    </div>
                    <!-- <div class="df">
                        <div class="not-zoom df-ac mgr20 font-blue">客户类型</div>
                        <el-select v-model="searchForm.cusType" clearable placeholder="请选择类型">
                            <el-option
                                v-for="(item, index) in cusTypeList"
                                :key="index"
                                :label="item.name"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </div> -->
                    <div class="flex-center">
                        <el-input
                            placeholder="搜索客户编号/客户名称"
                            class="mgr20"
                            v-model="searchForm.keyword"
                            clearable
                        ></el-input>
                        <el-button type="primary"  size="small" round @click="search">查询</el-button>
                    </div>
                </div>
                <div class="shadow radius10 pdt20">
                    <div class="flex-between mab20 mgl10">
                        <div class="flex-center">
                            <p class="hr_tag"></p>
                            <span class="hr_text">客户列表</span>
                        </div>
                        <div class="mgr10">
                            <el-button v-if="$router.currentRoute.meta.btn.includes('新增客户')" type="primary" size="small" round icon="el-icon-plus" @click.native="estimatePage('workbench-client-message')">新增客户</el-button>
                            <el-button v-if="$router.currentRoute.meta.btn.includes('导入客户信息')" type="primary" plain size="small" round icon="el-icon-download" @click="importExcal"
                                >批量导入</el-button
                            ><!-- <a :href="excelExport" class="downLoad_btn"></a> -->
                            <el-button v-if="$router.currentRoute.meta.btn.includes('导出客户信息')" @click="appleExportFile" type="primary" plain size="small" round icon="el-icon-upload2"
                                >导出</el-button>
                            <el-button v-if="$router.currentRoute.meta.btn.includes('删除客户')" type="danger" size="small" round icon="el-icon-delete" @click="delAllSelection">删除</el-button>
                        </div>
                    </div>
                    <Background-list
                        @getCheckbox="SelectionChange"
                        :nowPage="pageNo"
                        :totalPage="totalPage"
                        :tableData="cusData"
                        @getPaging="currentChange"
                        :totalCount="totalCount" 
                        @getSize="getSize"
                    >
                        <template v-slot:tableData>
                            <el-table-column prop="code" label="客户编号" align="center"></el-table-column>
                            <el-table-column prop="name" label="客户姓名" align="center"></el-table-column>
                            <el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
                            <el-table-column prop="createTime" label="创建日期" align="center"></el-table-column>
                            <el-table-column prop="manager" label="客户经理" align="center"></el-table-column>
                            <el-table-column prop="type" label="客户类型" align="center"></el-table-column>
                            <el-table-column prop="departments" label="所属部门" align="center"></el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button v-if="$router.currentRoute.meta.btn.includes('查看客户')" type="text" @click="estimatePage(scope, scope.$index, 'watch')">查看</el-button>
                                    <el-button v-if="$router.currentRoute.meta.btn.includes('编辑客户')" type="text" @click="estimatePage(scope, scope.$index, 'edit')">编辑</el-button>
                                </template>
                            </el-table-column></template
                        >
                    </Background-list>
                </div>

                <!-- 批量导入 -->
                <el-dialog title="批量导入" :visible.sync="importVisible" width="24%" center :close-on-click-modal="false">
                    <div class="flex-start-around">
                        <el-button type="primary" round
                            ><a :href="excelTemplate" class="downLoad_btn_a">模板下载<i class="el-icon-download el-icon--right"></i></a
                        ></el-button>
                        <el-upload
                            accept=".xls,.xlsx"
                            :on-remove="handleRemove"
                            :on-error="uploadError"
                            :on-success="uploadSuccess"
                            :before-remove="beforeRemove"
                            :limit="1"
                            :on-exceed="handleExceed"
                            :action="excelImport"
                            :file-list="uploadList"
                            name="file"
                            :headers="importHeaders"
                        >
                            <el-button type="primary" round class="ml20">导入文件<i class="el-icon-upload2 el-icon--right"></i></el-button>
                        </el-upload>
                    </div>
                    <p class="download_tips">tips: 请先下载模板再进行导入文件</p>
                </el-dialog>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { querycustomerList, excelExport, excelTemplate, excelImport, deleteCustomer } from '../../utils/api';
import axios from 'axios';
var mytoken = sessionStorage.getItem('token');
export default {
    data() {
        return {
            searchForm: {
                month: 0,
                date: '',
                cusType: '',
                keyword: '',
                startTime: '',
                endTime: ''
            },
            dateList: [
                {
                    id: 0,
                    name: '不限'
                },
                {
                    id: 3,
                    name: '3个月内'
                },
                {
                    id: 6,
                    name: '6个月内'
                },
                {
                    id: 9,
                    name: '9个月内'
                },
                {
                    id: 12,
                    name: '1年内'
                }
            ],
            cusTypeList: [
                {
                    name: '个人',
                    value: 0
                },
                {
                    name: '企业',
                    value: 1
                }
            ],
            cusData: [],
            pageNo: 1,
            pageNumber: 10,
            totals: 1,
            totalPage: 1,
            importVisible: false,
            uploadList: [],
            multipleSelection: [],
            importHeaders: { token: mytoken },
            excelExport: excelExport,
            excelTemplate: excelTemplate,
            excelImport: excelImport,
            totalCount:10
        };
    },
    created(){
        // v-if="$router.currentRoute.meta.btn.includes('新建审批')"

    },
    mounted() {
        this.getData();
    },
    methods: {
        // 跳转
        goto(path) {
            this.$router.push('/' + path);
        },
        // 查询客户
        async getData() {
            let res = await querycustomerList({
                page: this.pageNo,
                size: this.pageNumber,
                codeOrName: this.searchForm.keyword,
                customerType: this.searchForm.cusType,
                createTime: this.searchForm.month,
                startTime: this.searchForm.startTime,
                endTime: this.searchForm.endTime
            });
            res.data.list.map((e) => {
                e.type = e.type == 0 ? '个人类型' : '企业类型';
                if (e.departments) {
                    e.departments = e.departments.join(',');
                }
            });
            this.cusData = res.data.list;
            this.totals = res.data.totalCount;
            this.totalPage = res.data.totalPage;
            this.totalCount = res.data.totalCount
        },
        getSize(val){
            this.pageNo.page = 1
            this.pageNumber = val
            this.getData()
        },
        importExcal() {
            this.importVisible = true;
            this.uploadList = [];
        },
        // 导出模板
        // downLoadTemplate(){
        //     window.open(this.api.excelTemplate)
        // },
        // 上传文件
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`);
        },
        uploadSuccess(response, file, fileList) {
            if (response.code == 10000) {
                this.$message.success('上传成功');
                this.importVisible = false;
                this.getData();
            } else {
                this.$message.error(response.message);
            }
            // this.uploadList.push({ name: file.name, url: response.message.fileUrl });
        },
        uploadError(err, file, fileList) {
            this.$message({
                message: '上传出错，请重试！',
                type: 'error',
                center: true
            });
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        handleRemove(file, fileList) {
            this.uploadList = fileList;
        },
        // 导出excal
        // downLoad(){
        //     window.open(this.api.excelExport)
        // },
        itemRadio(val) {
            this.searchForm.month = val;
            this.searchForm.date = '';
            this.searchForm.startTime = '';
            this.searchForm.endTime = '';
            this.search()
        },
        // 选择时间
        selectTime(val) {
            if (val) {
                this.searchForm.startTime = val[0];
                this.searchForm.endTime = val[1];
            } else {
                this.searchForm.startTime = '';
                this.searchForm.endTime = '';
            }
            this.searchForm.month = 0;
        },
        search() {
            this.pageNo = 1;
            this.getData();
        },
        getRowKeys(row) {
            return row.id;
        },
        SelectionChange(val) {
            this.multipleSelection = val;
        },
        // 批量删除客户
        delAllSelection() {
            if (this.multipleSelection.length != 0) {
                let newArr = this.multipleSelection;
                let delList = newArr.map((e) => e.id);
                this.$confirm('确定要删除选中客户吗？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        deleteCustomer(delList)
                            .then((res) => {
                                this.multipleSelection = [];
                                this.$message.success('删除成功');
                                this.getData();
                            })
                            .catch((res) => {});
                    })
                    .catch(() => {});
            } else {
                this.$message.error('请先选择客户 ！');
            }
        },
        currentChange(val) {
            this.pageNo = val;
            this.getData();
        },
        // 判断是新增，审查，编辑页,取ID
        estimatePage(data, index, val) {
            if (val && data) {
                if (val == 'watch') {
                    sessionStorage.removeItem('work-client-companyId')
                    sessionStorage.setItem('watch-client', true);
                    sessionStorage.setItem('work-client-id', data.row.id);
                    if(data.row.companyId){
                        sessionStorage.setItem('work-client-companyId', data.row.companyId);
                    }

                    this.goto('addcustomer');
                } else if (val == 'edit') {
                    sessionStorage.removeItem('work-client-companyId')
                    sessionStorage.setItem('edit-client', true);
                    sessionStorage.setItem('work-client-id', data.row.id);
                     if(data.row.companyId){
                        sessionStorage.setItem('work-client-companyId', data.row.companyId);
                    }

                    this.goto('addcustomer');
                } else if(val == 'delete'){
                    // 这里需要切换弹框显示，如果未审核，切换提示审核弹框，
                    // 已审核，则显示确认删除
                    // 状态未定义，先不做判断
                    this.deleteBox = true
                    this.selectId = data.row.id
                }
            }else{
                    //新增
                    this.goto('addcustomer');
                }
        },
        // 业务申请--导出
        appleExportFile() {
            let url = this.excelExport
            let downloadElement = document.createElement('a');
            downloadElement.href = url;
            // downloadElement.download = '业务申请导出文件'; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素 
        },
    }
};
</script>

<style lang="scss" scoped>
@import url('../../assets/css/common.scss');
.customer_view {
    font-size: 18px;
    color: #666;
    padding: 20px 0 10px 0;
    border-bottom: 2px solid #f2f2f2;
    img {
        width: 26px;
        height: 26px;
        margin-right: 10px;
    }
    button {
        font-size: 16px;
        color: #666;
    }
}

.datePicker {
    margin-right: 90px;
}
.datePicker /deep/ .el-input__inner {
    border-radius: 20px;
    border: 1px solid #ccc;
    margin-right: 90px;
}
.datePicker /deep/ .el-date-editor--daterange.el-input__inner {
    width: 415px;
}
.mar_top30 {
    margin-top: 30px;
}
.download_tips {
    color: #ff9784;
    margin-top: 10px;
    text-align: center;
}
.downLoad_btn {
    color: #00b9ff;
    &:hover{
        color: #fff;
    }
}
.downLoad_btn_a {
    color: #fff;
}

/deep/ .el-radio-button__inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
}
</style>

