<template>
  <div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="日期类型">
          <el-select
            style="margin-right: 20px"
            v-model="formInline.dateType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in [
                { value: '1', label: '日' },
                { value: '2', label: '周' },
                { value: '3', label: '月' },
                { value: '4', label: '年' },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="getList" type="primary">查询</el-button>
          <el-button @click="batchExport" type="success">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="product">
      <div style="font-size: 18px">商品整体概况</div>
      <div class="stat-list">
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">在售商品数</div>
            <div style="font-size: 20px" class="stat-value">
              {{ productList.onSaleNum }}
            </div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">被访问商品数</div>
            <div style="font-size: 20px" class="stat-value">
              {{ productList.viewNum }}
            </div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">折扣商品数</div>
            <div style="font-size: 20px" class="stat-value">
              {{ productList.discountNum }}
            </div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">预售商品数</div>
            <div style="font-size: 20px" class="stat-value">
              {{ productList.preSellNum }}
            </div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">商品浏览量</div>
            <div style="font-size: 20px" class="stat-value">
              {{ productList.viewTimes }}
            </div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">商品浏览人数</div>
            <div style="font-size: 20px" class="stat-value">
              {{ productList.viewPeople }}
            </div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">商品加购件数</div>
            <div style="font-size: 20px" class="stat-value">
              {{ productList.onCartNum }}
            </div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">商品点赞件数</div>
            <div style="font-size: 20px" class="stat-value">
              {{ productList.likeCount }}
            </div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">商品支付件数</div>
            <div style="font-size: 20px" class="stat-value">
              {{ productList.payCount }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="
        padding: 10px;
        border: 1px solid #ccc;
        margin-top: 20px;
      "
    >
      <div style="font-size: 18px; margin-bottom: 40px">商品排行榜</div>
      <el-row style="" type="flex" justify="space-between">
        <el-col :span="11"
          ><div class="grid-content bg-purple">商品访客数TOP</div>
          <el-table
            :data="productList.viewPeopleList"
            border
            style="width: 100%"
            height="35vh"
          >
            <el-table-column
              align="center"
              type="index"
              label="排名"
              width="50"
            >
            </el-table-column>
            <el-table-column prop="date" label="商品名称">
              <template slot-scope="scope">
                <div style="display: flex; align-items: center">
                  <div>
                    <el-image
                      style="width: 60px; height: 60px"
                      :src="scope.row.productImg"
                      :preview-src-list="[scope.row.productImg]"
                    >
                    </el-image>
                  </div>
                  <div style="margin-left: 10px; color: blue">
                    {{ scope.row.productName }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="sortData"
              label="访客数"
              width="140"
            >
            </el-table-column> </el-table
        ></el-col>
        <el-col :span="11"
          ><div class="grid-content bg-purple">商品支付转化率TOP</div>
          <el-table
            :data="productList.payConversionList"
            border
            style="width: 100%"
            height="35vh"
          >
            <el-table-column
              align="center"
              type="index"
              label="排名"
              width="50"
            >
            </el-table-column>
            <el-table-column prop="date" label="商品名称">
              <template slot-scope="scope">
                <div style="display: flex; align-items: center">
                  <div>
                    <el-image
                      style="width: 60px; height: 60px"
                      :src="scope.row.productImg"
                      :preview-src-list="[scope.row.productImg]"
                    >
                    </el-image>
                  </div>
                  <div style="margin-left: 10px; color: blue">
                    {{ scope.row.productName }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="sortData"
              label="支付转化率（%）"
              width="140"
            >
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row style="margin:20px 0" type="flex" justify="space-between">
        <el-col :span="11"
          ><div class="grid-content bg-purple">销售量TOP</div>
          <el-table
            :data="productList.saleConutList"
            border
            style="width: 100%"
            height="35vh"
          >
            <el-table-column
              align="center"
              type="index"
              label="排名"
              width="50"
            >
            </el-table-column>
            <el-table-column prop="date" label="商品名称">
              <template slot-scope="scope">
                <div style="display: flex; align-items: center">
                  <div>
                    <el-image
                      style="width: 60px; height: 60px"
                      :src="scope.row.productImg"
                      :preview-src-list="[scope.row.productImg]"
                    >
                    </el-image>
                  </div>
                  <div style="margin-left: 10px; color: blue">
                    {{ scope.row.productName }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="sortData"
              label="销售量"
              width="140"
            >
            </el-table-column> </el-table
        ></el-col>
        <el-col :span="11"
          ><div class="grid-content bg-purple">销售额TOP</div>
          <el-table
            :data="productList.saleMoneyList"
            border
            style="width: 100%"
            height="35vh"
          >
            <el-table-column
              align="center"
              type="index"
              label="排名"
              width="50"
            >
            </el-table-column>
            <el-table-column prop="date" label="商品名称">
              <template slot-scope="scope">
                <div style="display: flex; align-items: center">
                  <div>
                    <el-image
                      style="width: 60px; height: 60px"
                      :src="scope.row.productImg"
                      :preview-src-list="[scope.row.productImg]"
                    >
                    </el-image>
                  </div>
                  <div style="margin-left: 10px; color: blue">
                    {{ scope.row.productName }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="sortData"
              label="销售额"
              width="140"
            >
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row style="" type="flex" justify="space-between">
        <el-col :span="11"
          ><div class="grid-content bg-purple">回复率TOP</div>
          <el-table
            :data="productList.repurchaseList"
            border
            style="width: 100%"
            height="35vh"
          >
            <el-table-column
              align="center"
              type="index"
              label="排名"
              width="50"
            >
            </el-table-column>
            <el-table-column prop="date" label="商品名称">
              <template slot-scope="scope">
                <div style="display: flex; align-items: center">
                  <div>
                    <el-image
                      style="width: 60px; height: 60px"
                      :src="scope.row.productImg"
                      :preview-src-list="[scope.row.productImg]"
                    >
                    </el-image>
                  </div>
                  <div style="margin-left: 10px; color: blue">
                    {{ scope.row.productName }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="sortData"
              label="回复率（%）"
              width="140"
            >
            </el-table-column> </el-table
        ></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        dateType: "1",
      },
      productList: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.$api.dataCenter.productAnalysis(this.formInline).then((res) => {
        this.productList = res.data.data;
        console.log(res);
      });
    },
    batchExport() {
      console.log("导出");
    },
  },
};
</script>

<style lang="scss" scoped>
.product {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ccc;
}
.stat-list {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  flex-wrap: wrap;
  //   margin-top: 20px;
  padding: 10px;
  //   border: 1px solid #ccc;
}
.stat-item {
  width: 25%;
  margin: 30px 30px;
  display: flex;
  align-items: center;
}
.stat-icon {
  background: rgb(99 152 252);
  width: 60px;
  height: 60px;
  border-radius: 3px;
}
.stat-right {
  margin-left: 12px;
  font-size: 18px;
}
.stat-title {
  //   color: #969696;
  font-weight: 600;
  margin-bottom: 10px;
}
.grid-content {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
}
</style>