<template>
  <div>
    <!-- 查询 -->
    <div class='tabox'>
      <div class="headBox3">
        <el-input placeholder="请输入内部编号进行查询" v-model="pageData.listQuery.nbbh" clearable style='width:250px'
          v-if="props.obj.showCount" @keyup.enter="Searchdata"></el-input>
        <div>
          <el-button type="primary" @click="Searchdata" class="ml6" v-if="props.obj.showCount">
            <el-icon>
              <Search />
            </el-icon>
            <span>查询</span>
          </el-button>
          <el-button type="primary" @click="addUserHander" v-if='props.obj.saveBtnShow && isShowAddBtn'>
            <el-icon>
              <Plus />
            </el-icon>
            <span>新增</span>
          </el-button>
        </div>
      </div>
      <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="pageData.tableData" :tableloading="tableloading"
        :tableHeight="'40vh'" :isSort="true">
        <template #sblx="{ row }">
          <dict-tag v-if="row.sblx" :options="D_TB_JCYWLX" :value="row.sblx" :tag="false" />
          <span v-else>无</span>
        </template>
        <template #nbbh="{ row }">
          <span>{{ row.nbbh ? row.nbbh : '暂无' }}</span>
        </template>
        <template #specification="{ row }">
          <span v-if="row.sblx == '200201010100' || row.sblx == '200201010200'">{{ row.specification }}KG</span>
          <span v-else>{{ row.specification }}L</span>
        </template>
        <template #scopes="{ row }">
          <span v-if="row.sblx == '200201010100' || row.sblx == '200201010200'">适用于A类、B类、C类火灾类型</span>
          <span v-else>适用于A类、B类、C类、E类火灾类型</span>
        </template>
        <template #actions="{ row, $index }">
          <span style="margin-left: none;" 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>
          <span class="operecopy" @click="copy(row)" v-if="props.obj.saveBtnShow && isShowAddBtn">
            <el-icon>
              <CopyDocument />
            </el-icon>复制</span>
        </template>
      </MOSTY.Table>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="pageData.listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange">
        </MOSTY.Pages>
      </div>
    </div>
  </div>
  <!-- 灭火器 -->
  <div v-if="addbpdShow" class="dialog-box">
    <Addaqqcmhq :formData="formData" @changePage="changePage" :obj="props.obj" :type="props.obj.type" />
  </div>
</template>
<script setup>
import { getImgUrl } from "@/utils/tools.js"
import * as MOSTY from "@/components/MyComponents/index";
import Addaqqcmhq from "@/components/dialog/Addaqqcmhq.vue";
import { reactive, ref, getCurrentInstance, watchEffect, computed, watch } from "vue"
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const { D_TB_JCYWLX } = proxy.$dict("D_TB_JCYWLX");
const emits = defineEmits(["handleChange", 'tableChange', "searchChange"]);
const tableloading = ref(false);
const addbpdShow = ref(false)
const total = ref(0)
const editIndex = ref(null)
const props = defineProps({
  obj: {
    default: null,
    type: Object
  },
  //是否显示统计数据
  showCount: {
    type: Boolean,
    default: true
  },
});
const formData = ref({})
/** 实际总条数 (用于判断是否显示新增按钮,解决search查询后会显示新增按钮问题) */
const realTotal = ref(0)
const isShowAddBtn = ref(false)
const pageData = reactive({
  countlist: [
    { title: '摄像头数', num: 0, icon: getImgUrl('img/icon-ybyhA.png.png') },
    { title: '硬盘录像机', num: 0, icon: getImgUrl('img/icon-ybyhA.png.png') },
    { title: '其他', num: 0, icon: getImgUrl('img/icon-ybyhA.png.png') }
  ],
  listQuery: {
    pageCurrent: 1,
    pageSize: 10,
    total: 0
  },
  tableColumns: [
    {
      title: "灭火器类型",
      prop: "sblx",
      slot: true
    },
    {
      title: "灭火器名称",
      prop: "name",
    },
    {
      title: "型号",
      prop: "type"
    },
    {
      title: "内部编号",
      prop: "nbbh",
      slot: true
    },
    {
      title: "规格(KG/L)",
      prop: "specification",
      slot: true
    },
    {
      title: "适用范围",
      prop: "scopes",
      slot: true
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }

  ],
  tableData: []
})
// watchEffect(() => {
//   if (props.obj.showCount) {
//     pageData.listQuery.parentid = props.obj.id
//     //获取子表
//     getzblist()
//   } else {

//   }
// });
// watch(() => props.obj.id, () => {
//   if (props.obj.showCount) {

//     getzblist('watch')
//   }
// }, {
//   immediate: true
// })
watch(() => props.obj.showCount, () => {
  console.log(props.obj.showCount, 'props.obj.showCount')
  if (props.obj.showCount) {
    pageData.listQuery.parentid = props.obj.id
    getzblist()
  }
}, {
  deep: true,
  immediate: true
})
//获取子表
function getzblist(from) {
  postApi(pageData.listQuery, '/mosty-jcgl/xf/queryMhq').then(res => {
    pageData.tableData = res.records || [];
    pageData.listQuery.total = res.total
    realTotal.value = res.total
    console.log(props.obj.saveBtnShow, 'props.obj.saveBtnShow')
    console.log(props.obj.account, 'props.obj.account')
    console.log(realTotal.value, 'realTotal.value')
    // isShowAddBtn()
    isShowAddBtn.value = props.obj.account > 0 && (props.obj.account > realTotal.value)
  })
}

//新增
function addUserHander() {
  editIndex.value = null;
  formData.value.siteid = props.obj.siteid ? props.obj.siteid : null
  formData.value.parentid = 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 = '灭火器新增';
  formData.value.saveBtnShow = true;
  addbpdShow.value = true
  tableloading.value = false
}
//修改
function handlexg(row, index) {
  editIndex.value = index;
  formData.value = row;
  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.ind = index;
  formData.value.title = '灭火器修改';
  formData.value.saveBtnShow = true;
  addbpdShow.value = true
}
//复制
function copy(row, index) {
  editIndex.value = null;
  formData.value = row;
  delete formData.value.id;
  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.ind = index;
  formData.value.title = '灭火器新增(复制)';
  formData.value.saveBtnShow = true;
  addbpdShow.value = true
}
//查看
function handleSee(row) {
  formData.value = row;
  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 = '灭火器详情';
  formData.value.saveBtnShow = false;
  addbpdShow.value = true
}
//删除
function handledelete(row) {
  getApi({ id: row.id }, `/mosty-jcgl/xf/deleteTbMhqOne`).then(res => {
    ElMessage.success("删除成功");
    emits("searchChange", 'mhq');
    getzblist()
  })
  // if (props.obj.showCount) {

  // } else {
  //   pageData.tableData.forEach((item, index) => {
  //     if (row == item) {
  //       pageData.tableData.splice(index, 1);
  //     }
  //   });
  // }

}
//关闭
const changePage = async (val, obj) => {
  //新增时子表不发任何请求
  //修改时子表的增删改都要发送请求
  formData.value = {}
  addbpdShow.value = false
  if (props.obj.showCount) {
    getzblist()
    // if (val == 'xz') {
    //   //新增成功不刷新表格直接追加
    //   pageData.tableData.unshift(obj);
    //   total.value + 1
    // } else {
    //   //修改不追加，直接刷新

    // }
    emits("searchChange", 'mhq');
  } else {
    getzblist()
    // if (val == 'xz') {
    //   total.value++;

    //   //新增成功不刷新表格直接追加
    //   pageData.tableData.unshift(obj);

    // } else {
    //   pageData.tableData[editIndex.value] = obj
    // }
  }
  emits("tableChange", pageData.tableData);
}
//查询
function Searchdata() {
  getzblist()
}
//页码发生变化
const handleCurrentChange = (val) => {
  pageData.listQuery.pageCurrent = val;
  getzblist()
};
//查询条数发生变化
const handleSizeChange = (val) => {
  pageData.listQuery.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>
