<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <!-- 搜索 -->
        <el-select v-model="searchObj.vipType" filterable class="filter-item" clearable size="mini" placeholder="请选择VIP类型">
          <el-option
            v-for="item in vipTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="searchObj.status" filterable class="filter-item" clearable size="mini" placeholder="请选择状态">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <!-- <el-select v-model="searchObj.channel" filterable class="filter-item" clearable size="mini" placeholder="请选择渠道">
          <el-option
            v-for="item in dictMap.channel"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->
        <!-- <el-select v-model="searchObj.region" filterable class="filter-item" clearable size="mini" placeholder="请选择地区">
          <el-option
            v-for="item in dictMap['region']"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->
        <el-input v-model="searchObj.region" clearable size="small" placeholder="请输入地区" style="width: 200px;" class="filter-item" />
        <el-input v-model="searchObj.channel" clearable size="small" placeholder="请输入渠道" style="width: 200px;" class="filter-item" />
        <el-input v-model="searchObj.cardNum" clearable size="small" placeholder="请输入卡号" style="width: 200px;" class="filter-item" />
        <el-input v-model="searchObj.batch" clearable size="small" placeholder="请输入批次（数字）" style="width: 200px;" class="filter-item" />
        <el-input v-model="searchObj.rcvMobile" clearable size="small" placeholder="请输入手机号" style="width: 200px;" class="filter-item" />
        <poly-search :query-type-options="queryTypeOptions" @toQuery="searchQuery" />
        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="getSmallSellList('reset')">搜索</el-button>
      </div>
    </div>
    <!--表格渲染-->
    <el-table
      v-loading="loading"
      :max-height="tableHeight"
      :data="smallSellList"
    >
      <el-table-column label="ID" width="50px" prop="id" />
      <el-table-column label="vip类型" width="80px" prop="vipType">
        <template slot-scope="scope">
          <span v-if="Number(scope.row.vipType) === 1">爱奇艺包月</span>
          <span v-if="Number(scope.row.vipType) === 4">爱奇艺包年</span>
        </template>
      </el-table-column>
      <el-table-column label="卡号" width="70px" prop="cardNum" />
      <el-table-column label="卡密" width="160px" prop="cardKey" />
      <el-table-column label="vip状态" width="80px" prop="status">
        <template slot-scope="scope">
          <el-tag v-if="Number(scope.row.status) === 0">未激活</el-tag>
          <el-tag v-if="Number(scope.row.status) === 1" type="success">已激活</el-tag>
          <el-tag v-if="Number(scope.row.status) === 2" type="warning">激活失败</el-tag>
          <el-tag v-if="Number(scope.row.status) === 3" type="info">已失效</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="地区" width="120px" show-overflow-tooltip prop="region" />
      <el-table-column label="渠道" width="80px" prop="channel" />
      <el-table-column label="批次" width="60px" prop="batch" />
      <el-table-column label="产品id" width="60px" prop="productId" />
      <el-table-column label="产品" width="100px" prop="productName" />
      <el-table-column label="大屏账号" show-overflow-tooltip width="260px" prop="account" />
      <el-table-column label="订单号" show-overflow-tooltip width="160px" prop="bossOrderNo" />
      <el-table-column label="备注" show-overflow-tooltip prop="remark" />
      <el-table-column label="领取手机号" width="125px" prop="rcvMobile" />
    </el-table>
    <el-pagination
      :page-size.sync="searchObj.size"
      :total="total"
      :current-page.sync="searchObj.page"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="changeSize"
      @current-change="changePage"
    />
  </div>
</template>

<script>
import aiqiyi from '@/api/aiqiyi/aiqiyi'
import polySearch from '@/components/polySearch/index'
import initDict from '@/mixins/initDict'

export default {
  name: 'AiqiyiVipCard',
  components: { polySearch },
  mixins: [initDict],
  data() {
    return {
      loading: false,
      smallSellList: [],
      queryTypeOptions: [
        { key: 'account', display_name: '大屏账号' },
        { key: 'bossOrderNo', display_name: '订单号' }
      ],
      vipTypeList: [{ label: '爱奇艺包月', value: '1' }, { label: '爱奇艺包年', value: '4' }],
      statusList: [{ label: '未激活', value: '0' }, { label: '已激活', value: '1' }, { label: '激活失败', value: '2' }, { label: '已失效', value: '3' }],
      total: 0,
      tableHeight: 0,
      searchObj: {
        page: 1,
        size: 20,
        vipType: '',
        cardNum: '',
        status: '',
        region: '',
        channel: '',
        batch: '',
        account: '',
        bossOrderNo: '',
        rcvMobile: '',
        userId: this.$store.state.user.user.id
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.getDictMap('region')
      this.getSmallSellList()
    })
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - (window.innerWidth < 1200 ? 320 : 300)
    })
  },
  methods: {
    searchQuery(e) {
      console.log(e)
      this.queryTypeOptions.forEach(item => {
        this.searchObj[item.key] = ''
      })
      this.searchObj[e.type] = e.value
    },
    getSmallSellList(type) {
      if (type === 'reset') {
        this.searchObj.page = 0
      }
      this.loading = true
      aiqiyi.getSmallSellList({
        ...this.searchObj,
        page: this.searchObj.page - 1
      }).then(res => {
        this.loading = false
        this.smallSellList = res.content
        this.total = res.totalElements
      }).catch(() => {
        this.smallSellList = []
        this.total = 0
        this.loading = false
      })
    },
    changePage(e) {
      console.log(e)
      this.searchObj.page = e
      this.getSmallSellList()
    },
    changeSize(e) {
      console.log(e)
      this.searchObj.page = 0
      this.searchObj.size = e
      this.getSmallSellList()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>