<template>
  <el-row>
    <el-col :span="12" :offset="6">
      <el-form :rules="rules" :model="formData" ref="dataForm">
        <el-form-item prop="productId">
          <el-input placeholder="输入商品ID或商品链接" clearable v-model="formData.productId"></el-input>
          <el-button type="primary" @click="onSubmit">立即查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="20" :offset="2" class="TT-logo-wrap mt-t0">
      <p class="TT-label">店铺logo：</p>
      <div class="TT-avatar">
        <img :src="shopInfo.picPath" alt="">
      </div>
    </el-col>
    <el-col :span="20" :offset="2" class="mt-t0">
      <div class="TT-table-wrap">
        <p class="TT-label">店铺基本信息</p>
        <table>
          <tbody>
          <tr>
            <td class="key">店铺名：</td>
            <td class="value">{{ shopInfo.nick }}</td>
            <td class="key">店铺编号：</td>
            <td class="value">{{ shopInfo.sid }}</td>
            <td class="key">店铺创建时间：</td>
            <td class="value">{{ shopInfo.created }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </el-col>
    <el-col :span="20" :offset="2" class="mt-t0">
      <div class="TT-table-wrap">
        <p class="TT-label">店铺评分</p>
        <table>
          <tbody>
          <tr>
            <td class="key">商品描述评分：</td>
            <td class="value">{{ shopInfo.shopScore.itemScore }}</td>
            <td class="key">服务态度评分：</td>
            <td class="value">{{ shopInfo.shopScore.serviceScore }}</td>
            <td class="key">发货速度评分：</td>
            <td class="value">{{ shopInfo.shopScore.deliveryScore }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </el-col>
    <el-col :span="20" :offset="2" class="mt-t0">
      <div class="TT-table-wrap">
        <p class="TT-label">于同行相比</p>
        <table>
          <tbody>
          <tr>
            <td class="key">商品描述评分：</td>
            <td class="value">{{ shopInfo.peerShopScore.peerItemScore }}</td>
            <td class="key">服务态度评分：</td>
            <td class="value">{{ shopInfo.peerShopScore.peerServiceScore }}</td>
            <td class="key">发货速度评分：</td>
            <td class="value">{{ shopInfo.peerShopScore.peerDeliveryScore }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'tools-shopinfo',
  data () {
    return {
      formData: {
        productId: '' // 测试ID：602950702411
      },
      isDisabled: false,
      rules: {
        productId: [{ required: true, message: '输入商品ID或商品链接', trigger: 'blur' }]
      },
      shopInfo: {
        shopScore: {},
        peerShopScore: {}
      }
    }
  },
  methods: {
    onSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return
        }
        if (this.isDisabled) {
          return
        }
        this.isDisabled = true
        this.$http({
          url: this.$http.adornUrl('/tb/shopMsg'),
          method: 'post',
          data: this.$http.adornData({
            productId: this.formData.productId
          })
        }).then(({ data }) => {
          this.isDisabled = false
          if (data.status) {
            this.shopInfo = data.data
            return
          }
          this.$message.error(data.msg)
        }).catch(() => {
          this.isDisabled = false
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$--color-primary: #3E8EF7;
.mt-t0 {
  margin-top: 40px;
}

/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;
    }
  }
}

.TT-label {
  height: 25px;
  background-color: #0099FF;
  color: #fff;
  display: inline-block;
  padding: 5px 10px;
  width: fit-content;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  line-height: 16px;
  font-size: 16px;
}

.TT-logo-wrap {
  display: flex;
}

.TT-avatar {
  display: flex;
  width: 120px;
  height: 120px;
  margin-left: 10px;
  overflow: hidden;

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

table {
  width: 100%;
  border-collapse: collapse;

  td {
    border: 1px solid #0099FF;
    height: 42px;
    width: 120px;
  }

  .key {
    background-color: #E6F1F8;
    text-align: center;
    width: 80px;
  }

  .value {
    text-align: center;
  }
}
</style>
