<template>
  <div class="table-container">
<el-form :inline="true" :model="queryForm" class="demo-form-inline">
    <el-form-item label="状态">
    <el-select v-model="queryForm.status" style="width: 300px;" placeholder="请选择状态">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
     </el-option>
     </el-select>
  </el-form-item>
  <el-form-item label="">
    <el-input style="width: 300px;" v-model="queryForm.status_Inquiry" placeholder="请输入商品名称和号码"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="handleQuery">查询</el-button>
  </el-form-item>
</el-form>


    <vab-query-form>
      <vab-query-form-left-panel >
        
        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
        <el-button type="primary" @click="testALert">baseAlert</el-button>
        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
      </vab-query-form-left-panel>
  
    </vab-query-form>

    <el-table
      ref="tableSort"
      v-loading="listLoading"
      :data="list"
      :element-loading-text="elementLoadingText"
      :height="height"
      @selection-change="setSelectRows"
      @sort-change="tableSortChange"
    >
      <el-table-column align="center" width="80" label="商品图片">
        <template #default="{ row }">
          <el-image
            v-if="row['商品图片']"
            :src="getImageUrl(row['商品图片'])"
            :preview-src-list="[getImageUrl(row['商品图片'])]"
            fit="cover"
            style="width: 48px; height: 48px; border-radius: 4px;"
          />
          <span v-else style="color: #999;">—</span>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="120" label="商品名称" prop="商品名称" show-overflow-tooltip />
      <el-table-column align="center" width="100" label="商品编号" prop="商品编号" />
      <el-table-column align="center" width="90" label="售价" prop="售价" />
      <el-table-column align="center" width="90" label="原价" prop="原价" />
      <el-table-column align="center" width="70" label="库存" prop="库存" />
      <el-table-column align="center" width="70" label="销量" prop="销量" />
      <el-table-column align="center" width="100" label="价格描述" prop="价格描述" show-overflow-tooltip />
      <el-table-column align="center" width="70" label="状态" prop="状态" />
        <!-- <template #default="{ row }">
          <el-tag :type="row['状态'] === 1 ? 'success' : 'info'" size="small">
            {{ row['状态'] === 1 ? '上架' : '下架' }}
          </el-tag>
        </template>
      </el-table-column> -->
      <el-table-column align="center" width="60" label="推荐">
        <template #default="{ row }">
          {{ row['推荐'] === 1 ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="80" label="标签" prop="标签" show-overflow-tooltip />
      <el-table-column align="center" width="165" label="创建时间" prop="创建时间" />
      <el-table-column label="操作" fixed="right" width="150">
        <template #default="{ row }">
          <el-button type="text" @click="handleView(row, ids)">查看</el-button>
          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :background="background"
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <table-edit ref="edit" />
  </div>
</template>
    <script>
    import { deleteProduct, couponPackage, exportUserOperateAdmin } from '@/api/table'
    import TableEdit from './components/TableEdit'
    import VabPageHeader from '@/components/VabPageHeader'
    export default {
    name: 'ComprehensiveTable',
    components: {
    TableEdit,
    VabPageHeader,
    },
    filters: {
    statusFilter(status) {
    const statusMap = {
    published: 'success',
    draft: 'gray',
    deleted: 'danger',
    }
    return statusMap[status]
    },
    },
    data() {
    return {
    ids:true,
    pickerOptions: {
    shortcuts: [{
    text: '最近一周',
    onClick(picker) {
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    picker.$emit('pick', [start, end]);
    }
    }, 
    {
    text: '最近一个月',
    onClick(picker) {
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
    picker.$emit('pick', [start, end]);
    }
    }, 
    {
    text: '最近三个月',
    onClick(picker) {
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
    picker.$emit('pick', [start, end]);
    }
    }]
    },
     options: [
       {
          value: '1',
          label: '上架'
        },{
          value: '2',
          label: '下架'
        }],
        value: '',
    imgShow: true,
    list: [],
    imageList: [],
    listLoading: true,
    layout: 'total, sizes, prev, pager, next, jumper',
    total: 0,
    background: true,
    selectRows: '',
    elementLoadingText: '正在加载...',
    queryForm: {
    pageNo: 1,
    pageSize: 20,
    title: '',
    },
    timeOutID: null,
    }
    },
    computed: {
    height() {
    return this.$baseTableHeight()
    },
    },
    created() {
      this.fetchData()
    },
    beforeDestroy() {
      clearTimeout(this.timeOutID)
    },
    mounted() {},
    methods: {
    hdleDelete(row) {
      const id =  row['商品ID']
      if (id != null) {
        this.$baseConfirm('确定要删除当前商品吗？', null, async () => {
          const { msg } = await deleteProduct({ product_id: id })
          this.$baseMessage(msg, 'success')
          this.fetchData()
        })
      }
    },
    getImageUrl(path) {
      if (!path) return ''
      if (path.startsWith('http')) return path
      return `https://static.wagoo.pet/${path}`
    },
    tableSortChange() {
      const imageList = (this.$refs.tableSort && this.$refs.tableSort.tableData) || []
      this.imageList = imageList.map((item) => item['商品图片']).filter(Boolean)
    },
    setSelectRows(val) {
    this.selectRows = val
    },
    handleAdd() {
    this.$refs['edit'].showEdit()
    },
    handleView(row,ids){
    this.$refs['edit'].showEdit(row,ids)
    },
    handleEdit(row) {
    // console.log(row,'---')
    this.$refs['edit'].showEdit(row)
    },

    handleDelete() {
    exportUserOperateAdmin().then(
    response => {
    window.location.href = response.data.url;  
    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
    // const link = document.createElement('a')
    // link.href = url
    // link.download = '全文导入模板.xlsx' // 设置文件名
    // document.body.appendChild(link)
    // link.click() // 触发下载
    // document.body.removeChild(link) // 下载后移除元素
    }
    ).catch(error => {
    console.error('下载失败', error)
    this.loading = false // 停止加载，隐藏加载状态
    })
    },
    handleSizeChange(val) {
    this.queryForm.pageSize = val
    this.fetchData()
    },
    handleCurrentChange(val) {
    this.queryForm.pageNo = val
    this.fetchData()
    },
    onSubmit(){
      console.log(111)

    },
    handleQuery() {
    this.queryForm.pageNo = 1
    this.fetchData()
    },
    async fetchData() {
      this.listLoading = true
      try {
        const res = await couponPackage(this.queryForm)
        const data = res.data || []
        const total = res.total != null ? res.total : data.length
        this.list = Array.isArray(data) ? data : []
        this.total = total
      } catch (e) {
        this.list = []
        this.total = 0
      }
      this.timeOutID = setTimeout(() => {
        this.listLoading = false
      }, 300)
    },
    testMessage() {
    this.$baseMessage('test1', 'success')
    },
    testALert() {
    this.$baseAlert('11')
    this.$baseAlert('11', '自定义标题', () => {
          /* 可以写回调; */
    })
    this.$baseAlert('11', null, () => {
          /* 可以写回调; */
    })
    },
    testConfirm() {
    this.$baseConfirm(
    '你确定要执行该操作?',
    null,
    () => {
            /* 可以写回调; */
    },
    () => {
            /* 可以写回调; */
    }
    )
    },
    testNotify() {
    this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
    },
    },
    }
    </script>
