<template>
  <div>
    <el-card>
      <el-form :model="query" label-width="100px" :inline="true" class="query-form" size="mini">
        <el-row>
          <el-form-item label="用户账号:">
            <el-input v-model="query.userName" placeholder="请输入用户账号"></el-input>
          </el-form-item>
          <el-form-item label="状态:">
            <el-select v-model="query.userFlag" placeholder="请选择状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="禁用" value="0"></el-option>
              <el-option label="正常" value="1"></el-option>
              <el-option label="未验证" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button-group>
              <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
              <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
              <el-button type="primary" icon="el-icon-plus" @click.native="handleForm(null, null)">新增</el-button>
            </el-button-group>
          </el-form-item>
        </el-row>
      </el-form>
      <el-table v-loading="loading" :data="list" border style="width: 100%">
        <el-table-column label="序号" type="index" width="50" fixed></el-table-column>
        <el-table-column label="用户账号" prop="userName" fixed></el-table-column>
        <el-table-column label="用户名称" prop="employeeName" fixed>
        </el-table-column>
        <el-table-column label="状态" fixed="">
          <template slot-scope="scope">
            <el-tag :type="scope.row.userFlag | statusFilterType">{{
                scope.row.userFlag | statusFilterName
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="comments" fixed></el-table-column>
        <el-table-column
          label="登录时间"
          with="300"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span> {{ scope.row.lastLoginTime }}</span>
            <!-- <span>{{ formatTime(scope.row.lastLoginTime,"yyyy-MM-dd") }}</span> -->
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click.native="handleForm(scope.$index, scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click.native="handleDel(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


      <pagination
        v-show="total>0"
        :total="total"
        :limit.sync="query.limit"
        :page.sync="query.page"
        @pagination="handleCurrentChange"
      ></pagination>

      <el-dialog
        :title="formMap[formName]"
        :visible.sync="formVisible"
        :before-close="hideForm"
        width="60%"
        top="5vh"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <el-form :model="formData" :rules="formRules" label-width="120px" ref="dataForm">
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户账号" prop="userName">
                <el-input v-model="formData.userName" style="width: 90%" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="el-col">
              <el-form-item label="用户名称" prop="employeeName">
                <el-input v-model="formData.employeeName" style="width: 90%" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="登录密码" prop="passWord">
                <el-input type="password" style="width: 90%" size="small" v-model="formData.passWord"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="确认密码" prop="checkPassword">
                <el-input type="password" size="small" style="width: 90%" v-model="formData.checkPassword"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="备注" prop="comments">
                <el-input type="text" size="small" style="width: 90%" v-model="formData.comments"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="hideForm" size="small">取消</el-button>
          <el-button type="primary" size="small" @click.native="formSubmit()" :loading="formLoading">提交</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  authAdminList,
  authCustomerRoles,
  authAdminSave,
  authAdminDelete
} from '../../api/auth/authAdmin'

import {userInfo} from '../../api/auth/login'

const formJson = {
  id: '',
  passWord: '',
  userName: '',
  checkPassword: '',
  employeeName: '',
  userFlag: 1,
  customerId: '',
  comments: '',
  roles: []
}
export default {
  data() {
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.formData.passWord) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      roles: [],
      query: {
        userName: '',
        userFlag: '',
        page: 1,
        limit: 20,
        roleId: '',
        customerId: this.$store.getters.customerId,
        companyName: ''
      },
      list: [],
      total: 0,
      loading: false,
      index: null,
      formName: null,
      formMap: {
        add: '新增',
        edit: '编辑'
      },

      userInfo: {
        customerId: '',
        companyName: '',
        userId: '',
        roles: []
      },
      formLoading: false,
      formVisible: false,
      formData: formJson,
      formRules: {},
      addRules: {
        userName: [{required: true, message: '请输入姓名', trigger: 'blur'}],
        passWord: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {validator: validatePass, trigger: 'blur'}
        ],
        checkPassword: [
          {
            required: true,
            message: '请再次输入密码',
            trigger: 'blur'
          },
          {validator: validatePass2, trigger: 'blur'}
        ]
        // userFlag: [
        //   { required: true, message: "请选择状态", trigger: "change" },
        // ],
      },
      editRules: {
        userName: [{required: true, message: '请输入姓名', trigger: 'blur'}]
        // userFlag: [
        //   { required: true, message: "请选择状态", trigger: "change" },
        // ],
      },
      deleteLoading: false
    }
  },
  methods: {
    onReset() {
      this.$router.push({
        path: ''
      })
      this.query = {
        userName: '',
        userFlag: '',
        page: 1,
        limit: 20,
        roleId: '',
        customerId: this.$store.getters.customerId
      }
      this.getList()
    },
    onSubmit() {
      this.$router.push({
        path: '',
        query: this.query
      })
      this.query.page = 1
      this.getList()
    },
    handleCurrentChange(val) {
      this.query.page = val.page
      this.getList()
    },
    getList() {
      this.loading = true
      authAdminList(this.query)
        .then((response) => {
          this.loading = false
          this.list = response.data.list || []
          this.total = response.data.total || 0
        })
        .catch(() => {
          this.loading = false
          this.list = []
          this.total = 0
          this.roles = []
        })
    },
    getRoleList() {
      authCustomerRoles(this.query)
        .then((response) => {
          this.roles = response.data.list || []
        })
        .catch(() => {
          this.roles = []
        })
    },

    getUserInfo() {
      userInfo()
        .then((response) => {
          this.userInfo = {
            customerId: response.data.customerId,
            companyName: response.data.companyName,
            userId: response.data.id,
            roles: response.data.roleIds
          }
          this.query.customerId = response.data.customerId
          this.query.companyName = response.data.companyName

          this.getList()
        })
        .catch(() => {
          this.customerId = ''
          this.companyName = ''
        })
    },

    // 刷新表单
    resetForm() {
      if (this.$refs['dataForm']) {
        // 清空验证信息表单
        this.$refs['dataForm'].clearValidate()
        // 刷新表单
        this.$refs['dataForm'].resetFields()
      }
    },
    // 隐藏表单
    hideForm() {
      // 更改值
      this.formVisible = !this.formVisible
      // 清空表单
      this.$refs['dataForm'].resetFields()
      return true
    },
    // 显示表单
    handleForm(index, row) {
      this.formVisible = true
      this.formData = JSON.parse(JSON.stringify(formJson))
      if (row !== null) {
        this.formData = Object.assign({}, row)
      }
      this.formName = 'add'
      this.formRules = this.addRules
      if (index !== null) {
        this.index = index
        this.formName = 'edit'
        this.formRules = this.addRules
      }
    },
    formSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.formLoading = true
          this.formData.userFlag = 1
          this.formData.roles = this.userInfo.roles
          this.formData.customerId = this.userInfo.customerId
          this.formData.companyName = this.userInfo.companyName
          let data = Object.assign({}, this.formData)
          let savequery = {
            id: this.formData.id,
            userFlag: 1,
            roles: this.userInfo.roles,
            customerId: this.userInfo.customerId,
            companyName: this.userInfo.companyName,
            passWord: this.formData.passWord,
            userName: this.formData.userName,
            employeeName: this.formData.employeeName,
            comments: this.formData.comments
          }
          authAdminSave(savequery, this.formName).then((response) => {
            this.formLoading = false
            if (response.code !== 20000) {
              this.$message.error(response.message)
              return false
            }
            this.$message.success('操作成功')
            this.formVisible = false
            if (this.formName === 'add') {
              // 向头部添加数据
              if (response.data && response.data.id) {
                data.id = response.data.id
                this.list.unshift(data)
              }
            } else {
              this.list.splice(this.index, 1, data)
            }
            // 刷新表单
            this.resetForm()
          })
        } else {
        }
      })
    },
    // 删除
    handleDel(index, row) {
      if (row.id === this.userInfo.userId) {
        this.$message.warning('不能删除自己')
      } else if (row.id) {
        this.$confirm('确认删除该记录吗?', '提示', {
          type: 'warning'
        })
          .then(() => {
            let para = {id: row.id}
            this.deleteLoading = true
            authAdminDelete(para)
              .then((response) => {
                this.deleteLoading = false
                if (response.code !== 20000) {
                  this.$message.error(response.message)
                  return false
                }
                this.$message.success('操作成功')
                // 刷新数据
                this.list.splice(index, 1)
              })
              .catch(() => {
                this.deleteLoading = false
              })
          })
          .catch(() => {
            this.$message.info('取消删除')
          })
      }
    }
  },
  filters: {
    statusFilterType(status) {
      const statusMap = {
        0: 'gray',
        1: 'success',
        2: 'danger'
      }
      return statusMap[status]
    },
    statusFilterName(status) {
      const statusMap = {
        0: '禁用',
        1: '正常',
        2: '未验证'
      }
      return statusMap[status]
    }
  },
  mounted() {
  },
  created() {
    this.getList()
  }
}
</script>

<style type="text/scss" lang="scss">
</style>
