<template>
  <el-row :gutter="40" class="panel-group">
    <!-- 待办事项： -->
     <el-col
      :xs="24"
      :sm="24"
      :md="24"
      :lg="11"
      :xl="11"
      style="margin-bottom:20px"
    >
      <el-card shadow="never" style="height:450px;position: relative;">
        <div class="data-title">
          <span class="span1">待办事项</span>
        </div>
          <el-table
            v-loading="listLoading"
            :data="tableData"
            border
            style="width: 100%"
          >
            <template slot="empty">
              <p>{{ dataText }}</p>
            </template>
            <el-table-column
              show-overflow-tooltip
              prop="orderCode"
              label="订单编号"
            />
            <el-table-column
              show-overflow-tooltip
              prop="goodsName"
              label="商品名称"
            />
            <el-table-column
              prop="orderState"
              label="订单状态"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-tag :type="scope.row.orderState | statusFilter">
                  {{ scope.row.orderState | textFilter }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{ row }">
                <el-button type="text" @click="see(row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            :current-page="queryForm.pageNo"
            :page-size="queryForm.pageSize"
            :layout="layout"
            :total="count"
            @current-change="handleCurrentChange"
            style="left: 50%;position: absolute;transform: translateX(-50%);bottom: 20px;"
          />
      </el-card>
    </el-col>

    <!-- 实时数据 -->
     <el-col
      :xs="24"
      :sm="24"
      :md="24"
      :lg="13"
      :xl="13"
      style="margin-bottom:20px"
    >
      <el-card shadow="never" style="height:450px;">
        <div class="data-title" style="justify-content:space-between;">
          <div>
              <span class="span1">实时数据</span>
              <span class="span2">更新时间：{{time}}</span>
          </div>
          <router-link
            :to="{ name: 'Operationmanual', query: { name: 'create' } }"
          >
          <el-button type="primary" size="small" style="display:block;">
            操作手册
          </el-button>
        </router-link>
        </div>
        <el-row :gutter="30">
          <el-col :span="10"><div class="grid-content bg-purple item">
            <img
              src="../../../../assets/images/icon1.png"
              class="data-icon"
            />
              <div>
                <span style="display:block;padding-bottom:20px;padding-top:5px;">收入金额 (元)</span>
                <span>{{getReal.incomeAmount}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="grid-content bg-purple item">
              <img
                src="../../../../assets/images/icon2.png"
                class="data-icon"
              />
              <div>
                <span style="display:block;padding-bottom:20px;padding-top:5px;">订单数</span>
                <span>{{getReal.orderNum}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="grid-content bg-purple item">
              <img
                src="../../../../assets/images/icon3.png"
                class="data-icon"
              />
              <div>
                <span style="display:block;padding-bottom:20px;padding-top:5px;">商品数量</span>
                <span>{{getReal.goodsNum}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="10"><div class="grid-content bg-purple item">
            <img
                  src="../../../../assets/images/icon4.png"
                  class="data-icon"
                />
                <div>
                  <span style="display:block;padding-bottom:20px;padding-top:5px;">访问量 (pv)</span>
                  <span>{{getReal.pv}}</span>
                </div>
            </div></el-col>
             <el-col :span="10"><div class="grid-content bg-purple item">
             <img
                  src="../../../../assets/images/icon5.png"
                  class="data-icon"
                />
                <div>
                  <span style="display:block;padding-bottom:20px;padding-top:5px;">访问数 (UV)</span>
                  <span>{{getReal.uv}}</span>
                </div>
            </div></el-col>
        </el-row>
      </el-card>
    </el-col>
    <el-col
      :xs="24"
      :sm="24"
      :md="24"
      :lg="24"
      :xl="24"
      style="margin-bottom:20px"
    >
      <el-card shadow="never">
        <div class="notice">
          <img src="../../../../assets/images/lb.png" />
          <span
            >戎归精选11月1日正式上线，试运营期间，免收平台服务费，开来瓜分第一波平台红利吧！</span
          >
        </div>
      </el-card>
    </el-col>
    <el-col
      :xs="24"
      :sm="24"
      :md="24"
      :lg="24"
      :xl="24"
      style="margin-bottom:20px"
    >
      <el-card shadow="never">
        <div class="data-title">
          <span class="span1">店铺数据</span>
          <template>
            <el-radio v-model="times" label="1" @change="handleChange">近7天</el-radio>
            <el-radio v-model="times" label="2">按月 </el-radio>
          </template>
          <template >
            <el-date-picker
              v-model="value1"
              type="month"
              size="small"
              format="yyyy - MM"
              value-format="yyyy - MM"
              v-show="isShow"
            >
            </el-date-picker>
            <el-button
              icon="el-icon-search"
              type="primary"
              size="small"
              @click="handSearch"
              style="margin-left:20px"
              v-show="isShow"
            >
              搜索
            </el-button>
            <el-button type="primary" size="small" @click="handleEmpty" v-show="isShow">
              清空
            </el-button>
          </template>
        </div>
         <div id="myChart" :style="{ width: width, height: height }" />
      </el-card>
    </el-col>
  </el-row>
</template>
<script>
// 引入基本模板
const echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
import { mapGetters } from "vuex";
import Cookies from "js-cookie";
import {Format} from "../../../../utils/validate"
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: "danger",
        1: "primary",
        2: "primary",
        3: "primary",
        4: "danger",
        5: "info",
        6: "info",
        7: "success",
      };
      return statusMap[status];
    },
    textFilter(status) {
      const statusMap = {
        1: "待退款",
        0: "待付款",
        2: "待发货",
        3: "已发货",
        4: "退款中",
        5: "已退款",
        6: "已取消",
        7: "已完成",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      time:Format("yyyy-MM-dd hh:mm:ss"),
      times: "1",
      width: "100%",
      height: "350px",
      value1: Format("yyyy - MM"),
      dataText:"暂无待代办事项",
      chartLine: "",
      isShow:false,
      queryForm: {
        pageNo: 1,
        pageSize: 5,
      },
      layout: "total, prev, pager, next, jumper",
      count: 0, // 商品总计
      tableData: [],
      listLoading: false,//loading加载
      getReal:{},
      values:[],
      orderTime:[], //x轴时间
      orderAmount:[],  //销售额
      orderNum:[] //订单数
    };
  },
  computed: {
    ...mapGetters({
      merchantsName: "merchantsName",
      merchantsId: "merchantsId",
    }),
  },
  watch:{
    times(newVal,oldVal){
      // console.log(newVal)
      if(newVal=='2'){
this.isShow=true
      }else{
        this.isShow=false
      }
      
    }

  },
  created(){
      this.init()
  },
  methods: {
    init() {
      return Promise.all([
        this.getGraphicData(),
        this.getRealTimeData(),
        this.getOrderData(),
      ]);
    },
    //获取图示数据
    getGraphicData() {
      const params = {
        type: "getGraphicData",
        data: {
          merchantsID: this.merchantsId,
          dateType: this.times,
          date: this.times=="2"?this.value1.replace(/\s*/g,''):''
        },
      };
       
      this.$http.post(this.$api.getGraphicData, params).then((res) => {
        this.orderTime=[]
        this.orderAmount=[]  //销售额
        this.orderNum=[]   //订单数
        if(res.values){
          // console.log("获取图示数据",res)
          res.values.forEach((item)=>{
            this.orderTime.push(item.orderTime)
            this.orderAmount.push(item.orderAmount)
            this.orderNum.push(item.orderNum)
          })
          this.getData()
        }
      });
    },
   getData(){
    this.chartLine = echarts.init(document.getElementById("myChart"));
    // 指定图表的配置项和数据
    var option = {
      tooltip: {
        // 设置tip提示
        trigger: "axis",
      },
      color: ["#409EFF"], // 设置区分（每条线是什么颜色，和 legend 一一对应）
      xAxis: {
        data:this.orderTime,
        boundaryGap: false,
        axisTick: {
          show: false,
        },
         axisLine: {
                onZero: false,
                lineStyle: {
                    color: "#409EFF"
                }
          },
      },
        yAxis: [
        {
            type: 'value',
            name: '销售额',
             nameTextStyle:{
               align:'right'

             },
            min: 0,
            max: 2500,
            interval: 500,
            axisLabel: {
                formatter: '{value}'
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: "#409EFF"
                }
          }
        },
        {
            type: 'value',
            name: '订单数',
             nameTextStyle:{
               align:'left'

             },
            min: 0,
            max: 50,
            interval: 10,
            axisLabel: {
                formatter: '{value}'
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: "#409EFF"
                }
          },
        }
    ],
      series: [
        {
          name: "销售额",
          data: this.orderAmount,
          type: "line",
          smooth: true,
          animationDuration: 2800,
          animationEasing: "quadraticOut",
          itemStyle: {
            normal: {
              color: "#409EFF",
              lineStyle: {
                color: "#409EFF",
                width: 2,
              },
            },
          },
        },
        {
          name: "订单数",
          data: this.orderNum,
          type: "line",
          smooth: true,
          animationDuration: 2800,
          animationEasing: "quadraticOut",
          itemStyle: {
            normal: {
              color: "#d14a61",
              lineStyle: {
                color: "#d14a61",
                width: 2,
              },
            },
          },
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    this.chartLine.setOption(option);
    },
    //实时数据
    getRealTimeData() {
      const params = {
        type: "getRealTimeData",
        data: {
          merchantsID: this.merchantsId,
        },
      };
      this.$http.post(this.$api.getRealTimeData, params).then((res) => {
        if (res) {
         this.getReal=res
        }
      });
    },
    //获取订单数据（待办事项）
    getOrderData() {
      const params = {
        type: "getOrderData",
        data: {
          merchantsID: this.merchantsId,
          pageNum: this.queryForm.pageNo,
        },
      };
      this.$http.post(this.$api.getOrderData, params).then((res) => {
        if (res) {
            this.count = parseInt(res.count)
            this.tableData = res.list
          } else {
            this.count = ''
            this.tableData = []
          }
      });
    },
    // 切换页码
    handleCurrentChange(e) {
      this.queryForm.pageNo = e;
      this.getOrderData();
    },
    //店铺数据 7天
    handleChange(e){
      this.getGraphicData()
    },
    //店铺数据 按月搜索
    handSearch() {
      this.getGraphicData();
    },
    //清空
    handleEmpty() {
      this.value1=Format("yyyy - MM")
      this.getGraphicData()
    },
    //根据订单号跳转到订单列表
    see(row) {
      // console.log(row)
       sessionStorage.setItem("orderCode",row.orderCode)  //订单号标识
       this.$router.push("/Ordermanagement/Orderlist")
    },
  }
};
</script>
<style lang="scss" scoped>
.panel-group {
  .p {
    display: flex;
    justify-content: space-between;
    line-height: 30px;
  }
}
::v-deep {
  .el-card__body {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
}
.data-title {
  display: flex;
  padding: 20px 0;
  align-items: center;
  .span1 {
    color: #2c3e50;
    font-size: 16px;
    padding-right: 30px;
    font-weight: bold;
  }
  .span2 {
    color: #666666;
    font-size: 14px;
  }
}
.data-num {
  .list {
    display: flex;
    flex-wrap: wrap;
  
    .item:not(last-child) {
      margin-right: 30px;
    }
  }
}
  .item {
      display: flex;
      background: #ffffff;
      box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.07);
      // width: 230px;
      padding: 16px;
      margin-bottom: 30px;
      img {
        width: 60px;
        height: 60px;
        margin-right: 20px;
      }
    }
.notice {
  display: flex;
  align-items: center;
  padding: 10px 0px 10px 0;
  color: #f79c42;
  img {
    margin-right: 20px;
  }
  .span1 {
    color: #2c3e50;
    font-size: 16px;
    padding-right: 30px;
    display: block;
    font-weight: bold;
  }
}
</style>
