<template>
  <div class="app-main" style="background: #11285a">
    <div class="dashboard-editor-container" style="width:100%;height:100%">

      <!--<panel-group @handleSetLineChartData="handleSetLineChartData" />

      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        <line-chart :chart-data="lineChartData" />
      </el-row>-->

      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :lg="9">
          <div>
            <div class="card-head">
              <span class="card-name" @click="handleRouter('first')">{{ $t('乙烯产量及OAE') }}</span>
              <el-dropdown placement="bottom" trigger="click" class="card-time">
              <span class="el-dropdown-link">
                <i class="el-icon-date"></i>
              </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="chooseOne(1)">{{this.searchFormField.year - 2}}</el-dropdown-item>
                  <el-dropdown-item @click.native="chooseTwo(1)">{{this.searchFormField.year - 1}}</el-dropdown-item>
                  <el-dropdown-item @click.native="chooseThree(1)">{{this.searchFormField.year}}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <div class="chart-wrapper">
            <yx-chart :year=this.yxChooseYear />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="9">
          <div>
            <div class="card-head">
              <span class="card-name" @click="handleRouter('second')">{{ $t('芳烃产量及OAE') }}</span>
              <el-dropdown placement="bottom" trigger="click" class="card-time">
              <span class="el-dropdown-link">
                <i class="el-icon-date"></i>
              </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="chooseOne(2)">{{this.searchFormField.year - 2}}</el-dropdown-item>
                  <el-dropdown-item @click.native="chooseTwo(2)">{{this.searchFormField.year - 1}}</el-dropdown-item>
                  <el-dropdown-item @click.native="chooseThree(2)">{{this.searchFormField.year}}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <div class="chart-wrapper">
            <qzft-chart :year=this.qzftChooseYear />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="6">
          <div>
            <div class="card-head">
              <span class="card-name">{{ $t('生日提醒') }}</span>
            </div>
          </div>
          <div class="chart-wrapper">
            <brith-chart />
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :lg="9">
          <div >
            <div class="card-head">
              <span class="card-name" @click="handleRouter('fourth')">{{ $t('能源消耗') }}</span>
              <el-dropdown placement="bottom" trigger="click" class="card-time">
              <span class="el-dropdown-link">
                <i class="el-icon-date"></i>
              </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="chooseOne(3)">{{this.searchFormField.year - 2}}</el-dropdown-item>
                  <el-dropdown-item @click.native="chooseTwo(3)">{{this.searchFormField.year - 1}}</el-dropdown-item>
                  <el-dropdown-item @click.native="chooseThree(3)">{{this.searchFormField.year}}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <div class="chart-wrapper">
            <nyxh-chart :year=this.nyxhChooseYear />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="9">
          <div>
            <div class="card-head">
              <span class="card-name" @click="handleRouter('third')">{{ $t('产能利用率/工厂损失') }}</span>
              <el-dropdown placement="bottom" trigger="click" class="card-time">
              <span class="el-dropdown-link">
                <i class="el-icon-date"></i>
              </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="chooseOne(4)">{{this.searchFormField.year - 2}}</el-dropdown-item>
                  <el-dropdown-item @click.native="chooseTwo(4)">{{this.searchFormField.year - 1}}</el-dropdown-item>
                  <el-dropdown-item @click.native="chooseThree(4)">{{this.searchFormField.year}}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <div class="chart-wrapper">
            <cnlyl-chart :year=this.cnlylChooseYear />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="6">
          <div >
            <div class="card-head">
              <span class="card-name">{{ $t('预警信息') }}</span>
            </div>
          </div>
          <div class="chart-wrapper">
            <warn-chart />
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :lg="9">
          <div>
            <div class="card-head">
              <span class="card-name" @click="handleRouter2('')">{{ $t('能耗管理统计') }}</span>
            </div>
          </div>
          <div class="chart-wrapper">
            <nhtj-chart />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="9">
          <div>
            <div class="card-head">
              <span class="card-name" @click="handleRouter3('')">{{ $t('KPI考核') }}</span>
            </div>
          </div>
          <div class="chart-wrapper">
            <kpi-chart />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="6">
          <div>
            <div class="card-head">
              <span class="card-name">{{ $t('隐患排查') }}</span>
            </div>
          </div>
          <div class="chart-wrapper">
            <yhpc-chart />
          </div>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
  import PanelGroup from './dashboard/PanelGroup'
  import LineChart from './dashboard/LineChart'
  import YxChart from './dashboard/YxChart'
  import QzftChart from './dashboard/QzftChart'
  import BarChart from './dashboard/BarChart'
  import CnlylChart from './dashboard/CnlylChart'
  import NyxhChart from './dashboard/NyxhChart'
  import NhtjChart from './dashboard/NhtjChart'
  import KpiChart from './dashboard/KpiChart'
  import YhpcChart from "./dashboard/YhpcChart"
  import WarnChart from "./dashboard/WarnChart"
  import BrithChart from "./dashboard/BrithChart";

  const lineChartData = {
    newVisitis: {
      expectedData: [100, 120, 161, 134, 105, 160, 165],
      actualData: [120, 82, 91, 154, 162, 140, 145]
    },
    messages: {
      expectedData: [200, 192, 120, 144, 160, 130, 140],
      actualData: [180, 160, 151, 106, 145, 150, 130]
    },
    purchases: {
      expectedData: [80, 100, 121, 104, 105, 90, 100],
      actualData: [120, 90, 100, 138, 142, 130, 130]
    },
    shoppings: {
      expectedData: [130, 140, 141, 142, 145, 150, 160],
      actualData: [120, 82, 91, 154, 162, 140, 130]
    }
  }

  export default {
    name: 'Index',
    components: {
      PanelGroup,
      LineChart,
      YxChart,
      QzftChart,
      BarChart,
      CnlylChart,
      NyxhChart,
      NhtjChart,
      KpiChart,
      YhpcChart,
      WarnChart,
      BrithChart
    },
    data() {
      return {
        lineChartData: lineChartData.newVisitis,
        heightObj: {
          height: document.body.clientHeight -50 + "px"
        },
        // 获取当前年份
        searchFormField: {
          year: this.getNowTime(),
        },
        yxChooseYear: 0,
        qzftChooseYear: 0,
        nyxhChooseYear: 0,
        cnlylChooseYear: 0,
      }
    },
    created() {
      // this.$i18n.locale = 'zh'
      // this.$store.dispatch('app/setLanguage', 'zh')
    },
    methods: {
      /** 获取当前年份 */
      getNowTime() {
        var now = new Date();
        var year = now.getFullYear(); //得到年份
        var defaultDate = `${year}`;
        defaultDate = `${year}`
        return defaultDate;
        this.$set(this.searchFormField, "year", defaultDate);
      },
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      },
      handleRouter(type){
        this.$router.push({ path: '/production/monthplan', query: { type: type }});
      },
      handleRouter2(type){
        this.$router.push({ path: '/production/lbnhjstj', query: { type: type }});
      },
      handleRouter3(type){
        this.$router.push({ path: '/ehs/ehskpinew', query: { type: type }});
      },

      //变换年份
      chooseOne (index) {
        if (index === 1) {
          this.yxChooseYear = this.searchFormField.year - 2;
        }else if (index === 2) {
          this.qzftChooseYear = this.searchFormField.year - 2;
        }else if (index === 3) {
          this.nyxhChooseYear = this.searchFormField.year - 2;
        }else if (index === 4) {
          this.cnlylChooseYear = this.searchFormField.year - 2;
        }
      },
      chooseTwo (index) {
        if (index === 1) {
          this.yxChooseYear = this.searchFormField.year - 1;
        }else if (index === 2) {
          this.qzftChooseYear = this.searchFormField.year - 1;
        }else if (index === 3) {
          this.nyxhChooseYear = this.searchFormField.year - 1;
        }else if (index === 4) {
          this.cnlylChooseYear = this.searchFormField.year - 1;
        }
      },
      chooseThree (index) {
        if (index === 1) {
          this.yxChooseYear = this.searchFormField.year - 0;
        }else if (index === 2) {
          this.qzftChooseYear = this.searchFormField.year - 0;
        }else if (index === 3) {
          this.nyxhChooseYear = this.searchFormField.year - 0;
        }else if (index === 4) {
          this.cnlylChooseYear = this.searchFormField.year - 0;
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 10px;
    background-color: #182e62;
    position: relative;

    .chart-wrapper {
      background: rgba(253, 245, 245, 0) linear-gradient(to right, #11285a, #1d2d4a) repeat scroll 0% 0%;
      padding: 10px 0 0;
      margin-bottom: 10px;
    }
  }

  /deep/.el-dropdown {
    color: #ffffff;
    margin-right: 10px;
    margin-top: 2px;
  }

  .card-time {
    float: right;
  }

  .card-name {
    cursor: pointer;
    font-size: 12px;
    font-weight:bold;
    color: #ffffff;
    padding: 2px 0 2px 5px;
  }

  .card-head {
    background: rgba(253, 245, 245, 0) linear-gradient(to right, #4a7cf9, #628fff) repeat scroll 0% 0%;
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
  body {
    font-size: 12px !important;
  }

</style>
