<template>
  <div style="padding: 20px">
    <el-card>
      <el-select
        placeholder="区域选择"
      >
        <el-option
          label=""
          value=""
        ></el-option>
      </el-select>
      
      <el-select
        style="margin-left:10px"
        placeholder="年份"
      >
      <el-option
        label="2023"
        :value="year"
      ></el-option>
      </el-select>
    </el-card>
    <el-card style="margin: 16px 0">
      <el-row :gutter="20"
        v-for="item in list"
        :key="item"
      >
      <el-col :span="4"
        v-for="i in item"
        :key="i"
      >
        <div class="card">
          <img :src="i.imageSrc"/>
          <div class="card_content_right">
            <span>{{i.title}}</span>
            <div>{{i.number}}</div>
          </div>
        </div>
      </el-col>
      </el-row>
    </el-card>
    <el-row :gutter="20">
      <el-col :span="10">
        <el-card class="pie-container">
          <echartsPieVue />
          <div class="pie-right">
            <div class="pie-item">
              <span>额定水量：</span>
              <span>6256 m³</span>
            </div>
            <div class="pie-item">
              <span>剩余水量：</span>
              <span>6256 m³</span>
            </div>
            <div class="pie-item">
              <span>去年同期节水：</span>
              <span>6256 m³</span>
            </div>
            <div class="pie-item">
              <span>节水率：</span>
              <span>6223456 m³</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="14">
        <el-card>
          <echartsGradient/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import numberWells from './assets/number_wells.svg'
import electricity from './assets/electricity.svg'
import moneyIcon from './assets/money_icon.svg'
import waterYield from './assets/water_yield.svg'
import person from './assets/person.svg'
import area from './assets/area.svg'
import water from './assets/water.svg'
import time from './assets/time.svg'
import echartsPieVue from './components/echartsPie.vue'
import echartsGradient from './components/echartsGradient.vue'
export default {
  name: "Home",
  props: {},
  components:{
    echartsPieVue,
    echartsGradient
  },
  data() {
    return{
      areaSelect: '',
      year: '2023',
      list: [[{
        imageSrc: electricity,
        title: '水晶数目(口)',
        number: 551 
      },{
        imageSrc: numberWells,
        title: '使用电量(度)',
        number: 551 
      },{
        imageSrc: waterYield,
        title: '使用水量(方)',
        number: 551 
      },{
        imageSrc: moneyIcon,
        title: '使用金额(元)',
        number: 551 
      },{
        imageSrc: person,
        title: '用户数量(人)',
        number: 551 
      }],[{
        imageSrc: moneyIcon,
        title: '充值金额(元)',
        number: 551 
      },{
        imageSrc: area,
        title: '灌溉面积(亩)',
        number: 551 
      },{
        imageSrc: water,
        title: '亩均用水量(方)',
        number: 551 
      },{
        imageSrc: moneyIcon,
        title: '亩均用金额(元)',
        number: 551 
      },{
        imageSrc: time,
        title: '累计使用时间(H)',
        number: 551 
      }]]
    }
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
@import './assets/home.scss'
</style>
