<template>
    <div class="detailsTable">
        <!-- :row-style="rowStyle" -->
        <el-table :data="tableData" :border="true" ref="tableRef" :height="height ? height : 340">
            <template v-for="item in columns" :key="item.prop">
                <el-table-column
                    :prop="item.prop"
                    :fixed="item.fixed"
                    :align="item.align ? item.align : 'center'"
                    :label="item.label"
                    :width="item.width ? item.width : 'auto'"
                    v-show="item.show"
                    :sortable="item.sortable"
                    :showOverflowTooltip="!item.formType"
                >
                    <template #header v-if="item.isHeaderIcon">
                        <span class="iconfont icon-bianji1 iconfont-mg" style="font-size: 12px">
                            {{ item.label }}
                        </span>
                        <span
                            style="display: inline-block; margin-left: 4px; line-height: 20px; color: #f56c6c"
                            v-if="item.required"
                            >*</span
                        >
                        <el-tooltip effect="dark" :content="item.tooltip" placement="top" v-if="item.tooltip">
                            <el-icon style="cursor: pointer"><QuestionFilled /></el-icon>
                        </el-tooltip>
                    </template>
                    <template #default="scope" v-if="item.formType === 'inputNumber'">
                        <el-input-number
                            :min="0"
                            :max="9999"
                            :controls="true"
                            style="width: 125px"
                            v-model="scope.row[item.prop]"
                            :disabled="tableData[scope.$index].disabled"
                            :placeholder="item.placeholder"
                            :maxlength="item.maxLength"
                            step-strictly
                            :step="1"
                            controls-position="right"
                            @keyup.enter="handleEnterInput(item, scope.$index)"
                        ></el-input-number>
                    </template>

                    <template #default="scope" v-if="item.formType === 'input'">
                        <el-input
                            :style="item.width ? item.width : 'width:200px'"
                            v-model="scope.row[item.prop]"
                            :disabled="tableData[scope.$index].disabled"
                            :placeholder="item.placeholder"
                            :maxlength="item.maxLength"
                            @keyup.enter="handleEnterInput(item, scope.$index)"
                            ref="inputRef"
                        ></el-input>
                    </template>

                    <template #default="scope" v-if="item.formType === 'selectRemote'">
                        <el-select
                            :style="item.width ? item.width : 'width:200px'"
                            v-model="scope.row[item.prop]"
                            :placeholder="item.placeholder"
                            clearable
                            remote
                            reserve-keyword
                            filterable
                            class="m-2 select"
                            remote-show-suffix
                            :remote-method="
                                (query:any) => {
                                  remoteMethod(
                                    query,
                                    item.prop,
                                    scope.$index
                                  );
                                }
                              "
                            :disabled="item.disabled"
                        >
                            <el-option
                                :label="option.label"
                                :value="option.value"
                                v-for="option in item.options"
                                :key="option.label"
                                @click="handleRemoteItemClick(option, scope.$index)"
                            />
                        </el-select>
                    </template>

                    <template v-if="item.formType === 'img'" #default="scope">
                        <UploadImg v-model:image-url="scope.row[item.prop]" height="104px" width="104px"> </UploadImg>
                    </template>
                    <template v-if="item.formType === 'imgs'" #default="scope">
                        <div style="" class="imgsBox">
                            <UploadImgs v-model:fileList="scope.row[item.prop]" height="80px" width="80px" />
                        </div>
                    </template>
                    <template #default="scope" v-if="item.formType === 'select'">
                        <el-select v-model="scope.row[item.prop]" :placeholder="item.placeholder" style="width: 200px">
                            <el-option
                                v-for="option in item.options"
                                :key="option.value"
                                :label="option.label"
                                :value="option.value"
                                @click="handleOptionsItemClick(item, option.value, scope.$index)"
                            />
                        </el-select>
                    </template>
                    <!-- #default="scope" -->
                    <template v-if="item.formType === 'up'" #default="scope">
                        <slot name="up" v-bind="scope"></slot>
                        <!-- <el-upload
                            action="#"
                            class="upload"
                            :limit="1"
                            :multiple="true"
                            :show-file-list="true"
                            :http-request="uploadExcel"
                            :before-upload="beforeExcelUpload"
                            :on-exceed="handleExceed"
                            :on-success="excelUploadSuccess"
                            :on-error="excelUploadError"
                            :accept="filesType!.join(',')"
                        >
                            <el-button type="primary" size="small" @click="handleBtnClick(scope)">选择文件11</el-button>
                        </el-upload> -->
                    </template>
                    <!-- 最后一列的按钮 这是一个具名插槽 -->
                    <template #default="scope" v-if="item.prop === 'operation'">
                        <slot name="operation" v-bind="scope"></slot>
                    </template>
                </el-table-column>
            </template>
        </el-table>
    </div>
</template>

<script lang="ts" setup name="FormTable">
import UploadImg from "@/components/Upload/UploadImg.vue";
import UploadImgs from "@/components/Upload/UploadImgs.vue";

// import { Plus } from "@element-plus/icons-vue";
import { ElTable, ElTableColumn } from "element-plus";
import { QuestionFilled } from "@element-plus/icons-vue";
const props = defineProps<{
    columns: any;
    // rowStyle?: (params: any) => void;
    tableData?: any;
    height?: number;
    getRemoteData?: (params: any) => void;
    handleImgClick?: (params: any) => void;
    handleKeyupEnterInputValue?: (params: any) => void;
    handleRemote?: (params: any) => void;
    handleRemoteClick?: (params: any) => void;
    handleSelectItemClick?: (params: any) => void;
    loading?: any;
}>();

console.log(props, "=========props===========");
const emits = defineEmits<{
    (e: "handleImgClick", params: any): void;
    (e: "handleKeyupEnterInputValue", params: any): void;
    (e: "handleRemote", params: any): void;
    (e: "handleRemoteClick", params: any): void;
    (e: "handleSelectItemClick", params: any): void;
}>();
//表格实例
const tableRef = ref<any>(null);
const inputRef = ref<any>(null);
const selectRemote1Ref = ref<any>(null);

const handleOptionsItemClick = (item: any, value: any, index: number) => {
    emits("handleSelectItemClick", {
        item,
        value,
        index
    });
};

const handleRemoteItemClick = (item: any, index: number) => {
    emits("handleRemoteClick", { item, index });
};
//远程搜索
const remoteMethod = (query: any, prop: any, index: number) => {
    if (!query) {
        return;
    }
    emits("handleRemote", { query, prop, index });
};
const handleEnterInput = (item: any, index: number) => {
    emits("handleKeyupEnterInputValue", {
        item,
        index
    });
};

// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
defineExpose({
    element: tableRef,
    inputElement: inputRef,
    selectRemoteElement: selectRemote1Ref
});
</script>

<style lang="scss" scoped>
::v-deep(.table-box .el-table .el-table__header .el-table__cell > .cell) {
    .cell {
        display: flex !important;
    }
}
::v-deep(.el-table__row td) {
    div {
        white-space: wrap;
    }
}
::v-deep(.el-table__body-wrapper .el-table__body) {
    min-height: 51px !important;
    max-height: 90% !important;
    overflow-y: auto !important;
}
::v-deep(.el-upload-list) {
    width: 200px;
    margin: 0;
}
::v-deep(.el-upload-list__item) {
    margin: 0;
}
.iconBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    cursor: pointer;
    border: 1px solid #66666666;
    border-radius: 10px;
}
.imgsBox {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    // flex-direction: row;
}
</style>
