<template>
  <xy-page title="用户列表">
    <xy-search
      class="mgt20"
      @enter="search(1)"
    >
      <el-form
        inline
        :model="searchFilter"
        label-width="70px"
      >
        <el-form-item
          label="集团"
          prop
        >
          <el-select
            v-model="searchFilter.companyId"
            placeholder="请选择集团"
          >
            <el-option
              label="全部"
              :value="-2"
            />
            <el-option
              label="运营支撑系统"
              :value="-1"
            />
            <el-option
              v-for="item in companyList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="right">
        <el-button
          type="primary"
          @click="search(1)"
        >查询</el-button>
        <el-button
          plain
          @click="resetForm"
        >重置条件</el-button>
      </div>
    </xy-search>

    <div class="system-index-btns mgb20">
      <el-button
        v-auth="'AUTH_USER-SAVE'"
        type="primary"
        icon="icon-scrappy-add"
        @click="editRow()"
      >
        新建用户
      </el-button>
    </div>
    <!-- 列表区域-STR -->
    <xy-table
      v-show="!listData.firtIn"
      :loading="listData.showLoading"
      :table-data="listData.tableData"
      @change="search"
    >
      <el-table-column
        min-width="50px"
        prop="id"
        label="流水号"
      />
      <el-table-column
        min-width="70px"
        prop="orgAccount"
        label="原始账号"
      />
      <el-table-column
        min-width="100px"
        prop="account"
        label="登录账号"
      />
      <el-table-column
        min-width="100px"
        prop="email"
        label="邮箱"
      />
      <el-table-column
        min-width="70px"
        prop="name"
        label="名字"
      />
      <el-table-column
        min-width="140px"
        prop="type"
        label="创建时间"
      >
        <template slot-scope="scope">{{ scope.row.createTime | date }}</template>
      </el-table-column>
      <el-table-column
        min-width="70px"
        prop="createName"
        label="创建人"
      />
      <el-table-column
        min-width="180px"
        label="更多"
      >
        <template
          v-if="scope.row.isAdmin !== 1"
          slot-scope="scope"
        >
          <el-button
            v-auth="'AUTH_USER-SAVE'"
            type="text"
            title="编辑"
            @click="editRow(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            v-if="scope.row.isActive === 1"
            v-auth="'AUTH_USER-ACTIVE'"
            type="text"
            title="冻结"
            @click="activeRow(scope.row,0)"
          >
            冻结
          </el-button>
          <el-button
            v-if="scope.row.isActive === 0"
            v-auth="'AUTH_USER-ACTIVE'"
            type="text"
            title="激活"
            @click="activeRow(scope.row,1)"
          >
            激活
          </el-button>
          <el-button
            type="text"
            @click="$toPage('/auth-app-user-instance/list',{userId:scope.row.id})"
          >
            用户实例
          </el-button>
          <!-- <el-button @click="deleteRow(scope.row)" type="text">删除</el-button> -->
        </template>
      </el-table-column>
    </xy-table>
    <!-- 列表区域-END -->

    <!-- 保存记录-STR -->
    <el-dialog
      :title="editDialog.data.id?'修改':'添加'+editDialog.title"
      :visible.sync="editDialog.show"
      class="modal-resetpwd"
    >
      <div class="form-row form-group">
        <label class="text-right">
          <span class="require">*</span>用户姓名:
        </label>
        <el-input
          v-model="editDialog.data.name"
          type="text"
          placeholder="请输入用户姓名"
        />
        <span class="errmsg">{{ editDialog.errmsg.name }}</span>
      </div>
      <div class="form-row form-group">
        <label class="text-right">
          <span class="require">*</span>用户邮箱:
        </label>
        <el-input
          v-model="editDialog.data.email"
          type="text"
          placeholder="请输入用户邮箱"
          auto-complete="off"
        />
        <span class="errmsg">{{ editDialog.errmsg.email }}</span>
      </div>
      <div class="form-row form-group">
        <label class="text-right">
          <span class="require">*</span>用户账号:
        </label>
        <el-input
          v-model="editDialog.data.orgAccount"
          type="text"
          placeholder="请输入用户账号"
          auto-complete="off"
        />
        <span class="errmsg">{{ editDialog.errmsg.orgAccount }}</span>
      </div>
      <div class="form-row form-group">
        <label class="text-right">
          <span class="require">*</span>用户手机:
        </label>
        <el-input
          v-model="editDialog.data.phone"
          type="text"
          placeholder="请输入用户手机"
          auto-complete="off"
        />
        <span class="errmsg">{{ editDialog.errmsg.phone }}</span>
      </div>
      <div
        v-if="!editDialog.data.id"
        class="form-row form-group"
      >
        <label class="text-right">
          <span class="require">*</span>初始密码:
        </label>
        <el-input
          v-model="editDialog.data.passwd"
          type="password"
          placeholder="请输入初始密码"
          auto-complete="off"
        />
        <span class="errmsg">{{ editDialog.errmsg.passwd }}</span>
      </div>
      <div
        v-if="!editDialog.data.id"
        class="form-row form-group"
      >
        <label class="text-right">
          <span class="require">*</span>确认密码:
        </label>
        <el-input
          v-model="editDialog.data.repasswd"
          type="password"
          placeholder="请输入确认密码"
          auto-complete="off"
        />
        <span class="errmsg">{{ editDialog.errmsg.repasswd }}</span>
      </div>

      <div
        slot="footer"
        class="dialog-footer"
      >
        <xy-save
          v-model="editDialog.save"
          type="primary"
          @click="saveDialog"
        >确 定</xy-save>
        <el-button @click="editDialog.show = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 保存记录-END -->
  </xy-page>
</template>

<script>
export default {
  name: 'AuthUserList',
  data() {
    return {
      searchFilter: {
        companyId: -1
      },
      companyList: [],
      appList: [],
      loading: false,
      listData: {
        firtIn: true,
        tableData: {
          total: 0,
          page: 1,
          size: 15,
          list: []
        },
        showLoading: false
      },
      activeUrl: '/admin/auth/instance/authUser/active.do',
      editDialog: {
        title: '用户',
        url: '/admin/auth/instance/authUser/save.do',
        data: {
          id: '',
          orgAccount: '',
          name: '',
          email: '',
          phone: '',
          passwd: '',
          repasswd: ''
        },
        errmsg: {
          orgAccount: '',
          name: '',
          email: '',
          phone: '',
          passwd: '',
          repasswd: ''
        },
        save: false,
        show: false
      }
    }
  },
  mounted() {
    this.search(1)
    this.$postStream('/admin/auth/instance/authCompany/listAll.do', {
      data: {},
      success: res => {
        if (res.success) {
          this.companyList = res.object || []
        } else {
          this.$message.error(res.message)
        }
      },
      error: () => { }
    })
  },
  methods: {
    search(page) {
      page = page || this.listData.tableData.page
      this.listData.firtIn = false
      const param = {
        page: page || 1,
        size: this.listData.tableData.size
      }

      for (const key in this.searchFilter) {
        param[key] = this.searchFilter[key]
      }

      this.listData.tableData.list = []
      this.listData.showLoading = true

      this.$postStream('/admin/auth/instance/authUser/list.do', {
        data: param,
        success: res => {
          this.listData.showLoading = false
          if (res.success) {
            this.listData.tableData.list = res.object.list || []
            this.listData.tableData.total = res.object.count
            this.listData.tableData.page = page || 1
          } else {
            this.$message.error(res.message)
          }
        },
        error: () => {
          this.listData.showLoading = false
        }
      })
    },
    resetForm() {
      this.searchFilter = this.$options.data().searchFilter
      this.search(1)
    },
    editRow(row) {
      row = row || {}
      this.editDialog.data = JSON.parse(JSON.stringify(row))
      for (const key in this.editDialog.errmsg) {
        this.editDialog.errmsg[key] = ''
      }
      this.remoteMethod()
      this.editDialog.show = true
    },
    activeRow(row, active) {
      row = row || {}
      const data = JSON.parse(JSON.stringify(row))
      data.isActive = active
      this.$postStream(this.activeUrl, {
        data: data,
        success: res => {
          if (res.success) {
            this.$message.warning(res.message)
            row.isActive = active
          } else {
            this.$message.error(res.message)
          }
        },
        error: () => { }
      })
    },
    // 删除
    // deleteRow(row) {
    //   this.$confirm('此操作将永久删除账号并无法恢复，确定删除？', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     this.$postStream('/admin/instance/ccb/polyv/user/delete.do', {
    //       data: {
    //         userId: row.id
    //       },
    //       success: res => {
    //         if (res.success) {
    //           this.search()
    //           this.$message.success('删除成功')
    //         }
    //       }
    //     })
    //   })
    // },
    remoteMethod(query) {
      this.loading = true
      this.$postStream('/admin/auth/instance/authApp/list.do', {
        data: {
          quickSearch: query,
          type: 1
        },
        success: res => {
          this.appList = res.object.list
          this.loading = false
        }
      })
    },
    saveDialog() {
      this.editDialog.errmsg = this.$options.data().editDialog.errmsg
      if (!this.editDialog.data.id) {
        if (!this.editDialog.data.passwd) {
          this.editDialog.errmsg.passwd = '请输入密码'
          return
        }
        if (this.editDialog.data.passwd !== this.editDialog.data.repasswd) {
          this.editDialog.errmsg.repasswd = '请确认二次密码一致'
          return
        }
      }
      this.editDialog.save = true
      this.$postStream(this.editDialog.url, {
        data: this.editDialog.data,
        success: res => {
          if (res.success) {
            this.$message.warning(res.message)
            this.editDialog.show = false
            this.search()
          } else {
            this.$message.error(res.message)
          }
          this.editDialog.save = false
        },
        error: () => {
          this.editDialog.save = false
        }
      })
    }
  }
}
</script>

<style lang="scss">
.errmsg,
.require {
  color: $lk-danger;
}
.system-index-btns {
  text-align: right;
  & i {
    font-size: 12px;
    margin-right: 8px;
    vertical-align: top;
  }
  & span {
    display: inline-block;
    vertical-align: top;
  }
}
.device-info {
  .device-info-body {
    margin: 15px 15px 70px;
  }
  .el-dialog__header {
    border-bottom: 1px solid $lk-border-base;
  }
  .info-line {
    margin-bottom: 10px;
    span {
      display: inline-block;
      padding: 5px 0;
      color: $lk-text-primary;
      font-size: 14px;
      line-height: 24px;
    }
    span.name {
      min-width: 110px;
      line-height: 24px;
    }
  }
}
</style>
