@extends('layouts.base')

@section('content')
@section('title', trans('升级日志'))
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
<style>
#log_content .el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
#log_content .count {
    color:#8B92AD;
    margin-left: 15px;
}
</style>
<div class="all">
    <div id='log_content' >
        
    <!-- 搜索栏 -->
    <div class="vue-head">
        <div class="vue-main-title">
            <div class="vue-main-title-left"></div>
            <div class="vue-main-title-content">升级日志</div>
        </div>
        <el-form ref="form"   label-width="15%">
            <div class="vue-main-form">
                <el-row :gutter="10">
                    <el-col :span="5">
                        <el-input v-model="searchParams.id" placeholder="会员ID" clearable></el-input> 
                    </el-col>
                    <el-col :span="5">
                        <el-input v-model="searchParams.info" placeholder="会员昵称/姓名/手机号" clearable></el-input> 
                    </el-col>
                    <el-col :span="4">
                        <el-select v-model="searchParams.beforeLevel"  placeholder="升级前等级" clearable>
                            <el-option label="默认等级" value="-1"></el-option>
                            <el-option :label="level.name" :value="level.id" v-for="level in levels" :key="level.id" ></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        <el-select v-model="searchParams.afterLevel" placeholder="升级后等级" clearable>
                            <el-option label="默认等级" value="-1"></el-option>
                            <el-option :label="level.name" :value="level.id" v-for="level in levels" :key="level.id" ></el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-date-picker
                            v-model="searchParams.timeRange"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                        <el-button type="primary" @click="searchForm">搜索</el-button>
                    </el-col>
                </el-row>
            </div>
        </el-form>
    </div>

    <!-- 表格列表 -->
    <div class="vue-head">
        <div class="vue-main-title">
            <div class="vue-main-title-left"></div>
            <div class="vue-main-title-content">
                <span>升级列表</span>
                <span class="count">总数：[[orderPagination.total]]</span>
            </div>
        </div>
        <el-table  :data="tableData" v-loading="table_loading" v-loading="table_loading">
            <el-table-column  label="会员ID" prop="member.uid" fixed align="center">
            </el-table-column>
            <el-table-column  label="时间" prop="created_at" align="center">
            </el-table-column>
            <el-table-column  label="会员"  prop="avatar" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.member">
                        <img  :src="scope.row.member.avatar" alt="" style="width:40px;height:40px;border-radius:50%">
                        <div>[[scope.row.member.nickname]]</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column  label="升级前等级" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.before_level">
                        <div>ID:[[scope.row.before_level.id]] </div>
                        <div>[[scope.row.before_level.name]] </div>
                        <el-link type="primary" @click="toLevelEdit(scope.row.before_level.id)">等级设置</el-link>
                    </div>
                    <div v-else>默认等级</div>
                </template>
            </el-table-column>
            <el-table-column  label="升级后等级" prop="title" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.after_level">
                        <div>ID:[[scope.row.after_level.id]] </div>
                        <div>[[scope.row.after_level.name]] </div>
                        <el-link type="primary"  @click="toLevelEdit(scope.row.after_level.id)">等级设置</el-link>
                    </div>
                    <div v-else>默认等级</div>
                </template>
            </el-table-column>
            <el-table-column  label="升级方式"  prop="mold" align="center">
            </el-table-column>
            <el-table-column  label="升级类型"  prop="type" align="center">
            </el-table-column>
            <el-table-column  label="操作"  prop="created_at" align="center">
            <template slot-scope="scope">
                <div>
                    <el-link type="primary" @click="toRecord(scope.row.id)">达成记录</el-link>
                </div>
            </template>
            </el-table-column>
        </el-table>

        <div class="vue-page">
            <el-pagination style="text-align: right;" layout="prev, pager, next,jumper"
                :total="orderPagination.total" :current-page.sync="orderPagination.pages" :page-size="orderPagination.limit"
                @current-change="getData"
            ></el-pagination>
        </div>       
    </div>

    </div>
</div>

<script language='javascript'>
const Levels={!!json_encode($levels)!!};
const UrlStr = "{!! yzWebFullUrl('plugin.commission.admin.agent-log.search-datas') !!}"; // 日志列表请求接口
const levelEditUrl = "{!! yzWebFullUrl('plugin.commission.admin.level.edit') !!}"; // 分销商等级修改页
const recordUrl = "{!! yzWebFullUrl('plugin.commission.admin.agent-log.record') !!}"; // 分销商等级修改页


new Vue({
  el: "#log_content",
  delimiters: ["[[", "]]"],
  data: {
    tableData: [],
    levels: Levels,
    table_loading: false,
    searchParams: {
        id: '',
        info: '',
        beforeLevel: '',
        afterLevel: '',
        timeRange: []
    },
    orderPagination: {
      pages: 1,
      limit: 15,
      total: 50,
    },
  },
  mounted () {
      this.getData();
  },
  methods: {
    getData (page = this.orderPagination.pages) {
        let requestParams = {
            uid: this.searchParams.id,
            member: this.searchParams.info,
            before_level_id: this.searchParams.beforeLevel,
            after_level_id: this.searchParams.afterLevel,
        };
        if (this.searchParams.timeRange && this.searchParams.timeRange.length > 1) {
            requestParams.time = {};
            requestParams.time["start"] = this.searchParams.timeRange[0] / 1000;
            requestParams.time["end"] = this.searchParams.timeRange[1] / 1000;
        }
        this.table_loading = true;
        this.fetchData(UrlStr, {
            page,
            search: requestParams
        }).then(respone => {
            this.table_loading = false;
            let {data, total, per_page} = respone.data;
            this.tableData = data;
            this.orderPagination.total = total;
            this.orderPagination.limit = per_page;
        }).catch(() => {
            this.table_loading = false;
        })
    },
    searchForm () {
        this.orderPagination.pages = 1;
        this.getData();
    },
    toLevelEdit (levelId) {
        window.location.href = levelEditUrl + "&id=" + levelId;
    },
    toRecord (recordId) {
        window.location.href = recordUrl + "&id=" + recordId;
    },
    fetchData(URL, requestParams) {
      return new Promise((resolve, reject) => {
        this.$http
          .post(URL, requestParams)
          .then(function (response) {
            return response.json();
          })
          .then(({ result, data, msg }) => {
            if (result == 0) {
              this.$message({
                message: msg,
                type: "error",
              });
              reject({ result, data, msg });
            }
            resolve({ result, data, msg});
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
  },
});
</script>
@endsection