<template>
  <div class="page">
    <main-body>
      <template>
        <div class="middle">
          <title-content-with-bord class="trade_left">
            <template  v-slot:title>营业情况</template >
            <template  v-slot:content>
              <contrast-card v-for="data in mockData.yyqk" :title="data.title"
                             :lt="data.amount"
                             :lb="data.unit"
                             :rtl="data.title1"
                             :rtm="data.amount1"
                             :rtr="data.rate1"
                             :rbl="data.title2"
                             :rbm="data.amount2"
                             :rbr="data.rate2"/>
            </template >
          </title-content-with-bord>
          <container-with-bord class="trade_middle">
            <card style="margin-top: 10px; width: 80%; height: 20%; position: relative;">
              <template>
                <title-content v-for="data in mockData.sr" style="width: 33.3%; text-align: center; float:left;">
                  <template v-slot:title>
                    {{ data.title }}
                  </template>
                  <template v-slot:content>
                    <num-with-r-b-mark>
                      <template v-slot:num>{{ data.value }}</template>
                      <template v-slot:unit>万元</template>
                    </num-with-r-b-mark>
                  </template>
                </title-content>
              </template>
            </card>
            <div id="main_bar_chart" style="width: 897px; margin: auto; height: 350px;"/>
          </container-with-bord>
          <title-content-with-bord class="trade_right">
            <template  v-slot:title>账款情况</template >
            <template  v-slot:content>
              <contrast-card v-for="data in mockData.zkqk" :title="data.title"
                             :lt="data.amount"
                             :lb="data.unit"
                             :rtl="data.title1"
                             :rtm="data.amount1"
                             :rtr="data.rate1"
                             :rbl="data.title2"
                             :rbm="data.amount2"
                             :rbr="data.rate2"/>
            </template >
          </title-content-with-bord>
        </div>
        <div class="middle">
          <div class="content trade_left" style="cursor: pointer;">
            <!--左上边框-->
            <div class="t_line_box">
              <i class="t_l_line"></i>
              <i class="l_t_line"></i>
            </div>
            <!--右上边框-->
            <div class="t_line_box">
              <i class="t_r_line"></i>
              <i class="r_t_line"></i>
            </div>
            <!--左下边框-->
            <div class="t_line_box">
              <i class="l_b_line"></i>
              <i class="b_l_line"></i>
            </div>
            <!--右下边框-->
            <div class="t_line_box">
              <i class="r_b_line"></i>
              <i class="b_r_line"></i>
            </div>
            <div class="main_title">
              <img src="img/t_1.png" alt="">
              湖南省货运收入
            </div>
            <div id="chart_1" class="chart" style="width:100%;height: 280px;"></div>
          </div>
          <div class="trade_middle" style="border: none;box-shadow: none;">
            <container-with-bord style="height: calc(50% - 6px); width: 100%; margin-bottom: 12px;"></container-with-bord>
            <container-with-bord style="height: calc(50% - 6px); width: 100%;">
              <div style="width: 100%; height: 50%;">
                <card style="width: 32%; margin: 5px calc(4%/6); height: calc(100% - 10px); position: relative; float: left">
                  <title-content style="text-align: center; float:left; width: 100%;">
                    <template v-slot:title>
                      当日订单
                    </template>
                    <template v-slot:content>
                      <num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
                        <template v-slot:num>2,000</template>
                        <template v-slot:unit>万吨</template>
                      </num-with-r-b-mark>
                      <num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
                        <template v-slot:num>20,000</template>
                        <template v-slot:unit>万元</template>
                      </num-with-r-b-mark>
                    </template>
                  </title-content>
                </card>
                <card style="width: 32%; margin: 5px calc(4%/6); height: calc(100% - 10px); position: relative; float: left">
                  <title-content style="text-align: center; float:left; width: 100%;">
                    <template v-slot:title>
                      当日完成量
                    </template>
                    <template v-slot:content>
                      <num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
                        <template v-slot:num>2,000</template>
                        <template v-slot:unit>万吨</template>
                      </num-with-r-b-mark>
                      <num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
                        <template v-slot:num>20,000</template>
                        <template v-slot:unit>万元</template>
                      </num-with-r-b-mark>
                    </template>
                  </title-content>
                </card>
                <card style="width: 32%; margin: 5px calc(4%/6); height: calc(100% - 10px); position: relative; float: left">
                  <title-content style="text-align: center; float:left; width: 100%;">
                    <template v-slot:title>
                      余量
                    </template>
                    <template v-slot:content>
                      <num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
                        <template v-slot:num>2,000</template>
                        <template v-slot:unit>万吨</template>
                      </num-with-r-b-mark>
                      <num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
                        <template v-slot:num>20,000</template>
                        <template v-slot:unit>万元</template>
                      </num-with-r-b-mark>
                    </template>
                  </title-content>
                </card>
              </div>
              <div style="width: 100%; height: 50%;">
                <card style="width: 32%; margin: 5px 9%; height: calc(100% - 10px); position: relative; float: left">
                  <title-content style="text-align: center; float:left; width: 100%;">
                    <template v-slot:title>
                      消失客户
                    </template>
                    <template v-slot:content>
                      <num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
                        <template v-slot:num>2,000</template>
                        <template v-slot:unit>万吨</template>
                      </num-with-r-b-mark>
                      <num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
                        <template v-slot:num>20,000</template>
                        <template v-slot:unit>万元</template>
                      </num-with-r-b-mark>
                    </template>
                  </title-content>
                </card>
                <card style="width: 32%; margin: 5px 9%; height: calc(100% - 10px); position: relative; float: left">
                  <title-content style="text-align: center; float:left; width: 100%;">
                    <template v-slot:title>
                      新增客户
                    </template>
                    <template v-slot:content>
                      <num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
                        <template v-slot:num>2,000</template>
                        <template v-slot:unit>万吨</template>
                      </num-with-r-b-mark>
                      <num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
                        <template v-slot:num>20,000</template>
                        <template v-slot:unit>万元</template>
                      </num-with-r-b-mark>
                    </template>
                  </title-content>
                </card>
              </div>


            </container-with-bord>
          </div>

          <div class="content trade_right"><!--左上边框-->
            <div class="t_line_box">
              <i class="t_l_line"></i>
              <i class="l_t_line"></i>
            </div>
            <!--右上边框-->
            <div class="t_line_box">
              <i class="t_r_line"></i>
              <i class="r_t_line"></i>
            </div>
            <!--左下边框-->
            <div class="t_line_box">
              <i class="l_b_line"></i>
              <i class="b_l_line"></i>
            </div>
            <!--右下边框-->
            <div class="t_line_box">
              <i class="r_b_line"></i>
              <i class="b_r_line"></i>
            </div>
            <div class="main_title">
              <img src="img/t_1.png" alt="">
              湖南省货运收入
            </div>
            <div id="chart_1" class="chart" style="width:100%;height: 280px;"></div>
          </div>
        </div>
      </template>
    </main-body>
  </div>
</template>
<script>
import TitleContentWithBord from "./components/container/title-content-with-bord.vue";
import InfoCard from "./components/card/info-card.vue";
import ContrastCard from "./components/card/contrast-card.vue";
import * as echarts from "echarts";
import TitleContent from "./components/container/title-content.vue";
import NumWithRBMark from "./components/layout/num-with-r-b-mark.vue";
import Card from "./components/card/card.vue";
import ContainerWithBord from "./components/container/container-with-bord.vue";
import MainBody from "./components/body/main-body.vue";
export default {
  components: {
    MainBody,
    ContainerWithBord, TitleContentWithBord, Card, NumWithRBMark, TitleContent, ContrastCard, InfoCard},
  data() {
    return {
      constants: {},
      mockData:{
        yyqk:{
          yye:{
            title:"营业额",
            amount:"20,303",
            unit:"万元",
            title1:"昨天",
            amount1:"21,000",
            rate1:"-3.32%",
            title2:"上月",
            amount2:"20，000",
            rate2:"+4.92%",
          },
          cb:{
            title:"成本",
            amount:"10,303",
            unit:"万元",
            title1:"昨日",
            amount1:"11,000",
            rate1:"-2.68%",
            title2:"上月",
            amount2:"10,000",
            rate2:"+5.71%",
          },
          ml:{
            title:"毛利",
            amount:"10,000",
            unit:"万元",
            title1:"昨日",
            amount1:"10,000",
            rate1:"0.00%",
            title2:"上月",
            amount2:"10,000",
            rate2:"0.00%",
          },
        },
        zkqk:{
          yszk:{
            title:"应收账款",
            amount:"20,303",
            unit:"万元",
            title1:"昨天",
            amount1:"21,000",
            rate1:"-3.32%",
            title2:"上月",
            amount2:"20，000",
            rate2:"+4.92%",
          },
          yfzk:{
            title:"应付账款",
            amount:"10,303",
            unit:"万元",
            title1:"昨日",
            amount1:"11,000",
            rate1:"-2.68%",
            title2:"上月",
            amount2:"10,000",
            rate2:"+5.71%",
          },
          zsye:{
            title:"账上余额",
            amount:"10,000",
            unit:"万元",
            title1:"昨日",
            amount1:"10,000",
            rate1:"0.00%",
            title2:"上月",
            amount2:"10,000",
            rate2:"0.00%",
          },
        },
        sr:[
          {
            title:'累计营业收入（当年）',
            value:'20,303',
          },
          {
            title:'应收款（财务）',
            value:'20,303',
          },
          {
            title:'应收款（营销）',
            value:'20,303',
          },
        ],
        barChart:{
          textStyle: {color: "#fff"},
          tooltip: {},
          xAxis: {
            data: ['未结算未开票', '已结算未开票', '已开票未收款', '应收款', '已开票已收款']
          },
          yAxis: {},
          series: [
            {
              name: '开票详情',
              type: 'bar',
              data: [500, 300, 500, 1001, 319],
              color: "#7f83f7",
              label: {
                show: true,
                position: 'top',
                color: "#fff",
              },
            }
          ]
        },
      }
    };
  },
  methods: {
    drawMainBarChart(){
      let myChart = echarts.init(document.getElementById('main_bar_chart'));
      myChart.setOption(this.mockData.barChart);
    }
  },
  mounted() {
    this.drawMainBarChart();
  }
};
</script>
<style scoped lang="css" src="./assets/index.css"/>
