<template>
  <div>
    <el-radio-group v-model="cardList" size="mini" style="margin-bottom: 30px;" @change="changeStatus()">
      <el-radio-button label="notUse">未使用</el-radio-button>
      <el-radio-button label="used">已使用</el-radio-button>
      <el-radio-button label="expired">已过期</el-radio-button>
      <el-radio-button label="whole">全部</el-radio-button>
    </el-radio-group>
    <div>
      <el-table ref="tables" v-loading="loading" :data="list">
        <el-table-column  align="center" prop="storeName" label="所属油站"/>
        <el-table-column  align="center" prop="cardFavorableName" label="优惠券名称"/>
        <el-table-column  align="center" prop="type" label="卡券类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type == 0">油品券</el-tag>
            <el-tag v-if="scope.row.type == 1" type="success">商品券</el-tag>
            <el-tag v-if="scope.row.type == 2" type="warning">通用券</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="fullDeduction" label="满减金额"/>
        <el-table-column align="center" prop="discountAmount" label="券面额"/>
        <el-table-column align="center" prop="oilType" label="适用油品">
          <template slot-scope="scope">
            <span>{{ getOilNames(oilNameList,scope.row.oilType) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0">未使用</el-tag>
            <el-tag v-if="scope.row.status == 1" type="success">已使用</el-tag>
            <el-tag v-if="scope.row.status == 2" type="warning">已过期</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="卡券可用规则">
          <el-table-column align="center" prop="name" label="有效期">
            <template slot-scope="scope">
              {{ scope.row.startTime }}至{{ scope.row.endTime }}
            </template>
          </el-table-column>

          <el-table-column align="center" prop="availablePeriod" label="周期与时段"/>
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="领取时间"/>
        <el-table-column align="center" prop="exchangeFrom" label="描述"/>
      </el-table>

      <pagination
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { getCardFavorableList } from "@/api/userInfoOrder.js";
import {oilNumbers} from "@/api/oilConfig/oilGuns";

export default {
  props:["pUserId"],
  data(){
    return {
      cardList:'notUse',
      userId:"",
      loading:false,
      list:[],
      total:0,
      queryParams:{
        status: 0,
        page:1,
        pageSize:10,
      },
      oilNameList:[],
    }
  },
  created() {
    // this.userId = this.pUserId;
    this.userId = this.$route.query.id;

    this.getList()
    this.getOilName()
  },
  methods:{
    getOilNames(list,oilIds){
      let name = "";
      let oilNames = []
      let oilId = oilIds.split(",")
      list.forEach(item => {
        oilId.forEach(i => {
          if (item.oilName == i){
            oilNames.push(item.oilNames)
          }
        })
      })
      let arr = []
      for (let i = 0;i<oilNames.length;i++){
        if (arr.indexOf(oilNames[i])==-1){
          arr.push(oilNames[i])
          name += oilNames[i]+","
        }
      }
      return name;
    },
    getOilName(){
      oilNumbers().then(res => {
        this.oilNameList = res.data
      })
    },
    getList(){
      this.loading = true

      this.queryParams.userId = this.userId
      getCardFavorableList(this.queryParams).then(res=>{
        if (res.code == 200) {
          this.list = res.data.records
          this.total = res.data.total
          this.loading = false

        }
      })
    },
    changeStatus() {
      if (this.cardList == 'notUse') {
        this.queryParams.status = 0
      } else if (this.cardList == 'used') {
        this.queryParams.status = 1
      } else if (this.cardList == 'expired') {
        this.queryParams.status = 2
      } else {
        this.queryParams.status = ''
      }
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
