<template>
  <div>
    <!-- 查询 -->
    <div class='tabox'>
      <div class="headBox3">
        <div>
          <el-input placeholder="请输入内部编号或附件名称进行查询" v-model="pageData.listQuery.keywords"
            style='width:300px;margin-right:10px;'></el-input>
          <el-button type="primary" @click="Searchdata">
            <el-icon>
              <Search />
            </el-icon>
            <span>查询</span>
          </el-button>
        </div>

        <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 #responsibilitypersonname="{ row }">
          <span>{{ row.responsibilitypersonname ? row.responsibilitypersonname.replace(/（null）/g, '') : '' }}</span>
        </template>
        <template #actions="{ row, $index }">
          <span class="operedit" @click="handlexg(row, $index)" 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, $index)">
            <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>
      </MOSTY.Table>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="pageData.pageConfiger" @changeNo="handleCurrentChange"
          @changeSize="handleSizeChange" />
      </div>
    </div>
  </div>
  <!--安全装置-->
  <div v-if="showdialogjzw" class="dialog-box">
    <Addbpdfile :formData="formData" @saveSuccess="saveSuccess" :obj="props.obj" :type="props.obj.type"
      :opt="props.opt" />
  </div>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import Addbpdfile from "@/components/dialog/Addbpdfile.vue";
import { reactive, ref, onMounted } from "vue"
import { postApi, getApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
const emits = defineEmits(["handleChange", 'searchChange']);
const props = defineProps({
  obj: {
    default: null,
    type: Object
  },
  /** 其他参数 options */
  opt: {
    default: {
      type: '01' // 01 设备附件 02 预防性实验附件 03 防护装置 04 保护装置
    },
    type: Object
  }
});
const tableloading = ref(false);
const showdialogjzw = ref(false);
const total = ref(0)
const formData = ref({
  title: ""
});
const titleObj = {
  '01': '设备附件',
  '02': '预防性实验附件',
  '03': '防护装置附件',
  '04': '保护装置附件'
}
const pageData = reactive({
  pageConfiger: {
    pageCurrent: 1,
    pageSize: 10,
    total: 0
  },
  listQuery: {
    pageCurrent: 1,
    pageSize: 10,
    type: props.opt.type || '01', // 01 设备附件 02 预防性实验附件 03 防护装置 04 保护装置
  },
  tableColumns: [
    {
      title: "附件名称",
      prop: "name"
    },
    {
      title: "内部编号",
      prop: "nbbh"
    },
    {
      title: "维修或更换时间",
      prop: "handleTime"
    },
    {
      title: "责任人",
      prop: "responsibilitypersonname",
      slot: true
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
  tableData: []
})
onMounted(() => {
  pageData.listQuery.zbid = props.obj.id
  //获取子表
  getzblist()
});
//获取子表
function getzblist() {
  postApi(pageData.listQuery, '/mosty-jcgl/SbglBpdsbZb/querySbglBpdsbZbInfo').then(res => {
    pageData.tableData = res.records
      ? res.records : [];
    pageData.pageConfiger.total = res.total
  })
}
//新增
function addUserHander() {
  formData.value.siteid = props.obj.siteid ? props.obj.siteid : null
  formData.value.zbid = props.obj.id ? props.obj.id : null
  formData.value.sitename = props.obj.sitename ? props.obj.sitename : null
  formData.value.buildingname = props.obj.buildingname ? props.obj.buildingname : null
  formData.value.buildingid = props.obj.buildingid ? props.obj.buildingid : null
  formData.value.floorid = props.obj.floorid ? props.obj.floorid : null
  formData.value.floorname = props.obj.floorname ? props.obj.floorname : null
  formData.value.partname = props.obj.partname ? props.obj.partname : null
  formData.value.partid = props.obj.partid ? props.obj.partid : null
  formData.value.publicarea = props.obj.publicarea ? props.obj.publicarea : null;
  formData.value.sfcq = props.obj.sfcq ? props.obj.sfcq : null;
  formData.value.checktype = props.obj.checktype ? props.obj.checktype : null;
  formData.value.qtmc = props.obj.qtmc ? props.obj.qtmc : null;
  formData.value.responsibilitydeptname = props.obj.responsibilitydeptname ? props.obj.responsibilitydeptname : null
  formData.value.responsibilitydeptid = props.obj.responsibilitydeptid ? props.obj.responsibilitydeptid : null
  formData.value.responsibilitypersonname = props.obj.responsibilitypersonname ? props.obj.responsibilitypersonname : null
  formData.value.responsibilityperson = props.obj.responsibilityperson ? props.obj.responsibilityperson : null
  formData.value.title = titleObj[props.opt.type] + '新增';
  formData.value.saveBtnShow = true;
  showdialogjzw.value = true
  tableloading.value = false
}
//修改
function handlexg(row) {
  formData.value.id = row.id;
  formData.value.sitename = props.obj.sitename ? props.obj.sitename : null;
  formData.value.buildingname = props.obj.buildingname ? props.obj.buildingname : null;
  formData.value.floorname = props.obj.floorname ? props.obj.floorname : null;
  formData.value.partname = props.obj.partname ? props.obj.partname : null
  formData.value.publicarea = props.obj.publicarea ? props.obj.publicarea : null;
  formData.value.sfcq = props.obj.sfcq ? props.obj.sfcq : null;
  formData.value.checktype = props.obj.checktype ? props.obj.checktype : null;
  formData.value.qtmc = props.obj.qtmc ? props.obj.qtmc : null;
  formData.value.title = titleObj[props.opt.type] + '修改';
  formData.value.saveBtnShow = true;
  showdialogjzw.value = true
}
//查看
function handleSee(row) {
  formData.value.id = row.id;
  formData.value.sitename = props.obj.sitename ? props.obj.sitename : null;
  formData.value.buildingname = props.obj.buildingname ? props.obj.buildingname : null;
  formData.value.floorname = props.obj.floorname ? props.obj.floorname : null;
  formData.value.partname = props.obj.partname ? props.obj.partname : null
  formData.value.publicarea = props.obj.publicarea ? props.obj.publicarea : null;
  formData.value.sfcq = props.obj.sfcq ? props.obj.sfcq : null;
  formData.value.checktype = props.obj.checktype ? props.obj.checktype : null;
  formData.value.qtmc = props.obj.qtmc ? props.obj.qtmc : null;
  formData.value.title = titleObj[props.opt.type] + '详情';
  formData.value.saveBtnShow = false;
  showdialogjzw.value = true
}
//删除
function handledelete(row) {

  postApi([row.id], `/mosty-jcgl/SbglBpdsbZb/delSbglBpdsbZbInfo`).then(res => {
    ElMessage.success("删除成功");
    emits("searchChange", 'zsbfj');
    getzblist()
  })

}

const saveSuccess = async (val, obj) => {
  formData.value = {}
  showdialogjzw.value = false
  if (obj) {
    //新增成功不刷新表格直接追加
    pageData.tableData.unshift(obj);
    total.value + 1
  } else {
    //修改不追加，直接刷新
    getzblist()
  }
  emits("searchChange", 'zsbfj');
}
//查询
function Searchdata() {
  getzblist()
}
//页码发生变化
const handleCurrentChange = (val) => {
  pageData.listQuery.pageCurrent = val;
  pageData.pageConfiger.pageCurrent = val;
  getzblist()
};
//查询条数发生变化
const handleSizeChange = (val) => {
  pageData.listQuery.pageSize = val;
  pageData.pageConfiger.pageSize = val;
  getzblist()
};
</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>
