<template>
  <div style="height: 100%;">
    <div class="iotmenu-content-header">
      <a-icon type="file-text" />
      <span>用户管理</span>
    </div>
    <a-card :bordered="false" class="iotmenu-content">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <div class="iotmenu-search-container">
          <div class="item-search-btn">
            <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
          </div>
          <div class="item-search">
            <a-input placeholder="登录账号名" v-model="queryParam.username" allow-clear @change="searchQuery">
            <!-- <j-input placeholder="登录账号名" v-model="queryParam.username"></j-input> -->
              <a-icon slot="prefix" type="search" />
            </a-input>
          </div>
          <div class="item-search">
            <a-select placeholder="是否为系统管理员" v-model="queryParam.role" allowClear :options="roleOptions" @change="searchQuery"></a-select>
          </div>
        </div>
      </div>
      <!-- 查询区域-END -->

      <!-- 操作按钮区域 -->
      <!-- <div class="table-operator"> -->
        <!-- <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button> -->
        <!-- <a-button type="primary" icon="download" @click="handleExportXls('联锁管理系统用户表')">导出</a-button> -->
        <!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
          <a-button type="primary" icon="import">导入</a-button>
        </a-upload> -->
        <!-- 高级查询区域 -->
        <!-- <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
        </a-dropdown> -->
      <!-- </div> -->

      <!-- table区域-begin -->
      <div>
        <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div> -->

        <a-table
          ref="table"
          size="middle"
          :scroll="{x:true}"
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          @change="handleTableChange">
          <!-- class="j-table-force-nowrap" -->
          <!-- :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" -->
          
          <span slot="role" slot-scope="text, record">
            <a-tag v-if="record.role === '0'" color="blue">是</a-tag>
            <a-tag v-else>否</a-tag>
          </span>

          <span slot="action" slot-scope="text, record">
            <a-tooltip style="margin-right: 10px;">
              <template slot="title"> 设置 </template>
              <span class="edit-btn" @click="handleEdit(record)"></span>
            </a-tooltip>
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
              <a-tooltip>
                <template slot="title"> 删除 </template>
                <span class="delete-btn"></span>
              </a-tooltip>
            </a-popconfirm>
            <!-- <a @click="handleEdit(record)">编辑</a>

            <a-divider type="vertical" />
            <a-dropdown>
              <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a @click="handleDetail(record)">详情</a>
                </a-menu-item>
                <a-menu-item>
                  <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                    <a>删除</a>
                  </a-popconfirm>
                </a-menu-item>
              </a-menu>
            </a-dropdown> -->
          </span>

        </a-table>
      </div>

      <system-user-modal ref="modalForm" @ok="modalFormOk"></system-user-modal>
    </a-card>
  </div>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import SystemUserModal from './modules/SystemUserModal'
  import {ajaxGetDictItems,getDictItemsFromCache} from '@/api/api'

  export default {
    name: 'InterlockUserList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      SystemUserModal
    },
    data () {
      return {
        description: '联锁管理系统用户表管理页面',
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'登录账号名',
            align:"center",
            dataIndex: 'username'
          },
          {
            title:'描述',
            align:"center",
            dataIndex: 'remark'
          },
          {
            title:'系统管理员', // （0系统管理员1其他角色）
            align:"center",
            dataIndex: 'role',
            scopedSlots: { customRender: 'role' }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            // fixed:"right",
            // width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/interlockUser/interlockUser/list",
          delete: "/interlockUser/interlockUser/deleteUser",
          // deleteBatch: "/interlockUser/interlockUser/deleteBatch",
          // exportXlsUrl: "/interlockUser/interlockUser/exportXls",
          // importExcelUrl: "interlockUser/interlockUser/importExcel",
          
        },
        dictOptions:{},
        superFieldList:[],
        queryParam: {},
        roleOptions: [],
      }
    },
    created() {
      this.initDictData()
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      initDictData() {
        //优先从缓存中读取字典配置
        if(getDictItemsFromCache('interlock_user_role')){
          var dicts = getDictItemsFromCache('interlock_user_role');
          this.roleOptions = dicts
          return
        }
        //根据字典Code, 初始化字典数组
        ajaxGetDictItems('interlock_user_role', null).then((res) => {
          if (res.success) {
            this.roleOptions = res.result
          }
        })
      },
    }
  }
</script>
<style scoped>
  /* @import '~@assets/less/common.less'; */
</style>