<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="filter-container">
      <div class="filter-control">
        <span>购买套餐:</span>
        <el-select v-model="listQuery.vipPackageId" placeholder="购买套餐" clearable @change="getList">
          <el-option label="不限" value="" />
          <el-option v-for="item in packageList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>会员状态:</span>
        <!-- 会员状态：0已过期，1生效中，2待生效，3非会员 -->
        <el-select v-model="listQuery.vipStatus" placeholder="会员状态" clearable @change="getList">
          <el-option label="不限" value="" />
          <el-option label="已过期" :value="0" />
          <el-option label="生效中" :value="1" />
          <el-option label="待生效" :value="2" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>购买时间:</span>
        <el-date-picker
          v-model="payTimeArray"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          format="yyyy年MM月dd日"
          @change="getList"
        />
      </div>
      <div class="filter-control">
        <span>到期时间:</span>
        <el-date-picker
          v-model="endTimeArray"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          format="yyyy年MM月dd日"
          @change="getList"
        />
      </div>
      <div class="filter-control">
        <el-button type="primary" @change="getList">查询</el-button>
      </div>
    </div>
    <!-- 表格区域 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      style="width: 100%"
      border
      fit
      class="table-cell"
      header-row-class-name="tableHeader"
    >
      <el-table-column :index="indexMethod" label="序号" type="index" width="80" align="center" />
      <el-table-column prop="duration" label="购买套餐" align="center" />
      <el-table-column label="购买价格" align="center">
        <template slot-scope="{ row }">
          <span>￥{{ row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="购买方式" align="center">
        <!-- 1平台赠送，2支付宝，3微信，4企业网银，5个人网银 -->
        <template slot-scope="{ row }">
          <span v-if="row.payWay === 1">平台赠送</span>
          <span v-if="row.payWay === 2">支付宝</span>
          <span v-if="row.payWay === 3">微信</span>
          <span v-if="row.payWay === 4">企业网银</span>
          <span v-if="row.payWay === 5">个人网银</span>
        </template>
      </el-table-column>
      <el-table-column label="会员状态" align="center">
        <!-- 会员状态：0已过期，1生效中，2待生效，3非会员 -->
        <template slot-scope="{ row }">
          <span v-if="row.vipStatus === 0" class="status danger">已过期</span>
          <span v-if="row.vipStatus === 1" class="status success">生效中</span>
          <span v-if="row.vipStatus === 2" class="status warning">待生效</span>
        </template>
      </el-table-column>
      <el-table-column label="购买时间" align="center">
        <template slot-scope="{ row }">
          <span v-if="row.payTime">{{ row.payTime | formatTime }}</span>
          <span v-else>—</span>
        </template>
      </el-table-column>
      <el-table-column label="到期时间" align="center">
        <template slot-scope="{ row }">
          <span v-if="row.endTime">{{ row.endTime | formatTime }}</span>
          <span v-else>—</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="handleShowDemand(row)">订制需求</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 订制需求dialog -->
    <el-dialog title="订制需求" :visible.sync="dialogTableVisible" width="30%">
      <el-table :data="demandList" border fit empty-text="暂无订制需求">
        <el-table-column label="序号" type="index" width="80" align="center" />
        <el-table-column label="订制需求" prop="demand" align="center" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogTableVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchVipRecord, fetchConfigureList } from '@/api/member'
import { getSupplierById } from '@/api/supplier'
export default {
  data() {
    return {
      listLoading: false,
      dialogTableVisible: false,
      endTimeArray: [],
      payTimeArray: [],
      listQuery: {
        authUserId: '',
        endBeginTime: null,
        endEndTime: null,
        payBeginTime: null,
        payEndTime: null,
        vipPackageId: '',
        vipStatus: '',
        pageSize: 10,
        pageNum: 1
      },
      list: [],
      demandList: [],
      packageList: [],
      supplierInfo: {}
    }
  },
  created() {
    this.listQuery.authUserId = this.$store.getters.authUserId
    this.fetchVipRecord()
    this.fetchConfigureList()
    this.fetchSupplierInfo()
  },
  methods: {
    indexMethod(index) {
      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
    },
    getList() {
      this.list = []
      // 到期时间区间
      if (this.endTimeArray && this.endTimeArray.length === 2) {
        const [endBeginTime, endEndTime] = this.endTimeArray
        this.listQuery.endBeginTime = endBeginTime
        this.listQuery.endEndTime = endEndTime
      } else {
        this.listQuery.endBeginTime = null
        this.listQuery.endEndTime = null
      }
      // 购买时间区间
      if (this.payTimeArray && this.payTimeArray.length === 2) {
        const [payBeginTime, payEndTime] = this.payTimeArray
        this.listQuery.payBeginTime = payBeginTime
        this.listQuery.payEndTime = payEndTime
      } else {
        this.listQuery.payBeginTime = null
        this.listQuery.payEndTime = null
      }
      this.fetchVipRecord()
    },
    fetchVipRecord() {
      console.log(this.listQuery)
      fetchVipRecord(this.listQuery).then((res) => {
        console.log(res)
        this.list = [...this.list, ...res.data.list]
      })
    },
    handleShowDemand(row) {
      this.dialogTableVisible = true
      if (row.services) {
        this.demandList = row.services.split(',').map((item) => ({
          demand: item
        }))
      } else {
        this.demandList = []
      }
    },
    // 获取套餐列表
    fetchConfigureList() {
      fetchConfigureList().then((res) => {
        this.packageList = res.data.packageList.map((item, index) => {
          item.name = `套餐${index + 1}`
          return item
        })
      })
    },
    // 获取供应商信息
    fetchSupplierInfo() {
      getSupplierById({ authUserId: this.listQuery.authUserId }).then((res) => {
        console.log(res)
        this.supplierInfo = res.data
      })
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  .info {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    font-size: 14px;
    .row {
      margin-right: 32px;
    }
  }

  .dialog-footer {
    text-align: center;
  }
}
</style>
