<template>
  <div class="_login copyright" :data-version="version">
    <img class="login_top" src="/imgs/login-top.png" />
    <img class="login_draw" src="/imgs/login-draw.png" width="800" />
    <img class="login_bottom" src="/imgs/login-bottom.png" />
    <h1 class="_login_title i-logo" style="font-size:32px">{{ name }}</h1>
    <div class="register-panel">
      <el-form
        ref="form"
        :model="register_form"
        :rules="rules"
        label-width="90px"
      >
        <el-form-item label="用户名" prop="username">
          <span slot="label" class="form-label">用户名</span>
          <el-input
            v-model="register_form.username"
            size="mini"
            placeholder="请输入用户名，作为登录账号使用！"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <span slot="label" class="form-label">姓名</span>
          <el-input
            v-model="register_form.name"
            size="mini"
            placeholder="请输入用户姓名！"
          ></el-input>
        </el-form-item>
        <el-form-item label="组织" prop="org">
          <span slot="label" class="form-label">组织</span>
          <el-cascader
            v-model="register_form.org"
            :options="org_options"
            size="mini"
            :props="{
              checkStrictly: true,
              expandTrigger: 'hover',
              label: 'name',
              value: 'id',
            }"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="管辖老师" prop="manageTeacher">
          <span slot="label" class="form-label">管辖老师</span>
          <el-select
            v-model="register_form.manageTeacher"
            size="mini"
            multiple
            filterable
            reserve-keyword
            placeholder="请选择管辖老师，可为空！"
          >
            <el-option
              v-for="v in allTeacher"
              :key="v.id"
              :label="v.name"
              :value="v.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="照片">
          <span slot="label" class="form-label">照片</span>
          <div class="_photo" @click="toUploadPhoto">
            <img
              v-if="register_form.photoResource"
              :src="register_form.photoResource.fileLinkTransfer()"
            />
            <i v-else class="_icon el-icon-plus" />
          </div>
        </el-form-item>
        <el-form-item label="性别">
          <span slot="label" class="form-label">性别</span>
          <el-radio-group v-model="register_form.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生年月">
          <span slot="label" class="form-label">出生日期</span>
          <el-date-picker
            v-model="register_form.birthday"
            size="mini"
            type="date"
            placeholder="选择出生日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="身份证号" prop="idcard">
          <span slot="label" class="form-label">身份证号</span>
          <el-input
            v-model="register_form.idcard"
            placeholder="请输入身份证号码！"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item label="职位">
          <span slot="label" class="form-label">职位</span>
          <el-input
            v-model="register_form.identity"
            placeholder="请输入职位！"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <span class="form-label" slot="label">电话</span>
          <el-input
            v-model="register_form.phone"
            placeholder="请输入用电话！"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <span slot="label" class="form-label">邮箱</span>
          <el-input
            v-model="register_form.email"
            placeholder="请输入邮箱！"
            size="mini"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="floot-box">
        <el-button
          type="danger"
          @click="register_form = { roleId: 3, photoResource: '', sex: 1 }"
          >重置</el-button
        >
        <el-button type="primary" :loading="registerLoading" @click="register"
          >注册</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { name, version } from '~/package.json'
import { findAllTeacherApi, registerApi } from '@/api/system/user'

import { findAllOrgApi } from '@/api/system/org'
import { getDistFile } from '@/utils'
import { uploadApi } from '@/api/system'
export default {
  data: () => ({
    name,
    version,
    register_form: { roleId: 3, photoResource: '', sex: 1 },
    rules: {
      username: {
        required: true,
        message: '用户名输入不合法',
        trigger: 'blur',
        validator: (r, v, c) => c(v && /^\w+$/.test(v) ? undefined : 1)
      },
      name: {
        required: true,
        message: '姓名输入不合法',
        trigger: 'blur',
        validator: (r, v, c) => c(v && /^\S+$/.test(v) ? undefined : 1)
      },
      org: { required: true, message: '请选择组织', trigger: 'blur' },
      role: { required: true, message: '请选择角色', trigger: 'change' },
      idcard: {
        message: '身份证号输入不合法',
        trigger: 'blur',
        validator: (r, v, c) =>
          c(
            v &&
              !/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/.test(
                v
              )
              ? 1
              : undefined
          )
      },
      phone: {
        message: '电话输入不合法',
        trigger: 'blur',
        validator: (r, v, c) =>
          c(v && !/^1[3456789]\d{9}$/.test(v) ? 1 : undefined)
      },
      email: {
        message: '邮箱输入不合法',
        trigger: 'blur',
        validator: (r, v, c) =>
          c(
            v && !/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/.test(v)
              ? 1
              : undefined
          )
      }
    },
    org_options: [],
    allTeacher: [],
    registerLoading: false
  }),
  created () {
    this.findAllOrg()
    this.findAllTeacher()
  },
  methods: {
    async findAllOrg () {
      const { data } = await findAllOrgApi()
      const { tree } = data.toTree('label')
      // this.org_options = [...this.org_options]
      this.org_options.splice(0, this.org_options.length, ...tree)
      console.log(this.org_options)
    },
    async toUploadPhoto () {
      const [file] = await getDistFile({ accepts: ['image'] })
      console.log(file)
      this.register_form.photoResource = file
    },
    async findAllTeacher () {
      const { data } = await findAllTeacherApi()
      this.allTeacher = data
    },
    async register () {
      try {
        await this.$refs.form.validate()
        this.registerLoading = true
        const { org, photoResource, ...form } = this.register_form
        form.orgId = org[org.length - 1]
        form.orgIds = org.join(',')
        if (photoResource instanceof File) {
          const { data } = await uploadApi(photoResource, {
            data: { type: 'avatar' }
          })
          form.photo = data.id
        }
        await registerApi(form)
        // this.$message.success('注册成功')
        this.registerLoading = false
        this.$confirm('注册成功，是否前往登录界面？', '提示', { type: 'success' })
          .then((_) => {
            this.$router.push('/login')
          })
          .catch((_) => {
            this.register_form = { roleId: 3, photoResource: '', sex: 1 }
          })
        console.log(this.register_form)
      } catch (error) {
        this.registerLoading = false
      }
    }
  }
}
</script>

<style lang="scss">
._login {
  height: 100vh;
  background-image: url(/imgs/login-bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  user-select: none;

  &::before {
    content: "V" attr(data-version);
    font-size: 15px;
    color: #00e9ff;
    font-weight: bold;
    position: absolute;
    top: 18px;
    right: 30px;
    z-index: 1;
  }

  &.copyright::after {
    color: #fff;
    bottom: 43px;
    font-size: 16px;
    letter-spacing: 6px;
  }

  img {
    -webkit-user-drag: none;
  }

  .login_top {
    width: 100%;
    height: 136px;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  .login_draw {
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translate(-100%, -50%);
  }

  .login_bottom {
    width: 68%;
    height: 50px;
    position: absolute;
    bottom: 20px;
    left: 16%;
    right: 0;
    object-fit: none;
  }
  .form-label {
    display: inline-block;
    width: 50px;
    text-align: justify;
    text-align-last: justify;
  }
  .el-form-item__label {
    text-align: center;
  }
  &_title {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 40px;
    letter-spacing: 4px;
    color: #00e9ff;

    &::before {
      font-weight: initial;
      font-size: 50px;
      vertical-align: middle;
    }
  }
  .register-panel {
    padding: 10px 20px;
    position: absolute;
    top: 15%;
    left: 50%;
    width: 500px;
    transform: translateX(-50%);
    border-radius: 5px;
    box-shadow: 0 0 10px 3px rgba(185, 185, 185, 0.301);
    height: 75vh;
    background-color: white;
    overflow: auto;
  }
}
._photo {
  width: 120px;
  height: 90px;
  padding: 3px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  color: #dcdfe6;
  cursor: pointer;
  position: relative;

  &::after {
    content: attr(data-hint);
    position: absolute;
    left: 110%;
    top: 50px;
    margin-top: -16%;
    white-space: nowrap;
    color: #333;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  ._icon {
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &:hover {
    color: $--color-primary;
    border-color: $--color-primary;
  }
}

.el-cascader,
.el-select,
.el-date-editor.el-input {
  width: 100%;
}
.floot-box {
  width: 100%;
  justify-content: center;
  display: flex;
  padding: 10px;
  button:first-child {
    margin-right: 20px;
  }
}
</style>
