<template>
  <div class="market_data_page">
    <div class="data_list">
      <ul>
        <li v-for="(item,index) in dataList" :key="index">
          <p>{{ item.value }}</p>
          <p>{{ item.name }} <i class="el-icon-warning-outline" :title="item.tips"></i></p>
        </li>
      </ul>
    </div>

    <div v-if="false" class="visit_data">
      <div class="item_box">
        <p class="echart_title">访问分布情况</p>
        <map-chart :mapdata="mapData" />
      </div>
      <div class="item_box">
        <div class="item_box-chart">
          <p class="echart_title">访问占比</p>
          <div class="chart_box"><cake :chart-data="cakeData" /></div>
          <div class="chart_box"><cake :chart-data="cakeData" /></div>
        </div>
        <div class="item_box-chart">
          <p class="echart_title">终端分布</p>
          <div class="chart_box"><cake :chart-data="cakeData" /></div>
          <div class="chart_box"><cake :chart-data="cakeData" /></div>
        </div>
      </div>
    </div>

    <div class="tendency_data">
      <div class="item_box">
        <p class="echart_title">趋势图</p>
        <el-tabs v-model="activeName">
          <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.name" :name="item.id" />
        </el-tabs>
        <bar :chart-data="tendencyData" style="height: calc(100% - 54px)" />
      </div>
      <div class="item_box">
        <p class="title">
          商家成交排行榜
          <span>成交额/元</span>
        </p>
        <ul v-if="merchantRank.length">
          <li v-for="(item,index) in merchantRank" :key="index">
            <p>
              <span>{{ index + 1 }}</span>
            </p>
            <p>{{ item.storeName }}</p>
            <p>{{ item.tradeAmount / 100 }}</p>
          </li>
        </ul>
        <div
          v-else
          class="empty"
        >
          <img
            :src="empty"
            alt=""
          />
          <p>暂无数据</p>
        </div>
      </div>
    </div>

    <div v-if="false" class="sale_data">
      <div class="item_box">
        <p class="echart_title">销售类别分类</p>
        <pie :chart-data="saleData" />
      </div>
      <div class="item_box">
        <p class="title">
          畅销商品排行榜
          <span>售卖数/个</span>
        </p>
        <ul>
          <li v-for="(item,index) in rankList" :key="index">
            <p>
              <span>{{ index + 1 }}</span>
            </p>
            <p>{{ item.name }}</p>
            <p>{{ item.value }}</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="merchants_detail">
      <p>
        商家数据明细
        <span v-if="false">导出</span>
      </p>
      <el-table
        :data="tableData.statItemDTOList"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="storeName"
          label="店铺名称"
        />
        <el-table-column
          prop="tenantCode"
          label="店铺编码"
        />
        <el-table-column
          prop="tradeProductCount"
          :formatter="getNum"
          label="参与商品数 (件)"
        />
        <el-table-column
          prop="tradeUserCount"
          :formatter="getNum"
          label="访客数 (人)"
        />
        <el-table-column
          prop="orderCount"
          :formatter="getNum"
          label="订单数 (笔)"
        />
        <el-table-column
          prop="payedUserCount"
          :formatter="getNum"
          label="成交客户数 (笔)"
        />
        <el-table-column
          :formatter="getPrice"
          prop="pricePerUser"
          label="客单件 (元)"
        />
        <el-table-column
          :formatter="getPrice"
          prop="tradeAmount"
          label="成交总额 (元)"
        />
      </el-table>
      <pagination
        v-show="tableData.total > 0"
        :limit.sync="formParams.pageSize"
        :page.sync="formParams.pageIndex"
        :total="Number(tableData.total)"
        @pagination="fetch"
      />
    </div>
  </div>
</template>

<script>
import empty from '@/assets/empty.png'
import Marketing from '@/api/Marketing'
import Pagination from '@/components/Pagination'
import bar from '@/components/marketEchart/bar'
import pie from '@/components/marketEchart/pie'
import echarts from 'echarts'
import mapChart from '@/components/marketEchart/map'
import cake from '@/components/marketEchart/cake'
export default {
  components: {
    Pagination,
    bar,
    pie,
    cake,
    mapChart
  },
  props: {
    params: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      empty: empty,
      dataList: [
        { name: '成交总额(元)', value: 0, tips: '活动开始之后参与活动的商品总成交额', field: 'tradeAmout' },
        { name: '支付订单数(笔)', value: 0, tips: '活动期间活动商品带来的支付成功订单数，不包括退款订单', field: 'tradeOrderCount' },
        { name: '支付客户数(人)', value: 0, tips: '对活动商品进行支付的客户数', field: 'tradeUserCount' },
        { name: '参与商家数(家)', value: 0, tips: '本活动报名成功的商家数量', field: 'tradeTenantCount' },
        { name: '参与商品数(件)', value: 0, tips: '本活动报名中的商家所有的活动商品数，不按最小SKU算', field: 'tradeProductCount' }

      ],
      rankList: [
        { name: '阿里巴巴小店', value: '12321,3232' },
        { name: '阿里巴巴小店', value: '12321,3232' },
        { name: '阿里巴巴小店', value: '12321,3232' },
        { name: '阿里巴巴小店', value: '12321,3232' },
        { name: '阿里巴巴小店', value: '12321,3232' },
        { name: '阿里巴巴小店', value: '12321,3232' },
        { name: '阿里巴巴小店', value: '12321,3232' },
        { name: '阿里巴巴小店', value: '12321,3232' },
        { name: '阿里巴巴小店', value: '12321,3232' },
        { name: '阿里巴巴小店', value: '12321,3232' }

      ],
      merchantRank: [],
      tabList: [
        { name: '销售额', id: 'sale' }
        // { name: '访问量', id: 'visit' }
      ],
      activeName: 'sale',
      tendencyData: {
        xData: [],
        series: {
          type: 'bar',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#74D6FF'
              }, {
                offset: 1,
                color: '#3A68F1'
              }])
            }
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              color: '#fff',
              formatter: function (p) {
                return p.value || ''
              }
            }
          },
          data: [],
          barMaxWidth: '20px'
        }
      },
      saleData: {
        series: {
          data: [
            { name: '家用电器', value: 4544 },
            { name: '食用酒水', value: 4544 },
            { name: '个护健康', value: 4544 },
            { name: '服饰箱包', value: 4544 },
            { name: '母婴产品', value: 4544 },
            { name: '其它', value: 4544 }
          ]
        }
      },
      cakeData: {
        series: {
          data: [
            { name: '湖北省', value: 75 },
            { name: '广东省', value: 20 }
          ]
        }
      },
      mapData: [{ fProvince: "北京", fCity: '北京', fVisitCount: 199 }],
      formParams: {
        pageSize: 10,
        pageIndex: 1
      },
      tableData: {

      }
    }
  },
  created() {
    this.getDetail()
    this.findTenantStatDetail()
  },
  methods: {
    async getDetail() {
      const arr = this.dataList
      const res = await Marketing.getDetail(this.params.id)
      const resData = res.data
      if (resData.code === 0) {
        const d = resData.data
        const x = []
        const y = []
        arr.map(item => {
          item.value = d[item.field] || 0
          if (item.field === 'tradeAmout') {
            item.value /= 100
          }
        })
        if (d.promotionStatDayDTOList && d.promotionStatDayDTOList.length) {
          d.promotionStatDayDTOList.forEach(item => {
            x.push(item.statDay.replace(/-/, '/'))
            y.push(item.tradeAmount / 100)
          })
        }
        this.tendencyData.xData = x
        this.tendencyData.series.data = y
        this.merchantRank = d.promotionTenantRankDTOList || []
      }
    },
    async findTenantStatDetail() {
      const res = await Marketing.findTenantStatDetail(Object.assign({}, this.formParams, { promotionId: this.params.id }))
      const resData = res.data
      if (resData.code === 0) {
        this.tableData = resData.data
      }
    },
    fetch() {
      this.findTenantStatDetail()
    },
    getPrice(row, item, value) {
      return value / 100
    },
    getNum(row, item, value) {
      return value || 0
    }
  }
}
</script>

<style lang='less' scoped>
.market_data_page {
  .data_list {
    box-shadow:0px 0px 10px 0px rgba(51,51,51,0.15);
    border-radius:4px;
    ul {
      height: 140px;
      overflow: hidden;
      list-style: none;
      li {
        float: left;
        width: 20%;
        text-align: center;
        p {
          margin: 0;
          padding: 0;
          i {
            color: red;
          }
          &:nth-child(1) {
            font-size:40px;
            color:rgba(255,173,17,1);
            font-weight: 600;
            line-height: 100px;
          }
           &:nth-child(2) {
             font-size:18px;
             color:rgba(51,51,51,1);
           }
        }
      }
    }
  }
  .visit_data {
    overflow: hidden;
    .item_box {
      position: relative;
      height: 520px;
      width: calc(50% - 10px);
      margin: 10px 0;
      float: left;
      box-sizing: border-box;
      border-radius:4px;
      &:nth-child(1) {
        margin-right: 20px;
        border-left: 1px solid rgba(51,51,51,0.15);
        box-shadow:0px 0px 10px 0px rgba(51,51,51,0.15);
      }
      &:nth-child(2) {
        .item_box-chart {
          overflow: hidden;
          position: relative;
          height: calc(50% - 10px);
          margin-bottom: 20px;
          box-shadow:0px 0px 10px 0px rgba(51,51,51,0.15);
          border-right: 1px solid rgba(51,51,51,0.15);
          .chart_box {
            width: 50%;
            height: 100%;
            float: left;
          }
        }
      }
    }
  }
  .tendency_data, .sale_data {
    overflow: hidden;
    .item_box {
      position: relative;
      float: left;
      height: 520px;
      margin: 10px 0;
      box-shadow:0px 0px 10px 0px rgba(51,51,51,0.15);
      border-radius:4px;
      box-sizing: border-box;
      &:nth-child(1) {
        width: calc(60% - 20px);
        margin-right: 20px;
        border-left: 1px solid rgba(51,51,51,0.15);
      }
      &:nth-child(2) {
        width: 40%;
        border-right: 1px solid rgba(51,51,51,0.15);
        padding: 20px;
        p.title {
          font-size:18px;
          color: #333333;
          span {
            font-size:16px;
            float: right;
          }
        }
        ul {
          li {
            display: flex;
            p {
              flex: 2;
              margin: 0;
              margin-bottom: 20px;
              &:nth-child(1) {
                span {
                  display: inline-block;
                  width:26px;
                  height:26px;
                  line-height: 26px;
                  text-align: center;
                  background:rgba(221,221,221,1);
                  border-radius:50%;
                }

              }
              &:nth-child(2) {
                flex: 7;
              }
              &:nth-child(3) {
                flex: 5;
              }
            }
            &:nth-child(-n + 3) {
              p {
                &:nth-child(1) {
                  span {
                    background:rgba(255,121,17,1);
                    color: #fff;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .tendency_data {
    .item_box {
      &:nth-child(1) {
        padding: 50px 80px 0;
      }
    }
  }

  .merchants_detail {
    margin: 10px 0;
    padding: 10px;
    box-shadow:0px 0px 10px 0px rgba(51,51,51,0.15);
    min-height: 100px;
    border-radius:4px;
    p {
      font-size:18px;
      color: #333333;
      line-height: 38px;
      height:38px;
      span {
        display: inline-block;
        float: right;
        color: #fff;
        text-align: center;
        width:60px;
        height:38px;
        font-size:14px;
        background:rgba(58,104,241,1);
        border-radius:4px;
      }
    }
  }

  .empty {
    // height: calc(100% - 50px);

    img {
      width:80px;
      height:80px;
      margin: 100px auto 10px;
      display: block;
    }
    p {
      text-align: center;
      color: #333333;
    }
  }

  /deep/ .el-table {
    th {
        background: #EEF3FF;
        color:#333333;
        font-size:16px;
        font-weight: 400;
        border-color: #E0E5EB;
        text-align: center;
    }
    td {
      font-size: 14px;
      text-align: center;
      color: #666666;
    }
  }

  .echart_title {
    font-size:18px;
    position: absolute;
    top: 30px;
    left: 20px;
    margin: 0;
    padding: 0;
  }
}

/deep/ .el-tabs {

}
</style>
