<template>
  <div class="detail">
    <div class="detail-router">
      <template v-for="(item, index) in 5">
        <router-link :to="'/'">官网首页</router-link>
        <span>></span>
      </template>
    </div>
    <div class="goods-show">
      <div class="goods-show-info">
        <div class="goods-show-body">
          <div class="goods-show-img">
            <img src="../assets/goods-img.jpg" alt=""/>
          </div>
          <div class="goods-show-text">
            <div class="goods-show-title">
              Steam 全区账号
            </div>
            <div class="goods-show-advantages">
              官方渠道
              极速发货
              错误包换
            </div>
            <div class="goods-show-des">
              CRMEB源码遵循 GPL-3.0 开源协议，系统采用 TP5.0 框架；
              后台采用 form-builder 组件和后台多任务操作框架，方便快速开发增删改、封装 layui.table 可快速开发数据列表页面、PHPExcel
              数据导出、数据库在线词典、日志小工具、系统参数配置、系统强大完善的权限控制、系统菜单配置、组合数据模型等这些都是为了方便二次开发而准备的；
              前台 vue 封装了常用小工具，以及所有数据接口；
              首页
              CRMEB源码遵循 GPL-3.0 开源协议，系统采用 TP5.0 框架；
              后台采用 form-builder 组件和后台多任务操作框架，方便快速开发增删改、封装 layui.table 可快速开发数据列表页面、PHPExcel
              数据导出、数据库在线词典、日志小工具、系统参数配置、系统强大完善的权限控制、系统菜单配置、组合数据模型等这些都是为了方便二次开发而准备的；
              前台 vue 封装了常用小工具，以及所有数据接口；
              首页
            </div>
          </div>
        </div>

        <div class="goods-show-count">
          <div class="goods-show-price-text">
            <span>近30天销量：</span>
            <span>99999999</span>
          </div>
        </div>
      </div>
    </div>
    <div class="goods-info">
      <div class="info-left">
        <div class="info-left-select-btns">
          <!--          <template v-for="index in 10">-->
          <div class="info-left-select-btn"><span>美国</span></div>
          <div class="info-left-select-btn"><span>美区（带账号）</span></div>
          <div class="info-left-select-btn"><span>中国香港</span></div>
          <div class="info-left-select-btn"><span>国区</span></div>
          <div class="info-left-select-btn"><span>中国台湾</span></div>
          <div class="info-left-select-btn"><span>日本</span></div>
          <div class="info-left-select-btn"><span>澳洲</span></div>
          <div class="info-left-select-btn"><span>德国</span></div>
          <div class="info-left-select-btn"><span>阿联酋</span></div>
          <!--</template>-->
        </div>
        <div class="info-left-select-param">
          <!--          TODO 标签暂时还存在问题-->
          <template v-for="(item,index) in selectorDatas">
            <div class="info-left-select-param-btn" @click="selectIndex = index">
              <div class="ilspb-selector">
                <img src="../assets/svg/select.svg" v-if="index === selectIndex"/>
              </div>
              <span>{{ item.name }}</span>
              <div class="ilspb-tag" :style="getTargetMarginLeft(item.tag)" v-if="item.tag">
                {{ item.tag }}
              </div>
            </div>
          </template>
        </div>

        <div class="info-left-des">
          <div class="des-tags">
            <div class="des-tag" :class="selectArticleType==0?'des-select-tag':''" @click="selectArticleType=0">
              商品介绍
            </div>
            <div class="des-tag" :class="selectArticleType==1?'des-select-tag':''" @click="selectArticleType=1">
              常见问题
            </div>
          </div>
          <div class="info-introduction" v-show="true"></div>
          <div class="info-question" v-show="false"></div>
        </div>

      </div>
      <div class="info-right">
        <div class="info-right-price-calc">
          <div class="info-right-purchase-count">
            <!--  购买数量 -->
            <div class="irpc-font">购买数量</div>
            <!--          数量按钮-->
            <div class="irpc-count-button">
              <div class="irpc-count-button-minus" @click="purchaseQuantityMinus()">-</div>
              <div class="irpc-count-button-input">
                <input v-model="purchaseQuantity"/>
              </div>
              <div class="irpc-count-button-add" @click="purchaseQuantityAdd()">+</div>
            </div>
          </div>
          <div class="info-right-total-purchase-price">

            <div class="price">
              <div class="price-name">总价</div>
              <div class="price-number">
                <div class="price-original">249</div>
                <div class="price-value">299</div>
              </div>
            </div>
            <div class="purchase-button">
              <div class="purchase-button-btn">
                立即购买
              </div>
            </div>
          </div>
        </div>
        <div class="info-recommend">
          <div class="info-recommend-title">
            相关推荐
          </div>
          <div class="info-recommend-items">
            <template v-for="index in 10">
              <div class="info-recommend-item">
                <div class="recommend-item-img">
                  <img src="../assets/goods-img.jpg" alt="测试图片"/>
                </div>
                <div class="recommend-item-name">
                  steam（美国）充值卡-20美金
                </div>
              </div>
            </template>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref} from "vue";

let purchaseQuantity = ref(0)

function purchaseQuantityAdd() {
  if (purchaseQuantity.value >= 999) {
    purchaseQuantity.value = 999
    return
  }
  purchaseQuantity.value++;
}

function purchaseQuantityMinus() {
  if (purchaseQuantity.value <= 0) {
    purchaseQuantity.value = 0
    return
  }
  purchaseQuantity.value--;
}

//============文章类型选择================
let selectArticleType = ref(0)


//============简单的对象==============
let selectIndex = ref(0)
let selectorDatas = ref([
  {
    name: "苹果（中国香港）iTunes礼品卡-50港元",
    tag: "新手体验11111111"
  },
  {
    name: "苹果（中国香港）iTunes礼品卡-50港元",
    tag: ""
  },
  {
    name: "苹果（中国香港）iTunes礼品卡-150港元",
    tag: "平台推荐"
  },
  {
    name: "苹果（中国香港）iTunes礼品卡-200港元",
    tag: ""

  }
])

//计算字符串宽度
function getTargetMarginLeft(tag: string) {
  //计算字符串宽度
  const dom = document.createElement('span');
  dom.style.display = 'inline-block';
  dom.style.fontSize = '12px';
  dom.textContent = tag;
  document.body.appendChild(dom);
  const width = dom.clientWidth;
  console.log(dom.clientWidth);
  document.body.removeChild(dom);
  return {marginLeft: (280 - width) + 'px'}
}

class SelectData {
  name: string
  tag: string
}

</script>
<style scoped lang="scss">
.detail {
  width: 100%;
  background: #f8f8f8;

  .detail-router {
    line-height: 50px;
    text-align: left;
    margin: 0 auto;
    color: #333;
    width: 1180px;
    height: 50px;
    background: white;
  }

  .goods-show {
    background: #cfddd6;
    height: 300px;
    padding-top: 35px;

    .goods-show-info {
      width: 1180px;
      margin: 0 auto;
      display: flex;

      justify-content: space-between;

      .goods-show-body {
        display: flex;

        .goods-show-img {
          perspective: 300px;

          img {
            transform-origin: left center;
            transform: rotateY(10deg) rotateX(5deg);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            border-radius: 20px;
          }
        }

        .goods-show-text {
          padding-top: 20px;
          padding-left: 30px;
          margin-left: 50px;
          width: 600px;
          text-align: left;

          .goods-show-title {
            line-height: 35px;
            font-size: 30px;
            font-weight: bold;
            color: #777;
          }

          .goods-show-advantages {
            margin-top: 15px;
            color: #888;
          }

          .goods-show-des {
            margin-top: 30px;
            color: #aaa;
            height: 140px;
            /*首行缩进*/
            text-indent: 2em;
            /*文本隐藏*/
            text-overflow: ellipsis;
            /*文本溢出显示省略号*/
            overflow: hidden;
          }
        }
      }

      .goods-show-count {
        display: flex;
        width: 150px;

        .goods-show-price-text {
          font-size: 12px;
          width: 150px;
          line-height: 34px;
          text-align: center;
          border-radius: 15px;
          height: 34px;
          background: rgba(255, 255, 255, 0.3);

          span:nth-child(1) {
            color: #999;
          }
        }
      }
    }
  }

  .goods-info {
    width: 1180px;
    display: flex;
    justify-content: space-between;
    margin: 20px auto 0 auto;

    .info-left {
      width: 760px;

      .info-left-select-btns {
        padding: 15px;
        width: 730px;
        border: #dddddd solid;
        border-width: 1px 1px 0 1px;
        border-radius: 5px 5px 0 0;

        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        //margin-bottom:  30px;
        background: white;

        .info-left-select-btn {
          margin: 0 10px 20px 0;
          height: 35px;
          line-height: 35px;
          text-align: center;
          border-radius: 15px;
          border: #8b8b8b 1px solid;
          padding: 5px 15px;
          color: #8b8b8b;
          cursor: pointer;
          transition: background-color 0.2s ease;
          user-select: none;

          &:hover {
            background: #888888;
            color: white;
          }

          &:active {
            background: #dddddd;
            color: #888888;
          }
        }
      }

      .info-left-select-param {
        padding: 15px;
        border-radius: 0 0 5px 5px;
        border: #dddddd 1px solid;
        background: white;

        margin-bottom: 20px;
        width: 730px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .info-left-select-param-btn {
          user-select: none;
          width: 300px;
          height: 35px;
          line-height: 35px;
          padding: 5px 15px;
          cursor: pointer;
          border: #8b8b8b 1px solid;
          border-radius: 15px;
          transition: background-color 0.2s ease;
          display: flex;
          font-size: 12px;
          margin-bottom: 10px;

          .ilspb-selector {
            display: inline-block;
            line-height: 35px;
            width: 20px;
            height: 20px;
            background: #888888;
            border-radius: 50%;
            margin: 7px 0;

            img {
              width: 15px;
              height: 15px;
              padding-bottom: 5px;
            }
          }

          span {
            margin-left: 10px;
          }

          .ilspb-tag {
            margin-top: -15px;
            margin-left: 0;
            padding: 0 10px;
            background: #f8d9d1;
            font-size: 12px;
            height: 20px;
            line-height: 20px;
            border-radius: 5px;
            position: absolute;
            color: rgba(223, 30, 28);
            border: rgba(223, 30, 28) 1px solid;

          }

          .it {
            margin: -15px 0 0 180px;
          }

          &:hover {
            background: #aaa;
            color: white;
          }

          &:active {
            background: #dddddd;
            color: #aaa;
          }
        }
      }

      .info-left-des {
        margin-top: 30px;
        height: 600px;
        border-radius: 5px;
        border: #dddddd 1px solid;
        background: white;

        .des-tags {
          display: flex;
          flex-wrap: wrap;
          font-size: 16px;
          border-bottom: #dddddd 1px solid;

          .des-tag {
            padding: 15px 5px;
            transition: font-size 0.2s ease;
            line-height: 30px;
            cursor: pointer;
          }

          .des-select-tag {
            font-weight: bold;
            font-size: 20px;
          }
        }
      }
    }

    .info-right {
      width: 380px;

      .info-right-price-calc {
        .info-right-purchase-count {
          display: flex;
          justify-content: space-between;
          padding: 20px 30px;
          border-radius: 5px 5px 0 0;
          background: white;
          border: solid #dddddd;
          border-width: 1px 1px 0 1px;

          .irpc-font {
            font-size: 14px;
            line-height: 36px;
            text-align: left;
          }

          .irpc-count-button {
            width: 120px;
            border-radius: 15px;
            background: #f0f0f0;
            height: 36px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;

            .irpc-count-button-minus, .irpc-count-button-add {
              text-align: center;
              line-height: 36px;
              font-weight: bold;
              color: #666666;
              font-size: 18px;
              width: 40px;
              cursor: pointer;
              user-select: none;
              border-radius: 0 15px 15px 0;

              &:nth-child(1) {
                border-radius: 15px 0 0 15px;
              }

              &:hover {
                background: #eaeaea;
              }
            }

            .irpc-count-button-input {
              text-align: center;
              line-height: 36px;
              width: 40px;

              input {
                color: #666666;
                font-size: 14px;
                text-align: center;
                width: 40px;
                outline: none;
                background: transparent;
                border: transparent;
              }
            }
          }

        }

        .info-right-total-purchase-price {
          border: solid #dddddd;
          border-width: 0 1px 1px 1px;
          border-radius: 0 0 5px 5px;
          height: 160px;
          width: 318px;
          padding: 10px 30px 10px 30px;
          background: white;

          .price-name {
            justify-content: left;
            text-align: left;
            font-size: 26px;
            font-weight: bold;
            display: inline-block;
          }

          .price {
            display: flex;
            /*文本置底*/
            vertical-align: bottom;
            justify-content: space-between;
            margin: 10px 5px 0 5px;

            .price-number {
              display: flex;
              justify-content: right;

              .price-original {
                padding-top: 13px;
                display: block;
                position: relative;
                bottom: 0;
                width: auto;
                color: #8b8b8b;
                text-decoration: line-through;
                font-size: 14px;
                text-align: right;

                &:before {
                  content: "￥";
                }
              }

              .price-value {
                font-weight: bold;
                font-size: 26px;
                color: #ff4d4f;
                text-align: right;
                /*字间距*/
                letter-spacing: -1.5px;

                &:before {
                  content: "￥";
                }
              }
            }

          }

          .purchase-button {
            border-top: 1px solid #dddddd;
            width: 320px;
            height: 45px;
            margin: 20px auto 0 auto;

            .purchase-button-btn {
              margin-top: 20px;
              background: #207cfb;
              border-radius: 5px;
              line-height: 45px;
              user-select: none;
              cursor: pointer;

            }
          }
        }
      }

      .info-recommend {
        margin-top: 40px;
        margin-bottom: 20px;
        width: 380px;
        background: #fff;
        border-radius: 5px;
        border: 1px solid #dddddd;


        .info-recommend-title {
          font-size: 24px;
          font-weight: bold;
          text-align: center;
          padding-bottom: 15px;
          margin-bottom: 15px;
          border-bottom: 1px solid #dddddd;;
        }

        .info-recommend-items {
          width: 320px;
          padding: 10px 30px;
          min-height: 30px;
          justify-content: space-between;
          flex-wrap: wrap;
          display: flex;

          .info-recommend-item {
            cursor: pointer;
            margin: 0 10px 20px 10px;
            max-width: 150px;

            .recommend-item-img {
              width: 110px;
              height: 143px;
              margin-bottom: 12px;

              img {
                border-radius: 15px;
                width: 110px;
                height: 143px;
                z-index: 1;
              }

              &:after {
                transition: all 5.3s ease;
                margin: -148px 0 0 0;
                position: absolute;
                display: none;
                z-index: 2;
                content: "";
                width: 110px;
                height: 143px;
                background-color: rgba(255, 255, 255, 0.1);
                border-radius: 15px;
              }

              &:hover {
                &:after {

                  display: block;
                }
              }
            }

            &:hover .recommend-item-img img {
              box-shadow: #333 0 0 8px;
            }

            .recommend-item-name {
              width: 110px;
              height: 38px;

              font-size: 12px;
              text-align: left;
            }


          }
        }
      }
    }
  }
}
</style>