<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-button icon="el-icon-connection" type="warning" @click="handleCompare">对比</el-button>
          </el-form-item>
    </el-form>
    <div style='width: 100%;min-height: calc(100% - 265px);overflow-y: auto'>
      <div style="width: 100%;height: 280px;display: flex;justify-content: center;align-items: center">
        <HolPieChart chart-id="chartOne" :data="chartDataOne" class="pieBox" :tiplabel="'合同数'" :title="'所属企业'" :unit="'份'" :show-center="true" :center-value="9999"></HolPieChart>
        <HolPieChart chart-id="chartTwo" :data="chartDataTwo" class="pieBox" :tiplabel="'出租率'" :title="'出租率'"></HolPieChart>
        <BarChart chart-id="chartThree" :data="chartDataThree" class="pieBox" :title="'租金&物业费'"></BarChart>
        <HolPieChart chart-id="chartFour" :data="chartDataFour" class="pieBox" :tiplabel="'面积'" :title="'出租面积&空置面积'"></HolPieChart>
      </div>
      <div style="width: 100%;min-height: calc(100% - 280px);height: auto">
        <div style="width: 100%; height: 50px;line-height: 50px;font-size:16px;text-align: center;border-top: 1px solid black;border-bottom: 1px solid black;">查询报告</div>
        <div class="search_result_box">
          <div >查询结果涉及企业XX家，包括：牡丹、益泰、科林</div>
          <div >查询结果涉及宗地XX块，土地总面积XXXXXX平米，有证土地面积XXXX平米，房产总面积XXX平米，可出租面积XXXXX平米，已出租面积XXXX平米。</div>
          <div >查询结果涉及X个园区，X栋楼宇，XXXX个房间。目前已经出租XXX个房间，出租率为X%。</div>
          <div >查询结果中平均租金为XX元，最高XX元，最低为XX元。</div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
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";
import HolPieChart from "@/views/components/HolPieChart.vue"
import BarChart from "@/views/components/BarChart.vue";

export default {
  components: {
    BarChart,
    HolPieChart
  },
  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,
      chartDataOne: [
        {name: 'dsadsadsa',value: 52},
        {name: 'dsadsasadasdadsa',value: 343},
        {name: 'cxzcx',value: 254},
      ],
      chartDataTwo: [
        {name: 'dsadsadsa',value: 52},
        {name: 'dsadsasadasdadsa',value: 343},
        {name: 'cxzcx',value: 254},
      ],
      chartDataThree: [
        {name: '物业费',value: 52},
        {name: '租金',value: 52},
      ],
      chartDataFour: [
        {name: '出租面积',value: 52},
        {name: '空置面积',value: 343},
      ],
    }
  },
  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: {
    handleCompare() {
      this.$router.push('/compare')
    },
    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;
}
.search_result_box {
  width: 100%;
  min-height: calc(100% - 50px);
  height: auto;
  box-sizing: border-box;
  padding: 16px;
  font-size: 16px;
  div{
    line-height: 30px;
  }
}

.pieBox {
  width: 25%;
  height: 100%;
}
</style>