<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="100px" 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="type">
                <el-select v-model="screenForm.type" placeholder="请选择角色类型" clearable>
                  <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="promotionGroupLeader">
                <el-select v-model="screenForm.promotionGroupLeader" placeholder="请选择是否团长" clearable>
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="是否内部人员" prop="innerr">
                <el-select v-model="screenForm.innerr" placeholder="请选择是否内部人员" clearable>
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="优惠码权限" prop="isExchangeCode">
                <el-select v-model="screenForm.isExchangeCode" placeholder="请选择优惠码权限" clearable>
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></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 clearable>
                  <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="12" :lg="6">
              <el-form-item label="注册日期" prop="issueDate">
                <el-date-picker
                  v-model="screenForm.issueDate"
                  type="daterange"
                  clearable
                  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" 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">
            
          </div>
          <div class="fr">
             <el-upload
           
            style="display: inline-block; margin-right: 10px"
            :action="baseURL + 'student/import'"
            :http-request="handleImport2"
            :file-list="importFileList2"
          >
            <el-button size="small" type="primary" :loading="importLoading2">{{ importLoading2 ? '导入中...' : '导入指定内部人员' }}</el-button>
          </el-upload>
             <!-- <el-button size="small" type="primary" icon="el-icon-download" @click="handleImport">导入跟新内部人员状态</el-button> -->
          
             <el-button size="small" @click="handleDownload">下载导入模板</el-button>
               <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="userId" min-width="180"></el-table-column>-->
            <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
                    v-if="scope.row.avatar.indexOf('http') >= 0"
                    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>
                  <el-image
                    v-else
                    style="width: 40px; height: 40px"
                    :src="$imageUrl + scope.row.avatar"
                    :preview-src-list="[$imageUrl + 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="country"></el-table-column>
            <el-table-column align="center" label="省份" prop="province"></el-table-column>
            <el-table-column align="center" label="城市" prop="city"></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="promotionGroupLeader" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.promotionGroupLeader ? '是':'否' }}
              </template>
            </el-table-column>
             <el-table-column align="center" label="是否内部人员" prop="innerr" min-width="110">
              <template slot-scope="scope">
                {{ scope.row.innerr ? '是':'否' }}
              </template>
            </el-table-column>
             <el-table-column align="center" label="优惠码权限" prop="isExchangeCode" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.isExchangeCode ? '有':'无' }}
              </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="商户" prop="companyName" min-width="120" 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="200">
              <template slot-scope="{ row }">
                <el-button type="text" @click="queryMemberDetail(row)">详情</el-button>
                <el-popconfirm v-if="!row.status" style="margin-left: 10px;" title="确定启用吗？" @onConfirm="changeStatus(row.userId, true)" >
                  <el-button slot="reference" type="text" style="color: #67c23a">启用</el-button>
                </el-popconfirm>
                <el-popconfirm v-else style="margin-left: 10px;" title="确定禁用吗？" @onConfirm="changeStatus(row.userId, false)" >
                  <el-button slot="reference" type="text" style="color: #f56c6c">禁用</el-button>
                </el-popconfirm>
                <el-popconfirm v-if="!row.promotionGroupLeader" style="margin-left: 10px;" title="确定设为团长吗？" @onConfirm="changeHeadStatus(row.userId, true)" >
                  <el-button slot="reference" type="text">设为团长</el-button>
                </el-popconfirm>
                <el-popconfirm v-else style="margin-left: 10px;" title="确定取消团长吗？" @onConfirm="changeHeadStatus(row.userId, false)" >
                  <el-button slot="reference" type="text">取消团长</el-button>
                </el-popconfirm>
                <el-popconfirm v-if="!row.innerr" style="margin-left: 10px;" title="确定设为内部人员吗？" @onConfirm="changeInternalPersonnelStatus(row.userId, true)" >
                  <el-button slot="reference" type="text">设为内部人员</el-button>
                </el-popconfirm>
                <el-popconfirm v-else style="margin-left: 10px;" title="确定取消内部人员吗？" @onConfirm="changeInternalPersonnelStatus(row.userId, false)" >
                  <el-button slot="reference" type="text">取消内部人员</el-button>
                </el-popconfirm>
                <el-popconfirm v-if="!row.isExchangeCode && row.type == 'SERVICE'" style="margin-left: 10px;" title="确定添加优惠码权限吗？" @onConfirm="changeExchangeCodeStatus(row.userId, true)" >
                  <el-button slot="reference" type="text">添加优惠码权限</el-button>
                </el-popconfirm>
                <el-popconfirm v-else-if="row.isExchangeCode && row.type == 'SERVICE'" style="margin-left: 10px;" title="确定取消优惠码权限吗？" @onConfirm="changeExchangeCodeStatus(row.userId, false)" >
                  <el-button slot="reference" type="text">取消优惠码权限</el-button>
                </el-popconfirm>
              </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, changeHeadStatus, getWebsiteList,changeInternalPersonnelStatus, updateMember} from "@/api/member";
import MemberDetail from "@/components/Mall/Member/member-detail";
import {downloadFiles,handleImport} from '@/utils/util'

export default {
  name: "index",
  components: {
    MemberDetail
  },
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      importLoading2: false, // 导入加载loading
      importFileList2: [], // 导入列表
      dataList: null, // 列表数据
      listLoading: true, // 列表加载loading
      screenForm: { // 筛选表单数据
        keyword: '', // 会员昵称/电话
        issueDate: '', // 创建时间
        type: '', // 角色类型
        websitId: '', // 网点名称
        promotionGroupLeader: '',
        innerr: '',
        isExchangeCode: '',
      },
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      queryUser: {}, // 查询
      websiteList: [],
      select_type: COMMON_SELECT.MEMBER_CURRENT_TYPE
    }
  },
  created() {
    this.getList();
    this.getWebsiteList();
  },
  methods: {
    // 导入跟新内部人员状态
    async handleImport2(param) {
      console.log(param)
      this.importLoading2 = true;
      const file = param.file;
      const formData = new FormData();
      formData.append("file", file);
      let result = await handleImport('/member/localUpdateInner', formData);
      this.importLoading2 = false;
      this.importFileList2 = [];
      if(result.code == 200) {
        this.$alert(result.message, '导入成功', {
          confirmButtonText: '确定'
        });
        this.getList();
      }else {
        this.$alert(result.message, '导入失败', {
          confirmButtonText: '确定'
        });
      }
    },
     // 下载导入模版
    handleDownload() {
      downloadFiles('/member/downLoadUserInnerTimplate');
    },

    // 网点列表
    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,
        promotionGroupLeader: this.screenForm.promotionGroupLeader,
        innerr: this.screenForm.innerr,
        isExchangeCode: this.screenForm.isExchangeCode,
        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()
      })
    },

    // 操作 - 更改团长状态(type: 正常false，禁用true)
    changeHeadStatus(id, type) {
      changeHeadStatus({userId: id, promotionGroupLeader: type}).then(() => {
        this.getList()
        this.$successMsg()
      })
    },

    // 操作 - 更改内部人员状态(type: 正常false，禁用true)
    changeInternalPersonnelStatus(id, type) {
      changeInternalPersonnelStatus({userId: id, inner: type}).then(() => {
        this.getList()
        this.$successMsg()
      })
    },

    // 操作 - 更改优惠码权限状态(type: 正常false，禁用true)
    changeExchangeCodeStatus(id, type) {
      updateMember({userId: id, isExchangeCode: type}).then(() => {
        this.getList()
        this.$successMsg()
      })
    },

    // 查看详情
    queryMemberDetail(user) {
      this.queryUser = user
    },
    // 详情返回显示列表
    backListFromMemberDetail() {
      this.queryUser = {}
    },

    //导入
    handleImport(){

    },
    // 导出
    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,
        promotionGroupLeader: this.screenForm.promotionGroupLeader,
        innerr: this.screenForm.innerr,
        isExchangeCode: this.screenForm.isExchangeCode,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      };
      downloadFiles('member/export', screenData);
    },
  },
  computed: {
    isShowMemberDetail() {
      return this.queryUser.hasOwnProperty('userId')
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-image-viewer__wrapper .el-icon-circle-close {
    color: #ffffff !important;
    font-size: 60px;
  }
  .table ::v-deep .el-button {
    padding: 6px 0;
  }
</style>
