<template>
  <div class="main" @click="log()">
    <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 yyqk" style="height: 28%;" @click.native="routerTo('/turnover-detail',paths[data.title])">
            <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 arSummary" 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 ref="arSummaryBar" 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%" @click.native="goArBar" id="ar_company_list" :rows="arCompanyList"/>
      </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%;z-index: 999" name="运输类型占比" :data="transportTypeOrderFinishPie" @click.native="routerTo('/order-proportion')"/>
          <ring-pie-chart ref="customerChart" style="width: 100%;height: 50%;" name="公司占比" :data="customerOrderFinishPie" @click.native="routerTo('/order-proportion')"/>
        </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 RingPieChart from "./components/chart/ring-pie-chart.vue";
import {arSummaryBar, arCompanyList, getBusinessConditionDatas, customerOrderFinishPie} from "../api/apiList"
import {calc_hb_str, calc_tb_str, conver_amont} from "../utils/numUtil";
import {getTransportTypeOrderFinishPie,getCustomerOrderFinishPie} from "./databoard/js/indexPieData";

export default {
  components: {
    RingPieChart,
    TableColumn,
    TitleContentMark,
    Showcase,
    DisplayBoard,
    ContrastCard,
    SimpleCard,
    ArSummaryBar,
    WinnersList
  },
  data() {
    return {
      today: '2022-06-26',
      // today: moment().format("yyyy-MM-DD"),
      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%",
            },
          ],
        },
      },
      arSummary: [
        {title: '累计营业收入（当年）', value: '20,303'},
        {title: '应收款（财务）', value: '20,303'},
        {title: '应收款（营销）', value: '20,303',},
      ],
      mockData: {
        zqk: {
          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: '宝山钢铁股份有限公司'},
          ]
        },
      },
      paths: {
        "营业额": "yye",
        "成本": "cb",
        "毛利": "ml",
      },
      dataset:{},
      transportTypeOrderFinishPie:[],
      customerOrderFinishPie:[],
      arCompanyList:[],
      charts: {}
    }
  },
  methods: {
    log(){
    },
    cellStyleFunction(data) {
      let res = {color: '#33ff66'};
      if (data.indexOf('-') !== -1) {
        res.color = '#ff3300'
      }
      return res;
    },
    resizeChart() {
      for (let chartsKey in this.charts) {
        this.charts[chartsKey].resize();
      }
    },
    routerTo(path,code) {
      this.$router.push({path: path, query: {code: code}});
    },
    //营业情况
    showBusinessConditionDatas() {
      let res = getBusinessConditionDatas(this.today)
      res.then(data => {
        data = data.data;
        //营业额
        this.yyqk.yye.amount = conver_amont(data.cur_sell_settle_amount);
        this.yyqk.yye.hb[0].amount = conver_amont(data.pre_sell_settle_amount);
        this.yyqk.yye.hb[0].rate = calc_hb_str(data.cur_sell_settle_amount, data.pre_sell_settle_amount);
        this.yyqk.yye.hb[1].amount = conver_amont(data.pre_month_sell_settle_amount);
        this.yyqk.yye.hb[1].rate = calc_tb_str(data.cur_sell_settle_amount, data.pre_month_sell_settle_amount);
        //成本
        this.yyqk.cb.amount = conver_amont(data.cur_buy_settle_amount);
        this.yyqk.cb.hb[0].amount = conver_amont(data.pre_buy_settle_amount);
        this.yyqk.cb.hb[0].rate = calc_hb_str(data.cur_buy_settle_amount, data.pre_buy_settle_amount);
        this.yyqk.cb.hb[1].amount = conver_amont(data.pre_month_buy_settle_amount);
        this.yyqk.cb.hb[1].rate = calc_tb_str(data.cur_buy_settle_amount, data.pre_month_buy_settle_amount);
        //毛利
        this.yyqk.ml.amount = conver_amont(data.cur_gross_profit_amount);
        this.yyqk.ml.hb[0].amount = conver_amont(data.pre_gross_profit_amount);
        this.yyqk.ml.hb[0].rate = calc_hb_str(data.cur_gross_profit_amount, data.pre_gross_profit_amount);
        this.yyqk.ml.hb[1].amount = conver_amont(data.pre_month_gross_profit_amount);
        this.yyqk.ml.hb[1].rate = calc_tb_str(data.cur_gross_profit_amount, data.pre_month_gross_profit_amount);
      })
    },
    // 跳转已开票未收款页面
    goArBar() {
      this.$router.push('/ar_bar')
    },
    // 获取应收账款数据
    getArSummaryBar() {
      arSummaryBar().then(res => {
        let data = res.data
        let seriesData = []
        seriesData.push(data.unsettled_amount)
        seriesData.push(data.settled_amount)
        seriesData.push(data.unregister_amount)
        seriesData.push(data.receivable_amount)
        seriesData.push(data.cancelled_amount)
        this.arSummary[0].value = data.total_amount
        this.arSummary[1].value = data.unregister_amount
        this.arSummary[2].value = data.receivable_amount
        this.$refs.arSummaryBar.drawArSummaryBar(seriesData)
      }).catch(err => {
        console.log(err);
      });
    },
    // 获取已开票未收款排行
    getArCompanyList() {
      arCompanyList().then(res => {
        if (res.data.length) {
          this.arCompanyList = res.data
        }
      }).catch(err => {
        console.log(err);
      });
    },
    refreshData(){
      getTransportTypeOrderFinishPie(res => this.transportTypeOrderFinishPie = res,this.today);
      getCustomerOrderFinishPie(res => this.customerOrderFinishPie = res,this.today);
    }
  },
  mounted() {
    this.showBusinessConditionDatas();
    setTimeout(() => {
      window.addEventListener('resize', this.resizeChart);
    }, 500)
    this.getArSummaryBar();
    this.getArCompanyList();
    this.refreshData()
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeChart);
  }
};
</script>

<style scoped>
#ar_company_list:hover {
  background-color: #19EBFF10;
  transform: scale(101%);
}
</style>
