<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    :bodyStyle="{ height: '600px' }"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item class="halfRow" :labelCol="labelCol2" :wrapperCol="wrapperCol2" label="复杂名称">
          <a-input
            placeholder="请输入复杂名称"
            v-decorator="['SGMC', { rules: [{ required: true, message: '请输入复杂名称' }] }]"
          />
        </a-form-item>
        <a-form-item class="halfRow" :labelCol="labelCol2" :wrapperCol="wrapperCol2" label="井号">
          <a-input
            placeholder="请输入井号"
            v-decorator="['JH', { rules: [{ required: true, message: '不能为空' }] }]"
          />
        </a-form-item>
        <a-form-item class="halfRow" :labelCol="labelCol2" :wrapperCol="wrapperCol2" label="复杂等级">
          <a-select
            placeholder="复杂等级"
            v-decorator="['SGDJBH', { rules: [{ required: true, message: '不能为空' }] }]"
          >
            <a-select-option value="ad7ef1c8-6688-467d-abfc-c03cf248aa26">一般</a-select-option>
            <a-select-option value="cb14a481-962b-4d17-af3e-a6514de2016e">严重</a-select-option>
            <a-select-option value="92c7c26a-10a7-486e-94b8-b35d90606bc3">非常严重</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="halfRow" :labelCol="labelCol2" :wrapperCol="wrapperCol2" label="事故类别">
          <a-select
            placeholder="事故类别"
            v-decorator="['SGLBID', { rules: [{ required: true, message: '不能为空' }] }]"
          >
            <a-select-option value="33607e02-9405-4b1f-9f8c-726ae92e46a8">卡钻</a-select-option>
            <a-select-option value="8a19698a-5e73-4fbe-be59-5de01cbe126c">井涌</a-select-option>
            <a-select-option value="6e7dc841-0277-419a-81c4-281fa5757e68">井漏</a-select-option>
            <a-select-option value="54edd711-0522-48f6-9145-e21cac046037">断钻具</a-select-option>
            <a-select-option value="63b2f72d-23fa-41e6-94e7-6e5fd3e03949">井塌</a-select-option>
            <a-select-option value="145362bf-6b83-40cd-a7b9-eb57b152099e">钻井液污染</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="halfRow" :labelCol="labelCol2" :wrapperCol="wrapperCol2" label="发生日期">
          <a-date-picker
            placeholder="发生日期"
            v-decorator="['FSRQ', { rules: [{ required: true, message: '不能为空' }] }]"
          />
        </a-form-item>
        <a-form-item class="halfRow" :labelCol="labelCol2" :wrapperCol="wrapperCol2" label="发生时间">
          <a-time-picker format="HH:mm" placeholder="发生时间" v-decorator="['FSSJ']" />
        </a-form-item>
        <a-form-item class="halfRow" :labelCol="labelCol2" :wrapperCol="wrapperCol2" label="解除日期">
          <a-date-picker
            placeholder="解除日期"
            v-decorator="['JCRQ', { rules: [{ required: true, message: '不能为空' }] }]"
          />
        </a-form-item>
        <a-form-item class="halfRow" :labelCol="labelCol2" :wrapperCol="wrapperCol2" label="解除时间">
          <a-time-picker format="HH:mm" placeholder="解除时间" v-decorator="['JCSJ']" />
        </a-form-item>
        <a-form-item class="halfRow" :labelCol="labelCol2" :wrapperCol="wrapperCol2" label="损失时间">
          <a-input-number :min="1" placeholder="损失时间" v-decorator="['SSSJ']" />
        </a-form-item>
        <a-form-item class="halfRow" :labelCol="labelCol2" :wrapperCol="wrapperCol2" label="当时井深">
          <a-input-number
            placeholder="当时井深"
            :min="0"
            v-decorator="['DSJS', { rules: [{ required: true, message: '不能为空' }] }]"
          />
        </a-form-item>
        <a-form-item class="fullRow" :labelCol="labelCol" :wrapperCol="wrapperCol" label="钻具组合">
          <a-textarea :rows="2" placeholder="请输入钻具组合" v-decorator="['NYHBKZZ']" />
        </a-form-item>
        <a-form-item class="fullRow" :labelCol="labelCol" :wrapperCol="wrapperCol" label="发生经过及原因">
          <a-textarea :rows="2" placeholder="请输入发生经过及原因" v-decorator="['FSJGJYY']" />
        </a-form-item>
        <a-form-item class="fullRow" :labelCol="labelCol" :wrapperCol="wrapperCol" label="处理情况">
          <a-textarea :rows="2" placeholder="请输入处理情况" v-decorator="['SGCLGK']" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import warnApi from '@/api/warnApi'
import _ from 'lodash'
import moment from 'moment'

moment.locales('zh-cn')

export default {
  name: 'CaseForm',
  data () {
    return {
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 10 },
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 14 },
      },

      confirmLoading: false,
      form: this.$form.createForm(this)
    }
  },
  created () { },
  mounted () { },
  computed: {},
  watch: {},
  methods: {
    add () {
      this.edit({})
    },
    edit (record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(this.model)
      })
    },
    close () {
      this.$emit('close')
      this.visible = false
    },
    handleOk () {
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          let formData = _.mapKeys(Object.assign(this.model, values), (value, key) => {
            return key.toLowerCase()
          })

          // formData.fsrq = formData.fsrq.format('YYYY-MM-DD')
          // formData.fssj = formData.fssj.format('HH:mm')
          // formData.jcrq = formData.jcrq.format('YYYY-MM-DD')
          // formData.jcsj = formData.jcsj.format('HH:mm')

          if (this.model.ID) {
            warnApi.editComplexCase(formData)
              .then(res => {
                this.$message.success('数据已更新')
              }).catch(e => {
                this.$message.info(e.message)
              }).finally(() => {
                this.confirmLoading = false
              })
          } else {
            warnApi.addComplexCase(formData)
              .then(res => {
                this.$message.success("数据已保存")
              }).catch(e => {
                this.$message.info(e.message)
              }).finally(() => {
                this.confirmLoading = false
              })
          }
        }
      })
    },
    handleCancel () {
      this.close()
    }
  }
}
</script>

<style lang="less" scoped>
.halfRow {
  float: left;
  width: 50%;
}
.fullRow {
  float: left;
  width: 100%;
}
</style>
