<template>
  <div class="app-container">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px" class="qjform">
        <el-col :span="24">
          <h2 align="center">请假单</h2>
        </el-col>
        <el-col :span="8">
          <el-form-item label="请假人" prop="field101">
            <el-input v-model="formData.field101" placeholder="请输入请假人" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="部门" prop="field102">
            <el-input v-model="formData.field102" placeholder="请输入部门" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职务" prop="field103">
            <el-input v-model="formData.field103" placeholder="请输入职务" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="请假类别" prop="field106">
            <el-radio-group v-model="formData.field106" size="medium">
              <el-radio v-for="(item, index) in field106Options" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="请假事由" prop="field107">
            <el-input v-model="formData.field107" type="textarea" placeholder="请输入请假事由"
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="日期范围" prop="field102">
            <el-date-picker type="daterange" v-model="formData.field102" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd" :style="{width: '100%'}" start-placeholder="开始日期"
                            end-placeholder="结束日期" range-separator="至" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="共" prop="field110">
            <el-input v-model="formData.field110" placeholder="" show-word-limit clearable
                      :style="{width: '100%'}">
              <template slot="append">天</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <p style="padding-left: 100px;color:#ff4949;">
            1.请假半天可以写0.5不能写0.1,0.2等小数。2.全天假以00:00:00开始以23:59:59结束,下午请假以12:00:00开始</p>
        </el-col>
        <el-col :span="12">
          <el-form-item label="休息期间联系方式" prop="field111">
            <el-input v-model="formData.field111" placeholder="请输入休息期间联系方式" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="休息期间应急工作委托人" prop="field112">
            <el-input v-model="formData.field112" placeholder="请输入休息期间应急工作委托人" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门主管（经理）意见" prop="field114">
            <el-input v-model="formData.field114" type="textarea" placeholder="请输入部门主管（经理）意见"
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人力资源部（行政办）意见" prop="field115">
            <el-input v-model="formData.field115" type="textarea" placeholder="请输入人力资源部（行政办）意见"
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总经理意见" prop="field116">
            <el-input v-model="formData.field116" type="textarea" placeholder="请输入总经理意见"
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <p>
            说明: 1.返回公司报到时间为销假时间。 2.所有员工3天及以上请假需总经理批准。 3.本表存人力资源部(行政办)备案。"
          </p>
        </el-col>
        <el-col :span="24" align="center">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm" style="margin-left: -100px;">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
  export default {
    components: {},
    props: [],
    data() {
      return {
        formData: {
          field101: undefined,
          field102: undefined,
          field103: undefined,
          field106: undefined,
          field107: undefined,
          field109: null,
          field110: undefined,
          field111: undefined,
          field112: undefined,
          field114: undefined,
          field115: undefined,
          field116: undefined,
          field119: undefined
        },
        rules: {
          field101: [{
            required: true,
            message: '请输入请假人',
            trigger: 'blur'
          }],
          field102: [{
            required: true,
            message: '请输入部门',
            trigger: 'blur'
          }],
          field103: [],
          field106: [{
            required: true,
            message: '请假类别不能为空',
            trigger: 'change'
          }],
          field107: [{
            required: true,
            message: '请输入请假事由',
            trigger: 'blur'
          }],
          field109: [{
            required: true,
            message: '时间范围不能为空',
            trigger: 'change'
          }],
          field110: [],
          field111: [],
          field112: [],
          field114: [],
          field115: [],
          field116: [],
          field119: []
        },
        field106Options: [{
          'label': '病假',
          'value': 1
        }, {
          'label': '事假',
          'value': 2
        }, {
          'label': '年假',
          'value': 3
        }, {
          'label': '婚假',
          'value': 4
        }, {
          'label': '产假',
          'value': 5
        }, {
          'label': '丧假',
          'value': 6
        }, {
          'label': '探亲假',
          'value': 7
        }, {
          'label': '护理假',
          'value': 8
        }, {
          'label': '其他',
          'value': 9
        }]
      }
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
      submitForm() {
        this.$refs['elForm'].validate(valid => {
          if (!valid) return
          // TODO 提交表单
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      }
    }
  }
</script>
<style>
  .qjform {
    border: 1px solid #eee;
    overflow: hidden;
    width: 80%;
    margin: 0 auto;
    box-shadow: 1px 1px 10px #c7c7c7;
  }
</style>
