<template>
  <div>
    <el-card>
      <span class="show-text">姓名:</span>
      <el-input id="inputPersonalName" v-model="PersonalName" class="personal-name" clearable placeholder="请输入姓名"
        style="width: 200px;margin-right: 26px" />
      <span class="show-text">角色:</span>
      <el-select id="selectPersonalRoleValue" v-model="PersonalroleValue" class="personal-role-value" clearable
        placeholder="请选择角色" style="width:200px;margin-right: 14px">
        <el-option v-for="item in Personalrole" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-button :disabled="loading" icon="el-icon-search" plain type="primary" @click="searchTable()">查询</el-button>
      <el-button icon="el-icon-circle-plus-outline" plain style="margin-left: 14px" type="success"
        @click="addType('form')">
        新增
      </el-button>
      <div style="margin-top: 10px">
        <el-table v-loading="loading" :data="tableData" border element-loading-background="rgba(0, 0, 0, 0.2)"
          element-loading-spinner="el-icon-loading" element-loading-text="数据加载中" height="76vh" highlight-current-row
          size="mini" stripe style="width: 1580px;" tooltip-effect="dark">
          <el-table-column align="center" label=" " type="index" width="100" />
          <el-table-column align="left" label="姓名" show-overflow-tooltip width="320">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input v-model="scope.row.personnel_name" clearable size="mini" style="width:200px;margin-right:3px"
                  width="120" />
              </template>
              <span v-else>{{ scope.row.personnel_name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="工号" min-width="180" show-overflow-tooltip>
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input v-model="scope.row.account" clearable size="mini" style="width:200px;margin-right:3px"
                  width="120" />
              </template>
              <span v-else>{{ scope.row.account }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="密码" min-width="180" show-overflow-tooltip>
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input v-model="scope.row.password" clearable size="mini" style="width:200px;margin-right:3px"
                  width="120" />
              </template>
              <!--              <span v-else>{{ scope.row.password }}</span>-->
              <span v-else>******</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="角色" min-width="180" show-overflow-tooltip>
            <template slot-scope="scope">
              <span type="success">{{ scope.row.roles_function }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" min-width="450">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isClient" style="margin-right: -15px;margin-left: -5px;color: #4d77d6;"
                :true-label='1' :false-label='0' size="small" @change="changeIsClient(scope.row)">客户
              </el-checkbox>
              <el-button icon="el-icon-refresh-right" style="font-family: MiSans Regular,serif;color: #4d77d6"
                type="text" @click="resetPassword(scope.row)">重置密码
              </el-button>
              <el-button icon="el-icon-s-order" style="font-family: MiSans Regular,serif;color: #4d77d6" type="text"
                @click="searchOpNamePermission(scope.row)">设备权限
              </el-button>
              <el-button icon="el-icon-s-order" style="font-family: MiSans Regular,serif;color: #4d77d6" type="text"
                @click="searchCameraPermission(scope.row)">摄像头权限
              </el-button>
              <el-button icon="el-icon-edit" style="font-family: MiSans Regular,serif;color: #4d77d6" type="text"
                @click="editType('form1', scope.row)">编辑
              </el-button>
              <el-button icon="el-icon-delete"
                style="font-family: MiSans Regular,serif;color: #c61a1a;padding: 0;margin: 0" type="text"
                @click="openDelete(scope.row)">删除&nbsp;&nbsp;
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 10px;">
          <el-pagination v-if="!loading" :current-page="pageList" :page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
            :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </div>
    </el-card>
    <el-dialog :show-close="false" :title="title" :visible.sync="dialogFormVisible" center width="440px">
      <el-divider style="margin: 0" />
      <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="100px">
        <el-form-item label="姓名" prop="PersonalName">
          <el-input v-model="form.PersonalName" clearable placeholder="请输入姓名" style="width: 240px;border-radius: 4px" />
        </el-form-item>
        <el-form-item label="工号" prop="account">
          <el-input v-model="form.account" clearable placeholder="请输入工号" style="width: 240px;border-radius: 4px" />
        </el-form-item>
        <!--        <el-form-item label="密码" prop="password">-->
        <!--          <el-input v-model="form.password" clearable placeholder="请输入密码" style="width: 240px;border-radius: 4px"/>-->
        <!--        </el-form-item>-->
        <el-form-item label="角色" prop="PersonalroleValue">
          <el-select v-model="form.PersonalroleValue" clearable filterable placeholder="请选择角色"
            style="width:240px;border-radius: 4px">
            <el-option v-for="item in Personalrole" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="14" />
          <el-form-item>
            <el-button style="width: 80px;height: 40px" type="primary" @click="submit('form')">确 定</el-button>
            <el-button style="width: 80px;height: 40px" @click="callOff('form')">取消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>
    <el-dialog :show-close="false" :title="title1" :visible.sync="dialogFormVisible1" center width="440px">
      <el-divider style="margin: 0" />
      <el-form ref="form1" :model="form1" :rules="rules1" label-position="right" label-width="100px">
        <el-form-item label="姓名" prop="PersonalName">
          <el-input v-model="form1.PersonalName" clearable placeholder="请输入姓名"
            style="width: 240px;border-radius: 4px" />
        </el-form-item>
        <el-form-item label="工号" prop="account">
          <el-input v-model="form1.account" placeholder="请输入工号" readonly style="width: 240px;border-radius: 4px" />
        </el-form-item>
        <!--        <el-form-item label="密码" prop="password">-->
        <!--          <el-input-->
        <!--            v-model="form1.password"-->
        <!--            clearable-->
        <!--            placeholder="请输入密码"-->
        <!--            style="width: 240px;border-radius: 4px"/>-->
        <!--        </el-form-item>-->
        <el-form-item label="角色" prop="PersonalroleValue">
          <el-select v-model="form1.PersonalroleValue" clearable filterable placeholder="请选择角色"
            style="width:240px;border-radius: 4px">
            <el-option v-for="item in Personalrole" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="14" />
          <el-form-item>
            <el-button style="width: 80px;height: 40px" type="primary" @click="confirmEdit('form1')">确 定</el-button>
            <el-button style="width: 80px;height: 40px" @click="callOff1('form1')">取消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>
    <!--所属设备设置弹窗-->
    <el-dialog :visible.sync="isShowSearchOpNamePermission" center style="min-height: 200px" title="设备权限分配"
      width="600px">
      注：若不进行分配则默认可查询所有设备
      <el-table v-if="isShowSearchOpNamePermission" ref="backWorkEasyBadSelectListTable"
        :data="clickOpNamePermissionList" :row-class-name="tableRowClassName" border height="365px" size="small"
        style="width: 100%; height: 280px;  color: #000; border: 1px solid #9e9b9b">
        <el-table-column align="center" label="排序" type="index" width="60" />
        <el-table-column align="center" label="出售公司名称">
          <template slot-scope="scope">
            {{ scope.row.出售公司名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="设备编号">
          <template slot-scope="scope">
            {{ scope.row.设备编号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="有无权限">
          <template slot-scope="scope">
            <el-tag :type="scope.row.是否授权 == 1 ? 'success' : 'danger'" disable-transitions>{{ scope.row.是否授权 == 1 ?
              '有权限' : '无权限' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="权限修改" width="150">
          <template slot-scope="scope">
            <el-button v-if="Number(scope.row.是否授权) === 0" icon="el-icon-circle-plus-outline" size="mini"
              style="color: #00802d;padding: 0px;margin: 0px;" type="text"
              @click="updateOpNamePermission(scope.row, 1)">添加权限
            </el-button>
            <el-button v-if="Number(scope.row.是否授权) === 1" icon="el-icon-remove-outline" size="mini"
              style="color: #e43852;padding: 0px;margin: 0px;" type="text"
              @click="updateOpNamePermission(scope.row, 0)">删除权限
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="info" @click="isShowSearchOpNamePermission = false">关闭</el-button>
      </div>
    </el-dialog>
     <!--摄像头所属弹窗-->
     <el-dialog :visible.sync="isShowCameraPermission" center style="min-height: 200px" title="摄像头权限分配"
      width="600px">
      <el-table ref="backWorkEasyBadSelectListTable"
        :data="cameraPermissionList" :row-class-name="tableRowClassName" border height="365px" size="small"
        style="width: 100%; height: 280px;  color: #000; border: 1px solid #9e9b9b">
        <el-table-column align="center" label="排序" type="index" width="60" />
        <el-table-column align="center" label="摄像头名称">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="序列号">
          <template slot-scope="scope">
            {{ scope.row.deviceSerial }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="有无权限">
          <template slot-scope="scope">
            <el-tag :type="scope.row.是否授权 == 1 ? 'success' : 'danger'" disable-transitions>{{ scope.row.是否授权 == 1 ?
              '有权限' : '无权限' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="权限修改" width="150">
          <template slot-scope="scope">
            <el-button v-if="Number(scope.row.是否授权) === 0" icon="el-icon-circle-plus-outline" size="mini"
              style="color: #00802d;padding: 0px;margin: 0px;" type="text"
              @click="updateCameraPermission(scope.row, 1)">添加权限
            </el-button>
            <el-button v-if="Number(scope.row.是否授权) === 1" icon="el-icon-remove-outline" size="mini"
              style="color: #e43852;padding: 0px;margin: 0px;" type="text"
              @click="updateCameraPermission(scope.row, 0)">删除权限
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="info" @click="isShowCameraPermission = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      PersonalName: '', // 姓名
      PersonalroleValue: '', // 角色
      Personalrole: [],
      title: '',
      title1: '',
      dialogFormVisible: false,
      dialogFormVisible1: false,
      isShowSearchOpNamePermission: false,
      clickOpNamePermissionList: [],
      isShowCameraPermission: false, // 摄像头权限
      cameraPermissionList: [],
      form: {
        PersonalName: '',
        account: '',
        password: '',
        PersonalroleValue: ''
      },
      rules: {
        PersonalName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        account: [{ required: true, message: '请输入账号', trigger: 'change' }],
        password: [{ required: true, message: '请输入密码', trigger: 'change' }],
        PersonalroleValue: [{ required: true, message: '请选择角色', trigger: 'blur' }]
      },
      form1: {
        PersonalName: '',
        account: '',
        password: '',
        PersonalroleValue: ''
      },
      rules1: {
        PersonalName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        account: [{ required: true, message: '请输入账号', trigger: 'change' }],
        password: [{ required: true, message: '请输入密码', trigger: 'change' }],
        PersonalroleValue: [{ required: true, message: '请选择角色', trigger: 'blur' }]
      },
      loading: false,
      tableData: [],
      total: 0, // 总条数
      pageSize: 10, // 每页显示条数
      pageList: 1 // 后台获取页
    }
  },
  created() {
    this.getPersonalrole()
    this.searchTable()
  },
  methods: {
    // 初始化获取角色信息
    getPersonalrole() {
      this.Personalrole = []
      var Data = this.CreateData('11', '人员管理_角色信息初始化查询_查询')
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.Personalrole.push({
            label: response.data[i].Roles_Function,
            value: response.data[i].Roles_number
          })
        }
      })
    },
    changeIsClient(row) {
      var param = []
      param[0] = ['Personnel_Number', row.personnel_number]
      param[1] = ['value', row.isClient]
      var Data = this.CreateData('12', '登录基础数据_人员信息_切换是否用户', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.searchTable()
        } else {
          this.$message.error('修改失败')
        }
      })
    },
    // 查询
    searchTable() {
      if (this.PersonalName === '' || this.PersonalName === null) {
        this.PersonalName_check = 0
      } else {
        this.PersonalName_check = 1
      }
      if (this.PersonalroleValue === '' || this.PersonalroleValue === null) {
        this.PersonalroleValue_check = 0
      } else {
        this.PersonalroleValue_check = 1
      }
      this.loading = true
      this.tableData = []
      var param = []
      param[0] = ['姓名_check', this.PersonalName_check]
      param[1] = ['姓名', this.PersonalName]
      param[2] = ['角色代码_check', this.PersonalroleValue_check]
      param[3] = ['角色代码', this.PersonalroleValue]
      param[4] = ['PageCurrent', this.pageList]
      param[5] = ['PageSize', this.pageSize]
      param[6] = ['PageCount', '1111', 'int', '1']
      param[7] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('11', '人员管理_人员信息查询_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.result.length !== 0) {
          for (let i = 0; i < response.data.result.length; i++) {
            this.tableData.push({
              personnel_number: response.data.result[i].Personnel_Number,
              personnel_name: response.data.result[i].Personnel_Name,
              account: response.data.result[i].account,
              password: response.data.result[i].password,
              roles_number: parseInt(response.data.result[i].Roles_number),
              roles_function: response.data.result[i].Roles_Function,
              isClient: response.data.result[i].isClient
            })
          }
        }
        this.total = parseInt(response.data.output[0].ItemCount)
        this.loading = false
      })
    },

    // 点击编辑
    editType(formName, row) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
      this.form1.PersonalName = row.personnel_name
      this.form1.personnel_number = row.personnel_number
      this.form1.account = row.account
      this.form1.password = row.password
      this.form1.PersonalroleValue = row.roles_number
      this.title1 = '编辑人员'
      this.dialogFormVisible1 = true
    },

    // 确定编辑
    confirmEdit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['Personnel_Number', this.form1.personnel_number]
          param[1] = ['account', this.form1.account]
          param[2] = ['password', this.form1.password]
          param[3] = ['Personnel_Name', this.form1.PersonalName]
          param[4] = ['Roles_number', this.form1.PersonalroleValue]
          if (this.form1.account === '' || this.form1.account === null) {
            this.$message.error('请输入工号')
          } else if (this.form1.password === '' || this.form1.password === null) {
            this.$message.error('请输入密码')
          } else if (this.form1.personnel_name === '' || this.form1.personnel_name === null) {
            this.$message.error('请输入姓名')
          } else if (this.form1.PersonalroleValue === '' || this.form1.PersonalroleValue === null) {
            this.$message.error('请选择角色')
          } else {
            var Data = this.CreateData('12', '人员管理_人员信息修改_编辑', param)
            this.ExecDatabase(Data).then(response => {
              if (response.data[0].result === '1') {
                this.$message({
                  message: '信息编辑成功',
                  type: 'success'
                })
                this.searchTable()
                this.dialogFormVisible1 = false
              } else {
                this.$message.error('信息编辑失败')
              }
            })
          }
        }
      })
    },

    // 删除
    openDelete(row) {
      this.$confirm('当前人员将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirm-confirm-button',
        cancelButtonClass: 'confirm-cancel-button',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['Personnel_Number', row.personnel_number]
        var Data = this.CreateData('12', '人员管理_人员信息修改_删除', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '人员离职成功',
              type: 'success'
            })
            this.searchTable()
          } else {
            this.$message.error('人员离职失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 点击增加
    addType(formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
      this.form.PersonalName = ''
      this.form.account = ''
      this.form.password = '123456'
      this.form.PersonalroleValue = ''
      this.title = '增加人员'
      this.dialogFormVisible = true
    },

    // 增加确定
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 验证密码复杂性 最小六位 并且必须存在数字 与 字母
          // 复杂度校验放在第二次手动设置密码中了
          // if (this.form.password.length < 6 || !/[0-9]/.test(this.form.password) || !/[a-zA-Z]/.test(this.form.password)) {
          //   this.$message.error('密码复杂度不符合要求，最小六位且必须数字与字母同时存在')
          //   return false
          // }

          var param = []
          param[0] = ['Personnel_Name', this.form.PersonalName]
          param[1] = ['account', this.form.account]
          param[2] = ['password', this.form.password]
          param[3] = ['Roles_number', this.form.PersonalroleValue]
          var Data = this.CreateData('11', '人员管理_人员信息新增_新增', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '信息增加成功',
                type: 'success'
              })
              this.pageList = 1
              this.pageSize = 10
              this.searchTable()
            } else {
              this.$message.error('信息增加失败')
            }
          })
          this.dialogFormVisible = false
        } else {
          return false
        }
      })
    },
    // 查看设备权限
    searchOpNamePermission(row) {
      console.log(row)
      this.isShowSearchOpNamePermission = true
      this.getUserOpNameList(row.personnel_number)
    },
    // 摄像头权限
    searchCameraPermission(row) {
      console.log(row)
      this.isShowCameraPermission = true
      this.getCameraPermission(row.personnel_number)
    },
    getCameraPermission(personnel_number) {
      this.cameraPermissionList = []
      var param = []
      param[0] = ['Personnel_Number', personnel_number]
      var Data = this.CreateData('11', 'WEB_摄像头查看权限_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length != 0) {
          this.cameraPermissionList = response.data
        }
      })
    },
    // 重置密码
    resetPassword(row) {
      this.$confirm('是否重置此用户的登陆密码为初始密码?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirm-confirm-button',
        cancelButtonClass: 'confirm-cancel-button',
        type: 'warning'
      }).then(() => {
        this.clickOpNamePermissionList = []
        var param = []
        param[0] = ['Personnel_Number', row.personnel_number]
        var Data = this.CreateData('12', 'WEB_登录基础数据_人员信息_重置密码', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result == 1) {
            this.$message.success('密码重置成功，初始密码为123456')
          }
        })
      })
    },
    getUserOpNameList(personnel_number) {
      this.clickOpNamePermissionList = []
      var param = []
      param[0] = ['Personnel_Number', personnel_number]
      var Data = this.CreateData('11', 'WEB_人员设备查看权限_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].length != 0) {
          this.clickOpNamePermissionList = response.data
        }
      })
    },
    updateOpNamePermission(row, type) {
      console.log(row)
      this.$confirm('是否确认切换设权限', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['设备AID', row.设备AID]
        param[1] = ['Personnel_Number', row.Personnel_Number]
        param[2] = ['type', type]
        var Data = this.CreateData('12', 'WEB_人员设备查看权限_权限切换', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result == '1') {
            this.$message.success('权限切换成功')
            this.getUserOpNameList(row.Personnel_Number)
          }
        })
      })
    },
    updateCameraPermission(row, type) {
      console.log(row)
      this.$confirm('是否确认切换摄像头权限', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['摄像头AID', row.AID]
        param[1] = ['Personnel_Number', row.Personnel_Number]
        param[2] = ['type', type]
        var Data = this.CreateData('12', 'WEB_人员摄像头查看权限_权限切换', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result == '1') {
            this.$message.success('权限切换成功')
            this.getCameraPermission(row.Personnel_Number)
          }
        })
      })
    },
    tableRowClassName({ row }) {
      if (row.是否授权 == 1) {
        return 'success'
      } else {
        return 'no-success'
      }
    },

    // 重置表单
    callOff(formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },

    // 重置表单
    callOff1(formName) {
      this.dialogFormVisible1 = false
      this.$refs[formName].resetFields()
    },
    // 分页
    handleSizeChange(val) {
      this.pageList = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChange(val) {
      this.pageList = val
      this.searchTable()
    }
  }
}
</script>

<style scoped>
::v-deep.el-table .success {}

::v-deep.el-table .no-success {}
</style>
