
<style scoped>
.comp-address {
  background: #f4f4f6;
}
.addressUpdate {
  background: #fff;
  margin-bottom: 1.5rem;
}
.addressUpdate ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
.addressUpdate ul li {
  line-height: 3rem;
  clear: both;
  height: 3rem;
  padding-left: 0rem;
  border-bottom: 0.1rem solid #f4f4f6;
  margin: 0 1rem;
}
.addressUpdate ul li .itemtitle {
  width: 4.375rem;
  float: left;
}
.addressUpdate ul li .itemvalue input {
  border: none;
}
.item-btn {
  display: inline-block;
  width: 94%;
  line-height: 2rem;
  padding: 0;
  padding: 0.5rem;
  margin: 0 3%;
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 1rem;
  text-align: center;
  color: #fff;
  background: #c03546;
  border: none;
  border-radius: 0.2rem;
  margin-top: 1rem;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.linkage {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: white;
  left: 0;
  overflow: hidden;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.pickerWrapper {
  width: 33.3%;
  float: left;
}
.myAddress {
  width: 100%;
  background-color: white;
  border-top: 4px solid rgba(245, 245, 245, 1);
  color: #333;
  height: 100%;
}
.myAddress .cont {
  border-bottom: 1px solid rgba(245, 245, 245, 0.8);
}
.myAddress .cont span {
  display: inline-block;
  font-size: 0.8rem;
  color: #333;
  line-height: 0.88rem;
  margin-left: 0.32rem;
}
.myAddress .cont section {
  float: left;
}
.myAddress .cont p {
  display: inline-block;
  font-size: 0.8rem;
  color: #333333;
  line-height: 0.88rem;
  margin-left: 1rem;
}
.myAddress .cont .pic2 {
  float: right;
  width: 0.14rem;
  height: 0.24rem;
  margin: 0.32rem 0.32rem 0.32rem 0;
}
.myAddress .cont p.text {
  margin-left: 0.72rem;
}
.showChose {
  width: 100%;
  height: 100%;
  position: inherit;
  top: 0;
  left: 0;
  z-index: 120;
  background: rgba(77, 82, 113, 0.8);
}
.address {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 121;
  background: #fff;
  width: 100%;
  height: 50%;
}
.title h4 {
  display: inline-block;
  margin-left: 3.2rem;
  line-height: 0.88rem;
  font-weight: normal;
  color: #999;
}
.title span {
  margin: 0.42rem 0.3rem 2.2rem;
  color: #d8d8d8;
  background: #000;
  border-radius: 100%;
  float: right;
  height: 1.3rem;
  width: 1rem;
  text-align: center;
}
.titleselect {
  line-height: 1.5rem;
  border-bottom: 0.1rem solid #bcbc;
}
.address .titleselect .active {
  color: #c03546;
  border-bottom: 0.02rem solid #c03546;
  padding-bottom: 0.5rem;
}
.area {
  display: inline-block;
  line-height: 0.88rem;
  margin-left: 0.42rem;
  color: #333;
  padding-bottom: 0.5rem;
}
.addList {
  width: 100%;
  line-height: 2rem;
  color: #333;
}
/* 修改的格式 */
.address ul {
  overflow: auto;
  list-style-type: none;
  height: 60%;
  margin: 0;
  padding: 0;
  padding-left: 0px;
  padding-left: 2%;
  padding-top: 1%;
}
.address ul li.active {
  color: #c03546;
}
.itemvalue .switch {
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 1.5rem;
  margin-top: 0.8rem;
  float: right;
  margin-right: 1rem;
}
.itemvalue .switch input {
  display: none;
}
.itemvalue .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0s;
  transition: 0s;
}
.itemvalue .slider:before {
  position: absolute;
  content: "";
  height: 1.5rem;
  width: 1.5rem;
  left: -0.1rem;
  bottom: 0rem;
  background-color: white;
  -webkit-transition: 0s;
  transition: 0s;
}
.itemvalue input:checked + .slider {
  background-color: #eb7841;
}
.itemvalue input:focus + .slider {
  box-shadow: 0 0 1px #eb7841;
}
.itemvalue input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
/* Rounded sliders */
.itemvalue .slider.round {
  border-radius: 1rem;
}
.itemvalue .slider.round:before {
  border-radius: 50%;
}
</style>
<template>
  <div class="container comp-address jfBaseSize" v-bind:style="vh?'height:100vh':'height: 100%;'">
    <div class="addressUpdate">
      <ul>
        <li>
          <div class="itemtitle">收货人</div>
          <span class="itemvalue">
            <input type="text" placeholder="收货人姓名" v-model="ConsigneeName" />
          </span>
        </li>
        <li>
          <div class="itemtitle">手机号码</div>
          <span class="itemvalue">
            <input type="text" placeholder="收货人电话" v-model="ConsigneeMobile" />
          </span>
        </li>

        <li>
          <div class="itemtitle">选择地区</div>
          <span class="itemvalue">
            <input type="text" placeholder="请选择" @click="ShowAreaSelect()" v-model="AreaData" />
          </span>
        </li>
        <li>
          <div class="itemtitle">具体地址</div>
          <span class="itemvalue">
            <input type="text" placeholder="详细街道地址" v-model="ConsigneeAddress" />
          </span>
        </li>

        <li>
          <div class="itemtitle">设置默认</div>
          <span class="itemvalue">
            <label class="switch">
              <input type="checkbox" @click="switchTab($event)" :checked="IsDefault==1" />
              <div class="slider round"></div>
            </label>
          </span>
        </li>
      </ul>
    </div>

    <button class="item-btn" @click="SaveAddress($event)">保存</button>

    <div class="mask" v-show="IsshowArea"></div>
    <section class="myAddress" v-show="IsshowArea">
      <section class="address">
        <section class="title">
          <h4>请选择省市区</h4>
          <span @click="closeAdd()">×</span>
        </section>
        <section class="titleselect">
          <div
            class="area"
            @click="provinceSelected()"
            :class="ProvinceValue==''?'active':''"
          >{{ProvinceValue?ProvinceValue:'请选择'}}</div>
          <div
            class="area"
            @click="citySelected()"
            :class="CityValue==''?'active':''"
            v-show="ProvinceValue!=''"
          >{{CityValue?CityValue:'请选择'}}</div>
          <div
            class="area"
            @click="districtSelected()"
            :class="CityValue!=''?'active':''"
            v-show="CityValue!=''"
          >请选择</div>
        </section>
        <ul>
          <li
            class="addList"
            v-for="(v,k) in provinceList"
            @click="getProvinceId(v.id, v.name, k)"
            v-show="IsShowProvince"
            :class="v.id==ProvinceCode? 'active' : ''"
          >{{v.name}}</li>
          <li
            class="addList"
            v-for="(v,k) in cityList"
            @click="getCityId(v.id, v.name, k)"
            v-show="IsShowCity"
            :class="v.id==CityCode? 'active' : ''"
          >{{v.name}}</li>
          <li
            class="addList"
            v-for="(v,k) in districtList"
            @click="getDistrictId(v.id, v.name, k)"
            v-show="IsShowDistrict"
            :class="v.id==DistrictCode? 'active' : ''"
          >{{v.name}}</li>
        </ul>
      </section>
    </section>
  </div>
</template>

<script>
import { Picker } from "mint-ui";
import { Toast } from "mint-ui";
import JfapiHelper from "../assets/js/JfapiHelper.js";
import { base64 } from "../assets/js/cryptoHelper";
import { debug } from "util";
import "../assets/js/libs/js.cookie";
import { Indicator } from "mint-ui";
export default {
  name: "JfCompReg",
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      IsshowArea: false, //这里代表是否展示
      provinceList: [],
      cityList: [],
      districtList: [],
      AreaInfo: [],
      ProvinceCode: "",
      CityCode: "",
      DistrictCode: "",
      ProvinceValue: "",
      CityValue: "",
      DistrictValue: "",
      AreaData: "",
      ConsigneeName: "",
      ConsigneeMobile: "",
      ConsigneeAddress: "",
      IsDefault: 0,
      IsShowProvince: true,
      IsShowCity: false,
      IsShowDistrict: false, // v-for循环判断是否为当前
      selected: false,
      vh: false
    };
  },
  methods: {
    switchTab: function(e) {
      this.IsDefault = $(e.target).is(":checked") ? "1" : "0";
    },
    AreaDataFun: function() {
      var that = this;
      that.AreaData = that.ProvinceValue + that.CityValue + that.DistrictValue;
    },
    closeAdd: function() {
      this.IsshowArea = false;
    },
    ShowAreaSelect() {
      this.IsshowArea = true;
    },
    GetAddressById(ID) {
      var that = this;
      var locationto = this.$parent;
      var url = "/integral/CompGetConsigneeAddressById";
      var dataParams = {
        EnterpriseNo: that.sup8.context.enterpriseno,
        MemberID: "1",
        ID: ID,
        LanguageType: JfapiHelper.GetLanguageType(),
        UserToken: JfapiHelper.GetUserToken()
      };
      var cbSuccess = function(res) {
        if (res.flag) {
          that.ConsigneeName = res.data.ConsigneeName;
          that.ConsigneeMobile = res.data.ConsigneeMobile;
          that.ConsigneeAddress = res.data.ConsigneeAddress;
          that.IsDefault = res.data.IsDefault;
          that.ConsigneeAreaId = res.data.ConsigneeProvince;
          that.ProvinceValue = res.data.ConsigneeProvince;
          that.CityValue = res.data.ConsigneeCity;
          that.DistrictValue = res.data.ConsigneeArea;
          var AreaId = res.data.ConsigneeAreaId;
          if (AreaId.length == 6) {
            that.districtList = [];
            that.cityList = [];
            that.DistrictCode = AreaId;
            that.CityCode = AreaId.substring(0, 4) + "00";
            that.ProvinceCode = AreaId.substring(0, 2) + "0000";
            that.IsShowDistrict = true;
            that.IsShowCity = false;
            that.IsShowProvince = false;
            that._getArea(that.CityCode);
            that._getCity(that.ProvinceCode);
          }
          that.AreaDataFun();
        }
      };
      var cbError = function(jqXHR, textStatus, errorThrown) {
        MintUI.Toast(jqXHR.responseText);
      };
      //请求后端
      JfapiHelper.CommonCallService(
        url,
        dataParams,
        cbSuccess,
        cbError,
        null,
        null
      );
    },
    SaveAddress(e) {
      var that = this;
      var locationto = this.$parent;
      if (that.ConsigneeName == "") {
        Toast("请填写收货人姓名!");
        return false;
      }
      if (that.ConsigneeName.length < 2 || that.ConsigneeName.length > 10) {
        Toast("收货人必须2-10个字符!");
        return false;
      }
      if (that.ConsigneeMobile == "") {
        Toast("请填写手机号码!");
        return false;
      }
      if (that.ConsigneeAddress == "") {
        Toast("详细地址不能为空!");
        return false;
      }
      if (
        that.ConsigneeAddress.length < 2 ||
        that.ConsigneeAddress.length > 50
      ) {
        Toast("详细地址必须2-50个字符!");
        return false;
      }
      var mobileReg = /^(((134|135|136|137|138|139|150|151|152|154|157|158|159|182|183|184|187|188|147|178|179|198)[0-9]{8})|((1703)[0-9]{7})|((1705)[0-9]{7})|((1706)[0-9]{7})|((130|131|132|145|155|156|166|175|176|185|186)[0-9]{8})|((1704)[0-9]{7})|((1707)[0-9]{7})|((1708)[0-9]{7})|((1709)[0-9]{7})|((171[0-9])[0-9]{7})|((133|149|153|173|177|180|181|189|199|191)[0-9]{8})|((1700)[0-9]{7})|((1701)[0-9]{7})|((1702)[0-9]{7}))$/;
      if (!mobileReg.test(that.ConsigneeMobile)) {
        Toast("手机号码格式不正确!");
        return false;
      }
      if (that.DistrictCode == "") {
        Toast("请选择区域!");
        return false;
      }
      $(e.target).val("提交中...");
      $(e.target).attr("disabled", true);
      var UserInfo = JfapiHelper.GetUserLoginInfo();
      var url = "/integral/CompSaveConsigneeAddress";
      var AddressID = sessionStorage.getItem("JfCompAddressEditID");
      var dataParams = {
        ID: AddressID,
        MemberID: UserInfo.UserId,
        ROW_CREATE_USER: UserInfo.UserName,
        EnterpriseNo: that.sup8.context.enterpriseno,
        ConsigneeName: that.ConsigneeName,
        ConsigneeMobile: that.ConsigneeMobile,
        ConsigneeProvince: that.ProvinceValue,
        ConsigneeCity: that.CityValue,
        ConsigneeArea: that.DistrictValue,
        ConsigneeAddress: that.ConsigneeAddress,
        IsDefault: that.IsDefault,
        LanguageType: JfapiHelper.GetLanguageType(),
        ConsigneeAreaId: that.DistrictCode,
        UserToken: JfapiHelper.GetUserToken()
      };
      var cbSuccess = function(res) {
        if (res.flag) {
          //locationto.changeSelectedPage("24");
          window.history.go(-1);
        } else {
          $(e.target).attr("disabled", false);
          $(e.target).val("保存");
          Toast(res.msg);
        }
      };
      var cbError = function(jqXHR, textStatus, errorThrown) {
        MintUI.Toast(jqXHR.responseText);
        $(e.target).attr("disabled", false);
        $(e.target).val("保存");
      };
      //请求后端
      JfapiHelper.CommonCallService(
        url,
        dataParams,
        cbSuccess,
        cbError,
        null,
        null
      );
    },
    getProvinceId: function(code, input, index) {
      this.ProvinceCode = code;
      this.ProvinceValue = input;
      this.IsShowProvince = false;
      this.IsShowCity = true;
      this.IsShowDistrict = false;
      this._getCity(code, index);
      this.AreaDataFun();
    },
    provinceSelected: function() {
      // 清除市级和区级列表
      this.cityList = [];
      this.districtList = [];
      // 清除市级和区级选项
      this.CityValue = false;
      this.DistrictValue = false;
      this.DistrictCode = "";
      // 选项页面的切换
      this.IsShowProvince = true;
      this.IsShowCity = false;
      this.IsShowDistrict = false;
    },
    getCityId: function(code, input, index) {
      this.districtList = [];
      this.CityCode = code;
      this.CityValue = input;
      this.IsShowProvince = false;
      this.IsShowCity = false;
      this.IsShowDistrict = true;
      this.DistrictCode = "";
      this._getArea(code, index);
      this.AreaDataFun();
      // 选择当前添加active
      // this.showCityList.map( a => a.selected = false );
      // this.showCityList[index].selected = true;
    },
    citySelected: function() {
      this.IsShowProvince = false;
      this.IsShowCity = true;
      this.IsShowDistrict = false;
    },
    getDistrictId: function(code, input, index) {
      this.DistrictCode = code;
      this.DistrictValue = input;
      // 选择当前添加active
      // this.showDistrictList.map( a => a.selected = false );
      // this.showDistrictList[index].selected = true;
      // 选取市区选项之后关闭弹层
      this.IsshowArea = false;
      this.AreaDataFun();
    },
    districtSelected: function() {
      this.IsShowProvince = false;
      this.IsShowCity = false;
      this.IsShowDistrict = true;
    },
    //得到省份数据
    _getProvince() {
      var that = this;
      var url = "/integral/GetAllProvinces";
      var dataParams = {};
      var cbSuccess = function(res) {
        if (res.flag) {
          res.data.forEach(function(item, index) {
            let obj = {};
            obj.id = item.AreaId;
            obj.name = item.AreaInfo;
            if (obj.id == that.ProvinceCode) {
              obj.selected = true;
            }
            that.provinceList.push(obj);
          });
        }
      };
      var cbError = function(jqXHR, textStatus, errorThrown) {
        MintUI.Toast(jqXHR.responseText);
      };
      //请求后端
      JfapiHelper.CommonCallService(
        url,
        dataParams,
        cbSuccess,
        cbError,
        null,
        null
      );
    },
    //根据省份得到城市数据
    _getCity(province, index) {
      var that = this;
      var url = "/integral/GetCityByProvince";
      var dataParams = { provinceId: province };
      var cbSuccess = function(res) {
        if (res.flag) {
          res.data.forEach(function(item, index) {
            let obj = {};
            obj.id = item.AreaId;
            obj.name = item.AreaInfo;
            if (obj.id == that.CityCode) {
              obj.selected = true;
            }
            that.cityList.push(obj);
          });
        }
      };
      var cbError = function(jqXHR, textStatus, errorThrown) {
        MintUI.Toast(jqXHR.responseText);
      };
      //请求后端
      JfapiHelper.CommonCallService(
        url,
        dataParams,
        cbSuccess,
        cbError,
        null,
        null
      );
    },
    //根据城市和省份得到区域数据
    _getArea(cityId, index) {
      var that = this;
      var url = "/integral/GetMunicipiosByCityId";
      var dataParams = { cityId: cityId };
      var cbSuccess = function(res) {
        if (res.flag) {
          res.data.forEach(function(item, index) {
            let obj = {};
            obj.id = item.AreaId;
            if (obj.id == that.DistrictCode) {
              obj.selected = true;
            }
            obj.name = item.AreaInfo;
            that.districtList.push(obj);
          });
        }
      };
      var cbError = function(jqXHR, textStatus, errorThrown) {
        MintUI.Toast(jqXHR.responseText);
      };
      //请求后端
      JfapiHelper.CommonCallService(
        url,
        dataParams,
        cbSuccess,
        cbError,
        null,
        null
      );
    }
  },
  watch: {},
  created: function() {
    var that = this;
    that._getProvince();
    var AddressID = sessionStorage.getItem("JfCompAddressEditID");
    if (AddressID != null) {
      that.GetAddressById(AddressID);
    }
  },
  mounted: function() {
    var that = this;
    var isDesign = location.pathname.indexOf("design");
    if (!(isDesign > -1)) {
      that.$set(that, "vh", true);
    } else {
      that.$set(that, "vh", false);
    }
  }
};
</script>

