<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>优惠券类型:</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="结束日期"
              format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              @change="getList"
            />
          </div>
          <div class="filter-control">
            <el-button type="primary" @click="getList">查询</el-button>
          </div>
        </div>
        <el-table :data="tableData" height="550" border style="width: 100%">
          <el-table-column label="优惠月份" width="180">
            <template slot-scope="{ row }">
              {{ row.useTime }} -- {{ row.endTime }}
            </template>
          </el-table-column>
          <el-table-column prop="coupon" label="优惠券" width="780">
            <template slot-scope="{ row }">
              <p v-for="item in row.couponList" :key="item.index">
                优惠券{{ item.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="优惠状态">
            <template slot-scope="{ row }">
              <span v-if="row.status === '0'" class="el-span-zero">
                未生效
              </span>
              <span v-else-if="row.status === '1'" class="el-span-one">
                已生效
              </span>
              <span v-else-if="row.status === '2'" class="el-span-two">
                已关闭
              </span>
              <span v-else class="el-span-three">
                已失效
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button type="text">编辑</el-button>
              <el-button type="text" :hidden="row.status !== 2 ? false : true" @click="closeCoupon(row)">关闭</el-button>
              <el-button type="text" :hidden="row.status === 2 ? false : true" @click="openCoupon(row)">开启</el-button>
              <el-button type="text" @click="deleteCoupon(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"
        />
      </template>
      <template v-else>
        <div class="coupon-content">
          <div class="coupon-title">
            <el-button type="primary" @click="handleAdd">新增优惠券</el-button>
          </div>
          <div v-for="(copu,index) in couponList" :key="index" class="coupon-list">
            <span>优惠券{{ index+1 }}</span>
            <div class="filter-control">
              <span>优惠券金额:</span>
              <el-input
                v-model="copu.money"
                placeholder="优惠券金额"
                clearable
              />
            </div>
            <el-button v-if="couponList.length>1 && index!=0" type="danger" @click="handleDelete(index)">删除</el-button>
          </div>
          <div slot="footer">
            <el-button type="primary" @click="handleSubmit">保存</el-button>
          </div>
        </div>
      </template>
    </el-tabs>
    <el-dialog title="提示" :visible.sync="dialogTableVisible" width="50%">
      <span>{{ msg }}</span>
      <div slot="footer">
        <el-button type="primary" @click="renovate()">确定</el-button>
        <el-button type="primary" @click="dialogTableVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { fetchCouponList, fetchCloseCoupon, fetchOpenCoupon, fetchDeleteCoupon } from '@/api/member/coupon/coupon'

const defaultCoupon = {
  type: '',
  money: '',
  total: ''
}
export default {

  name: 'MemberCoupon',
  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: '',
        couponStartTime: '',
        couponEndTime: '',
        pageNum: 0,
        pageSize: 20
      },
      // 超级会员优惠券
      total: 0,
      time: '',
      tableData: [],
      couponList: [],
      dialogTableVisible: false,
      msg: ''
    }
  },
  created() {
    this.couponList.push(defaultCoupon)
    this.getList()
  },
  methods: {
    async getList() {
      if (this.time && this.time.length > 0) {
        this.listQuery.couponStartTime = this.time[0]
        this.listQuery.couponEndTime = this.time[1]
      } else {
        this.listQuery.couponStartTime = ''
        this.listQuery.couponEndTime = ''
      }
      const res = await fetchCouponList(this.listQuery)
      this.tableData = res.data.results
      this.total = res.data.totalRecord
    },
    // 关闭超级会员专属优惠券
    async closeCoupon(row) {
      const res = await fetchCloseCoupon(row.id)
      this.dialogTableVisible = true
      if (res.code === 1) {
        this.msg = '关闭超级会员专属优惠券完成'
      } else {
        this.msg = '关闭超级会员专属优惠券失败'
      }
    },
    // 开启超级会员专属优惠券
    async openCoupon(row) {
      const res = await fetchOpenCoupon(row.id)
      this.dialogTableVisible = true
      if (res.code === 1) {
        this.msg = '开启超级会员专属优惠券完成'
      } else {
        this.msg = '开启超级会员专属优惠券失败'
      }
    },
    // 删除超级会员专属优惠券
    async deleteCoupon(row) {
      const res = await fetchDeleteCoupon(row.id)
      this.dialogTableVisible = true
      if (res.code === 1) {
        this.msg = '删除超级会员专属优惠券完成'
      } else {
        this.msg = '删除超级会员专属优惠券失败'
      }
    },
    renovate() {
      this.dialogTableVisible = false
      this.getlist()
    },
    handleAdd() {
      // 新增优惠券
      this.couponList.push(defaultCoupon)
    },
    handleDelete(index) {
      // 删除优惠券
      this.couponList.splice(index, 1)
    },
    handleSubmit() {
      // 提交保存
      console.log(this.couponList)
    }
  }
}
</script>

<style scoped>
.el-span-zero {
  color: #800080;
}
.el-span-one {
  color: #00CC66;
}
.el-span-two {
  color: red;
}
.el-span-three {
  color: #FF6600;
}
</style>
