<template>
  <div>
    <div class="c-left">
      <div>
        <span class="box-title1">补贴基础情况</span>
        <span class="box-title2">补贴情况</span>
      </div>
      <div class="cl-b1">
        <div class="c-sort">
          <el-select v-model="sort_btqk.year" placeholder="年份" class="select-default" popper-class="select-default-popper" style="width: 32%;">
            <el-option v-for="item in 5" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <el-select v-model="sort_btqk.town" placeholder="镇" class="select-default" popper-class="select-default-popper" style="width: 32%;">
            <el-option v-for="item in 5" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <el-select v-model="sort_btqk.village" placeholder="村" class="select-default" popper-class="select-default-popper" style="width: 32%;">
            <el-option v-for="item in 5" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </div>
        <div class="c-sort">
          <el-select v-model="sort_btqk.hylx" placeholder="行业类型" class="select-default" popper-class="select-default-popper" style="width: 49%;">
            <el-option v-for="item in 5" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <el-select v-model="sort_btqk.btlx" placeholder="补贴类型" class="select-default" popper-class="select-default-popper" style="width: 49%;">
            <el-option v-for="item in 5" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </div>
        <ul class="c-main">
          <li v-for="item in listData_btqk" :key="item.type">
            <img v-if="item.unit==='个'" src="../../../../assets/imgs/deck/page_znfx/icon-agric.png" alt="">
            <img v-if="item.unit==='万'" src="../../../../assets/imgs/deck/page_znfx/icon-money.png" alt="">
            <img v-if="item.unit==='亩'" src="../../../../assets/imgs/deck/page_znfx/icon-area.png" alt="">
            <div>
              <span>{{ item.type }}</span>
              <div><span class="cm-num">{{ item.count }}</span><span>{{ item.unit }}</span></div>
            </div>
          </li>
        </ul>
      </div>
      <span class="box-title2">补贴对象清单</span>
      <div class="cl-b2">
        <el-input class="select-default" v-model="sort_btdx">
          <template #suffix><i class="input-suffix-search"></i></template>
        </el-input>
        <ul class="c-main">
          <li v-for="item in listData_btdx" :key="item.id" @click="handleBtdxClick(item)" :class="{'highlight': listBtdxCurrent===item.id}">
            <div class="row-sb">
              <span class="rs-title">{{ item.name }}</span>
              <span class="rs-num">{{ item.subSidy }}</span>
            </div>
            <div class="row-sb">
              <span>{{ item.code }}</span>
              <span>补贴(万元)</span>
            </div>
            <div class="row-sb">
              <span>{{ item.town + '镇' + item.village + '村' }}</span>
            </div>
            <ul>
              <li v-for="item2 in item.subSidyArr" :key="item2">{{ item2 }}</li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div class="c-right">
      <div>
        <span class="box-title1">补贴分析</span>
        <span class="box-title2">水稻补贴分析</span>
      </div>
      <div class="cr-b1">
        <div class="cr-sort">
          <el-select v-model="sort_sdbt" class="select-default" popper-class="select-default-popper">
            <el-option label="全部乡镇" value="全部乡镇"></el-option>
          </el-select>
        </div>
        <div id="chart-sdbt"></div>
      </div>
      <span class="box-title2">蔬菜补贴分析</span>
      <div class="cr-b2">
        <div class="cr-sort">
          <el-select v-model="sort_scbt" class="select-default" popper-class="select-default-popper">
            <el-option v-for="item in 5" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </div>
        <span class="title-mesh">规模化基地</span>
        <ul class="c-part1">
          <li v-for="item in data_scbt.gmhjd" :key="item.name">
            <span class="cp-title">{{ item.name }}</span>
            <div><span class="cp-cata">补贴面积</span><span class="cp-num">{{ item.area }}</span><span>亩</span></div>
            <div><span class="cp-cata">补贴金额</span><span class="cp-num">{{ item.money }}</span><span>万</span></div>
          </li>
        </ul>
        <span class="title-mesh">产能提升</span>
        <ul class="c-part2">
          <li v-for="item in data_scbt.cnts" :key="item.name">
            <span class="cp-title">{{ item.name }}</span>
            <div><span class="cp-cata">补贴面积</span><span class="cp-num">{{ item.area }}</span><span>亩</span></div>
            <div><span class="cp-cata">补贴金额</span><span class="cp-num">{{ item.money }}</span><span>万</span></div>
          </li>
        </ul>
      </div>
      <span class="box-title2">补贴汇总分析</span>
      <div class="cr-b3">
        <div class="cr-sort">
          <el-select v-model="sort_bthz" class="select-default" popper-class="select-default-popper">
            <el-option v-for="item in 5" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </div>
        <div id="chart-bthz"></div>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
import { setSdbtfx, setBthzfx } from '@/echarts/options'

export default {
  name: 'ZnfxSnbt',
  data() {
    return {
      sort_btqk: {
        year: '',
        town: '',
        village: '',
        hylx: '',
        btlx: '',
      },
      listData_btqk: [
        { type: '补贴农户总数',count: '*', unit: '个' },
        { type: '补贴合作社/企业',count: '*', unit: '个' },
        { type: '农户补贴金额',count: '*', unit: '万' },
        { type: '合作社补贴金额',count: '*', unit: '万' },
        { type: '农户补贴面积',count: '*', unit: '亩' },
        { type: '合作社补贴面积',count: '*', unit: '亩' },
      ],
      sort_btdx: '',
      listData_btdx: [],
      listBtdxCurrent: null,
      sort_sdbt: '全部乡镇',
      chartData_sdbt: [
        { year: '2020', money_zz: 20, money_jcy: 65, money_jzb: 42, area_zz: 1235, area_jcy: 1952, area_jzb: 2456 },
        { year: '2021', money_zz: 26, money_jcy: 78, money_jzb: 51, area_zz: 1426, area_jcy: 2012, area_jzb: 2608 },
        { year: '2022', money_zz: 30, money_jcy: 89, money_jzb: 57, area_zz: 1546, area_jcy: 2156, area_jzb: 2921 },
      ],
      sort_scbt: 2022,
      data_scbt: {
        gmhjd: [
          { name: '高品质蔬菜规模化\n签约基地', area: "*", money: "*" },
          { name: '特色蔬菜规模化\n签约基地', area: "*", money: "*" },
        ],
        cnts: [
          { name: '绿色防控技术', area: "*", money: "*" },
          { name: '土壤改良修复技术', area: "*", money: "*" },
          { name: '水肥一体化技术', area: "*", money: "*" },
        ]
      },
      sort_bthz: 2022,
      chartData_bthz: [
        { cata: '水稻', area: 100, money: 20 },
        { cata: '白山羊', area: 120, money: 30 },
        { cata: '清水蟹', area: 85, money: 16 },
        { cata: '蔬菜', area: 80, money: 14 },
      ]
    }
  },
  created() {
    for(let i=0; i<20; i++) {
      this.listData_btdx.push(
        { id: i, name: '上海嘉定维高蔬果专业合作社'+(i+1), subSidy: '9999.00', code: '310230XXXXXXXX1272', town: 'XX', village: 'XX', subSidyArr: ['水稻机插秧补贴','水稻种植补贴'] }
      )
    }
    
  },
  mounted() {
    setSdbtfx(document.getElementById('chart-sdbt'), this.chartData_sdbt)
    setBthzfx(document.getElementById('chart-bthz'), this.chartData_bthz)
  },
  methods: {
    handleBtdxClick(item) {
      this.listBtdxCurrent = item.id
    }
  },
  watch: {

  }
}
</script>

<style lang="scss" scoped>
.c-left {
  left: 260px;
}

.cr-sort {
  text-align: right;
  .select-default {
    width: 30%;
  }
}

.cl-b1 {
  .c-sort {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
  }
  .c-main {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 23px;
    li {
      height: 128px;
      width: calc(50% - 9px);
      margin-bottom: 18px;
      border-radius: 2px;
      background: rgba($color: #158C6C, $alpha: 0.2);
      display: flex;
      align-items: center;
      font-size: 28px;
      color: #FFFFFF;
      img {
        width: 85px;
        height: 85px;
        margin: 0 20px 0 15px;
      }
      .cm-num {
        font-size: 36px;
        font-family: YSBTH;
        color: #FFE359;
        margin-right: 10px;
      }
      &>div>div {
        display: flex;
        align-items: center;
        margin-top: 8px;
      }
    }
  }
}

.cl-b2 {

  .c-main {
    height: 47.5vh;
    overflow-y: auto;
    margin-top: 27px;
    padding-right: 10px;
    &>li {
      padding: 28px;
      background: rgba(0,255,213,0.18);
      margin-bottom: 24px;
      cursor: pointer;
      &:hover {
        filter: brightness(1.1);
      }
      &.highlight {
        background: rgba(255,255,0,0.15);
        &>ul>li {
          background: rgba($color: #8C8C15, $alpha: 0.6);
        }
      }
      &>ul {
        display: flex;
        flex-wrap: wrap;
        &>li {
          width: fit-content;
          height: 48px;
          padding: 0 10px;
          margin: 14px 14px 0 0;
          background: rgba($color: #158C6C, $alpha: 0.6);
          line-height: 48px;
          font-size: 28px;
          color: #FFFFFF;
        }
      }
      span {
        font-size: 28px;
        color: #FFFFFF;
      }
      .row-sb {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }
      .rs-num {
        font-size: 36px;
        font-family: YSBTH;
        color: #FFE359;
      }
      .rs-title {
        font-weight: bold;
      }
    }
  }
}

.cr-b1 {
  margin-bottom: 20px;
  #chart-sdbt {
    margin-top: 15px;
    width: 100%;
    height: 20vh;
  }
}

.cr-b2 {
  margin-bottom: 20px;
  .title-mesh {
    display: block;
    height: 55px;
    padding-left: 20px;
    margin: 15px 0;
    background: url('../../../../assets/imgs/deck/page_znfx/bg-mesh.png');
    background-size: 100% 100%;
    line-height: 55px;
    font-size: 28px;
    color: #FFFFFF;
  }
  .c-part1 {
    &>li {
      width: 48%;
      height: 226px;
      background: url('../../../../assets//imgs/deck/page_znfx/bg-gmhjd.png');
    }
  }
  .c-part2 {
    &>li {
      width: 32.5%;
      height: 259px;
      background: url('../../../../assets//imgs/deck/page_znfx/bg-cnts.png');
      .cp-cata {
        width: 100%;
      }
      &>div>.cp-num {
        margin-left: 20px;
      }
    }
  }
  .c-part1, .c-part2 {
    display: flex;
    justify-content: space-between;
    &>li {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 20px 0;
      &>div {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-left: 20px;
      }
      span {
        font-size: 28px;
        color: #FFFFFF;
      }
      .cp-title {
        white-space: pre-wrap;
        text-align: center;
        line-height: 36px;
      }
      .cp-num {
        font-size: 36px;
        font-family: YSBTH;
        color: #FFE359;
        margin: 0 10px;
      }
      .cp-cata::before {
        content: '';
        display: inline-block;
        width: 13px;
        height: 13px;
        background: url('../../../../assets/imgs/deck/page_znfx/icon-triangle.png');
        background-size: 100% 100%;
        margin-right: 10px;
      }
    }
  }
}

.cr-b3 {
  #chart-bthz {
    margin-top: 15px;
    width: 100%;
    height: 15vh;
  }
}
</style>