<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-control handel_club">
        <span class="handel_span">机构名称: {{ clubName }}</span>
        <span class="handel_span">联系人: {{ linkMan }}</span>
        <span class="handel_span">手机号: {{ mobile }}</span>
      </div><br>
      <div class="filter-control">
        <span>购买套餐:</span>
        <el-select v-model="listQuery.packageId" style="width:120px;" clearable @change="getList">
          <el-option value="" label="请选择" />
          <el-option :value="0" label="系统赠送" />
          <el-option :value="1" label="1个月" />
          <el-option :value="3" label="3个月" />
          <el-option :value="12" label="12个月" />
        </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="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="purchaseTime"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions"
          @change="getList"
        />
      </div>
      <div class="filter-control">
        <span>到期时间:</span>
        <el-date-picker
          v-model="expireTime"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerEndOptions"
          @change="getList"
        />
      </div>
      <div class="filter-control">
        <el-button type="primary" @click="getList">查询</el-button>
      </div>
    </div>
    <el-table v-loading="isLoading" :data="tableData" height="550" border style="width: 100%">
      <el-table-column label="购买套餐" width="180">
        <template slot-scope="{ row }">
          {{ row.packageId | packageFilters }}
        </template>
      </el-table-column>
      <el-table-column label="购买价格" width="180">
        <template slot-scope="{ row }">
          {{ row.packageId | packageFilters }}
        </template>
        <template slot-scope="{ row }">
          <template v-if="row.payWay === '4'">
            <span>{{ row.userBeans }}采美豆</span>
          </template>
          <template v-else>
            <span>{{ row.price | priceFormat }}采美豆</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="购买渠道">
        <template slot-scope="{ row }">
          <span v-if="row.payWay === '0'" class="el-span-status">
            未知
          </span>
          <span v-else-if="row.payWay === '1'" class="el-span-status">
            未知
          </span>
          <span v-else-if="row.payWay === '2'" class="el-span-status">
            线下
          </span>
          <span v-else-if="row.payWay === '3'" class="el-span-notStatus">
            余额抵扣
          </span>
          <span v-else-if="row.payWay === '4'" class="el-span-notEffective">
            采美豆抵扣
          </span>
          <span v-else-if="row.payWay === '5'" class="el-span-notEffective">
            系统赠送
          </span>
        </template>
      </el-table-column>
      <el-table-column label="会员状态">
        <template slot-scope="{ row }">
          <span v-if="row.status === '1'" class="el-span-status">
            已生效
          </span>
          <span v-else-if="row.status === '2'" class="el-span-notStatus">
            已过期
          </span>
          <span v-else class="el-span-notEffective">
            暂未生效
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="payTime" label="购买时间" />
      <el-table-column prop="beginTime" label="生效时间" />
      <el-table-column prop="endTime" label="到期时间" />
    </el-table>
  </div>
</template>

<script>
import { findHistory } from '@/api/member/manage/manage'

export default {
  name: 'MemberRecord',
  filters: {
    packageFilters(value) {
      // 套餐
      const map = {
        1: '1个月',
        3: '3个月',
        12: '12个月'
      }
      return map[value]
    },
    priceFormat(value) {
      return Number(value).toFixed(2)
    }
  },
  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])
          }
        }
      ]
    }
    // 到期时间
    const pickerEndOptions = {
      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 {
      pickerOptions,
      pickerEndOptions,
      // 购买时间
      purchaseTime: '',
      // 到期时间
      expireTime: '',
      isLoading: true,
      listQuery: {
        clubId: 0, // 机构Id
        userId: 0, // 用户Id
        packageId: '', // 购买套餐
        status: '', // 会员状态
        startPayTime: '', // 购买开始时间
        endPayTime: '', // 购买结束时间
        startEndTime: '', //  到期开始时间
        endEndTime: '', // 到期结束时间
        pageNum: 1,
        pageSize: 20
      },
      clubName: '', // 机构名称
      linkMan: '', // 联系人
      mobile: '', // 手机号
      tableData: [],
      total: 0
    }
  },
  created() {
    this.listQuery = { ...this.listQuery, ...this.$route.query }
    this.getList()
  },
  methods: {
    async getList() {
      this.isLoading = true
      // 购买时间
      if (this.purchaseTime && this.purchaseTime.length > 0) {
        this.listQuery.startPayTime = this.purchaseTime[0]
        this.listQuery.endPayTime = this.purchaseTime[1]
      } else {
        this.listQuery.startPayTime = ''
        this.listQuery.endPayTime = ''
      }
      // 到期时间
      if (this.expireTime && this.expireTime.length > 0) {
        this.listQuery.startEndTime = this.expireTime[0]
        this.listQuery.endEndTime = this.expireTime[1]
      } else {
        this.listQuery.startEndTime = ''
        this.listQuery.endEndTime = ''
      }
      // 获取数据列表
      const res = await findHistory(this.listQuery)
      this.tableData = res.data.results
      this.total = res.data.totalRecord
      this.clubName = res.data.results[0].clubName
      this.linkMan = res.data.results[0].linkMan
      this.mobile = res.data.results[0].mobile
      this.isLoading = false
    }
  }
}
</script>

<style>
  .handel_span {
    padding-left: 20px;
    font-size: 20px;
  }
  .handel_club{
    width: 100%;
    height: 50px;
    margin-top: 10px;
    /* background-color: rgb(187, 183, 183); */
  }
</style>
