<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="[
            'staff_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="材料类型">
      <div style="display:flex;">
        <a-select
          mode="multiple"
          style="width: 100%"
          v-decorator="[
            'type',
            {
              rules: [
                { required: true, message: '请选择材料邮寄类型!'}
              ]
            }
          ]"
          placeholder="请选择材料邮寄类型"
          @change="handleChange">
          <a-select-option v-for="item in types" :key="item.key">{{ item.value }}</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 {
  getExpressDrow, signInDrow
} from '@/api/express'
export default {
  name: 'SelectAddrDrow',
  props: {
    order: {
      type: Object,
      default: null
    }
  },
  data: () => ({
    formItemLayout: {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 }
    },
    btnLabelCol: {
      offset: 6,
      span: 16
    },
    loading: false,
    lists: [],
    types: []
  }),
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created () {
    this.loading = true
    getExpressDrow().then(res => {
      this.lists = res.address
      this.types = res.type
      this.loading = false
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    handleChange (value) {
    },
    onOk () {
      return new Promise(resolve => {
        this.form.validateFields((errors, values) => {
          if (!errors) {
            signInDrow(this.order.business_order_id, values).then(() => {
              this.$notification.success({
                message: '成功',
                description: '线下签收成功'
              })
              this.eventBus.$emit('updateExpress', { 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>
