<template>
  <div class="content">
    <div class="form">
      <van-form @submit="onSubmit">
        <van-field
          oninput="value=value.replace(/[^\w\.\s/]/ig,'')"
          v-model="personName"
          name="姓名"
          label="姓名"
          placeholder="请用英文输入姓名"
        />
        <van-field
          v-model="emailAddress"
          name="邮箱"
          label="邮箱"
          placeholder="请用英文输入邮箱"
        />
        <van-field
          oninput="value=value.replace(/[^\w\.\s/]/ig,'')"
          v-model="countryCode"
          name="国家编码"
          label="国家编码"
          placeholder="请用英文输入国家编码"
        />
        <van-field
          oninput="value=value.replace(/[^\w\.\s/]/ig,'')"
          v-model="city"
          name="州/城市"
          label="州/城市"
          placeholder="请用英文输入州/城市"
        />
        <van-field
          oninput="value=value.replace(/[^\w\.\s/]/ig,'')"
          v-model="phone"
          type="number"
          name="电话"
          label="电话"
          placeholder="请输入电话"
        />
        <!-- <van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区" @click="areashow = true" /> -->
        <van-field
          oninput="value=value.replace(/[^\w\.\s/]/ig,'')"
          v-model="postalCode"
          name="邮编"
          label="邮编"
          placeholder="请用输入邮编"
        />
        <van-field
          oninput="value=value.replace(/[^\w\.\s/]/ig,'')"
          v-model="address"
          name="详细地址"
          label="详细地址"
          placeholder="请用英文输入详细地址"
        />
        <van-field
          oninput="value=value.replace(/[^\w\.\s/]/ig,'')"
          v-model="companyName"
          name="公司名称"
          label="公司名称"
          placeholder="请用英文输入公司名称 如SF EXPRESS CO,LTD"
        />
        <div style="margin-top: 16px;">
          <van-button color="#0c2469" block type="info" native-type="submit"
            >确定</van-button
          >
        </div>
      </van-form>
      <!-- 城市选择 -->
      <van-popup v-model="areashow" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onConfirm3"
          @cancel="areashow = false"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
import areaList from "@/script/areas.js";
export default {
  data() {
    return {
      titlename: "寄件人",
      personName: "",
      countryCode: "",
      emailAddress: "",
      postalCode: "",
      companyName: "",
      phone: "",
      city: "",
      address: "",
      areashow: false
    };
  },
  created: function() {
    this.isLogin();
    this.titlename = this.$route.query.active;
    if (this.titlename == 1) {
      this.titlename = "寄件人地址";
      if (JSON.stringify(this.$store.state.foreignJjInfo) != "{}") {
        this.personName = this.$store.state.foreignJjInfo.personName;
        this.countryCode = this.$store.state.foreignJjInfo.countryCode;
        this.emailAddress = this.$store.state.foreignJjInfo.emailAddress;
        this.postalCode = this.$store.state.foreignJjInfo.postalCode;
        this.companyName = this.$store.state.foreignJjInfo.companyName;
        this.phone = this.$store.state.foreignJjInfo.phone;
        this.address = this.$store.state.foreignJjInfo.address;
        this.city = this.$store.state.foreignJjInfo.city;
      }
    }
    if (this.titlename == 2) {
      this.titlename = "收件人地址";
      console.log(this.$store.state.foreignSjInfo);
      if (JSON.stringify(this.$store.state.foreignSjInfo) != "{}") {
        this.personName = this.$store.state.foreignSjInfo.personName;
        this.countryCode = this.$store.state.foreignSjInfo.countryCode;
        this.emailAddress = this.$store.state.foreignSjInfo.emailAddress;
        this.postalCode = this.$store.state.foreignSjInfo.postalCode;
        this.companyName = this.$store.state.foreignSjInfo.companyName;
        this.phone = this.$store.state.foreignSjInfo.phone;
        this.address = this.$store.state.foreignSjInfo.address;
        this.city = this.$store.state.foreignSjInfo.city;
      }
    }
  },
  methods: {
    //确定
    onSubmit() {
      if (this.personName == "" || this.personName == undefined) {
        Toast("请用英文输入姓名");
        return;
      }

      if (this.emailAddress == "" || this.emailAddress == undefined) {
        Toast("请用英文输入邮箱");
        return;
      }

      if (this.countryCode == "" || this.countryCode == undefined) {
        Toast("请用英文输入国家编号");
        return;
      }

      if (this.city == "" || this.city == undefined) {
        Toast("请用英文输入州/城市");
        return;
      }

      if (this.phone == "" || this.phone == undefined) {
        Toast("请输入电话");
        return;
      }

      if (this.postalCode == "" || this.postalCode == undefined) {
        Toast("请输入邮编");
        return;
      }

      if (this.address == "" || this.address == undefined) {
        Toast("请用英文输入详细地址");
        return;
      }

      if (this.companyName == "" || this.companyName == undefined) {
        Toast("请用英文输入公司名称");
        return;
      }

      if (this.$route.query.active == 1) {
        let foreignJjInfo = {};
        foreignJjInfo.jjname = this.personName + " " + this.phone;
        foreignJjInfo.jjadd = this.countryCode + " " + this.address;
        foreignJjInfo.personName = this.personName;
        foreignJjInfo.emailAddress = this.emailAddress;
        foreignJjInfo.countryCode = this.countryCode;
        foreignJjInfo.city = this.city;
        foreignJjInfo.phone = this.phone;
        foreignJjInfo.postalCode = this.postalCode;
        foreignJjInfo.address = this.address;
        foreignJjInfo.companyName = this.companyName;
        this.$store.commit("getForeignJjInfo", foreignJjInfo);
      } else if (this.$route.query.active == 2) {
        let foreignSjInfo = {};
        foreignSjInfo.sjname = this.personName + " " + this.phone;
        foreignSjInfo.sjadd = this.countryCode + " " + this.address;
        foreignSjInfo.personName = this.personName;
        foreignSjInfo.emailAddress = this.emailAddress;
        foreignSjInfo.countryCode = this.countryCode;
        foreignSjInfo.city = this.city;
        foreignSjInfo.phone = this.phone;
        foreignSjInfo.postalCode = this.postalCode;
        foreignSjInfo.address = this.address;
        foreignSjInfo.companyName = this.companyName;
        this.$store.commit("getForeignSjInfo", foreignSjInfo);
      }

      this.$router.push({ path: "/Foreignexpress" });
    },
    onConfirm3(e) {
      //确定
      this.city = e[0].name + " " + e[1].name + " " + e[2].name;
      this.areashow = false;
      console.log(e);
    }
  },
  computed: {
    areaList() {
      return areaList;
    }
  }
};
</script>

<style scoped lang="less">
.content {
  .form {
    padding: 0.3rem;

    /deep/.van-field__value {
      input {
        text-align: right;
      }
    }
  }
}
</style>
