<template>
  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :fullscreen="false" width="60%" append-to-body>
    <el-form ref="dataForm" :rules="rules" :model="staffForm" label-well-code="right" label-width="100px">
      <div class="form-div">
        <div class="form-left">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input v-model.trim="staffForm.name" :disabled="isDetailMode" type="text" placeholder="必填"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="sex">
                <el-select v-model="staffForm.sex" :disabled="isDetailMode" placeholder="请选择性别">
                  <el-option
                    v-for="item in sexList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="身份证号" prop="idcard">
                <el-input v-model.trim="staffForm.idcard" :disabled="isDetailMode" type="text" placeholder="必填"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号" prop="tel">
                <el-input v-model.trim="staffForm.tel" :disabled="isDetailMode" type="text" placeholder="必填"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="人员类型" prop="type">
                <el-select v-model="staffForm.type" :disabled="isDetailMode" placeholder="请选择人员类型">
                  <el-option
                    v-for="item in typeList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="岗位" prop="post">
                <el-select v-model="staffForm.post" :disabled="isDetailMode" placeholder="请选择岗位">
                  <el-option
                    v-for="item in postList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="入职年月" prop="hireDate">
                <el-date-picker
                  v-model.trim="staffForm.hireDate"
                  :disabled="isDetailMode"
                  type="month"
                  value-format="yyyy-MM"
                  placeholder="选择入职年月"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属单位" prop="deptId">
                <dept-select v-model="staffForm.deptId" :dept-show="true" :disabled="isDetailMode" placeholder="请选择所属单位" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="负责片区" prop="responseArea">
                <el-input v-model.trim="staffForm.responseArea" :disabled="isDetailMode" type="text" placeholder=""/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="作业内容" prop="jobs">
                <el-select v-model="staffForm.jobs" :disabled="isDetailMode" multiple placeholder="可多选">
                  <el-option
                    v-for="item in jobList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="notes">
                <el-input v-model.trim="staffForm.notes" :disabled="isDetailMode" type="text" placeholder=""/>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!--右边照片-->
        <div class="form-right">
          <!--<el-row>-->
          <div class="avatar">
            <el-image
              :src="photo!==''?photo:defaultPhoto"
              fit="cover"
              style="width: 130px; height: 175px"/>
          </div>
          <!--</el-row>-->
          <!--<el-row>-->
          <el-upload
            v-show="!isDetailMode"
            ref="upload"
            :before-upload="handleBeforeUpload"
            :on-success="handleSuccess"
            :http-request="uploadFile"
            :show-file-list="false"
            class="avatar-uploader"
            action="string"
            accept=".jpg,.jpeg,.png">
            <el-button type="primary">点击上传照片</el-button>
          </el-upload>
          <!--</el-row>-->
        </div>
      </div>
    </el-form>
    <div v-show="!isDetailMode" slot="footer" class="dialog-footer">
      <el-button :disabled="!canEdit" type="primary" @click="saveData">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addStaff, updateStaff } from '@/api/sanitation/staff'
import { Uploadimg } from '@/api/common'
import { getDictByType } from '@/api/common'
import DeptSelect from '../../components/DeptSelect/index'

export default {
  name: 'EditStaff',
  components: { DeptSelect },
  data() {
    const validateIDCard = (rule, value, callback) => {
      if (value !== '') {
        if ((/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/).test(value) === false) {
          callback(new Error('请输入合法的身份证号'))
        } else {
          callback()
        }
      } else {
        callback(new Error('身份证号不能为空'))
      }
    }
    return {
      baseUrl: this.baseConfig.baseUrl + '/static/',
      photo: '', // 图片路径
      defaultPhoto: require('../../assets/global_images/photo.png'), // 默认图片路径
      dialogFormVisible: false, // 对话框是否显示
      dialogStatus: '', // 对话框类型：create,update,detail
      staffForm: {
        id: '', // id
        name: '', // 姓名
        sex: '', // 性别
        idcard: '', // 身份证号
        deptId:'', // 组织机构
        tel: '', // 手机号
        photo: '', // 照片地址
        type: '', // 类型
        post: '', // 岗位
        hireDate: '', // 入职年月
        jobs: '', // 作业内容
        responseArea: '', // 负责片区
        notes: '' // 备注
      }, // 表单
      textMap: {
        update: '编辑',
        create: '新增',
        detail: '详情'
      }, // 表头显示标题
      sexList: [], // 性别列表
      typeList: [],
      postList: [], // 岗位
      jobList: [], // 作业内容
      rules: {
        name: [{ required: true, message: '姓名不能为空', trigger: ['blur', 'change'] }],
        sex: [{ required: true, message: '性别不能为空', trigger: ['blur', 'change'] }],
        tel: [{ required: true, message: '手机号不能为空', trigger: ['blur', 'change'] }],
        idcard: [{ required: true, validator: validateIDCard, trigger: ['blur', 'change'] }],
        type: [{ required: true, message: '人员类型必选', trigger: ['blur', 'change'] }],
        post: [{ required: true, message: '岗位必选', trigger: ['blur', 'change'] }],
        deptId: [{ required: true, message: '所属单位必选', trigger: ['blur', 'change'] }],
        hireDate: [{ required: true, message: '入职年月不能为空', trigger: ['blur', 'change'] }],
        joblist: [{ required: true, message: '作业内容必选', trigger: ['blur', 'change'] }]
      }, // 前端校验规则
      isEditMode: false, // 编辑模式
      isDetailMode: false, // 详情模式
      canEdit: true
    }
  },
  watch: {
    'staffForm.deviceType': function(val, oldval) {
      this.fetchPost(val)
    }
  },
  mounted() {
    this.fetchSexList()
    this.fetchPersonType()
    this.fetchPost()
    this.fetchJob()
  },
  methods: {
    /**
     * 初始化对话框
     * @param dialogStatus 对话框类型
     * @param dialogFormVisible 对话框是否可见
     * @param row 内容参数（编辑和详情需要）
     */
    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
      this.dialogStatus = dialogStatus
      this.dialogFormVisible = dialogFormVisible
      if (dialogStatus === 'create') { // 如果是新增，清除验证
        this.resetForm()
        this.isEditMode = false
        this.isDetailMode = false
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      } else if (dialogStatus === 'update') { // 如果是修改，将row中数据填写到输入框中
        this.staffForm = {
          id: row.id, // id
          name: row.name, // 姓名
          sex: row.sex, // 性别
          idcard: row.idCard, // 身份证号
          tel: row.tel, // 手机号
          photo: row.photo, // 照片地址
          type: row.type, // 类型
          post: row.post, // 岗位
          deptId: row.deptId, // 组织机构
          hireDate: row.hireDate, // 入职年月
          jobs: row.jobs ? row.jobs.split(',') : [], // 作业内容
          responseArea: row.responseArea, // 负责片区
          notes: row.notes // 备注
        }
        this.canEdit = true
        this.isEditMode = true
        this.isDetailMode = false
      } else {
        this.staffForm = {
          id: row.id, // id
          name: row.name, // 姓名
          sex: row.sex, // 性别
          idcard: row.idCard, // 身份证号
          tel: row.tel, // 手机号
          photo: row.photo, // 照片地址
          type: row.type, // 类型
          post: row.post, // 岗位
          deptId: row.deptId, // 组织机构
          hireDate: row.hireDate, // 入职年月
          jobs: row.jobs ? row.jobs.split(',') : [], // 作业内容
          responseArea: row.responseArea, // 负责片区
          notes: row.notes // 备注
        }
        this.isEditMode = true
        this.isDetailMode = true
      }
      if (this.staffForm.photo && this.staffForm.photo !== '') {
        this.photo = this.baseUrl + this.staffForm.photo
      }
    },
    // 重置表单
    resetForm() {
      this.staffForm = {
        id: '', // id
        name: '', // 姓名
        sex: '', // 性别
        idcard: '', // 身份证号
        tel: '', // 手机号
        photo: '', // 照片地址
        type: '', // 类型
        post: '', // 岗位
        deptId: '', // 组织机构
        hireDate: '', // 入职年月
        jobs: '', // 作业内容
        responseArea: '', // 负责片区
        notes: '' // 备注
      }
    },
    // 保存数据
    saveData: function() {
      // 照片不为空则对照片进行处理
      if (this.photo !== '') {
        if (this.photo.startsWith('http')) { // 上传的普通图片
          let index = this.photo.indexOf('/static/')
          if (index !== -1) {
            index += 8
          }
          this.staffForm.photo = this.photo.substring(index)
        }
      }
      if (this.dialogStatus === 'update') {
        this.updateData()
      } else if (this.dialogStatus === 'create') {
        this.createData()
      }
    },
    // 新增数据
    createData: function() {
      this.canEdit = false
      this.$refs['dataForm'].validate((valid) => {
        this.staffForm.hiredate = this.staffForm.hireDate
        if (valid) {
          addStaff(this.staffForm).then(response => {
            if (response.code === 200) {
              this.$confirm('新增成功，是否继续新增?', '提示', {
                confirmButtonText: '是',
                cancelButtonText: '否',
                type: 'info'
              }).then(() => {
                this.resetForm()
                this.$nextTick(() => {
                  this.$refs['dataForm'].clearValidate()
                  this.canEdit = true
                })
              }).catch(() => {
                this.$emit('watchChild')
                this.dialogFormVisible = false
                this.canEdit = true
              })
            }
          }).catch((e) => {
            this.canEdit = true
          })
        } else {
          this.canEdit = true
        }
      })
    },
    // 修改数据
    updateData: function() {
      this.canEdit = false
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.staffForm.hiredate = this.staffForm.hireDate
          updateStaff(this.staffForm).then(response => {
            if (response.code === 200) {
              this.$message.success('修改成功')
              this.$emit('watchChild')
              this.dialogFormVisible = false
              this.canEdit = true
            }
          }).catch((e) => {
            this.canEdit = true
          })
        } else {
          this.canEdit = true
        }
      })
    },
    // 图片上传
    uploadFile(file) {
      console.log('uploadFile:' + file.file.name)
      Uploadimg(file).then(res => {
        if (res.code === 200) {
          this.photo = this.baseUrl + res.data
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 上传前判断文件格式及大小
    handleBeforeUpload(file) {
      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
      let res = true
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
        res = false
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!')
        res = false
      }
      return res
    },
    // 上传成功后回显
    handleSuccess(response, file) {
      console.log('handleSuccess')
      if (response.code === 200) {
        this.photo = this.baseUrl + response.data
      } else {
        this.$message.warning(response.message)
      }
    },
    // 获取性别列表
    fetchSexList() {
      getDictByType('sex').then(response => {
        if (response.code === 200) {
          this.sexList = response.data
        }
      })
    },
    // 获取人员类别
    fetchPersonType(val) {
      getDictByType('staffType').then(response => {
        this.typeList = response.data
      })
    },
    // 获取岗位
    fetchPost(val) {
      getDictByType('postType').then(response => {
        this.postList = response.data
      })
    },
    // 获取岗位
    fetchJob(val) {
      getDictByType('jobType').then(response => {
        this.jobList = response.data
      })
    },
    cancel: function() {
      this.dialogFormVisible = false
      this.$emit('watchChild')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-select{
    width: 100%;
  }
  .el-date-editor{
    width: 100%;
  }
  .form-div{
    width:100%;
    height:100%;
    display:flex;
    justify-content: space-between;
  }
  .form-left{
    flex:1;
    height:100%;
  }
  .form-right{
    width: 180px;
    height:100%;
    .avatar{
      margin-bottom: 10px;
    }
    text-align: center;
  }
</style>