
<template>
  <a-form
    ref="form"
    v-bind="formItemLayout"
    :form="form"
  >
    <a-form-item label="收货人名">
      <a-input
        v-decorator="[
          'name',
          {
            rules: [
              { required: true, message: `请选择收货人名!`, type: 'string' },
            ]
          }
        ]"
        :placeholder="`请选择收货人名!`"
      />
    </a-form-item>
    <a-form-item label="收货手机号">
      <a-input
        v-decorator="[
          'mobile_no',
          {
            rules: [
              { required: true, message: `请选择收货手机号!`, type: 'string' },
            ]
          }
        ]"
        :placeholder="`请选择收货手机号!`"
      />
    </a-form-item>
    <a-form-item label="收货地址">
      <a-input
        v-decorator="[
          'address',
          {
            rules: [
              { required: true, message: `请选择收货地址!`, type: 'string' },
            ]
          }
        ]"
        :placeholder="`请选择收货地址!`"
      />
    </a-form-item>
    <a-form-item label="购买数量">
      <a-input
        v-decorator="[
          'number',
          {
            rules: [
              { required: true, message: `请输入购买数量!`, type: 'string' },
            ]
          }
        ]"
        :placeholder="`请输入购买数量!`"
      />
    </a-form-item>
    <a-form-item label="发货方式">
      <a-select
        @change="typeChange"
        v-decorator="[
          'channel',
          {
            rules: [
              { required: true, message: `请选择发货方式!`, type: 'string' }
            ]
          }
        ]"
        :placeholder="`请选择发货方式!`">
        <a-select-option v-for="item in offline.channels" :key="item.value" :value="item.value">{{ item.text }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="快递类型" v-if="currentType === 'express'">
      <a-select
        v-decorator="[
          'express_id',
          {
            rules: [
              { required: true, message: `请选择快递类型!`, type: 'string' }
            ]
          }
        ]"
        :placeholder="`请选择快递类型!`">
        <a-select-option v-for="(item, key, index) in offline.expresses" :key="index" :value="key">{{ item }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="快递单号" v-if="currentType === 'express'">
      <a-input
        v-decorator="[
          'express_no',
          {
            rules: [
              { required: true, message: `请选择快递单号!`, type: 'string' },
            ]
          }
        ]"
        :placeholder="`请选择快递单号!`"
      />
    </a-form-item>
    <a-form-item
      label="发货时间"
    >
      <a-date-picker
        v-decorator="[
          'deliver_at',
          {
            rules: [
              { required: false, message: `请选择发货时间!` },
            ]
          }
        ]"
        :placeholder="`请选择发货时间!`"
        style="width: 100%" />
    </a-form-item>
  </a-form>
</template>

<script>
import { createMiddlesStockOffline } from '@/api/stock'
import moment from 'moment'
export default {
  name: 'EditSend',
  props: {
    offline: {
      type: Object,
      default: () => {
          return {}
        }
    }
  },
  data: () => ({
    formItemLayout: {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 }
    },
    loading: false,
    currentType: ''
  }),
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  methods: {
    moment,
    onOk () {
      return new Promise(resolve => {
        this.form.validateFields((errors, values) => {
          if (!errors) {
            values.deliver_at = moment(values.deliver_at).format('YYYY-MM-DD')
            createMiddlesStockOffline(values).then((res) => {
              this.$notification.success({
                message: '成功',
                description: '新增线下出货成功！！'
              })
              resolve(true)
            }).catch((err) => {
              this.$notification.error({
                message: '失败',
                description: err.message
              })
              resolve(false)
            })
          }
        })
      })
    },
    // 切换发货方式(线上发货 自提发货)
    typeChange (e) {
      this.currentType = e
    }
  }
}
</script>

<style scoped>

</style>
