<template>
  <el-row v-loading="loading">
    <el-col :span="12" :offset="6">
      <el-form :rules="rules" :model="dataForm" @keyup.enter.native="getDataList()" ref="dataForm">
        <el-form-item prop="productId">
          <el-input placeholder="输入商品ID或商品链接" clearable v-model="dataForm.productId"></el-input>
          <el-button type="primary" @click="getDataList">立即查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="11" :offset="1" v-show="productInfo.title">
      <h3>商品信息</h3>
      <ul>
        <li>
          <p class="label">名称：</p>
          <p class="value">{{ productInfo.title }}</p>
        </li>
        <li>
          <p class="label">大类ID：</p>
          <p class="value">{{ productInfo.categoryId }}</p>
        </li>
        <li>
          <p class="label">销量：</p>
          <p class="value">{{ productInfo.sellCount }}</p>
        </li>
        <li>
          <p class="label">总量：</p>
          <p class="value">{{ productInfo.quantity }}</p>
        </li>
        <li>
          <p class="label">原价：</p>
          <p class="value">{{ productInfo.reservePrice }}</p>
        </li>
        <li>
          <p class="label">折扣价：</p>
          <p class="value">{{ productInfo.zkFinalPrice }}</p>
        </li>
        <li>
          <p class="label">评价条数：</p>
          <p class="value">{{productInfo.rate.totalCount }}</p>
        </li>
        <li>
          <p class="label">评价分类：</p>
          <div class="rate-wrap">
            <p v-for="(item, index) in productInfo.rate.keywords" :key="index">{{ item.word }}({{ item.count }})</p>
          </div>
        </li>
        <li>
          <p class="label">商品主图：</p>
          <div class="main-photo">
            <img :src="productInfo.productMainPhoto" alt="">
          </div>
        </li>
        <li v-show="productInfo.video">
          <p class="label">商品视频：</p>
          <div class="video-wrap">
            <video :src="productInfo.video" controls></video>
          </div>
        </li>
        <li>
          <p class="label">商品介绍图：</p>
          <div class="value">
            <img class="goods-photo" :src="item" alt="" v-for="(item, index) in productInfo.images" :key="index">
          </div>
        </li>
      </ul>
    </el-col>
    <el-col :span="11" :offset="1" v-show="productInfo.seller.shopName">
      <h3>店铺信息</h3>
      <ul>
        <li>
          <p class="label">店铺名：</p>
          <p class="value">{{ productInfo.seller.shopName }}</p>
        </li>
        <li>
          <p class="label">店铺logo：</p>
          <img class="value shop-icon" :src="productInfo.seller.shopIcon" alt="">
        </li>
        <li>
          <img :src="productInfo.seller.taoShopUrl" alt="">
        </li>
        <li>
          <p class="label">评价：</p>
          <div class="rate-wrap">
            <p v-for="(item, index) in productInfo.seller.evaluates" :key="index">{{ item.title }}({{ item.score }})</p>
          </div>
        </li>
      </ul>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'tools-productinfo',
  data () {
    return {
      loading: false,
      dataForm: {
        productId: '' // 602950702411
      },
      rules: {
        productId: [{ required: true, message: '输入商品ID或商品链接', trigger: 'blur' }]
      },
      productInfo: {
        rate: {},
        seller: {}
      }
    }
  },
  methods: {
    // 获取数据列表
    getDataList () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return
        }
        this.loading = true
        this.$http({
          url: this.$http.adornUrl('/tb/getProductductInfo2'),
          method: 'POST',
          data: this.$http.adornData({
            'productId': this.dataForm.productId
          })
        }).then(({ data }) => {
          this.loading = false
          if (data.status) {
            this.productInfo = data.data
          } else {
            this.$message.error(data.msg)
          }
        }).catch(() => {
          this.loading = false
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
$--color-primary: #3E8EF7;
/deep/ .el-form-item {
  .el-form-item__content {
    display: flex;
    align-items: center;

    input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border: 1px solid $--color-primary;
    }

    button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}

h3 {
  margin-bottom: 30px;
}

ul {
  list-style: none;

  li {
    display: flex;
    margin-bottom: 14px;
  }

  .label {
    margin-right: 6px;
    color: #666;
  }

  .value {
    float: 1;
    color: #000;
    word-break: break-all;
  }

  .rate-wrap {
    flex: 1;
    display: flex;
    flex-flow: row wrap;

    p {
      margin-right: 10px;

      &:nth-last-of-type(1) {
        margin-right: 0;
      }
    }
  }

  .video-wrap {
    width: 80%;
    height: 300px;

    video {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .main-photo {
    display: inline-block;
    width: 300px;

    img {
      display: block;
      width: 100%;
    }
  }

  .goods-photo {
    display: block;
    width: 400px;
  }

  .shop-icon {
    display: inline-block;
    width: 80px;
  }
}
</style>
