<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-form ref="form" :model="form" label-width="180px" style="width: 500px;">
        <el-form-item>
          <template slot="label">
            <span class="text-danger">*</span>
            Consignee<!-- 收货人 -->
          </template>
          <el-input v-model="form.consignee"></el-input>
        </el-form-item>
        <el-form-item>
          <template slot="label">
            <span class="text-danger">*</span>
            Phone Number<!-- 手机号 -->
          </template>
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item>
          <template slot="label">
            <span class="text-danger">*</span>
            City
          </template>
          <el-input v-model="form.cityName"></el-input>
        </el-form-item>
        <el-form-item>
          <template slot="label">
            <span class="text-danger">*</span>
            Local Government Area
          </template>
          <el-input v-model="form.lgaName"></el-input>
        </el-form-item>
        <el-form-item>
          <template slot="label">
            <span class="text-danger">*</span>
            State<!-- 地区 -->
          </template>
          <el-select v-model="form.areaSelected">
            <el-option v-for="(item,index) in regionData" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <template slot="label">
            <span class="text-danger">*</span>
            Detailed Address<!-- 详细地址 -->
          </template>
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item>
          <template slot="label">
            Default<!-- 是否默认 -->
          </template>
          <el-switch v-model="form.isDefault" ></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="submitButtonStat">Confirm<!-- 确认 --></el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

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

export default {
  name: 'ba-receive-address-edit',
  mounted () {
    if (this.$route.name === 'ba-receive-address-add') {
      this.loading = false
    } else {
      this.getData()
    }
  },
  data () {
    return {
      regionData: store.state.regionInfo.regionData,
      form: {
        consignee: '',
        mobile: '',
        areaSelected: '',
        lgaName: '',
        cityName: '',
        address: '',
        isDefault: false,
      },
      loading: true,
      submitButtonStat: false,
    }
  },
  methods: {
    onSubmit () {
      this.submitButtonStat = true
      let path = 'config/ba-receive-address-add'
      let postData = {
        consignee: this.form.consignee,
        mobile: this.form.mobile,
        province: this.form.areaSelected ? this.form.areaSelected : '',
        lgaName: this.form.lgaName,
        cityName: this.form.cityName,
        address: this.form.address,
        isDefault: this.form.isDefault,
      }
      if (this.$route.name === 'ba-receive-address-edit'){
        path = 'config/ba-receive-address-edit'
        postData = {
          id: this.$route.params.id,
          consignee: this.form.consignee,
          mobile: this.form.mobile,
          province: this.form.areaSelected ? this.form.areaSelected : '',
          lgaName: this.form.lgaName,
          cityName: this.form.cityName,
          address: this.form.address,
          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
      })
    },
    getData () {
      network.getData(`config/ba-receive-address-one/${this.$route.params.id}`).then(response => {
        this.form.consignee = response.CONSIGNEE
        this.form.mobile = response.MOBILE
        this.form.areaSelected = response.PROVINCE
        this.form.lgaName = response.LGA_NAME
        this.form.cityName = response.CITY_NAME
        this.form.address = response.ADDRESS
        this.form.isDefault = response.IS_DEFAULT === '1'
        this.loading = false
      })
    },
  }
}
</script>

<style scoped>

</style>
