<template>
    <div v-loading="loading" element-loading-text="拼命加载中">
        <el-row>
            <el-col :span="6">
                <h2>接收消息企业：</h2>
            </el-col>
            <el-col :span="18" style="text-align: right; padding-top: 10px">
                <input
                    ref="uploadExcel-input"
                    style="display: none"
                    type="file"
                    accept=".xlsx, .xls"
                    @change="handkeFileChange"
                />
                <el-button @click="handleImportExcel" :loading="importLoading">
                    文件导入【Excel】
                </el-button>
                <el-button
                    @click="handleDownloadTemplate"
                    :loading="exportLoading"
                >
                    下载模板文件【Excel】
                </el-button>
            </el-col>
        </el-row>

        <el-table
            :data="selectEnts"
            border
            stripe
            style="width: 100%"
            :reserve-selection="true"
            height="250"
        >
            <el-table-column
                type="index"
                align="center"
                label="序号"
                width="50"
            ></el-table-column>
            <el-table-column
                prop="entName"
                label="企业名称"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                prop="entTaxId"
                label="企业税号"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="操作"
                align="center"
                fixed="right"
                width="80"
            >
                <template slot-scope="scope">
                    <el-button @click="handleSelectEntRemove(scope.row)">
                        移除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <h2>企业查询：</h2>
        <el-form :inline="true">
            <el-form-item>
                <el-input
                    v-model="search.entName"
                    clearable
                    placeholder="请输入企业名称"
                >
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-input
                    v-model="search.entTaxId"
                    clearable
                    placeholder="请输入企业税号"
                >
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                    @click="handleSearch"
                    type="primary"
                    icon="el-icon-search"
                >
                    搜 索
                </el-button>
            </el-form-item>
        </el-form>
        <el-table
            :data="search.resultList"
            border
            stripe
            style="width: 100%"
            :reserve-selection="true"
            height="250"
        >
            <el-table-column
                type="index"
                :index="pageIndex"
                align="center"
                label="序号"
                width="50"
            ></el-table-column>
            <el-table-column
                prop="entName"
                label="企业名称"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                prop="entTaxId"
                label="企业税号"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="操作"
                align="center"
                fixed="right"
                width="80"
            >
                <template slot-scope="scope">
                    <el-button @click="handleSelectEnt(scope.row)">
                        选择
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <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>
</template>

<script>
import { EntInfoByMobile } from "@/api/ent_init";
import { get_excel_data } from "@/utils/Export2Excel";

export default {
    name: "SelectEnterprises",
    data() {
        return {
            loading: false,
            search: {
                entName: null,
                entTaxId: null,
                resultList: [],
                resultMultipleSelection: [],
                resultPagination: {
                    currentPage: 1,
                    pageSizes: [10, 30, 50, 100],
                    pageSize: 10,
                    total: 0,
                },
            },
            selectEnts: [], // 选择企业
            tableHeader: [],
            tableBody: [],
            importLoading: false,
            exportLoading: false,
        };
    },
    methods: {
        pageIndex(index) {
            let currentPage = this.search.resultPagination.currentPage; // 当前页码，具体看组件取值
            let pageSize = this.search.resultPagination.pageSize; // 每页条数，具体是组件取值
            return index + 1 + (currentPage - 1) * pageSize;
        },
        handleSearch() {
            this.callEntInfoByMobile(1, this.search.resultPagination.pageSize);
        },
        handleSearchResultSizeChange(val) {
            this.callEntInfoByMobile(1, val);
        },
        handleSearchResultCurrentChange(val) {
            this.callEntInfoByMobile(
                val,
                this.search.resultPagination.pageSize
            );
        },
        /**
         * 用户手机号查询企业列表
         * @param {Number} pageNum : 当前页码
         * @param {Number} pageSize : 每页数量
         */
        callEntInfoByMobile(pageNum, pageSize) {
            EntInfoByMobile({
                entTaxId: this.search.entTaxId,
                entName: 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);
                });
        },
        // 选择企业
        handleSelectEnt(row) {
            if (row) {
                if (this.selectEnts) {
                    var findItem = this.selectEnts.find((item) => {
                        return item.entTaxId === row.entTaxId;
                    });
                    if (findItem) {
                        this.$message.warning("企业已选择！");
                    } else {
                        var tempList = [...this.selectEnts];
                        tempList.push(row);
                        this.selectEnts = tempList;
                    }
                } else {
                    this.selectEnts = [row];
                }
            }
        },
        // 选择企业移除
        handleSelectEntRemove(row) {
            if (row && this.selectEnts) {
                var findItemIndex = this.selectEnts.findIndex((item) => {
                    return item.entTaxId === row.entTaxId;
                });
                if (findItemIndex > -1) {
                    var tempList = [...this.selectEnts];
                    tempList.splice(findItemIndex, 1);
                    this.selectEnts = tempList;
                }
            }
        },
        // 获取选中企业列表
        getSelectEnts() {
            return this.selectEnts;
        },
        // 导入企业列表
        handleImportExcel() {
            this.$refs["uploadExcel-input"].click();
        },
        // 读取文件内容
        handkeFileChange(ev) {
            this.importLoading = true;
            const files = ev.target.files;
            const file = files[0];
            get_excel_data(file, (data) => {
                this.tableHeader = data.header;
                this.tableBody = data.body;

                let tempList = [];
                for (const item of this.tableBody) {
                    tempList.push({
                        entName: item['企业名称'],
                        entTaxId: item['企业税号'],
                    });
                }
                this.selectEnts = tempList;

                this.importLoading = false;
                // fix can't select same file
                this.$refs["uploadExcel-input"].value = null;
            });
        },
        // 下载企业列表模板文件
        handleDownloadTemplate() {
            this.exportLoading = true;
            import("@/utils/Export2Excel").then((excel) => {
                const tHeader = ["企业名称", "企业税号"];
                excel.export_json_to_excel({
                    header: tHeader,
                    data: "",
                    filename: "消息推送企业模板文件",
                });
                this.exportLoading = false;
            });
        },
    },
};
</script>