<template>
    <div id="multiple_ent_init_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.entInitDevice" placeholder="请选择上架设备类型">
                        <el-option
                            v-for="item in initDeviceTypes"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </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="handleCommitBatchInit">提交上架</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"></el-table-column>
                    <el-table-column prop="entTaxId" label="企业税号" width="180"></el-table-column>
                    <el-table-column prop="entShortName" label="企业简称" width="100"></el-table-column>
                    <el-table-column prop="provinceCity" label="企业所属省市" width="180"></el-table-column>
                    <el-table-column
                        prop="entType"
                        label="企业类型"
                        width="180"
                        :formatter="fmtEntType"
                    ></el-table-column>
                    <el-table-column prop="entPhone" label="企业电话" width="180"></el-table-column>
                    <el-table-column
                        prop="entAddress"
                        label="企业地址"
                        width="220"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column prop="reserveMrName" label="企业管理者姓名" width="180"></el-table-column>
                    <el-table-column prop="reserveMrMobile" label="企业管理者手机号" width="180"></el-table-column>
                    <el-table-column
                        prop="entInitDevice"
                        label="上架设备"
                        width="100"
                        :formatter="fmtInitDevice"
                    ></el-table-column>
                    <el-table-column
                        prop="defaultInvoiceDevice"
                        label="默认开票设备"
                        width="100"
                        :formatter="fmtInitDevice"
                    ></el-table-column>
                    <el-table-column prop="taxDiscId" label="盘号" width="180"></el-table-column>
                    <el-table-column prop="taxToken" label="激活码"></el-table-column>
                    <!-- <el-table-column prop="fileName" label="文件名"></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-column
                        fixed="right"
                        prop="hasEdit"
                        label="是否修改"
                        align="center"
                        :formatter="fmtHasEdit"
                    >
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        prop="isvPlatform"
                        label="上架模式 "
                        align="center"
                        :formatter="fmtISVPlatform"
                    ></el-table-column>
                    <el-table-column fixed="right" label="操作" align="center" width="300">
                        <template slot-scope="scope">
                            <el-button
                                @click="handleShowModifyEntInfo(scope.row)"
                                :disabled="handleShowModifyEntInfoDisabled(scope.row)"
                                type="text"
                                >信息修改</el-button
                            >
                            <el-button
                                @click="handleShowModifyBusinessLicenseImg(scope.row)"
                                :disabled="handleShowModifyBusinessLicenseImgDisabled(scope.row)"
                                type="text"
                                >营业执照修改</el-button
                            >
                            <el-button
                                @click="handleShowModifyAuthProtocol(scope.row)"
                                :disabled="handleShowModifyAuthProtocolDisabled(scope.row)"
                                type="text"
                                >授权书修改</el-button
                            >
                        </template>
                    </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>

        <el-dialog title="营业执照修改" :visible.sync="modifyBusinessLicenseImg.dialogVisible" center>
            <input
                style="display: none;"
                type="file"
                accept=".jpg,.png,.jpeg"
                @change="handleBusinessLicenseImgPreview()"
                ref="upload-img-input"
            />
            <div class="upload-border">
                <el-image :src="modifyBusinessLicenseImg.url" fit="contain">
                    <div slot="error" class="image-slot">
                        <span>无预览</span>
                    </div>
                </el-image>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="modifyBusinessLicenseImg.dialogVisible = false">取 消</el-button>
                <el-button @click="handleSelectBusinessLicenseImg">选择上传文件</el-button>
                <el-button
                    type="primary"
                    @click="handleModifyBusinessLicenseImg"
                    :disabled="modifyBusinessLicenseImg.okDisabled"
                    >确 定</el-button
                >
            </span>
        </el-dialog>

        <el-dialog title="企业授权书修改" :visible.sync="modifyAuthProtocol.dialogVisible" center>
            <input
                style="display: none;"
                type="file"
                accept=".jpg,.png,.jpeg"
                @change="handleAuthProtocolPreview()"
                ref="upload-auth-protocol-input"
            />
            <div class="upload-border">
                <el-image :src="modifyAuthProtocol.url" fit="contain">
                    <div slot="error" class="image-slot">
                        <span>无预览</span>
                    </div>
                </el-image>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="modifyAuthProtocol.dialogVisible = false">取 消</el-button>
                <el-button @click="handleSelectAuthProtocol">选择上传文件</el-button>
                <el-button type="primary" @click="handleModifyAuthProtocol" :disabled="modifyAuthProtocol.okDisabled"
                    >确 定</el-button
                >
            </span>
        </el-dialog>

        <el-dialog
            title="企业信息修改"
            :visible.sync="modifyEntInfo.dialogVisible"
            @close="handleCloseDialogModifyEntInfo('entInitInfoForm')"
            center
            width="80%"
            top="70px"
        >
            <EntInitInfoForm ref="entInitInfoForm" :inputInfo="modifyEntInfo.data"></EntInitInfoForm>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleModifyEntInfo('entInitInfoForm')">
                    立即修改
                </el-button>
                <el-button @click="modifyEntInfo.dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    GetBatchInitEntList,
    CommitBatchInit,
    SaveBatchInitFile,
    UpdatebatchInitItem
} from '@/api/ent_init'

import EntInitInfoForm from './components/ent_init_info_form'

// 上架设备类型列表
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: "MultipleEntInitFileDetails",
    components: {
        EntInitInfoForm
    },
    data() {
        return {
            batchId: '',     // 批量上传记录id
            load: false,
            initDeviceTypes: initDeviceTypes,
            commitStatusOptions: commitStatusOptions,
            search: {
                entName: '',
                entTaxId: '',
                entInitDevice: '', // 上架设备类型
                status: '', // 提交状态
                resultList: [],
                resultMultipleSelection: [],
                resultPagination: {
                    currentPage: 1,
                    pageSizes: [10, 30, 50, 100],
                    pageSize: 10,
                    total: 0
                }
            },
            modifyBusinessLicenseImg: {
                dialogVisible: false,
                recordId: '', // 上架企业记录id
                url: '', // 执照预览路径
                file: null, // 执照文件
                okDisabled: true // 默认不可用；需要在选择文件后才可使用；
            },
            modifyAuthProtocol: {
                dialogVisible: false,
                recordId: '', // 上架企业记录id
                url: '', // 执照预览路径
                file: null, // 执照文件
                okDisabled: true // 默认不可用；需要在选择文件后才可使用；
            },
            modifyEntInfo: {
                dialogVisible: false,
                data: {}, // 待修改数据
            }
        }
    },
    created() {
        this.batchId = this.$route.params.key;
        if (this.batchId === '' || this.batchId === undefined || this.batchId === null) {
            this.handleGoBack();
        } else {
            this.callGetBatchInitEntList(this.search.resultPagination.currentPage, this.search.resultPagination.pageSize);
        }
    },
    methods: {
        fmtEntType(row, column, cellValue) {
            if (cellValue == 1) {
                return '一般纳税人'
            } else if (cellValue == 2) {
                return '小规模纳税人'
            } else if (cellValue == 3) {
                return '起征点以下纳税人'
            } else {
                return cellValue;
            }
        },
        fmtInitDevice(row, column, cellValue) {
            let result = cellValue;
            for (const item of initDeviceTypes) {
                if (item.value === cellValue) {
                    result = item.label;
                    break;
                }
            }
            return result;
        },
        fmtCommitStatus(row, column, cellValue) {
            let result = cellValue;
            for (const item of commitStatusOptions) {
                if (item.value === cellValue) {
                    result = item.label;
                    break;
                }
            }
            return result;
        },
        fmtHasEdit(row, column, cellValue) {
            return cellValue === true ? '是' : (cellValue === false ? '否' : cellValue);
        },
        fmtISVPlatform(row, column, cellValue) {
            if (cellValue == 1) {
                return '上架模式1'
            } else if (cellValue == 2) {
                return '上架模式2'
            } else {
                return cellValue;
            }
        },
        handleGoBack() {
            console.log('go back');
            this.$router.push({ name: 'multiple_ent_init' });
        },
        handleSearch() {
            this.callGetBatchInitEntList(1, this.search.resultPagination.pageSize);
        },
        handleRefresh() {
            this.callGetBatchInitEntList(this.search.resultPagination.currentPage, this.search.resultPagination.pageSize);
        },
        handleCommitBatchInit() {
            if (this.search.resultMultipleSelection.length > 0) {
                this.callCommitBatchInit(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.callGetBatchInitEntList(1, val);
        },
        handleSearchResultCurrentChange(val) {
            this.callGetBatchInitEntList(val, this.search.resultPagination.pageSize);
        },
        handleShowModifyEntInfo(row) {
            this.modifyEntInfo.dialogVisible = true;
            this.modifyEntInfo.data = JSON.parse(JSON.stringify(row));
        },
        handleShowModifyEntInfoDisabled(row) {
            // 提交状态  1：初始保存  2：准备提交 3：提交中  4：提交成功  5：提交失败
            return (row.status !== 1 && row.status !== 5);
        },
        handleCloseDialogModifyEntInfo(refName) {
            // 重置
            this.$refs[refName].reset();
        },
        handleModifyEntInfo(refName) {
            this.$refs[refName].getEntInitInfo().then(val => {
                UpdatebatchInitItem(this.modifyEntInfo.data.recordId, val).then(val => {
                    this.$message.success(val.msg);
                    this.handleRefresh();
                    this.modifyEntInfo.dialogVisible = false;
                }).catch(err => {
                    this.$message.error(err);
                });
            }).catch(err => {
                this.$message.error(err);
            });
        },
        handleShowModifyBusinessLicenseImg(row) {
            this.modifyBusinessLicenseImg.dialogVisible = true;

            // 初始化弹窗相关的属性
            this.modifyBusinessLicenseImg.recordId = row.recordId;
            this.modifyBusinessLicenseImg.url = row.businessLicenseImg;
            this.modifyBusinessLicenseImg.file = null;
            this.modifyBusinessLicenseImg.okDisabled = true;
        },
        handleShowModifyBusinessLicenseImgDisabled(row) {
            // 提交状态  1：初始保存  2：准备提交 3：提交中  4：提交成功  5：提交失败
            return (row.status !== 1 && row.status !== 5);
        },
        handleBusinessLicenseImgPreview() {
            var that = this
            //注意这里要使用that保存this，不然下方调用f.onload的时候会出现问题
            console.log(this.$refs['upload-img-input'].files)
            let tempFile = this.$refs['upload-img-input'].files[0];
            var f = new FileReader()
            f.readAsDataURL(tempFile)
            f.onload = function () {
                that.modifyBusinessLicenseImg.okDisabled = false;
                that.modifyBusinessLicenseImg.url = f.result;
                that.modifyBusinessLicenseImg.file = tempFile;
            }
        },
        handleSelectBusinessLicenseImg() {
            this.$refs['upload-img-input'].click()
        },
        handleModifyBusinessLicenseImg() {
            SaveBatchInitFile(this.modifyBusinessLicenseImg.recordId, this.modifyBusinessLicenseImg.file, null).then(val => {
                this.$message.success(val.msg);
                this.handleRefresh();
                this.modifyBusinessLicenseImg.dialogVisible = false;
            }).catch(err => {
                this.$message.error(err);
            })
        },
        handleShowModifyAuthProtocol(row) {
            this.modifyAuthProtocol.dialogVisible = true;

            // 初始化弹窗相关的属性
            this.modifyAuthProtocol.recordId = row.recordId;
            this.modifyAuthProtocol.url = row.authProtocol;
            this.modifyAuthProtocol.file = null;
            this.modifyAuthProtocol.okDisabled = true;
        },
        handleShowModifyAuthProtocolDisabled(row) {
            // 提交状态  1：初始保存  2：准备提交 3：提交中  4：提交成功  5：提交失败
            return (row.status !== 1 && row.status !== 5);
        },
        handleAuthProtocolPreview() {
            var that = this
            //注意这里要使用that保存this，不然下方调用f.onload的时候会出现问题
            console.log(this.$refs['upload-auth-protocol-input'].files)
            let tempFile = this.$refs['upload-auth-protocol-input'].files[0];
            var f = new FileReader()
            f.readAsDataURL(tempFile)
            f.onload = function () {
                that.modifyAuthProtocol.okDisabled = false;
                that.modifyAuthProtocol.url = f.result;
                that.modifyAuthProtocol.file = tempFile;
            }
        },
        handleSelectAuthProtocol() {
            this.$refs['upload-auth-protocol-input'].click()
        },
        handleModifyAuthProtocol() {
            SaveBatchInitFile(this.modifyAuthProtocol.recordId, null, this.modifyAuthProtocol.file).then(val => {
                this.$message.success(val.msg);
                this.handleRefresh();
                this.modifyAuthProtocol.dialogVisible = false;
            }).catch(err => {
                this.$message.error(err);
            })
        },
        /**
         * 获取上架企业列表
         * @param {Number} pageNum : 当前页码
         * @param {Number} pageSize : 每页数量
         */
        callGetBatchInitEntList(pageNum, pageSize) {
            GetBatchInitEntList({
                batchId: this.batchId,
                status: this.search.status,
                entTaxId: this.search.entTaxId,
                entName: this.search.entName,
                entInitDevice: this.search.entInitDevice,
                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 用户选中的待上架企业
         */
        callCommitBatchInit(selectRows) {
            let recordIds = new Array();
            for (let index = 0; index < selectRows.length; index++) {
                const element = selectRows[index];
                recordIds[index] = element.recordId;
            }
            CommitBatchInit(this.batchId, recordIds).then(val => {
                this.callGetBatchInitEntList(this.search.resultPagination.currentPage, this.search.resultPagination.pageSize);
                this.$message.success(val.msg);
            }).catch(error => {
                this.$message.error(error);
            })
        }
    }
}
</script>

<style scoped>
.upload-border {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    min-height: 300px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>