<template>
  <div class="integral-page">
    <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: 100%">
      <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 {
        searchFrom:{
          user_id:'',
          sub_user_id:""
        },
        userList:[],
        total:0,
        nowPage:1,
        limit: 10,
        showDetail:false
      }
    },
    mounted(){
      this.getUser()
    },
    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>