@extends('layouts.base')
@section('title', "查看会员")
@section('content')
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}" />
<style>
</style>
<div class="all">
  <div id="app" v-cloak>
    <div class="vue-head">
      <div class="vue-main-title" style="margin-bottom:20px">
        <div class="vue-main-title-left"></div>
        <div class="vue-main-title-content">查看会员</div>
        <div class="vue-main-title-button">
        </div>
      </div>
      <div class="vue-search">
        <el-form :inline="true" :model="search_form" class="demo-form-inline">
          <el-form-item label="">
            <el-input v-model="search_form.member_info" placeholder="会员ID/昵称/名称/手机号"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-date-picker v-model="times" type="datetimerange" value-format="timestamp" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="margin-left:5px;" align="right">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="">
            <el-button type="primary" @click="search(1)">搜索</el-button>
          </el-form-item>
        </el-form>

      </div>


    </div>
    <div class="vue-main" v-if="choose_index==1">
      <div>
        <div class="vue-main-title" style="margin-bottom:20px">
          <div class="vue-main-title-left"></div>
          <div class="vue-main-title-content" style="flex:0 0 120px">会员列表</div>
          <div class="vue-main-title-button">
            <!-- <el-button type="primary" plain icon="el-icon-plus" size="small" @click="addModal">添加</el-button> -->
          </div>
        </div>
        <el-table :data="list" style="width: 100%">
          <el-table-column label="时间" align="center" prop="created_at"></el-table-column>
          
          <el-table-column label="会员id" align="center" prop="member_id"></el-table-column>
          <el-table-column label="会员" align="center" prop="display_order">
            <template slot-scope="scope">
              <div>
                <div v-if="scope.row.avatar">
                  <img :src="scope.row.avatar" alt="" style="width:40px;height:40px;border-radius:50%">
                </div>
                <div @click="gotoMember(scope.row.member_id)" style="line-height:32px;color:#29BA9C;cursor: pointer;" class="vue-ellipsis">[[scope.row.nickname]]</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="姓名/手机号" align="center" prop="link">
            <template slot-scope="scope">
              <div>
                <div>[[scope.row.realname]]</div>
                <div>[[scope.row.mobile]]</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="作品" align="center" prop="invitation_count"></el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 分页 -->
    <div class="vue-page" v-if="total>0">
        <el-row>
            <el-col align="right">
                <el-pagination layout="prev, pager, next,jumper" @current-change="search" :total="total"
                    :page-size="per_page" :current-page="current_page" background
                    ></el-pagination>
            </el-col>
        </el-row>
    </div>
  </div>
</div>

<script>
  var app = new Vue({
    el: "#app",
    delimiters: ['[[', ']]'],
    name: 'test',
    data() {
      return {
        choose_index: '1',
        list: [],
        search_form: {},
        times: [],
        rules: {},
        current_page: 1,
        total: 1,
        per_page: 1,
      }
    },
    created() {

    },
    mounted() {
      this.search_form.circle_id = this.getParam("circle_id");
      this.getData(1);
    },
    methods: {
      getParam(name) { 
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
          var r = window.location.search.substr(1).match(reg); 
          if (r != null) return unescape(r[2]); 
          return null; 
      },
      getData(page) {
        let json = {
            page:page
        }
        for(let i in this.search_form) {
            if(this.search_form[i]) {
                json[i] = this.search_form[i]
            }
        }
        if(this.times&&this.times!=null&&this.times.length) {
            json.created_start = this.times[0] / 1000
            json.created_end = this.times[1] / 1000
        }
        let loading = this.$loading({target: document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
        this.$http.post('{!! yzWebFullUrl('plugin.circle.admin.circle.getCircleMemberList') !!}', json).then(function(response) {
          if (response.data.result) {
            this.list = response.data.data.data;
            this.current_page = response.data.data.current_page;
            this.total = response.data.data.total;
            this.per_page = response.data.data.per_page;
            loading.close();
          } else {
            this.$message({
              message: response.data.msg,
              type: 'error'
            });
          }
          loading.close();

        }, function(response) {
          this.$message({
            message: response.data.msg,
            type: 'error'
          });
          loading.close();
        });
      },
      gotoDetail(item) {
        let link = `{!! yzWebFullUrl('plugin.circle.admin.circle.getCircleMemberList') !!}` + `&circle_id=` + item.id;
        window.location.href = link;
      },
      search(val) {
        this.getData(val);
      },

      addModal() {
        let link = `{!! yzWebFullUrl('plugin.circle.admin.circle.edit') !!}`;
        console.log(link);
        window.location.href = link;
      },
      

      gotoMember(id) {
        window.location.href = `{!! yzWebFullUrl('member.member.detail') !!}` + `&id=` + id;
      },
      

    },
  })
</script>
@endsection