<template>
  <div>
    <div class="c-left">
      <span class="box-title1">农业生产用地</span>
      <ul class="cl-b1">
        <li v-for="item in data_nyscyd" :key="item.title">
          <img :src="item.img" alt="">
          <div>
            <span>{{ item.title }}</span>
            <!--            <span v-if="item.updateTime">{{ '(更新时间'+item.updateTime+')' }}</span>-->
            <div><span>{{ item.value }}</span><span>{{ item.unit }}</span></div>
          </div>
        </li>
      </ul>
      <span class="box-title2">农用地变化趋势分析</span>
      <div id="chart-bhqs"></div>
      <span class="box-title2">土地类型统计</span>
      <div class="cl-b2">
        <div class="clb2-btns">
          <el-select v-model="form_sta1.town" placeholder="请选择镇" class="select-default"
            popper-class="select-default-popper">
            <el-option value="">全部镇</el-option>
            <el-option v-for="item, index in townList" :key="index" :value="item">{{ item }}</el-option>
          </el-select>
          <el-select v-model="form_sta1.village" placeholder="请选择村" class="select-default"
            popper-class="select-default-popper">
            <el-option value="">全部村</el-option>
            <el-option v-for="item, index in villageList" :key="index" :value="item">{{ item }}</el-option>
          </el-select>
          <div class="button-default" @click="handleIsAllClick">查看全部</div>
          <div class="button-default" @click="exportLand">导出</div>
        </div>
        <el-table :data="isAll ? data_tdlxtj : data_tdlxtj.slice(0, 6)" class="table-default" @row-click="handleRowClick" height="30vh">
          <el-table-column label="土地类型" min-width="120" show-overflow-tooltip>
            <template #default="scope">
              <i class="color-dot" :style="'background:' + scope.row.typeColor + ';'"></i>
              <span :class="{ 'isClick': subStatisticsRow === scope.row.type }">{{ scope.row.type }}</span>
            </template>
          </el-table-column>
          <el-table-column label="地块数量(块)" min-width="100" show-overflow-tooltip>
            <template #default="scope">
              <span class="td-emphasis">{{ scope.row.count }}</span>
            </template>
          </el-table-column>
          <el-table-column label="面积(万亩)" min-width="100" show-overflow-tooltip>
            <template #default="scope">
              <span class="td-emphasis">{{ scope.row.area }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span class="box-title2">数据统计</span>
      <div class="cr-b2">
        <div class="crb2-row2">
          <span>单位(个)</span>
        </div>
        <ul class="crb2-row3">
          <li v-for="item in data_sta2" :key="item.label">
            <span>{{ item.areaCnt }}</span><span>{{ item.areaType }}</span>
          </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="crb1-top">
          <div class="crb1t-title"><span>经营主体数量（已梳理）</span><span>单位：个</span></div>
          <div class="crb1t-counter">
            <span v-for="item, index in data_sta1.total" :key="index">
              <i v-if="(data_sta1.total.length - index) % 3 === 0">,</i>
              <div>{{ item }}</div>
            </span>
          </div>
        </div>
        <div id="crb1-chart"></div>
      </div>
      <span class="box-title2">数据统计</span>
      <div class="cr-b3">
        <div class="crb3-form">
          <el-select v-model="form_sta3.town" placeholder="请选择镇" class="select-default"
            popper-class="select-default-popper">
            <el-option value="">全部镇</el-option>
            <el-option v-for="item, index in townList" :key="index" :value="item">{{ item }}</el-option>
          </el-select>
          <el-select v-model="form_sta3.village" placeholder="请选择村" class="select-default"
            popper-class="select-default-popper">
            <el-option value="">全部村</el-option>
            <el-option v-for="item, index in villageList2" :key="index" :value="item">{{ item }}</el-option>
          </el-select>
          <el-select v-model="form_sta3.type" placeholder="请选择主体类型" class="select-default"
            popper-class="select-default-popper">
            <el-option value="">全部</el-option>
            <el-option v-for="item, index in zhutiTypeList" :key="index" :value="item">{{ item }}</el-option>
          </el-select>
          <el-input v-model="form_sta3.name" placeholder="请输入经营主体名称" class="select-default"
            popper-class="select-default-popper" @keyup.enter.native="getZhutiData">

          </el-input>
          <span class="button-default" @click="exportZhuti">导出</span>
        </div>
        <el-table :data="data_sta3" class="table-default" height="37vh">
          <el-table-column label="镇" min-width="50" show-overflow-tooltip>
            <template #default="scope">
              <span>{{ scope.row.town }}</span>
            </template>
          </el-table-column>
          <el-table-column label="村" min-width="50" show-overflow-tooltip>
            <template #default="scope">
              <span>{{ scope.row.village }}</span>
            </template>
          </el-table-column>
          <el-table-column label="主体类型" min-width="60" show-overflow-tooltip>
            <template #default="scope">
              <span>{{ scope.row.ztType }}</span>
            </template>
          </el-table-column>
          <el-table-column label="经营主体名称" min-width="85" show-overflow-tooltip>
            <template #default="scope">
              <span>{{ scope.row.ztName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="面积(亩)" min-width="60" show-overflow-tooltip>
            <template #default="scope">
              <span class="td-emphasis">{{ +scope.row.areaMu.toFixed(2) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { setJyzt, setNydbhqs } from '@/echarts/options'
import {
  GetAreaRangeStatistics,
  GetJyztSta,
  GetLandStatistics,
  GetLandStatisticsExport,
  GetTownList, GetZhutiList, GetZhutiListExport,
  GetHistoryLand
} from '@/services/znfx'
import { zhutiTypeMap } from '@/utils/data/fieldsMapper'
import { GetAgriculturalLand } from "@/services/ztgl";
import { myBridge } from "@/utils/map/map";
import { locateCM, emptyAllLayers } from '@/utils/map/AddLayer';

export default {
  name: 'ZnfxNyd',
  data() {
    return {
      data_nyscyd: [
        { title: '总面积', value: '48.63', unit: '万亩', updateTime: '2023/3', img: require('@/assets/imgs/deck/page_nygh/icon-zmj.png') },
        { title: '地块总数', value: '1482', unit: '块', updateTime: '', img: require('@/assets/imgs/deck/page_nygh/icon-dkzs.png') },
      ],
      form_sta1: {
        town: '',
        village: ''
      },
      types: [
        { type: '粮田', typeColor: '#D97E00', count: '0', area: '0', key: 'N0101' },
        { type: '果园', typeColor: '#969600', count: '0', area: '0', key: 'N0102' },
        { type: '菜田', typeColor: '#D5848B', count: '0', area: '0', key: 'N0103' },
        { type: '经作田', typeColor: '#980220', count: '0', area: '0', key: 'N0201' },
        { type: '养殖(畜牧)', typeColor: '#E8B707', count: '0', area: '0', key: 'N0901' },
        { type: '养殖(水产)', typeColor: '#6697FE', count: '0', area: '0', key: 'N0902' },
        { type: '林地', typeColor: '#55efc4', count: '13401', area: '13401', key: 'N03' },
        { type: '零星用地(其他)', typeColor: '#6c5ce7', count: '13401', area: '13401', key: 'N0109' },
        { type: '零星用地(已征地)', typeColor: '#3ae374', count: '13401', area: '13401', key: 'N0110' },
        { type: '零星用地(自留地/集体地)', typeColor: '#18dcff', count: '13401', area: '13401', key: 'N0111' },
      ],
      data_tdlxtj: [
        { type: '粮田', typeColor: '#D97E00', count: 0, area: 0 },
        { type: '果园', typeColor: '#969600', count: 0, area: 0 },
        { type: '菜田', typeColor: '#D5848B', count: 0, area: 0 },
        { type: '经作田', typeColor: '#980220', count: 0, area: 0 },
        { type: '养殖(畜牧)', typeColor: '#E8B707', count: 0, area: 0 },
        { type: '养殖(水产)', typeColor: '#6697FE', count: 0, area: 0 },
        { type: '林地', typeColor: '#55efc4', count: 0, area: 0 },
        { type: '零星用地', typeColor: '#6c5ce7', count: 0, area: 0 },
        // { type: '零星用地(已征地)', typeColor: '#3ae374', count: '13401', area: '13401' },
        // { type: '零星用地(自留地/集体地)', typeColor: '#18dcff', count: '13401', area: '13401' },
      ],
      data_tdfb: [
        { townName: '陈家镇', total: '1099', liangtian: '256', guoyuan: '256', caitian: '256', jingzuotian: '256', xumu: '256', shuichan: '256' },
        { townName: '新河镇', total: '1099', liangtian: '256', guoyuan: '256', caitian: '256', jingzuotian: '256', xumu: '256', shuichan: '256' },
        { townName: '祝桥镇', total: '1099', liangtian: '256', guoyuan: '256', caitian: '256', jingzuotian: '256', xumu: '256', shuichan: '256' },
        { townName: '新村乡', total: '1099', liangtian: '256', guoyuan: '256', caitian: '256', jingzuotian: '256', xumu: '256', shuichan: '256' },
        { townName: '老巷镇', total: '1099', liangtian: '256', guoyuan: '256', caitian: '256', jingzuotian: '256', xumu: '256', shuichan: '256' },
        { townName: '老巷镇', total: '1099', liangtian: '256', guoyuan: '256', caitian: '256', jingzuotian: '256', xumu: '256', shuichan: '256' },
        { townName: '老巷镇', total: '1099', liangtian: '256', guoyuan: '256', caitian: '256', jingzuotian: '256', xumu: '256', shuichan: '256' },
        { townName: '老巷镇', total: '1099', liangtian: '256', guoyuan: '256', caitian: '256', jingzuotian: '256', xumu: '256', shuichan: '256' },
        { townName: '老巷镇', total: '1099', liangtian: '256', guoyuan: '256', caitian: '256', jingzuotian: '256', xumu: '256', shuichan: '256' },
        { townName: '老巷镇', total: '1099', liangtian: '256', guoyuan: '256', caitian: '256', jingzuotian: '256', xumu: '256', shuichan: '256' },
      ],
      data_sta1: {
        total: '0',
        chartData: [
          // { name: '农业合作社', area: '90', count: '96' },
          // { name: '家庭农场', area: '55', count: '76' },
          // { name: '农业企业', area: '77', count: '85' },
          // { name: '农业(大户)', area: '46', count: '63' },
          // { name: '农业(散户)', area: '72', count: '61' },
          // { name: '村集体', area: '65', count: '79' },
          // { name: '其他', area: '75', count: '87' },
        ]
      },
      sta2Current: 'lt',
      data_sta2: [
        { areaType: '500亩以上', areaCnt: '0' },
        { areaType: '100-500亩', areaCnt: '0' },
        { areaType: '50-100亩', areaCnt: '0' },
        { areaType: '10-50亩', areaCnt: '0' },
        { areaType: '10亩以下', areaCnt: '0' },
      ],
      form_sta3: {
        town: '',
        village: '',
        type: '',
        name: ''
      },
      data_sta3: [
        { town: 'XXX', village: 'XXX', ztType: 'XXX', ztName: 'XXX', areaMu: 0 },
        { town: 'XXX', village: 'XXX', ztType: 'XXX', ztName: 'XXX', areaMu: 0 },
        { town: 'XXX', village: 'XXX', ztType: 'XXX', ztName: 'XXX', areaMu: 0 },
        { town: 'XXX', village: 'XXX', ztType: 'XXX', ztName: 'XXX', areaMu: 0 },
        { town: 'XXX', village: 'XXX', ztType: 'XXX', ztName: 'XXX', areaMu: 0 },
        { town: 'XXX', village: 'XXX', ztType: 'XXX', ztName: 'XXX', areaMu: 0 },
      ],
      subStatisticsShow: false,
      subStatisticsData: [],
      subStatisticsCurrent: '',
      subStatisticsRow: '',

      townList: [],
      villageList: [],
      villageList2: [],
      isAll: false,
      currentLandType: "",
      zhutiTypeList: ["合作社", "家庭农场", "农业企业", "农户（散户）", "农户（大户）", "村集体", "其他"],
      landHistoryData: []
    }
  },
  methods: {
    initMap() {
      emptyAllLayers()
      locateCM()
    },
    handleRowClick(row) {
      console.log(row)
      if (row.type === this.subStatisticsRow) {
        this.subStatisticsShow = false
        this.subStatisticsRow = ''
      } else {
        this.subStatisticsData = [
          { type: row.type + '-1', count: 1231, area: 1231 },
          { type: row.type + '-2', count: 965, area: 965 },
          { type: row.type + '-3', count: 685, area: 685 }
        ]
        this.subStatisticsCurrent = row.type + '-1'
        this.subStatisticsRow = row.type
        this.subStatisticsShow = true

        this.getLandType2Data()
      }

      this.getAreaRangeData(this.subStatisticsRow)
      // console.log(this.subStatisticsRow);
      // let i = this.types.filter(item => item.type === this.subStatisticsRow)
      // let where = "1=1"
      // if(i.length > 0){
      //   where = "landtype = '" + i[0].key + "'"
      // }
      // let params1 = {
      //   ActionName: "LayerDefinitions",
      //   Parameters: {
      //     "title": "nydxz",
      //     "sql": where,
      //     "layerid": 0,
      //     "type": "shc_map"
      //   },
      // };
      // console.log(params1);
      // myBridge.bridgeContent.Invoke(params1);
    },
    getLandType2Data() {

    },
    changeLeftTown() {
      GetTownList(2, this.form_sta1.town).then(res => {
        this.villageList = res.data
        this.form_sta1.village = ""
      })

      this.getLandData()
    },
    getLandData() {
      GetLandStatistics("", this.form_sta1.town, this.form_sta1.village).then(res => {
        console.log(res.data);
        this.data_tdlxtj.forEach(i => {
          if (i.type === '零星用地') {
            res.data.forEach(j => {
              if (j.landType.indexOf('零星用地') !== -1) {
                i.count += j.landCnt
                i.area += j.landAreaMu
              }
            })
            i.area = +i.area.toFixed(2)
          } else {
            res.data.find(j => {
              if (i.type === j.landType) {
                i.count = j.landCnt
                i.area = +j.landAreaMu.toFixed(2)
              }
            })
          }
        })
      })
      this.getAreaRangeData(this.subStatisticsRow)
    },
    getAreaRangeData(val) {
      GetAreaRangeStatistics(val, this.form_sta1.town, this.form_sta1.village).then(res => {
        this.data_sta2 = res.data
      })
    },
    handleIsAllClick() {
      this.isAll = !this.isAll
    },
    exportLand() {
      GetLandStatisticsExport("", this.form_sta1.town, this.form_sta1.village).then(res => {
        // console.log(res);
        window.open(res, "_blank", "", true)
      })
    },
    exportZhuti() {
      GetZhutiListExport(
        this.form_sta3.town,
        this.form_sta3.village,
        this.form_sta3.name,
        this.form_sta3.type,
      ).then(res => {
        // console.log(res);
        window.open(res, "_blank", "", true)
      })
    },
    changeRightTown() {
      GetTownList(2, this.form_sta3.town).then(res => {
        this.villageList2 = res.data
        this.form_sta3.village = ""
      })

      this.getZhutiData()
    },
    getZhutiData() {
      console.log(111);
      GetZhutiList(
        1, 20,
        this.form_sta3.town,
        this.form_sta3.village,
        this.form_sta3.name,
        this.form_sta3.type,
      ).then(res => {
        this.data_sta3 = res.data.list
      })
    },
    getHistoryLand() {
      GetHistoryLand().then(res => {
        this.landHistoryData = res.data || []
        setNydbhqs(document.getElementById('chart-bhqs'), this.landHistoryData)
      })
    }
  },
  mounted() {
    this.initMap()
    let params = {
      ActionName: "AddLayer",
      Parameters: {
        id: "nydxz",
        title: "nydxz",
        visible: true,
        opacity: 1,
        url: "http://10.121.226.95:8081/OneMapServer/rest/services/Agri_land_CM/MapServer",
        type: "shc_map",
        token_type: "token_nw"
      },
    };
    console.log('添加图层---', params)
    myBridge.bridgeContent.Invoke(params);
    GetJyztSta().then(res => {
      let totalCount = 0
      res.data.Result.forEach(i => {
        if (i.querytype == '1') {
          totalCount += i.count
          this.data_sta1.chartData.push({
            name: zhutiTypeMap.get(i.zhutitype),
            count: i.count,
            area: Math.round(i.totalarea)
          })
        }
      })
      this.data_sta1.total = totalCount.toString()
      setJyzt(document.getElementById('crb1-chart'), this.data_sta1.chartData)
    })

    GetAgriculturalLand().then(res => {
      let areaTotal = 0
      let count = 0
      let arr = ["N0101", "N0102", "N0103", "N0201", "N0901", "N0902"]
      let data = res.data.Result
      data.forEach(i => {
        if (arr.includes(i.landtype)) {
          areaTotal += i.areamu
          count += i.count
        }
      })
      // console.log(res);
      areaTotal = (areaTotal / 10000).toFixed(2)
      this.data_nyscyd[0].value = areaTotal
      this.data_nyscyd[1].value = count
    })

    GetTownList(1, "").then(res => {
      this.townList = res.data
    })

    this.getLandData()
    this.getZhutiData()
    this.getHistoryLand()
  },
  destroyed() {
    emptyAllLayers()
  },
  computed: {
    table2MinWidth() {
      return document.body.clientWidth / 7680 * 330
    },
  },
  watch: {
    'form_sta1.town': {
      handler() {
        this.changeLeftTown()
      }
    },
    'form_sta1.village': {
      handler() {
        this.getLandData()
      }
    },
    'form_sta3.town': {
      handler() {
        this.changeRightTown()
      }
    },
    'form_sta3.village': {
      handler() {
        this.getZhutiData()
      }
    },
    'form_sta3.type': {
      handler() {
        this.getZhutiData()
      }
    },
  }
}
</script>

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

.cl-b1 {
  display: flex;
  justify-content: space-between;

  &>li {
    display: flex;
    align-items: center;

    &>img {
      width: 162px;
      height: 145px;
    }

    &>div {
      height: 110px;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      &>span:nth-child(1) {
        font-size: 28px;
        color: #FFFFFF;
      }

      &>span:nth-child(2) {
        font-size: 16px;
        color: #FFFFFF;
      }

      &>div {
        display: flex;
        align-items: flex-start;

        span:first-child {
          font-size: 42px;
          font-family: YSBTH;
          color: #FFE566;
          line-height: 36px;
        }

        span:last-child {
          font-size: 20px;
          color: #FFFFFF;
          line-height: 36px;
          margin-left: 8px;
        }
      }
    }
  }
}

#chart-bhqs {
  height: 20vh;
  width: 100%;
}

.cl-b2 {
  .clb2-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;

    &>div:not(:last-child) {
      margin-right: 20px;
    }

  }
}

.cr-b1 {
  .crb1-top {
    .crb1t-title {
      text-align: right;

      span {
        font-size: 28px;
        color: #FFFFFF;
      }

      span:last-child {
        margin-left: 90px
      }
    }

    .crb1t-counter {
      display: flex;
      justify-content: center;
      margin-top: 36px;

      &>span {
        position: relative;

        &>div {
          width: 64px;
          height: 89px;
          background: url('@/assets/imgs/deck/page_nyxz/bg-number.png');
          background-size: cover;
          margin: 0 18px;
          font-size: 42px;
          font-family: YSBTH;
          color: #FFE359;
          line-height: 82px;
          text-align: center;
        }

        &>i {
          position: absolute;
          left: -4px;
          bottom: 14px;
          font-size: 38px;
          font-family: YSBTH;
          color: #FFFFFF;
        }
      }
    }
  }

  #crb1-chart {
    width: 100%;
    height: 24vh;
    margin-top: 1vh;
  }
}

.cr-b2 {
  .crb2-row2 {
    text-align: right;

    &>span {
      font-size: 20px;
      color: #FFFAEE;
    }
  }

  .crb2-row3 {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

    &>li {
      width: 142px;
      height: 146px;
      background: url('@/assets/imgs/deck/page_nyxz/bg-areacata.png');
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      &>span:first-child {
        font-size: 32px;
        font-family: YSBTH;
        color: #FFE359;
        line-height: 32px;
      }

      &>span:last-child {
        font-size: 20px;
        color: #FFFFFF;
        line-height: 40px;
      }
    }
  }
}

.cr-b3 {
  .crb3-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;

    .select-default {

      &:nth-child(1),
      &:nth-child(2),
      &:nth-child(3) {
        width: calc(33% - 10px);
        margin-bottom: 12px;
      }

      &:nth-child(4) {
        width: calc(100% - 150px);
      }
    }

  }
}

.isClick {
  color: orange;
}

::v-deep {
  .el-table th.el-table__cell>.cell {
    padding-right: 0;
  }

  td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>