<template>
    <div>
        <div ref="head">
            <Row v-if="showCondition">
                <Col span="24">
                    <ConditionBox
                        ref="condition"
                        :config="myConfig"
                        @conditionAction="conditionAction"
                        :dictData="dictData"
                        :isPop="isPop"
                    ></ConditionBox>
                </Col>
            </Row>
        </div>
        <template v-if="!myConfig.multiSelectGrid">
            <Card :padding="0" :bordered="false" dis-hover>
                <!-- 表格覆写点开始 -->
                <vxe-grid
                    ref="table"
                    border="full"
                    :columns="RewriteColumns"
                    :data="RewriteData"
                    :height="tableHeight"
                    :max-height="tableMaxHeight"
                    :loading="loading"
                    :sort-config="{ remote: true, trigger: 'cell' }"
                    :seq-config="seqConfig"
                    @sort-change="RewriteTableOnSortChange"
                    @cell-dblclick="RewriteTableCellDBlclick"
                >
                    <template #loading>
                        <Spin size="large" style="display: inline-block"></Spin>
                    </template>
                    <!-- 组件原始slot透传 -->
                    <template v-for="(_, name) in $slots" #[name]="slotData">
                        <slot :name="name" v-bind="slotData || {}"></slot>
                    </template>
                    <!-- ============================ -->
                </vxe-grid>
                <!-- 表格覆写点结束 -->
            </Card>
            <div ref="page" name="page">
                <div v-if="myConfig.showPage" style="padding-top: 10px">
                    <Card
                        :bordered="false"
                        :padding="0"
                        :dis-hover="true"
                        style="border-radius: 0px"
                    >
                        <Row
                            type="flex"
                            justify="end"
                            style="padding-right: 10px"
                        >
                            <PageCustom
                                v-model="culPage"
                                :total="myConfig.pageConfig.total_results"
                                :size="myConfig.pageSize"
                                :current="myConfig.pageConfig.page_no"
                                :page-size="myConfig.pageConfig.page_size"
                                :page-size-opts="
                                    myConfig.pageConfig.pageSizeList
                                "
                                @on-page-size-change="changePageSize"
                                @on-change="changePage"
                                :show-total="myConfig.pageShowTotal"
                                :show-elevator="myConfig.pageShowElevator"
                                :show-sizer="myConfig.pageShowSizer"
                            ></PageCustom>
                        </Row>
                    </Card>
                </div>
            </div>
        </template>
        <template v-else>
            <Row type="flex" justify="center" align="middle">
                <Col :span="gridCol">
                    <Card :padding="0" bordered dis-hover>
                        <template #title>
                            <span v-text="myConfig.gridTitle"></span>
                        </template>
                        <Table
                            ref="table"
                            :row-class-name="myConfig.rowClassName"
                            :show-summary="myConfig.showSummary"
                            :summary-method="handleSummary"
                            :loading="loading"
                            :size="myConfig.tableSize"
                            :stripe="myConfig.showStripe"
                            :border="myConfig.showBorder"
                            :height="tableHeight"
                            :max-height="tableMaxHeight"
                            :show-header="myConfig.showHeader"
                            :columns="tableColumns"
                            :data="tempData"
                            @on-sort-change="sortChagne"
                            @on-current-change="onCurrentChange"
                            :highlight-row="myConfig.highLightRow"
                            @on-row-dblclick="dbclick"
                            @on-select="onSelect"
                            @on-select-cancel="onSelectCancel"
                            @on-selection-change="OnSelectionChange"
                            @on-row-click="click"
                            @on-column-width-resize="onColumnWidthResize"
                        >
                            <template
                                v-for="config in soltTableColumns"
                                v-slot:[config.key]="{ row, index }"
                                :key="'show_' + config.key"
                            >
                                <ShowText
                                    :label="formatValue(index, config, row)"
                                    :contentAlign="config.contentAlign"
                                    :class="config.cellClassName"
                                    :config="config"
                                    :rowIndex="index"
                                ></ShowText>
                            </template>
                        </Table>
                    </Card>
                    <div ref="page" name="page">
                        <div
                            v-if="myConfig.showPage"
                            ref="page"
                            style="padding-top: 10px"
                        >
                            <Card
                                :bordered="false"
                                :padding="0"
                                :dis-hover="true"
                                style="border-radius: 0px"
                            >
                                <Row
                                    type="flex"
                                    justify="end"
                                    style="padding-right: 10px"
                                    :gutter="0"
                                >
                                    <PageCustom
                                        v-model="culPage"
                                        :total="
                                            myConfig.pageConfig.total_results
                                        "
                                        :size="myConfig.pageSize"
                                        :current="myConfig.pageConfig.page_no"
                                        :page-size="
                                            myConfig.pageConfig.page_size
                                        "
                                        :page-size-opts="
                                            myConfig.pageConfig.pageSizeList
                                        "
                                        @on-page-size-change="changePageSize"
                                        @on-change="changePage"
                                        :show-total="myConfig.pageShowTotal"
                                        :show-elevator="
                                            myConfig.pageShowElevator
                                        "
                                        :show-sizer="myConfig.pageShowSizer"
                                    ></PageCustom>
                                </Row>
                            </Card>
                        </div>
                    </div>
                </Col>
                <Col span="2">
                    <Row
                        type="flex"
                        justify="center"
                        align="middle"
                        style="padding: 5px"
                    >
                        <Tooltip content="删除" placement="left">
                            <Button
                                type="primary"
                                size="small"
                                icon="ios-arrow-back"
                                :disabled="!rightActive"
                                @click="moveToLeft"
                            ></Button>
                        </Tooltip>
                    </Row>
                    <Row
                        type="flex"
                        justify="center"
                        align="middle"
                        style="padding: 5px"
                    >
                        <Tooltip content="添加" placement="right">
                            <Button
                                type="primary"
                                size="small"
                                icon="ios-arrow-forward"
                                :disabled="!leftActive"
                                @click="moveToRight"
                            ></Button>
                        </Tooltip>
                    </Row>
                </Col>
                <Col :span="multiGridCol" style="padding-bottom: 40px">
                    <Card :padding="0" bordered dis-hover>
                        <template #title>
                            <span v-text="myConfig.multiGridTitle"></span>
                        </template>
                        <Table
                            ref="multiSelectTable"
                            :row-class-name="myConfig.rowClassName"
                            :size="myConfig.tableSize"
                            :stripe="myConfig.showStripe"
                            :border="myConfig.showBorder"
                            :height="tableHeight"
                            :max-height="tableMaxHeight"
                            :show-header="myConfig.showHeader"
                            :columns="multiTableColumns"
                            :data="tempMultiSelectData"
                            :highlight-row="myConfig.highLightRow"
                            @on-selection-change="OnMultiSelectionChange"
                        >
                            <template
                                v-for="config in multiSoltTableColumns"
                                v-slot:[config.key]="{ row, index }"
                                :key="'mshow_' + config.key"
                            >
                                <ShowText
                                    :label="formatMulValue(index, config, row)"
                                    :contentAlign="config.contentAlign"
                                ></ShowText>
                            </template>
                        </Table>
                    </Card>
                </Col>
            </Row>
        </template>
    </div>
</template>
<script>
import simpleviewgrid from "../simpleviewgrid.vue";

export default {
    name: "BillListPanelTable",
    extends: simpleviewgrid,
    data() {
        return {};
    },
    computed: {
        /**
         * 表格列定义清洗
         */
        RewriteColumns() {
            return this.tableColumns.map((item) => {
                const columnsItemType = this.getColumnsItemType(item.key);
                return {
                    ...(item.title && {
                        title: item.title,
                    }),
                    ...(item.name && {
                        field: item.name,
                    }),
                    ...(item.width && {
                        width: item.width < 60 ? 60 : item.width,
                    }),
                    ...(item.minWidth && {
                        minWidth: item.minWidth < 60 ? 60 : item.minWidth,
                    }),
                    ...(item.align && {
                        align: item.align,
                    }),
                    ...(item.resizable && {
                        resizable: item.resizable,
                    }),
                    ...(item.fixed && {
                        fixed: item.fixed,
                    }),
                    ...(item.slots && {
                        slots: item.slots,
                    }),
                    sortable: true,
                    ...(columnsItemType && {
                        type: columnsItemType,
                        sortable: false,
                    }),
                    // showOverflow: "tooltip",
                    formatter: (params) => {
                        const { row, cellValue } = params;
                        const valueFormat = this.$Method.formatValue(
                            cellValue,
                            row,
                            item
                        );
                        return valueFormat;
                    },
                };
            });
        },
        /**
         * 表格数据
         */
        RewriteData() {
            return this.tempData.map((item) => {
                return {
                    ...item,
                };
            });
        },

        /**
         * 表格分页行号起始值
         */
        seqConfig() {
            return {
                startIndex:
                    (this.myConfig.pageConfig.page_no - 1) *
                    this.myConfig.pageConfig.page_size,
            };
        },
    },
    methods: {
        /**
         * 【覆写】获取多选数据事件
         */
        getSelection() {
            const selectDataList = this.$refs.table.getCheckboxRecords(true);
            return [...selectDataList];
        },
        /**
         * 表格列 type 类型转义
         */
        getColumnsItemType(key) {
            const columnsItemType = {
                selection: "checkbox",
                index: "seq",
            };
            return this.$utils.get(columnsItemType, key, null);
        },
        /**
         * 表格排序事件
         */
        RewriteTableOnSortChange(params) {
            const { order, field } = params;
            const orderType = order ? order : "normal";
            this.sortChagne({ order: orderType, key: field });
        },
        /**
         * 表格双击事件
         */
        RewriteTableCellDBlclick(params) {
            const { row } = params;
            this.dbclick(row);
        },
    },
    mounted() {
        // console.log("我继承覆写了22222", this.myConfig);
    },
};
</script>

<style lang="scss" scoped></style>
