<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <el-select v-model="listQuery.activity_id" style="width: 350px" @change="listQuery.page_index = 1;getList()">
      <el-option v-for="item in activitys" :key="item.id" :label="item.title" :value="item.id" />
    </el-select>
    <el-select v-model="listQuery.gift_id" style="width: 200px" placeholder="请选择大礼包类型" @change="getindex()">
      <el-option v-for="(item,i) in giftList" :key="i" :label="item.title" :value="item.account" />
    </el-select>
    <el-select v-model="listQuery.tag" style="width: 200px" placeholder="请选择是否标记" @change="getindex()">
      <el-option v-for="(item,ix) in tagList" :key="ix" :label="item.title" :value="item.id" />
    </el-select>
    <el-input v-model="listQuery.search_name" placeholder="代理昵称/姓名/手机号" style="width:300px" clearable />
    <el-button type="primary" @click="listQuery.page_index = 1;getList()">筛选</el-button>
    <el-button type="primary" style="margin-bottom: 15px" @click="toExport">导出</el-button>
    <el-table
      border
      stripe
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      :data="tablelist"
    >
      <el-table-column
        type="index"
        :index="index"
        label="序号"
        width="80"
        align="center"
      />
      <el-table-column
        prop="nickname"
        label="代理昵称"
      />
      <el-table-column
        prop="realname"
        label="代理姓名"
      />
      <el-table-column
        prop="account"
        label="订货金额"
      >
        <span slot-scope="{ row: { account } }">{{ parseMoney(account) }}</span>
      </el-table-column>
      <el-table-column
        prop="pay_account"
        label="已付款金额"
      >
        <span slot-scope="{ row: { pay_account } }">{{ parseMoney(pay_account) }}</span>
      </el-table-column>
      <el-table-column
        prop="no_pay_account"
        label="未付款金额"
      >
        <span slot-scope="{ row: { no_pay_account } }">{{ parseMoney(no_pay_account) }}</span>
      </el-table-column>
      <el-table-column
        label="礼包类型"
      >
        <span slot-scope="{ row: { gift } }">{{ gift }}</span>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-tag v-if="row.tag === 1">已标记</el-tag>
          <el-button v-else type="primary" @click="addSign(row)">标记</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination :total="tableTotal" :limit="listQuery.page_size" :page="listQuery.page_index" @pagination="changePagination" @update:limit="changePagination" />
  </div>
</template>
<script>
// api
import { list, addSign, toExport, activityList, GetActivityLimit } from '@/api/giftB'
import { parseMoney } from '@/utils/index'
import { formatter } from '@/filters/index'
export default {
  data() {
    return {
      loadingFull: false,
      indexe: 0,
      listQuery: {
        page_index: 1,
        page_size: 10,
        activity_id: '',
        gift_id: '',
        tag: '',
        search_name: ''
      },
      tagList: [
        {
          id: 0,
          title: '未标记'
        },
        {
          id: 1,
          title: '已标记'
        },
        {
          id: '',
          title: '全部'
        }
      ],
      giftList: [],
      tablelist: [],
      tableTotal: 0,
      activitys: []
    }
  },
  created() {
    this.parseMoney = parseMoney
    this.activityList(() => {
      const activity_id = this.listQuery.activity_id
      GetActivityLimit({ activity_id }).then(res => {
        this.giftList = res.data
        this.listQuery.gift_id = this.giftList[0].account
        this.getList()
      })
    })
  },
  methods: {
    getindex() {
      const e = this.listQuery.gift_id
      this.indexe = this.giftList.findIndex(item => item.account === e)
      this.listQuery.page_index = 1
      this.getList()
    },
    async getList() {
      this.loadingFull = true
      await list(this.listQuery).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.tablelist = res.data.list
          this.tablelist.forEach(v => {
            v.gift = this.giftList[this.indexe].title
          })
          this.tableTotal = res.data.total
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    getActivity() {
      const activity_id = this.listQuery.activity_id
      GetActivityLimit({ activity_id }).then(res => {
        this.giftList = res.data
        this.listQuery.gift_id = this.giftList[1].account
      })
    },
    index(i) {
      const { page_index: a, page_size: b } = this.listQuery
      return (a - 1) * b + i + 1
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.listQuery.page_size = limit
      this.listQuery.page_index = page
      this.getList()
    },
    addSign(row) {
      const { id, account } = row
      this.loadingFull = true
      addSign({
        user_id: id,
        money: account,
        type: 1,
        activity_id: this.listQuery.activity_id
      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.getList()
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    async toExport() {
      this.loadingFull = true
      await toExport({
        type: 1,
        activity_id: this.listQuery.activity_id,
        gift_id: this.listQuery.gift_id,
        tag: this.listQuery.tag,
        search_name: this.listQuery.search_name

      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          if (res.data && res.data.length > 0) {
            res.data.forEach(v => {
              v.礼包类型 = this.giftList[this.indexe].title
            })
            import('@/vendor/Export2Excel').then(excel => {
              excel.export_json_to_excel({
                header: Object.keys(res.data[0]),
                data: res.data.map(listItem => Object.keys(res.data[0]).map(j => listItem[j])),
                filename: `${formatter(new Date(), 'yyyy-MM-dd')}${this.giftList[this.indexe].title}名单`,
                bookType: 'xlsx'
              })
            })
          } else {
            this.$message.error('没有可导出数据')
          }
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    async activityList(cb) {
      this.loadingFull = true
      await activityList().then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.activitys = res.data
          res.data.map(item => {
            if (item.is_ing === 1) {
              this.listQuery.activity_id = item.id
            }
          })
        }
        cb && cb()
      }).catch(e => {
        this.loadingFull = false
        cb && cb()
      })
    }
  }
}
</script>
