<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-control">
        <span>优惠券类型:</span>
        <el-select v-model="listQuery.couponType" style="width:120px;" clearable @change="getList">
          <el-option value="" label="请选择" />
          <el-option :value="0" label="活动券" />
          <el-option :value="1" label="品类券" />
          <el-option :value="1" label="店铺券" />
        </el-select>
      </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-option value="2" label="已关闭" />
          <el-option value="3" label="已失效" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>优惠月份:</span>
        <el-date-picker
          v-model="time"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="getList"
        />
      </div>
      <div class="filter-control">
        <el-button type="primary" @click="getList">查询</el-button>
        <el-button type="primary" @click="handleEdit('add')">专属优惠券配置</el-button>
      </div>
    </div>
    <el-table :data="tableData" height="650" border style="width: 100%">
      <el-table-column label="优惠月份" align="center" width="180">
        <template slot-scope="{ row }">
          {{ row.useTime }} -- {{ row.endTime }}
        </template>
      </el-table-column>
      <el-table-column prop="coupon" label="优惠券" align="left" width="700">
        <template slot-scope="{ row }">
          <p v-for="(item,index) in row.couponList" :key="index">
            优惠券
            {{ index + 1 }} : <b>{{ item.couponType === 0 ? '活动券' : item.couponType === 1 ? '品类券' : '店铺券' }}</b>
            ￥{{ item.couponAmount }}，满{{ item.touchPrice }}可用
            {{ item.productType ? item.productType === '1' ? '，全商城商品通用' : '，仅可购买指定商品' : '' }}
            {{ item.categoryType ? item.categoryType === '1' ? '，仅可购买产品类商品' : '，仅可购买仪器类商品' : '' }}
            <span v-if="item.couponType === 3">，仅可购买店铺“{{ item.shopName }}”的商品</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="优惠状态" align="center" width="80">
        <template slot-scope="{ row }">
          <span :class="{
            purple: row.status == '0',
            green: row.status == '1',
            red: row.status == '2',
            orange: row.status == '3',
          }"
          >
            {{ row.status | statusFilters }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="handleEdit('edit',row.id)">编辑</el-button>
          <el-button type="danger" size="mini" :hidden="row.status !== 2 ? false : true" @click="handleCloseCoupon(row)">关闭</el-button>
          <el-button type="primary" size="mini" :hidden="row.status === 2 ? false : true" @click="handleOpenCoupon(row)">开启</el-button>
          <el-button type="danger" size="mini" @click="handleDeleteCoupon(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 页码 -->
    <pagination
      :total="total"
      :page-sizes="[20, 30, 50, 100]"
      :page-size="20"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
    />
  </div>
</template>
<script>
import { fetchCouponList, fetchCloseCoupon, fetchOpenCoupon, fetchDeleteCoupon } from '@/api/member/member'
export default {
  name: 'MemberCouponList',
  filters: {
    statusFilters(value) {
      console.log('value', value)
      // 处理状态显示
      const map = {
        '0': '未生效',
        '1': '已生效',
        '2': '已关闭',
        '3': '已失效'
      }
      return map[value]
    }

  },
  data() {
    const pickerOptions = {
      shortcuts: [
        {
          text: '近1年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '近半年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 183)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '近1月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '近1周',
          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)
            picker.$emit('pick', [start, end])
          }
        }
      ]
    }
    return {
      activeName: 'first',
      pickerOptions,
      listQuery: {
        couponType: '',
        status: '',
        startDate: '',
        endDate: '',
        pageNum: 1,
        pageSize: 20
      },
      // 超级会员优惠券
      total: 0,
      time: '',
      tableData: [],
      dialogTableVisible: false,
      msg: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      if (this.time && this.time.length > 0) {
        this.listQuery.startDate = this.time[0]
        this.listQuery.endDate = this.time[1]
      } else {
        this.listQuery.startDate = ''
        this.listQuery.endDate = ''
      }
      const res = await fetchCouponList(this.listQuery)
      this.tableData = res.data.results
      this.total = res.data.totalRecord
    },
    // 关闭超级会员专属优惠券
    handleCloseCoupon(row) {
      this.$confirm('是否关闭超级会员专属优惠券？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        fetchCloseCoupon(row.id).then(response => {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1000
          })
          this.getList()
        })
      })
    },
    // 开启超级会员专属优惠券
    handleOpenCoupon(row) {
      this.$confirm('是否开启超级会员专属优惠券？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        fetchOpenCoupon(row.id).then(response => {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1000
          })
          this.getList()
        })
      })
    },
    // 删除超级会员专属优惠券
    handleDeleteCoupon(row) {
      this.$confirm('是否要删除该优惠券套餐？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        fetchDeleteCoupon(row.id).then(response => {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1000
          })
          this.getList()
        })
      })
    },
    handleEdit(type, id) {
      // 跳转编辑页
      this.$router.push({ path: '/member/coupon/edit', query: { type: type, id: id }})
    }
  }
}
</script>

<style scoped>
.purple {
  color: #800080;
}
.green {
  color: #00CC66;
}
.red {
  color: red;
}
.orange {
  color: #FF6600;
}
</style>
