<template>
  <div>
    <treePage title="组织列表" @on-result-change="_refresh">
      <template slot="tree">
        <orgTree ref="treeModal" @on-result-change="_orgData" />
      </template>
      <template slot="cont">
        <el-row>
          <!--查询-->
          <el-col :span="24">
            <Form
              v-show="searchOpen"
              onsubmit="return false"
              :label-width="70"
              inline
            >
              <label class="label-sign" />
              <Form-item class="search-item" label="账号:">
                <el-input v-model="formObj.username" placeholder="请输入账号" clearable @keyup.enter.native="_formSearch" />
              </Form-item>
              <Form-item class="search-item" label="真实姓名:">
                <el-input v-model="formObj.realname" placeholder="请输入真实姓名" clearable @keyup.enter.native="_formSearch" />
              </Form-item>
              <Form-item class="search-item" label="手机号码:">
                <el-input v-model="formObj.mobile" placeholder="请输入手机号码" clearable @keyup.enter.native="_formSearch" />
              </Form-item>
              <Form-item class="search-btn">
                <el-button type="primary" @click="_formSearch">
                  搜索
                </el-button>
              </Form-item>
            </Form>
          </el-col>
          <!--按钮-->
          <el-col :span="24">
            <btn-list :msg="btn" :open="searchOpen" show-search-btn="true" @on-result-change="_btnClick" />
          </el-col>
          <!--table-->
          <el-col :span="24">
            <element-table
              ref="pageTable"
              :page-columns="pageColumns"
              :table-height="tableHeight"
              :get-page="getPage"
              @on-result-change="_tableResultChange"
            >
              <el-table-column
                v-for="item in pageColumns"
                :key="item.key"
                show-overflow-tooltip
                sortable
                :prop="item.key"
                :label="item.title"
                :width="item.width"
                :min-width="200"
                :fixed="item.fixed?item.fixed:undefined"
              >
                <template slot-scope="scope">
                  <a v-if="item.detail" @click.stop="_detailModal(scope.row.id)">
                    {{ scope.row[item.key] }}
                  </a>
                  <div v-else-if="item.key==='notifyWechat'">
                    <div v-if="scope.row[item.key]===0" class="red-color">
                      否
                    </div>
                    <div v-else class="blue-color">
                      是
                    </div>
                  </div>
                  <div v-else-if="item.key==='status'">
                    <div v-if="scope.row[item.key].value === 'NORMAL' " class="blue-color">
                      正常
                    </div>
                    <div v-else-if="scope.row[item.key].value === 'DISABLED'" class="red-color">
                      {{ scope.row[item.key].display }}
                    </div>
                    <div v-else class="warning-color">
                      {{ scope.row[item.key].display }}
                    </div>
                  </div>
                  <div v-else-if="item.key==='sex'">
                    <div v-if="scope.row[item.key]===1" class="red-color">
                      女
                    </div>
                    <div v-else class="blue-color">
                      男
                    </div>
                  </div>
                  <div v-else>
                    {{ scope.row[item.key] }}
                  </div>
                </template>
              </el-table-column>
              <template slot="col">
                <el-table-column
                  label="操作"
                  align="center"
                  :width="100"
                  fixed="right"
                >
                  <template slot-scope="scope">
                    <div v-if="$userInfo().admin === 1 || $userInfo().username === 'admin'">
                      <icon-list :msg="$showBtnList(iconMsg)" :row-data="scope.row" @on-result-change="_iconClick" />
                    </div>
                    <div v-else>
                      <icon-list
                        :msg="(scope.row.username === $userInfo().username) ? $showBtnList(iconMsgDis):$showBtnList(iconMsgDisAll) "
                        :row-data="scope.row"
                        @on-result-change="_iconClick"
                      />
                    </div>
                  </template>
                </el-table-column>
              </template>
            </element-table>
          </el-col>
        </el-row>
      </template>
    </treePage>
    <!--<Modal v-model="otpVisible" title="OTP URL 二维码">-->
    <!--<div style="text-align: center;border: 1px solid #eee;padding: 10px">-->
    <!--<img v-if="otpVisible" :src="otpUrl" alt="OTP URL 二维码">-->
    <!--</div>-->
    <!--</Modal>-->
    <!--添加编辑-->
    <userEdit ref="editModal" @on-result-change="_search" />
    <!--详情-->
    <userDetail ref="detailModal" />
    <!--导入用户信息-->
    <downloadTemplateImport ref="importModal" @on-result-change="_search" />
    <!--电子签名-->
    <signature ref="signatureModal" />
    <!--分配角色-->
    <assignRoleTree ref="assignRoleModal" />
  </div>
</template>
<script>
import { sysUser } from '../../../api'
// import global from '../../../api/config'
import http from '../../../api/http'
import treePage from '../../../components/base/treePage'
import downloadTemplateImport from '../../../components/import/downloadTemplateImport'
import userEdit from './userEdit'
import orgTree from './tree/orgTree.vue'
import userDetail from './userDetail'
import signature from './signature'
import assignRoleTree from './tree/assignRoleTree'
export default {
  components: {
    userEdit,
    orgTree,
    userDetail,
    downloadTemplateImport,
    assignRoleTree,
    treePage,
    signature
  },
  data() {
    return {
      searchOpen: true,
      btn: [
        { type: 'success', id: '', name: '添加' },
        { id: '', name: '导入' },
        { id: '', name: '导出' }
      ],
      // 当用户名称为登录账户或者 admin 时允许编辑管理员
      iconMsg: [
        { type: 'pt-edit', id: '', name: '编辑' },
        { type: 'pt-man', id: '', name: '分配角色' },
        { type: 'pt-sign', id: '', name: '电子签名' }
      ],
      // 可编辑自己的
      iconMsgDis: [
        {
          type: 'pt-edit',
          id: 'sys-user-edit',
          name: '编辑',
          disabled: true
        },
        {
          type: 'pt-man',
          id: 'sys-user-dis-role',
          name: '分配角色',
          disabled: true
        },
        { type: 'pt-sign', id: 'sys-user-signature', name: '电子签名' }
      ],
      // 其他人的
      iconMsgDisAll: [
        {
          type: 'pt-edit',
          id: 'sys-user-edit',
          name: '编辑',
          disabled: true
        },
        {
          type: 'pt-man',
          id: 'sys-user-dis-role',
          name: '分配角色',
          disabled: true
        },
        {
          type: 'pt-sign',
          id: 'sys-user-signature',
          name: '电子签名',
          disabled: true
        }
      ],
      pageColumns: [
        { title: '账号', key: 'username', width: 230, detail: true },
        { title: '真实姓名', key: 'realname' },
        { title: '性别', key: 'sex', width: 80 },
        { title: '手机号码', key: 'mobile' },
        { title: '角色', key: 'roleNames' },
        { title: '通知微信', key: 'notifyWechat', width: 100 },
        { title: '状态', key: 'status', width: 70 },
        { title: '电子邮箱', key: 'email' },
        { title: 'QQ', key: 'qq' }
      ],
      formObj: {
        mobile: '',
        username: '',
        realname: '',
        orgId: ''
      },
      otpVisible: false,
      otpUrl: '',
      getPage: {},
      selectIds: [],
      login: {}
    }
  },
  computed: {
    tableHeight: function() {
      if (this.searchOpen) {
        return this.$tableHeight('search')
      } else {
        return this.$tableHeight('noSearch')
      }
    }
  },
  mounted() {
    this._search()
  },
  methods: {
    // 刷新
    _refresh() {
      this.formObj.orgId = ''
      this._formSearch()
    },
    _search() {
      this._formSearch()
      this.$refs.treeModal._open()
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _page: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await sysUser.page(this.$serializeForm(this.formObj))
      if (result) {
        this.getPage = result
        this.$refs.pageTable._initTable()
      }
    },
    _btnClick(msg, data) {
      switch (msg) {
        case '添加':
          this.$refs.editModal._open()
          break
        case '导入':
          // eslint-disable-next-line no-case-declarations
          const data = {
            importUrl: '/base/v1/user/import',
            downloadUrl: '/base/v1/excel/template/SysUser',
            title: '导入用户信息'
          }
          this.$refs.importModal._open(data)
          break
        case '导出':
          this._export()
          break
        case 'search':
          this.searchOpen = !this.searchOpen
          break
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this._page()
          break
      }
    },
    _iconClick(res, data) {
      switch (res) {
        case '编辑':
          this._editModal(data)
          break
        case '电子签名':
          this.$refs.signatureModal._open(data.id)
          break
        case '分配角色':
          this.$refs.assignRoleModal._openRoleZtree(data.id)
          break
      }
    },
    _editModal: async function(data) {
      const result = await sysUser.getById(data.id)
      this.$refs.editModal._open(result, data.roleNames)
    },
    // 详情
    _detailModal(id) {
      this.$refs.detailModal._open(id)
    },
    _orgData(id) {
      this.formObj.orgId = id
      this._formSearch()
    },
    /** ***************************导出***************************************/
    _export() {
      const ids = this.selectIds
      if (ids.length === 0) {
        if (
          this.mobile === '' &&
          this.username === '' &&
          this.realname === ''
        ) {
          this._exportByIds('', '确定导出全部记录？')
        } else {
          const data = {}
          data.mobile = this.mobile
          data.username = this.username
          data.realname = this.realname
          this._exportBySearch(JSON.stringify(data), '确定导出？')
        }
      } else {
        this._exportByIds(ids, '确定导出 ' + ids.length + ' 条记录？')
      }
    },
    _exportByIds(ids, content) {
      this.$Modal.confirm({
        title: '提示',
        content: content,
        onOk: () => {
          if (ids) {
            http.open('/base/v1/user/export', { request: { ids: ids } })
          } else {
            http.open('/base/v1/user/export', { request: {} })
          }
        }
      })
    },
    _exportBySearch(data, content) {
      this.$Modal.confirm({
        title: '提示',
        content: content,
        onOk: () => {
          http.open('/base/v1/user/export', { request: data })
        }
      })
    }
    /** ***************************导出***************************************/
  }
}
</script>
