<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <template>
      <el-tabs v-model="searchParams.type" @tab-click="handleTagToggle">
        <el-tab-pane label="未审核" name="0" />
        <el-tab-pane label="已通过" name="1" />
        <el-tab-pane label="已驳回" name="2" />
      </el-tabs>
    </template>

    <div class="filter-container">
      <el-input
        v-model="searchParams.search_name"
        placeholder="昵称/手机号"
        class="filter-item filter-input"
      />
      <el-button
        type="primary"
        icon="el-icon-search"
        class="filter-item"
        @click="searchParams.page_index = 1;getUpgradeList()"
      >
        搜索
      </el-button>
      <el-button
        v-permit="1"
        type="primary"
        icon="el-icon-edit"
        class="filter-item"
      >
        添加代理
      </el-button>
    </div>

    <el-table
      :data="table"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
    >
      <el-table-column
        prop="activity"
        label="期数"
        align="center"
        width="150"
      >
        <template slot-scope="{ row }">
          {{ `第${row.activity}期` }}
        </template>
      </el-table-column>
      <el-table-column
        prop="nickname"
        align="center"
        label="微信昵称"
      >
        <template
          slot-scope="{ row }"
        >
          {{ row.user.nickname }}
        </template>
      </el-table-column>
      <el-table-column
        prop="level"
        align="center"
        label="代理级别"
      >
        <template
          slot-scope="{ row }"
        >
          <el-tag
            :color="levelStatus(row.user.level).color"
            style="color:#ffffff;"
          >
            {{ levelStatus(row.user.level).name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="user"
        align="center"
        label="手机号"
      >
        <template slot-scope="{ row }">
          {{ row.user && row.user.mobile }}
        </template>
      </el-table-column>
      <el-table-column
        prop="amount"
        align="center"
        label="累计充值金额(元)"
      />
      <el-table-column
        prop="created_at"
        align="center"
        label="时间"
      />
      <el-table-column
        prop="imgUrls"
        align="center"
        label="上传图片"
        width="210"
      >
        <template
          slot="header"
          slot-scope="{ column }"
        >
          <el-tooltip style="cursor:pointer;" effect="dark" content="点击图片查看大图" placement="top">
            <span>{{ column.label }} <i class="el-icon-info" /></span>
          </el-tooltip>
        </template>
        <template
          slot-scope="{ row }"
        >
          <div class="upgradeImgs">
            <el-image
              v-for="(item, i) in JSON.parse(row.img_url)"
              :key="i"
              style="width: 40px; height: 40px;cursor: pointer;"
              :src="item"
              fit="cover"
              :preview-src-list="JSON.parse(row.img_url)"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="searchParams.type === '0'"
        label="操作"
        width="150"
      >
        <template
          slot-scope="{ row }"
        >
          <el-button
            type="primary"
            size="mini"
            @click="handleUpgrade(row, 1)"
          >
            通过
          </el-button>
          <el-button
            type="danger"
            size="mini"
            @click="handleUpgrade(row, 2)"
          >
            驳回
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="batch-container">
      <!-- <el-button-group>
        <el-button type="primary">通过</el-button>
      </el-button-group> -->
      <pagination :total="tableTotal" />
    </div>
  </div>
</template>

<script>
// api
import {
  getUpgradeList,
  setUpgrade
} from '@/api/team/upgrade'
import {
  levelStatus
} from '@/filters/common'

export default {
  name: 'TeamMember',
  data() {
    return {
      table: [],
      tableTotal: 0,
      searchParams: {
        page_index: 1,
        page_size: 20,
        search_name: '',
        type: '0'
      },
      loadingFull: false
    }
  },
  watch: {
    'searchParams.type'() {
      this.searchParams.page_index = 1
    }
  },
  created() {
    this.getUpgradeList()
  },
  methods: {
    // 选项卡切换
    handleTagToggle(tab) {
      this.searchParams.type = tab.name
      this.getUpgradeList()
    },
    // 获取列表
    async getUpgradeList() {
      this.loadingFull = true
      try {
        const res = await getUpgradeList(this.searchParams)
        const { message, code } = res
        if (code === 200) {
          const { data } = res
          const { list, total } = data
          this.table = list
          this.tableTotal = total
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`获取流水账单失败:${e}`)
      }
      this.loadingFull = false
    },
    // 确认升级
    handleUpgrade(row, type) {
      const msg = type === 1 ? '通过' : '驳回'
      const { id, user } = row

      this.$confirm(`确认将销售${user.nickname}${msg}升级审核`, '升级确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.setUpgrade(id, type)
      })
    },
    // 确认升级
    async setUpgrade(id, type) {
      const res = await setUpgrade({ id, type })
      try {
        const { message, code } = res
        if (code === 200) {
          this.$message.success(message)
          this.getUpgradeList()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`销售升级确认失败:${e}`)
      }
    },
    levelStatus(level) {
      return levelStatus(level)
    }
  }
}
</script>

<style lang="scss" scoped>
  .upgradeImgs{
    display: flex;
    justify-content: space-between;
  }
</style>
