<template>
  <el-row v-loading="dataListLoading">
    <el-col :span="10" :offset="7">
      <el-form :model="dataForm" :rules="rules" @keyup.enter.native="getDataList()" ref="dataForm">
        <el-form-item prop="productId">
          <el-input v-model="dataForm.productId" placeholder="输入商品ID或商品链接" clearable></el-input>
          <el-button type="primary" @click="getDataList()">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <template v-if="booLoading">
      <el-col class="TT-goods-info">
        <div class="left">
          <img :src="goodsInfo.itemPic" alt="">
        </div>
        <div class="right">
          <p>
            <span class="label">商品名称：</span>
            <span class="value">{{ goodsInfo.itemTitle }}</span>
          </p>
          <p>
            <span class="label">问答总数：</span>
            <span class="value">{{ goodsInfo.questionCount }}</span>
          </p>
          <p>
            <span class="label">问答是否已关闭：</span>
            <span class="value">{{ questionStatus.closeQuestion === 'false' ? '否' : '是' }}</span>
          </p>
        </div>
      </el-col>
      <el-col class="TT-question-words">
        <p class="label">问答关键词：</p>
        <ul class="TT-key-words">
          <li class="value" v-for="(item, index) in questionWords" :key="index">{{ item }}</li>
        </ul>
      </el-col>
      <el-col>
        <el-table
          :data="item"
          :show-header="false"
          :default-expand-all="true"
          style="width: 100%"
          v-for="(item, index) in dataList"
          :key="index">
          <el-table-column
            prop="id"
            header-align="center"
            label="ID"
            align="center"
            type="expand">
            <template slot-scope="props">
              <ul class="TT-answer-wrap">
                <li v-for="(item, index) in props.row.subFeeds" :key="index">
                  <a target="_blank" :href="item.user.userUrl">
                    <div class="avatar-wrap">
                      <img :src="item.user.userLogo" alt="">
                    </div>
                    <p class="nickname">{{ item.user.userNick }}</p>
                  </a>
                  <p class="answer value">{{ item.title }}</p>
                </li>
              </ul>
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            header-align="center"
            align="left">
            <template slot-scope="props">
              <span class="label">问：</span>
              <span class="value">{{ props.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="targetUrl"
            header-align="center"
            width="160"
            align="left">
            <template slot-scope="props">
              <p class="label" style="margin: 0 auto;">创建时间：</p>
              <p class="value">{{ props.row.gmtCreate | timeFormat('YY-MM-DD hh:mm:ss') }}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="targetUrl"
            header-align="center"
            width="100"
            align="left">
            <template slot-scope="props">
              <a class="value" target="_blank" :href="props.row.targetUrl">
                <el-button>查看</el-button>
              </a>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </el-col>
    </template>
  </el-row>
</template>

<script>
export default {
  name: 'tools-productaskinfo',
  data () {
    return {
      dataForm: {
        productId: '' // 602950702411
      },
      rules: {
        productId: [
          { required: true, message: '输入商品ID或商品链接', trigger: 'blur' }
        ]
      },
      dataList: [], // 问答
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      goodsInfo: {}, // 商品信息
      questionStatus: {},
      questionWords: [] // 关键词
    }
  },
  computed: {
    booLoading () {
      return Object.keys(this.goodsInfo).length
    }
  },
  methods: {
    // 获取数据列表
    getDataList () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return
        }
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/tb/getProductAskInfo'),
          method: 'POST',
          data: this.$http.adornData({
            'page': this.pageIndex,
            'size': this.pageSize,
            'productId': this.dataForm.productId
          })
        }).then(({ data }) => {
          if (data.status) {
            const { item, list, questionStatus, questionWords, total } = data.data
            this.goodsInfo = item
            this.dataList = list
            this.totalPage = total * 1
            this.questionStatus = questionStatus
            this.questionWords = questionWords
          } else {
            this.$message.error(data.msg)
          }
          this.dataListLoading = false
        })
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    }
  }
}
</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;
  text-align: center;
}

.TT-goods-info {
  display: flex;
  align-items: center;

  .left {
    width: 100px;
    height: 100px;
    margin-right: 10px;

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

  .right {
    p {
      margin-top: 4px;

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

.label {
  width: 6em;
  text-align: right;
  color: #666;
}

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

.TT-question-words {
  display: flex;
  margin: 20px auto;

  ul {
    flex: 1;
    display: flex;
    flex-flow: row wrap;

    li {
      padding: 4px 10px;
      margin-right: 10px;
      background: pink;
    }
  }
}

.TT-answer-wrap {
  padding-left: 10px;
  margin-top: 10px;

  li {
    display: flex;
    align-items: center;
    margin-top: 10px;

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

  a {
    display: flex;
    align-items: center;
  }

  .avatar-wrap {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;

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

  .nickname {
    color: #333;
    margin-left: 6px;
  }

  .answer {
    flex: 1;
    margin-left: 20px;
    word-break: break-all;
  }
}
</style>
