<style scoped>
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{overflow:hidden;_zoom:1;}
.text-gray{color:#717171;}
.text-orange{color:#eb7741;}
.text-danger{color:#c03546;}
.dangerIntegral{color:#c03546;font-weight: 700;margin-right:0.2rem;}
hr{margin: 0;border:0;height:0.5rem;}
.OrderInfo{width: 100%;height: 100%;height:100vh;overflow: hidden;position: relative;background: #F3F6FF;}
.productInfo{padding: 0.8rem 3%;background-color: #fff;}
.productInfo .productList{display: flex;}
.productInfo .productImg{width:3.5rem;margin-right: 0.6rem;position:relative;}
.productInfo .productImg img{width:100%;height: 3.5rem;}
.productInfo .productContent{flex:1;}
.productInfo .productContent .productName{font-weight:600;min-height:2.1875rem;margin-top:0;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;display:-webkit-box;}
.productInfo .productContent .clearfix {color:#717171;vertical-align:bottom;height: 1.2rem;line-height: 1.2rem;margin:0;}
.productInfo .productContent .clearfix >span{float: right;}
.productInfo .productResult{margin-top: 0.8rem;margin-bottom: 0;}
.productInfo .productResult >span {float: right;}
.productPanel{background-color: #fff;padding: 0 3%;}
.productWay {padding: 1rem 0;border-bottom: 0.01rem solid #f5f5f5;display:flex;line-height: 1;}
.productWay .titleInfo{margin-right: 0.6rem}
.productWay .titleInfo span{width:3.75rem;display: inline-block;text-align:justify;text-justify:distribute-all-lines;/*ie6-8*/text-align-last:justify;/* ie9*/-moz-text-align-last:justify;/*ff*/-webkit-text-align-last:justify;/*chrome 20+*/}
.productWay .resultInfo{-webkit-box-flex: 1;flex: 1;}
.productWay .resultInfo input[type=text]{border:0;outline:none;width: 100%;height: 100%;padding: 0;}
.productWay .resultInfo textarea{border:0;outline:none;width: 100%;resize: none;font: 400 13.3333px Arial;}
.productWay span.resultInfo{margin-left: 0.6rem;}
.allWidth{padding:0.4rem 0;}
.allWidth >span{width: 100%;}
.mint-button{width:92%;margin:0 auto;margin-top:2rem;background-color:#3A8AFB;border-radius: 0.2rem;}
.mask {position: fixed;top: 0;left: 0;height: 100%;width: 100%;background: rgba(0, 0, 0, 0.5);}
.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;}
</style>
<template>
<div class="jfBaseSize OrderInfo" v-cloak v-bind:style="isShow.vh?'height:100vh':'height: 100%;'">
    <div class="productInfo">
        <div class="productList">
            <div class="productImg">
                <img v-bind:src="model.GiftImg"/>
            </div>
            <div class="productContent">
                <p class="productName" v-html="model.GiftName"></p>
                <p class="clearfix">
                    <span>数量：<span v-html="model.Amount"></span></span>
                </p>
            </div>
        </div>
    </div>
    <hr />
    <div class="productPanel">
      <div class="productWay">
          有效期
          <span class="resultInfo text-gray" style="text-align:right;" v-html="model.Gift_ExpriseStart+'-'+model.Gift_ExpriseEnd"></span>
      </div>
    </div>
    <hr />
    <div class="productPanel">
      <div class="productWay">
          <div class="titleInfo">
            <span>姓名</span><i class="text-danger">*</i>
          </div>
          <div class="resultInfo">
            <input class="text-gray" type="text" placeholder="请输入姓名" maxlength="11" v-model="userModel.ConsigneeName">
          </div>
      </div>
      <div class="productWay">
        <div class="titleInfo">
          <span>手机号</span><i class="text-danger">*</i>
        </div>
        <div class="resultInfo">
          <input class="text-gray" type="text" placeholder="请输入手机号" maxlength="11" v-model="userModel.ConsigneeMobile">
        </div>
      </div>
      <div class="productWay">
          <div class="titleInfo">
            <span>收货地址</span><i class="text-danger">*</i>
          </div>
          <div class="resultInfo">
            <input class="text-gray" type="text" placeholder="请选择省、市、区" maxlength="11" @click="ShowAreaSelect()" v-model="userModel.AreaData">
          </div>
      </div>
      <div class="productWay clearfix allWidth">
        <div class="resultInfo">
          <textarea class="text-gray" rows="3" placeholder="请输入详细地址" v-model="userModel.ConsigneeAddress"></textarea>
        </div>
      </div>
    </div>
    <mt-button class="btnSubmit" type="danger" size="large" v-on:click="setSave">确认领取</mt-button>
    <div class="mask" v-show="isShow.IsshowArea"></div>
    <section class="myAddress" v-show="isShow.IsshowArea">
      <section class="address">
        <section class="title">
          <h4>请选择省市区</h4>
          <span @click="closeAdd()">×</span>
        </section>
        <section class="titleselect">
          <div
            class="area"
            @click="provinceSelected()"
            :class="addressData.ProvinceValue==''?'active':''"
          >{{addressData.ProvinceValue?addressData.ProvinceValue:'请选择'}}</div>
          <div
            class="area"
            @click="citySelected()"
            :class="addressData.CityValue==''?'active':''"
            v-show="addressData.ProvinceValue!=''"
          >{{addressData.CityValue?addressData.CityValue:'请选择'}}</div>
          <div
            class="area"
            @click="districtSelected()"
            :class="addressData.CityValue!=''?'active':''"
            v-show="addressData.CityValue!=''"
          >请选择</div>
        </section>
        <ul>
          <li class="addList" v-for="(v,k) in addressData.provinceList" @click="getProvinceId(v.id, v.name, k)" v-show="isShow.IsShowProvince" :class="v.id==addressData.ProvinceCode? 'active' : ''" v-bind:key="v.id">{{v.name}}</li>
          <li class="addList" v-for="(v,k) in addressData.cityList" @click="getCityId(v.id, v.name, k)" v-show="isShow.IsShowCity" :class="v.id==addressData.CityCode? 'active' : ''" v-bind:key="v.id">{{v.name}}</li>
          <li class="addList" v-for="(v,k) in addressData.districtList" @click="getDistrictId(v.id, v.name, k)" v-show="isShow.IsShowDistrict" :class="v.id==addressData.DistrictCode? 'active' : ''" v-bind:key="v.id">{{v.name}}</li>
        </ul>
      </section>
    </section>
    <ReturnHome ref="returnhome"></ReturnHome>
</div>
</template>

<script>
import { Toast,InfiniteScroll,Indicator } from 'mint-ui';
import { base64 } from "@/assets/js/cryptoHelper";
import { debug } from 'util';
import '@/assets/js/libs/js.cookie';
import ReturnHome from "@/components/channel/temp001/ReturnHome";
import channelHelper from "@/assets/js/channelHelper.js";
export default {
  name: "JfCompLogin",
   components: {ReturnHome},
  provide(){       
     return{           
        goPage:this.goPage       
     }   
  },
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      vh:false,
      model:{
        Gift_ExpriseStart:'',
        Gift_ExpriseEnd:'',
      },
      userModel:{
        AreaData:'',
        ConsigneeName:'',
        ConsigneeMobile:'',
        ConsigneeAddress:'',
      },
      addressData:{
        ProvinceCode: "",
        CityCode: "",
        DistrictCode: "",
        ProvinceValue:'',
        CityValue:'',
        DistrictValue:'',
        provinceList:[],
        cityList:[],
        districtList:[],
      },
      baseData:{},
      isShow:{
        vh:false,
        popup:false,
        IsshowArea:false,
        IsShowProvince: true,
        IsShowCity: false,
        IsShowDistrict: false,
      }
    };
  },
  methods: {
    GetExchangeInfo(){
      var that = this;
      var url = "/channel/GetMyGiftInfo";
      var dataParams = that.baseData;
      var cbError=function(){Indicator.close();}
      var cbSuccess = function(res){
        Indicator.close();
        if (res.flag){
            that.model=res.data;
        }
      };
      //请求后端
      channelHelper.CommonCallServiceAuto(url,dataParams,cbSuccess,cbError,null,null);
    },
    setSave(){
      var that = this;
      if(!that.userModel.ConsigneeName)
      {
          Toast("姓名不能为空!");
          return false;
      }
      if(!that.userModel.ConsigneeMobile)
      {
          Toast("手机号不能为空!");
          return false;
      }else if (!/^1[3456789]\d{9}$/.test(that.userModel.ConsigneeMobile)) {
          Toast("请输入正确的手机号!");
          return false;
      }
      if(!that.userModel.ConsigneeAddress)
      {
          Toast("详细地址不能为空!");
          return false;
      }
      if(!that.userModel.AreaData)
      {
          Toast("请选择收货地址!");
          return false;
      }
      var location= this.$parent;
      var url = "/channel/GetMyGiftMO";
      var dataParams = {
          ID:localStorage.getItem("Ex_Id"),
          ConsigneeMobile:that.userModel.ConsigneeMobile,
          ConsigneeName:that.userModel.ConsigneeName,
          ConsigneeAddress:that.userModel.AreaData+that.userModel.ConsigneeAddress,
          RowVer:localStorage.getItem("Ex_ROW_VER"),
          ActivityNo:localStorage.getItem("Ex_ActivityNo"),
          UserToken:channelHelper.GetUserToken(),
          EnterpriseNo: that.sup8.context.enterpriseno,
          LanguageType:channelHelper.GetLanguageType()
      };
      var cbError=function(){Indicator.close();}
      var cbSuccess = function(res){
        Indicator.close();
          if (res.flag){
              Toast("领取成功!");
              location.changeSelectedPage("Key_MyGift");
          }else{
              Toast(res.msg);
          }
      };
      //请求后端
      channelHelper.CommonCallServiceAuto(url,dataParams,cbSuccess,cbError,null,null);
    },
    ShowAreaSelect() {//选择地址打开
      this.isShow.IsshowArea = true;
    },
    closeAdd: function() {//选择地址关闭
      this.isShow.IsshowArea = false;
    },
    AreaDataFun: function() {
      var that = this;
      that.$set(that.userModel,'AreaData',that.addressData.ProvinceValue + that.addressData.CityValue + that.addressData.DistrictValue);
    },
    getProvinceId: function(code, input, index) {
      this.addressData.ProvinceCode = code;
      this.addressData.ProvinceValue = input;
      this.isShow.IsShowProvince = false;
      this.isShow.IsShowCity = true;
      this.isShow.IsShowDistrict = false;
      this._getCity(code, index);
      this.AreaDataFun();
    },
    provinceSelected: function() {
      // 清除市级和区级列表
      this.cityList = [];
      this.districtList = [];
      // 清除市级和区级选项
      this.addressData.CityValue = false;
      this.addressData.DistrictValue = false;
      this.addressData.DistrictCode = "";
      // 选项页面的切换
      this.isShow.IsShowProvince = true;
      this.isShow.IsShowCity = false;
      this.isShow.IsShowDistrict = false;
    },
    getCityId: function(code, input, index) {
      this.addressData.districtList = [];
      this.addressData.CityCode = code;
      this.addressData.CityValue = input;
      this.isShow.IsShowProvince = false;
      this.isShow.IsShowCity = false;
      this.isShow.IsShowDistrict = true;
      this.addressData.DistrictCode = "";
      this._getArea(code, index);
      this.AreaDataFun();
      // 选择当前添加active
      // this.showCityList.map( a => a.selected = false );
      // this.showCityList[index].selected = true;
    },
    citySelected: function() {
      this.isShow.IsShowProvince = false;
      this.isShow.IsShowCity = true;
      this.isShow.IsShowDistrict = false;
    },
    getDistrictId: function(code, input, index) {
      this.addressData.DistrictCode = code;
      this.addressData.DistrictValue = input;
      // 选择当前添加active
      // this.showDistrictList.map( a => a.selected = false );
      // this.showDistrictList[index].selected = true;
      // 选取市区选项之后关闭弹层
      this.isShow.IsshowArea = false;
      this.AreaDataFun();
    },
    districtSelected: function() {
      this.isShow.IsShowProvince = false;
      this.isShow.IsShowCity = false;
      this.isShow.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.addressData.ProvinceCode) {
              obj.selected = true;
            }
            that.addressData.provinceList.push(obj);
          });
        }
      };
      var cbError = function(jqXHR, textStatus, errorThrown) {
        MintUI.Toast(jqXHR.responseText);
      };
      //请求后端
      channelHelper.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.addressData.CityCode) {
              obj.selected = true;
            }
            that.addressData.cityList.push(obj);
          });
        }
      };
      var cbError = function(jqXHR, textStatus, errorThrown) {
        MintUI.Toast(jqXHR.responseText);
      };
      //请求后端
      channelHelper.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.addressData.DistrictCode) {
              obj.selected = true;
            }
            obj.name = item.AreaInfo;
            that.addressData.districtList.push(obj);
          });
        }
      };
      var cbError = function(jqXHR, textStatus, errorThrown) {
        MintUI.Toast(jqXHR.responseText);
      };
      //请求后端
      channelHelper.CommonCallService(
        url,
        dataParams,
        cbSuccess,
        cbError,
        null,
        null
      );
    }
  },
  
  watch: {
    
  },
  created: function() {
    var that = this;
    var isDesign = location.pathname.indexOf('design');
    if(isDesign!=-1)
    {
        return;
    }
    var eno = that.sup8.context.enterpriseno;
    //判断是否登录
    if (!channelHelper.CheckLogin(this.$parent,eno,that.sup8.context.entranceid)) {
      this.$parent.changeSelectedPage('Key_Login')
      return false;
    }
    that._getProvince();
  },
  mounted: function() {
    var that =this;
    var isDesign = location.pathname.indexOf('design');
    if (!(isDesign>-1)) {
        that.$set(that.isShow,'vh',true);
    }else{
        that.$set(that.isShow,'vh',false);
    }
    that.$set(that,'baseData',{
      ID:localStorage.getItem("Ex_Id"),
      ActivityNo:localStorage.getItem("Ex_ActivityNo"),
      UserToken:channelHelper.GetUserToken(),
      EnterpriseNo:that.sup8.context.enterpriseno,
      LanguageType:channelHelper.GetLanguageType()
    });
    if (that.baseData.ID) {
      that.GetExchangeInfo();
    }
  }
};
</script>
