<template>
  <div class="productDetails container">
    <div class="payInfo">
      <product-imgs class="fl" :img="product.slideshow" />
      <div class="info fl">
        <div class="title">{{ product.name }}</div>
        <div class="desc">
          {{ $t("page.views.shops.details.product.brandAuthentication") }}
        </div>
        <div class="row">
          <div class="tit">
            {{ $t("page.views.shops.details.product.price") }} :
          </div>
          <div class="amount fl"><span>¥ </span>{{ product.price }}</div>
        </div>
        <div class="row" v-if="product.goodsSizes && product.goodsSizes.length">
          <div class="tit">
            {{ $t("page.views.shops.details.product.specifications") }} :
          </div>
          <div class="items">
            <div
              v-for="({ size }, index) in product.goodsSizes"
              :key="`goodsSizes${index}`"
              :class="{ item: true, curr: form.goodsSizes === index }"
              @click="form.goodsSizes = index"
            >
              {{ size }}
            </div>
          </div>
        </div>
        <div
          class="row"
          v-if="product.goodsColors && product.goodsColors.length"
        >
          <div class="tit">
            {{ $t("page.views.shops.details.product.color") }} :
          </div>
          <div class="items">
            <div
              v-for="({ id, color }, index) in product.goodsColors"
              :key="`goodsColors${index}`"
              :class="{ item: true, curr: form.goodsColors === index }"
              @click="form.goodsColors = index"
            >
              {{ color }}
            </div>
          </div>
        </div>

        <div class="pay" @click="showPhone = true">
          {{ $t("page.views.shops.details.product.contactMerchant") }}
        </div>
        <transition name="slide-fade">
          <span v-if="showPhone" class="phone">138 388 8888</span>
        </transition>
      </div>
    </div>
    <div class="x-title">
      {{ $t("page.views.shops.details.product.commodityDetails") }}
    </div>
    <div class="details">
      <div class="items">
        <div class="item">
          {{ $t("page.views.shops.details.product.tradeName") }}：{{
            product.name
          }}
        </div>
        <div class="item">
          {{ $t("page.views.shops.details.product.commodityMaterial") }}：{{
            product.material
          }}
        </div>
        <div class="item">
          {{ $t("page.views.shops.details.product.commodityWeight") }}：{{
            product.weight
          }}
        </div>
        <div class="item">
          {{ $t("page.views.shops.details.product.commodityColor") }}：{{
            colors
          }}
        </div>
        <div class="item">
          {{
            $t("page.views.shops.details.product.commoditySpecifications")
          }}：{{ sizes }}
        </div>
        <div class="item">
          {{ $t("page.views.shops.details.product.distributionMode") }}：{{
            product.delivery
          }}
        </div>
        <div class="item">
          {{ $t("page.views.shops.details.product.productionDate") }}：{{
            product.producedTime
          }}
        </div>
        <div class="item">
          {{ $t("page.views.shops.details.product.productionLocation") }}：{{
            product.producedAddress
          }}
        </div>
        <div class="item">
          {{ $t("page.views.shops.details.product.warehouseAddress") }}：{{
            product.warehouseAddress
          }}
        </div>
        <div
          class="item"
          v-for="({ attributeName: k, value: v },
          index) in product.goodsAttributes"
          :key="`goodsAttributes${index}`"
        >
          {{ `${k}：${v}` }}
        </div>
      </div>
      <div v-html="product.des" />
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
@Component
export default class extends Vue {
  private showPhone = false;
  private form = {
    goodsSizes: "",
    goodsColors: ""
  };
  @Prop(String)
  private pid!: string;
  private product: IAny = {};
  @Watch("pid", { immediate: true })
  async load(id: number) {
    if (!id) return;
    this.showPhone = false;
    const [err, data] = await this.$post("/goods/info/details", { id });
    if (err) return;
    this.product = data;
  }

  get colors() {
    return (this.product.goodsColors || []).map((x: any) => x.color).join();
  }
  get sizes() {
    return (this.product.goodsSizes || []).map((x: any) => x.size).join();
  }
}
</script>
<style lang="scss" scoped>
.productDetails {
  margin-top: 20px;
  .payInfo {
    overflow: hidden;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgb(229, 229, 229);

    .info {
      overflow: hidden;
      padding: 20px 30px;
      width: 760px;
      box-sizing: border-box;
      .title {
        font-size: 16px;
        color: rgb(51, 51, 51);
        margin-bottom: 10px;
      }
      .desc {
        font-size: 12px;
        color: rgb(102, 102, 102);
        margin-bottom: 30px;
      }
      .amount {
        color: rgb(253, 85, 34);
        font-size: 20px;
        span {
          font-size: 12px;
        }
      }
      .row {
        margin-bottom: 20px;
        width: 100%;
        overflow: hidden;
        // margin-top: 10px;
        .tit {
          color: rgb(102, 102, 102);
          margin-right: 15px;
          float: left;
        }
        .items {
          overflow: hidden;
          .item {
            float: left;
            border: 1px #e5e5e5 solid;
            border-radius: 4px;
            padding: 5px 15px;
            color: rgb(102, 102, 102);
            margin: 0 20px 10px 0;
            cursor: pointer;
            &.curr {
              border: 1px rgb(253, 85, 34) solid;
              color: rgb(253, 85, 34);
            }
          }
        }
      }
      .pay {
        width: 126px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border-radius: 4px;
        color: #fff;
        background: rgb(253, 85, 34);
        cursor: pointer;
        display: inline-block;
      }
      .phone {
        margin-left: 20px;
        vertical-align: bottom;
        letter-spacing: 2px;
        color: rgb(253, 85, 34);
        display: inline-block;
      }
    }
  }
  .details {
    padding: 30px 20px;
    .items {
      overflow: hidden;
      .item {
        width: 33.33%;
        margin-bottom: 20px;
        float: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 30px;
        box-sizing: border-box;
      }
    }
  }
}

.slide-fade-enter-active {
  transition: all 0.5s ease;
}

.slide-fade-enter {
  transform: translateX(20px);
  opacity: 0;
}
</style>
