<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: width+'px'}">
      <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 {
      width: 0,
      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();
    this.width = window.innerWidth - 200;
  },
  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>