<template>
  <div>
    <!-- 查询 -->
    <div class='tabox'>
      <div class="headBox3">
        <el-input placeholder="请输入部位名称进行查询" v-model="pageData.listQuery.placename" 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 #checktype="{ row }">
          <dict-tag v-if="row.checktype" :options="D_TB_JCYWLX" :value="row.checktype" :tag="false" />
          <span v-else>无</span>
        </template>
        <template #actions="{ row }">
          <span class="operedit" @click="handlexg(row)" v-if='props.obj.saveBtnShow'>
            <el-icon>
              <EditPen />
            </el-icon>修改</span>
          <el-popconfirm v-if='props.obj.saveBtnShow' confirm-button-text="是" cancel-button-text="否" icon-color="red"
            title="确定要删除?" @confirm="handledelete(row)">
            <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">
    <positionindex :formData="formData" @saveSuccess="saveSuccess" :type="type" />

  </div>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import positionindex from "@/components/dialog/positionindex.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { reactive, ref, onMounted, getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance();
const { D_TB_JCYWLX } = proxy.$dict("D_TB_JCYWLX");
const emits = defineEmits(["handleChange", 'searchChange']);
const tableloading = ref(false);
const showdialogjzw = ref(false);
const type = ref(null)
const formData = ref({
  title: ""
});
const total = ref(0)
const props = defineProps({
  obj: {
    default: null,
    type: Object
  },
  type: {
    default: '',
    type: String
  }
});
const pageData = reactive({
  listQuery: {
    pageCurrent: 1,
    pageSize: 10
  },
  tableColumns: [
    {
      title: "部位名称",
      prop: "partname"
    },
    {
      title: "面积",
      prop: "area"
    },
    {
      title: "部位类型",
      prop: "checktype",
      slot: true
    },
    {
      title: "所在位置",
      prop: "location"
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
  tableData: []
})
onMounted(() => {
  //判断是重点部位还是非重点部位
  type.value = props.obj.type ? props.obj.type : 'zdbw'
  //判断是楼层还是建筑物
  formData.value.type = props.type ? props.type : props.obj.type
  if (props.type == 'jzw') {
    pageData.listQuery.buildingid = props.obj.id
  } else if (props.type == 'lc') {
    pageData.listQuery.floorid = props.obj.id
  }
  if (props.obj.type == 'zdbw') {
    pageData.listQuery.sf = '0'
  } else if (props.obj.type == 'fzdbw') {
    pageData.listQuery.sf = '1'
  } else {
    pageData.listQuery.sf = '0'
  }
  gettablist()
})
//根据建筑物id或楼层id分页查询部位
const gettablist = () => {
  tableloading.value = true
  postApi(pageData.listQuery, '/mosty-jcgl/part/listByBuildId').then((res) => {
    if (res) {
      tableloading.value = false
      pageData.tableData = res.records
      total.value = res.total
    }
  })

}

//关闭
const saveSuccess = async (obj) => {
  formData.value = {}
  showdialogjzw.value = false
  emits("searchChange", 'bw');
  gettablist()

}
//新增
function addUserHander() {
  if (props.type == 'jzw') {
    formData.value.siteid = props.obj.siteid
    formData.value.sitename = props.obj.sitename
    formData.value.buildingid = props.obj.id
    formData.value.buildingname = props.obj.buildingname
    formData.value.publicarea = props.obj.publicarea

  } else if (props.type == 'lc') {
    formData.value.siteid = props.obj.siteid
    formData.value.sitename = props.obj.sitename
    formData.value.buildingid = props.obj.buildingid
    formData.value.buildingname = props.obj.buildingname
    formData.value.floorid = props.obj.id
    formData.value.floorname = props.obj.floorname
    formData.value.publicarea = props.obj.publicarea

  }
  if (props.obj.publicarea == '1') {
    formData.value.publicarea = '1'
    formData.value.sfcq = '1'
    formData.value.title = '新增场区部位'
  } else {
    formData.value.publicarea = '2'
    formData.value.sfcq = '2'
    formData.value.title = '新增建筑物部位'
  }
  formData.value.publicarea = props.obj.publicarea ? props.obj.publicarea : null
  formData.value.type = props.obj.type
  formData.value.saveBtnShow = true;
  showdialogjzw.value = true
}
//修改
function handlexg(row) {
  getApi({ id: row.id }, "/mosty-jcgl/part/queryScenePartById").then((res) => {
    if (res) {
      formData.value = res;
      if (props.obj.publicarea == '1') {
        formData.value.publicarea = '1'
        formData.value.title = '修改场区部位'
      } else {
        formData.value.title = '修改建筑物部位'
      }
      formData.value.partname = res.qtmc ? res.qtmc : res.partname;
      formData.value.checktype = res.checktype
      formData.value.qtmc = res.qtmc
      formData.value.type = props.obj.type
      formData.value.saveBtnShow = true;
      showdialogjzw.value = true

    }
  })
}
//查看
function handleSee(row) {
  getApi({ id: row.id }, "/mosty-jcgl/part/queryScenePartById").then((res) => {
    if (res) {

      formData.value = res;
      if (props.obj.publicarea == '1') {
        formData.value.publicarea = '1'
        formData.value.title = '场区部位详情'
      } else {
        formData.value.title = '建筑物部位详情'
      }
      formData.value.type = props.obj.type
      formData.value.saveBtnShow = false;
      showdialogjzw.value = true

    }
  })
}
//注销
function handledelete(row) {
  getApi({ id: row.id }, `/mosty-jcgl/part/deleteScenePartOne`).then(res => {
    ElMessage.success("删除成功");
    emits("searchChange", 'bw');
    gettablist()
  })
}


//查询
function Searchdata() {
  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>
