<template>


  <div class="bottom">
    <div class="box mt10 ml10" v-if="props.isOpen" ref="getHeight">
      <section class="flex">
        <Sjtj :info="practitioners" :isShowTip="false" :isShowBottom="false" :width="265" mb="6px" />
      </section>
    </div>
    <el-divider />
    <Search :searchArr="searchArr" @submit="onSearch">
    </Search>
    <el-divider />
    <div class="btnBox">
      <!-- v-if="data.deptname == listQuery.orgid" -->
      <el-button type="primary" @click="addInfo('add')" v-if='isAuth'>
        <el-icon>
          <CirclePlus />
        </el-icon>
        <span>新增</span>
      </el-button>
      <el-button type="primary" @click="onloadExcel" v-loading="loading">
        <el-icon>
          <Download />
        </el-icon>
        <span>导出</span>
      </el-button>
    </div>
    <section :style="{ 'height': totalHeight }">
      <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
        :isSelect="true" :isSort="true" @SortChange="SortChange" style="width: 100%;">
        <template #sitename="{ row }">
          <span>{{ row.sitename ? row.sitename : '' }}{{ row.buildingname ? '-' + row.buildingname : '' }}{{
            row.floorname ? '-' + row.floorname : '' }}{{ row.partname ? '-' + row.partname : '' }}</span>
        </template>
        <!-- 操作 -->
        <template #actions="{ row }">
          <span class="operedit" v-if='isAuth' @click="addInfo('exit', row.id)" size="small"><el-icon>
              <EditPen />
            </el-icon>修改</span>
          <el-popconfirm v-if='isAuth' confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
            @confirm="onchangedel(row)">
            <template #reference>
              <span class="operdel" size="small">
                <el-icon>
                  <delete />
                </el-icon>删除</span>
            </template>
          </el-popconfirm>
          <span class="operesee" @click="addInfo('see', row.id)" size="small"><el-icon>
              <View />
            </el-icon>查看</span>
        </template>
      </MOSTY.Table>
    </section>
    <div class="fenye">
      <MOSTY.Pages :pageConfiger="data.pageConfiger" @changeNo="changeNo" @changeSize="changeSize">
      </MOSTY.Pages>
    </div>
  </div>
  <div v-if="AddShowdia" class="dialog-box">
    <Addaqgqj v-if="AddShowdia" :obj="rowObj" @onChange="onClose" />
  </div>

</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
// import { filtertype } from "@/utils/auth.js";
import Addaqgqj from "../Details/Addaqgqj.vue";
import Sjtj from '@/views/dataReportWork/aqjypx/components/sjtj.vue'
import Search from "@/components/aboutTable/Search/index.vue";
import { ElMessage } from "element-plus";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { getItem } from "@/utils/storage";
import { getAuth } from "@/utils/tools.js";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { reactive, ref, watch, onMounted, getCurrentInstance, nextTick } from "vue";
const { proxy } = getCurrentInstance();
const { D_BZ_DLGJ_TYPE } = proxy.$dict("D_BZ_DLGJ_TYPE");
const emit = defineEmits("changePage");
const props = defineProps({ orgCode: String, isOpen: Boolean, orgname: String })
const tableloading = ref(false);
const loading = ref(false)
const practitioners = ref([
  { title: '绝缘靴', num: 0, dm: '01', icon: '/ccss/icon_01.png' },
  { title: '绝缘手套', num: 0, dm: '02', icon: '/ccss/icon_02.png' },
  { title: '绝缘工具', num: 0, dm: '03', icon: '/ccss/icon_03.png' },
  { title: '绝缘地垫', num: 0, dm: '04', icon: '/ccss/icon_04.png' }
]);
const rowObj = ref({
  title: '电力安全工器具新增',
  saveBtn: true,
  id: null,
  zdlist: { D_BZ_DLGJ_TYPE }
})
const AddShowdia = ref(false)
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20
});
const isAuth = ref(false)
const getHeight = ref(null)
const totalHeight = ref(null)
const searchArr = reactive([
  {
    showType: "select",
    prop: "type",
    options: D_BZ_DLGJ_TYPE,
    width: '250px',
  }
]);
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "单位名称",
      prop: "orgname",
      sortable: true
    },
    {
      title: "部门名称",
      prop: "deptname",
      sortable: true
    },
    {
      title: "工器具名称",
      prop: "name",
      sortable: true
    },
    {
      title: "数量",
      prop: "count",
      sortable: true
    },
    {
      title: "所属场所部位",
      prop: "sitename",
      slot: true,
      sortable: true
    },
    {
      title: "具体位置",
      prop: "location",
      sortable: true
    },
    {
      title: "上次检测日期",
      prop: "scjcrq",
      sortable: true
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],

  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  }
});
watch(
  () => props.orgCode,
  (newValue) => {
    if (props.orgCode) {
      listQuery.pageCurrent = 1
      data.pageConfiger.pageCurrent = 1;
      getTableData()
      getcount()
    }

  },
  { deep: true, immediate: true }
);
watch(() => props.isOpen, (val) => {
  nextTick(() => {
    if (val) {
      totalHeight.value = `calc(100vh - ${400 + getHeight.value.offsetHeight}px)`
    } else {
      totalHeight.value = `calc(100vh - 400px)`
    }

  })
}, {
  deep: true,
  immediate: true
})
onMounted(() => {
  isAuthorize()
  nextTick(() => {
    totalHeight.value = `calc(100vh - 400px)`
  })
  getcount()
  getTableData()
});
// 是否可以操作
const isAuthorize = async () => {
  isAuth.value = await getAuth()
}
//统计
function getcount() {
  let prams = {
    type: listQuery.type,
    orgid: listQuery.orgid,
  }
  getApi(prams, '/mosty-jcgl/labourElectricity/getStatistics').then(res => {
    if (res.length > 0) {
      for (let i = 0; i < practitioners.value.length; i++) {
        const el = practitioners.value[i];
        el.num = 0
        for (let j = 0; j < res.length; j++) {
          const li = res[j];
          if (li.type == el.dm) {
            el.num = li.count
          }
        }
      }
    }
  })
}
//排序
function SortChange(prop, order) {
  if (prop == 'orgname') {
    listQuery.sortField = 'orgid'
  } else if (prop == 'deptname') {
    listQuery.sortField = 'deptid'
  } else {
    listQuery.sortField = prop
  }
  listQuery.sortOrder = order
  getTableData()
}
const onSearch = (obj) => {
  listQuery.type = obj.type;
  listQuery.pageCurrent = 1;
  data.pageConfiger.pageCurrent = 1;
  getTableData()
  getcount()
};
//获取列表数据
function getTableData() {
  tableloading.value = true;
  listQuery.orgid = props.orgCode
  data.deptname = getItem("deptId").ssbmid;
  getApi(
    listQuery,
    "/mosty-jcgl/labourElectricity/getPageList"
  ).then((res) => {
    if (res.records) {
      data.tableData = res.records;
      data.pageConfiger.total = res.total;
    } else {
      data.tableData = [];
    }
  }).finally(() => {
    tableloading.value = false;
  });
}

const changeNo = (val) => {
  listQuery.pageCurrent = val;
  data.pageConfiger.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  data.pageConfiger.pageSize = val;
  getTableData();
};


//点击新增
function addInfo(type, id) {
  if (type == 'add') {
    rowObj.value.title = '电力安全工器具新增'
    rowObj.value.saveBtn = true
    rowObj.value.id = null
  } else if (type == 'exit') {
    rowObj.value.title = '电力安全工器具修改'
    rowObj.value.saveBtn = true
    rowObj.value.id = id
  } else {
    rowObj.value.title = '电力安全工器具详情'
    rowObj.value.saveBtn = false
    rowObj.value.id = id
  }
  AddShowdia.value = true
}
function onClose() {
  AddShowdia.value = false
  getTableData();
  getcount()
}
//删除
const onchangedel = (val) => {
  postApi(
    {},
    `/mosty-jcgl/labourElectricity/delete/${val.id}`
  ).then((res) => {
    ElMessage.success("删除成功");
    getTableData();
    getcount()
  });
};
//导出Excel
function onloadExcel() {
  let title = {
    orgname: '单位名称',
    deptname: '部门名称',
    name: '工器具名称',
    count: '数量',
    sitename: '所属场所部位',
    location: '具体位置',
    scjcrq: '上次检测日期',
  }
  loading.value = true
  getApi(listQuery, '/mosty-jcgl/labourElectricity/exportData').then((res) => {
    if (res) {
      let data = res
      if (data.length > 0) {
        data.forEach(el => {
          el.sitename = `${el.sitename ? el.sitename : ''}${el.buildingname ? '-' + el.buildingname : ''}${el.floorname ? '-' + el.floorname : ''}${el.partname ? '-' + el.partname : ''}`;
        });
        let tablename = '电力安全工器具台账.xlsx'
        exportXlsx(title, data, `${props.orgname} 电力安全工器具台账`, tablename);
        loading.value = false

      } else {
        ElMessage.warning('暂无数据');
        loading.value = false
      }
    }

  }).catch(err => {
    loading.value = false
  })
}
</script>

<style lang="scss" scoped>
.eltab3 {
  height: calc(100vh - 390px);
}

.usermanage {
  display: flex;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }



  .right {
    padding: 0 10px;
    margin: 0px 14px;
    background: #fff;

    .head {
      display: flex;
      justify-content: space-between;
    }

    .fenye {
      top: 95%;
    }
  }
}

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