<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.jzwmc" :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.jzwbm" :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.bdcdyh" :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.szzdbm" :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.jzwcs" :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="houseTypeOptions"
            :field-names="{ label: 'itemName', value: 'itemName'}"
            v-model:value="props.showInfoData.jzwjg" :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.jzwsyqr" :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.jzsyqr" :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-date-picker v-model:value="props.showInfoData.jgrq" :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-select
            ref="select"
            placeholder="请选择"
            style="width: 100%"
            :options="houseGetTypeOptions"
            :field-names="{ label: 'itemName', value: 'itemName'}"
            v-model:value="props.showInfoData.qdfs" :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.symj" :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.mjjsxs" :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.jzwsjzdmj" :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.jzwsjmj" :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.jzwfzmj" :disabled="props.isRead" placeholder="请输入" />
      </div>
    </div>   
  </div>
  <a-divider orientation="left" style="border-color: #7cb305">用地线属性</a-divider>
  <div class="flex mt-1 column ai-c">  
    <div class="flex bodyheaderbox">
      <div class="flex ai-c jc-c index">序号</div>
      <div class="flex flex-1 ai-c jc-c">所属宗地编码</div>
      <div class="flex flex-1 ai-c jc-c">用地线长度</div>
      <div class="flex flex-1 ai-c jc-c">备注</div>
      <div class="flex tempbox ai-c jc-c">操作</div>
    </div>
    <div class="flex bodyheaderbox bodysectionbox" v-for="(item,index) in tabDatasArr1">
      <div class="flex ai-c jc-c index">{{ index+1 }}</div>
      <div class="flex flex-1 ai-c jc-c">
        <a-input v-model:value="item.sszdbm" placeholder="请输入" style="width: 80%;" />
      </div>
      <div class="flex flex-1 ai-c jc-c">
        <a-input v-model:value="item.ydxcd" placeholder="请输入" style="width: 80%;" />
      </div>
      <div class="flex flex-1 ai-c jc-c">
        <a-input v-model:value="item.bz" placeholder="请输入" style="width: 80%;" />
      </div>
      <div class="flex tempbox ai-c jc-c delete">
        <span @click="handleMap('polyline',item,index)">图斑</span>
        <span class="save" @click="handleSave1(item)">保存</span>
        <span class='delete' @click="handleDetete1(item,index)">删除</span>
      </div>
    </div>
    <div class="flex ai-c jc-c addDatabox" @click="addDataList1">增加一行</div>
  </div>
  <a-divider orientation="left" style="border-color: #7cb305">用地点属性</a-divider>
  <div class="flex mt-1 column ai-c">  
      <div class="flex bodyheaderbox">
        <div class="flex ai-c jc-c index">序号</div>
        <div class="flex flex-1 ai-c jc-c">所属宗地编码</div>
        <div class="flex flex-1 ai-c jc-c">界址点号</div>
        <div class="flex flex-1 ai-c jc-c">备注</div>
        <div class="flex tempbox ai-c jc-c">操作</div>
      </div>
      <div class="flex bodyheaderbox bodysectionbox" v-for="(item,index) in tabDatasArr2">
        <div class="flex ai-c jc-c index">{{ index+1 }}</div>
        <div class="flex flex-1 ai-c jc-c">
          <a-input v-model:value="item.sszdbm" placeholder="请输入" style="width: 80%;" />
        </div>
        <div class="flex flex-1 ai-c jc-c">
          <a-input v-model:value="item.jzdh" placeholder="请输入" style="width: 80%;" />
        </div>
        <div class="flex flex-1 ai-c jc-c">
          <a-input v-model:value="item.bz" placeholder="请输入" style="width: 80%;" />
        </div>
        <div class="flex tempbox ai-c jc-c">
          <span @click="handleMap('point',item,index)">图斑</span>
          <span class="save" @click="handleSave2(item)">保存</span>
          <span class='delete' @click="handleDetete2(item,index)">删除</span>
        </div>
      </div>
      <div class="flex ai-c jc-c addDatabox" @click="addDataList2">增加一行</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 { createVNode, defineProps, onMounted, ref } from "vue"
import { PlusOutlined,ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Upload, message, Modal } from 'ant-design-vue';
import InsertMapModal from '../widget/map.vue';
import { getRightTable } from '@/api/sys/categories';
import { 
  GetYongdixianInfoByBM,
  AddYongdixian,
  UpdateYongdixian,
  DeleteYongdixian,
  GetYongdidianInfoByBM,
  AddYongdidian,
  UpdateYongdidian,
  DeleteYongdidian 
} from '@/api/yongdixian/index';

const props = defineProps(['showInfoData','isRead'])

const geomvalue = ref()
const dateValueFormat = 'YYYY-MM-DD';
const showMapInfoData = ref()
const mapVisible = ref(false)
const houseTypeOptions = ref([])
const houseGetTypeOptions = ref([])
const tabDatasArr1 = ref([])
const tabDatasArr2 = ref([])
const geomType = ref()
const tabIndex = ref()
onMounted(() => {
  getHouseTypeData()
  if(props.showInfoData.szzdbm){
    GetYongdixianData()
    GetYongdidianData()
  }
  
})
const GetYongdixianData = ()=>{
  GetYongdixianInfoByBM({sszdbm: props.showInfoData.szzdbm }).then(res =>{
    tabDatasArr1.value = res
  })
}
const GetYongdidianData = ()=>{
  GetYongdidianInfoByBM({sszdbm: props.showInfoData.szzdbm }).then(res =>{
    tabDatasArr2.value = res
  })
}
const openMapModel = () =>{
  showMapInfoData.value = props.showInfoData
  geomType.value = 'polygon'
  mapVisible.value = true
}
const handleSave1 = (e) =>{
  if(!e.geom){
    message.warn('请先绘制图斑');
    return
  }
  if(!e.sszdbm){
    message.warn('请输入所属宗地代码');
    return
  }
  if(e.gid == 0){
    AddYongdixian(e).then(res =>{
      if(res){
        message.success('操作成功')
      }else{
        message.error('操作失败')
      }
    })
  }else{
    UpdateYongdixian(e).then(res =>{
      if(res){
        message.success('操作成功')
      }else{
        message.error('操作失败')
      }
    })
  }
  
}  
const handleDetete1 = (item,index) =>{
  if(item.gid == 0){
    tabDatasArr1.value.splice(index,1)
  }else{
    Modal.confirm({
      title: '提示',
      icon: createVNode(ExclamationCircleOutlined),
      content: '确定要删除该数据吗',
      onOk() {
        return DeleteYongdixian([item.gid]).then(res => {
          message.success('删除成功')
          GetYongdixianData()
        })
      },
      onCancel() {},
    })
  }
  
}
const addDataList1 = ()=>{
  let obj = { gid: 0, sszdbm: '' , ydxcd: '' , bz: '', geom: '' }
  tabDatasArr1.value.push(obj)
}
const handleDetete2 = (item,index) =>{
  if(item.gid == 0){
    tabDatasArr2.value.splice(index,1)
  }else{
    Modal.confirm({
      title: '提示',
      icon: createVNode(ExclamationCircleOutlined),
      content: '确定要删除该数据吗',
      onOk() {
        return DeleteYongdidian([item.gid]).then(res => {
          message.success('删除成功')
          GetYongdidianData()
        })
      },
      onCancel() {},
    })
  }
}
const handleSave2 = (e) =>{
  if(!e.geom){
    message.warn('请先绘制图斑');
    return
  }
  if(!e.sszdbm){
    message.warn('请输入所属宗地代码');
    return
  }
}

const handleMap = (type,item,index) =>{
  geomType.value = type
  tabIndex.value = index
  showMapInfoData.value = item
  mapVisible.value = true
}
const addDataList2 = ()=>{
  let obj = { gid: 0, sszdbm: '' , jzdh: '' , bz: '', geom: '' }
  tabDatasArr2.value.push(obj)
}
const getHouseTypeData = ()=>{
  getRightTable({code:'FWjg'}).then(res =>{
    houseTypeOptions.value = res
  })
  getRightTable({code:'HOUSE_GET_TYPE'}).then(res =>{
    houseGetTypeOptions.value = res
  })
}
const setNowShowData = (e)=>{
  console.log('aaa', e)
  geomvalue.value = e
  if(geomType.value == 'point'){
    tabDatasArr2.value[tabIndex.value].geom = e
  }
  if(geomType.value == 'polyline'){
    tabDatasArr1.value[tabIndex.value].geom = e
  }
  if(geomType.value == 'polygon'){
    props.showInfoData.geom = e
  }
}
const submitMap = () =>{
  console.log('geomvalue',geomvalue.value)
  if(geomvalue.value){
    mapVisible.value = false
  }else{
    message.warn('请先绘制图斑');
  }
  
}

</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;
  height: 100%;
  overflow: auto;
  .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;
    }
  }
}
.bodyheaderbox{
  width: 80%;
  background: #F7F7F7;
  height: 50px;
  color: #000;
  font-size: 14px;
  font-weight: bold;
  .index{
    width: 80px;
  }
  .tempbox{
    width: 180px;
    color: #7A7AFF;
    span{
      cursor: pointer;
    }
    .delete{
      color: #f00;
      margin-left: 15px;
    }
    .save{
      color: #0885F7;
      margin-left: 15px;
    }
  }
  
}
.bodysectionbox{
  font-weight: 400 !important;
  color: #9C9C9C !important;
  background: #fff;
}
.bodysectionbox:nth-child(2n-1){
  background: #F8F8F8;
}
.addDatabox{
  width: 80%;
  color: #9C9C9C;
  height: 50px;
  border: 1px solid #F3F1F1;
  cursor: pointer;
}

</style>
