<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs='crumbs'></bread-crumb>
      <el-button  style="float:right;" type="primary" size="small" icon="el-icon-circle-plus-outline">添加会员</el-button>
    </div>
    <div class="app-container">
          <div style="margin-bottom: 10px">
            <el-row :gutter="24">
              <el-col :span="8">
                  <el-input style="width: 300px" v-model="listQuery.search" placeholder="请输入您需要搜索的内容"></el-input>
                  <el-button type="primary"  icon="el-icon-search" @click="changeKey">搜索</el-button>
              </el-col>
            </el-row>
          </div>
          <div class="cell clearfix">
            <label class="title"> <span class="name">创建时间</span>: </label>
            <el-date-picker v-model="listQuery.start_time" prefix-icon="el-icon-date"  @change="changeTime" :editable="false" style="width: 196px;" type="date" placeholder="选择日期时间"
            align="right" format="yyyy-MM-dd" value-format="yyyy-MM-dd" ></el-date-picker>
            <span class>-</span>
            <el-date-picker v-model="listQuery.end_time" prefix-icon="el-icon-date" @change="changeTime" :editable="false" style="width: 196px;" type="date" placeholder="选择日期时间"
            align="right" format="yyyy-MM-dd" value-format="yyyy-MM-dd" ></el-date-picker>
        </div>
          <div class="cell clearfix">
            <label class="title"><span class="name">等级</span>:</label>
             <div class="time">
                <ul class="">
                  <li :class="0==levelType?'active':''"  @click="selectLevel(0)">全部</li>
                  <li :class="item.id==levelType?'active':''"  v-for="item in levelCards" :key="item.id"  @click="selectLevel(item.id)">{{item.card_name}}</li>
                </ul>
             </div>
          </div>
          <div class="cell clearfix">
            <label class="title"><span class="name">来源方式</span>:</label>
             <div class="time">
                <ul class="">
                  <li :class="0==sourceType?'active':''"  @click="selectSource(0)">全部</li>
                  <li :class="item.id==sourceType?'active':''"  v-for="item in sourceOptions" :key="item.id"  @click="selectSource(item.id)">{{item.name}}</li>
                </ul>
             </div>
          </div>
          <div class="cell clearfix">
            <label class="title"><span class="name">标签</span>:</label>
             <div class="time">
                <ul class="">
                  <li :class="0==tagType?'active':''"  @click="selectTag(0)">全部</li>
                  <li :class="item.id==tagType?'active':''"  v-for="item in tagOptions" :key="item.id"  @click="selectTag(item.id)">{{item.tag_name}}</li>
                </ul>
             </div>
          </div>
          <div class="filter-container" style="margin-top: 10px;margin-left: 5px">
            <el-checkbox style="width: 30px"  >全选</el-checkbox>
            <el-button size="small" icon="el-icon-delete" >删除</el-button>
            <el-button size="small" icon="el-icon-delete" >删除</el-button>
          </div>
          <el-table ref="multipleTable" :cell-class-name="cellStyleName" :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}" :data="membersData" border fit highlight-current-row  style="width: 100%;margin-top: 10px;">
             <el-table-column
                align="center"
                type="selection"
                width="55">
             </el-table-column>
             <el-table-column label="会员" align="center">
               <template slot-scope="scope">
                   <img :src="memberAvatar(scope.row)" alt="" srcset="" style="width:50px;height:50px; border-radius:50%" >
                   <span>{{scope.row.name}}</span>
               </template>
             </el-table-column>
            <el-table-column label="文章标题" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="阅读量" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="评论数" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="点赞数" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-edit-outline"
                    >
                  </el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10,20,50,100]"
            :page-size="10"
            background
            style="margin-top:20px;float: right"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
    </div>
  </div>
</template>

<script>
  import {GetMembers} from "@/api/member/member";
  import BreadCrumb from '../components/bread-crumb'
  export default {
    name: 'commentList',
    components:{
      BreadCrumb
    },
    data(){
      return{
        crumbs: [
          { path: false, name: '会员管理' },
          { path: false, name: '会员列表' }
        ],
        time: '',
        active: true,
        levelType: 0,
        levelCards:[],
        sourceType: 0,
        sourceOptions:{},
        tagType: 0,
        tagOptions:[],
        membersData:[],
        total:0,
        listQuery:{
            page:1,
            limit:10,
            search:'',
            start_time:'',
            end_time:'',
            source:0,
            tag:0,
            level:0,
            init:1,
        },
      }
    },
    methods:{
        GetMembers(){
            GetMembers(this.listQuery).then(response=>{
                var res = response.data;
                if(res.state == 1) {
                    this.membersData = res.data.members;
                    this.total = res.data.total;
                    if(typeof(res.data.cards) != 'undefined') {
                        this.levelCards = res.data.cards;
                    }
                    if(typeof(res.data.tags) != 'undefined') {
                        this.tagOptions = res.data.tags;
                    }
                    this.listQuery.init = 0;
                }else {
                    this.$message.error(res.msg);
                }
            }).catch(e=>{});
        },
        memberAvatar(row) {
            if(typeof(row.avatar) == "undefined" || !row.avatar || row.avatar.length==0) {
                if(row.gender == 2) {
                    return 'https://images.shengws.com/201809182128222.png';
                }else {
                    return 'https://images.shengws.com/201809182128111.png';
                }
            }else {
                return row.avatar
            }
        },
        cellStyleName({row, column, rowIndex, columnIndex}){
            if (columnIndex===1) {
                return 'member-name-box';
            }
            return '';
        },
        selectSource(id) {
            this.listQuery.source = id;
            this.sourceType = id;
            this.GetMembers();
        },
        selectLevel(id) {
            this.listQuery.level = id;
            this.levelType = id;
            this.GetMembers();
        },
        selectTag(id) {
            this.listQuery.tag = id;
            this.tagType = id;
            this.GetMembers();
        },
        changeKey(){
            this.GetMembers();
        },
        changeTime(){
            this.GetMembers();
        },
        handleSizeChange(limit) {
            this.listQuery.limit = limit;
            this.GetMembers();
        },
        handleCurrentChange(page) {
            this.listQuery.page = page;
            this.GetMembers();
        }
    },
    created(){
        this.sourceOptions = this.$store.getters.sources;
        this.GetMembers();
    }
  }
</script>

<style scoped>
  /*.app-container .cell.clearfix .time ul li {*/
    /*float: left;*/
    /*list-style: none;*/
    /*cursor: pointer;*/
    /*padding: 6px 20px;*/
    /*color: #606266;*/
    /*border-radius: 4px;*/
    /*margin: 0 8px 0 0;*/
    /*font-size: 14px;*/
    /*text-align: center;*/
  /*}*/
</style>

<style>

.member-name-box .cell{
    float: left;
    text-align: left;
};
</style>
