<template>
  <div class="integral-page">
    <el-form ref="searchFrom" :model="form" style="padding-top: 20px;background: white" label-width="80px" inline size="small">
      <el-form-item label="昵称">
        <el-input v-model="form.nickname" style="width: 120px;"></el-input>
      </el-form-item>
      <el-form-item label="用户ID">
        <el-input v-model="form.user_id" style="width: 80px;"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="获/抵方式">
        <el-select v-model="form.source" @change="getList" style="width: 150px;" clearable>
          <el-option
            v-for="(data,index) in sourceOption"
            :key="index"
            :label="data.value"
            :value="data.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button  type="primary" plain @click="getList">搜索</el-button>
        <el-button type="success" plain @click="addIntegral" v-if="!$store.state.readonly">变更用户积分</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="form.is_add" type="card" style="background: white;padding-top: 10px" @tab-click="getList">
      <el-tab-pane label="全部" name="-1"/>
      <el-tab-pane label="添加积分" name="1"/>
      <el-tab-pane label="减少积分" name="0"/>
      <el-tab-pane label="积分排行" name="-2"/>
    </el-tabs>
      <el-table
        :data="list"
        size="mini"
        style="width: 100%">
        <el-table-column
          width="220"
          className="f-c"
          label="用户">
          <template slot-scope="scope">
            <img class="avatar" :src="scope.row.avatar"/> {{scope.row.nickname}}(ID:{{scope.row.user_id}})<br>手机：{{scope.row.mobile}}
          </template>
        </el-table-column>
        <el-table-column
          v-if="form.is_add !== '-2'"
          label="来源">
          <template slot-scope="scope">
            {{scope.row.source | INTEGRALFUN}}
          </template>
        </el-table-column>
        <el-table-column
          prop="desc"
          v-if="form.is_add !== '-2'"
          label="积分变更描述"
        />
        <el-table-column
          v-if="form.is_add !== '-2'"
          label="变更积分值">
          <template slot-scope="scope">
            <span v-if="scope.row.is_add===1" style="color: green">+{{scope.row.value}}</span>
            <span v-if="scope.row.is_add===0" style="color: red">-{{scope.row.value}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="last_value"
          :label="form.is_add !== '-2'?'变更后积分值':'最新积分'"
        />
        <el-table-column
          prop="created_at"
          :label="form.is_add !== '-2'?'创建时间':'最新变更时间'"
        />
      </el-table>
      <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    <new-integral :newIntegral="newIntegral" @subAdd="subAdd" @showUserList="showUserList"/>
    <user-list-page :show="userListShow" @addUser="addUser"/>
  </div>
</template>

<script>
  import {getIntegralListApi,changeIntegralApi,integralApi} from "../../service/api";
  import {INTEGRALTYPE,INTEGRALFUN} from "../../util/wordbook";
  import page from '../framework/page'
  import newIntegral from './newIntegral'
  import userListPage from './userList'
  export default {
    name: "index",
    components: {
      page,
      newIntegral,
      userListPage
    },
    data(){
      let is_addOption = [];
      for(let k in INTEGRALTYPE){
        is_addOption.push({id:k,value:INTEGRALTYPE[k]})
      }
      let sourceOption = [];
      for(let j in INTEGRALFUN){
        sourceOption.push({id:j,value:INTEGRALFUN[j]})
      }
      return {
        list:[],
        total:0,
        newIntegral:{
          show:false,
          user_id:'',
          is_add:'',
          value:'',
          desc:''
        },
        is_addOption:is_addOption,
        sourceOption:sourceOption,
        limit:10,
        userListShow:{
          show:false
        },
        nowPage:1,
        form:{
          is_add:'-1',
          source:'',
          user_id:'',
          mobile:'',
          nickname:''
        }
      }
    },
    mounted(){
      this.initPage()
    },
    filters:{
      INTEGRALTYPE(value){
        return INTEGRALTYPE[value]
      },
      INTEGRALFUN(value){
        return INTEGRALFUN[value]
      }
    },
    methods:{
      subAdd(){
        let json = {
          user_id:this.newIntegral.user_id,
          is_add:this.newIntegral.is_add,
          value:this.newIntegral.value,
          desc:this.newIntegral.desc,
        };
        changeIntegralApi(json).then(res=>{
          this.getList();
          this.newIntegral.show = false
        })
      },
      showUserList(){
        this.userListShow.show = true
      },
      addUser(value){
        this.userListShow.show = false;
        this.newIntegral.user_id = value
      },
      changeUserList(){},
      addIntegral(){
        this. newIntegral={
            show:true,
            user_id:'',
            is_add:'',
            value:'',
            desc:''
        }
      },
      initPage(){
        this.form = {
          is_add:'-1',
          source:'',
          user_id:'',
          mobile:'',
          nickname:''
        };
        this.getList()
      },
      onPageChange(val){
        this.nowPage = val;
        this.getList()
      },
      onSizeChange(val){
        this.limit = val;
        this.nowPage = 1;
        this.getList()
      },
      getList(){
          let json={
            limit:this.limit,
            page: this.nowPage
          };
        if(this.form.is_add === '-2'){
          integralApi(json).then(res=>{
            this.list = res.list;
            this.total = res.total
          })
        }else{
          if(this.form.is_add !== '' && this.form.is_add !== '-1'){
            json.is_add = this.form.is_add
          }
          if(this.form.source !== ''){json.source = this.form.source}
          if(this.form.user_id !== ''){json.user_id = this.form.user_id}
          if(this.form.mobile !== ''){json.mobile = this.form.mobile}
          if(this.form.nickname !== ''){json.nickname = this.form.nickname}
          getIntegralListApi(json).then(res=>{
            this.list = res.list;
            this.total = res.total
          })
        }
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .avatar{
    width: 50px;
    min-width: 50px;
    height: 50px;
    margin-right: 5px;
    border-radius: 50%;
  }
</style>

<style>
  .f-c > .cell {
    display: flex !important;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
  }
</style>