<template>
  <view class="gift">
    <view class="gift-remark">{{ $lang.lang.integral.pointsRemark }}</view>
    <view class="gift-select">
      <view class="select-list">
        <view class="list-item" v-for="(item, index) in netList" :key="index"
          >{{ item }}
          <uni-icons
            class="list-icon"
            type="right"
            color="#B3B3B3"
            size="12"
          ></uni-icons>
        </view>
      </view>
      <view class="select-right">
        <picker
          mode="multiSelector"
          :range="pickerData"
          :value="pickerValue"
          :range-key="locale === 'zh' ? 'labelZh' : 'labelEn'"
          @change="bindPickerChange"
          @columnchange="bindColumnChange"
        >
          {{ $lang.lang.integral.outlets }}
          <uni-icons
            class="list-icon"
            type="right"
            color="#B3B3B3"
            size="12"
          ></uni-icons>
        </picker>
      </view>
    </view>
    <view class="gift-content">
      <view
        class="gift-item"
        v-for="item in giftList"
        :key="item.id"
        @click="toMail(item.id)"
      >
        <view class="gift-image-box">
          <image
            class="gift-image"
            mode="cover"
            :src="locale == 'zh' ? item.imgZh : item.imgEn"
          ></image>
          <view class="gift-tag">
            <view class="tags">
              <image
                class="tag-image"
                src="../../../static/img/score.png"
              ></image>
              <view class="tag-text">{{ item.pointsRequire }}</view>
            </view>
          </view>
          <view class="foot-tag">{{
            $lang.lang.integral.remainder(item.quantityRemain)
          }}</view>
        </view>
        <view class="gift-name">{{
          locale === "zh" ? item.titleZh : item.titleEn
        }}</view>
        <view class="gift-menu">
          <view
            class="gift-menu-text"
            v-for="ele in item.pickMethodList"
            :key="ele.id"
            >{{ locale === "zh" ? ele.labelZh : ele.labelEn }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    userInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      giftList: [],
      data: [],
      pickerData: [[], [], []],
      pickerValue: [0, 0, 0],
      nodeId: null,
      netList: [],
    };
  },
  computed: {
    locale() {
      return this.$lang.locale;
    },
  },
  watch: {
    userInfo: {
      handler(val) {
        console.log(val);
        this.netList =
          this.$lang.locale === "zh"
            ? [val.countryTitleZh, val.cityTitleZh]
            : [val.countryTitleEn, val.cityTitleEn];
      },
      immediate: true,
    },
  },
  created() {
    this.getGift();
    this.getNet();
  },
  methods: {
    toMail(id) {
      uni.navigateTo({
        url: "/pages/order_mail/order_mail?id=" + id,
      });
    },
    // 获取礼品列表
    async getGift() {
      try {
        const memberId = this.$store.getters.id;
        const { code, data } = await this.$request.post(
          "/app-api/ecw/reward/list",
          {
            memberId,
            nodeId: this.nodeId,
          }
        );
        if (code === 0) {
          this.giftList = data.list;
          if (!this.nodeId) {
            if (data.city) {
              this.netList =
                this.$lang.locale === "zh"
                  ? [this.userInfo.countryTitleZh, this.userInfo.cityTitleZh]
                  : [this.userInfo.countryTitleEn, this.userInfo.cityTitleEn];
            } else if (data.country == "130") {
              this.netList = this.$lang.locale === "zh" ? ["中国"] : ["china"];
            } else {
              this.netList =
                this.$lang.locale === "zh"
                  ? [this.userInfo.countryTitleZh]
                  : [this.userInfo.countryTitleEn];
            }
          }
        }
        console.log("giftList", this.giftList);
      } catch (error) {
        console.log(error);
      }
    },
    // 获取网点列表
    async getNet() {
      try {
        const { code, data } = await this.$request.get(
          "/admin-api/ecw/node/get-node-tree-region"
        );
        if (code === 0) {
          this.data = data;
          this.initPickerData();
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 初始化选择器数据
    initPickerData() {
      if (this.data.length === 0) return;
      const countries = this.data;
      const cities = this.data[0].children || [];
      const areas =
        (this.data[0].children && this.data[0].children[0].children) || [];
      this.pickerData[0] = countries;
      this.pickerData[1] = cities;
      this.pickerData[2] = areas;
    },
    // 选择改变
    bindPickerChange(e) {
      const val = e.detail.value;
      this.pickerValue = val;
      this.nodeId = this.pickerData[2][val[2]].id;
      this.getGift();
      this.getPickerValue(val);
    },
    // 列改变
    bindColumnChange(e) {
      const { column, value } = e.detail;
      const data = {
        pickerData: this.pickerData,
        pickerValue: this.pickerValue,
      };
      data.pickerValue[column] = value;
      if (column === 0) {
        const selectedCountry = this.data[value];
        const cities = selectedCountry.children || [];
        const areas = (cities[0] && cities[0].children) || [];
        data.pickerData[1] = cities;
        data.pickerData[2] = areas;
        data.pickerValue[1] = 0;
        data.pickerValue[2] = 0;
      } else if (column === 1) {
        const selectedCountry = this.data[data.pickerValue[0]];
        const selectedCity = selectedCountry.children[value];
        const areas = selectedCity.children || [];
        data.pickerData[2] = areas;
        data.pickerValue[2] = 0;
      }
      this.pickerData = data.pickerData;
      this.pickerValue = data.pickerValue;
      this.$forceUpdate();
    },
    // 选择数据显示
    getPickerValue(val) {
      const countries = this.pickerData[0][val[0]];
      const cities = this.pickerData[1][val[1]];
      const areas = this.pickerData[2][val[2]];
      this.netList =
        this.locale === "zh"
          ? [countries.labelZh, cities.labelZh, areas.labelZh]
          : [countries.labelEn, cities.labelEn, areas.labelEn];
    },
  },
};
</script>

<style lang="scss" scoped>
.gift {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.gift-remark {
  padding: 0 32upx;
  width: 100%;
  height: 42upx;
  display: flex;
  align-items: center;
  justify-content: right;
  box-sizing: border-box;
  font-size: 20upx;
  color: red;
}

.gift-select {
  padding: 0 32upx;
  display: flex;
  width: 100%;
  height: 70upx;
  color: #b3b3b3;
  box-sizing: border-box;
  align-items: center;
  border-bottom: 2upx solid #e7e7e7;
}
.select-list {
  font-size: 20upx;
  display: flex;
  align-items: center;
}
.list-item {
  display: flex;
  align-items: center;
  margin-right: 20upx;
  &:last-child {
    margin-right: 0;
  }
}
.list-icon {
  font-weight: 600;
  margin-left: 50upx;
  &:last-child {
    margin-left: 20upx;
  }
}
.select-right {
  margin-left: auto;
  font-size: 24upx;
}
.gift-content {
  width: 100%;
  height: calc(100% - 152upx);
  padding: 32upx 32upx;
  gap: 2%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  justify-content: space-between;
}
.gift-item {
  display: flex;
  flex-direction: column;
  width: 49%;
  box-sizing: border-box;
  // background-color: red;
}
.gift-image {
  margin: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
}
.gift-name {
  margin: 0;
  display: flex;
  height: 60upx;
  font-size: 24upx;
  color: #000000;
  align-items: center;
}
.gift-menu {
  margin-bottom: 20upx;
  display: flex;
  gap: 10upx;
  flex-wrap: wrap;
  min-height: 58upx;
  font-size: 20upx;
  color: #b3b3b3;
  align-items: center;
}
.gift-menu-text {
  padding: 4upx 4upx;
  border: 2upx solid #ef8d15;
  font-size: 24upx;
  color: #ef8d15;
  border-radius: 20upx;
  margin-right: 10upx;
  &:last-child {
    margin-right: 0;
  }
}
.gift-image-box {
  position: relative;
}
.gift-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8upx;
  min-width: 80upx;
  height: 32upx;
  box-sizing: border-box;
  background: linear-gradient(#ef7e1a, #f1b009);
  transform: skewX(15deg);
  border-top-right-radius: 10upx;
  border-bottom-left-radius: 10upx;
}
.tag-image {
  width: 24upx;
  height: 24upx;
}
.tags {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: skewX(-15deg);
}
.tag-text {
  margin-left: 4upx;
  font-weight: 500;
  color: #fff;
  font-size: 24upx;
}
.foot-tag {
  position: absolute;
  padding: 0 8upx;
  bottom: 0;
  right: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 110upx;
  height: 32upx;
  color: #fff;
  font-size: 22upx;
  box-sizing: border-box;
  background: linear-gradient(#ef7e1a, #f1b009);
  border-top-right-radius: 10upx;
  border-bottom-left-radius: 10upx;
}
</style>
