<template>
  <div class="page-body">
    <div class="address-box">
      <div class="adress-content">
        <span class="content-title">收货人</span>
        <div class="content-input borbottom">
          <input
            type="text"
            placeholder="请填写收货人姓名"
            @input="bindKeyInput($event, 'userName')"
            :value="saveMsg.userName"
          />
        </div>
      </div>
      <div class="adress-content">
        <span class="content-title"></span>
        <radio-group
          :value="saveMsg.userSex"
          @change="changRadio"
          class="radio-box borbottom"
        >
          <view
            class="radio-list"
            v-for="(item, index) in sexList"
            :key="index"
          >
            <radio
              :value="item.value"
              color="#CAA97F"
              :checked="item.isChecked"
              @click="getSex(item)"
            />
            <text class="radio-unit">{{ item.name }}</text>
          </view>
        </radio-group>
      </div>
      <div class="adress-content borbottom">
        <span class="content-title">手机号</span>
        <div class="content-input">
          <input
            type="number"
            maxlength="11"
            placeholder="请填写收货人手机号"
            @input="bindKeyInput($event, 'mobilePhone')"
            :value="saveMsg.mobilePhone"
          />
        </div>
      </div>
      <view class="adress-content borbottom">
        <text class="content-title">收货地址</text>
        <view class="content-input address-content" @click="handleShowPopup">
          {{ saveMsg.address }}
          <image
            src="https://cdn-icons-png.flaticon.com/512/545/545682.png"
            style="width: 28rpx; height: 28rpx; margin-left: 12rpx"
          />
        </view>
      </view>

      <div class="textarea-content borbottom">
        <span class="content-title">详细地址</span>
        <div class="content-input">
          <textarea
            auto-height
            placeholder="例如：花园小区9号楼三单元202"
            @input="bindKeyInput($event, 'doorplate')"
            :value="saveMsg.doorplate"
          ></textarea>
        </div>
      </div>
      <div class="adress-content borbottom">
        <span class="content-title">标签</span>
        <div class="content-input tip-content">
          <span
            v-for="(u, i) in tipCodes"
            :key="i"
            class="tip-tag"
            :class="{ active: u.isChecked }"
            @click="tagClick(u)"
            >{{ u.name }}</span
          >
        </div>
      </div>
      <div class="moren-content">
        <div>
          <p>设为默认地址</p>
          <p class="moren-text">每次购物时会优先选定该地址，方便您轻松购物</p>
        </div>
        <switch
          :checked="saveMsg.isDefault"
          activeColor="#07c160"
          inactiveColor="#fff"
          :size="30"
          @change="onChange"
        />
        <!-- <van-switch
          :checked="saveMsg.isDefault"
          active-color="#07c160"
          inactive-color="#fff"
          size="40rpx"
          @change="onChange"
        /> -->
      </div>
    </div>
    <div class="save-btn" @click="checkFn">保存并使用</div>
    <div class="del-btn" @click="deleteFn" v-if="pageMsg.id">删除地址</div>
    <UniPopup
      :show="pageMsg.isSelect"
      position="bottom"
      overlay="false"
      @close="handleClosePopup"
      ref="popup"
      :safe-area="false"
      custom-style="height: 760rpx;"
    >
      <div class="addressSelecct">
        <div class="addressTitle">
          <span class="cancelText" @click="handleClosePopup">取消</span>
          <span class="confirmText" @click="getAddress">确认</span>
        </div>

        <picker-view
          :value="addressSelectIndex"
          @change="areaChange"
          class="picker-view"
        >
          <picker-view-column>
            <view class="item" v-for="(item, index) in areaData" :key="index">{{
              item.name
            }}</view>
          </picker-view-column>
          <picker-view-column>
            <view
              class="item"
              v-for="(item, index) in city_list"
              :key="index"
              >{{ item.name }}</view
            >
          </picker-view-column>
          <picker-view-column>
            <view
              class="item"
              v-for="(item, index) in county_list"
              :key="index"
              >{{ item.name }}</view
            >
          </picker-view-column>
        </picker-view>

        <!-- <van-area
        :area-list="arealist"
        :value="pageMsg.provinceCode"
        @confirm="getAddress"
        @cancel="pageMsg.isSelect = false"
      /> -->
      </div>
    </UniPopup>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import newArea from "../../../common/newArea.js";
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";

export default {
  components: { UniPopup },
  data() {
    let areaData = newArea;
    return {
      sexList: [
        {
          name: "先生",
          value: 1,
          isChecked: false,
        },
        {
          name: "女士",
          value: 2,
          isChecked: false,
        },
      ],
      tipCodes: [
        {
          name: "家",
          isChecked: false,
          value: 1000,
        },
        {
          name: "公司",
          isChecked: false,
          value: 2000,
        },
        {
          name: "其他",
          isChecked: false,
          value: 3000,
        },
      ],
      saveMsg: {
        userName: "",
        userSex: 1,
        mobilePhone: "",
        address: "",
        doorplate: "",
        isDefault: false,
        tagType: "",
      },
      areaData: areaData,
      pageMsg: {
        id: "",
        address: {},
        provinceCode: 110101,
        isSelect: false,
      },
      city_list: [],
      county_list: [],
      addressSelectIndex: [0, 0, 0],
    };
  },
  computed: {
    ...mapGetters(["user"]),
  },
  methods: {
    areaChange(e) {
      console.log("e", e);
      let cityIndex = e.detail.value[0];
      let countyIndex = e.detail.value[1];
      this.city_list = this.areaData[cityIndex].children;
      this.county_list = this.city_list[countyIndex].children;
      this.addressSelectIndex = e.detail.value;
      this.$forceUpdate();
    },
    handleShowPopup() {
      this.$refs.popup.open("bottom");
      console.log("areaData", this.areaData);

      this.pageMsg.isSelect = true;
    },
    handleClosePopup() {
      this.$refs.popup.close();
      this.pageMsg.isSelect = false;
    },
    changRadio(e) {},
    getSex(item) {
      this.saveMsg.userSex = item.value;
    },
    bindKeyInput(event, name) {
      this.saveMsg[name] = event.mp.detail.value;
    },
    onChange(e) {
      console.log("e", e);
      this.saveMsg.isDefault = e.detail.value;
      this.$forceUpdate();
    },
    getAddress(obj) {
      console.log("this.addressSelectIndex", this.addressSelectIndex);
      this.handleClosePopup();
      let content = this.addressSelectIndex;
      this.saveMsg.address =
        this.areaData[content[0]].name +
        this.city_list[content[1]].name +
        this.county_list[content[2]].name;

      this.pageMsg.address = content;
      console.log("this.saveMsg", this.saveMsg);
    },
    checkFn() {
      let _this = this;
      let flag = 0;

      for (let element in this.saveMsg) {
        if (_this.saveMsg[element] === "") {
          let msg = "";
          switch (element) {
            case "userName":
              msg = "收货人";
              break;
            case "mobilePhone":
              msg = "手机号";
              break;
            case "address":
              msg = "收货地址";
              break;
            case "doorplate":
              msg = "详细地址";
              break;
            case "tagType":
              msg = "标签";
              break;
          }
          uni.showToast({
            title: "请完善您的" + msg + "信息",
            icon: "none",
          });
          flag += 1;
          return false;
        }
      }
      if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(_this.saveMsg.mobilePhone)) {
        uni.showToast({
          title: "请输入正确的手机号",
          icon: "none",
        });
        return false;
      }
      if (flag === 0) {
        this.saveFn();
      }
    },
    saveFn() {
      // let _this = this
      let arr = JSON.parse(JSON.stringify(this.saveMsg));
      let msg = "添加成功";
      arr.action_type = "SaveAddress";
      if (this.pageMsg.id) {
        arr.addressId = this.pageMsg.id;
        msg = "更新成功";
      }
      arr.requestType = "application/x-www-form-urlencoded";

      arr.isDefault = Number(arr.isDefault);
      this.$api.postCoop(arr).then(function (res) {
        if (res.ResultCode === "100") {
          uni.showToast({
            title: msg,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 1000);
        }
      });
    },
    getMsg() {
      let _this = this;
      let arr = {
        action_type: "GetAddressDetail",
        requestType: "application/x-www-form-urlencoded",
        addressId: this.pageMsg.id,
      };
      this.$api.postCoop(arr).then(function (res) {
        if (res.ResultCode === "100") {
          let data = res.Data;
          if (data.USER_SEX === 1) {
            _this.sexList[0].isChecked = true;
          } else if (data.USER_SEX === 2) {
            _this.sexList[1].isChecked = true;
          }
          console.log("_this.sexList", _this.sexList);
          _this.saveMsg = {
            userName: data.USER_NAME,
            userSex: data.USER_SEX,
            mobilePhone: data.MOBILEPHONE,
            address: data.ADDRESS,
            doorplate: data.DOORPLATE,
            isDefault: Boolean(data.ISDEFAULT),
            tagType: data.TAGTYPE,
          };
          _this.tipCodes.map((n) => {
            if (n.value === data.TAGTYPE) {
              n.isChecked = true;
            }
          });
          // _this.$forceUpdate()
        }
      });
    },
    tagClick(item) {
      this.tipCodes.map((n) => {
        n.isChecked = false;
      });
      item.isChecked = true;
      this.saveMsg.tagType = item.value;
    },
    deleteFn() {
      let _this = this;
      let arr = {
        action_type: "DelAddress",
        requestType: "application/x-www-form-urlencoded",
        addressId: this.pageMsg.id,
      };
      let msg = "删除成功";
      uni.showModal({
        title: "温馨提示",
        content: "您是否确认删除该收货地址信息？",
        cancelText: "取消",
        confirmText: "确认",
        success: (res) => {
          if (res.confirm) {
            _this.$api.postCoop(arr).then(function (res) {
              if (res.ResultCode === "100") {
                uni.showToast({
                  title: msg,
                  icon: "none",
                });
                setTimeout(() => {
                  uni.navigateBack({
                    delta: 1,
                  });
                }, 1000);
              }
            });
          } else {
          }
        },
      });
    },
    loadIndustry() {
      // 新增收货地址时，如果是内部会员则提供默认填写名字和电话
      if (this.user.INDUSTRY_MEMBERSHIP_ID) {
        this.saveMsg.userName = this.user.MEMBERSHIP_NAME;
        this.saveMsg.mobilePhone = this.user.MEMBERSHIP_MOBILEPHONE;
      }
    },
  },
  onUnload() {
    this.saveMsg = {
      userName: "",
      userSex: 1,
      mobilePhone: "",
      address: "",
      doorplate: "",
      isDefault: 0,
      tagType: "",
    };
    this.tipCodes.map((n) => {
      n.isChecked = false;
    });
  },
  onLoad(option) {
    this.pageMsg.id = option.id || "";
    if (option.id) {
      this.getMsg();
    } else {
      this.loadIndustry();
    }
    this.city_list = this.areaData[0].children;
    this.county_list = this.city_list[0].children;
    console.log("this.city_list", this.city_list);
    console.log("this.county_list", this.county_list);
  },
};
</script>


<style lang="stylus" scoped>
.borbottom {
  border-bottom: 2rpx solid #eee;
}

.page-body {
  padding: 40rpx 0;
}

.addressSelecct {
  width: 100vw;
  height: 300px;
  background: #fff;

  .addressTitle {
    width: 100%;
    box-sizing: border-box;
    padding: 16rpx 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #F5F6F7;

    .cancelText {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #716F69;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
    }

    .confirmText {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #009F43;
      line-height: 28rpx;
      text-align: justify;
      font-style: normal;
    }
  }

  .picker-view {
    width: 100%;
    height: 100%;

    .item {
      line-height: 60rpx;
      text-align: center;
    }
  }
}

.address-box {
  background: #fff;
  font-size: 28rpx;
  color: #454545;
  padding: 0 32rpx;
}

.adress-content {
  height: 96rpx;
  line-height: 96rpx;
  display: flex;
  align-items: center;
}

.textarea-content {
  padding: 32rpx 0;
  // line-height 96rpx
  display: flex;
  // align-items center
}

textarea {
  width: 98%;
  // height 96rpx
  line-height: 30rpx;
  padding-top: 4rpx;
}

.content-input {
  flex: 1;

  input {
    width: 98%;
    height: 96rpx;
    line-height: 96rpx;
  }
}

.address-content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.tip-content {
  display: flex;
  align-items: center;
  // justify-content flex-end
}

.tip-tag {
  text-align: center;
  border-radius: 6rpx;
  border: 2rpx solid #dcdcdc;
  font-size: 22rpx;
  height: 42rpx;
  line-height: 41rpx;
  width: 100rpx;
  color: #666;
  margin: 0 20rpx;
}

.tip-tag.active {
  color: #c7ac85;
  border-color: #c7ac85;
  background: #f7efe3;
}

.content-title {
  min-width: 168rpx;
}

.radio-box {
  padding: 0rpx 0rpx;
  font-size: 26rpx;
  flex: 8;
  height: 96rpx;

  .radio-list {
    width: 48%;
    display: inline-block;

    .radio-unit {
      font-size: 26rpx;
      line-height: 96rpx;
    }
  }
}

.moren-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 0;
}

.moren-text {
  font-size: 24rpx;
  color: #999;
}

.save-btn {
  margin: 60rpx auto 30rpx auto;
  height: 80rpx;
  width: 660rpx;
  // background linear-gradient(to right,#A17356,#D8AA8B)
  // color #ffffff
  background: linear-gradient(to right, #1f1f1f, #62605f);
  color: #f0dccf;
  border-radius: 10rpx;
  font-size: 28rpx;
  line-height: 80rpx;
  text-align: center;
}

.del-btn {
  margin: 0 auto;
  height: 80rpx;
  width: 660rpx;
  background: #e9e9e9;
  border-radius: 10rpx;
  color: #999;
  font-size: 28rpx;
  line-height: 80rpx;
  text-align: center;
}
</style>
