<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-control">
        <span>机构名称:</span>
        <el-input
          v-model="clubInfo.clubName"
          placeholder="机构名称"
          clearable
          :disabled="true"
          style="color: #333;"
        />
      </div>
      <div class="filter-control">
        <span>联系人:</span>
        <el-input
          v-model="clubInfo.linkMan"
          placeholder="联系人"
          clearable
          :disabled="true"
          style="color: #333;"
        />
      </div>
      <div class="filter-control">
        <span>手机号:</span>
        <el-input
          v-model="clubInfo.mobile"
          placeholder="机构名称"
          clearable
          :disabled="true"
          style="color: #333;"
        />
      </div>
    </div>
    <div class="filter-container">
      <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" border style="width: 100%">
      <el-table-column label="购买套餐" align="center" width="180">
        <template slot-scope="{ row }">
          <span>{{ packageFilters(row) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="购买价格" align="center" width="180">
        <template slot-scope="{ row }">
          <span> {{ priceFilters(row) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="购买渠道" align="center">
        <template slot-scope="{ row }">
          <span class="el-span-pay">{{ payWayFilters(row) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="会员状态" align="center">
        <template slot-scope="{ row }">
          <span :class="{
            'el-span-status': row.status == '1',
            'el-span-notStatus': row.status == '2',
            'el-span-notEffective': row.status == '3',
          }"
          >
            {{ row.status | statusFilters }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="payTime" label="购买时间" align="center" />
      <el-table-column prop="beginTime" label="生效时间" align="center" />
      <el-table-column prop="endTime" label="到期时间" align="center" />
    </el-table>
  </div>
</template>

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

export default {
  name: 'MemberRecord',
  filters: {
    statusFilters(value) {
      // 处理状态显示
      const map = {
        '0': '未生效',
        '1': '已生效',
        '2': '已过期',
        '3': '暂未生效'
      }
      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: {
        userId: 0, // 用户Id
        packageId: '', // 购买套餐
        status: '', // 会员状态
        startPayTime: '', // 购买开始时间
        endPayTime: '', // 购买结束时间
        startEndTime: '', //  到期开始时间
        endEndTime: '', // 到期结束时间
        pageNum: 1,
        pageSize: 20
      },
      clubInfo: {
        clubName: '', // 机构名称
        linkMan: '', // 联系人
        mobile: '' // 手机号
      },
      tableData: [],
      total: 0
    }
  },
  created() {
    this.clubInfo = { ...this.clubInfo, ...this.$route.query }
    this.listQuery.userId = this.clubInfo.userId
    this.getList()
  },
  methods: {
    payWayFilters(row) {
      // 处理购买渠道显示
      const payTypeMap = {
        '1': '建设银行7297',
        '2': '广发银行0115',
        '3': '中信银行7172',
        '4': '中信银行0897',
        '5': '中信银行0897-财付通',
        '6': '中信银行0897-支付宝',
        '7': '线上-支付宝',
        '8': '线上-微信支付',
        '9': '线上-快钱支付',
        '10': '口头返佣',
        '11': '广发银行5461',
        '12': 'PC-B2B网银',
        '13': 'PC-微信支付',
        '14': 'PC-支付宝',
        '15': '小程序-微信支付',
        '16': '余额抵扣',
        '17': 'PC-B2C网银'
      }
      const payWayMap = {
        '2': '线下',
        '3': '余额抵扣',
        '4': '采美豆抵扣',
        '5': '系统赠送'
      }
      if (row.payWay === '0') {
        return '未知'
      } else if (row.payWay === '1') {
        return payTypeMap[row.payType]
      } else {
        return payWayMap[row.payWay]
      }
    },
    packageFilters(row) {
      // 套餐
      const map = {
        0: `${row.giveMonth}个月`,
        1: '1个月',
        3: '3个月',
        12: '12个月'
      }
      return map[row.packageId]
    },
    priceFilters(row) {
      // 处理购买价格
      const map = {
        '0': row.price,
        '1': row.price,
        '2': row.price,
        '3': row.price,
        '4': `${row.userBeans}采美豆`,
        '5': '--'
      }
      return map[row.payWay]
    },
    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 = ''
      }
      // 获取数据列表
      try {
        const res = await findHistory(this.listQuery)
        this.tableData = res.data.results
        this.total = res.data.totalRecord
        this.isLoading = false
      } catch (error) {
        console.log('error', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-span-status {
  color: rgb(16, 230, 8);
}
.el-span-notStatus {
  color: rgb(245, 13, 13);
}
.el-span-notEffective {
  color: rgb(245, 13, 13);
}
.el-span-pay {
  color:#07c160;
}
</style>
