<template>
    <div id="customer_batch_file_details" v-loading="load" element-loading-text="提交中，请稍等">
        <div>
            <el-page-header @back="handleGoBack" content="客户批量导入文件详情"></el-page-header>
        </div>
        <br />
        <div>
            <el-form :inline="true">
                <el-form-item>
                    <el-input
                        v-model="search.entName"
                        clearable
                        prefix-icon="el-icon-search"
                        placeholder="请输入客户企业名称"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-input
                        v-model="search.entTaxId"
                        clearable
                        prefix-icon="el-icon-search"
                        placeholder="请输入客户企业税号"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="search.status" placeholder="请选择提交状态">
                        <el-option
                            v-for="item in commitStatusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleSearch" type="primary">搜 索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-button type="primary" @click="handleRefresh">刷新</el-button>
            <el-button type="primary" @click="handleBatchCustomerFileItemsCommit">提交保存</el-button>
        </div>
        <br />
        <div>
            <el-container>
                <el-table
                    :data="search.resultList"
                    border
                    style="width: 100%;"
                    @selection-change="handleSearchResultCheckChange"
                    :reserve-selection="true"
                >
                    <el-table-column type="selection" width="55" :selectable="handleSelectable"></el-table-column>
                    <el-table-column
                        prop="entName"
                        label="企业名称"
                        width="180"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        prop="entTaxId"
                        label="企业税号"
                        width="180"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column prop="taxDiscId" label="盘号" width="180" show-overflow-tooltip></el-table-column>
                    <el-table-column
                        prop="customerType"
                        label="客户类型"
                        width="100"
                        :formatter="fmtCustomerType"
                    ></el-table-column>
                    <el-table-column
                        prop="customerName"
                        label="客户名称"
                        width="180"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        prop="customerEntTaxId"
                        label="客户税号"
                        width="180"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        prop="customerAdderss"
                        label="客户地址"
                        width="180"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        prop="customerPhone"
                        label="客户电话"
                        width="120"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        prop="customerBankName"
                        label="客户开户银行"
                        width="180"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        prop="customerBankAccountNumber"
                        label="客户银行账号"
                        width="180"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column prop="commitTime" label="提交时间" width="180"></el-table-column>
                    <!-- <el-table-column prop="lastEditTime" label="最后修改时间" width="180"></el-table-column> -->
                    <!-- <el-table-column prop="lastEditUserName" label="最后修改人姓名" width="180"></el-table-column> -->
                    <!-- <el-table-column prop="lastEditUserMobile" label="最后修改人手机号" width="180"></el-table-column> -->
                    <el-table-column prop="commitUserName" label="提交开票人姓名" width="180"></el-table-column>
                    <el-table-column prop="commitUserMobile" label="提交开票人手机号" width="180"></el-table-column>
                    <el-table-column
                        fixed="right"
                        prop="status"
                        label="提交状态"
                        align="center"
                        :formatter="fmtCommitStatus"
                    ></el-table-column>
                    <el-table-column
                        fixed="right"
                        prop="statusMemo"
                        label="状态说明"
                        show-overflow-tooltip
                        width="120"
                        align="center"
                    ></el-table-column>
                </el-table>
            </el-container>
            <br />
            <el-row type="flex" :gutter="20">
                <el-col :span="12"></el-col>
                <el-col :span="12">
                    <div style="text-align: right;">
                        <el-pagination
                            @size-change="handleSearchResultSizeChange"
                            @current-change="handleSearchResultCurrentChange"
                            :current-page="search.resultPagination.currentPage"
                            :page-sizes="search.resultPagination.pageSizes"
                            :page-size="search.resultPagination.pageSize"
                            layout="total, sizes, prev, pager, next"
                            :total="search.resultPagination.total"
                        >
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import {
    GetBatchCustomerFileItems,
    BatchCustomerFileItemsCommit
} from '@/api/ent_init'

// 上架设备类型列表
const initDeviceTypes = [
    {
        value: 1,
        label: '软证书'
    },
    {
        value: 2,
        label: '税控盘'
    },
    {
        value: 3,
        label: '金税盘'
    },
    {
        value: 4,
        label: '税控UKey'
    },
    {
        value: 5,
        label: '税控服务器'
    },
]

// 提交状态选项
const commitStatusOptions = [
    {
        value: 1,
        label: '初始保存'
    },
    {
        value: 2,
        label: '准备提交'
    },
    {
        value: 3,
        label: '提交中'
    },
    {
        value: 4,
        label: '提交成功'
    },
    {
        value: 5,
        label: '提交失败'
    },
]

export default {
    name: "CustomerBatchFileDetails",
    data() {
        return {
            batchId: '',     // 批量上传记录id
            load: false,
            initDeviceTypes: initDeviceTypes,
            commitStatusOptions: commitStatusOptions,
            search: {
                entName: '',
                entTaxId: '',
                status: '', // 提交状态
                resultList: [],
                resultMultipleSelection: [],
                resultPagination: {
                    currentPage: 1,
                    pageSizes: [10, 30, 50, 100],
                    pageSize: 10,
                    total: 0
                }
            },
        }
    },
    created() {
        this.batchId = this.$route.params.key;
        if (this.batchId === '' || this.batchId === undefined || this.batchId === null) {
            this.handleGoBack();
        } else {
            this.callGetBatchCustomerFileItems(this.search.resultPagination.currentPage, this.search.resultPagination.pageSize);
        }
    },
    methods: {
        fmtCustomerType(row, column, cellValue) {
            let result = cellValue;
            if (cellValue == 1) {
                result = '个人'
            } else if (cellValue == 2) {
                result = '企业'
            }
            return result;
        },
        fmtCommitStatus(row, column, cellValue) {
            let result = cellValue;
            for (const item of commitStatusOptions) {
                if (item.value === cellValue) {
                    result = item.label;
                    break;
                }
            }
            return result;
        },
        handleGoBack() {
            console.log('go back');
            this.$router.push({ name: 'customer_batch_import' });
        },
        handleSearch() {
            this.callGetBatchCustomerFileItems(1, this.search.resultPagination.pageSize);
        },
        handleRefresh() {
            this.callGetBatchCustomerFileItems(this.search.resultPagination.currentPage, this.search.resultPagination.pageSize);
        },
        handleBatchCustomerFileItemsCommit() {
            if (this.search.resultMultipleSelection.length > 0) {
                this.callBatchCustomerFileItemsCommit(this.search.resultMultipleSelection);
            } else {
                this.$message('请勾选需要提交保存的客户！');
            }
        },
        //判断当前行是否可以选中
        handleSelectable(row, index) {
            // 提交状态  1：初始保存  2：准备提交 3：提交中  4：提交成功  5：提交失败
            return (row.status === 1);
        },
        handleSearchResultCheckChange(val) {
            this.search.resultMultipleSelection = val;
            console.log('选中数据');
            console.log(this.search.resultMultipleSelection);
        },
        handleSearchResultSizeChange(val) {
            this.callGetBatchCustomerFileItems(1, val);
        },
        handleSearchResultCurrentChange(val) {
            this.callGetBatchCustomerFileItems(val, this.search.resultPagination.pageSize);
        },
        /**
         * 获取上架企业列表
         * @param {Number} pageNum : 当前页码
         * @param {Number} pageSize : 每页数量
         */
        callGetBatchCustomerFileItems(pageNum, pageSize) {
            GetBatchCustomerFileItems({
                batchId: this.batchId,
                status: this.search.status,
                customerEntTaxId: this.search.entTaxId,
                customerName: this.search.entName,
                pageNum: pageNum,
                pageSize: pageSize,
            }).then(val => {
                this.search.resultPagination.total = val.data.total;
                this.search.resultPagination.pageSize = val.data.size;
                this.search.resultPagination.currentPage = val.data.current;
                this.search.resultList = val.data.records;
            }).catch(err => {
                this.$message.error(err);
            })
        },
        /**
         * 客户提交保存
         * @param {Array} selectRows 用户选中的客户
         */
        callBatchCustomerFileItemsCommit(selectRows) {
            this.$confirm('提交后客户将覆盖已存在的客户信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let recordIds = new Array();
                for (let index = 0; index < selectRows.length; index++) {
                    const element = selectRows[index];
                    recordIds[index] = element.recordId;
                }
                BatchCustomerFileItemsCommit(recordIds).then(val => {
                    this.callGetBatchCustomerFileItems(this.search.resultPagination.currentPage, this.search.resultPagination.pageSize);
                    this.$message.success(val.msg);
                }).catch(error => {
                    this.$message.error(error);
                })
            });
        }
    }
}
</script>

<style scoped>
</style>