<template>
  <div class="layout-no-cols">
    <div class="padding-top-bottom">
      <div v-if="!isAgent && !isEntrust" class="right">
        <tree-select :value.sync="branchInnerCode" :items="branches" :itemsOptions="treeItemsOptions" width="170" :clearable="true" placeholder="请选择所属机构">
        </tree-select>
        <el-input type="text" v-model="searchContent" @keyup.enter.native="commitSearch" style="width:200px;" auto-complete="off" placeholder="请输入用户名或者姓名">
          <el-button type="text" slot="append" title="搜索" @click="commitSearch"><i class="fa fa-search"></i></el-button>
        </el-input>
      </div>

      <el-table ref="userTable" tooltip-effect="dark" style="width: 100%" :data-read-url="getUsersURL" :page-size="10" :auto-get-data="false">
        <el-table-column type="index" width="60" align="center"></el-table-column>
        <el-table-column prop="userName" label="用户名"></el-table-column>
        <el-table-column prop="realName" label="真实姓名"></el-table-column>
        <el-table-column label="所属机构">
          <template slot-scope="scope">
            {{scope.row.branchName}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="right">
          <template slot-scope="scope">
            <el-button v-if="isAgent" @click="changeLoginUserHandler(scope.row.userName)" type="text" size="small" class="entrust-text">切换用户</el-button>
            <el-button v-else-if="isEntrust" @click="cancelEntrustUser(scope.row.userName)" type="text" size="small" class="entrust-text">取消委托</el-button>
            <el-button v-else @click="addEntrustUser(scope.row.userName)" type="text" size="small" class="entrust-text">委托</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import TreeSelect from '@src/components/TreeSelect.vue'
import util from '@src/common/util.js'
export default {
  data() {
    return {
      branchInnerCode: '',
      searchContent: '',
      branches: [],
      treeItemsOptions: {
        children: 'children',
        label: 'name',
        key: 'branchInnerCode'
      },
      isAgent: false,
      isEntrust: false,
      loading: true
    }
  },
  components: {
    'tree-select': TreeSelect
  },
  methods: {
    commitSearch() {
      this.$refs.userTable.getData()
    },
    getUsersURL() {
      if (this.isAgent) {
        return ['/ui/application/entrustusers', {}]
      } else {
        if (this.isEntrust) {
          return ['/ui/application/agentusers', {}]
        } else {
          return [
            '/ui/userselector/alluserdatabind',
            {
              params: {
                pageSize: 10,
                searchContent: encodeURIComponent(this.searchContent),
                branchInnerCode: this.branchInnerCode
              }
            }
          ]
        }
      }
    },
    async initEntrust() {
      let data = await axios.get('/ui/application/entrustinit').then(res => res.data)
      this.isAgent = data.agent ? data.agent : false
      this.isEntrust = data.entrust ? data.entrust : false
    },
    async addEntrustUser(userName) {
      let data = await axios.put('/ui/application/addentrust', { userName: userName }).then(res => res.data)
      if (data.status === 1) {
        util.showSuccess(data.message)
        this.loadEntrustListData()
      } else {
        util.showErrorMessageBox(data.message)
      }
    },
    async cancelEntrustUser() {
      let data = await axios.put('/ui/application/cancelentrust').then(res => res.data)
      if (data.status === 1) {
        util.showSuccess(data.message)
        this.loadEntrustListData()
      } else {
        util.showErrorMessageBox(data.message)
      }
    },
    async changeLoginUserHandler(userName) {
      let data = await axios.get(`/ui/application/changeaccount?userName=${userName}`).then(res => res.data)
      if (data.status === 1) {
        window.location = 'app.html'
      } else {
        util.showErrorMessageBox(data.message)
      }
    },
    async loadEntrustListData() {
      let branchData = await axios.get('/ui/branches').then(res => res.data)
      this.branches = branchData.data
      await this.initEntrust()
      await this.$refs.userTable.getData()
      this.loading = false
    }
  }
}
</script>

<style scoped>
.el-tab-pane .padding-top-bottom.scroll,
.padding-top-bottom-intab.scroll {
  height: 100%;
}
.entrust-text {
  padding-left: 0px;
}
</style>
