<template>
  <div class="app-container">
    <div class="member-list" v-show="!isShowMemberDetail">
      <!-- 筛选条件 -->
      <div class="screen-container">
        <div class="top clearfix">
          <div class="title fl">条件筛选</div>
        </div>
        <el-form ref="screenForm" :model="screenForm" label-width="70px" size="small" label-position="left">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="会员名称" prop="keyword">
                <el-input v-model="screenForm.keyword" placeholder="请输入名称/电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="注册日期" prop="issueDate">
                <el-date-picker
                  v-model="screenForm.issueDate"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="角色类型" prop="type">
                <el-select v-model="screenForm.type" placeholder="全部">
                  <el-option label="全部" value=""></el-option>
                  <el-option :label="item.label" :value="item.value" v-for="(item, index) in select_type" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="网点名称" prop="websitId">
                <el-select v-model="screenForm.websitId" placeholder="全部" filterable>
                  <el-option label="全部" value=""></el-option>
                  <el-option :label="item.name" :value="item.id" v-for="(item, index) in websiteList" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="24" class="tr">
              <el-form-item label="">
                <el-button size="small" @click="resetScreenForm">清空</el-button>
                <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="mymain-container">
        <div class="btn-group clearfix">
          <div class="fl">
            <el-button size="small" @click="batchExamine()">批量审核</el-button>
          </div>
          <div class="fr">
            <el-button size="small" type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>
          </div>
        </div>

        <div class="table">
          <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
            <el-table-column align="center" label="昵称" prop="nickName" min-width="140" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="电话" prop="mobile" min-width="120"></el-table-column>
            <el-table-column align="center" label="性别" prop="sex"></el-table-column>
            <el-table-column align="center" label="头像" prop="avatar">
              <template slot-scope="scope">
                <div class="demo-image__preview">
                  <el-image
                    style="width: 40px; height: 40px"
                    :src="scope.row.avatar"
                    :preview-src-list="[scope.row.avatar]">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="角色" prop="type" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.type | MEMBER_CURRENT_TYPE_FILTER }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="所属网点" prop="websitName" min-width="140" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="状态" class-name="status-col">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status ? 'success' : 'danger'">{{ scope.row.status | MEMBER_CURRENT_STATUS_FILTER }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="创建时间" prop="createTime" min-width="160"></el-table-column>
            <el-table-column align="center" label="操作" fixed="right" min-width="100">
              <template slot-scope="{ row }">
                <el-button type="text" @click="queryMemberDetail(row)">详情</el-button>
                <template v-if="checkBtnRole('status')">
                  <el-popconfirm v-if="!row.status" style="margin-left: 10px;" title="确定恢复吗？" @onConfirm="changeStatus(row.userId, true)" >
                    <el-button slot="reference" type="text">恢复</el-button>
                  </el-popconfirm>
                  <el-popconfirm v-else style="margin-left: 10px;" title="确定禁用吗？" @onConfirm="changeStatus(row.userId, false)" >
                    <el-button slot="reference" type="text">禁用</el-button>
                  </el-popconfirm>
                </template>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="pagination clearfix">
          <div class="fr">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="listTotal">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <MemberDetail :user="queryUser" v-if="isShowMemberDetail" @backListFromDetail="backListFromMemberDetail" />
  </div>
</template>

<script>
import { COMMON_SELECT } from '@/utils/select_data'
import {getMemberList, changeMemberStatus, getWebsiteList} from "@/api/member";
import MemberDetail from "@/components/Mall/Member/member-detail";
import {downloadFiles} from '@/utils/util'

export default {
  name: "index",
  components: {
    MemberDetail
  },
  data() {
    return {
      dataList: null, // 列表数据
      listLoading: true, // 列表加载loading
      screenForm: { // 筛选表单数据
        keyword: '', // 会员昵称/电话
        issueDate: '', // 创建时间
        type: '', // 角色类型
        websitId: '', // 网点名称
      },
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      queryUser: {}, // 查询
      websiteList: [],
      select_type: COMMON_SELECT.MEMBER_CURRENT_TYPE
    }
  },
  created() {
    this.getList();
    this.getWebsiteList();
  },
  methods: {
    // 查询按钮权限
    checkBtnRole(value) {
      // let btnRole = this.$route.meta.roles;
      // if(!btnRole) {return true}
      // let index = btnRole.indexOf(value);
      // return index >= 0 ? true : false;
      return true
    },

    // 网点列表
    getWebsiteList() {
      getWebsiteList({
        pageNum: 1,
        pageSize: 1000
      }).then(res => {
        this.websiteList = res.data.records;
      })
    },

    getList() {
      this.listLoading = true

      let params = {
        keyword: this.screenForm.keyword,
        startTime: this.screenForm.issueDate ? this.screenForm.issueDate[0] + ' 00:00:00' : null,
        endTime: this.screenForm.issueDate ? this.screenForm.issueDate[1] + ' 23:59:59' : null,
        type: this.screenForm.type,
        websitId: this.screenForm.websitId,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }

      getMemberList(params).then(res => {
        this.dataList = res.data.records
        this.listTotal = res.data.total
        this.listLoading = false
      })
    },
    // 提交筛选表单
    submitScreenForm() {
      this.currentPage = 1
      this.getList()
    },
    // 重置筛选表单
    resetScreenForm() {
      this.$refs.screenForm.resetFields()
      this.currentPage = 1
      this.getList()
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getList()
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },
    // 操作 - 更改学员状态(type: 正常false，禁用true)
    changeStatus(id, type) {
      changeMemberStatus({userId: id, status: type}).then(() => {
        this.getList()
        this.$successMsg()
      })
    },
    // 查看详情
    queryMemberDetail(user) {
      this.queryUser = user
    },
    // 详情返回显示列表
    backListFromMemberDetail() {
      this.queryUser = {}
    },

    // 导出
    handleExport() {
      let screenData = {
        keyword: this.screenForm.keyword,
        startTime: this.screenForm.issueDate ? this.screenForm.issueDate[0] + ' 00:00:00' : null,
        endTime: this.screenForm.issueDate ? this.screenForm.issueDate[1] + ' 23:59:59' : null,
        type: this.screenForm.type,
        websitId: this.screenForm.websitId,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      };
      downloadFiles('member/export', screenData);
    },
  },
  computed: {
    isShowMemberDetail() {
      return this.queryUser.hasOwnProperty('userId')
    }
  }
}
</script>

<style lang="scss">
  .el-image-viewer__wrapper .el-icon-circle-close {
    color: #ffffff !important;
    font-size: 60px;
  }
</style>
