<template>
  <div class="admin-refresh">
    <el-form
      ref="searchFrom"
      :model="searchFrom"
      style="padding-top:20px;"
      label-width="80px"
      inline
    >
      <el-form-item label="主账户ID">
        <el-input v-model="searchFrom.user_id"></el-input>
      </el-form-item>
      <el-form-item label="子账户ID">
        <el-input v-model="searchFrom.sub_user_id"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="getUser">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="userList" :style="{width: width+'px'}">
      <el-table-column className="f-c" label="主账户">
        <template slot-scope="scope">
          <img class="avatar" :src="scope.row.user_avatar" />
          {{scope.row.user_nickname}}(ID:{{scope.row.user_id}})
        </template>
      </el-table-column>
      <el-table-column className="f-c" label="子账户">
        <template slot-scope="scope">
          <img class="avatar" :src="scope.row.sub_user_avatar" />
          {{scope.row.sub_user_nickname}}(ID:{{scope.row.sub_user_id}})
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="绑定时间"></el-table-column>
      <el-table-column prop="unbind_at" label="解绑时间">
        <template
          slot-scope="scope"
        >{{scope.row.unbind_at=='0000-00-00 00:00:00'?'未解绑':scope.row.unbind_at}}</template>
      </el-table-column>
    </el-table>
    <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange" />
  </div>
</template>

<script>
import { getSubAccountListApi, getOldListApi } from "../../service/api";
import { INTEGRALTYPE, INTEGRALFUN } from "../../util/wordbook";
import page from "../framework/page";
export default {
  name: "index",
  components: {
    page
  },
  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,
      searchFrom: {
        user_id: "",
        sub_user_id: ""
      },
      userList: [],
      total: 0,
      nowPage: 1,
      limit: 10,
      showDetail: false
    };
  },
  mounted() {
    this.getUser();
    this.width = window.innerWidth - 200;
  },
  filters: {
    INTEGRALTYPE(value) {
      return INTEGRALTYPE[value];
    },
    INTEGRALFUN(value) {
      return INTEGRALFUN[value];
    }
  },
  methods: {
    onPageChange(val) {
      this.nowPage = val;
      this.getUser();
    },
    onSizeChange(val) {
      this.limit = val;
      this.nowPage = 1;
      this.getUser();
    },
    getUser() {
      let json = {
        page: this.nowPage,
        limit: this.limit
      };
      if (this.searchFrom.user_id) {
        json.user_id = this.searchFrom.user_id;
      }
      if (this.searchFrom.sub_user_id) {
        json.sub_user_id = this.searchFrom.sub_user_id;
      }
      getSubAccountListApi(json).then(res => {
        this.userList = 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>