<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="商品列表" name="first" />
      <el-tab-pane label="宣传图" name="second" />
      <template v-if="activeName === 'first'">
        <div class="filter-container">
          <div class="filter-control">
            <span>商品Id:</span>
            <el-input
              v-model="listQuery.productId"
              placeholder="商品Id"
              clearable
              @keyup.enter.native="getList"
              @clear="getList"
            />
          </div>
          <div class="filter-control">
            <span>商品名称:</span>
            <el-input
              v-model="listQuery.productName"
              placeholder="商品名称"
              clearable
              @keyup.enter.native="getList"
              @clear="getList"
            />
          </div>
          <div class="filter-control">
            <span>供应商:</span>
            <el-input
              v-model="listQuery.shopName"
              placeholder="供应商"
              clearable
              @keyup.enter.native="getList"
              @clear="getList"
            />
          </div>
          <div class="filter-control">
            <span>优惠状态:</span>
            <el-select v-model="listQuery.status" style="width:120px;" clearable @change="getList">
              <el-option value="" label="请选择" />
              <el-option :value="0" label="已上架" />
              <el-option :value="1" label="已下架" />
            </el-select>
          </div>
          <div class="filter-control">
            <el-button type="primary" @click="getList">查询</el-button>
            <el-button type="primary" @click="getList">添加</el-button>
          </div>
        </div>
        <el-table v-loading="isLoading" :data="tableData" height="550" border style="width: 100%">
          <el-table-column prop="productId" label="商品id" />
          <el-table-column prop="coupon" label="商品图片">
            <template v-if="row.productId" slot-scope="{ row }">
              <el-popover
                placement="top-start"
                title=""
                width="180"
                trigger="hover"
              >
                <img :src="row.productImage" alt="" style="width:150px;height:150px;">
                <img slot="reference" :src="row.productImage" alt="" style="width:30px;height:30px;">
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="shopName" label="供应商" width="250px" />
          <el-table-column prop="price" label="机构价" />
          <el-table-column prop="discount" label="会员折扣">
            <template slot-scope="{ row }">
              {{ row.priceType === 1 ? row.discount+'%' : '---' }} {{ row.priceType === 1 ? '%':'' }}
            </template>
          </el-table-column>
          <el-table-column prop="discountPrice" label="会员价">
            <template slot-scope="{ row }">
              ￥{{ row.priceType === 2 ? row.discountPrice : row.price * row.discount * 0.01 }}
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序值" />
          <el-table-column prop="status" label="优惠状态">
            <template slot-scope="{ row }">
              <span v-if="row.status === 0" class="el-span-zero">
                已上架
              </span>
              <span v-else class="el-span-one">
                已下架
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="添加时间" width="200px" />
          <el-table-column label="操作">
            <template>
              <el-button type="text" size="mini">编辑</el-button>
              <el-button type="text" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 页码 -->
        <pagination
          :total="total"
          :page-sizes="[100]"
          :page-size="100"
          :page.sync="listQuery.pageNum"
          :limit.sync="listQuery.pageSize"
        />
      </template>
      <template v-else>
        <div class="coupon-content">
          <div class="filter-control">
            <span>pc端宣传图:</span>
          </div>
          <div class="filter-control">
            <span>小程序宣传图:</span>
          </div>
        </div>
      </template>
    </el-tabs>
  </div>
</template>
<script>
import { fetchFindProductList } from '@/api/member/product/product'
export default {
  name: 'MemberProduct',
  data() {
    return {
      activeName: 'first',
      listQuery: {
        productId: null,
        productName: '',
        shopName: '',
        status: '',
        pageNum: 0,
        pageSize: 20
      },
      // 超级会员商品列表
      total: 0,
      isLoading: true,
      tableData: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.isLoading = true
      const res = await fetchFindProductList(this.listQuery)
      this.tableData = res.data.results
      this.total = res.data.totalRecord
      this.isLoading = false
      console.log(this.tableData)
    }
  }
}
</script>

<style>
.el-span-zero {
  color: #0bd81c;
}
.el-span-one {
  color: #ff353f;
}
</style>
