<template>
  <j-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen
    @ok="handleOk" @cancel="handleCancel" cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="员工姓名">
          <j-select-user-by-dep v-decorator="['userId', validatorRules.realname]" />

        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="部门名称">
          <a-input :disabled="true" placeholder="请输入部门名称" v-decorator="['deptNames', validatorRules.deptname ]" />
        </a-form-item>
        <a-form-item <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="合同类型">
          <j-dict-select-tag v-decorator="['contractType', validatorRules.type]" :triggerChange="true"
            placeholder="请选择合同类型" dictCode="contract_type" />

        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="开始时间">
          <a-date-picker  format='YYYY-MM-DD' v-decorator="[ 'startDate', validatorRules.startDate]" />
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="结束时间">
          <a-date-picker :disabled-date="disabledDate"  format='YYYY-MM-DD'
            v-decorator="[ 'endDate', validatorRules.endDate]" />
        </a-form-item>

      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
  import {
    httpAction,
    getAction
  } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"
  import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
  import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
  export default {
    name: "UserContractModal",
    components: {
      JSelectMultiUser,
      JSelectUserByDep
    },
    data() {
      return {
        title: "操作",
        visible: false,
        model: {},
        userid: "",
        deptid: "",
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          },
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {
          realname: {
            rules: [{
              required: true,
              message: '请输入员工名称!'
            }, {
              validator: this.validateRealname
            }]
          },
          deptname: {
            rules: [{
              required: true,
              message: '请输入部门名称!'
            }, ]
          },
          type: {
            rules: [{
              required: true,
              message: '请选择合同类型'
            }]
          },
          startDate: {
            rules: [{
              required: true,
              message: '请选择合同开始日期'
            },
            {
              validator: this.validatestartDate
            }
            ]
          },
          endDate: {
            rules: [{
              required: true,
              message: '请选择合同结束日期'
            }]
          },
        },
        url: {
          add: "/usercontract/userContract/add",
          edit: "/usercontract/userContract/edit",
          dept: "/sys/user/queryUsersByusername"
        },
      }
    },
    created() {},
    methods: {
      disabledDate(current) {
        var startDate= this.form.getFieldValue('startDate');
        return current && current < moment(startDate).endOf('day');
      },
      add() {
        this.edit({});
      },
      edit(record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.deptid = record.deptId;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'userId', 'contractType', 'deptNames'))
          //时间格式化
          this.form.setFieldsValue({
            startDate: this.model.startDate ? moment(this.model.startDate) : null
          })
          this.form.setFieldsValue({
            endDate: this.model.endDate ? moment(this.model.endDate) : null
          })
        });

      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleOk() {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {

          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if (!this.model.id) {
              httpurl += this.url.add;
              method = 'post';
            } else {
              httpurl += this.url.edit;
              method = 'put';
            }
            let formData = Object.assign(this.model, values);

            formData.deptId = this.deptid;
            //时间格式化
            formData.startDate = formData.startDate ? formData.startDate.format('YYYY-MM-DD HH:mm:ss') : null;
            formData.endDate = formData.endDate ? formData.endDate.format('YYYY-MM-DD HH:mm:ss') : null;

            console.log(formData)
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit('ok');
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })



          }
        })
      },
      handleCancel() {
        this.close()
      },
      validatestartDate(rule, value, callback) {
        if (!value) {
          callback()
        } else {
          callback()
          this.form.setFieldsValue({
            endDate:null
          })
        }
      },
      validateRealname(rule, value, callback) {
        if (!value) {
          callback()
          this.deptid = "";
          this.form.setFieldsValue({
            deptNames: ""
          })
        } else {
          this.queryDeptName(value);
          callback()
        }
      },
      queryDeptName(e) {
        getAction(this.url.dept, {
          id: e
        }).then((res) => {
          if (res.success) {
            if (res.result.length > 0) {
              var list = res.result;
              var deptids = [];
              var deptname = [];
              for (var i = 0; i < list.length; i++) {
                deptids.push(list[i].deptid);
                deptname.push(list[i].deptname);
              }
              this.deptid = deptids.join(",");
              this.form.setFieldsValue({
                deptNames: deptname.join(",")
              })
            } else {
              this.deptid = "";
              this.form.setFieldsValue({
                deptNames: ""
              })
            }


          }
        })
      }


    }
  }
</script>

<style lang="less" scoped>

</style>
