<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> -->
            <el-upload class="filter-item" :action="action" :headers="headers" accept=".xlsx" :on-remove="handleRemove"
                :on-success="handleSuccess">
                <el-button icon="download" type="primary">导入</el-button>
            </el-upload>
        </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" prop="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="scope.row.picUrl" style="width: 40px; height: 40px" />
                </template>
            </el-table-column>

            <el-table-column align="center" prop="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-button type="primary" link @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>
    <shelves ref="shelvesRef" @initShelves="getList" />
    <edit ref="editRef" :editId="editId" @initShelves="getList" />
    <!-- 查看详情 -->
    <html-details :html-data="htmlData" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import { listGoods, deleteGoods } from '@/services/api/commodityManage/list'
import htmlDetails from '@/components/htmlDetails.vue'
import LitemallPage from '@/components/pagination/litemallPage.vue'
import shelves from './shelves.vue'
import edit from './edit.vue'

let list = ref([])
let total = ref(0)
let listLoading = ref(true)
let shelvesRef = ref()
let editRef = ref()
let editId = ref()
let listQuery = ref({
    page: 1,
    limit: 10,
    goodsSn: undefined,
    name: undefined,
    sort: 'add_time',
    order: 'desc',
} as any)
let action = ref(import.meta.env.VITE_APP_BASE_URL + '/goods/upload')
let headers = ref({ Authorization: sessionStorage.getItem('token') })
let downloadLoading = ref(false)
let htmlData = ref({
    htmlVisible: false,
    title: '商品详情',
    details: '',
})
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 = () => {
    shelvesRef.value.shelvesDrawer = true
}
let handleUpdate = (row: any) => {
    editRef.value.init(row.id)
    editRef.value.editDrawer = true
}
let showDetail = (detail: any) => {
    htmlData.value.htmlVisible = true
    htmlData.value.details = detail
}
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 handleRemove = (uploadFile: any, uploadFiles: any) => {
    console.log(uploadFile, uploadFiles)
}

// 导入文件
let handleSuccess = (res: any, uploadFile: any, uploadFiles: any) => {
    if (res.code === 200) {
        ElMessage({ type: 'success', message: '导入成功' })
    } else {
        ElMessage({ type: 'error', message: res.msg })
    }
}

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 lang="scss" scoped>
.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%;
}

:deep(.el-upload-list--text) {
    display: none;
}
</style>
