<template>
  <a-form
    ref="form"
    v-bind="formItemLayout"
    :form="form"
    v-if="!loading"
  >
    <a-form-item label="邮寄地址">
      <div style="display:flex;">
        <a-select
          v-decorator="[
            'address_id',
            {
              rules: [
                { required: true, message: '请选择邮寄地址!', type: 'number' },
              ]
            }
          ]"
          placeholder="请选择邮寄地址"
        >
          <a-select-option v-for="item in lists" :key="item.address_id" :value="item.address_id">
            {{ item.name }} {{ item.mobile }}<br/>
            <div class="overflow2">详细地址：{{ item.full_address }}</div>
          </a-select-option>
        </a-select>
      </div>
    </a-form-item>
    <a-form-item label="备注信息">
      <a-textarea
        :rows="4"
        v-decorator="[
          'remark',
          {
            rules: [
              { required: false, message: '请输入备注信息!', type: 'string' },
            ]
          }
        ]"
        placeholder="请输入备注信息" />
    </a-form-item>
  </a-form>
</template>

<script>
import {
  getAllAddrList,
  addressExpress
} from '@/api/address'
export default {
  name: 'SelectAddr',
  props: {
    order: {
      type: Object,
      default: null
    }
  },
  data: () => ({
    formItemLayout: {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 }
    },
    btnLabelCol: {
      offset: 6,
      span: 16
    },
    loading: false,
    lists: []
  }),
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created () {
    this.loading = true
    getAllAddrList().then(res => {
      this.loading = false
      this.lists = res
    })
  },
  methods: {
    onOk () {
      return new Promise(resolve => {
        this.form.validateFields((errors, values) => {
          if (!errors) {
            addressExpress(this.order.business_order_id, values).then(() => {
              this.$notification.success({
                message: '成功',
                description: '指派成功'
              })
              this.eventBus.$emit('updateOrderInfo', { data: true })
              resolve(true)
            }).catch((err) => {
              this.$notification.error({
                message: '失败',
                description: err.message
              })
            })
          }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.overflow2{
  white-space:pre-line !important;
  margin-top: 10px;
  line-height: 1.6 ;
  color: grey;
  font-size: 94%;
}
</style>
