<template>
  <div class="box">
    <div class="header">
      <el-row :gutter="20">
        <el-col v-for="item in 4" :key="item" :span="6">
          <el-card class="box-card">
            <div class="card-flex">
              <div class="flex-left">
                <i class="el-icon-s-order" :style="{ fontSize: '72px', color: color }"></i>
              </div>
              <div class="flex-right">
                <p :style="{marginBottom: '8px', color: color}">今日报警总数</p>
                <p>15</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <br/>
    <div class="pending">
      <div class="title" :style="{color: color}">待处理事务</div>
      <div class="fens">
        <el-row :gutter="40">
          <el-col v-for="item in elements" :key="item.id" :span="8">
            <div class="fens-text">
              <span>{{item.name}}</span>
              <el-tag  effect="dark" type="danger" style="float: right">{{item.data}}</el-tag>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <br/>
    <div class="pending">
      <div class="title" :style="{color: color}">
        <span>猪舍温湿度</span>
        <el-button type="text" style="float: right; margin-right: 25px">详情</el-button>
      </div>
      <div style="padding: 20px; border-bottom: 1px solid #ddd">
        <el-form :inline="true" size="mini">
          <el-row>
            <el-col :span="5">
              <el-form-item label="栋舍">
                <el-select></el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="单元">
                <el-select></el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-form-item>
                <span class="text-size">今日</span>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-form-item>
                <span class="text-size">本周</span>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-form-item>
                <span class="text-size">本月</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div style="width: 100%; height: 400px">
        <chart-wsd></chart-wsd>
      </div>
    </div>
    <br/>
    <div class="pending">
      <div class="title" :style="{color: color}">
        <span>水量消耗</span>
        <el-button type="text" style="float: right; margin-right: 25px">详情</el-button>
      </div>
      <div style="padding: 20px; border-bottom: 1px solid #ddd">
        <el-form :inline="true" size="mini">
          <el-row>
            <el-col :span="5">
              <el-form-item label="栋舍">
                <el-select></el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="单元">
                <el-select></el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-form-item>
                <span class="text-size">今日</span>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-form-item>
                <span class="text-size">本周</span>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-form-item>
                <span class="text-size">本月</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="pen-flex">
        <div class="pen-left">
          <div class="water">
            <p>本月用水量</p>
            <p>10000t</p>
            <p>
              <i class="el-icon-caret-top" style="color: red"></i>
              <span style="color: red">10%</span>
              &nbsp;
              <span style="font-size: 16px; color: #CFDBED">同比上月</span>
            </p>
          </div>
          <div class="water">
            <p>本周用水量</p>
            <p>10000t</p>
            <p>
              <i class="el-icon-caret-bottom" style="color: #1ABC9C"></i>
              <span style="color: #1ABC9C">10%</span>
              &nbsp;
              <span style="font-size: 16px; color: #CFDBED">同比上周</span>
            </p>
          </div>
        </div>
        <div style="width: 85%; height: 400px">
          <chart-water></chart-water>
        </div>
      </div>
    </div>
    <br/>
    <div class="pending">
      <div class="title" :style="{color: color}">
        <span>电量消耗</span>
        <el-button type="text" style="float: right; margin-right: 25px">详情</el-button>
      </div>
      <div style="padding: 20px; border-bottom: 1px solid #ddd">
        <el-form :inline="true" size="mini">
          <el-row>
            <el-col :span="5">
              <el-form-item label="栋舍">
                <el-select></el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="单元">
                <el-select></el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-form-item>
                <span class="text-size">今日</span>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-form-item>
                <span class="text-size">本周</span>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-form-item>
                <span class="text-size">本月</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="pen-flex">
        <div class="pen-left">
          <div class="water">
            <p>本月用电量</p>
            <p>10000KW·h</p>
            <p>
              <i class="el-icon-caret-top" style="color: red"></i>
              <span style="color: red">10%</span>
              &nbsp;
              <span style="font-size: 16px; color: #CFDBED">同比上月</span>
            </p>
          </div>
          <div class="water">
            <p>本周用电量</p>
            <p>10000KW·h</p>
            <p>
              <i class="el-icon-caret-bottom" style="color: #1ABC9C"></i>
              <span style="color: #1ABC9C">10%</span>
              &nbsp;
              <span style="font-size: 16px; color: #CFDBED">同比上周</span>
            </p>
          </div>
        </div>
        <div style="width: 85%; height: 400px">
          <chart-dl></chart-dl>
        </div>
      </div>
    </div>
    <br/>
    <div class="pending">
      <div class="title" :style="{color: color}">
        <span>卖猪统计</span>
        <el-button type="text" style="float: right; margin-right: 25px">详情</el-button>
      </div>
      <div style="padding: 20px; border-bottom: 1px solid #ddd">
        <el-form :inline="true" size="mini">
          <el-row>
            <el-col :span="5">
              <el-form-item label="栋舍">
                <el-select></el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="单元">
                <el-select></el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-form-item>
                <span class="text-size">今日</span>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-form-item>
                <span class="text-size">本周</span>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-form-item>
                <span class="text-size">本月</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="pen-flex">
        <div class="pen-left">
          <div class="water">
            <p>本月销售总量</p>
            <p>10000</p>
            <p>
              <i class="el-icon-caret-top" style="color: red"></i>
              <span style="color: red">10%</span>
              &nbsp;
              <span style="font-size: 16px; color: #CFDBED">同比上月</span>
            </p>
          </div>
          <div class="water">
            <p>本周用电量</p>
            <p>10000</p>
            <p>
              <i class="el-icon-caret-bottom" style="color: #1ABC9C"></i>
              <span style="color: #1ABC9C">10%</span>
              &nbsp;
              <span style="font-size: 16px; color: #CFDBED">同比上周</span>
            </p>
          </div>
        </div>
        <div style="width: 85%; height: 400px">
          <chart-pig></chart-pig>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import ChartWsd from "./chart/ChartWsd";
import ChartDl from'./chart/ChartDl';
import ChartWater from "./chart/ChartWater";
import ChartPig from "./chart/ChartPig";
export default {
  name: "dashboard",
  components: {
    ChartWsd,
    ChartDl,
    ChartWater,
    ChartPig
  },
  data() {
    return {
      elements: [
        {
          id: 1,
          name: '事件提醒',
          data: 10
        },
        {
          id: 2,
          name: '事件提醒',
          data: 10
        },
        {
          id: 3,
          name: '事件提醒',
          data: 10
        },
        {
          id: 4,
          name: '事件提醒',
          data: 10
        },
        {
          id: 5,
          name: '事件提醒',
          data: 10
        },
        {
          id: 6,
          name: '事件提醒',
          data: 10
        },
      ],
      dateRange: [],
    }
  },
  computed: {
    ...mapState(['color'])
  }
}
</script>

<style scoped>
  p {
    margin: 0;
    padding: 0;
  }
  .box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
  }
  .header {
    width: 100%;
    /*height: 150px;*/
  }
  .box-card {
    box-sizing: border-box;
    height: 100%;
  }
  .card-flex {
    display: flex;
    height: 120px;
  }
  .flex-left {
    width: 40%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .flex-right {
    width: 60%;
    height: 100%;
    box-sizing: border-box;
    padding: 30px 0;
    font-size: 18px;
  }
  .pending {
    width: 100%;
    /*height: 300px;*/
    border: 1px solid #ddd;
  }
  .title {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #ddd;
    line-height: 40px;
    box-sizing: border-box;
    padding-left: 20px;
    background-color: #F3F3F3;
    font-weight: 700;
  }
  .fens {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
  }
  .fens-text {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
    padding: 0 10px;
    margin-bottom: 20px;
    color: #CBBCCB;
  }
  .text-size {
    cursor: pointer;
  }
  .pen-flex {
    width: 100%;
    height: 400px;
    display: flex;
  }
  .pen-left {
    width: 15%;
    height: 100%;
    border-right: 1px solid #ddd;
    text-align: center;
  }
  .water {
    padding: 50px 0;
    font-size: 20px;
  }
</style>
