<template>
  <div class="dashboard-editor-container">
    <div class="mtitle">
      <span style="font-size: 19px">欢迎使用，{{ user.nickName }}</span>
      <iframe
        allowtransparency="true"
        frameborder="0"
        width="180"
        height="36"
        scrolling="no"
        style="padding-top: 10px"
        src="//tianqi.2345.com/plugin/widget/index.htm?s=3&z=2&t=0&v=0&d=2&bd=0&k=&f=#545555&ltf=#545555&htf=ffffff&q=1&e=1&a=1&c=72036&w=180&h=36&align=center"
      ></iframe>
    </div>
    <!--散货过车和重量监控-->
    <div class="chart-wrapper">
      <div class="pop" style="width: 70%">
        <div class="out">
          <div class="int">
            <div class="bos" style="border: 0px">
              <div class="lab">
                <div class="bsg"></div>
                <div class="tit">账户信息</div>
              </div>
              <companyInfo></companyInfo>
            </div>
          </div>
        </div>
        <div class="out">
          <div class="int">
            <div class="bos" style="border: 0px">
              <div class="lab">
                <div class="bsg"></div>
                <div class="tit">账户信息</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pop" style="width: 30%">
        <div class="out" style="margin-right: 0px">
          <div class="int">
            <div class="bos" style="border: 0px">
              <div class="lab">
                <div class="bsg"></div>
                <div class="tit">用户信息</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup';
import BarChart from './dashboard/BarChart';
import Vue from 'vue';
export default {
  name: 'Index',
  components: {
    PanelGroup,
    BarChart
  },
  data() {
    return {
      user: this.$store.state.user,
      data: { count: {}, pass: {} },
      deptId: this.$store.state.user.deptId,
      time: this.util.getDate('times'),
      chartData1: [], //散货
      chartData2: [] //集装箱
    };
  },
  watch: {
    deptId(val) {
      this.getData();
      this.getWeek();
    }
  },
  created() {
    //this.getData();
    //this.getWeek();
  },
  methods: {
    getData() {
      this.ajax({ url: '/home/index', data: { deptId: this.deptId } }).then((response) => {
        this.data = response.data;
      });
    },
    getWeek() {
      this.chartData1 = [];
      this.chartData2 = [];
      this.ajax({ url: '/home/weekSelect', data: { deptId: this.deptId } }).then((response) => {
        response.data.s.forEach((item) => {
          this.chartData1.push({ name: item.date, value: ((item.success / item.total) * 100).toFixed(0) });
        });
        response.data.j.forEach((item) => {
          this.chartData2.push({ name: item.date, value: ((item.success / item.total) * 100).toFixed(0) });
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 15px 20px 0px 20px;
  .mtitle {
    margin-bottom: 20px;
    margin-top: -15px;
  }
  .chart-wrapper {
    margin-top: 12px;
    overflow: hidden;
    .pop {
      float: left;
      width: 33.33%;
      overflow: hidden;
      .out {
        margin: 10px 10px 20px 0px;
        .int {
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          background: white;
          border-radius: 5px;
          padding: 15px 15px 10px 15px;
          overflow: hidden;
        }
      }
    }
  }
  .bos {
    float: left;
    padding: 0px 10px 0px 10px;
    width: 100%;
  }
}
</style>
