<template>
  <div class="addressEdit">
    <div >
      <!-- <van-cell title="单元格" value="内容" /> -->
      <mt-field label="收货人" v-model="receiveName" placeholder="请填写收货人" ></mt-field>
      <mt-field label="手机号" v-model="receiveMobile" placeholder="请填写手机号"></mt-field>
      <!-- <mt-field label="所在地区" id="mtcell" placeholder="请选择地区" :value="addressArea" @click.native="showPicker" is-link>
        <i class="iconfont icon-youjiantou"></i>
      </mt-field> -->
      <mt-cell title="所在地区"  id="mtcell" :value="addressArea" @click.native="showPicker" is-link></mt-cell>
      <div v-if="!addressArea" class="holder">请填写所在地区</div>
      <mt-field label="详细地址" placeholder="请填写详细地址" v-model="address"></mt-field>
      <div @click="onSave();buttonClick('保存地址')"  class="btn"><van-button round size="large" type="info">保存</van-button></div>
    </div>
    <my-address :showAddressPicker="showAddressPicker" @save-address="saveAddress" @hide-picker="hidePicker" :init="addressArea">
    </my-address>
  </div>
</template>

<script>
import MyAddress from '@/components/address-picker/Address.vue'
import {saveActivityAddressApi,getActivityAddressApi} from "../../service/api";
import { Cell, Toast } from 'vant';
export default {
  name: "addressEdit",
  components: {
    MyAddress,
    [Cell.name]:Cell
  },
  data() {
    return {
      receiveName: '',
      receiveMobile:'',
      addressDetail: '',
      showAddressPicker: false,
      addressArea: '',
      addressAreaCode: '6-77-705',
      address: ''
    };
  },
  mounted() {
    this.getUserAddress();
  },
  methods: {
    closeAdd(){
          this.$emit('closeAdd', false)
      },
    buttonClick(buttonName){
      this.$sa.track('buttonClick',{
        tabTitle:'商品',
        moduleTitle:'地址填写',
        buttonType:'功能',
        buttonName:buttonName
      });
    },
    onSave: function () {
      let values = this.addressAreaCode.split('-')
      let labels = this.addressArea.split('-')
      if (!this.receiveName) {
        Toast('收货人不能为空');
          return false
      } else if (!this.receiveMobile) {
        Toast('手机号不能为空');
          return false
      } else if (!(/^1\d{10}$/.test(this.receiveMobile))) {
        Toast('手机号格式不正确');
          return false
      } else if (!this.address) {
        Toast('详细地址不能为空');
          return false
      }
      let param = {};
      param.receive_name = this.receiveName;
      param.receive_mobile = this.receiveMobile;
      param.address = this.address;
      param.province_id = values[0];
      param.province_name = labels[0];
      param.city_id = values[1];
      param.city = labels[1];
      param.area_id = values[2];
      param.area = labels[2];
      saveActivityAddressApi(param).then((res) => {
          this.closeAdd()
          Toast('更新成功')
          this.$router.replace({
            name:'starRank',
          })
      })
    },
    onValuesChange: function (picker, values) {
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0])
      }
    },
    hidePicker () {
      // 接受子组件关闭popup事件
      this.showAddressPicker = false
    },
    showPicker () {
      this.showAddressPicker = !this.showAddressPicker
    },
    saveAddress (labels, values) {
      // 从子组件接受返回所选值 val
      this.addressArea = labels
      this.addressAreaCode = values
      this.showAddressPicker = !this.showAddressPicker
    },
    getUserAddress: function () {
      getActivityAddressApi().then((res) => {
        if(res.receive_name){
          let addressInfo = res;
          this.receiveName = addressInfo.receive_name ? addressInfo.receive_name : '';
          this.receiveMobile = addressInfo.receive_mobile;
          this.address = addressInfo.address;
          this.addressArea = `${addressInfo.province_name}-${addressInfo.city}-${addressInfo.area}`;
          this.addressAreaCode = `${addressInfo.province_id}-${addressInfo.city_id}-${addressInfo.area_id}`
        }
        
      })
    }
  }
}

</script>

<style  lang="less">
@import "../../util/public";

.addressEdit {
  background: #f5f5f9;
  // .mint-cell-wrapper{border-bottom: 1px solid #E2E2E2;width: 94%;}
  input::-webkit-input-placeholder{color:#CCCCCC;}
  .van-popup{background: white;}
  .gray{background: #CCCCCC;border: none;}
  .mint-cell{color: #333333;
   }
   .btn{
     margin-top: 50* @toVw;
     padding: 0 34* @toVw;
   }
   #mtcell{
    //  background: red;
     span{color: #333333;}
     .mint-cell-title{flex: 1;}
     .mint-cell-value{
       flex: 4;text-align: left;
       span{margin-left: 29 * @toVw;}
       }
   }
   .holder{
     color: rgb(219, 208, 204);
     position: absolute;
     top:98* @toVw;
     left: 103* @toVw;
    //  font-size: 
   }
  // .mint-cell-value{color: #333333;}
  .head{
    i{display: inline-block;border-radius: 50%; width: 11 * @toVw;height: 11 * @toVw; }
    padding: 13 * @toVw;
    background: white;
    border-bottom: 1px solid #E2E2E2;
    color: #666666;
    font-size: 14* @toVw;
  }
  .now{
    i{background: #60ADF0;}
  }
  .item{margin-top: 10px;}
  .next{
    i{background: #FFD454;}
  }
  .content {
    background: white;
    padding: 13 * @toVw 0 13 * @toVw 33 * @toVw;
    .top {
      line-height: 28 * @toVw;
      color: #333333;
      font-weight: bold;
      font-size: 17 * @toVw;
    }
    .bottom {
      color: #666666;
      font-size: 14 * @toVw;
      line-height: 20 * @toVw;
    }
    .timeInfo{
      display: flex;
      .text{
        color: #999999;
        font-size: 12 * @toVw;
        margin-left: 0;
        line-height: 26 * @toVw;
      }
      .right{
        margin-top: 43 * @toVw;
      }
      .van-button--info{
        background: white;
        width: 74* @toVw;
        color: #60ADF0;
        border-color: #60ADF0;
      }
    }
  }
  .linebox {
    background: white;
  }
  .line {
    width: 100%;
    display: block;
    border-bottom: 1px solid #E2E2E2;
    margin: 12* @toVw 0;
  }
  .tip {
    padding: 10 * @toVw 20 * @toVw;
    color: #999999;
    font-size: 12 * @toVw;
    line-height: 23 * @toVw;
  }
}
@media screen and (orientation: landscape) {
}
</style>
