<template>

  <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
    <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="title" />
        <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 class="contentx" v-if="item!=null" >
      <div class="desct">
        用户药品订单
      </div>
      <userStorerDetails  ref="userDetails" />
    </div>
  </div>
</template>



<script>
import { getPatientByUserId} from "@/api/his/patient";
import { getUser ,getUserAddr} from "@/api/his/user";
import { getListUserCoupon } from "@/api/his/userCoupon";
import userStorerDetails from "../../components/his/userStorerDetails.vue";
import userPatietDetails from "../../components/his/userPatietDetails.vue";
import userInquiryOrderDetails from "../../components/his/userInquiryOrderDetails.vue";
import userAddDetails from "../../components/his/userAddDetails.vue";
export default {
  name: "storedet",
  props:["data"],
  components: { userStorerDetails ,userInquiryOrderDetails,userPatietDetails,userAddDetails},
  data() {
    return {
      patientInfo: process.env.VUE_APP_PATIENT_INFO,
      addr:[],
      patient:[],
      userOptions: [],
      statusOptions: [],
      sexOptions: [],
      pOptions: [],
      item:null,
      total: 0,
      loading: true,
      // 会员优惠券表格数据
      userCouponList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        couponId: null,
      },
      actName:"10",
      businessTypeOptions:[],
      couponStatusOptions:[],
    }
  },
  created() {
    this.getDicts("sys_user_status").then(response => {
      this.userOptions = response.data;
    });
    this.getDicts("sys_company_status").then(response => {
      this.statusOptions = response.data;
    });
    this.getDicts("sys_patient_status").then(response => {
      this.pOptions = response.data;
    });
    this.getDicts("sys_patient_sex").then(response => {
      this.sexOptions = response.data;
    });
    this.getDicts("sys_coupon_business_type").then(response => {
      this.businessTypeOptions = response.data;
    });

    this.getDicts("sys_coupon_status").then(response => {
      this.couponStatusOptions = response.data;
    });
  },
  methods: {
    handleClickX(tab, event) {
      if(tab.name=="10"){
        this.queryParams.status=null;
      }else{
        this.queryParams.status=tab.name;
      }
      this.queryParams.pageNum = 1;
      this.getList();

    },
    getList() {
      this.loading = true;
      getListUserCoupon(this.queryParams).then(response => {
        this.userCouponList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    getDetails(orderId) {
      this.item=null;
      getUser(orderId).then(response => {
        this.item = response.data;
        setTimeout(() => {
          this.$refs.userDetails.getUserDetails(orderId);
        }, 1);

      });
      this.patient=null;
      getPatientByUserId(orderId).then(response => {
        this.patient = response.data;
      });
      getUserAddr(orderId).then(response => {
        this.addr = response.data;
      });
      this.queryParams.userId=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>
