<template>
  <div class="admin-refresh" v-loading="loading">

    <!--为了共享user权限-->
    <user-detail v-if="inDetail"></user-detail>

    <div v-else>
      <div class="section-search">
        <el-form ref="searchFrom" :model="searchFrom" label-width="80px" inline>
          <el-form-item>
            <el-input v-model="searchFrom.userId" placeholder="ID" clearable @change="getUser"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="searchFrom.nickName" placeholder="昵称" clearable @change="getUser"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="searchFrom.mobile" placeholder="电话" clearable @change="getUser"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="searchFrom.level" placeholder="等级" clearable @change="getUser"></el-input>
          </el-form-item>
          <!--<el-form-item label="标签">
            <el-cascader
              style="width: 320px" placeholder="选择标签" clearable @change="tagChange"
              :options="options" :props="{ multiple: true, checkStrictly: true }"></el-cascader>
          </el-form-item>-->
          <el-form-item>
            <div class="flexRow">
              <el-button type="primary" plain @click="getUser">搜索</el-button>
              <!--<el-button type="success" plain @click="syncUser">同步最新数据</el-button>-->
            </div>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :data="userList"
        style="width: 100%">
        <el-table-column className="f-c" label="用户">
          <template slot-scope="scope">
            <img class="avatar" :src="scope.row.avatar">{{scope.row.nickname}}<br>(ID:{{scope.row.user_id}})
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" width="110px"></el-table-column>
        <el-table-column prop="created_at" label="注册时间" sortable></el-table-column>
        <el-table-column prop="last_login_at" label="最后登录" sortable></el-table-column>
        <!--<el-table-column prop="last_login_at" label="最后登录时间" width="120px" sortable></el-table-column>-->
        <el-table-column prop="baby_name" label="宝宝名称"></el-table-column>
        <el-table-column prop="birthday" label="宝宝生日" width="110px"></el-table-column>
        <el-table-column prop="sex" label="宝宝性别" width="80px" :formatter="sexFormatter"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <!--<el-button size="mini" plain type="primary" @click="goToDetail(scope.row.user_id)">查看详情</el-button>-->
            <router-link :to="{path:'/user', query:{type: 'detail', userid: scope.row.user_id}}" target="_blank"><el-button size="mini" plain type="primary">查看详情</el-button></router-link>
            <el-button size="mini" v-if="!$store.state.readonly" plain type="warning" @click="userTransfer(scope.row)">用户转移</el-button>
          </template>
        </el-table-column>
      </el-table>
      <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
      <detail-dialog :dialogObj="dialogDetailObj" @changeShow="changeShow"/>
      <teacher-dialog :dialogObj="dialogObj" @reflash="getUser"></teacher-dialog>
      <el-dialog width="90%" top="5vh" :visible.sync="dialogDetail.show">
        <div v-if="dialogDetail.show">
          <user-detail :parentDetail="dialogDetail"></user-detail>
        </div>
      </el-dialog>
      <!--用户移交-->
      <el-dialog append-to-body :visible.sync="addShow" top="5vh" :title="`把 ${userObj.transfer_user_name} 转移为`">
        <el-form label-width="90px" inline>
          <el-form-item>
            <el-input style="width: 160px;" placeholder="ID" @change="getTransferUser" v-model="userObj.searchFrom.userId"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input style="width: 160px;" placeholder="昵称" @change="getTransferUser" v-model="userObj.searchFrom.nickName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input style="width: 160px;" placeholder="电话" @change="getTransferUser" v-model="userObj.searchFrom.mobile"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="getTransferUser">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-table border size="small" :data="userTransferList" ref="multipleTable" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column className="f-c" label="用户">
            <template slot-scope="scope">
              <img style="margin-right:8px;width: 50px;height: 50px;border-radius: 50px" :src="scope.row.avatar">{{scope.row.nickname}}(ID:{{scope.row.user_id}})
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="手机号"></el-table-column>
        </el-table>
        <page :total="userObj.total" :limit="userObj.limit" :small="true" @pageChange="onPageChange3" @sizeChange="onSizeChange3"/>
        <span slot="footer" class="dialog-footer">
        <el-button @click="addShow = false">取 消</el-button>
        <el-button type="primary" @click="transferSave">确 定</el-button>
      </span>
      </el-dialog>
    </div>

  </div>
</template>

<script>
  import {getUserListApi, getSyncUserApi, postUserTransferApi} from "../../service/api";
  import page from '../framework/page'
  import detailDialog from './detail'
  import teacherDialog from './dialog'
  import userDetail from '../userDetail/index'

  export default {
    name: "index",
    data() {
      return {
        inDetail: false,
        addShow: false,
        userTransferList: [],
        userObj: {
          title: '',
          show: false,
          total: 0,
          limit: 10,
          nowPage: 1,
          transfer_user_id: '',
          transfer_user_name: '',
          receive_user_id: '',
          receive_user_name: '',
          searchFrom: {
            nickName: '',
            mobile: '',
            level: '',
            userId: ''
          },
        },
        multipleSelection: [],

        searchFrom: {
          nickName: '',
          mobile: '',
          level: '',
          userId: ''
        },
        dialogDetail: {
          show: false,
          id: ''
        },
        userList: [],
        total: 0,
        nowPage: 1,
        limit: 10,
        showDetail: false,
        showId: '',
        dialogObj: {
          show: false,
          title: '绑定老师',
          id: 0,
          teacher_id: 0
        },
        dialogDetailObj: {
          show: false,
          id: ''
        },
        loading: false
      }
    },
    components: {
      page,
      detailDialog,
      userDetail,
      teacherDialog
    },
    watch: {
      $route(){
        if (this.$route.query.type && this.$route.query.type == 'detail') { // 详情页
          this.inDetail = true
        } else { // 列表页
          this.inDetail = false;
          this.getUser();
        }
        this.$route.query.id ? this.searchFrom.userId = this.$route.query.id : '';
      },
    },
    mounted() {
      if (this.$route.query.type && this.$route.query.type == 'detail') { // 详情页
        this.inDetail = true
      } else { // 列表页
        this.inDetail = false;
        this.getUser();
      }
      this.$route.query.id ? this.searchFrom.userId = this.$route.query.id : '';
    },
    methods: {
      userTransfer(row) {
        this.addShow = true;
        this.userObj.total = 0;
        this.userObj.nowPage = 1;
        this.getTransferUser();
        this.userObj.transfer_user_id = row.user_id;
        this.userObj.transfer_user_name = row.nickname;
        this.userObj.receive_user_id = '';
        this.userObj.receive_user_name = '';
      },
      transferSave() {
        if (this.multipleSelection.length === 0) {
          this.$message({
            type: 'error',
            message: '请选择用户!'
          });
          return
        } else if (this.multipleSelection.length !== 1) {
          this.$message({
            type: 'error',
            message: '只能选择一个用户!'
          });
          return
        } else if (!this.userObj.transfer_user_id || !this.userObj.transfer_user_name) {
          return
        }

        this.$confirm(`确定将
              <span style="color: red;">${this.userObj.transfer_user_name}</span> 转移为
              <span style="color: red;">${this.userObj.receive_user_name}</span> ?`, '提示', {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let json = {
            transfer_user_id: this.userObj.transfer_user_id,
            receive_user_id: this.userObj.receive_user_id,
          }
          postUserTransferApi(json).then(res => {
            this.$message({
              type: 'success',
              message: '用户转移成功!'
            });
            this.getUser();
            this.addShow = false;
            this.userObj.transfer_user_id = '';
            this.userObj.transfer_user_name = '';
            this.userObj.receive_user_id = '';
            this.userObj.receive_user_name = '';
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消转移'
          });
        });


      },
      onPageChange3(val) {
        this.userObj.nowPage = val
        this.getTransferUser()
      },
      onSizeChange3(val) {
        this.userObj.limit = val;
        this.userObj.nowPage = 1;
        this.getTransferUser()
      },
      getTransferUser() {
        let json = {
          page: this.userObj.nowPage,
          limit: this.userObj.limit,
        };
        if (this.userObj.searchFrom.userId) {
          json.user_id = this.userObj.searchFrom.userId
        }
        if (this.userObj.searchFrom.nickName) {
          json.nickname = this.userObj.searchFrom.nickName
        }
        if (this.userObj.searchFrom.mobile) {
          json.mobile = this.userObj.searchFrom.mobile
        }
        getUserListApi(json).then(res => {
          this.userTransferList = res.list;
          this.userObj.total = res.total;
        })
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.userObj.receive_user_name = val[0].nickname;
        this.userObj.receive_user_id = val[0].user_id;
      },

      sexFormatter(item) {
        if (item.sex == 0) {
          return '保密'
        }
        if (item.sex == 1) {
          return '男'
        }
        if (item.sex == 2) {
          return '女'
        }
      },
      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.userId) {
          json.user_id = this.searchFrom.userId
        }
        if (this.searchFrom.nickName) {
          json.nickname = this.searchFrom.nickName
        }
        if (this.searchFrom.mobile) {
          json.mobile = this.searchFrom.mobile
        }
        if (this.searchFrom.level) {
          json.level = this.searchFrom.level
        }
        getUserListApi(json).then(res => {
          // debugger
          this.userList = res.list;
          this.total = res.total
        })
      },
      detail(data) {
        this.dialogDetailObj = {
          show: true,
          id: data.user_id
        }
      },
      changeShow(data) {
        this.dialogDetailObj.show = data
      },
      bindTeacher(data) {
        this.dialogObj = {
          show: true,
          title: '绑定老师',
          id: data.user_id,
          teacher_id: data.teacher_id
        }
      },
      goToDetail(id) {
        this.dialogDetail.id = id;
        this.dialogDetail.show = true
        // this.$router.push('/userDetail/'+ id);
      },
      syncUser() {
        this.loading = true
        getSyncUserApi().then((data) => {
          this.loading = false
          this.$message({
            showClose: true,
            message: `已更新${data}条用户数据`,
            type: 'success'
          })
        }).catch(() => {
          this.loading = false
        })
      }
    }
  }
</script>

<style lang="less">
  /*@import "../../util/public";*/
  .user {
    /*height: 100%;*/
    overflow: auto;
    padding: 20px 0;

    .btn-content {
      text-align: center;
    }
  }

  .flexRow {
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
  }

</style>