<template>
  <div class="integral-exchange">
    <div class="header">
      <div class="text">{{ $t("integral.pointsTitle") }}</div>
      <div class="red">{{ $t("integral.pointsRemark") }}</div>
    </div>
    <div class="content">
      <el-cascader
        v-if="cascaderState"
        v-model="selectedNodeId"
        :props="{
          checkStrictly,
          label: language == 'zh_CN' ? 'labelZh' : 'labelEn',
          value: 'id',
        }"
        class="cascader"
        :options="nodeList"
        @visible-change="changeSelect"
        :placeholder="$t('integral.outlets')"
      />
    </div>
    <div class="list">
      <div
        v-for="item in list"
        :key="item.id"
        class="list-item"
        @click="toDetail(item.id)"
      >
        <div class="item-image">
          <img
            class="imgs"
            :src="language == 'zh_CN' ? item.imgZh : item.imgEn"
            alt=""
          />
          <div class="gift-tag">
            <div class="tags">
              <img class="tag-image" src="@/assets/integral/score.png" />
              <div class="tag-text">{{ item.pointsRequire }}</div>
            </div>
          </div>
          <div class="foot-tag">
            {{ $t("integral.remainder", { value: item.quantityRemain }) }}
          </div>
        </div>
        <div class="item-text">
          {{ language == "zh_CN" ? item.titleZh : item.titleEn }}
        </div>
        <div class="item-menu">
          <template v-if="item.pickMethodList">
            <div
              v-for="ele in item.pickMethodList"
              :key="ele.value"
              class="menu-text"
            >
              {{ language == "zh_CN" ? ele.labelZh : ele.labelEn }}
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { integralList, getBranchList } from "@/api/integral";
export default {
  name: "IntegralExchange",
  data() {
    return {
      list: [],
      nodeId: null,
      nodeList: [],
      selectedNodeId: null,
      checkStrictly: true,
      cascaderState: true,
    };
  },
  computed: {
    language() {
      this.cascaderState = false;
      this.$nextTick(() => {
        this.cascaderState = true;
      });
      return this.$store.getters.language;
    },
  },
  watch: {
    selectedNodeId(val) {
      if (val && val.length > 2) {
        this.nodeId = val[val.length - 1];
        this.getIntegralList();
      }
    },
  },
  created() {
    this.getIntegralList();
    this.getNodeInfo();
  },
  methods: {
    changeSelect() {
      this.checkStrictly = false;
    },
    // 获取礼品列表
    async getIntegralList() {
      try {
        const memberId = this.$store.getters.id;
        const { code, data } = await integralList({
          memberId,
          nodeId: this.nodeId,
        });
        if (code !== 0) return;
        this.list = data.list;
        if (!this.nodeId) {
          if (data.city) {
            this.selectedNodeId = [data.country, data.city];
          } else {
            this.selectedNodeId = [data.country];
          }
        }
      } catch (err) {
        console.log(err);
      }
    },
    // 获取网点信息
    async getNodeInfo() {
      try {
        const { code, data } = await getBranchList();
        if (code !== 0) return;
        this.nodeList = data;
        console.log(data);
      } catch (err) {
        console.log(err);
      }
    },
    // 跳转详情
    toDetail(id) {
      this.$router.push({ path: `/jiedao/jd-exchange-operate`, query: { id } });
    },
  },
};
</script>

<style lang="scss" scoped>
.integral-exchange {
  padding: 10px;
  .header {
    display: flex;
    width: 100%;
    height: 60px;
    align-items: center;
    .text {
      padding-right: 10px;
      font-size: 22px;
      font-weight: 700;
      border-right: 4px solid #1890ff;
    }
    .red {
      font-size: 14px;
      color: red;
      margin-left: 5px;
    }
  }
  .content {
    width: 100%;
    display: flex;
    align-items: end;
    height: 40px;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 1px solid #e9e9e9;
    .content-text {
      font-size: 24px;
      font-weight: 700;
    }
    .content-select {
      color: gray;
      font-size: 16px;
      padding-bottom: 10px;
    }
  }
  .list {
    padding: 20px 0;
    display: grid;
    width: 100%;
    gap: 20px;
    grid-template-columns: repeat(5, 1fr);

    .list-item {
      width: 180px;
      box-sizing: border-box;
    }
    .item-image {
      width: 180px;
      height: 120px;
      position: relative;
      .imgs {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .item-text {
      font-size: 16px;
      color: #333;
      padding: 10px 0;
    }
    .item-menu {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 5px;
      .menu-text {
        padding: 4px 10px;
        font-size: 14px;
        color: #ef8d15;
        box-sizing: border-box;
        border: 2px solid #ef8d15;
        border-radius: 20px;
      }
    }
  }
}
.gift-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  min-width: 40px;
  height: 16px;
  box-sizing: border-box;
  background: linear-gradient(#ef7e1a, #f1b009);
  transform: skewX(15deg);
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.tag-image {
  width: 12px;
  height: 12px;
}
.tags {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: skewX(-15deg);
}
.tag-text {
  margin-left: 2px;
  font-weight: 500;
  color: #fff;
  font-size: 12px;
}
.foot-tag {
  position: absolute;
  padding: 0 5px;
  bottom: 0;
  right: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 55px;
  height: 16px;
  color: #fff;
  font-size: 12px;
  box-sizing: border-box;
  background: linear-gradient(#ef7e1a, #f1b009);
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.cascader {
  width: 100%;
}
::v-deep {
  .cascader .el-input__inner {
    border: none !important;
    box-shadow: none !important;
  }
}
</style>
