<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="addressRules" label-width="80px">
      <el-form-item label="收货人:" prop="username">
        <el-input v-model="form.username" placeholder="收货人" />
      </el-form-item>
      <el-form-item label="手机号:" prop="mobile">
        <el-input v-model="form.mobile" placeholder="手机号" minlength="11" maxlength="11" show-word-limit />
      </el-form-item>
      <el-form-item label="省市区：" prop="address">
        <VDistpicker :province="address.province" :city="address.city" :area="address.area" @province="province" @city="city" @area="area" />
      </el-form-item>
      <el-form-item label="地址:" prop="address">
        <el-input v-model="form.address" type="textarea" placeholder="地址" maxlength="50" show-word-limit />
      </el-form-item>
      <el-form-item>
        <el-button
          size="mini"
          @click="handleCancel"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          size="mini"
          @click="handleSubmit"
        >
          修改
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import VDistpicker from 'v-distpicker'
import { updateOrderAddress } from '@/api/order/common'

export default {
  components: { VDistpicker },
  props: {
    form: {
      type: Object,
      default: () => {
        return {
          id: '',
          username: '',
          mobile: '',
          address: ''
        }
      }
    }
  },
  data() {
    return {
      addressRules: {
        username: [
          { required: true, message: '请输入收货人姓名', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入收货人手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '手机号格式不正确', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入收货人地址', trigger: 'blur' },
          { max: 50, message: '地址长度超出', trigger: 'blur' }
        ]
      },
      address: {
        province: this.form.province,
        city: this.form.city,
        area: this.form.town
      }
    }
  },
  methods: {
    province({ value }) {
      this.address.province = value
    },
    city({ value }) {
      this.address.city = value
    },
    area({ value }) {
      this.address.area = value
    },
    // 取消
    handleCancel() {
      this.$refs.form.resetFields()
      this.$emit('update:cancel')
    },
    // 修改
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const { id, username, mobile, address } = this.form
          const { province, city, area } = this.address
          this.updateOrderAddress({
            address_id: id,
            province,
            city,
            town: area,
            username,
            mobile,
            address
          })
        } else {
          return false
        }
      })
    },
    // 修改api
    async updateOrderAddress(data) {
      const res = await updateOrderAddress(data)
      try {
        const { message, code } = res
        if (code === 200) {
          this.$message.success(message)
          this.$refs.form.resetFields()
          this.$emit('update:success')
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        let message = res.message ? res.message : e.message
        message = e.message ? e.message : '请求失败'
        this.$message.error(message)
      }
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
