<template>
  <div id="page-nyxz" class="deck-pages">
    <div class="c-right">
      <span class="box-title1">农业生产用地</span>
      <ul class="cr-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-crb2"></div>
      <span class="box-title2">土地类型统计</span>
      <div class="cr-b3">
        <div class="crb3-btns">
          <el-select v-model="form_sta.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_sta.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>
          <span class="button-default" @click="handleIsAllClick">查看全部</span>
          <span class="button-default" @click="exportLand">导出</span>
        </div>
        <el-table :data="isAll ? data_tdlxtj : data_tdlxtj.slice(0, 6)" class="table-default">
          <el-table-column label="土地类型" min-width="120" show-overflow-tooltip>
            <template #default="scope">
              <i class="color-dot" :style="'background:'+ scope.row.typeColor+';'"></i>
              <span>{{ 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>

    </div>
    <div class="search-wrapper" :class="{'to-left': pointSearchShow}">
      <div class="search">
        <div class="se">
          <div @click.stop="isSearchSelectShow = !isSearchSelectShow">
            <span class="text">{{currentSearchI? selectArr.find(i => i.value === currentSearchI)?.label: '请选择'}} </span>
            <span class="row" :class="{isExpand:isSearchSelectShow}"><img src="@/assets/imgs/deck/page_nyxz/arrow.png" alt=""></span>
            <span class="divider"></span>
          </div>
          <ul class="options" v-if="isSearchSelectShow">
            <li :class="{'active':currentSearchI === item.value}" @click="changeSelect(item)" v-for="item in selectArr" :key="item.value">{{item.label}}</li>
          </ul>
        </div>
        <input type="text" v-model="currentSearchKeyWord">
        <span @click="searchK" class="search-btn">
          <img src="@/assets/imgs/deck/page_nyxz/search.png" alt="">
        </span>
      </div>
      <div class="search-result" v-if="resShow">
        <div class="scroll">
          <template v-if="(searchRes.length > 0 || searchAArr.length > 0)">
            <ul>
              <!-- <li @click="position(item)" v-for="item in currentSearchI === 'dmdz'?searchRes:searchAArr" :key="item.name"> -->
              <li @click="position(item)" v-for="item in searchAArr" :key="item.name">
                <img src="@/assets/imgs/deck/page_nyxz/position.png" alt="">
                <span>{{item.name || item.zhutiname}}</span>
              </li>
            </ul>
          </template>
          <div v-else class="no-data">无数据</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMapState ,mapMapMutations } from "@/utils/store-map-unit";
import { setTdfbqk } from '@/echarts/options'
import { addPointMapQuery, addPointMapSingle } from "@/utils/map/AddLayer";
import { searchAddress } from "@/services/ny";
import { GetLandStatistics, GetLandStatisticsExport, GetTownList } from '@/services/znfx'
import { GetAgriculturalLand } from "@/services/ztgl";

export default {
  name: 'PageNyxz',
  props: {
    pointSearchShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      data_nyscyd: [
        { title: '总面积', value: '0', unit: '万亩', updateTime: '', img: require('@/assets/imgs/deck/page_nygh/icon-zmj.png') },
        { title: '地块总数', value: '0', unit: '块', updateTime: '', img: require('@/assets/imgs/deck/page_nygh/icon-dkzs.png') },
      ],
      chartData_tdfb: [
        { name: '粮田', value: '0' },
        { name: '果园', value: '0' },
        { name: '菜田', value: '0' },
        { name: '经作田', value: '0' },
        { name: '养殖(畜牧)', value: '0' },
        { name: '养殖(水产)', value: '0' },
      ],
      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 },
      ],
      currentSearchI:'dmdz',
      currentSearchKeyWord:'',
      selectArr:[
        {label: '地名地址',value:'dmdz'},
        {label: '主体名称',value:'ztmc'},
        {label: '地块编号',value:'dkbh'},
      ],
      searchRes:[],
      isSearchSelectShow:false,
      resShow: false,
      form_sta: {
        town: '',
        village: ''
      },
      townList: [],
      villageList: [],
      isAll: false,
    }
  },
  mounted() {
    GetTownList(1, "").then(res => {
      this.townList = res.data
    })
    this.getLandData()
    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
    })
  },
  methods: {
    changeSelect(item) {
      if (item.value !== this.currentSearchI) {
        this.currentSearchI = item.value
        this.searchRes = []
        this['changesearchAArr']([])
        this.resShow = false
        this.currentSearchKeyWord = ''
        this.isSearchSelectShow = false
      }
    },
    ...mapMapMutations({
      'changesearchAArr':'changesearchAArr'
    }),
    position(item) {
      if (this.currentSearchI === 'ztmc'){
        addPointMapQuery(`zhutiname='${item.zhutiname}'`,true)
      }else if (this.currentSearchI === 'dmdz'){
        addPointMapSingle([item.mapx,item.mapy],true)
      }
    },
    searchK() {
      function getToken_map(host, username, password) {
        let xmlhttp = new XMLHttpRequest();
        xmlhttp.open('GET', host + '/RemoteTokenServer?request=getToken&username=' + username + '&password=' + password + '&clientid=ref..&expiration=14400', false);
        xmlhttp.send();
        return xmlhttp.responseText;
      }
      let host_nw = "http://10.121.226.95:8081";
      let username_nw = "cmuser";
      let password_nw = "abc123";
      // let server_nw = "http://10.121.226.95:8081/OneMapServer/rest/services";
      let m_token_nw = getToken_map(host_nw, username_nw, password_nw);
      m_token_nw = m_token_nw.substr(0, m_token_nw.length-2);
      // console.log("m_token_nw", m_token_nw);
      switch (this.currentSearchI) {
        case 'ztmc':
          addPointMapQuery(`zhutiname like '%${this.currentSearchKeyWord}%'`)
          setTimeout(() => {
            this.searchRes = this.searchAArr
            this.resShow = true
          },0)
          break
        case 'dkbh':
          addPointMapQuery(`dkid='${this.currentSearchKeyWord}'`,true)
          this.resShow = true
        break
        case 'dmdz':
          searchAddress(this.currentSearchKeyWord,m_token_nw).then(res => {
            var infos = res.querySelectorAll('Table');
            if (infos.length > 0) {
              let point = []
              point.push(infos[0].querySelector('POINT_X')?.innerHTML);
              point.push(infos[0].querySelector('POINT_Y')?.innerHTML);
              addPointMapSingle(point,true)
            }
          })
      }
    },
    changeLeftTown(){
      GetTownList(2,this.form_sta.town).then(res => {
        this.villageList = res.data
        this.form_sta.village = ""
      })
      this.getLandData()
    },
    getLandData(){
      GetLandStatistics("",this.form_sta.town,this.form_sta.village).then(res => {
        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.chartData_tdfb.forEach(i => {
          res.data.find(j => {
            if(i.name===j.landType) {
              i.value = +j.landAreaMu.toFixed(2)
            }
          })
        })
        this.$nextTick(()=> {
          setTdfbqk(document.getElementById('chart-crb2'), this.chartData_tdfb)
        })
      })
    },
    exportLand() {
      GetLandStatisticsExport("", this.form_sta.town, this.form_sta.village).then(res => {
        // console.log(res);
        window.open(res, "_blank", "", true)
      })
    },
    handleIsAllClick() {
      this.isAll = !this.isAll
    },
  },
  watch: {
    'form_sta.town': {
      handler() {
        this.changeLeftTown()
      }
    },
    'form_sta.village': {
      handler() {
        this.getLandData()
      }
    },
  },
  computed: {
    ...mapMapState({
      'searchAArr':'searchAArr'
    }),
  }
}
</script>

<style lang="scss" scoped>
#page-nyxz {

  .c-right {
    .cr-b1 {
      display: flex;
      justify-content: space-between;
      &>li {
        display: flex;
        align-items: center;
        &>img {
          width: 154px;
          height: 132px;
        }
        &>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-crb2 {
      width: 100%;
      height: 26vh;
    }

    .cr-b3 {
      .crb3-btns {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
        .el-select {
          width: 28%;
        }
      }
    }
  }
  
  .search-wrapper {
    position: absolute;
    top: 185px;
    right: 1000px;
    transition: all 0.5s ease;
    &.to-left {
      right: 1740px;
    }
    .search-result{
      // position: absolute;
      // top: 400px;
      // left: 1922px;
      width: 690px;
      color: #fff;
      font-size: 28px;
      line-height: 2.5;
      border: 1px solid #7FFFEA;
      background: rgba(0,58,64,0.8);
      box-sizing: border-box;
      padding: 20px;
      padding-left: 0;
      max-height: 812px;
      margin-top: 20px;
      .no-data{
        // text-indent: 2em;
        text-align: center;
      }
      >div{
        min-height: 80px;
        max-height: 500px;
        overflow: auto;
      }
      li{
        display: flex;
        align-items: center;
        text-indent: 10px;
        padding-left: 20px;
        cursor: pointer;
        &:hover{
          background: #20504d;
        }
        &>img {
          width: 32px;
          height: 32px;
        }
      }
    }
    .search{
      // position: absolute;
      // top: 273px;
      // left: 1922px;
      box-sizing: border-box;
      width: 690px;
      height: 80px;
      display: flex;
      line-height: 80px;
      border: 1px solid #7FFFEA;
      background: rgba(0,58,64,0.8);
      .se{
        div{
          padding: 0 20px;
          color: #fff;
          height: 100%;
          position: relative;
          // text-align: center;
          display: flex;
          align-items: center;
          overflow: hidden;
          .text  {
            display: block;
            width: max-content;
          }
          .row{
            // vertical-align: middle;
            margin-left: 10px;
            font-size: 0;
            // height: 60px;
            //height: 12px;
            transform: rotate(0deg);
            transform-origin: center ;
            display: inline-block;
            transition: 0.5s all;
            &.isExpand{
              display: inline-block;
              transform: rotate(180deg);
            }
            img {
              vertical-align: middle;
              width: 24px;
              height: 24px;
            }
          }
          .divider {
            display: inline-block;
            width: 1px;
            height: 32px;
            background-color: rgba(255,255,255,0.4);
            margin-left: 20px;
          }
          
        }
        position: relative;
        .options{
          border: 1px solid #63ffe0;
          background: rgba(0,58,64,0.8);
          li{
            &.active{
              color: #ffe566;
            }
            &:hover{
              background:#20504d;
            }
            line-height: 2;
            color: #fff;
            cursor: pointer;
          }
          z-index: 1;
          text-align: center;
          font-size: 28px;
          left: 0;
          position: absolute;
          width: 90%;
        }
      }
      select{
        line-height: 80px;
        option{

        }
        option:after{
          content: "";
          width: 14px;
          height: 8px;
          //background: url(../assets/arrow-down.png) no-repeat center;
          /*通过定位将图标放在合适的位置*/
          position: absolute;
          right: 20px;
          top: 41%;
          /*给自定义的图标实现点击下来功能*/
          pointer-events: none;
        }
        border: none;
        /*清除select聚焦时候的边框颜色*/
        outline: none;
        /*将select的宽高等于div的宽高*/
        width: 100%;
        height: 100%;
        line-height: 40px;
        /*隐藏select的下拉图标*/
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        /*通过padding-left的值让文字居中*/
        padding-left: 20px;
      }
      span{
        cursor: pointer;
        color: #fff;
        font-size: 28px;
      }
      input{
        flex: 1;
        width: 0;
        font-size: 28px;
        color: #fff;
        background: transparent;
        vertical-align: middle;
        padding: 0;
        margin: 0;
        border: none;
        outline: none;
      }
      .search-btn {
        display: flex;
        align-items: center;
        padding: 0 15px;
        &>img {
          width: 36px;
          height: 36px;
        }
      }
    }
  }

}
</style>
