<template>
  <div class="app-container">
    <el-input
      v-model="searchParams.search_name"
      type="text"
      placeholder="代理昵称 / 手机号"
      style="width: 300px"
    />
    <el-select v-model="searchParams.cycle" placeholder="请选择登录周期">
      <el-option
        v-for="(v, k, i) in cycleList"
        :key="i"
        :label="v"
        :value="k"
      />
    </el-select>
    <el-select v-model="searchParams.type">
      <el-option label="已登录" value="1" />
      <el-option label="未登录" value="0" />
    </el-select>
    <el-select v-model="searchParams.level">
      <el-option label="全部" value="" />
      <el-option label="代理公司" value="3" />
      <el-option label="销售经理" value="2" />
      <el-option label="销售主管" value="1" />
    </el-select>
    <el-button type="primary" @click="search">搜索</el-button>
    <div class="total_money" style="margin: 20px 0">
      <span>代理公司: <i class="red">{{ total.crown }}</i></span>
      <span>销售经理: <i class="red">{{ total.top }}</i></span>
      <span>销售主管: <i class="red">{{ total.super }}</i></span>
    </div>
    <el-table
      :data="LoginList"
      :header-cell-style="{ background: '#f8fbfc' }"
      border
      stripe
      style="margin: 20px 0"
    >
      <el-table-column
        prop="nickname"
        label="代理昵称"
        align="center"
      />
      <el-table-column
        prop="mobile"
        label="代理手机号"
        align="center"
      />
      <el-table-column
        prop="realname"
        label="真实姓名"
        align="center"
      />
      <el-table-column
        label="代理等级"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-tag
            :color="levelStatus(row.level).color"
            style="color:#ffffff;"
          >
            {{ levelStatus(row.level).name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="login_log_count"
        label="最近一次登录时间"
        align="center"
      >
        <template slot-scope="{ row: { login_at } }">
          {{ login_at || '暂未登录' }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-button type="text" @click="loginInfo.id = row.id;loginInfo.page = 1;getLoginInfo()">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="LoginTotal"
      :limit="searchParams.page_size"
      :page="searchParams.page_index"
      style="margin-top:0"
      @pagination="changePagination"
      @update:limit="changePagination"
    />
    <el-drawer
      title="登录详情"
      :visible.sync="loginVis"
      direction="rtl"
    >
      <div class="login_info_list">
        <el-table
          :data="loginInfoList"
          :header-cell-style="{ background: '#f8fbfc' }"
          border
          stripe
          style="margin-bottom: 20px"
        >
          <el-table-column
            prop="created_at"
            label="登录时间"
            align="center"
          />
          <el-table-column
            prop="phone"
            label="手机号"
            align="center"
          />
          <el-table-column
            prop="type"
            label="登录方式"
            align="center"
          >
            <template slot-scope="{ row }">
              {{ row.type | loginStatus }}
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="loginInfoTotal"
          :limit="loginInfo.page_size"
          :page="loginInfo.page_index"
          style="margin-top:0"
          @pagination="changeLoginInfoPagination"
          @update:limit="changeLoginInfoPagination"
        />
      </div>
    </el-drawer>
  </div>
</template>
<script>
import * as apis from '@/api/loginTime'
// 公共方法
import {
  levelStatus
} from '@/filters/common'
export default {
  filters: {
    loginStatus(status) {
      let out = ''
      switch (+status) {
        case 1:
          out = '账号密码登录'
          break
        case 2:
          out = '手机号登录'
          break
        case 3:
          out = '微信登录'
          break
        case 4:
          out = '注册登录'
          break
        default:
          out = '未知方式'
          break
      }
      return out
    }
  },
  data() {
    return {
      searchParams: {
        page_index: 1,
        page_size: 20,
        search_name: '',
        cycle: '',
        type: '1',
        level: ''
      },
      cycleList: {},
      LoginList: [],
      LoginTotal: 0,
      loginVis: false,
      loginInfoList: [],
      loginInfoTotal: 0,
      loginInfo: {
        id: '',
        page_index: 1,
        page_size: 20
      },
      total: {
        crown: 0,
        top: 0,
        super: 0
      }
    }
  },
  watch: {
    'searchParams.cycle'(a) {
      this.search()
    },
    'searchParams.type'(a) {
      this.search()
    },
    'searchParams.level'(a) {
      this.search()
    }
  },
  created() {
    this.levelStatus = levelStatus
    this.getLoginList()
    this.getCycleList()
  },
  methods: {
    search() {
      this.searchParams.page_index = 1
      this.getLoginList()
    },
    getLoginInfo() {
      const loading = this.$loading()
      apis.loginInfo(this.loginInfo).then(res => {
        loading.close()
        if (res.code === 200) {
          this.loginInfoList = res.data.list
          this.loginInfoTotal = res.data.total
          this.loginVis = true
        } else {
          this.$message.error(res.message || '获取登录详情失败')
        }
      }).catch(e => {
        loading.close()
        this.$message.error('获取登录详情失败')
      })
    },
    changeLoginInfoPagination(data) {
      const { page, limit } = data
      this.loginInfo.page_size = limit
      this.loginInfo.page_index = page
      this.getLoginInfo()
    },
    changePagination(data) {
      const { page, limit } = data
      this.searchParams.page_size = limit
      this.searchParams.page_index = page
      this.getLoginList()
    },
    getLoginList() {
      const loading = this.$loading()
      apis.loginList(this.searchParams).then(res => {
        loading.close()
        if (res.code === 200) {
          this.LoginList = res.data.list.data
          this.LoginTotal = res.data.total
          this.total.crown = res.data.list.crown
          this.total.top = res.data.list.top
          this.total.super = res.data.list.super
        } else {
          this.$message.error(res.message || '获取登录列表失败')
        }
      }).catch(() => {
        loading.close()
        this.$message.error('获取登录列表失败')
      })
    },
    getCycleList() {
      const loading = this.$loading()
      apis.cycleList().then(res => {
        loading.close()
        if (res.code === 200) {
          this.cycleList = res.data
        } else {
          this.$message.error(res.message || '获取周期列表失败')
        }
      }).catch(() => {
        loading.close()
        this.$message.error('获取周期列表失败')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.login_info_list {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  min-height: 100%;
}
.total_money {
  margin-bottom: 15px;

  span {
    display: inline-block;
    margin-right: 15px;
  }

  .red {
    display: inline-block;
    color: crimson;
    font-size: 18px;
  }
}
</style>
