<template>
    <div class="app-container">
        <!-- 查询和其他操作 -->
        <div class="filter-container">
            <el-input v-model="listQuery.goodsId" clearable class="filter-item" style="width: 160px"
                placeholder="请输入商品ID" />
            <el-input v-model="listQuery.goodsSn" clearable class="filter-item" style="width: 160px"
                placeholder="请输入商品编号" />
            <el-input v-model="listQuery.name" clearable class="filter-item" style="width: 160px"
                placeholder="请输入商品名称" />
            <el-button class="filter-item" type="primary" icon="search" @click="handleFilter">查找</el-button>
            <el-button class="filter-item" type="primary" icon="edit" @click="handleCreate">添加</el-button>
            <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="download"
                @click="handleDownload">导出</el-button>
        </div>

        <!-- 查询结果 -->
        <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
            <el-table-column type="expand">
                <template #default="props">
                    <el-form label-position="left" style="padding-left: 3%;">
                        <el-form-item label="商品编号">
                            <span>{{ props.row.goodsSn }}</span>
                        </el-form-item>
                        <el-form-item label="宣传画廊">
                            <el-image v-for="pic in props.row.gallery" :key="pic" :src="pic" class="gallery"
                                :preview-src-list="props.row.gallery" style="width: 40px; height: 40px" />
                        </el-form-item>
                        <el-form-item label="商品介绍">
                            <span>{{ props.row.brief }}</span>
                        </el-form-item>
                        <el-form-item label="商品单位">
                            <span>{{ props.row.unit }}</span>
                        </el-form-item>
                        <el-form-item label="关键字">
                            <span>{{ props.row.keywords }}</span>
                        </el-form-item>
                        <el-form-item label="类目ID">
                            <span>{{ props.row.categoryId }}</span>
                        </el-form-item>
                        <el-form-item label="品牌商ID">
                            <span>{{ props.row.brandId }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>

            <el-table-column align="center" label="商品ID" prop="id" />

            <el-table-column align="center" min-width="100" label="名称" prop="name" />

            <el-table-column align="center" property="iconUrl" label="图片">
                <template #default="scope">
                    <el-image v-if="scope.row.picUrl.split('http').length > 1" :src="scope.row.picUrl"
                        style="width: 40px; height: 40px"></el-image>
                    <img v-else :src="'http://192.168.0.23' + scope.row.picUrl" style="width: 40px; height: 40px" />

                    <!-- <el-image :src="thumbnail(scope.row.picUrl)"
                        :preview-src-list="toPreview(scope.row, scope.row.picUrl)" style="width: 40px; height: 40px" /> -->
                </template>
            </el-table-column>

            <el-table-column align="center" property="iconUrl" label="分享图">
                <template #default="scope">
                    <img :src="scope.row.shareUrl" width="40" />
                </template>
            </el-table-column>

            <el-table-column align="center" label="详情" prop="detail">
                <template #default="scope">
                    <el-dialog v-model="detailDialogVisible" title="商品详情">
                        <div class="goods-detail-box" v-html="goodsDetail" />
                    </el-dialog>
                    <el-button type="primary" size="small" @click="showDetail(scope.row.detail)">查看</el-button>
                </template>
            </el-table-column>

            <el-table-column align="center" label="市场售价" prop="counterPrice" />

            <el-table-column align="center" label="当前价格" prop="retailPrice" />

            <el-table-column align="center" label="是否新品" prop="isNew">
                <template #default="scope">
                    <el-tag :type="scope.row.isNew ? 'success' : 'error'">{{
                            scope.row.isNew ? "新品" : "非新品"
                    }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column align="center" label="是否热品" prop="isHot">
                <template #default="scope">
                    <el-tag :type="scope.row.isHot ? 'success' : 'error'">{{
                            scope.row.isHot ? "热品" : "非热品"
                    }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column align="center" label="是否在售" prop="isOnSale">
                <template #default="scope">
                    <el-tag :type="scope.row.isOnSale ? 'success' : 'error'">{{
                            scope.row.isOnSale ? "在售" : "未售"
                    }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button type="primary" link @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <litemall-page :page-data="listQuery" :total="total" @size-change="sizeChange"
            @current-change="currentChange" />
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessageBox, ElNotification } from "element-plus";
import { listGoods, deleteGoods } from "@/services/api/commodityManage/list";
// import { thumbnail, toPreview } from "@/utils/index";
import router from '@/router';
import LitemallPage from "@/components/pagination/litemallPage.vue";

let list = ref([]);
let total = ref(0);
let listLoading = ref(true);
let listQuery = ref({
    page: 1,
    limit: 10,
    goodsSn: undefined,
    name: undefined,
    sort: "add_time",
    order: "desc",
} as any);
let goodsDetail = ref("");
let detailDialogVisible = ref(false);
let downloadLoading = ref(false);

let getList = () => {
    listLoading.value = true;
    listGoods(listQuery.value)
        .then((res: any) => {
            list.value = res.data.list;
            total.value = res.data.total;
            listLoading.value = false;
        })
        .catch(() => {
            list.value = [];
            total.value = 0;
            listLoading.value = false;
        });
};
getList()

let sizeChange = (val: number) => {
    listQuery.value.limit = val
    getList()
}

let currentChange = (val: number) => {
    listQuery.value.page = val
    getList()
}

let handleFilter = () => {
    listQuery.value.page = 1;
    getList();
};
let handleCreate = () => {
    console.log('跳转');

    router.push({ path: "/commodity/shelves" });
};
let handleUpdate = (row: any) => {
    router.push({ path: "/commodity/edit", query: { id: row.id } });
};
let showDetail = (detail: any) => {
    goodsDetail = detail;
    detailDialogVisible.value = true;
};
let handleDelete = (row: any) => {
    ElMessageBox.confirm("确定删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
    })
        .then(() => {
            deleteGoods(row)
                .then((res: any) => {
                    ElNotification({
                        type: "success",
                        title: "成功",
                        message: "删除成功",
                    });
                    getList();
                })
                .catch((res: any) => {
                    ElNotification({
                        type: "error",
                        title: "失败",
                        message: res.data.errmsg,
                    });
                });
        })
        .catch(() => { });
};
let handleDownload = () => {
    // downloadLoading.value = true;
    // import("@/vendor/Export2Excel").then((excel) => {
    //   const tHeader = [
    //     "商品ID",
    //     "商品编号",
    //     "名称",
    //     "专柜价格",
    //     "当前价格",
    //     "是否新品",
    //     "是否热品",
    //     "是否在售",
    //     "首页主图",
    //     "宣传图片列表",
    //     "商品介绍",
    //     "详细介绍",
    //     "商品图片",
    //     "商品单位",
    //     "关键字",
    //     "类目ID",
    //     "品牌商ID",
    //   ];
    //   const filterVal = [
    //     "id",
    //     "goodsSn",
    //     "name",
    //     "counterPrice",
    //     "retailPrice",
    //     "isNew",
    //     "isHot",
    //     "isOnSale",
    //     "listPicUrl",
    //     "gallery",
    //     "brief",
    //     "detail",
    //     "picUrl",
    //     "goodsUnit",
    //     "keywords",
    //     "categoryId",
    //     "brandId",
    //   ];
    //   excel.export_json_to_excel2(tHeader, list, filterVal, "商品信息");
    downloadLoading.value = false;
    // });
};
</script>

<style>
.table-expand {
    font-size: 0;
    padding-left: 60px;
}

.table-expand label {
    width: 100px;
    color: #99a9bf;
}

.table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
}

.gallery {
    width: 80px;
    margin-right: 10px;
}

.goods-detail-box img {
    width: 100%;
}
</style>