<template>
    <div class="custome-list-match-page">
        <div class="top-warp" style="margin-bottom:30px">
            <a style="width: 100%" :href="templateUrl" download="客户名单匹配模板"><el-button type="primary" plain style="margin-right:15px">下载模板</el-button></a>
            <el-upload
				style="display:inline-block"
				:before-upload="beforeUploadFile"
				:headers="headerConfig"
				:file-list="fileList"
				:on-success="handleSuccess"
				:on-progress="handleStarting"
				:action="importUrl"
				accept=".xlsx"
				:data="params"
				name="File"
				:show-file-list="false"
			>
            <el-button type="primary">导入名单</el-button>
            </el-upload>
            <el-button type="primary" plain style="float:right" :disabled="!code" @click="handleDownLoadList">下载名单</el-button>
            <!-- <a style="width: 100%" :href="downloadUrl+'?Code='+code" download></a> -->
        </div>
        <el-table
            :data="tableData"
            border
            style="width: 100%"
            max-height="800"
        >
             <el-table-column
                :prop="col.key"
                :label="col.label"
                v-for="col in colList"
                :key="col.label"
                align="center"
            >
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    computed: {
        downloadUrl(){
            const url=process.env.API_ROOT+'/custom/list/match/download'
            return url+'?Code='+this.code+'&'+localStorage.getItem('auth')
        }
    },
    data() {
        return {
            templateUrl:'https://hzstatic.hzinsights.com/static/admin/excel/客户名单匹配模板.xlsx',
            importUrl:process.env.API_ROOT+'/custom/list/match/import',
            // downloadUrl:process.env.API_ROOT+'/custom/list/match/download',
            headerConfig:{
				Authorization:localStorage.getItem('auth')
			},
            tableData:[],
            colList:[
                {
                    label:'姓名',
                    key:'UserName'
                },
                {
                    label:'国际（区号）',
                    key:'CountryCode'
                },
                {
                    label:'手机号',
                    key:'Mobile'
                },
                {
                    label:'客户公司',
                    key:'CompanyName'
                },
                {
                    label:'系统客户',
                    key:'SysCompanyName'
                },
                {
                    label:'FICC状态',
                    key:'FiccStatus'
                },
                {
                    label:'FICC销售',
                    key:'FiccSeller'
                },
                {
                    label:'权益状态',
                    key:'RaiStatus'
                },
                {
                    label:'权益销售',
                    key:'RaiSeller'
                }
            ],
            code:''
        }
    },
    methods: {
        // 校验文件和大小
		beforeUploadFile(file) {
			let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
			let size = file.size / 1024 / 1024;//M
			if (extension !== "xlsx" && extension !== "xls") {
				this.$message.warning("只能上传后缀是.xlsx和.xls的文件");
			    return false;
			}
			if (size > 10) {
				this.$message.warning("文件大小不得超过10M");
                return false
			}
		},
        // 上传成功之后
		handleSuccess(result) {
            let res = this.$parseData(result);
            if(res.Ret===200){
                this.tableData=res.Data.List||[]
                this.code=res.Data.Code
            }else{
                this.$message.warning(res.Msg)
            }
        },

        handleDownLoadList(){
            let link = document.createElement("a");
            link.href=this.downloadUrl
            link.setAttribute("download", '客户名单匹配');
            link.style.display = "none"; //a标签隐藏
            document.body.appendChild(link);
            link.click();
        }
    },
}
</script>

<style lang="scss" scoped>
.custome-list-match-page{
    background-color: #fff;
    border: 1px solid #ECECEC;
    padding: 30px;
    border-radius: 4px;
    min-height: 60vh;
}
</style>