<template>
  <div class="ele-body">
    <div class="box-content">
      <div class="box-item box-content-1">
        <div class="box-card">
          <div class="box-card-title">
            <span class="box-card-title-img box-card-title-img-1"></span>
            <span>商机统计</span>
          </div>
          <div class="box-card-num">
            <span>商机数量（个）</span>
            <span>18</span>
          </div>
          <div class="box-card-num">
            <span>商机总额（元）</span>
            <span>500000</span>
          </div>
        </div>
        <div class="box-card">
          <div class="box-card-title">
            <span class="box-card-title-img box-card-title-img-2"></span>
            <span>销售统计</span>
          </div>
          <div class="box-card-num">
            <span>销售数量（个）</span>
            <span>33</span>
          </div>
          <div class="box-card-num">
            <span>销售总额（元）</span>
            <span>890000</span>
          </div>
        </div>
        <div class="box-card">
          <div class="box-card-title">
            <span class="box-card-title-img box-card-title-img-3"></span>
            <span>需求统计</span>
          </div>
          <div class="box-card-num">
            <span>需求数量（个）</span>
            <span>33</span>
          </div>
          <div class="box-card-num">
            <span>需求总额（元）</span>
            <span>690000</span>
          </div>
        </div>
        <div class="box-card">
          <div class="box-card-title">
            <span class="box-card-title-img box-card-title-img-3"></span>
            <span>采购统计</span>
          </div>
          <div class="box-card-num">
            <span>采购数量（个）</span>
            <span>33</span>
          </div>
          <div class="box-card-num">
            <span>采购总额（元）</span>
            <span>690000</span>
          </div>
        </div>

      </div>
      <div class="box-item box-content-2">
        <el-card style="height: 100%;">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold">应收应付统计</span>

          </div>
          <div v-show="option.series.length" ref="eChart_dom" id="eChart_dom"></div>
          <el-empty v-show="!option.series.length" description=""></el-empty>
        </el-card>

      </div>
      <div class="box-item box-content-3">
        <el-card>
          <div slot="header" class="clearfix">
            <span style="font-weight: bold">采购订单进度情况</span>
          </div>
          <div>
            <ele-pro-table
              ref="table"
              :columns="columns"
              :need-page="false"
              :toolkit="[]"
              style="padding: 10px"
              height="calc(28.5vh)"
              :datasource="datasource"
              cache-key="systemHomeTable5">

            </ele-pro-table>
          </div>
        </el-card>
      </div>
      <div class="box-item box-content-4">
        <el-card>
          <div slot="header" class="clearfix">
            <span style="font-weight: bold">销售订单进度情况</span>
          </div>
          <div>
            <ele-pro-table
              ref="table"
              :columns="columns"
              :need-page="false"
              :toolkit="[]"
              style="padding: 10px"
              height="calc(28.5vh)"
              :datasource="datasource"
              cache-key="systemHomeTable5">

            </ele-pro-table>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";

export default {
  name: "index",
  computed:{
    columns(){
      return [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'processInstance.processTypeName',
          label: '类型',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 120
        },
        {
          prop: 'processInstance.name',
          label: '编码',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 200
        },
        {
          prop: 'name',
          label: '名称',
          align: 'center',
          slot: 'name',

          showOverflowTooltip: true,
          minWidth: 200
        },
        {
          prop: 'processInstance.startUserNickname',
          label: '进度',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 120
        }
      ]
    }
  },
  data() {
    return {
      datasource: [],
      option: {
        tooltip: {
          trigger: 'axis',
          formatter: function (params, ticket, callback) {
            let div = ''
            params.forEach(item => {
              div += ` <div><span style="border: 8px solid ${item.color}; background: ${item.color};display: inline-block"> </span> ${item.seriesName}：${item.value} <span>(个)</span></div>`
            })
            let totals = params.reduce((pre, cur) => {
              pre += cur.value
              return pre
            }, 0)
            let dom = ` <div style="margin-bottom: 8px"><span>${params[0].axisValueLabel + '项目完成总数'}</span><span style="color: #00afff;font-weight: bold"> ${totals} </span><span>(个)</span></div>`
            dom += div
            return dom;
          }
        },
        legend: {
          selectedMode: false,
          top: 'bottom',
        },
        grid: {
          left: 40,
          right: 30,
          top: 10,
          bottom: 60
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              // 网格线的样式，可以定义颜色，宽度等
              color: '#e8e7e7',
              type: 'dotted' // 设置为虚线
            }
          },
          type: 'value'
        },
        xAxis: {
          axisLine: {
            // 网格线的样式，可以定义颜色，宽度等

            lineStyle: {
              color: '#cbcbcb',
            }
          },
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        series: [],
      },
      eChart: null,
    }
  },
  created() {
    this.getProjectsStatisticsByMonthAPI();
  },
  methods:{
    //获取项目类型不同月份统计数据
    async getProjectsStatisticsByMonthAPI() {
      // let data = await selectProjectsStatisticsByMonthAPI()
      // let projectTypeList = Object.keys(data)
      // let projectMonthList = Object.values(data).map(i => Object.values(i))
      // this.option.series = projectTypeList.map((type, index) => {
      //   return {
      //     name: this.getDictV('pro_projects_type', type),
      //     type: 'bar',
      //     stack: 'total',
      //     barWidth: '30%',
      //     // label: {
      //     //   show: true,
      //     //   formatter: (params) => params.value
      //     // },
      //     data: projectMonthList[index]
      //   };
      // });
      // this.initMonthEChart();
    },
    //初始化echarts
    initMonthEChart() {
      this.$nextTick(() => {
        let eChartDom = this.$refs.eChart_dom;
        this.eChart = echarts.init(eChartDom);
        this.eChart.setOption(this.option);
      });
    },
  }
}
</script>


<style scoped lang="scss">
.ele-body {
  height: 100%;
  width: 100%;
  .box-content {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-between;
    .box-item {
      width: 49.5%;
      height: 49.5%;

    }
    .box-content-1 {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: center;

      .box-card{
        color: #fff;
        padding:  20px;
        background-image: url("~@/assets/home-card.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 50%;
        height: 50%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        .box-card-title{
          display: flex;
          align-items: center;
          font-size: 24px;
          .box-card-title-img{
            display: inline-block;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 24px;
            height: 24px;
            margin-right: 8px;

          }

        }
        .box-card-num{
          display: flex;
          align-items: center;
          span{
            display: inline-block;
            font-size: 16px;
            flex: 1;
          }
          span:first-child{
            color: #E6FFFFFF;
          }
          span:last-child{
            font-size: 30px;

          }
        }
        .box-card-title-img-1{
          background-image: url("~@/assets/home-icon-1.png");
        }
        .box-card-title-img-2{
          background-image: url("~@/assets/home-icon-2.png");
        }
        .box-card-title-img-3{
          background-image: url("~@/assets/home-icon-3.png");
        }
      }
    }
  }
}
.el-card + .el-card {
  margin-top: 0;
}
</style>
