<template>
    <!-- 产品中心管理 -->
    <div class="app-container">
        <el-form
            size="small"
            :inline="true"
            ref="queryForm"
            :model="queryParams"
        >
            <el-form-item prop="name">
                <el-input
                    clearable
                    placeholder="请输入名称"
                    v-model="queryParams.name"
                    @keyup.enter.native="onHandleQuery"
                />
            </el-form-item>
            <el-form-item prop="status">
                <el-select
                    clearable
                    filterable
                    placeholder="选择类型"
                    v-model="queryParams.typeId"
                >
                    <el-option
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        v-for="item in dict.type.tb_product_type"
                    />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    size="mini"
                    @click="onHandleQuery"
                    icon="el-icon-search"
                >
                    查询
                </el-button>
                <el-button
                    size="mini"
                    icon="el-icon-refresh"
                    @click="onResetQuery"
                >
                    重置
                </el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    plain
                    size="mini"
                    type="primary"
                    icon="el-icon-plus"
                    @click="onHandleAdd"
                >
                    新增
                </el-button>
            </el-col>
            <!-- <el-col :span="1.5">
                <el-button
                    plain
                    size="mini"
                    type="primary"
                    icon="el-icon-upload"
                    @click="onHandleImport"
                >
                    导入
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    plain
                    size="mini"
                    type="primary"
                    icon="el-icon-download"
                    @click="onHandleExport"
                >
                    导出
                </el-button> -->
            </el-col>
        </el-row>

        <!-- 表格 -->
        <el-table :data="tableData" border>
            <el-table-column
                type="index"
                label="序号"
                width="50"
                align="center"
            />
            <el-table-column
                align="center"
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
                show-overflow-tooltip
                v-for="column in columns"
            >
                <template slot-scope="scope">
                    <template v-if="column.prop === 'linkImage'">
                        <ImagePreview
                            :width="50"
                            :height="50"
                            :src1="scope.row.linkImage"
                        />
                    </template>
                    <template v-else-if="column.prop === 'linkUrl'">
                        <a
                            target="_blank"
                            class="link-text"
                            :href="scope.row[column.prop]"
                        >
                            {{ scope.row[column.prop] }}
                        </a>
                    </template>
                    <template v-else>
                        {{ scope.row[column.prop] }}
                    </template>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button
                        plain
                        size="mini"
                        type="success"
                        style="padding: 4px 8px"
                        @click="onHandleEdit(scope.row)"
                    >
                        编辑
                    </el-button>
                    <el-button
                        plain
                        size="mini"
                        type="danger"
                        style="padding: 4px 8px"
                        @click="onHandleDelete(scope.row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getProductCenterListFun"
        />

        <!-- 新增和编辑表单 -->
        <DialogModel
            :dialogConfig="dialogConfig"
            @closeDialogOuter="handleCloseDialogOuter"
        >
            <template #outerContent>
                <AddAndEditForm
                    :formType="formType"
                    :detailsId="detailsId"
                    @closeDialog="closeDialog"
                />
            </template>
        </DialogModel>
    </div>
</template>

<script>
import {
    getProductCenterListAPI,
    deleteProductCenterAPI,
} from '@/api/dataManage/product-center'
import DialogModel from '@/components/DialogModel'
import AddAndEditForm from './components/addAndEditForm.vue'
export default {
    name: 'ProductCenter',
    dicts: ['tb_product_type'],
    components: {
        AddAndEditForm,
        DialogModel,
    },

    data() {
        return {
            total: 0,
            formType: 1, // 表单类型 1:新增 2:编辑
            detailsId: '', // 详情id
            tableData: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                name: undefined,
                typeId: undefined,
            },
            columns: [
                {
                    prop: 'name',
                    label: '名称',
                },
                {
                    prop: 'typeName',
                    label: '类型',
                },
                {
                    prop: 'linkImage',
                    label: '封面',
                },
                {
                    prop: 'linkUrl',
                    label: '链接',
                },
                {
                    prop: 'createUser',
                    label: '创建人',
                },
                {
                    prop: 'createTime',
                    label: '创建时间',
                },
            ],

            dialogConfig: {
                outerTitle: '新增',
                outerVisible: false,
                outerWidth: '70%',
                minHeight: '50vh',
                maxHeight: '90vh',
            },
        }
    },
    methods: {
        // 获取列表
        async getProductCenterListFun() {
            const res = await getProductCenterListAPI(this.queryParams)
            this.tableData = res?.rows
            this.total = res?.total
        },
        // 查询
        onHandleQuery() {
            this.getProductCenterListFun()
        },
        // 重置
        onResetQuery() {
            this.queryParams = {
                name: undefined,
                typeId: undefined,
                pageNum: 1,
                pageSize: 10,
            }
            this.getProductCenterListFun()
        },
        // 新增
        onHandleAdd() {
            this.formType = 1
            this.detailsId = null
            this.dialogConfig.outerTitle = '新增'
            this.dialogConfig.outerVisible = true
        },
        // 导入
        onHandleImport() {
            console.log('导入')
        },
        // 导出
        onHandleExport() {
            console.log('导出')
        },
        // 编辑
        onHandleEdit(row) {
            this.formType = 2
            this.detailsId = row.id
            this.dialogConfig.outerTitle = '编辑'
            this.dialogConfig.outerVisible = true
        },
        // 删除
        onHandleDelete(row) {
            console.log('删除', row)
            this.$confirm('确定删除该产品中心吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    const res = await deleteProductCenterAPI({ id: row.id })
                    if (res.code === 200) {
                        this.$modal.msgSuccess('删除成功')
                        this.onHandleQuery()
                    }
                })
                .catch(() => {
                    console.log('取消')
                })
        },
        // 关闭弹框
        handleCloseDialogOuter() {
            this.dialogConfig.outerVisible = false
        },
        // 关闭弹框 由子组件调用
        closeDialog(isSuccess) {
            this.dialogConfig.outerVisible = false
            if (isSuccess) {
                this.onHandleQuery()
            }
        },
    },
    created() {
        this.getProductCenterListFun()
    },
}
</script>

<style scoped>
.link-text {
    color: #409eff;
    text-decoration: none;
}
.link-text:hover {
    color: #409eff;
    text-decoration: underline;
}
</style>
