<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-form ref="form" :model="form" label-width="100px" style="width:500px;">
        <el-form-item>
          <template slot="label">
            <span class="text-danger">*</span>
            收货人
          </template>
          <el-input v-model="form.consignee"></el-input>
        </el-form-item>
        <el-form-item>
          <template slot="label">
            <span class="text-danger">*</span>
            手机号
          </template>
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item prop="areaSelected">
          <template slot="label">
            <span class="text-danger">*</span>
            地区
          </template>
          <el-cascader
            size="large"
            :options="regionData"
            v-model="form.areaSelected">
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <template slot="label">
            <span class="text-danger">*</span>
            详细地址
          </template>
          <el-input v-model="form.address"></el-input>
        </el-form-item>
<!--        <el-form-item>-->
<!--          <template slot="label">-->
<!--            邮政编码-->
<!--          </template>-->
<!--          <el-input v-model="form.zipCode"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item>
          <template slot="label">
            是否默认
          </template>
          <el-switch v-model="form.isDefault" ></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="submitButtonStat">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import store from '@/utils/vuexStore'
  import network from '@/utils/network'
  import tool from '@/utils/tool'
  import userInfo from '@/utils/userInfo'

  export default {
    name: 'config_receive-address-edit',
    mounted() {
      if (this.$route.name === 'config_receive-address-add'){
        this.loading = false
        this.initArea()
      } else {
        this.getData()
      }
    },
    data() {
      return {
        regionData: [],
        form: {
          consignee: '',
          mobile: '',
          areaSelected: [],
          address: '',
          zipCode: '',
          isDefault: false,
        },
        loading: true,
        submitButtonStat: false,
      }
    },
    methods: {
      onSubmit() {
        this.submitButtonStat = true
        let path = 'config/receive-address-add'
        let postData = {
          consignee: this.form.consignee,
          mobile: this.form.mobile,
          province: this.form.areaSelected[0] ? this.form.areaSelected[0] : '',
          city: this.form.areaSelected[1] ? this.form.areaSelected[1] : '',
          county: this.form.areaSelected[2] ? this.form.areaSelected[2] : '',
          address: this.form.address,
          zipCode: this.form.zipCode,
          isDefault: this.form.isDefault,
        }
        if (this.$route.name === 'config_receive-address-edit'){
          path = 'config/receive-address-edit'
          postData = {
            id: this.$route.params.id,
            consignee: this.form.consignee,
            mobile: this.form.mobile,
            province: this.form.areaSelected[0] ? this.form.areaSelected[0] : '',
            city: this.form.areaSelected[1] ? this.form.areaSelected[1] : '',
            county: this.form.areaSelected[2] ? this.form.areaSelected[2] : '',
            address: this.form.address,
            zipCode: this.form.zipCode,
            isDefault: this.form.isDefault,
          }
        }
        return network.postData(path, postData).then(response => {
          this.$message({
            message: response,
            type: 'success'
          })
          this.submitButtonStat = false
          this.$router.go(-1)
        }).catch(() => {
          this.submitButtonStat = false
        })
      },
      initArea() {
        this.regionData = store.state.regionInfo.regionData
      },
       async getData() {
         await network.getData(`config/receive-address-one/${this.$route.params.id}`).then(response=>{
          this.regionData = store.state.regionInfo.regionData
          this.form.consignee = response.CONSIGNEE
          this.form.mobile = response.MOBILE
          this.form.areaSelected[0] = response.PROVINCE
          this.form.areaSelected[1] = response.CITY
          this.form.areaSelected[2] = response.COUNTY
          this.form.address = response.ADDRESS
          this.form.zipCode = response.ZIP_CODE
          this.form.isDefault = response.IS_DEFAULT === '1' ? true : false
          this.loading = false
        })
      },
    }
  }
</script>

<style scoped>

</style>
