<template>
  <div>
    <ul class="top_ul">
      <li v-for="it in pageData.countlist" :key="it">
        <MOSTY.Account :item="it" />
      </li>
    </ul>
    <!-- 查询 -->
    <div class='tabox'>
      <div class="headBox3">
        <el-input placeholder="请输入建筑物名称进行查询" v-model="pageData.listQuery.buildingname" clearable
          style='width:400px'></el-input>
        <el-button type="primary" @click="Searchdata">
          <el-icon>
            <Search />
          </el-icon>
          <span>查询</span>
        </el-button>
        <el-button type="primary" @click="addUserHander" v-if='props.obj.saveBtnShow'>
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>新增</span>
        </el-button>
      </div>
      <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="pageData.tableData" :tableloading="tableloading"
        :tableHeight="'40vh'">
        <template #actions="{ row }">

          <span class="operedit" @click="setFn(row)" v-if='props.obj.saveBtnShow'>
            <el-icon>
              <EditPen />
            </el-icon>
            修改
          </span>
          <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
            @confirm="handledelete(row)" v-if='props.obj.saveBtnShow'>
            <template #reference>
              <span class="operdel" size="small">
                <el-icon>
                  <Delete />
                </el-icon>
                删除</span>
            </template>
          </el-popconfirm>
          <span class="operesee" @click="handleSee(row)">
            <el-icon>
              <Compass />
            </el-icon>查看</span>
        </template>
        <template #fenye>
          <div class="fenye" :style="{ top: tableHeight + 'px'}">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="pageData.listQuery.pageCurrent" background :page-sizes="[10, 20, 50, 100]"
              :page-size="pageData.listQuery.pageSize" layout="total,  prev, pager, next, sizes, jumper"
              :total="total"></el-pagination>
          </div>
        </template>
      </MOSTY.Table>
    </div>

  </div>
  <!-- 建筑物 -->
  <div v-if="showdialogjzw" class="dialog-box">
    <buildDialog :formData="formData" @saveSuccess="saveSuccess" :type="type" />
  </div>
</template>
<script setup>
import { getImgUrl } from "@/utils/tools.js"
import * as MOSTY from "@/components/MyComponents/index";
import buildDialog from "@/components/dialog/buildindex.vue";
import { ElMessage } from "element-plus";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { reactive, ref, onMounted } from "vue"
const emits = defineEmits(['searchChange']);
const tableloading = ref(false);
const showdialogjzw = ref(false);
const total = ref(0)
const type = ref('')
const tableHeight = ref();
const formData = ref({
  title: ""
});
const props = defineProps({
  obj: {
    default: null,
    type: Object
  }
});
const pageData = reactive({
  countlist: [
    { title: '建筑物数', num: 0, icon: getImgUrl('img/icon-ybyhA.png') },
    { title: '地上层数', num: 0, icon: getImgUrl('img/icon-ybyhA.png') },
    { title: '地下层数', num: 0, icon: getImgUrl('img/icon-ybyhA.png') },
    { title: '重点部位数', num: 0, icon: getImgUrl('img/icon-ybyhA.png') },
    { title: '非重点部位数', num: 0, icon: getImgUrl('img/icon-ybyhA.png') }
  ],
  listQuery: {
    pageCurrent: 1,
    buildingname: '',
    siteid: '',
    pageSize: 10
  },
  tableColumns: [
    {
      title: "建筑物名称",
      prop: "buildingname"
    },
    {
      title: "建筑面积",
      prop: "area"
    },
    {
      title: "占地面积",
      prop: "coverArea"
    },
    {
      title: "高度",
      prop: "high"
    },
    {
      title: "地上层数",
      prop: "abovegroundFloors"
    },
    {
      title: "地下层数",
      prop: "undergroundFloors"
    },
    {
      title: "重点部位",
      prop: "zdbw"
    },
    {
      title: "非重点部位",
      prop: "fzdbw"
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
  tableData: []
})
onMounted(() => {
  if (props.obj.id) {
    pageData.listQuery.siteid = props.obj.id
    getcount(props.obj.id)
    gettablist()
    tabHeightFn();
  }
})
const tabHeightFn = () => {
  tableHeight.value = window.innerHeight - 210;
};

//建筑物--场所下分类统计接口
function getcount(siteid) {
  getApi({ siteid }, '/mosty-jcgl/building/countBySite').then((res) => {
    pageData.countlist[0].num = res.jzws;
    pageData.countlist[1].num = res.dscs;
    pageData.countlist[2].num = Math.abs(res.dxcs);
    pageData.countlist[3].num = res.zdbw;
    pageData.countlist[4].num = res.fzdbw;
  })
}
//（新）建筑物分页查询
function gettablist() {
  tableloading.value = true
  postApi(pageData.listQuery, '/mosty-jcgl/building/getBuildList').then((res) => {
    if (res) {
      tableloading.value = false
      res.records.forEach(item => {
        item.area = item.area ? item.area : 0;
        item.coverArea = item.coverArea ? item.coverArea : 0;
        item.high = item.high ? item.high : 0;
        item.abovegroundFloors = item.abovegroundFloors ? item.abovegroundFloors : 0;
        item.undergroundFloors = item.undergroundFloors ? item.undergroundFloors : 0;
        item.zdbw = item.zdbw ? item.zdbw : 0;
        item.fzdbw = item.fzdbw ? item.fzdbw : 0;
      })
      pageData.tableData = res.records
      total.value = res.total
    }
  })
}
//查询
function Searchdata() {
  gettablist()

}
//新增
function addUserHander() {
  formData.value.title = '新增建筑物';
  formData.value.saveBtnShow = true;
  formData.value.siteid = props.obj.id;
  formData.value.sitename = props.obj.placename;
  showdialogjzw.value = true
  tableloading.value = false
}
//修改
function setFn(row) {
  getApi({ id: row.id }, "/mosty-jcgl/building/querySceneBuildingsById").then((res) => {
    if (res) {
      formData.value = res;
      formData.value.title = "修改建筑物";
      formData.value.saveBtnShow = true;
      showdialogjzw.value = true
      tableloading.value = false
    }

  });
}
//查看
function handleSee(row) {
  getApi({ id: row.id }, "/mosty-jcgl/building/querySceneBuildingsById").then((res) => {
    if (res) {
      formData.value = res;
      formData.value.title = "建筑物详情";
      formData.value.saveBtnShow = false;
      showdialogjzw.value = true
      tableloading.value = false
    }

  });
}
//删除
function handledelete(row) {
  getApi({ id: row.id }, '/mosty-jcgl/building/deleteSceneBuildingsOne').then(res => {
    ElMessage.success("删除成功");
    emits("searchChange", 'jzw');
    getcount(props.obj.id)
    gettablist()
  })
}
function saveSuccess(obj) {
  formData.value = {}
  showdialogjzw.value = false
  getcount(props.obj.id)
  emits("searchChange", 'jzw');
  if (obj) {
    //新增成功不刷新表格直接追加
    pageData.tableData.unshift(obj);
    total.value + 1
  } else {
    //修改不追加，直接刷新
    gettablist()
  }
}

//页码发生变化
const handleCurrentChange = (val) => {
  pageData.listQuery.pageCurrent = val;
  gettablist()
};
//查询条数发生变化
const handleSizeChange = (val) => {
  pageData.listQuery.pageSize = val;
  gettablist()
};
</script>

<style lang="scss" scoped>
.headBox3 {
  display: flex;
  justify-content: end;
  width: 100%;
  margin-bottom: 10px;
}

.top_ul {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;

  >li {
    width: 15%;
    height: 83px;
    margin: 6px 32px;
  }
}
</style>
