<template>
  <div class="content-layout">
    <div class="title">电控集团宗地查询</div>
    <el-form style="padding: 0 10px;" :model="queryForm" inline label-width="115px" v-form>
          <el-form-item label="宗地编号:">
            <el-select v-model="queryForm.id_" multiple collapse-tags placeholder="请选择" >
              <el-option
                v-for="item in zdbhOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <ht-form-item label="所属企业">
            <ht-org-selector-input
              v-model="orgname"
              display-style="block"
              :config="{ id: 'queryForm.f_qyid' }"
              append-to-body
            ></ht-org-selector-input>
          </ht-form-item>
          <el-form-item label="土地证办理情况:">
            <el-select v-model="queryForm.f_tdzjblqk" multiple collapse-tags placeholder="请选择" >
              <el-option
                v-for="item in tdzblOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="区域范围:">
            <el-select v-model="queryForm.f_tdqyfw" multiple collapse-tags placeholder="请选择" >
              <el-option
                v-for="item in qyfwOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属划区:">
            <el-select v-model="queryForm.f_ssqh" multiple collapse-tags placeholder="请选择">
              <el-option
                v-for="item in ssqhOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="土地开发类型:" >
            <el-select v-model="queryForm.f_tdkflx" multiple collapse-tags placeholder="请选择">
              <el-option
                v-for="item in tdkflxOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="现状使用情况:" >
            <el-select v-model="queryForm.f_xzsyqk" multiple collapse-tags placeholder="请选择">
              <el-option
                v-for="item in xzsyqkOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="现规划性质:" >
            <el-select v-model="queryForm.f_xghxz" multiple collapse-tags placeholder="请选择">
              <el-option
                v-for="item in xzsyqkOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="土地实际用途:" >
            <el-select v-model="queryForm.f_sjytlx" clearable placeholder="请选择">
              <el-option
                v-for="item in tdsjytOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="queryForm.f_sjytlx2" style="width: 100px;" clearable placeholder="请选择">
              <el-option
                v-for="item in compareOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-input placeholder="请输入" v-model.trim="queryForm.f_sjytmj" maxlength="10" style="width: 80px;margin-left: 4px;"></el-input>
            <span style="margin: 0 4px;" :style="{visibility: showtd ? 'visible' : 'hidden'}">至</span>
            <el-input placeholder="请输入" :style="{visibility: showtd ? 'visible' : 'hidden'}" v-model.trim="queryForm.f_sjytmj2" style="width: 80px;" maxlength="10"></el-input>
            <span style="margin-left: 2px;">平方米</span>
          </el-form-item>
          <el-form-item label="土地出让意向:" >
            <el-select v-model="queryForm.f_tdcryx" multiple collapse-tags placeholder="请选择">
              <el-option
                v-for="item in tdcryxOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="容积率:" clearable>
            <el-select v-model="queryForm.f_rjl" placeholder="请选择">
              <el-option
                v-for="item in rjlOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="面积:">
            <div style="width: 100%;height: 100%;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;">
              <el-input style="width: 90px;" placeholder="最小值" v-model="queryForm.f_tdmj"></el-input>
              <span style="margin: 0 10px;" >至</span>
              <el-input style="width: 90px;" placeholder="最大值" v-model="queryForm.f_tdmj2"></el-input>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="handleSearch">查询</el-button>
            <el-button icon="el-icon-refresh-left" @click="handleReset">重置</el-button>
          </el-form-item>
    </el-form>
    <div style='width: 100%;height: calc(100% - 265px);display: flex'>
      <div style='width: 20%;height: 100%;overflow-y: auto;'>
        <div style='width: 100%;height: 40px;line-height: 40px;background-color: #4bacfc;text-align: center;border-radius: 8px;'>企业层级结构</div>
        <el-scrollbar style="height:calc(100% - 40px);">
          <ht-tree
            ref="tree"
            :tree-data="orgData"
            node-key="id"
            default-expand-all
            highlight-current
            :show-checkbox="true"
            :support-filter="true"
            :expand-on-click-node="true"
            :default-expanded-keys="defaultExpandedKeys"
            :props="{
              children: 'children',
              label: 'name',
            }"
            @check="handleCheck"
            @refresh="menuTreeRefresh"
          >
          <span slot-scope="{ node }">
            <span :title="node.label">
              {{ node.label }}
            </span>
          </span>
          </ht-tree>
        </el-scrollbar>
      </div>
      <div style='width: 60%;height: 100%;'>
        <AMap :data="dataList" ref="map"></AMap>
      </div>
      <div style='width: 20%;height: 100%;'>
        <div style='width: 100%;height: 40px;line-height: 40px;background-color: #4bacfc;text-align: center;border-radius: 8px;'>查询结果</div>
        <div style="width: 100%;height: calc(100% - 40px);box-sizing: border-box;overflow-y: auto">
          <div style='margin-left: 10px;margin-top: 20px;margin-bottom: 20px;'>
            <div style='font-size: 18px;'>共计<span style='color: rgba(149,29,29,1);font-size: 18px;'>{{totalInfo.total}}</span>宗土地</div>
            <div style='font-size: 18px;'>土地总面积：<span style='color: rgba(149,29,29,1);font-size: 18px;'>{{totalInfo.tdzmj}}</span>平方米</div>
            <div style='font-size: 18px;'>有证土地面积：<span style='color: rgba(149,29,29,1);font-size: 18px;'>{{totalInfo.yztdmj}}</span>平方米</div>
            <div style='font-size: 18px;'>房产总面积：<span style='color: rgba(149,29,29,1);font-size: 18px;'>{{totalInfo.fczmj}}</span>平方米</div>
            <div style='font-size: 18px;'>可出租面积：<span style='color: rgba(149,29,29,1);font-size: 18px;'>{{totalInfo.kczmj}}</span>平方米</div>
            <div style='font-size: 18px;'>已出租面积：<span style='color: rgba(149,29,29,1);font-size: 18px;'>{{totalInfo.yczmj}}</span>平方米</div>
          </div>
          <div v-for='(item, index) in dataList' :key='index' style='margin-left: 10px;' @click="handleLocation(item)">
            <div style='min-height: 30px;height: auto;line-height: 30px;margin: 4px 0;font-size: 16px;cursor: pointer;color: #4bacfc;'>{{ index + 1 }}<span style="margin-right: 10px;">.</span>{{ item.f_zdwz }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import AMap from './components/AMap.vue'
import {
  getByParentAndDemToTree, getCompareList,
  getQyfwlList, getRjlList,
  getSsqhlList, getTdbhList,
  getTdcryxList, getTdInfoList,
  getTdkflxList,
  getTdytList,
  getTdzblList,
  getXzsyqkList
} from "@/api/mapView";
import {getUserSelectorDem} from "@/api/uc";
import { tile2nest } from "@/utils/array";
export default {
  components: {
    AMap
  },
  data() {
    return {
      orgData: [],
      dataList: [],
      totalInfo: {
        total: 0,
        tdzmj: 0,
        yztdmj: 0,
        fczmj: 0,
        kczmj: 0,
        yczmj: 0
      },
      queryForm: {
        id_: [],
        f_qyid: '',
        f_tdzjblqk: [],
        f_tdqyfw: [],
        f_ssqh: [],
        f_tdkflx: [],
        f_xzsyqk: [],
        f_xghxz: [],
        f_sjytlx: '',
        f_sjytlx2: '',
        f_sjytmj: '',
        f_sjytmj2: '',
        f_tdcryx: [],
        f_rjl: '',
        f_tdmj: '',
        f_tdmj2: '',
      },
      options: [],
      zdbhOptions: [],
      tdzblOptions: [],
      qyfwOptions: [],
      ssqhOptions: [],
      tdkflxOptions: [],
      xzsyqkOptions: [],
      tdsjytOptions: [],
      tdcryxOptions: [],
      compareOptions: [],
      rjlOptions: [],
      defaultExpandedKeys:["0"],
      f_qyidsearch: "",
      orgname: '',
      showtd: false
    }
  },
  watch: {
    'queryForm.f_sjytlx2':{
      handler(newval,oldval) {
        console.log("newval",newval)
        if (newval == '介于') {
          this.showtd = true
        } else {
          this.showtd = false
        }
      }
    }
  },
  created() {},
  async mounted() {
    await this.fenchOptions()
    this.getList()
  },
  methods: {
    handleLocation(item) {
      console.log("item",item)
      this.$refs.map.setLocation(item.f_jd, item.f_wd)
    },
    getList(type) {
      let queryData = {
        pageBean: {page: 1, pageSize: 10, showTotal: true},
        querys: []
      }
      if (this.queryForm.id_.length > 0) {
        queryData.querys.push({property: "id_", value: this.queryForm.id_.join(','), group: "advance", relation: "AND", operation: "EQUAL"})
      }
      if (this.queryForm.f_qyid && !type) {
        queryData.querys.push({property: "f_qyid", value: this.queryForm.f_qyid , group: "advance", relation: "AND", operation: "EQUAL"})
      }
      if (this.f_qyidsearch && type) {
        queryData.querys.push({property: "f_qyid", value: this.f_qyidsearch , group: "advance", relation: "AND", operation: "EQUAL"})
      }
      if (this.queryForm.f_tdzjblqk.length > 0) {
        queryData.querys.push({property: "f_tdzjblqk", value: this.queryForm.f_tdzjblqk.join(','), group: "advance", relation: "AND", operation: "EQUAL"})
      }
      if (this.queryForm.f_tdqyfw.length > 0) {
        queryData.querys.push({property: "f_tdqyfw", value: this.queryForm.f_tdqyfw.join(','), group: "advance", relation: "AND", operation: "EQUAL"})
      }
      if (this.queryForm.f_ssqh.length > 0) {
        queryData.querys.push({property: "f_ssqh", value: this.queryForm.f_ssqh.join(','), group: "advance", relation: "AND", operation: "EQUAL"})
      }
      if (this.queryForm.f_tdkflx.length > 0) {
        queryData.querys.push({property: "f_tdkflx", value: this.queryForm.f_tdkflx.join(','), group: "advance", relation: "AND", operation: "EQUAL"})
      }
      if (this.queryForm.f_xzsyqk.length > 0) {
        queryData.querys.push({property: "f_xzsyqk", value: this.queryForm.f_xzsyqk.join(','), group: "advance", relation: "AND", operation: "EQUAL"})
      }
      if (this.queryForm.f_xghxz.length > 0) {
        queryData.querys.push({property: "f_xghxz", value: this.queryForm.f_xghxz.join(','), group: "advance", relation: "AND", operation: "EQUAL"})
      }
      if (this.queryForm.f_sjytlx) {
        queryData.querys.push({property: "f_sjytlx", value: this.queryForm.f_sjytlx, group: "advance", relation: "AND", operation: "EQUAL"})
      }
      if (this.queryForm.f_sjytlx2) {
        queryData.querys.push({property: "f_sjytlx", value: this.queryForm.f_sjytlx2, group: "advance", relation: "AND", operation: "EQUAL"})
      }
      if (this.queryForm.f_sjytmj) {
        queryData.querys.push({property: "f_sjytlx", value: this.queryForm.f_sjytmj, group: "advance", relation: "AND", operation: "EQUAL"})
      }
      if (this.queryForm.f_sjytmj2) {
        queryData.querys.push({property: "f_sjytlx", value: this.queryForm.f_sjytmj2, group: "advance", relation: "AND", operation: "EQUAL"})
      }
      if (this.queryForm.f_tdcryx.length > 0) {
        queryData.querys.push({property: "f_tdcryx", value: this.queryForm.f_tdcryx.join(','), group: "advance", relation: "AND", operation: "EQUAL"})
      }
      if (this.queryForm.f_rjl) {
        queryData.querys.push({property: "f_rjl", value: this.queryForm.f_rjl, group: "advance", relation: "AND", operation: "EQUAL"})
      }
      if (this.queryForm.f_tdmj) {
        queryData.querys.push({property: "f_tdmj", value: this.queryForm.f_tdmj, group: "advance", relation: "AND", operation: "EQUAL"})
      }
      if (this.queryForm.f_tdmj2) {
        queryData.querys.push({property: "f_tdmj2", value: this.queryForm.f_tdmj2, group: "advance", relation: "AND", operation: "EQUAL"})
      }
      getTdInfoList(queryData).then(res => {
        console.log("resaabb",res)
        this.dataList = res.rows || []
        console.log("this.dataList",this.dataList)
        if (this.dataList.length > 0) {
          let temptdzmj = 0
          let tempyztdmj = 0
          let tempfczmj = 0
          let tempkczmj = 0
          let tempyczmj = 0

          this.dataList.forEach((item) => {
            if (item.f_tdmj) {
              temptdzmj += Number(item.f_tdmj)
            }
            if (item.f_yztdmj) {
              tempyztdmj += Number(item.f_yztdmj)
            }
            if (item.f_fczmj) {
              tempfczmj += Number(item.f_fczmj)
            }
            if (item.f_kczmj) {
              tempkczmj += Number(item.f_kczmj)
            }
            if (item.f_yczmj) {
              tempyczmj += Number(item.f_yczmj)
            }
          })
          this.totalInfo = {
            total: res.total,
            tdzmj: temptdzmj,
            yztdmj: tempyztdmj,
            fczmj: tempfczmj,
            kczmj: tempkczmj,
            yczmj: tempyczmj
          }
        } else {
          this.totalInfo = {
            total: 0,
            tdzmj: 0,
            yztdmj: 0,
            fczmj: 0,
            kczmj: 0,
            yczmj: 0
          }
        }
      })
    },
   async getAllData() {
     await getUserSelectorDem().then(res => {
        if (res && res.length > 0) {
          let params = {
            demId: res[0].id
          }
          getByParentAndDemToTree(params).then(res => {
            this.orgData = tile2nest(res)
          })
        }
      })
    },
    resetForm() {
      this.queryForm = {
        id_: [],
        f_qyid: '',
        f_tdzjblqk: [],
        f_tdqyfw: [],
        f_ssqh: [],
        f_tdkflx: [],
        f_xzsyqk: [],
        f_xghxz: [],
        f_sjytlx: '',
        f_sjytlx2: '',
        f_sjytmj: '',
        f_sjytmj2: '',
        f_tdcryx: [],
        f_rjl: '',
        f_tdmj: '',
        f_tdmj2: '',
      }
      this.orgname = ''
      this.f_qyidsearch = ''
    },
    handleSearch() {
      this.getList()
    },
    handleReset() {
      this.resetForm()
      this.getList()
    },
    async fenchOptions() {
      await this.getTdbhOptions()
      await this.getTdzblOptions()
      await this.getQyfwOptions()
      await this.getSsqhOptions()
      await this.getTdkflxOptions()
      await this.getXzsyqkOptions()
      await this.getTdsjytOptions()
      await this.getTdcryxOptions()
      await this.getRjlOptions()
      await this.getCompareOptions()
      await this.getAllData()
    },
    async getCompareOptions() {
      await getCompareList([]).then(res => {
        this.compareOptions = res.rows && res.rows.length > 0 ? res.rows.map(item => {
          return {
            label: item.value,
            value: item.code
          }
        }) : []
      })
    },
    async getRjlOptions() {
      await getRjlList([]).then(res => {
        this.rjlOptions = res.rows && res.rows.length > 0 ? res.rows.map(item => {
          return {
            label: item.value,
            value: item.code
          }
        }) : []
      })
    },
    //土地证办理情况下拉
    async getTdbhOptions() {
      let query = {
        pageBean: {
          page: 1,
          pageSize: 10,
          showTotal: true
        }
      }

      await getTdbhList(query).then(res => {
        this.zdbhOptions = res.rows && res.rows.length > 0 ? res.rows.map(item => {
          return {
            label: item.f_zdbh,
            value: item.id_
          }
        }) : []
      })
    },
    //土地证办理情况下拉
    async getTdzblOptions() {
      await getTdzblList([]).then(res => {
        this.tdzblOptions = res.rows && res.rows.length > 0 ? res.rows.map(item => {
          return {
            label: item.value,
            value: item.code
          }
        }) : []
      })
    },
    //区域范围下拉
    async getQyfwOptions() {
      await getQyfwlList([]).then(res => {
        this.qyfwOptions = res.rows && res.rows.length > 0 ? res.rows.map(item => {
          return {
            label: item.value,
            value: item.code
          }
        }) : []
      })
    },
    //所属区划下拉
    async getSsqhOptions() {
      await getSsqhlList([]).then(res => {
        this.ssqhOptions = res.rows && res.rows.length > 0 ? res.rows.map(item => {
          return {
            label: item.value,
            value: item.code
          }
        }) : []
      })
    },
    //土地开发类型下拉
   async getTdkflxOptions() {
     await getTdkflxList([]).then(res => {
        this.tdkflxOptions = res.rows && res.rows.length > 0 ? res.rows.map(item => {
          return {
            label: item.value,
            value: item.code
          }
        }) : []
      })
    },
    //现状使用情况下拉
   async getXzsyqkOptions() {
     await getXzsyqkList([]).then(res => {
        this.xzsyqkOptions = res.rows && res.rows.length > 0 ? res.rows.map(item => {
          return {
            label: item.value,
            value: item.code
          }
        }) : []
      })
    },
    //土地实际用途下拉
   async getTdsjytOptions() {
     await getTdytList([]).then(res => {
        this.tdsjytOptions = res.rows && res.rows.length > 0 ? res.rows.map(item => {
          return {
            label: item.value,
            value: item.code
          }
        }) : []
      })
    },
    //土地出让意向下拉
   async getTdcryxOptions() {
     await getTdcryxList([]).then(res => {
        this.tdcryxOptions = res.rows && res.rows.length > 0 ? res.rows.map(item => {
          return {
            label: item.value,
            value: item.code
          }
        }) : []
      })
    },
    handleCheck(data, checkedObj) {
      console.log("data-checkedObj",data, checkedObj)
      if (checkedObj.checkedKeys.length > 0) {
        let tempqyids = checkedObj.checkedKeys.filter(item => item != 0)
        console.log("tempqyids",tempqyids)
        this.f_qyidsearch = tempqyids.join(',')
        console.log("this.f_qyidsearch",this.f_qyidsearch)
        this.getList('left')
      }
    },
    menuNodeClick(node) {
      console.log("node",node)
      this.f_qyidsearch = node.id
      this.getList()
      // if (node.id === this.rootMenuId) {
      //   this.currentMenuId = null
      // } else {
      //   this.currentMenuId = node.id
      // }
      // this.checkAll = true
      // this.curTagList.map(item => {
      //   item.check = false
      // })
      // this.loadMenuTagsData()
      // this.loadAppData()
    },
    menuTreeRefresh(cb) {
      this.getAllData()
      this.f_qyidsearch = ''
      // this.currentMenuId = null
      // this.curTagList = []
      // this.pageResult.page = 1
      // this.loadMenuData(cb)
      // this.loadAppData()
    },
  },
}
</script>

<style lang="scss" scoped>
@mixin background-color {
  background-color: $base-color-white;
}

.content-layout {
  height: 100%;
  overflow-y: auto;
  position: relative;
  @include background-color;
}
.title {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 18px;
}
</style>
