<template>
  <app-card>
    <app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange">
      <template #header-aside>
        <el-button type="primary">新增</el-button>
      </template>
      <template v-slot:table-x="{ row }">
        <el-button type="text">编辑</el-button>
        <el-button type="text" @click="onRemove(row)">删除</el-button>
      </template>
    </app-list>
  </app-card>
</template>

<script>
// 组件
import AppList from '@/components/base/AppList.vue'
import AppCard from '@/components/base/AppCard.vue'
// 接口
// import { getGoodsList } from '../api'

export default {
  components: { AppCard, AppList },
  data() {
    return {}
  },
  computed: {
    // 列表配置
    tableOptions() {
      return {
        // remote: {
        //   httpRequest: getGoodsList,
        //   params: { shop_id: this.shopId, spu_id: '', spu_name: '', group_id: '', price_min: '', price_max: '' },
        //   beforeRequest: this.beforeRequest
        // },
        filters: [
          {
            type: 'input',
            prop: 'spu_name',
            placeholder: '商品名称'
          },
          {
            type: 'select',
            prop: 'group_id',
            options: this.groupList,
            labelKey: 'group_name',
            valueKey: 'group_id',
            placeholder: '商品分组'
          },
          { prop: 'price_zone', slots: 'filter-price' }
        ],
        columns: [
          { label: '日期', prop: 'date', minWidth: 140 },
          { label: '姓名', prop: 'name', align: 'center', minWidth: 140 },
          { label: '地址', prop: 'address', minWidth: 120 },
          { label: '操作', slots: 'table-x', align: 'right', width: 150 }
        ],
        data: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
        ]
      }
    }
  },
  methods: {
    beforeRequest(params, isReset) {
      // 重置
      if (isReset) {
        params.price_min = ''
        params.price_max = ''
      }
      params.status = this.activeName === '0' ? '' : this.activeName
      params.price_zone = `${params.price_min || ''},${params.price_max || ''}`
      return params
    },
    handleClick() {
      this.$refs.list.refetch(true)
    },
    // 编辑
    handleUpdate(row) {
      this.$router.push({ name: 'goodsEdit', params: { id: row.spu_id } })
    },
    // 删除
    onRemove() {
      this.$confirm('商品删除请谨慎操作，确定删除？', '删除商品', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(this.handleRemove)
    },
    // 删除
    handleRemove() {
      // const data = this.multipleSelection.map(item => ({ spu_id: item.spu_id }))
      // deleteGoods({ shop_id: this.shopId, data }).then(res => {
      //   this.$refs.list.refetch(true)
      // })
    },
    // 推广
    handlePromote(row) {
      this.shareUrl = `${import.meta.env.VITE_H5_PREVIEW_URL}/buy?shop_id=${row.shop_id}&spu_id=${row.spu_id}`
      this.shareDialogVisible = true
    },
    // 复制
    handleCopy(row) {
      this.$router.push({ name: 'goodsAdd', query: { id: row.spu_id } })
    },
    // 选择
    handleSelectionChange(value) {
      this.multipleSelection = value
    },
    // 上架
    handleUpdateStatus(status) {
      // const data = this.multipleSelection.map(item => ({ spu_id: item.spu_id, status }))
      // updateGoodsStatus({ shop_id: this.shopId, data }).then(res => {
      //   this.$refs.list.refetch()
      // })
    }
  }
}
</script>

<style lang="scss">
.filter-price {
  .el-input {
    width: 140px;
  }
}
</style>
