<!--
 * @Author: @liulin
 * @Date: 2022-05-25 14:36:04
 * @LastEditors: Please set LastEditors
-->
<template>
    <div>
        <at-table
            @load="loadData"
            :data="data"
            :page-result="pageResult"
            ref="AtTable"
            :default-sorter="[{direction: 'ASC', property: 'bbm.COMMENCEMENT_DATE_'}]"
            :cellClassNameFn="cellClassNameFn"
            @handleDialogCancel="handleDialogCancel"
            @handleDialogClose="handleDialogClose"
            @row-dblclick="handleRowDBClick"
            :justShowSearch="justShowSearch"
        >
            <template v-slot:searchInput>
                <el-form
                    ref="searchForm"
                    :model="searchForm"
                    label-width="80px"
                    class="search-top"
                    @submit.native.prevent
                >
                    <el-select
                        v-model="searchForm.createTime"
                        clearable
                        placeholder="请选择年份"
                        @change="findinfo"
                    >
                        <el-option
                            v-for="item in optionYears"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                    <dict-select
                        v-if="isShow"
                        v-model="searchForm.projectType"
                        dictCode="xmgl-xmlx"
                        validate="required"
                        placeholder="请选择项目类型"
                        :clearable="true"
                        @keyup.enter.native="findinfo"
                    />
                    <project-info-selector
                        ref="projectInfo"
                        v-if="isShow"
                        v-model="searchForm.projectId"
                        style="width: 100%"
                        @keyup.enter.native="findinfo"
                    ></project-info-selector>
                    <dict-select
                        v-model="searchForm.type"
                        dictCode="zbfs"
                        validate="required"
                        placeholder="请选择招标方式"
                        :clearable="true"
                        @keyup.enter.native="findinfo"
                    />
                    <dict-select
                        v-model="searchForm.biddingCharge"
                        dictCode="zblx"
                        validate="required"
                        placeholder="请选择招标类型"
                        :clearable="true"
                        @keyup.enter.native="findinfo"
                    />
                    <!-- <el-input
            v-model="searchForm.biddingAgency"
            style="width: 100%"
            clearable
            placeholder="请输入招标代理机构"
            @keyup.enter.native="findinfo"
          ></el-input> -->
                    <el-button
                        size="small"
                        @click="findinfo"
                        type="primary"
                        class="el-icon-search search-btn"
                        >查询</el-button
                    >
                    <el-button
                        size="small"
                        @click="handleReset"
                        type="primary"
                        plain
                        class="el-icon-refresh"
                        >重置</el-button
                    >
                    <el-button
                        size="small"
                        type="primary"
                        @click="handleExport"
                        :loading="loading"
                        icon="el-icon-download"
                        plain
                        style="margin-left: 10px"
                        >导出</el-button
                    >
                </el-form>
            </template>
            <template v-slot:seacrhMoreInput v-if="isShow">
                <div class="moreInput">
                    <el-date-picker
                        unlink-panels
                        v-model="searchForm.yearMonth"
                        value-format="yyyy-MM"
                        type="monthrange"
                        range-separator="至"
                        start-placeholder="开标时间"
                        end-placeholder="开标时间"
                        @change="findinfo"
                    >
                    </el-date-picker>
                </div>
            </template>
            <template>
                <el-table-column type="index" label="序号" width="55" align="center">
                </el-table-column>

                <el-table-column
                    prop="commencementDate"
                    label="开标时间"
                    :show-overflow-tooltip="true"
                    width="130"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="projectManager"
                    label="经办人"
                    :show-overflow-tooltip="true"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="projectName"
                    label="项目名称"
                    :show-overflow-tooltip="true"
                    min-width="100"
                    align="center"
                >
                </el-table-column>

                <el-table-column
                    prop="preliminaryEstimate"
                    label="项目概算(万元)"
                    :show-overflow-tooltip="true"
                    width="130"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="biddingAgency"
                    label="招标代理机构名称"
                    :show-overflow-tooltip="true"
                    width="150"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="sourceFunds"
                    label="资金来源"
                    :show-overflow-tooltip="true"
                    min-width="100"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="biddingChargeType"
                    label="招标方式"
                    :show-overflow-tooltip="true"
                    min-width="100"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="biddingCharge"
                    label="招标类型"
                    align="center"
                    width="100"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <div>{{ getDictName('zblx', scope.row.biddingCharge) }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="hasComplaint"
                    label="有无投诉、投诉人及联系方式"
                    :show-overflow-tooltip="true"
                    min-width="230"
                    align="center"
                >
                    <!-- <template v-slot="{row}">
            {{ row.hasComplaint !== 0 ? '无' : '有' }}
          </template> -->
                </el-table-column>
                <el-table-column
                    prop="complaintSituation"
                    label="投诉情况"
                    :show-overflow-tooltip="true"
                    min-width="100"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="bidWinner"
                    label="中标单位"
                    min-width="100"
                    :show-overflow-tooltip="true"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="bidWinnerAgencyNamePhone"
                    label="中标单位代理人姓名、电话"
                    :show-overflow-tooltip="true"
                    min-width="220"
                    align="center"
                >
                </el-table-column>
                --
                <el-table-column
                    prop="bidAmountExamine"
                    label="评审限价(万元)"
                    :show-overflow-tooltip="true"
                    min-width="130"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="bidAmount"
                    label="中标金额(万元)"
                    :show-overflow-tooltip="true"
                    min-width="130"
                    align="center"
                >
                    <!-- <template v-slot="{row}">
            {{ (Number(row.bidAmount) / 10000).toFixed(2) }}
          </template> -->
                </el-table-column>
                <el-table-column
                    prop="commencementTime"
                    label="开工时间"
                    :show-overflow-tooltip="true"
                    min-width="100"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="completionTime"
                    label="竣工时间"
                    :show-overflow-tooltip="true"
                    min-width="100"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="bidWinnerAgentName"
                    label="实施施工人(承建人)"
                    :show-overflow-tooltip="true"
                    min-width="160"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="bidWinnerPhone"
                    label="合同约定付款方式"
                    :show-overflow-tooltip="true"
                    min-width="150"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="actualPaymentMethodSituation"
                    label="实际付款方式及情况"
                    :show-overflow-tooltip="true"
                    min-width="170"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="payeeAccountPhone"
                    label="收款人及账号、电话"
                    :show-overflow-tooltip="true"
                    min-width="170"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="actualSettlementMoney"
                    label="实际结算金额(万元)"
                    :show-overflow-tooltip="true"
                    min-width="170"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="auditSituationAndProblems"
                    label="审计情况及存在主要问题"
                    :show-overflow-tooltip="true"
                    min-width="200"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="remarks"
                    label="备注"
                    :show-overflow-tooltip="true"
                    align="center"
                >
                </el-table-column>
                <!-- <el-table-column
          prop="documentNumber"
          label="招标名称"
          :show-overflow-tooltip="true"
          align="center"
        >
        </el-table-column>
        
        
        <el-table-column
          prop="responsibleUnit"
          label="招标范围"
          :show-overflow-tooltip="true"
          align="center"
        >
        </el-table-column> -->

                <!-- <el-table-column
          prop="responsiblePerson"
          label="招标企业数量"
          :show-overflow-tooltip="true"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="bidAmountExamine"
          label="招标限价(万元)"
          :show-overflow-tooltip="true"
          width="130"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="projectBudget"
          label="投标保证金金额(万元)"
          :show-overflow-tooltip="true"
          width="130"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="implementationPersonnelPhone"
          label="投标保证金支付方式"
          :show-overflow-tooltip="true"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="implementationPersonnelName"
          label="评标方法"
          :show-overflow-tooltip="true"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="fundsSource"
          label="是否违法违规"
          :show-overflow-tooltip="true"
          align="center"
        >
        </el-table-column>
        
        
        <el-table-column
          prop="actualPaymentMethod"
          label="项目概况"
          :show-overflow-tooltip="true"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="contractPaymentMethod"
          label="投资性质"
          :show-overflow-tooltip="true"
          align="center"
        >
        </el-table-column>

      
        <el-table-column
          prop="bidWinnerAgentPhone"
          label="中标人资质等级"
          :show-overflow-tooltip="true"
          align="center"
        >
        </el-table-column>
        
        <el-table-column
          prop="actualSettlementAmount"
          label="安全文明施工费(万元)"
          :show-overflow-tooltip="true"
          width="150"
          align="center"
        > -->
                <!-- <template v-slot="{row}">
            {{ (Number(row.bidAmount) / 10000).toFixed(2) }}
          </template> -->
                <!-- </el-table-column> -->
                <!-- <el-table-column
          prop="bidWinnerAgentPhone"
          label="中标单位负责人"
          :show-overflow-tooltip="true"
          align="center"
        >
        </el-table-column> -->
                <!-- <el-table-column
          prop="bidWinnerAgentPhone"
          label="中标通知书签发日期"
          :show-overflow-tooltip="true"
          align="center"
        >
        </el-table-column> -->
                <!-- -->
                <!-- <el-table-column
          prop="bidWinnerPhone"
          label="中标单位负责人联系电话"
          :show-overflow-tooltip="true"
          align="center"
        >
        </el-table-column> -->
                <!--  -->
                <!--  -->
                <!-- <el-table-column
          prop="bidWinnerAgentName"
          label="中标负责人"
          :show-overflow-tooltip="true"
          align="center"
        >
        </el-table-column> -->
                <!--  -->
            </template>
        </at-table>
        <el-dialog title="详情" :visible.sync="dialogVisible" width="1200px" top="8vh">
            <div class="mainBox">
                <table align="center">
                    <tr>
                        <td class="bgColor" style="width: 150px">项目名称</td>
                        <td style="width: 390px">{{ details.projectName }}</td>
                        <td class="bgColor" style="width: 150px">开标时间</td>
                        <td style="width: 380px">{{ details.commencementDate }}</td>
                    </tr>
                    <tr>
                        <td class="bgColor">项目概算(万元)</td>
                        <td>{{ details.preliminaryEstimate }}</td>
                        <td class="bgColor">招标代理机构名称</td>
                        <td>{{ details.biddingAgency }}</td>
                    </tr>
                    <tr>
                        <td class="bgColor">资金来源</td>
                        <td>{{ details.sourceFunds }}</td>
                        <td class="bgColor">招标方式</td>
                        <td>{{ details.biddingChargeType }}</td>
                    </tr>

                    <tr>
                        <td class="bgColor">有无投诉</td>
                        <td>{{ details.hasComplaint }}</td>
                        <td class="bgColor">投诉情况</td>
                        <td>{{ details.complaintSituation }}</td>
                    </tr>
                    <tr>
                        <td class="bgColor">中标单位</td>
                        <td>{{ details.bidWinner }}</td>
                        <td class="bgColor">中标单位代理人姓名、电话</td>
                        <td>{{ details.bidWinnerAgencyNamePhone }}</td>
                    </tr>

                    <tr>
                        <td class="bgColor">评审限价(万元)</td>
                        <td>{{ details.bidAmountExamine }}</td>
                        <td class="bgColor">中标金额(万元)</td>
                        <td>{{ details.bidAmount }}</td>
                    </tr>
                    <tr>
                        <td class="bgColor">开工时间</td>
                        <td>{{ details.commencementTime }}</td>
                        <td class="bgColor">竣工时间</td>
                        <td>{{ details.completionTime }}</td>
                    </tr>
                    <tr>
                        <td class="bgColor">实施施工人(承建人)</td>
                        <td>{{ details.bidWinnerAgentName }}</td>
                        <td class="bgColor">合同约定付款方式</td>
                        <td>{{ details.bidWinnerPhone }}</td>
                    </tr>
                    <tr>
                        <td class="bgColor">实际付款方式及情况</td>
                        <td>{{ details.actualPaymentMethodSituation }}</td>
                        <td class="bgColor">收款人及账号、电话</td>
                        <td>{{ details.payeeAccountPhone }}</td>
                    </tr>
                    <tr>
                        <td class="bgColor">实际结算金额(万元)</td>
                        <td>{{ details.actualSettlementMoney }}</td>
                        <td class="bgColor">审计情况及存在主要问题</td>
                        <td>{{ details.auditSituationAndProblems }}</td>
                    </tr>
                    <tr>
                        <td class="bgColor">备注</td>
                        <td colspan="3">
                            {{ details.remarks }}
                        </td>
                    </tr>
                </table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import date from '@/api/date.js'
import req from '@/request.js'
const BigNumber = require('bignumber.js')
import ProjectInfoDialog from '@/components/dialog/ProjectInfoDialog.vue'
const eipUserSelector = () => import('@/components/selector/EipUserSelector.vue')
export default {
    name: 'biddingAccount',
    props: {
        pid: {
            type: String,
            default: '',
        },
        isShow: {
            type: Boolean,
            default: true,
        },
        alias: {
            type: String,
            default: '',
        },
    },
    components: {
        // ProjectInfoDialog,
        // eipUserSelector,
    },
    data() {
        return {
            total: {
                commencementDate: '合计',
                projectManager: '----',
                projectName: '----',
                preliminaryEstimate: 0,
                biddingAgency: '----',
                sourceFunds: '----',
                biddingChargeType: '----',
                hasComplaint: '----',
                complaintSituation: '----',
                bidWinner: '----',
                bidWinnerAgencyNamePhone: '----',
                bidAmountExamine: 0,
                bidAmount: 0,
                commencementTime: '----',
                completionTime: '----',
                bidWinnerAgentName: '----',
                bidWinnerPhone: '----',
                actualPaymentMethodSituation: '----',
                payeeAccountPhone: '----',
                actualSettlementMoney: 0,
                auditSituationAndProblems: '----',
                remarks: '----',
            },
            justShowSearch: this.isShow,
            details: {},
            loading: false,
            searchForm: {
                projectId: '',
                type: '', //招标方式
                createTime: '', //当前年份
                projectType: '', //项目类型
            },
            optionYears: [], //顶部搜索年份选择数组
            data: [], //表格数据
            pageResult: {
                page: 1,
                pageSize: 20,
                total: 0,
            },
            form: {},
            dialogVisible: false,
        }
    },
    computed: {
        deleteUrl: function () {
            return window.context.cqxy + '/biz/completionAcceptance/acceptanceSettlement/v1/delete'
        },
    },
    created() {
        this.getYear()
        this.getCureentYear()
    },
    methods: {
        getCureentYear() {
            if (!this.isShow) {
                return
            } else {
                this.searchForm.createTime = new Date().getFullYear()
            }
        },
        //获取顶部搜索的年份区间
        getYear() {
            const myDate = new Date()
            const startYear = 2006 //起始年份
            const endYear = myDate.getFullYear() //结束年份
            for (let i = endYear; i >= startYear; i--) {
                this.optionYears.push({
                    label: i + '年',
                    value: i,
                })
            }
        },
        handleReset() {
            this.searchForm.projectId = ''
            this.searchForm.type = ''
            this.searchForm.createTime = ''
            this.searchForm.projectType = ''
            this.$refs['searchForm'].resetFields()
            this.pageResult = {
                page: 1,
                pageSize: 20,
                total: 0,
            }
            this.$nextTick(() => {
                this.$refs.AtTable.load()
            })
        },

        //导入后重新加载数据
        load() {
            this.$refs.AtTable.load()
        },
        //导出
        handleExport() {
            this.loading = true
            let query = []
            let search = {
                'pm.ID_': this.searchForm.projectId,
                BIDDING_CHARGE_TYPE_: this.searchForm.type,
                project_type_: this.searchForm.projectType,
                CREATE_TIME_: this.searchForm.createTime,
                year_month_: this.searchForm.yearMonth,
                BIDDING_CHARGE_: this.searchForm.biddingCharge,
            }
            if (!this.isShow) {
                search['pm.ID_'] = this.pid
            }
            for (let i in search) {
                if (search[i]) {
                    if (i == 'CREATE_TIME_') {
                        query.push({
                            group: 'createTimeGroup',
                            operation: 'BETWEEN',
                            parentGroup: '',
                            property: 'bbm.COMMENCEMENT_DATE_',
                            relation: 'OR',
                            value: [`${search[i]}-01-01`, `${search[i]}-12-31`],
                        })
                    } else if (i == 'year_month_') {
                        let lastDate = search[i][1]
                        let str = lastDate.split('-')
                        let year = parseInt(str[0])
                        let month = parseInt(str[1])
                        let date = new Date(year, month, 0).getDate()
                        let arr = [`${search[i][0]}-01`, `${search[i][1]}-${date}`]
                        query.push({
                            group: 'createTimeGroup',
                            operation: 'BETWEEN',
                            parentGroup: '',
                            property: 'bbm.COMMENCEMENT_DATE_',
                            relation: 'AND',
                            value: arr,
                        })
                    } else {
                        query.push({
                            group: 'advance',
                            operation: 'EQUAL',
                            property: i,
                            relation: 'AND',
                            value: search[i],
                        })
                    }
                }
            }
            let param = {
                pageBean: {
                    page: 1,
                    pageSize: -1,
                    showTotal: true,
                },
                querys: query,
                sorter: [
                    {
                        direction: 'ASC',
                        property: 'bbm.COMMENCEMENT_DATE_',
                    },
                ],
            }
            req.downloadPostCopy(
                '${cqxy}/biz/ledger/biddingLedger/v1/exportDataToExcel',
                param
            ).then((res) => {
                if (res.status === 200) {
                    this.loading = false
                    this.$message.success('导出成功')
                } else {
                    this.loading = false
                    this.$message.error('导出失败')
                }
            })
        },
        handleFile(file) {
            this.form.accessoryInfo = file
        },

        handleRowDBClick(data) {
            // this.dialogTitle = '详情'
            // this.form = {...data}
            this.details = data
            this.dialogVisible = true
        },

        handleDialogCancel() {
            this.dialogVisible = false
            this.form = {
                projectInfo: {},
                accessoryInfo: [],
                contractInfo: {},
            }
        },
        handleDialogClose() {
            this.form = {
                projectInfo: {},
                accessoryInfo: [],
                contractInfo: {},
            }
            this.dialogVisible = false
        },
        loadData(param, cb) {
            if (this.isShow) {
                this.$refs.projectInfo.getProjectData(this.searchForm.createTime)
            }
            let query = []
            let search = {
                'pm.ID_': this.searchForm.projectId,
                BIDDING_CHARGE_TYPE_: this.searchForm.type,
                project_type_: this.searchForm.projectType,
                CREATE_TIME_: this.searchForm.createTime,
                year_month_: this.searchForm.yearMonth,
                BIDDING_CHARGE_: this.searchForm.biddingCharge,
                // BIDDING_AGENCY_: this.searchForm.biddingAgency
            }
            if (!this.isShow) {
                search['pm.ID_'] = this.pid
            }
            for (let i in search) {
                if (search[i]) {
                    if (i == 'CREATE_TIME_') {
                        query.push(
                            {
                                group: 'createTimeGroup',
                                operation: 'BETWEEN',
                                parentGroup: '',
                                property: 'bbm.COMMENCEMENT_DATE_',
                                relation: 'AND',
                                value: [`${search[i]}-01-01`, `${search[i]}-12-31`],
                            }
                            // {
                            //   group: 'createTimeSubGroup',
                            //   operation: 'LESS_EQUAL',
                            //   parentGroup: 'createTimeGroup',
                            //   property: 'bbm.commencemen_date_',
                            //   relation: 'AND',
                            //   value: `${search[i]}-12-31`,
                            // },
                            // {
                            //   group: 'createTimeSubGroup',
                            //   operation: 'LESS',
                            //   parentGroup: 'createTimeGroup',
                            //   property: 'PROJECT_STATUS_',
                            //   relation: 'AND',
                            //   value: '12',
                            // }
                        )
                    } else if (i == 'year_month_') {
                        let lastDate = search[i][1]
                        let str = lastDate.split('-')
                        let year = parseInt(str[0])
                        let month = parseInt(str[1])
                        let date = new Date(year, month, 0).getDate()
                        let arr = [`${search[i][0]}-01`, `${search[i][1]}-${date}`]
                        query.push({
                            group: 'createTimeGroup',
                            operation: 'BETWEEN',
                            parentGroup: '',
                            property: 'bbm.COMMENCEMENT_DATE_',
                            relation: 'AND',
                            value: arr,
                        })
                    } else {
                        query.push({
                            group: 'advance',
                            operation: 'EQUAL',
                            property: i,
                            relation: 'AND',
                            value: search[i],
                        })
                    }
                }
            }
            if (param.querys && param.querys.length) {
                param.querys.push(...query)
            } else {
                param.querys = query
            }
            this.$http
                .post('${cqxy}/biz/ledger/biddingLedger/v1/page', param)
                .then(
                    (resp) => {
                        let response = resp.data.value
                        let data = response.rows
                        this.total.preliminaryEstimate = this.calculationTotal(
                            data,
                            'preliminaryEstimate'
                        )
                        this.total.bidAmountExamine = this.calculationTotal(
                            data,
                            'bidAmountExamine'
                        )
                        this.total.bidAmount = this.calculationTotal(data, 'bidAmount')
                        this.total.actualSettlementMoney = this.calculationTotal(
                            data,
                            'actualSettlementMoney'
                        )
                        if (data.length !== 0) {
                            data.push(this.total)
                        }
                        this.data = data
                        this.pageResult = {
                            page: response.page,
                            pageSize: response.pageSize,
                            total: response.total,
                        }
                    },
                    (error) => {
                        reject(error)
                    }
                )
                .finally(() => {
                    if (cb) {
                        cb()
                    }
                })
        },
        findinfo() {
            this.$refs.AtTable.load()
        },
        // 计算列表合同金额合计金额
        calculationTotal(data, key) {
            let total = new BigNumber(0)
            if (key && data && data.length !== 0) {
                data.forEach((item) => {
                    if (item[key]) {
                        total = total.plus(item[key])
                    } else {
                        total = total.plus(0)
                    }
                })
            }
            return this.moneyFormatter(total)
        },
        cellClassNameFn(row) {
            // 列表项目名称为【合计】隐藏复选框
            if (row.row.commencementDate === '合计') {
                return 'table-column-hidden'
            }
        },
    },
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/common.scss';
/deep/ .el-range-editor--small .el-range-separator {
  display: contents;
}
table {
  width: 100%;
  border-collapse: collapse;
}
/deep/ .el-dialog__body {
  padding-top: 20px;
  padding-bottom: 20px;
}
table,
table tr td {
  border: 1px solid #ebeef5;
}

table tr td {
  padding: 15px 10px;
  // text-align: center;
}

.bgColor {
  background: #fafafa;
  color: #909399;
  // font-weight: bold;
}
/deep/ .el-table thead.is-group th {
  border-color: #ebeef5;
}
.flexEnd {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  margin-right: 5px;
  .end {
    display: flex;
    flex-direction: column;
    color: #33333385;
  }
}
.show-slected {
  font-size: 18px;
  i {
    font-style: normal;
    font-weight: 700;
    margin: 0 5px;
    color: #f40;
  }
}
/deep/ .table-column-hidden .el-checkbox__input {
  display: none;
}
/deep/ .table-column-hidden .cell > div {
  display: none;
}
</style>
