<template>
  <div class="main" @click="testClick">
    <div class="middle">
      <display-board class="trade_left" title="营业情况">
        <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
          <contrast-card v-for="data in mockData.yyqk" style="height: 28%;">
            <title-content-mark style="width: 40%;color: #369afa;float: left;" :title="data.title" :content="data.amount" :mark="data.unit"/>
            <div style="width: 60%; height: 100%; float:left; padding: 4% 4% 0 12%; line-height: 26px;; display: flex; align-items: center;">
              <table-column style="float: left;width: 25%;" :data="data.hb" name="title"/>
              <table-column style="float: left;width: 40%;" :data="data.hb" name="amount"/>
              <table-column style="float: left;width: 35%;" :data="data.hb" name="rate" :cell-style-function="cellStyleFunction"/>
<!--              <table-column style="float: left;width: 35%;" :data="data.hb" name="rate" cell-style-js="var res = {color: '#5eeef4'}; if(data.indexOf('+') !== -1){res.color = '#fee064'} res; "/>-->
            </div>
          </contrast-card>
        </div>
      </display-board>
      <display-board class="trade_middle" corner_size="large">
        <div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
          <simple-card v-for="data in mockData.sr" style="width: 30%;height: 100%">
            <title-content-mark style="color: #5eeef4;" :title="data.title" :content="data.value" :mark="'万元'" isCenter isBold/>
          </simple-card>
        </div>
        <ar-summary-bar style="width: 100%; height: 64%;"></ar-summary-bar>
      </display-board>
      <display-board class="trade_right" title="账款情况">
        <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
          <contrast-card v-for="data in mockData.zkqk" style="height: 28%;">
            <title-content-mark style="width: 40%;color: #369afa;float: left;" :title="data.title" :content="data.amount" :mark="data.unit"/>
            <div style="width: 60%; height: 100%; float:left; padding: 4% 4% 0 12%; line-height: 26px;; display: flex; align-items: center;">
              <table-column style="float: left;width: 25%;" :data="data.hb" name="title"/>
              <table-column style="float: left;width: 40%;" :data="data.hb" name="amount"/>
              <table-column style="float: left;width: 35%;" :data="data.hb" name="rate" :cell-style-function="cellStyleFunction"/>
            </div>
          </contrast-card>
        </div>
      </display-board>
    </div>
    <div class="middle">
      <display-board class="trade_left" title="已开票未收款">
        <winners-list style="height: 96%"/>
      </display-board>
      <div class="trade_middle" style="border: none;box-shadow: none;">
        <div style="display: flex; justify-content: space-between; height: 50%;">
          <display-board style="width: 32%;" title="每日目标情况">
            <div style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
              <table-column style="float: left;width: 35%;" :data="mockData.mrmbqk" name="title" show-head/>
              <table-column style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" :data="mockData.mrmbqk" name="actualValue" title="实时值" show-head/>
              <table-column style="float: left;width: 20%;" :data="mockData.mrmbqk" name="currentValue" title="目标值" show-head/>
            </div>
          </display-board>
          <display-board style="width: 32%;" title="月度目标情况">
            <div style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
              <table-column style="float: left;width: 35%;" :data="mockData.ydmbqk" name="title" show-head/>
              <table-column style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" :data="mockData.ydmbqk" name="actualValue" title="实时值" show-head/>
              <table-column style="float: left;width: 20%;" :data="mockData.ydmbqk" name="currentValue" title="目标值" show-head/>
            </div>
          </display-board>
          <display-board style="width: 32%;" title="年度目标情况">
            <div style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
              <table-column style="float: left;width: 35%;" :data="mockData.ndmbqk" name="title" show-head/>
              <table-column style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" :data="mockData.ndmbqk" name="actualValue" title="实时值" show-head/>
              <table-column style="float: left;width: 20%;" :data="mockData.ndmbqk" name="currentValue" title="目标值" show-head/>
            </div>
          </display-board>
        </div>
        <div style="display: flex; justify-content: space-between; height: 50%; padding-top: 2rem;">
          <showcase style="width: 18%;" title="当日订单量">
            <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.drddl.weight" mark="万吨" />
            <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.drddl.amount" mark="万元"/>
          </showcase>
          <showcase style="width: 18%;" title="当日完成量">
            <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.drwcl.weight" mark="万吨" />
            <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.drwcl.amount" mark="万元"/>
          </showcase>
          <showcase style="width: 18%;" title="余量">
            <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.yl.weight" mark="万吨" />
            <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.yl.amount" mark="万元"/>
          </showcase>
          <showcase style="width: 18%;" title="流失客户">
            <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.lskh.weight" mark="万吨" />
            <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.lskh.amount" mark="万元"/>
          </showcase>
          <showcase style="width: 18%;" title="新增客户">
            <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.xzkh.weight" mark="万吨" />
            <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.xzkh.amount" mark="万元"/>
          </showcase>
        </div>
      </div>
      <display-board class="trade_right" title="当日订单量占比">
        <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
          <ring-pie-chart ref="transportTypeChart" style="width: 100%;height: 50%;" name="运输类型占比" :data="mockData.drddlzb.transportType"/>
          <ring-pie-chart ref="customerChart" style="width: 100%;height: 50%;" name="公司占比" :data="mockData.drddlzb.customer"/>
        </div>
      </display-board>
    </div>
  </div>
</template>
<script>
import DisplayBoard from "./components/container/display-board.vue";
import Showcase from "./components/container/showcase.vue";
import ContrastCard from "./components/card/contrast-card.vue";
import SimpleCard from "./components/card/simple-card.vue";
import ArSummaryBar from "./components/chart/ar-summary-bar.vue";
import WinnersList from "./components/card/winners-list.vue";
import TitleContentMark from "./components/layout/title-content-mark.vue";
import TableColumn from "./components/table/table-column.vue";
import * as echarts from "_echarts@5.4.3@echarts";
import RingPieChart from "./components/chart/ring-pie-chart.vue";

export default {
  components: {
    RingPieChart,
    TableColumn,
    TitleContentMark,
    Showcase,
    DisplayBoard,
    ContrastCard,
    SimpleCard,
    ArSummaryBar,
    WinnersList
  },
  data() {
    return {
      mockData: {
        yyqk: {
          yye: {
            title: "营业额",
            amount: "20,303",
            unit: "万元",
            hb: [
              {
                title: "昨天",
                amount: "21,000",
                rate: "-3.32%",
              },
              {
                title: "上月",
                amount: "20,000",
                rate: "+4.92%",
              },
            ],
          },
          cb: {
            title: "成本",
            amount: "10,303",
            unit: "万元",
            hb: [
              {
                title: "昨日",
                amount: "11,000",
                rate: "-2.68%",
              },
              {
                title: "上月",
                amount: "10,000",
                rate: "+5.71%",
              },
            ],
          },
          ml: {
            title: "毛利",
            amount: "10,000",
            unit: "万元",
            hb: [
              {
                title: "昨日",
                amount: "10,000",
                rate: "0.00%",
              },
              {
                title: "上月",
                amount: "10,000",
                rate: "0.00%",
              },
            ],
          },
        },
        zkqk: {
          yszk: {
            title: "应收账款",
            amount: "20,303",
            unit: "万元",
            hb: [
              {
                title: "昨天",
                amount: "21,000",
                rate: "-3.32%",
              },
              {
                title: "上月",
                amount: "20，000",
                rate: "+4.92%",
              },
            ],
          },
          yfzk: {
            title: "应付账款",
            amount: "10,303",
            unit: "万元",
            hb: [
              {
                title: "昨日",
                amount: "11,000",
                rate: "-2.68%",
              },
              {
                title: "上月",
                amount: "10,000",
                rate: "+5.71%",
              },
            ],
          },
          zsye: {
            title: "账上余额",
            amount: "10,000",
            unit: "万元",
            hb: [
              {
                title: "昨日",
                amount: "10,000",
                rate: "0.00%",
              },
              {
                title: "上月",
                amount: "10,000",
                rate: "0.00%",
              },
            ],
          },
        },
        sr: [
          {
            title: '累计营业收入（当年）',
            value: '20,303',
          },
          {
            title: '应收款（财务）',
            value: '20,303',
          },
          {
            title: '应收款（营销）',
            value: '20,303',
          },
        ],
        mrmbqk: [
          {
            title: "吨位(万吨)",
            actualValue: "20,303",
            currentValue: "21,000",
          },
          {
            title: "营业额(万元)",
            actualValue: "32,342",
            currentValue: "21,000",
          },
          {
            title: "净利润(万元)",
            actualValue: "32,342",
            currentValue: "21,000",
          },
        ],
        ydmbqk: [
          {
            title: "吨位(万吨)",
            actualValue: "20,303",
            currentValue: "21,000",
          },
          {
            title: "营业额(万元)",
            actualValue: "32,342",
            currentValue: "21,000",
          },
          {
            title: "净利润(万元)",
            actualValue: "32,342",
            currentValue: "21,000",
          },
        ],
        drddl: {
          weight: "2,000",
          amount: "20,000",
        },
        drwcl: {
          weight: "2,000",
          amount: "20,000",
        },
        yl: {
          weight: "2,000",
          amount: "20,000",
        },
        lskh: {
          weight: "2,000",
          amount: "20,000",
        },
        xzkh: {
          weight: "2,000",
          amount: "20,000",
        },
        ndmbqk: [
          {
            title: "吨位(万吨)",
            actualValue: "20,303",
            currentValue: "21,000",
          },
          {
            title: "营业额(万元)",
            actualValue: "32,342",
            currentValue: "21,000",
          },
          {
            title: "净利润(万元)",
            actualValue: "32,342",
            currentValue: "21,000",
          },
        ],
        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",
              },
            }
          ]
        },
        drddlzb: {
          transportType: [
            {value: 2500, name: '汽运'},
            {value: 100, name: '码头/仓库'},
            {value: 500, name: '铁运'},
            {value: 484, name: '水运'},
          ],
          customer: [
              {value: 500, name: '上海欧冶物流股份有限公司'},
              {value: 2500, name: '宝钢运输部'},
              {value: 1100, name: '宝山钢铁股份有限公司'},
          ]
        },
      },
      charts:{}
    }
  },
  methods: {
    cellStyleFunction(data) {
      let res = {color: '#5eeef4'};
      if(data.indexOf('+') !== -1){
        res.color = '#fee064'
      }
      return res;
    },
    resizeChart() {
      for (let chartsKey in this.charts) {
        this.charts[chartsKey].resize();
      }
    },
    testClick(){
    }
  },
  mounted() {
    setTimeout(() => {
      window.addEventListener('resize', this.resizeChart);
    }, 500)
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeChart);
  }
};
</script>
