<template>
  <!--流程业务表单-->
  <div class="form-main">
      <h2>员工请假单</h2>
      
    <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
      <a-form @submit="handleSubmit" :form="form">
          <table border="1">
              <tr>
                  <td>请假人</td>
                <td>
                    <a-form-item
                    :wrapperCol="{lg: {span: 24}, sm: {span: 0} }">
                    <a-input :disabled="disabled"
                            v-decorator="[
                        'name',
                        {rules: [{ required: true, message: '输入名字' }]}
                    ]"
                            name="name"
                            placeholder="输入名字" 
                            />
                    </a-form-item>
                </td>
                <td>部门</td>
                <td>
                    <a-form-item
                    :wrapperCol="{lg: {span: 24}, sm: {span: 17} }">
                    <a-input :disabled="disabled"
                            v-decorator="[
                        'department',
                        {rules: [{ required: true, message: '输入部门' }]}
                    ]"
                            name="department"
                            placeholder="输入部门" 
                            />
                    </a-form-item>
                </td>
                <td>职务</td>
                <td>
                    <a-form-item
                    :wrapperCol="{lg: {span: 24}, sm: {span: 17} }">
                    <a-input :disabled="disabled"
                            v-decorator="[
                        'job',
                        {rules: [{ required: true, message: '输入职务' }]}
                    ]"
                            name="job"
                            placeholder="输入职务" 
                            />
                    </a-form-item>
                </td>
              </tr>
              <tr class="leavetype">
                  <td>
                    <span>请假类别:</span>
                    <a-radio-group
                    :disabled="disabled"
                    :defaultValue="0"
                    @change="onChange"
                    >
                    <a-radio :style="radioStyle" :value='0'
                    >
                    病假
                    </a-radio>
                    <a-radio :style="radioStyle" :value='1'>
                    事假
                    </a-radio>
                    <a-radio :style="radioStyle" :value='2'>
                    年假
                    </a-radio>
                    <a-radio :style="radioStyle" :value='3'
                    >
                    婚假
                    </a-radio>
                    <a-radio :style="radioStyle" :value='4'>
                    丧假
                    </a-radio>
                    <a-radio :style="radioStyle" :value='5'>
                    探亲假
                    </a-radio>
                    <a-radio :style="radioStyle" :value='6'
                    >
                    产假
                    </a-radio>
                    <a-radio :style="radioStyle" :value='7'>
                    护理假
                    </a-radio>
                    <a-radio :style="radioStyle" :value='8'>
                    其他
                    </a-radio>
                </a-radio-group>
                  </td>
              </tr>
              <tr>
                  <td>
                        <a-row>
                            <a-col :span="4">
                                <span>请假事由:</span>
                            </a-col>
                            <a-col :span="20">
                                <a-textarea :disabled="false"
                                    type="textarea"
                                    :autosize="{ minRows:8, maxRows:8 }"
                                    v-decorator="[
                                        'reason',
                                        {rules: [{ required: true, message: '输入请假理由' }]}
                                    ]"
                                        name="reason"
                                        placeholder="输入请假理由" 
                                />
                            </a-col>
                        </a-row>
                  </td>
              </tr>
              <tr class="days">
                  <a-form-item label="请假时间">
                    <a-range-picker
                        v-decorator="['range-time-picker', rangeConfig]"
                        show-time
                        format="YYYY-MM-DD HH:mm:ss"
                    />
                    </a-form-item>
                    <div>
                        总共请<a-input-number size="large" :min="1" :max="100000" :default-value="1"/>天假
                    </div>
                    
              </tr>
              <tr></tr>
              <tr></tr>
              <tr></tr>
          </table>
        
      </a-form>
    </a-card>
  </div>
</template>

<script>
    import pick from "lodash.pick";

    export default {
        name: 'leaveForm',
        props:{
            /*全局禁用，可表示查看*/
            disabled:{
                type:Boolean,
                default:false,
                required:false
            },
            /*流程数据*/
            processData:{
                type:Object,
                default:()=>{return {}},
                required:false
            },
            /*是否新增*/
            isNew: {type: Boolean, default: false, required: false},
            /*是否处理流程*/
            task: {type: Boolean, default: false, required: false}
        },
        data () {
            return {
                url:{
                    getForm:'/actBusiness/getForm',
                    addApply:'/actBusiness/add',
                    editForm:'/actBusiness/editForm',
                },
                description: '流程表单demo，按例开发表单。需在 activitiMixin.js 中加入写好的表单',
                // form
                form: this.$form.createForm(this),
                /*表单回显数据*/
                data:{},
                btndisabled: false,
                radioStyle: {
                    height: '40px',
                    lineHeight: '40px',
                },
            }
        },
        created() {
            console.log("流程数据",this.processData)
            if (!this.isNew){
                this.init();
            }
        },
        methods: {
            /*回显数据*/
            init(){
                this.btndisabled = true;
                var r = this.processData;
                this.getAction(this.url.getForm,{
                    tableId:r.tableId,
                    tableName:r.tableName,
                }).then((res)=>{
                    if (res.success){
                        let formData = res.result;
                        formData.tableName = r.tableName;
                        this.data = formData;
                        console.log("表单回显数据",this.data)
                        this.$nextTick(() => {
                            this.form.setFieldsValue(pick(this.data,'title'))
                            this.form.setFieldsValue(pick(this.data,'username'))
                            this.form.setFieldsValue({
                                floor: parseInt(pick(this.data,'floor').floor)
                            })
                        });
                        this.btndisabled = false;
                    }else {
                        this.$message.error(res.message)
                    }
                })
            },
            // handler
            handleSubmit (e) {
                e.preventDefault()
                this.form.validateFields((err, values) => {
                    if (!err) {
                        let formData = Object.assign(this.data||{}, values)
                        debugger;
                        formData.procDefId = this.processData.id;
                        formData.procDeTitle = this.processData.name;
                        if (!formData.tableName)formData.tableName = this.processData.businessTable;
                        formData.filedNames = _.keys(values).join(",");
                        console.log('formData', values)

                        var url = this.url.addApply;
                        if (!this.isNew){
                            url = this.url.editForm;
                        }
                        this.btndisabled = true;
                        this.postFormAction(url,formData).then((res)=>{
                            if (res.success){
                                this.$message.success("保存成功！")
                                //todo 将表单的数据传给父组件
                                this.$emit('afterSubmit',formData)
                            }else {
                                this.$message.error(res.message)
                            }
                        }).finally(()=>{
                            this.btndisabled = false;
                        })
                    }
                })
            },
            onChange(e) {
                console.log('radio checked', e.target.value,this.data);
            },
            close() {
                //todo 关闭后的回调
                this.$emit('close')
            },
            /*通过审批*/
            passTask() {
                this.$emit('passTask')
            },
            // /*驳回审批*/
            // backTask() {
            //     this.$emit('backTask')
            // }
        }
    }
</script>
<style lang="less" scoped>
  .form-main{
    width: 950px;
    box-shadow: 0px 0px 2px 1px #333;
    margin: 0 auto;
    text-align: center;
    table{
        width: 100%;
        tr{
           display: flex;
           justify-content: space-around;
           td{
               flex-grow:1;
               display: flex;
               align-items: center;
               justify-content: center;
               .ant-input{
                   resize: none;
                   border: none;
                   margin-bottom: 0;
               }
               .ant-row{
                   width: 100%;
               }
           }
        }
        .days .ant-form-item{
            display: flex;
        }
        .leavetype{
            span{
                margin-right: 30px;
            }
        }
    }
      .ant-form-item{
          margin-bottom: 0;
          input{
              border: none;
              background-color: #fff;
          }
      }
  }
</style>