<template>
  <!-- 对话框表单 -->
  <el-dialog custom-class="ba-operate-dialog" :close-on-click-modal="false"
    :model-value="baTable.form.operate=='edit' || baTable.form.operate=='add'? true : false" @close="baTable.toggleForm">
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
        {{ baTable.form.operate ? baTable.form.operate=='edit'?'编辑' : '添加':'无标题' }}
      </div>
    </template>
    <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
      <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'"
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'">
        <el-form ref="formRef" @keyup.enter="baTable.onSubmit(formRef)" :model="baTable.form.items"
          label-position="right" :label-width="baTable.form.labelWidth + 'px'" :rules="rules"
          v-if="!baTable.form.loading">
          <el-divider border-style="dashed" content-position="left" style="color:gray">基本信息</el-divider>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="departmentName" label="部门">
                <el-input v-model="baTable.form.items!.departmentName" type="string" :disabled="true"
                  placeholder="请选择部门">
                </el-input>
              </el-form-item>
              <FormItem prop="postId" label="职务"
                v-model="baTable.form.items!.postId" type="remoteSelect" :input-attr="{
                            params: { isTree: false },
                            field: 'name',
                            'remote-url': baTable.api.actionUrl.get('select'),
                            placeholder: '请选择职务',
                            showRefresh:false
                        }" />
              <el-form-item prop="trueName" label="姓名">
                <el-input v-model="baTable.form.items!.trueName" type="string"
                  placeholder="请输入姓名"></el-input>
              </el-form-item>

              <el-form-item label="性别">
                <el-radio v-model="baTable.form.items!.sex" label="0" :border="true">男</el-radio>
                <el-radio v-model="baTable.form.items!.sex" label="1" :border="true">女</el-radio>
              </el-form-item>
              <el-form-item label="出生日期">
                <el-date-picker class="w100" value-format="YYYY-MM-DD" v-model="baTable.form.items!.birthday"
                  type="date"
                  placeholder="请选择生日" />
              </el-form-item>
              <el-form-item prop="mobile" label="手机">
                <el-input v-model="baTable.form.items!.mobile" type="string"
                  placeholder="请输入手机号码"></el-input>
              </el-form-item>
              <el-form-item prop="email" label="Email">
                <el-input v-model="baTable.form.items!.email" type="string"
                  placeholder="请输入Email"></el-input>
              </el-form-item>
              <el-form-item label="照片">
                <el-upload class="avatar-uploader" action="" :show-file-list="false" @change="onAvatarBeforeUpload"
                  :auto-upload="false" accept="image/gif, image/jpg, image/jpeg, image/bmp, image/png, image/webp">
                  <el-image :src="baTable.form.items!.previewPicture" class="avatar">
                    <template #error>
                      <div class="image-slot">
                        <Icon size="30" color="#c0c4cc" name="el-icon-Picture" />
                      </div>
                    </template>
                  </el-image>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="nation" label="民族">
                <el-input v-model="baTable.form.items!.nation" type="string"
                  placeholder="请输入民族"></el-input>
              </el-form-item>
              <el-form-item prop="censusRegister" label="户籍">
                <el-input v-model="baTable.form.items!.censusRegister" type="string"
                  placeholder="请输入户籍">
                </el-input>
              </el-form-item>
              <el-form-item prop="politic" label="政治面貌">
                <el-select v-model="baTable.form.items!.politic" style="width:100%"
                  placeholder="请输入政治面貌">
                  <el-option v-for="item in selectOption.politicOption" :key="item.value" :label="item.label"
                    :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item prop="idNumber" label="身份证号">
                <el-input v-model="baTable.form.items!.idNumber" type="string"
                  placeholder="请输入身份证号"></el-input>
              </el-form-item>
              <el-form-item prop="address" label="地址">
                <el-input v-model="baTable.form.items!.address" type="textarea" rows="3"
                  placeholder="请输入地址"></el-input>
              </el-form-item>
              <el-form-item prop="emergencyContact" label="紧急联系人">
                <el-input v-model="baTable.form.items!.emergencyContact" type="string"
                  placeholder="请输入紧急联系人">
                </el-input>
              </el-form-item>
              <el-form-item prop="emergencyMobile" label="紧急联系电话">
                <el-input v-model="baTable.form.items!.emergencyMobile" type="string"
                  placeholder="请输入紧急联系电话">
                </el-input>
              </el-form-item>
            </el-col>

          </el-row>
          <el-divider border-style="dashed" content-position="left">入职信息</el-divider>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="hireDate" label="入职日期">
                <el-date-picker class="w100" value-format="YYYY-MM-DD" v-model="baTable.form.items!.hireDate"
                  type="date"
                  placeholder="请选择入职日期" />
              </el-form-item>
              <el-form-item prop="contractDate" label="签订日期">
                <el-date-picker class="w100" value-format="YYYY-MM-DD" v-model="baTable.form.items!.contractDate"
                  type="date"
                  placeholder="请选择签订日期" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="contractPeriod" label="合同周期(年)">
                <el-input v-model="baTable.form.items!.contractPeriod" type="string"
                  placeholder="请输入合同周期(年)">
                </el-input>
              </el-form-item>
              <el-form-item prop="status" label="状态">
                <el-select v-model="baTable.form.items!.status" style="width:100%"
                  placeholder="请选择状态">
                  <el-option v-for="item in selectOption.statusOption" :key="item.value" :label="item.label"
                    :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
                <el-form-item prop="remark" label="备注">
                <el-input v-model="baTable.form.items!.remark" type="textarea" :rows="3"
                  placeholder="请输入备注信息">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
        <el-button @click="baTable.toggleForm('')">取消</el-button>
        <el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)" type="primary">
          {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? '保存并编辑下一项' : '保存' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, inject } from 'vue'

import type baTableClass from '/@/utils/baTable'
import type { ElForm, FormItemRule } from 'element-plus'
import FormItem from '/@/components/formItem/index.vue'
import { fileUpload } from '/@/api/common'
const selectOption = reactive({
    statusOption: [
        {
            value: '1',
            label: '试用期',
        },
        {
            value: '2',
            label: '正式',
        },
        {
            value: '3',
            label: '离职',
        },
    ],
    politicOption: [
        {
            value: '群众',
            label: '群众',
        },
        {
            value: '团员',
            label: '团员',
        },
        {
            value: '党员',
            label: '党员',
        },
    ],
})
const formRef = ref<InstanceType<typeof ElForm>>()
const baTable = inject('baTable') as baTableClass




const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    departmentName: [
        {
            required: true,
            message: '请选择部门',
            trigger: 'blur',
        },
    ],
    postId: [
        {
            required: true,
            message: '请选择职务',
            trigger: 'blur',
        },
    ],
    trueName: [
        {
            required: true,
            message: '请输入姓名',
            trigger: 'blur',
        },
    ],
    mobile: [
        {
            required: true,
            message: '请输入手机',
            trigger: 'blur',
        },
        {
            pattern: /^1[3|5|7|8|9]\d{9}$/,
            message: '请输入正确的号码格式',
            trigger: 'change',
        },
    ],
    hireDate: [
        {
            required: true,
            message: '请选择入职日期',
            trigger: 'blur',
        },
    ],
    status: [
        {
            required: true,
            message: '请选择状态',
            trigger: 'blur',
        },
    ],
    emergencyMobile:[
        {
            pattern: /^1[3|5|7|8|9]\d{9}$/,
            message: '请输入正确的号码格式',
            trigger: 'change',
        }
    ],
    idNumber:[
        {
          pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
          message: '请输入正确的身份证号码',
          trigger: 'change'
       }
    ]
})

const onAvatarBeforeUpload = (file: any) => {
    let fd = new FormData()
    fd.append('file', file.raw)
    fd.append('empId',"")
    fileUpload(fd).then((res) => {
        if (res.code == 1) {
             baTable.form.items!.previewPicture= res.data.previewUrl
            baTable.form.items!.picture = res.data.fileUrl
        }
    })
}
</script>

<style scoped lang="scss">
:deep(.penultimate-node) {
    .el-tree-node__children {
        padding-left: 60px;
        white-space: pre-wrap;
        line-height: 12px;
        .el-tree-node {
            display: inline-block;
        }
        .el-tree-node__content {
            padding-left: 5px !important;
            padding-right: 5px;
            .el-tree-node__expand-icon {
                display: none;
            }
        }
    }
}

.avatar-uploader {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: var(--el-border-radius-small);
    box-shadow: var(--el-box-shadow-light);
    border: 1px dashed var(--color-sub-1);
    cursor: pointer;
    overflow: hidden;
    width: 110px;
    height: 110px;
}
.avatar-uploader:hover {
    border-color: var(--color-primary);
}
.avatar {
    width: 110px;
    height: 110px;
    display: block;
}
.image-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
</style>
