<template>
  <div>
    <!-- 查询 -->
    <div class='tabox'>
      <div class="head" v-if='props.title'>
        <div class="title">{{ props.title }}</div>
      </div>
      <el-divider v-if='props.title' />
      <Search :searchArr="searchArr" @submit="onSearch">
      </Search>
      <el-divider />
      <div class="btnBox">
        <el-button type="primary" @click="addUserHander" v-if='props.obj.saveBtnShow && showadd'>
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>新增</span>
        </el-button>
      </div>
      <section class='eltab9'>
        <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="pageData.tableData"
          :tableloading="tableloading">
          <template #power="{ row }">
            <span>{{ row.power ? row.power + 'KW' : '' }}</span>
          </template>
          <template #jdqk="{ row }">
            <dict-tag :options="D_BZ_SF" :value="row.jdqk" :tag="false" />
          </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>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="pageConfiger" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
      </div>
    </div>
  </div>
  <!--生产设备设施-->
  <div v-if="addtzsbShow" class="dialog-box">
    <Addscsbssindex :formData="formData" @changePage="changePage" :obj="props.obj" :type="props.obj.type"
      :canteenInfoId="pageData.listQuery.canteenInfoId" />
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import Search from "@/components/aboutTable/Search/index.vue";
import Addscsbssindex from "@/components/dialog/Addscsbssindex.vue";
import { reactive, ref, onMounted, watch, getCurrentInstance, defineProps } from "vue"
import { getApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";


const emits = defineEmits(["handleChange", 'searchChange']);
const { proxy } = getCurrentInstance();
const { D_BZ_SF } = proxy.$dict("D_BZ_SF")
//查询条件
const searchArr = reactive([

  {
    showType: "input",
    prop: "name",
    width: '250px',
    placeholder: '请输入设备名称进行查询'
  }
]);
const props = defineProps({
  obj: {
    default: null,
    type: Object
  },
  type: {
    default: '',
    type: String
  },
  title: {
    default: '',
    type: String
  },
});
const pageConfiger = reactive({
  pageSize: 10,
  pageCurrent: 1,
  total: 0
})
const showadd = ref(true)
const tableloading = ref(false);
const formData = ref({
  title: "",
  saveBtnShow: true,
});
const addtzsbShow = ref(false)
const pageData = reactive({
  listQuery: {
    pageCurrent: 1,
    pageSize: 15,
    type: '1',
    canteenInfoId: props.obj && props.obj.id,
  },
  tableColumns: [
    {
      title: "设备名称",
      prop: "name"
    },
    {
      title: "内部编号",
      prop: "nbbh"
    },
    {
      title: "所属场所",
      prop: "sitename"
    },
    {
      title: "所属部位",
      prop: "partname"
    },
    {
      title: "功率",
      prop: "power",
      slot: true
    },
    {
      title: "投入使用日期",
      prop: "usertime"
    },
    {
      title: "接地情况",
      prop: "jdqk",
      slot: true
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
  tableData: []
})
const fromObj = ref({ type: '1' })
onMounted(() => {
  console.log(props.obj, ' props.obj')
  showadd.value = props.obj.showadd
  pageData.listQuery.pageSize = 15
  // 食堂管理的 场地,楼层从外面获取
  if (props.obj.from === '食堂管理') {
    formData.value.siteid = props.obj.siteId ? props.obj.siteId : null;
    formData.value.sitename = props.obj.siteName ? props.obj.siteName : null;
    formData.value.buildingid = props.obj.buildingId ? props.obj.buildingId : null;
    formData.value.buildingname = props.obj.buildingName ? props.obj.buildingName : null;
    formData.value.floorid = props.obj.floorId ? props.obj.floorId : null;
    formData.value.floorname = props.obj.floorName ? props.obj.floorName : null;
    formData.value.partid = props.obj.partId ? props.obj.partId : null;
    formData.value.partname = props.obj.partName ? props.obj.partName : null;
  }
  watch(
    () => props.obj,
    (newValue) => {
      if (newValue) {
        pageData.listQuery.orgcode = newValue.orgcode
        pageData.listQuery.siteid = newValue.siteid
        pageData.listQuery.buildingid = newValue.buildingid
        pageData.listQuery.floorid = newValue.floorid
        pageData.listQuery.partid = newValue.partid
        fromObj.value.orgcode = newValue.orgcode
        fromObj.value.type = '0'
        pageData.listQuery.type = '0'
        getTabList()
      }
    },
    { deep: true, immediate: true }
  );
})
//生产设备设施分页查询
function getTabList() {
  tableloading.value = true

  getApi(pageData.listQuery, "/mosty-jcgl/sbglScsbss/getCanteenPage").then((res) => {
    if (res) {
      tableloading.value = false
      pageData.tableData = res.records
      pageConfiger.total = res.total
    }
  })
}

//新增
function addUserHander() {
  formData.value.type = props.type
  formData.value.siteid = props.obj.siteId ? props.obj.siteId : null;
  formData.value.sitename = props.obj.siteName ? props.obj.siteName : null;
  formData.value.buildingid = props.obj.buildingId ? props.obj.buildingId : null;
  formData.value.buildingname = props.obj.buildingName ? props.obj.buildingName : null;
  formData.value.floorid = props.obj.floorId ? props.obj.floorId : null;
  formData.value.floorname = props.obj.floorName ? props.obj.floorName : null;
  formData.value.partid = props.obj.partId ? props.obj.partId : null;
  formData.value.partname = props.obj.partName ? props.obj.partName : null;
  formData.value.title = '食堂设备设施新增';
  formData.value.saveBtnShow = true;
  addtzsbShow.value = true
  tableloading.value = false
}
//修改
function handlexg(row) {
  formData.value.title = '食堂设备设施修改';
  formData.value.type = props.type
  formData.value.qtmc = props.obj.qtmc ? props.obj.qtmc : null
  formData.value.id = row.id
  formData.value.saveBtnShow = true;
  addtzsbShow.value = true
}
//查看
function handleSee(row) {
  formData.value.title = '食堂设备设施详情';
  formData.value.type = props.type
  formData.value.qtmc = props.obj.qtmc ? props.obj.qtmc : null
  formData.value.id = row.id
  formData.value.saveBtnShow = false;
  addtzsbShow.value = true
}
//注销
function handledelete(row) {
  getApi({ id: row.id }, `/mosty-jcgl/sbglScsbss/deleteTbSbglScsbssOne`).then(res => {
    ElMessage.success("删除成功");
    emits("searchChange", 'scsb');
    getTabList()
  })
}
//关闭
const changePage = async (obj) => {
  formData.value = {}
  addtzsbShow.value = false
  pageData.listQuery.sblx = null
  emits("searchChange", 'scsb');
  if (obj) {
    //新增成功不刷新表格直接追加
    pageData.tableData.unshift(obj);
    pageConfiger.total + 1
  } else {
    //修改不追加，直接刷新
    getTabList()
  }
}
//查询
function onSearch(obj) {
  pageData.listQuery.sblx = null
  pageData.listQuery.name = obj.name
  getTabList()
}
//页码发生变化
const handleCurrentChange = (val) => {
  pageData.listQuery.pageCurrent = val;
  pageConfiger.pageCurrent = val;
  getTabList()
};
//查询条数发生变化
const handleSizeChange = (val) => {
  pageData.listQuery.pageSize = val;
  pageConfiger.pageSize = val;
  getTabList()
};
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    height: 39px;
    line-height: 39px;
    font-size: 18px;
    color: #0f3916;
  }
}


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

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

.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}
</style>
