<template>
  <div>
    <div class="row">
      <el-button type="primary" @click="addProduceDialogRef.show()">添加</el-button>
    </div>
    <div class="row mt14">
      <el-table :data="tableData.list" border stripe v-loading="tableData.loading">
        <el-table-column label="商品" width="250">
          <template v-slot="scope">
            <div class="goods_info" v-if="includesString(scope.row.goodsCategory, '其它商品')">
              <el-image class="icon" :src="scope.row.goodsImageUrl" fit="cover"></el-image>
              <div class="info">
                <div class="name">{{ scope.row.goodsName }}</div>
              </div>
            </div>
            <div class="coupon_info" v-if="includesString(scope.row.goodsCategory, '优惠券')">
              <div class="icon">
                <CouponIcon :item="scope.row.couponInfo" v-if="scope.row.couponInfo" />
              </div>
              <div class="info">
                <div class="name">
                  {{ scope.row.goodsName }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="所需积分" prop="requiredPoints"></el-table-column>
        <el-table-column label="额外价格（元）" prop="extraPrice" width="130"></el-table-column>
        <el-table-column label="累计兑换次数" prop="totalExchangeCount"></el-table-column>
        <el-table-column label="库存" prop="quantity"></el-table-column>
        <el-table-column label="状态" prop="status" width="100">
          <template v-slot="scope">
            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
              @change="statusChange($event, scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="180"></el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template v-slot="scope">
            <el-button type="primary" link @click="addProduceDialogRef.show(scope.row)">编辑</el-button>
            <el-popconfirm title="确认要删除吗？" @confirm="deleteHandle(scope.row)">
              <template #reference>
                <el-button type="danger" link>删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="row mt14">
      <el-pagination v-model:current-page="tableData.page" v-model:page-size="tableData.size"
        :page-sizes="[10, 30, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <addProduceDialog ref="addProduceDialogRef" @success="pointsGoodsPageAjax" />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { pointsGoodsPage, pointsGoodsDel, pointsGoodsPost } from '@/api/points'
import addProduceDialog from './addProduceDialog.vue';
import CouponIcon from './coupon-icon.vue';
import { includesString } from '@/utils'

const addProduceDialogRef = ref(null)

const tableData = reactive({
  page: 1,
  size: 10,
  total: 0,
  list: [],
  loading: false
})

// 分页大小发生变化
function handleSizeChange(e) {
  tableData.size = e;
  pointsGoodsPageAjax();
}

// 分页发生变化
function handleCurrentChange(e) {
  tableData.page = e;
  pointsGoodsPageAjax();
}

// 积分:商品:列表
async function pointsGoodsPageAjax() {
  try {
    tableData.loading = true
    const res = await pointsGoodsPage({
      page: tableData.page,
      size: tableData.size
    })
    tableData.list = res.records
    tableData.total = res.totalRow
  } catch (error) {
    console.log(error);
  }
  setTimeout(() => {
    tableData.loading = false
  }, 500);
}

// 删除
async function deleteHandle(row) {
  try {
    await pointsGoodsDel(row.id)
    ElNotification({
      title: '注意',
      message: '已删除',
      type: 'success'
    })
    pointsGoodsPageAjax()
  } catch (error) {
    console.log(error);
  }
}

// 修改状态
async function statusChange(e, row) {
  try {
    await pointsGoodsPost(row)
  } catch (error) {
    console.log(error);
  }
  pointsGoodsPageAjax()
}

onMounted(() => {
  pointsGoodsPageAjax()
})
</script>

<style scoped lang="scss">
.row {
  &.mt14 {
    margin-top: 14px;
  }
}

.goods_info,
.coupon_info {
  display: flex;
  align-items: center;
  gap: 14px;

  .icon {
    $size: 70px;
    width: $size;
    height: $size;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ececec;
    border-radius: 8px;
  }

  .info {
    display: flex;
    align-items: center;

    .name {
      font-size: 14px;
      color: #666;
    }
  }
}
</style>