<template>
  <div class="staff page_container">
    <table-list v-bind="tableOptions" ref="tabList">
      <template #header-aside>
        <el-button type="primary" size="mini" @click="drawerVisible = true">新建员工</el-button>
      </template>
      <template v-slot:name="scope"><span class="details-handle" @click="handleDetails(scope.row)">{{scope.row.ad_id}}</span></template>
      <!-- 发布状态 -->
      <template v-slot:status="{ row }">
        <el-switch v-model="row.status"></el-switch>
      </template>
      <!-- 操作 -->
      <template v-slot:tools="{ row }">
        <el-button type="text" @click="changePassword(row)">重置密码</el-button>
        <el-button type="text" @click="changePhone(row)">更换手机号</el-button>
      </template>
    </table-list>
    <el-drawer :title="drawerTitle" :visible.sync="drawerVisible" size="440px" :destroy-on-close="true">
      <div class="drawer__content">
        <el-form :model="form" ref="drawerForm" :rules="rules" label-width="70px" class="drawer-form">
          <el-form-item label="账户" prop="userid" v-if="dialogType === 'edit'">
            <el-input v-model="form.userid" size="small" disabled></el-input>
          </el-form-item>
          <el-form-item label="账户" prop="userid" v-else style="position:relative;">
            <el-select v-model="form.userid" placeholder="输入关键字搜索" size="small" filterable remote :remote-method="fetchUserList" :loading="searchUsersloading" style="width:100%;">
              <el-option :label="user.username" :value="user.id" v-for="user in userList" :key="user.id" >
                <span style="float: left">{{ user.username }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px; margin-left:10px;">{{ user.id }}</span>
              </el-option>
            </el-select>
            <p class="search-keywords-checked" v-if="searchKeywordsCheckMsg">{{searchKeywordsCheckMsg}}</p>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" size="small"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" size="small"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="username">
            <el-input v-model="form.username" size="small"></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="role">
            <el-select v-model="form.role" placeholder="请选择角色" size="small" style="width:100%;">
              <el-option :label="role.name" :value="role.id" v-for="role in roleList" :key="role.id" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目" prop="project">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 8px 0;"></div>
            <el-checkbox-group v-model="form.project" @change="handleCheckedProjectChange">
              <el-checkbox v-for="pr in projectList" :label="pr.project_id" :key="pr.project_id">{{pr.project_name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <div class="drawer__footer">
          <el-button @click="drawerVisible = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="handleDrawerSubmit" size="mini">提 交</el-button>
        </div>
      </div>
    </el-drawer>
    <el-dialog :title="dialogTitle" ref="dialogForm"  :visible.sync="dialogVisible" width="440px" :destroy-on-close="true">
      <el-form :model="dialogForm" label-width="80px" class="dialog-form">
          <template v-if="dialogType === 'pwd'">
            <el-form-item label="新密码" prop="password" :rules="{ required: true, message: '请输入新密码', trigger: 'blur' }">
              <el-input v-model="dialogForm.password" size="small"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="ensurePassword" :rules="[{ required: true, message: '请输入确认密码', trigger: 'blur' }, { validator: (rule, value, callback) => checkedDialogForm(dialogForm.password, value, callback, '密码'), trigger: 'blur' }]">
              <el-input v-model="dialogForm.ensurePassword" size="small"></el-input>
            </el-form-item>
          </template>
          <template  v-if="dialogType === 'phone'">
            <el-form-item label="新手机号" prop="phone" :rules="[{ required: true, message: '请输入手机号', trigger: 'blur' }, { validator: (rule, value, callback) => checkedDialogForm(dialogForm.password, value, callback, '密码'), trigger: 'blur' }]">
              <el-input v-model="dialogForm.phone" size="small"></el-input>
            </el-form-item>
            <el-form-item label="确认号码" prop="ensurePhone" :rules="[{ required: true, message: '请输入确认密码', trigger: 'blur' }, { validator: (rule, value, callback) => checkedDialogForm(dialogForm.phone, value, callback, '手机号'), trigger: 'blur' }]">
              <el-input v-model="dialogForm.ensurePhone" size="small"></el-input>
            </el-form-item>
          </template>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="handleDialogSubmit" size="mini">提 交</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import TableList from '@/components/TableList'
import _ from 'lodash'
const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
const EMAIL_REG = /^[A-Za-z0-9]+([_.][A-Za-z0-9]+)*@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/
export default {
  components: { TableList },
  data() {
    const checkMobile = (rule, value, callback) => {
      if (value) {
        if (!MOBILE_REG.test(value)) {
          callback(new Error('手机号格式错误'));
        } else {
          callback()
        }
      }
    }
    const checkEmail = (rule, value, callback) => {
      if (value) {
        if (!EMAIL_REG.test(value)) {
          callback(new Error('邮箱格式错误'));
        } else {
          callback()
        }
      }
    }
    return {
      activeName: '0',
      projectList: [
        { project_id: '111', project_name: '索菲亚项目' },
        { project_id: '1131', project_name: '官网' },
        { project_id: '13411', project_name: '项目的简称' },
        { project_id: '113132', project_name: '项目的简称' },
        { project_id: '1e3131', project_name: '项目的简称' },
        { project_id: '13131', project_name: 'cu' },
        { project_id: '222', project_name: 'kellet' }
      ],
      roleList: [
        { id: '111', name: '超级管理员' },
        { id: '222', name: '数据管理员' }
      ],
      drawerVisible: false,
      drawerType: '',
      checkAll: false,
      isIndeterminate: false,
      form: {
        userid: '',
        username: '',
        phone: '',
        email: '',
        role: '',
        project: []
      },
      rules: {
        userid: [{ required: true, message: '请选择账户', trigger: 'change' }],
        username: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        phone: [
          // { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ],
        email: [
          // { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        role: [{ required: true, message: '请选择角色', trigger: 'change' }],
        project: { required: true, message: '请选择项目', trigger: 'change' }
      },
      userList: [],
      searchKeywordsCheckMsg: '',
      searchUsersloading: false,
      dialogVisible: false,
      dialogType: '',
      operateItem: '',
      dialogForm: {
        password: '',
        ensurePassword: '',
        phone: '',
        ensurePhone: ''
      },
      checkedMobile: checkMobile
    }
  },
  computed: {
    drawerTitle() {
      return this.drawerType === 'create' ? '新建员工' : '编辑员工'
    },
    dialogTitle() {
      const text = this.dialogType === 'pwd' ? '修改密码' : '修改手机'
      return text + `(${this.operateItem.name})`
    },
    tableOptions() {
      return {
        remote: {
          params: {}
        },
        filters: [
          {
            type: 'select',
            placeholder: '项目',
            prop: 'project',
            options: this.projectList,
            labelKey: 'project_name',
            valueKey: 'project_id'
          },
          { type: 'input', placeholder: '手机号/邮箱', prop: 'id' },
          {
            type: 'select',
            placeholder: '角色',
            prop: 'type',
            options: this.roleList,
            labelKey: 'name',
            valueKey: 'id'
          }
        ],
        columns: [
          { prop: 'name', label: '姓名' },
          { prop: 'role', label: '角色' },
          { prop: 'phone', label: '手机号' },
          { prop: 'email', label: '邮箱' },
          { prop: 'proejct_name', label: '项目' },
          { prop: 'author', label: '创建人' },
          { prop: 'create_time', label: '创建时间' },
          { prop: 'status', label: '状态', slots: 'status' },
          { prop: 'x', label: '操作', slots: 'tools' }
        ],
        data: [{ name: 'a', role: '超级管理员', phone: '123812312321', email: 'dsfdsxxx' }]
      }
    }
  },
  methods: {
    handleCheckAllChange(val) {
      this.form.project = val ? this.projectList.map(item => item.project_id) : [];
      this.isIndeterminate = false;
    },
    handleCheckedProjectChange(value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.projectList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.projectList.length;
    },
    checkedDialogForm(val, value, callback, word) {
      if (value && value !== val) {
        callback(new Error(word + '两次输入不一致'));
      } else callback()
    },
    // 重置密码
    changePassword(data) {
      console.log(data)
      this.operateItem = data
      this.dialogVisible = true
      this.dialogType = 'pwd'
    },
    // 更换手机号
    changePhone(data) {
      this.operateItem = data
      this.dialogVisible = true
      this.dialogType = 'phone'
    },
    handleDetails(val) {
      this.operateItem = _.cloneDeep(val)
      this.form = _.cloneDeep(val)
    },
    handleDrawerSubmit() {
      this.$refs.drawerForm.validate(valid => {
        if (valid) {
          console.log('drawerForm')
        } else {
          return false
        }
      })
    },
    handleDialogSubmit() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          console.log('dialogForm')
        } else {
          return false
        }
      })
    },
    fetchUserList(val) {
      console.log(val)
    }
  }
}
</script>
<style scoped>
.drawer__content{
  height:100%;
}
.drawer-form{
  width:400px;
  margin:0 20px;
  padding-top:20px;
  min-height: calc(100% - 70px);
}
.drawer__footer{
  text-align:center;
  padding-bottom:15px;
}
</style>
