<template>
    <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
      <div style="padding: 20px; background-color: #fff;">
         优惠劵详情
      </div>
<div class="contentx" v-if="item!=null">
        <div class="desct"> 优惠劵信息</div>
        <el-descriptions title="" :column="3" border>
          <el-descriptions-item label="标题"><span v-if="item!=null">{{item.title}}</span></el-descriptions-item>
          <el-descriptions-item label="面额"><span v-if="item!=null">{{item.price}}</span></el-descriptions-item>
          <el-descriptions-item label="数量"><span v-if="item!=null">{{item.number}}</span></el-descriptions-item>
           <el-descriptions-item label="卷类型"><span v-if="item!=null">{{item.couponType}}</span></el-descriptions-item>
          <el-descriptions-item label="最低消费金额可用"><span v-if="item!=null">{{item.minPrice}}</span></el-descriptions-item>
          <el-descriptions-item label="剩余数量"><span v-if="item!=null">{{item.remainNumber}}</span></el-descriptions-item>
          <el-descriptions-item label="有效期"><span v-if="item!=null">{{item.limitTime}}</span></el-descriptions-item>
          <el-descriptions-item label="状态"><span v-if="item!=null"> <dict-tag :options="statusOptions" :value="item.status"/></span></el-descriptions-item>
          <el-descriptions-item label="卷类型"><span v-if="item!=null"> <dict-tag :options="couponTypeOptions" :value="item.couponType"/></span></el-descriptions-item>
        </el-descriptions>
    </div>
    <div class="contentx" v-if="item!=null">
            <div class="desct"> 优惠劵领取信息</div>
            <el-tabs type="card" v-model="actName" @tab-click="handleClickX">
              <el-tab-pane label="全部" name="10"></el-tab-pane>
              <el-tab-pane v-for="(item,index) in couponStatusOptions" :label="item.dictLabel" :name="item.dictValue"></el-tab-pane>
            </el-tabs>
            <el-table v-loading="loading" :data="userCouponList">
              <el-table-column label="券号" align="center" prop="couponCode" />
              <el-table-column label="会员昵称" align="center" prop="nickName" />
             <!-- <el-table-column label="会员电话" align="center" prop="phone" /> -->
              <el-table-column label="关联订单ID" align="center" prop="businessId" />
              <el-table-column label="订单类型" align="center" prop="businessType">
                <template slot-scope="scope">
                  <dict-tag :options="businessTypeOptions" :value="scope.row.businessType"/>
                </template>
              </el-table-column>
              <el-table-column label="状态" align="center" prop="status">
                <template slot-scope="scope">
                  <dict-tag :options="couponStatusOptions" :value="scope.row.status"/>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" align="center" prop="createTime" width="180"/>
              <el-table-column label="使用时间" align="center" prop="useTime" width="180"/>
            </el-table>

            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
        </div>

    </div>
</template>

<script>
import { listCoupon, getCoupon, delCoupon, addCoupon, updateCoupon, exportCoupon } from "@/api/his/coupon";
import { getListUserCoupon } from "@/api/his/userCoupon";
  export default {
    name: "coupon",
    props:["data"],
    data() {
      return {
        actName:"10",
        couponId:null,
        item:null,
        statusOptions: [],
        couponTypeOptions: [],
        businessTypeOptions:[],
        couponStatusOptions:[],
        total: 0,
        loading: true,
        // 会员优惠券表格数据
        userCouponList: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          couponId: null,
        },
      }
    },
    created() {
      this.getDicts("sys_coupon_type").then(response => {
        this.couponTypeOptions = response.data;
      });
      this.getDicts("sys_coupon_business_type").then(response => {
        this.businessTypeOptions = response.data;
      });
      this.getDicts("sys_company_status").then(response => {
        this.statusOptions = response.data;
      });
      this.getDicts("sys_coupon_status").then(response => {
        this.couponStatusOptions = response.data;
      });
    },
    methods: {
      getList() {
        this.loading = true;
        getListUserCoupon(this.queryParams).then(response => {
          this.userCouponList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      handleClickX(tab, event) {
       if(tab.name=="10"){
         this.queryParams.status=null;
       }else{
         this.queryParams.status=tab.name;
       }
          this.queryParams.pageNum = 1;
          this.couponId = this.queryParams.couponId;
          this.getList();

      },
      getDetails(orderId) {
        this.item=null;
        this.couponId = orderId;
        getCoupon(orderId).then(response => {
            this.item = response.data;
            this.queryParams.couponId = orderId;
            this.getList();
        });
      },
    }
  }
</script>
<style>
  .contentx{
      height: 100%;
      background-color: #fff;
      padding: 0px 20px 20px;


      margin: 20px;
  }
  .el-descriptions-item__label.is-bordered-label{
    font-weight: normal;
  }
  .el-descriptions-item__content {
    max-width: 150px;
    min-width: 100px;
  }
  .desct{
      padding-top: 20px;
      padding-bottom: 20px;
      color: #524b4a;
      font-weight: bold;
    }

</style>
