
<template>
<!-- 账号管理 -->
  <div class="account-page">
    <Card>
      <div class="search-con">
        <Input
          placeholder="请输入账号ID"
          class="search-input"
          v-model="searchCon.uid"
          style="width: 200px"
          clearable
        />

        <Input
          placeholder="请输入账号"
          class="search-input"
          v-model="searchCon.accounts"
          style="width: 200px"
          clearable
          type="text"
        />
        <Input  type="text" class="hide-input"></Input>
        <ButtonGroup class="search-btngroup">
          <Button @click="handleSearch" type="primary">查找</Button>
          <Button type="primary" @click="handleRefresh">
            <Icon type="md-refresh" />
          </Button>
        </ButtonGroup>
        <Button @click="handleAddShow" type="info">+ 添加账户</Button>
      </div>
      <tables
        ref="tables"
        editable
        pagable
        v-model="tableData"
        :columns="columns"
        :currentPage="searchCon.pageNum"
        :pageSize="searchCon.pageSize"
        :totalSize="totalSize"
        :loading="loading"
        @on-change="handleCurrentChange"
      />
    </Card>
      <Modal
      title="添加账户"
      v-model="addAccountModal"
      @on-cancel="handleCancelAdd"
      width="400"
      >
      <div class="model-item">
        <label class="label">登录账号：</label>
          <Input
          placeholder="请输入登录账号30以内的字符或数字"
          class="search-input"
          v-model="addAdminDto.account"
          clearable
        />
      </div>
      <div class="model-item">
        <label class="label">登录密码：</label>
        <Input  type="password" class="hide-input"></Input>
        <Input
          placeholder="请输入登录密码6位以上字母数字或特殊字符"
          class="search-input"
          v-model="addAdminDto.password"
          type="password"
          clearable
        />
      </div>
      <div class="model-item">
        <label class="label">角色：</label>
        <Select
          placeholder="请选择角色"
          class="search-input"
          v-model="addAdminDto.roleId"
        >
        <Option
          v-for="(item, index) of roleList"
          :value="item.roleId"
          :key="'series-option-' + index"
        >{{ item.roleName }}</Option
        >
      </Select>
      </div>
      <div class="model-item">
        <label class="label">使用者：</label>
        <Input
          placeholder="请输入该账号的使用者"
          class="search-input"
          v-model="addAdminDto.user"
          clearable
        />
      </div>

      <div class="model-item">
        <label class="label">联系方式：</label>
        <Input
          placeholder="请输入使用者的联系方式"
          class="search-input"
          v-model="addAdminDto.linkPhone"
          clearable
        />
      </div>
      <div slot="footer">
        <Button
          type="primary"
          @click="handleSureAdd"
        >
          确定
          </Button>
      </div>
    </Modal>
    <Modal
      title="重置密码"
      v-model="resetAccountModal"
      @on-cancel="handleCancelReset"
      width="400"
      >
      <div class="model-item">
        <label class="label">账户：</label>
          <Input
          placeholder=""
          class="search-input"
          v-model="resetObj.account"
          readonly
        />
      </div>
      <div class="model-item">
        <label class="label">新密码：</label>
        <Input
          placeholder=""
          class="search-input"
          v-model="resetObj.newPwd1"
          type="password"
        />
      </div>
      <div class="model-item">
        <label class="label">确认新密码：</label>
        <Input
          placeholder=""
          class="search-input"
          v-model="resetObj.newPwd2"
          type="password"
        />
      </div>
      <div slot="footer">
        <Button
          type="primary"
          @click="handleSureReset"
        >
          确定
          </Button>
      </div>
    </Modal>
    <Modal
      title="修改角色"
      v-model="repairAccountModal"
      @on-cancel="handleCancelRepair"
      width="400"
      >
      <div class="model-item">
        <label class="label">账户：</label>
          <Input
          placeholder=""
          class="search-input"
          v-model="repairObj.account"
          readonly
        />
      </div>
    <div class="model-item">
        <label class="label">角色：</label>
        <Select
        placeholder="请选择角色"
        class="search-input"
        v-model="repairObj.roleId"
      >
        <Option
          v-for="(item, index) of roleList"
          :value="item.roleId"
          :key="'series-option-' + index"
        >{{ item.roleName }}</Option
        >
      </Select>
      </div>
      <div slot="footer">
        <Button
          type="primary"
          @click="handleSureRepair"
        >
          确定
          </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { formatTime } from '@/libs/tools'
import { AccountStatus, AccountStatusObj } from '@/enums'
export default {
  inject: ['reload'],
  components: {
    Tables
  },
  computed: {
  },
  data () {
    return {
      addAccountModal: false,
      addAdminDto: {
        account: '',
        password: '',
        roleId: '',
        user: '',
        linkPhone: ''
      },
      roleList: [],
      resetAccountModal: false,
      resetObj: {
        adminId: '',
        newPwd1: '',
        newPwd2: '',
        account: ''
      },
      repairAccountModal: false,
      repairObj: {
        account: '',
        adminId: '',
        roleId: ''
      },
      AccountStatusObj,
      AccountStatus,
      searchCon: {
        uid: '',
        accounts: '',
        pageNum: 1,
        pageSize: 10
      },
      columns: [
        { title: 'UID', key: 'adminId', minWidth: 180, align: 'left' },
        { title: '账号', key: 'account', minWidth: 120, align: 'center' },
        { title: '角色', key: 'roleName', minWidth: 120, align: 'center' },
        { title: '使用者', key: 'user', minWidth: 120, align: 'center' },
        { title: '联系方式', key: 'linkPhone', minWidth: 120, align: 'center' },
        {
          title: '记录时间',
          align: 'center',
          minWidth: 160,
          render: (h, params) => {
            return h('span', formatTime(params.row.createTime))
          }
        },
        { title: '状态',
          key: 'status',
          minWidth: 100,
          align: 'center',
          render: (h, params) => {
            let obj = AccountStatusObj[params.row.status]
            return h(
              'Tag',
              {
                props: {
                  color: obj.color
                }
              },
              obj.label
            )
          }
        },
        {
          title: '操作',
          key: 'operate',
          minWidth: 280,
          align: 'left',
          fixed: 'right',
          render: (h, params) => {
            let status = params.row.status
            let disableBtn = h(
              'Button',
              {
                props: {
                  type: status == AccountStatus.DISABLE ? 'primary' : 'primary',
                  size: 'small'
                },
                on: {
                  click: this.handleOffShelf(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              status == AccountStatus.DISABLE ? '可 用' : '禁 用'
            )

            let resetBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: this.handleReset(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '重置密码'
            )
            let repairBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: this.handleRepair(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '修改角色'
            )
            let deleteBtn = h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: this.handleDelete(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '删 除'
            )
            return h('div', [disableBtn, resetBtn, repairBtn, deleteBtn])
          }
        }
      ],
      tableData: [],
      totalSize: 0,
      loading: false,
      selectCount: 0
    }
  },
  methods: {
    requestData () {
      // console.log(this.searchCon)
      this.loading = true
      this.searchCon.uid = this.searchCon.uid.replace(/\s+/g, '')
      this.searchCon.accounts = this.searchCon.accounts.replace(/\s+/g, '')
      this.api({
        apiName: 'accountManage',
        postdata: this.searchCon,
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.tableData = res.data.records
          this.totalSize = res.data.total
        }
      })
    },
    checkAddForm () {
      let errMsg = ''
      let { account, password, roleId, user, linkPhone } = this.addAdminDto
      if (!account) {
        return { errMsg: '请输入账号！' }
      }
      if (!/^[a-zA-Z0-9]{4,30}$/.test(account)) {
        return { errMsg: '账号须是4——30位字母或数字' }
      }
      if (!password) {
        return { errMsg: '请输入密码！' }
      }
      if (!/^[0-9a-zA-Z!@#$%^&*?_.]{6,16}$/.test(password)) {
        return { errMsg: '密码格式有误！' }
      }
      if (!roleId) {
        return { errMsg: '请选择角色！' }
      }
      if (!user) {
        return { errMsg: '请输入该账号的使用者！' }
      }
      if (!/^1[3|4|5|7|8][0-9]{9}$/.test(linkPhone)) {
        return { errMsg: '手机格式输入有误！' }
      }
      return { errMsg }
    },
    getAccountRoleList () {
      this.api({
        apiName: 'accountRoleList',
        success: (res) => {
          this.roleList = res.data
        }
      })
    },
    handleAddShow () {
      this.addAccountModal = true
    },
    handleSureAdd () {
      let { errMsg } = this.checkAddForm()
      if (errMsg) {
        return this.$Message.warning(errMsg)
      }
      this.api({
        apiName: 'addAccountManage',
        postdata: this.addAdminDto,
        success: (res) => {
          this.$Notice.success({ title: '添加成功！' })
          this.handleCancelAdd()
          this.requestData()
        }
      })
    },
    handleCancelAdd () {
      this.addAccountModal = false

      this.addAdminDto = {
        account: '',
        password: '',
        roleId: '',
        user: '',
        linkPhone: ''
      }
    },
    handleCancelReset () {
      this.resetAccountModal = false
      this.resetObj.newPwd1 = ''
      this.resetObj.newPwd2 = ''
    },
    handleSureReset () {
      if (!this.resetObj.newPwd1 || !this.resetObj.newPwd2) {
        return this.$Message.warning('请输入密码并确认新密码！')
      }
      if (!/^[0-9a-zA-Z!@#$%^&*?_.]{6,16}$/.test(this.resetObj.newPwd1)) {
        return this.$Message.warning('密码格式有误！')
      }
      if (this.resetObj.newPwd2 !== this.resetObj.newPwd1) {
        return this.$Message.warning('两次密码输入不一致！')
      }
      this.api({
        apiName: 'resetPwdAccount',
        postdata: this.resetObj,
        success: (res) => {
          this.$Notice.success({ title: '重置成功！' })
          this.handleCancelReset()
          this.requestData()
        }
      })
    },
    handleCancelRepair () {
      this.repairAccountModal = false
    },
    handleSureRepair () {
      if (!this.repairObj.roleId) {
        return this.$Message.warning('请选择角色！')
      }
      this.api({
        apiName: 'repairRoleAccount',
        postdata: this.repairObj,
        success: (res) => {
          this.requestData()
          this.handleCancelRepair()
          this.$Notice.success({ title: '修改成功！' })
        }
      })
    },
    handleSearch () {
      this.searchCon.pageNum = 1
      this.requestData()
    },
    handleRefresh () {
      this.reload()
    },
    handleOffShelf (row) {
      return () => {
        let uid = row.adminId
        let apiName = row.status === AccountStatus.DISABLE ? 'ableAccountManage' : 'disableAccountManage'
        let title = row.status === AccountStatus.DISABLE ? '可用' : '禁用'
        this.$Modal.confirm({
          title,
          content: `确认要改变当前账号状态吗 ？`,
          onOk: () => {
            this.api({
              apiName,
              postdata: uid,
              success: (res) => {
                this.requestData()
                this.$Notice.success({ title: '操作成功！' })
              }
            })
          }
        })
      }
    },
    handleRepair (row) {
      return () => {
        this.repairAccountModal = true
        this.repairObj.adminId = row.adminId
        this.repairObj.account = row.account
        this.repairObj.roleId = row.roleId
      }
    },
    handleReset (row) {
      return () => {
        this.resetObj.adminId = row.adminId
        this.resetObj.account = row.account
        this.resetAccountModal = true
      }
    },
    handleDelete (row) {
      return () => {
        let uid = row.adminId
        this.$Modal.confirm({
          title: '删除',
          content: `您确认要删除当前账号吗？`,
          onOk: () => {
            this.api({
              apiName: 'deleteAccountManage',
              postdata: uid,
              success: () => {
                this.requestData()
                this.$Notice.success({ title: `删除成功！` })
              }
            })
          }
        })
      }
    },
    handleCurrentChange (pageNum) {
      this.searchCon.pageNum = pageNum
      this.requestData()
    }
  },
  created () {
    this.requestData()
    this.getAccountRoleList()
  }
}
</script>

<style lang="less" scoped>
.hide-input {
    width:0;
    opacity:0;
}
.account-page .search-con {
  padding: 10px 0;
  .search {
    &-col {
      display: inline-block;
      width: 150px;
      margin-right: 5px;
    }
    &-input {
      display: inline-block;
      width: 150px;
      margin-right: 5px;
    }
    &-date {
      margin-right: 5px;
    }
    &-btngroup {
      margin-right: 5px;
    }
  }
}
.model-item {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    justify-content: center;
    .label {
      display: inline-block;
      width: 100px;
      text-align: right;
    }
  }
</style>
