<template>
  <div>
    <div class="title">选购商品</div>
    <table class="table" width="100%">
      <template v-for="(item, index) in goodsList" v-if="index%2==0">
        <tr>
          <td class="video-row" @click="goto(item.id)">
            <div class="row-line">
              <img :src="item.image" style="width: 400px; height: 400px"/>
              <div class="video-title">{{item.name}}</div>
              <div>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <div>
                      <el-statistic
                        group-separator=","
                        :precision="2"
                        :value="value2"
                        :title="title"
                      ></el-statistic>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div>
                      <el-statistic title="好评比">
                        <template slot="formatter">
                          456/2
                        </template>
                      </el-statistic>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div>
                      <el-statistic :value="like ? 5 : 1" title="星级">
                        <template slot="suffix">
              <span @click="like = !like" class="like">
                <i
                  class="el-icon-star-on"
                  style="color:red"
                  v-show="!!like"
                ></i>
                <i class="el-icon-star-off" v-show="!like"></i>
              </span>
                        </template>
                      </el-statistic>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </td>
          <!--添加td作为两行之间的间距，td中用&nbsp;进行占位-->
          <td class="line-bg">&nbsp;</td>
          <td v-if="index+1<goodsList.length" class="video-row"  @click="goto(goodsList[index+1].id,goodsList[index+1].title)">
            <div class="row-line">
              <img :src="goodsList[index+1].image" style="width: 400px; height: 400px"/>
              <div class="video-title">{{goodsList[index+1].name}}</div>
              <div>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <div>
                      <el-statistic
                        group-separator=","
                        :precision="2"
                        :value="value2"
                        :title="title"
                      ></el-statistic>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div>
                      <el-statistic title="好评比">
                        <template slot="formatter">
                          456/2
                        </template>
                      </el-statistic>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div>
                      <el-statistic :value="like ? 4 : 520" title="Feedback">
                        <template slot="suffix">
              <span @click="like = !like" class="like">
                <i
                  class="el-icon-star-on"
                  style="color:red"
                  v-show="!!like"
                ></i>
                <i class="el-icon-star-off" v-show="!like"></i>
              </span>
                        </template>
                      </el-statistic>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </td>
        </tr>
      </template>
    </table>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,

import {getDetailInfo, listInfo} from "@/api/product/info";

export default {
  name: "ShopProduct",
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"

    return {
      like: true,
      value1: 4154.564,
      value2: 1314,
      title: "近期下单",
      goodsList: [],
      shop: {}
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    getALlGoods(){
      listInfo().then(
        res => {
          console.log(res)
           this.goodsList = res.data.rows
        }
      )
    },
    goto(id){
      console.log(id)
      getDetailInfo(id).then(response => {
        console.log(response)
        this.shop = response.data;
        if (response && response.data){
          let routeData = this.$router.resolve({ path: '/gb', query: { shop: this.shop } });
          this.$router.push(routeData.route);
        }else {
          console.error("没有获取到表单数据")
        }
      });


    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.getALlGoods()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100%;
  padding: 20px 20px 20px 20px;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #2A333F;
  background-color: #f3f3f3;
  line-height: 22px;
}
.title {
  font-size: 14px;
  text-align: center;
  color:#091222;;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.table{
  width:100%;
}
.video-row{
  width: 48%;
  height: 160px;
  border-radius: 6px;
  text-align: center;
  .row-line{
    background: #FFFFFF;
  }
  img {
    width: 54px;
    height: 54px;
    margin: 35px 0 14px 0;
  }
}
.line-bg{
  width: 4%; //两列布局之间增加间距，HTML中添加&nbsp;占位
  background: #f3f3f3;
}
.video-title {
  margin-bottom: 15px;
  padding-bottom: 34px;
}
.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
</style>
