<template>
  <ifbp-page>
    <ifbp-breadcrumb name="用户管理"></ifbp-breadcrumb>
    <ifbp-button-area>
      <el-button type="primary" class="fl" @click="addUserBtn">新增</el-button>
      <ifbp-search class="fr"
          :template-code="searchCode"
          @search="handleSearch">
      </ifbp-search>
    </ifbp-button-area>
    <!-- 用户信息列表 -->
    <ifbp-main-area type="list">
      <ifbp-template 
                   ref="userTableRef"
                   show-type="table"
                   tpl-id="userTableId"
                   :tpl-data="userTableData"
                   :funnode="funnode"
                   :nexuskey="nexuskey"
                   :tpl-reset-fun="userTableResetFun"
                   @power-table-click="stateTableRow"
                   @search-table-click="editTableRow"
                   @refresh-table-click="resetTableRow"
                   @delete-table-click="deleteTableRow">
      </ifbp-template>
      <!--pagination-->
      <input type="text" id="p" style="visibility: hidden">
      <el-pagination
        id="staff-pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalElements">
      </el-pagination>
    </ifbp-main-area>
    <ifbp-del-dialog
      message="确认删除该用户？删除后无法恢复。"
      v-model="delDialogVisible"
      @click="deleteClick">
    </ifbp-del-dialog>
  </ifbp-page>
</template>
<script>
  export default {
    data(){
      return {
        userTableData: {
          user_t: [],
        },
        funnode: 'YHGL',
        nexuskey:'USER_INFO',
        userTableResetFun: function($node){
          //获取table,此id为ui模板上面的表格Id
          let $table = $node.find('el-table');
          // 定义最后一列的操作
          let operateArr = [
                {
                    icon: 'power',
                    title: '启用/停用'
                },
                {
                    icon: 'search',
                    title: "查看"
                },
                {
                    icon: 'refresh',
                    title: "管理员重置密码"
                },
                {
                    icon: "delete",
                    title: "删除"
                }
            ];
          let operateHtml = this.getTableOperateHtml(operateArr);
          $table.append(operateHtml);
        },
        searchCode: 'USER_QT',
        searchTemplate: '',
        
        isHide: true,
        loading: false,
        tableData: '',
        columns: '',
        totalPages: '',
        totalElements: 0,
        size: 10,
        formData: {},
        currentPage: 1,
        isEdit: false,
        currentValue: '',
        delDialogVisible: false,
        delId:'',
        user_code:'',
        user_name:'',
        userType: '',
        enablestate: '',
      };
    },
    created(){
      /**
       *   获取列表
       **/
      this.request();
      /**
       *   修改用户状态
       **/
      this.$on('staffState', (id,state) => {
        this.loading = true;
        this.$http({
          url: window.ctxs.ap + '/user/optUserState/' + id + '?state=' + state,
          method: 'get'
        }).then((res) => {
          if (res.data.success === true) {
            document.getElementById('p').remove();
            this.loading = false;
            this.request();
          }
        });
      });
    },
    methods: {
      /**
       *   获取列表请求
       **/
      request(n, s) {
        this.loading = true;
        var url;
        if(n===undefined){
          url = '/ifbp-app-sm/sm/user/pageList?pn=' + this.currentPage + '&ps=' + this.size + '&qtAggVO=' + encodeURIComponent(JSON.stringify(this.searchTemplate));
        } else {
          url = '/ifbp-app-sm/sm/user/pageList?pn='+ n + '&ps=' + s + '&qtAggVO=' + encodeURIComponent(JSON.stringify(this.searchTemplate));
        }
        this.$http({
          url: url,
          method: 'get',
          dataType: 'json'
        }).then((res) => {
          this.loading = false;
          this.totalElements = res.data.data.totalElements ;       // 总条数
          this.size = res.data.data.size;                          // 每页的条数
          this.currentValue = res.data.data.content;
          this.$nextTick(() => {
            if(this.$refs.userTableRef) {
              this.$refs.userTableRef.setTableData(res.data.data.content);
            } else {
              this.$set(this.userTableData, 'uitemplateTableData', res.data.data.content);
            }
          });
        }).catch(() => {
          this.$message({
            message: '用户信息获取失败',
            type: 'error'
          });
        });
      },
      backInfo() {
        this.$router.push('/appArea');
      },
      handleSizeChange(val) {
        this.size = val;
        this.request(1, val);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.request(val, this.size);
      },
      // 高级搜索
      showSearch() {
        this.isHide = !this.isHide;
      },
      handleSearch(searchTemplate){
        this.searchTemplate = searchTemplate;
        this.request();
      },
      // 跳转到添加用户页面
      addUserBtn() {
        this.$router.push('/userInfo/add');
        this.isEdit = true;
        this.currentValue = {};
      },
      setEmpty(value){
        this.originalValue = value;
        this.currentValue = JSON.parse(JSON.stringify(this.originalValue));
      },
      resetTableRow(scope){
        this.$http({
          url: '/ifbp-app-sm/sm/user/adminResetPwd?id=' + scope.row.id ,
          method: 'get'
        }).then((res) => {
          if (res.data.success === true) {
              this.$message({
                message: '密码重置成功',
                type: 'success'
              });
          } else {
            this.$message({
              message: res.data.error.errorMessage,
              type: 'error'
            });
          }
        }).catch(() => {
          this.$message({
            message: '密码重置失败',
            type: 'error'
          });
        });
      },
      editTableRow(data, index){
        this.$router.push('/userInfo/detail/' + data.row.id);
      },
      deleteTableRow(data) {
        this.delDialogVisible = true;
        this.delId = data.row.id;
      },
      stateTableRow(data) {
        let row = data.row;
        let state = row.enablestate === "2"?3:2;
        this.$http({
          url: '/ifbp-app-sm/sm/user/optUserState/' + row.id + '?state=' + state ,
          method: 'get'
        }).then((res) => {
          if (res.data.success === true) {
            if (state === 2){
              this.$message({
                message: '启用成功',
                type: 'success'
              });
            } else {
              this.$message({
                message: '停用成功',
                type: 'warning'
              });
            }
            this.request();
          } else {
            this.$message({
              message: res.data.error.errorMessage,
              type: 'error'
            });
          }
        }).catch(() => {
          this.$message({
            message: '接口调用失败！',
            type: 'error'
          });
        });
      },
      deleteClick() {
        this.$http({
          url: '/ifbp-app-sm/sm/user/' + this.delId,
          method: 'delete'
        }).then((res) => {
          if (res.data.success === true) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.delDialogVisible = false;
            this.request();
          } else {
            this.$message({
              message: res.data.error.errorMessage,
              type: 'error'
            });
          }
        }).catch(() => {
          this.$message({
            message: '删除失败',
            type: 'error'
          });
        });
      }
    }
  };

</script>
<style>
</style>
