<template>
    <div>
        <ListPage tableKey="businessbannerId" :column="listPageData.tableColumn" :tableApi="listPageData.tableApi"
            :isSelect="listPageData.isSelect" :scopeBtns="listPageData.scopeBtns" :searchBtns="listPageData.searchBtns"
            ref="userTableRef" />

        <el-dialog :title="title" v-model="open" width="500" :before-close="cancel">
            <div style="padding: 20px;">
                <FileUpload :fileType="['png', 'jpg', 'jpeg']" @update:modelValue="fileUpdata" :modelValue="files"/>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref, render } from 'vue';
import ListPage from '@/views/components/ListPage/index.vue';
import { add, update,list,delbanner } from "@/api/system/banner";

const { proxy } = getCurrentInstance();

const userTableRef = ref();
const uploadRef = ref([]);
const listPageData = reactive({
    tableColumn: [
         {
            label: '创建人',
            prop: 'createBy',
            type:'input',
            isSearch: true,
        },
        {
            label: '名称',
            prop: 'slideshowName',
        },
        {
            label: '创建时间',
            prop: 'createTime',

        },
        {
            label: '图片',
            prop: 'picture',
            type: 'img',
        },

    ],
    searchBtns: [
        {
            label: '新增',
            func: () => {
                console.log('新增')
                openDialog(null,"add");
            },
            key: 'add',
            hasPermi: ['banner:add'],
            icon: 'Plus',
            type: 'primary'
        }
    ],
    tableApi: list,//接口地址
    isSelect: false,//是否勾选
    scopeBtns: [
        {
            label: '编辑',
            type: 'primary',
            hasPermi: ['banner:edit'],
            key: 'edit',
            func: (row) => {
                console.log(row)
                openDialog(row,"update");

            }
        },
        {
            label: '删除',
            type: 'danger',
            hasPermi: ['banner:delete'],
            key: 'edit',
            func: (row) => {
                console.log(row)
                handleDelete([row.slideshowId])
            }
        }
    ]
})

const open = ref(false);
const curDialogType = ref('');
const files = ref('');
const curEditRow = ref(null);
const fileUpdata = (file) => {
    console.log(file);
    files.value = file;
}

const openDialog = async (row,dialogType) => {
    curDialogType.value = dialogType;

    try {
        if(row){
            files.value = row.picture;
            curEditRow.value = row;
        }

    } catch (error) {



    } finally {
        open.value = true;
    }
}

const handleDelete = (ids) => {
    console.log('ids', ids);

    proxy.$modal.confirm('是否确认删除编号为"' + ids + '"的数据项?').then(function () {
        return delbanner(ids)
    }).then(() => {
        userTableRef.value.resetForm();
    }).catch(() => { });
}
const submitForm = () => {
    console.log('submit', files.value);
    const parmas = JSON.parse(JSON.stringify(files.value))
    if(curDialogType.value == "add"){
      add({picture: parmas }).then(res => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess("编辑成功");
          cancel()
          return;
        }
        proxy.$modal.msgSuccess(res.msg);
      })
    }else{
      update({slideshowId: curEditRow.value.slideshowId, picture: parmas }).then(res => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess("编辑成功");
          cancel()
          return;
        }
        proxy.$modal.msgSuccess(res.msg);
      })
    }

}
const cancel = () => {
    userTableRef.value.resetForm();
    files.value ='';
    open.value = false;
}
</script>

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