<template>
    <div ref="commonTable">
        <!-- 搜索栏 -->
        <el-form v-if="formList.length > 0" :inline="true" :model="searchDataClone" label-width="130px"
            ref="searchDataClone" id="commonTable" class="device-wrapper">
            <el-form-item v-for="f in formList" :key="f.prop" :label="f.label" :prop="f.prop">
                    <template v-if="f.type === 'input'">
                        <el-input clearable v-model.trim="searchDataClone[f.prop]" size="small"
                            :placeholder="'请输入' + f.label"></el-input>
                    </template>
                    <template v-else-if="f.type === 'company'">
                        <el-select size="small" clearable v-model="searchDataClone[f.prop]" :placeholder="'请输入' + f.label"
                            filterable>
                            <el-option label="不限" value v-if="f.selectAuto"></el-option>
                            <el-option v-for="(s, i) in InsCompanyList" :key="i" :label="s.name" :value="s.id"></el-option>
                        </el-select>
                    </template>
                    <template v-else-if="f.type === 'companyCheck'">
                        <el-select class="selectLength" multiple collapse-tags size="small"
                            v-model="searchDataClone[f.prop]" :placeholder="'请输入' + f.label">
                            <el-option label="不限" value v-if="f.selectAuto"></el-option>
                            <el-option v-for="(s, i) in InsCompanyList" :key="i" :label="s.name" :value="s.id"></el-option>
                        </el-select>
                    </template>
                    <template v-else-if="f.type === 'select'">
                        <el-select size="small" clearable filterable v-model="searchDataClone[f.prop]"
                            :placeholder="'请输入' + f.label">
                            <el-option label="不限" value v-if="f.selectAuto"></el-option>
                            <el-option v-for="(s, i) in f.options" :key="i" :label="s.label || s.dictTag || s.name"
                                :value="s.value || s.dictValue || s.id"></el-option>
                        </el-select>
                    </template>
                    <template v-else-if="f.type === 'selectDept'">
                        <el-select size="small" v-model="searchDataClone[f.prop]" filterable clearable
                            :placeholder="'请选择' + f.label" @change="selectChange($event, f.prop)">
                            <el-option v-for="(option, index) in f.options" :key="index"
                                :label="f.optionsIabel ? option[f.optionsIabel] : option.name"
                                :value="f.optionsValue ? option[f.optionsValue] : option.id"></el-option>
                        </el-select>
                    </template>
                    <template v-else-if="f.type === 'selectCompany'">
                        <el-select size="small" v-model="searchDataClone[f.prop]" filterable clearable
                            :placeholder="'请选择' + f.label" @change="selectCompanyChange($event, f.prop)">
                            <el-option v-for="(option, index) in f.options" :key="index"
                                :label="f.optionsIabel ? option[f.optionsIabel] : option.name"
                                :value="f.optionsValue ? option[f.optionsValue] : option.id"></el-option>
                        </el-select>
                    </template>
                    <template v-else-if="f.type === 'datePicker'">
                        <!-- 日期区间 -->
                        <el-date-picker style="width: 215px" type="daterange" size="small" v-model="searchDataClone[f.prop]"
                            align="right" unlink-panels range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间"
                            value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']"
                            :clearable="true"></el-date-picker>
                    </template>
                    <template v-else-if="f.type === 'date'">
                        <!-- 一天 -->
                        <el-date-picker type="date" size="small" v-model="searchDataClone[f.prop]" placeholder="选择日期"
                            value-format="yyyy-MM-dd"></el-date-picker>
                    </template>
                    <!-- 年份 -->
                    <template v-else-if="f.type === 'year'">
                        <el-date-picker type="year" size="small" v-model="searchDataClone[f.prop]" placeholder="选择年">
                        </el-date-picker>
                    </template>
                    <template v-else-if="f.type === 'radio'">
                        <el-radio-group v-model="searchDataClone[f.prop]" :placeholder="'请输入' + f.label">
                            <el-radio v-for="(r, i) in f.radioList" :key="i" :label="r.value">{{ r.label }}</el-radio>
                        </el-radio-group>
                    </template>
                    <template v-else-if="f.type === 'slot'">
                        <slot show-overflow-tooltip :name="f.name"></slot>
                    </template>
            </el-form-item>

            <el-form-item>
                <el-button style="margin-left: 30px" size="small" @click="resetForm('searchDataClone')">重置</el-button>
                <el-button type="primary" size="small" @click="handleSearchList()">查询</el-button>
                <template v-if="btnGroup.length > 0">
                    <span v-for="(val, idx) in btnGroup" :key="idx" style="margin-left: 10px">
                        <slot v-if="val.slot" show-overflow-tooltip :name="val.name"></slot>
                        <el-button v-else :disabled="false || (val.disabled && val.disabled())"
                            :type="val.type || 'primary'" size="small" @click="val.click()">{{ val.name }}</el-button>
                    </span>
                </template>
            </el-form-item>
            <!-- <el-form-item v-if="btnGroup.length>0" >
              <el-button v-for="(val, idx) in btnGroup" :key="idx" :type="val.type || 'primary'" size="small" @click="tabFun(val)">{{ val.name }}</el-button>
        </el-form-item> -->
        </el-form>

        <slot v-if="custom" show-overflow-tooltip></slot>

        <el-table ref="table" :show-summary="tableConfig.showSummary || false" :data="data" border size="small"
            style="width: 100%" :height="tableConfig.tableHeight || tableHeight" v-loading="tableConfig.loading"
            element-loading-text="数据加载中" element-loading-spinner="el-icon-loading" @selection-change="handleSelectionChange"
            @select-all="selectAll" :row-style="{ height: '55px' }" :cell-style="{ padding: 'padding: 4px 0' }"
            @current-change="handleCurrentTableChange"  :cell-class-name="rowClass">
            <el-table-column type="selection" :width="tableConfig.selectionWidth || '50'" v-if="tableConfig.isCheckBox"
                align="center" />
            <el-table-column type="index" :width="tableConfig.indexWidth || '50'" v-if="tableConfig.isShowIndex"
                align="center" label="序号" />
            <template v-for="(item, index) in tableConfig.columns">
                <!-- 日期内容 -->
                <el-table-column v-if="item.type === 'date'" :align="'center'" :fixed="item.fixed"
                    :width="item.width || 150" show-overflow-tooltip :label="item.label" :key="item.prop">
                    <template  #default="scope">
                        <div>{{ scope.row[item.prop] | formateDate }}</div>
                    </template>
                </el-table-column>
                <!-- 字典项 -->
                <el-table-column v-if="item.type === 'dic'" :align="'center'" :width="item.width || ''" :fixed="item.fixed"
                    show-overflow-tooltip :label="item.label" :key="item.prop" :prop="item.prop">
                    <template  #default="scope">
                        <span>{{
                            selectDictLabel(dictData[item.dic], scope.row[item.prop])
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="item.type === 'statMap'" :align="'center'" :width="item.width || ''"
                    :fixed="item.fixed" show-overflow-tooltip :label="item.label" :key="item.prop" :prop="item.prop">
                    <template  #default="scope">
                        <span>
                            {{ statMaps(item.options)[scope.row[item.prop]] }}</span>
                    </template>
                </el-table-column>
                <!-- 自定义内容 -->
                <el-table-column v-if="item.type === 'slot'" :align="'center'" show-overflow-tooltip :name="item.name"
                    :label="item.label" :key="item.prop" :prop="item.prop" :width="item.width || ''">
                    <template  #default="scope">
                        <slot show-overflow-tooltip v-bind="scope" :name="item.name"></slot>
                    </template>
                </el-table-column>
                <!-- 常规文本内容 -->
                <el-table-column v-if="item.type === 'text'" :align="'center'" :width="item.width || ''" :fixed="item.fixed"
                    :label="item.label" :key="item.prop" :prop="item.prop"></el-table-column>
            </template>
            <!-- <slot name="operate" :row="scope.row"></slot> -->
            <!-- 自定义操作栏 -->
            <el-table-column v-if="tableConfig.operateShow" label="操作" align="center"
                :min-width="tableConfig.operationWidth || '100'" fixed="right">
                <template  #default="scope">
                    <slot name="operate" :row="scope.row"></slot>
                </template>
            </el-table-column>
            <!-- 数组形式的操作栏，用于普通按钮 -->
            <!-- // optBtns:[
              //   {
              //     type:'primary',
              //     label:'修改',
              //     hide:(row) => {
              //      return row.importStatus == 1?true:false
              //     },
              //     click:(row, index) => {return this.modifyFun(row)},
              //   }
              // ] -->
            <el-table-column v-if="tableConfig.optBtns" :min-width="tableConfig.operationWidth || '100'" label="操作"
                fixed="right" header-align="center" align="center">
                <template  #default="scope">
                    <span v-for="(btn, index) in tableConfig.optBtns" :key="index">
                        <!-- <el-button style="margin:0 10px" v-if="!btn.hide || (btn.hide && btn.hide(scope.row))" v-permission="btn.perm"
                @click="btn.click(scope.row, index)" :type="btn.type || 'primary'" :icon="btn.icon" size="small">{{
                  btn.label
                }} </el-button> -->
                        <kt-button style="margin: 0 10px" v-if="!btn.hide || (btn.hide && btn.hide(scope.row))"
                            :icon="btn.icon" :label="btn.label" :type="btn.type || 'primary'" size="medium" :perms="btn.perm"
                            @click="btn.click(scope.row, index)" />
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block" ref="bottomFixed">
            <el-pagination v-if="tableConfig.isPaginationShow && pagination.totalSize" style="margin-top: 10px"
                :page-size="pagination.pageSize" :current-page.sync="pagination.pageNum" :total="pagination.totalSize"
                layout="total, sizes,prev, pager, next,jumper" :page-sizes="[10, 20, 50, 100]"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>
  
<script type="text/ecmascript-6">
import KtButton from "./button.vue";
export default {
    components: {
        KtButton,
    },
    props: {
        custom: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
        formList: {
            type: Array,
            default: () => {
                return [];
            },
        },
        btnGroup: {
            type: Array,
            default: () => {
                return [];
            },
        },
        tableConfig: {
            type: Object,
            default: () => {
                return {};
            },
        },
        // searchDataClone: {
        //   type: Object,
        //   default: () => {
        //     return {};
        //   }
        // },
        pagination: {
            type: Object,
            default: () => ({
                pageNum: 1,
                pageSize: 20,
                totalSize: 0,
            }),
        },
        rowClass: {
            type: Function,
            default: () => "",
        },
        data: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            tableHeight: 0,
            InsCompanyList: [],
            searchDataClone: {},
        };
    },
    created() {
        if (
            this.formList.length > 0 &&
            this.formList.find(
                (val) => val.type == "company" || val.type == "companyCheck"
            )
        ) {
            this.companyFun();
        }
    },
    mounted() {
        setTimeout(() => {
            var divHg = 0;
            if (document.getElementById("commonTable") != null) {
                divHg = document.getElementById("commonTable").clientHeight;
            } else {
                divHg = 100;
            }
            let bottomTop = this.$refs.bottomFixed.offsetTop;
            //160??待调整
            this.tableHeight = window.innerHeight - divHg - 210 + "px";
        }, 10);
    },
    filters: {
        formateDate(val) {
            return formatDateTime(val);
        },
    },

    methods: {
        selectChange(id, filed) {
            switch (filed) {
                case "provinceId":
                    break;
                case "cityId":
                    break;
                case "countyId":
                    break;

                default:
                    break;
            }
            if (id) {
                this.$emit("areaSelectChange", { id, filed });
            }
        },
        selectCompanyChange(id, filed) {
            if (id) {
                this.$emit("companySelectChange", { id, filed });
            }
        },
        formatDateTime(date) {
            let d = new Date(date),
                month = "" + (d.getMonth() + 1),
                day = "" + d.getDate(),
                year = d.getFullYear();
            if (month.length < 2) month = "0" + month;
            if (day.length < 2) day = "0" + day;
            return [year, month, day].join("-");
        },
        companyFun() {
            this.$api.cost.gainTopList({ type: 1 }).then((res) => {
                if (res.data) {
                    this.InsCompanyList = res.data;
                }
            });
        },
        statMaps(list) {
            if (!list) return;
            let obj = {};
            list.forEach((item) => {
                obj[item.value || item.id || item.dictValue] = item.label || item.value || item.dictTag;
            });
            return obj;
        },

        selectDictLabel(dicts, value) {
            if (value === undefined) {
                return "";
            }
            if (dicts === undefined) {
                return "";
            }
            const actions = [];
            Object.keys(dicts).some((key) => {
                if (dicts[key].value === `${value}`) {
                    actions.push(dicts[key].label);
                    return true;
                }
            });
            if (actions.length === 0) {
                actions.push(value);
            }
            return actions.join("");
        },
        // 表格多选
        handleSelectionChange(currentRow) {
            this.$emit("selectionChange", currentRow, this.$refs.table);
        },
        selectAll(currentRow) {
            this.$emit("selectAll", currentRow, this.$refs.table);
        },
        handleSizeChange(value) {
            this.pagination.pageSize = value;
            this.pagination.pageNum = 1;
            this.$emit("getList", { ...this.pagination, ...this.searchDataClone });
        },
        handleCurrentChange(val) {
            this.pagination.pageNum = val;
            this.$emit("getList", { ...this.pagination, ...this.searchDataClone });
        },
        handleCurrentTableChange(val) {
            this.$emit("handleCurrentTableChange", val);
        },
        // 搜索
        handleSearchList() {
            // 更新父组件searchData
            this.pagination.pageNum = 1;
            this.pagination.pageSize = 10; //查询添加默认每页20条
            this.$emit("handleSearchList", this.searchDataClone);
        },
        // 重置
        resetForm(formName) {
            this.$emit("handleResetForm");
            this.searchDataClone = {};
            console.log(this.searchDataClone);
            // this.$refs[formName].resetFields();
            this.handleSearchList();
        },
        handleOpt(row, index) {
            this.$emit("handleOpt", row, index);
        },
    },
};
</script>
<style scoped="scoped">
.selectLength /deep/ .el-select__tags-text {
    display: inline-block;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-wrapper /deep/ .el-form-item {
    margin-bottom: 12px;
}
</style>
  