<template>
    <div id="product_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.productName"
                        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="productName"
                        label="商品名称"
                        width="180"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        prop="taxationCateCode"
                        label="税收分类编码"
                        width="180"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        prop="taxRate"
                        label="税率"
                        width="180"
                        :formatter="fmtTaxRate"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column prop="price" label="单价" width="120" show-overflow-tooltip></el-table-column>
                    <el-table-column
                        prop="taxPriceFlag"
                        label="含税价标志 "
                        width="100"
                        :formatter="fmtTaxPriceFlag"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        prop="preferentialType"
                        label="优惠政策类型"
                        width="180"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        prop="zeroRateFlag"
                        label="零税率标志"
                        width="120"
                        :formatter="fmtZeroRateFlag"
                        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 {
    GetBatchProductFileItems,
    BatchProductFileItemsCommit
} from '@/api/ent_init'

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

// 零税率标识选项列表
const zeroRateFlagOptions = [
    {
        value: null,
        label: '无',
        disabled: false
    },
    {
        value: 1,
        label: '免税',
        disabled: true // 不提供选择
    },
    {
        value: 2,
        label: '不征税',
        disabled: true  // 不提供选择
    },
    {
        value: 3,
        label: '普通零税率',
        disabled: false
    }
]

export default {
    name: "ProductBatchFileDetails",
    data() {
        return {
            batchId: '',     // 批量上传记录id
            load: false,
            commitStatusOptions: commitStatusOptions,
            search: {
                productName: '',
                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.callGetBatchProductFileItems(this.search.resultPagination.currentPage, this.search.resultPagination.pageSize);
        }
    },
    methods: {
        fmtCommitStatus(row, column, cellValue) {
            let result = cellValue;
            for (const item of commitStatusOptions) {
                if (item.value === cellValue) {
                    result = item.label;
                    break;
                }
            }
            return result;
        },
        fmtTaxRate(row, column, cellValue) {
            return (Number.parseFloat(cellValue) * 100) + '%';
        },
        fmtTaxPriceFlag(row, column, cellValue) {
            return cellValue === true ? '是' : (cellValue === false ? '否' : cellValue);
        },
        fmtZeroRateFlag(row, column, cellValue) {
            let result = cellValue;
            for (const item of zeroRateFlagOptions) {
                if (item.value === cellValue) {
                    result = item.label;
                    break;
                }
            }
            return result;
        },
        handleGoBack() {
            console.log('go back');
            this.$router.push({ name: 'product_batch_import' });
        },
        handleSearch() {
            this.callGetBatchProductFileItems(1, this.search.resultPagination.pageSize);
        },
        handleRefresh() {
            this.callGetBatchProductFileItems(this.search.resultPagination.currentPage, this.search.resultPagination.pageSize);
        },
        handleBatchCustomerFileItemsCommit() {
            if (this.search.resultMultipleSelection.length > 0) {
                this.callBatchProductFileItemsCommit(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.callGetBatchProductFileItems(1, val);
        },
        handleSearchResultCurrentChange(val) {
            this.callGetBatchProductFileItems(val, this.search.resultPagination.pageSize);
        },
        /**
         * 获取批量文件商品列表
         * @param {Number} pageNum : 当前页码
         * @param {Number} pageSize : 每页数量
         */
        callGetBatchProductFileItems(pageNum, pageSize) {
            GetBatchProductFileItems({
                batchId: this.batchId,
                status: this.search.status,
                productName: this.search.productName,
                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 用户选中数据
         */
        callBatchProductFileItemsCommit(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;
                }
                BatchProductFileItemsCommit(recordIds).then(val => {
                    this.callGetBatchProductFileItems(this.search.resultPagination.currentPage, this.search.resultPagination.pageSize);
                    this.$message.success(val.msg);
                }).catch(error => {
                    this.$message.error(error);
                })
            })
        }
    }
}
</script>

<style scoped>
</style>