<template>
<div class="modelcontainer">
  <a-divider orientation="left" style="border-color: #7cb305">用地信息</a-divider>
  <div class="flex">
    <div class="flex ai-c flex-li">
      <div class="labelbox">宗地编码：</div>
      <div class="inpbox">
        <a-input v-model:value="props.showInfoData.zdbm" :disabled="props.isRead" placeholder="请输入" />
      </div>
    </div>
    <div class="flex ai-c flex-li">
      <div class="labelbox">宗地代码：</div>
      <div class="inpbox">
        <a-input v-model:value="props.showInfoData.zddm" :disabled="props.isRead" placeholder="请输入" />
      </div>
    </div>
    <div class="flex ai-c flex-li">
      <div class="labelbox">乡镇：</div>
      <div class="inpbox">
        <a-select
          ref="select"
          placeholder="请选择"
          style="width: 100%"
          :options="streetOptions"
          :field-names="{ label: 'djqmc', value: 'djqmc'}"
          v-model:value="props.showInfoData.djqmc" :disabled="props.isRead"
        >
        </a-select>
      </div>
    </div>
    <div class="flex ai-c flex-li">
      <div class="labelbox">坐落位置：</div>
      <div class="inpbox">
        <a-input v-model:value="props.showInfoData.djzqmc" :disabled="props.isRead" placeholder="请输入" />
      </div>
    </div>
  </div>
  <div class="flex mt-1">   
      <div class="flex ai-c flex-li">
        <div class="labelbox">使用人名称：</div>
        <div class="inpbox">
          <a-input v-model:value="props.showInfoData.syrmc" :disabled="props.isRead" placeholder="请输入" />
        </div>
      </div> 
      <div class="flex ai-c flex-li">
        <div class="labelbox">使用人类型：</div>
        <div class="inpbox">
          <a-select
            ref="select"
            placeholder="请选择"
            style="width: 100%"
            :options="UserTypeOptions"
            :field-names="{ label: 'itemName', value: 'itemName'}"
            v-model:value="props.showInfoData.syrlx" :disabled="props.isRead"
          >
          </a-select>
        </div>
      </div> 
      <div class="flex ai-c flex-li">
        <div class="labelbox">使用起始期：</div>
        <div class="inpbox">
          <a-input v-model:value="props.showInfoData.syqsq" :disabled="props.isRead" placeholder="请输入" />
          <!-- <a-date-picker v-model:value="props.showInfoData.syqsq" :disabled="props.isRead" style="width:100%" :valueFormat="dateValueFormat"  /> -->
        </div>
      </div>   
      <div class="flex ai-c flex-li">
        <div class="labelbox">使用终止期：</div>
        <div class="inpbox">
          <a-date-picker v-model:value="props.showInfoData.syzzq" :disabled="props.isRead" style="width:100%" :valueFormat="dateValueFormat"  />
        </div>
      </div> 
  </div>
  <div class="flex mt-1"> 
      <div class="flex ai-c flex-li">
        <div class="labelbox">土地性质：</div>
        <div class="inpbox">
          <a-select
            ref="select"
            placeholder="请选择"
            style="width: 100%"
            :options="landTypeOptions"
            :field-names="{ label: 'itemName', value: 'itemName'}"
            v-model:value="props.showInfoData.tdxz" :disabled="props.isRead"
          >
          </a-select>
        </div>
      </div>   
      <div class="flex ai-c flex-li">
        <div class="labelbox">土地取得方式：</div>
        <div class="inpbox">
          <a-input v-model:value="props.showInfoData.tdqdfs" :disabled="props.isRead" placeholder="请输入" />
        </div>
      </div>  
      <div class="flex ai-c flex-li">
        <div class="labelbox">使用年限：</div>
        <div class="inpbox">
          <a-input v-model:value="props.showInfoData.synx" :disabled="props.isRead" placeholder="请输入" />
        </div>
      </div>
      <div class="flex ai-c flex-li">
        <div class="labelbox">使用面积：</div>
        <div class="inpbox">
          <a-input v-model:value="props.showInfoData.symj" :disabled="props.isRead" placeholder="请输入" />
        </div>
      </div>      
  </div>
  <div class="flex mt-1"> 
    <div class="flex ai-c flex-li">
      <div class="labelbox">宗地发证面积：</div>
      <div class="inpbox">
        <a-input v-model:value="props.showInfoData.zdfzmj" :disabled="props.isRead" placeholder="请输入" />
      </div>
    </div>   
    <div class="flex ai-c flex-li">
      <div class="labelbox">宗地实际面积：</div>
      <div class="inpbox">
        <a-input v-model:value="props.showInfoData.zdsjmj" :disabled="props.isRead" placeholder="请输入" />
      </div>
    </div>  
    <div class="flex ai-c flex-li">
      <div class="labelbox">建筑发证总面积：</div>
      <div class="inpbox">
        <a-input v-model:value="props.showInfoData.jzfzzmj" :disabled="props.isRead" placeholder="请输入" />
      </div>
    </div>
    <div class="flex ai-c flex-li">
      <div class="labelbox">建筑实际总面积：</div>
      <div class="inpbox">
        <a-input v-model:value="props.showInfoData.jzsjzmj" :disabled="props.isRead" placeholder="请输入" />
      </div>
    </div>      
  </div>
  <div class="flex mt-1"> 
    <div class="flex ai-c flex-li">
      <div class="labelbox">钢结构建筑面积：</div>
      <div class="inpbox">
        <a-input v-model:value="props.showInfoData.gjgjzmj" :disabled="props.isRead" placeholder="请输入" />
      </div>
    </div>   
    <div class="flex ai-c flex-li">
      <div class="labelbox">砖混结构建筑面积：</div>
      <div class="inpbox">
        <a-input v-model:value="props.showInfoData.zhjgjzmj" :disabled="props.isRead" placeholder="请输入" />
      </div>
    </div>  
    <div class="flex ai-c flex-li">
      <div class="labelbox">设施农用地备案面积：</div>
      <div class="inpbox">
        <a-input v-model:value="props.showInfoData.ssnydbamj" :disabled="props.isRead" placeholder="请输入" />
      </div>
    </div>
    <div class="flex ai-c flex-li">
      <div class="labelbox">建筑使用总面积：</div>
      <div class="inpbox">
        <a-input v-model:value="props.showInfoData.jzsyzmj" :disabled="props.isRead" placeholder="请输入" />
      </div>
    </div>      
  </div>
  <a-divider orientation="left" style="border-color: #7cb305">企业信息</a-divider>
  <div class="flex mt-1">  
      <div class="flex ai-c flex-li">
        <div class="labelbox">社会信用代码：</div>
        <div class="inpbox">
          <a-input v-model:value="props.showInfoData.shxydm" :disabled="props.isRead" placeholder="请输入" />
        </div>
      </div>   
      <div class="flex ai-c flex-li">
        <div class="labelbox">法人代表：</div>
        <div class="inpbox">
          <a-input v-model:value="props.companyData.frdb" disabled placeholder="请输入" />
        </div>
      </div>   
      <div class="flex ai-c flex-li">
        <div class="labelbox">联系方式：</div>
        <div class="inpbox">
          <a-input v-model:value="props.companyData.lxfs" disabled placeholder="请输入" />
        </div>
      </div>   
  </div>
  <div class="flex mt-1">
      <div class="flex ai-c flex-li">
        <div class="labelbox">经营状态：</div>
        <div class="inpbox">
          <a-input v-model:value="props.companyData.jyzt" disabled placeholder="请输入" />
        </div>
      </div>  
      <div class="flex ai-c flex-li">
        <div class="labelbox">行业：</div>
        <div class="inpbox">
          <a-input v-model:value="props.companyData.hy" disabled placeholder="请输入" />
        </div>
      </div> 
      <div class="flex ai-c flex-li">
        <div class="labelbox">固定投资：</div>
        <div class="inpbox">
          <a-input v-model:value="props.companyData.gdtzze" disabled placeholder="请输入" />
        </div>
      </div>    
  </div>
  <a-divider orientation="left" style="border-color: #7cb305">调查信息</a-divider>
  <div class="flex mt-1">
      <div class="flex ai-c flex-li">
        <div class="labelbox">调查人：</div>
        <div class="inpbox">
          <a-input v-model:value="props.showInfoData.dcr" :disabled="props.isRead" placeholder="请输入" />
        </div>
      </div> 
      <div class="flex ai-c flex-li">
        <div class="labelbox">调查日期：</div>
        <div class="inpbox">
          <a-date-picker v-model:value="props.showInfoData.dcrq" :disabled="props.isRead" style="width:100%" :valueFormat="dateValueFormat" />
        </div>
      </div>  
      <div class="flex ai-c flex-li">
        <div class="labelbox">测量人：</div>
        <div class="inpbox">
          <a-input v-model:value="props.showInfoData.clr" :disabled="props.isRead" placeholder="请输入" />
        </div>
      </div>
      <div class="flex ai-c flex-li">
        <div class="labelbox">测量日期：</div>
        <div class="inpbox">
          <a-date-picker v-model:value="props.showInfoData.clrq" :disabled="props.isRead" style="width:100%" :valueFormat="dateValueFormat"  />
        </div>
      </div>
  </div>
  <div class="flex mt-1 ai-c max-w">
    <div class="labelbox">备注：</div>
    <div class="inptextbox">
      <a-textarea v-model:value="props.showInfoData.bz" :disabled="props.isRead" placeholder="请输入" />
    </div>
  </div>
  <div class="flex mt-1 ai-c max-w">
    <div class="labelbox">图斑定位：</div>
    <div class="flex uploadbox column ai-c jc-c" @click="openMapModel">
      <PlusOutlined class="mt-1" style="color:#000;" />
      <span>点击进入地图确定位置</span>
    </div>
  </div>
</div>
<a-modal
  v-model:open="mapVisible"
  title="图斑"
  width="100%"
  wrap-class-name="full-modal"
  :destroyOnClose="true"
  @ok="submitMap"
  >
  <InsertMapModal :showGeomData="showMapInfoData" :geomType="geomType" @setNowShowData="setNowShowData" />
</a-modal>
</template>

<script setup lang="ts">
import { defineAsyncComponent, defineProps, onMounted, ref } from "vue"
import { PlusOutlined } from '@ant-design/icons-vue';
import { Upload, message, Modal } from 'ant-design-vue';
import InsertMapModal from '../widget/map.vue';
import { GetStreetInfo } from '@/api/qydata/index';
import { getRightTable } from '@/api/sys/categories';
const props = defineProps(['showInfoData','isRead','companyData'])

const geomvalue = ref()
const dateValueFormat = 'YYYY-MM-DD';
const showMapInfoData = ref()
const mapVisible = ref(false)
const streetOptions = ref([])
const landTypeOptions = ref([])
const UserTypeOptions = ref([])
const geomType = ref('polygon')
onMounted(() => {
  getStreetData()
  getCodeTypeData()
})
const openMapModel = () =>{
  showMapInfoData.value = props.showInfoData
  mapVisible.value = true
}
  
const getStreetData = ()=>{
  GetStreetInfo().then(res =>{
    streetOptions.value = res
  })
}
const getCodeTypeData = ()=>{
  getRightTable({code:'TDjtxz'}).then(res =>{
    landTypeOptions.value = res
  })
  getRightTable({code:'TD_syrlx'}).then(res =>{
    UserTypeOptions.value = res
  })
}
const setNowShowData = (e)=>{
  console.log('aaa', e)
  geomvalue.value = e
}
const submitMap = () =>{
   props.showInfoData.geom = geomvalue.value
   mapVisible.value = false
}
</script>

<style lang="scss" scoped>
.flex{
  display: flex;
}
.column{
  flex-direction: column;
}
.ai-c{
  align-items: center;
}
.jc-c{
  justify-content: center;
}
.jc-sb{
  justify-content: space-between;
}
.js-sa{
  justify-content: space-around
}
.mt-1{
  margin-top: 15px;
}
.max-w{
  width: 100%;
}
.modelcontainer{
  padding: 20px 100px;
  .flex-li{
    width: 25%;
    padding-right: 50px;
    .inpbox{
      width: calc(100% - 120px);
    }
  }
  .labelbox{
    width: 120px;
  }
  .inptextbox{
    width: calc(100% - 170px);
  }
  .uploadbox{
    width: 100px;
    height: 100px;
    background: #eee;
    cursor: pointer;
    span{
      font-size: 12px;
      text-align: center;
      padding: 0 14px;
      color: #999;
      line-height: 15px;
      margin-top: 5px;
    }
  }
}
</style>
