<template>
  <div id="page-ztgl" class="deck-pages">
    <div class="c-left">
      <div>
        <span class="box-title1">农业现状</span>
        <span class="box-title2">农用地现状</span>
      </div>
      <div id="chart-clb1"></div>
      <span class="box-title2">高标准农田现状</span>
      <div class="cl-b2">
        <div class="c-title">
          <span class="c-text">高标准农田项目现状</span>
          <span class="c-text">2011-2020</span>
        </div>
        <div class="c-content">
          <div>
            <span class="c-text">项目数</span><span class="c-number">238</span><span class="c-text">个</span>
          </div>
          <div>
            <span class="c-text">总面积</span><span class="c-number">40.37</span><span class="c-text">万亩</span>
          </div>
        </div>
      </div>
      <span class="box-title1">农业规划</span>
      <span class="box-title2">高标准农田规划</span>
      <div class="cl-b5">
        <div class="c-title">
          <span class="c-text">高标准农田项目规划</span>
          <span class="c-text">2021-2030</span>
        </div>
        <div class="c-content">
          <div>
            <div>
              <span class="c-text">正式规划</span><span class="c-number">16.68</span><span class="c-text">万亩</span>
            </div>
            <div>
              <span class="c-text">项目数</span><span class="c-number">125</span><span class="c-text">个</span>
            </div>
          </div>
          <span class="c-divider"></span>
          <div>
            <div>
              <span class="c-text">后备规划</span><span class="c-number">7.98</span><span class="c-text">万亩</span>
            </div>
            <div>
              <span class="c-text">项目数</span><span class="c-number">202</span><span class="c-text">个</span>
            </div>
          </div>
        </div>
      </div>
      <span class="box-title2">耕地保护空间</span>
      <div id="chart-clb3"></div>
      <span class="box-title2">三区划定</span>  
      <div class="cl-b4">
        <div id="chart-clb4"></div>
        <ul class="clb4-text">
          <li v-for="item in data_sqhd" :key="item.name">
            <span>{{ item.name }}</span>
            <div><span>{{ item.value }}</span><span>万亩</span></div>
          </li>
        </ul>
      </div>
    </div>
    <div class="c-right">
      <span class="box-title1">绿色发展</span>
      <span class="box-title2">绿色食品认证</span>
      <ul class="cr-b1">
        <li v-for="item in data_lssprz" :key="item.title">
          <span class="text-label1">{{ item.title }}</span>
          <div>
            <span>{{ item.value }}</span>
            <span>{{ item.unit }}</span>
          </div>
        </li>
      </ul>
      <span class="box-title2">绿色监管</span>
      <ul class="cr-b2">
        <li>
          <img src="@/assets/imgs/deck/page_ztgl/icon-lsjg-1.png" alt="">
          <div>
            <span>化肥施用</span>
            <div>
              <div><span class="text-label1">今年化肥施用</span><div><span class="text-value1">{{ data_lsjg.huafei }}</span><span class="text-unit1">千克/亩</span></div></div>
              <div><span class="text-label1">去年化肥施用</span><div><span class="text-value1">{{ data_lsjg.huafei_last }}</span><span class="text-unit1">千克/亩</span></div></div>
            </div>
          </div>
        </li>
        <li>
          <img src="@/assets/imgs/deck/page_ztgl/icon-lsjg-2.png" alt="">
          <div>
            <span>土壤改良面积</span>
            <div>
              <div><span class="text-label1">今年土壤改良面积</span><div><span class="text-value1">{{ data_lsjg.turang }}</span><span class="text-unit1">亩</span></div></div>
              <div><span class="text-label1">去年土壤改良面积</span><div><span class="text-value1">{{ data_lsjg.turang_last }}</span><span class="text-unit1">亩</span></div></div>
            </div>
          </div>
        </li>
        <li>
          <img src="@/assets/imgs/deck/page_ztgl/icon-lsjg-1.png" alt="">
          <div>
            <span>农药使用</span>
            <div>
              <div><span class="text-label1">今年农药使用</span><div><span class="text-value1">{{ data_lsjg.nongyao }}</span><span class="text-unit1">千克/亩</span></div></div>
              <div><span class="text-label1">去年农药使用</span><div><span class="text-value1">{{ data_lsjg.nongyao_last }}</span><span class="text-unit1">千克/亩</span></div></div>
            </div>
          </div>
        </li>
      </ul>
      <span class="box-title2">农资经营</span>
      <ul class="cr-b3">
        <li v-for="item in data_nzjy" :key="item.title">
          <img :src="item.img" alt="">
          <div>
            <span class="text-label1">{{ item.title }}</span>
            <div><span class="text-value1">{{ item.value }}</span><span class="text-unit1">{{ item.unit }}</span></div>
          </div>
        </li>
      </ul>
      <span class="box-title2">农资购买分布</span>
      <div class="cr-b4">
        <div id="chart-crb4"></div>
        <ul class="crb4-list">
          <li v-for="item in data_nzgmfb" :key="item.title">
            <span class="text-label1">{{ item.title }}</span>
            <div><span class="text-value1">{{ item.value }}</span><span class="text-unit1">户</span></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { setSqhd, setYjjbnt, setNyxz, setNzgmfb } from '@/echarts/options'
import { GetAgriculturalLand } from '../../../services/ztgl'
import { landTypeMap } from '../../../utils/data/fieldsMapper'

export default {
  name: 'PageZtgl',
  data() {
    return {
      data_nyxz: [
        // { name: '粮田', value: 32 },
        // { name: '果园', value: 43 },
        // { name: '菜田', value: 43 },
        // { name: '养殖(水产)', value: 12 },
        // { name: '养殖(畜牧)', value: 32 },
        // { name: '经作田', value: 32 },
      ],
      data_gbznt: {
        totalArea: '10,556',
        totalCount: '30,233',
        finished: '4544',
        finishedPercent: '50%',
        ongoing: '4544',
        ongoingPercent: '50%',
      },
      data_yjjbnt: [
        { name: '永久基本农田', value: 53.30 },
        { name: '部管储蓄地块', value: 0.54 },
        { name: '市管储备地块', value: 12.42 },
      ],
      data_sqhd: [
        { name: '粮食生产功能区', value: '28.34' },
        { name: '蔬菜保护区', value: '15.6' },
        { name: '特色农产品优势区', value: '2.28' },
      ],
      data_lssprz: [
        { title: '认证企业', value: '*', unit: '家' },
        { title: '认证产品', value: '*', unit: '个' },
        { title: '认证面积', value: '*', unit: '万亩' },
      ],
      data_lsjg: {
        huafei: '*',
        huafei_last: '*',
        turang: '*',
        turang_last: '*',
        nongyao: '*',
        nongyao_last: '*'
      },
      data_nzjy: [
        { title: '年农药销售量', value: '*', unit: '吨', img: require('@/assets/imgs/deck/page_ztgl/icon-nzjy-1.png') },
        { title: '门店数量', value: '*', unit: '个', img: require('@/assets/imgs/deck/page_ztgl/icon-nzjy-2.png') },
        { title: '年化肥销售量', value: '*', unit: '吨', img: require('@/assets/imgs/deck/page_ztgl/icon-nzjy-1.png') },
        { title: '供应商数量', value: '*', unit: '个', img: require('@/assets/imgs/deck/page_ztgl/icon-nzjy-3.png') },
      ],
      data_nzgmfb: [
        { title: '农业主体', value: '*' },
        { title: '生产大户', value: '*' },
      ]
    }
  },
  mounted() {
    GetAgriculturalLand().then(res => {
      res.data.Result.forEach(i => {
        let landTypeCn = landTypeMap.get(i.landtype)
        if(landTypeCn&&['粮田','果园','菜田','养殖(水产)','养殖(畜牧)','经作田'].includes(landTypeCn)) {
        // if(landTypeCn) {
          this.data_nyxz.push({ name: landTypeMap.get(i.landtype), value: Number((i.areamu/10000).toFixed(2))})
        }
      })
      setNyxz(document.getElementById('chart-clb1'), this.data_nyxz)
    })
    setSqhd(document.getElementById('chart-clb4'), this.data_sqhd)
    setYjjbnt(document.getElementById('chart-clb3'), this.data_yjjbnt)
    setNzgmfb(document.getElementById('chart-crb4'), [
      { title: '农业主体', value: 100 },
      { title: '生产大户', value: 100 }
    ])
  },
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
#page-ztgl {
  .box-title1 {
    margin-bottom: 1.5vh;
  }
  .text-label1 {
    display: block;
    font-size: 28px;
    color: #FFFFFF;
  }
  .text-value1 {
    font-size: 36px;
    font-family: YSBTH;
    color: #FFE566;
    line-height: 36px;
  }
  .text-unit1 {
    margin-left: 6px;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 36px;
  }
  .c-left {
    #chart-clb1 {
      width: 100%;
      height: 22vh;
    }
    .cl-b2 {
      width: 100%;
      height: 126px;
      background: url('../../../assets/imgs/deck/page_ztgl/bg-ntxz.png');
      background-size: 100% 100%;
      .c-title {
        text-align: center;
        line-height: 45px;
        .c-text:nth-child(1) {
          margin-right: 20px;
        }
      }
      .c-content {
        display: flex;
        justify-content: space-around;
        line-height: 80px;
        &>div {
          display: flex;
          align-items: center;
        }
      }
      .c-text {
        font-size: 28px;
        color: #B1EDED;
      }
      .c-number {
        margin: 0 10px;
        font-size: 36px;
        font-family: YSBTH;
        color: #FFE566;
      }
    }

    .cl-b5 {
      width: 100%;
      height: 186px;
      background: url('../../../assets/imgs/deck/page_ztgl/bg-ntgh.png');
      background-size: 100% 100%;
      margin-bottom: 1vh;
      .c-title {
        text-align: center;
        line-height: 45px;
        .c-text:nth-child(1) {
          margin-right: 20px;
        }
      }
      .c-content {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 140px;
        box-sizing: border-box;
        padding: 10px 0;
        .c-divider {
          display:block;
          height: 70%;
          width: 0;
          border-left: 1px dotted #00FFD9;
          opacity: 0.4;
        }
        &>div {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          &>div {
            line-height: 50px;
          }
        }
      }
      .c-text {
        font-size: 28px;
        color: #B1EDED;
      }
      .c-number {
        margin: 0 10px;
        font-size: 36px;
        font-family: YSBTH;
        color: #FFE566;
      }
    }

    #chart-clb3 {
      width: 100%;
      height: 260px;
    }

    .cl-b4 {
      #chart-clb4 {
        width: 100%;
        height: 140px;
      }
      .clb4-text {
        display: flex;
        justify-content: space-between;
        margin-top: 12px;
        &>li {
          text-align: center;
          &>span {
            font-size: 28px;
            color: #FFFFFF;
          }
          &>div {
            margin-top: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            &>span:nth-child(1) {
              font-size: 36px;
              font-family: YSBTH;
              color: #FFE566;
            }
            &>span:nth-child(2) {
              font-size: 20px;
              color: #FFFFFF;
              margin-left: 8px;
            }
          }
        }
      }
    }

  }
  .c-right {
    .cr-b1 {
      display: flex;
      justify-content: space-between;
      &>li {
        width: 237px;
        height: 217px;
        background: url('@/assets/imgs/deck/page_ztgl/bg-lssprz.png');
        background-size: cover;
        &>.text-label1 {
          text-align: center;
          line-height: 50px;
        }
        &>div {
          margin-top: 24px;
          display: flex;
          align-items: flex-start;
          justify-content: center;
          span:first-child {
            margin-right: 5px;
            font-size: 42px;
            font-family: YSBTH;
            color: #FFE566;
            line-height: 42px;
          }
          span:last-child {
            font-size: 20px;
            color: #FFFFFF;
            line-height: 42px;
          }
        }
      }
    }

    .cr-b2 {
      &>li {
        display: flex;
        align-items: flex-end;
        margin-bottom: 49px;
        &>img {
          width: 126px;
          height: 126px;
        }
        &>div {
          flex: 1;
          margin: 0 0 10px 15px;
          box-sizing: border-box;
          padding: 0 0 0 40px;
          background: url('@/assets/imgs/deck/page_ztgl/bg-lsjg.png') no-repeat;
          background-size: contain;
          background-position-y: 39%;
          &>span {
            display: block;
            margin-bottom: 27px;
            font-weight: bold;
            font-size: 28px;
            color: #FFFFFF;
          }
          &>div {
            display: flex;
            justify-content: space-between;
            &>div {
              width: 46%;
              min-width: fit-content;
              &>.text-label1 {
                opacity: 0.89;
              }
              &>div {
                display: flex;
                align-items: flex-start;
                margin-top: 10px;
              }
            }
          }
        }
      }
    }

    .cr-b3 {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      &>li {
        display: flex;
        align-items: center;
        margin-bottom: 44px;
        &>img {
          width: 100px;
          height: 117px;
        }
        &>div {
          width: 194px;
          height: 103px;
          margin-left: 20px;
          background: url('@/assets/imgs/deck/page_ztgl/bg-nzjy.png');
          background-size: cover;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 13px 0 9px;
          &>.text-label1 {
            line-height: 28px;
          }
          &>div {
            display: flex;
            align-items: flex-start;
          }
        }
      }
    }

    .cr-b4 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      #chart-crb4 {
        width: 48%;
        height: 100%;
      }
      .crb4-list {
        &>li {
          width: 351px;
          height: 106px;
          background: url('@/assets/imgs/deck/page_ztgl/bg-nyzt.png');
          background-size: cover;
          display: flex;
          flex-direction: column;
          align-items: center;
          &:not(:last-child) {
            margin-bottom: 29px;
          }
          &>.text-label1 {
            line-height: 38px;
          }
          &>div {
            display: flex;
            align-items: flex-start;
            margin-top: 20px;
          }
        }
      }
    }
  }
}
</style>