<template>
  <el-dialog :title="props.title" width="95%" v-model="dialogVisible" @close="onClose">
    <div class='flex just-between'>
      <div>
        <el-form ref="formRef" label-width="130px" label-align="left" :model="querySelect" label-suffix=":"
          style="flex-wrap: wrap">
          <el-form-item label="锅炉类型" prop="boilerCode">
            <div style="width: 337px;">
              <MOSTY.DictRidioAndSelect :dictData="D_BZ_GLLX" v-model="querySelect.boilerCode" selectType="select"
                @getselect='onChangesblx' />
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button @click="onRest"> <el-icon>
            <Refresh />
          </el-icon>重置</el-button>
        <el-button @click="onAdd" style="margin-left: 10px !important;">新增</el-button>
      </div>
    </div>

    <el-table ref="multipleTableRef" :row-key="keyid" border :data="dataTable" style="width: 100%; margin-bottom: 10px"
      v-loading="tableLoading" :header-cell-style="{ background: '#F6F6F6' }" height="50vh">
      <el-table-column type="index" label="序号" width="55" fixed />
      <el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in columnTable" :key="index">
      </el-table-column>
      <el-table-column label="操作" width="140" fixed="right">
        <template #default="{ row }">
          <el-link type="primary" @click="handleChange(row)">查看</el-link>
          <el-link type="primary" @click="exit(row)">编辑</el-link>
          <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
            @confirm="detelChange(row)">
            <template #reference>
              <el-link type="danger">删除</el-link>
            </template>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>
    <div class="flex just-center">
      <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="querySelect.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="querySelect.pageSize"
        layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
    </div>
  </el-dialog>
  <Detailgl @close="detailClose" :title="dialogTitle" v-if="detailVisible" :detail="detail" :savebtn="savebtn"
    :orgObj="props.orgObj" :sbsslist='{ D_BZ_GLLX }' />
</template>

<script setup>
import { onMounted, ref, reactive, getCurrentInstance } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import Detailgl from "./Detailgl.vue";
import { getItem } from "@/utils/storage";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const { D_BZ_GLLX } = proxy.$dict("D_BZ_GLLX");
const savebtn = ref(false)
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  isProvinces: Boolean,
  params: Object,
  isSfsb: Boolean,
  orgObj: Object,
  sbcs: {
    type: String,
    default: ''
  }
});
const emits = defineEmits(["close"]);
const dialogVisible = ref(true);
const detailVisible = ref(false);
const detail = ref(null)
const dialogTitle = ref('')
const formRef = ref();
const multipleTableRef = ref(null);
const columnTable = ref([
  { label: '企业名称', prop: 'baOrgName' },
  { label: '锅炉类型', prop: 'boilerName' },
  { label: '蒸发量(吨/时)', prop: 'boilerEvaporation' },
  { label: '数量', prop: 'boilerQty' }
])
const total = ref(0)
const dataTable = ref([])
const querySelect = reactive({
  pageCurrent: 1,
  pageSize: 10,
  year: props.params.year,
  half: props.params.half,
  boilerCode: ''
})

const tableLoading = ref(false);
onMounted(() => {
  getDataList();
});

// 获取表格数据
const getDataList = () => {
  tableLoading.value = true;
  dataTable.value = []
  querySelect.orgcode = props.orgObj.orgcode
  if (props.sbcs) {
    querySelect.sbcs = props.sbcs
  }
  let _url = props.sbcs ? 'getHistoryPageByOrgcode' : 'getListByOrgCode'
  getApi(querySelect, `/mosty-jcgl/data/epsemBoiler/${_url}`).then((res) => {
    if (res) {
      dataTable.value = res.records;
      tableLoading.value = false;
      total.value = res.total
    }
  });
};
// 点击操作
const handleChange = (data) => {
  detail.value = data
  savebtn.value = false
  dialogTitle.value = `特种设备-锅炉详情`
  detailVisible.value = true
}
function onAdd() {
  detail.value = null
  savebtn.value = true
  dialogTitle.value = `特种设备-锅炉新增`
  detailVisible.value = true
}
function exit(data) {
  detail.value = data
  savebtn.value = true
  dialogTitle.value = `特种设备-锅炉编辑`
  detailVisible.value = true
}
// 选择锅炉类型
const onChangesblx = e => {
  querySelect.boilerCode = e.value
  getDataList()
}
//删除
function detelChange(row) {
  postApi([row.sourceId], '/mosty-jcgl/data/epsemBoiler/del').then(res => {
    proxy.$message.success(`删除成功`);
    getDataList()
  })
}

const keyid = (row) => {
  return row.sourceId;
};

// 重置
const onRest = () => {
  querySelect.pageCurrent = 1
  querySelect.pageSize = 10
  querySelect.boilerCode = null
  total.value = 0
  getDataList();
};
// 关闭弹窗
const onClose = () => {
  emits('close')
};
//关闭详情弹窗
const detailClose = val => {
  getDataList()
  detailVisible.value = false
}
// 切换条数
const handleSizeChange = (val) => {
  querySelect.pageSize = val;
  getDataList();
};
// 切换分页
const handleCurrentChange = (val) => {
  querySelect.pageCurrent = val;
  getDataList();
};




</script>

<style lang="scss" scoped>
.content {
  .topper {
    display: flex;

    .sub-le {
      flex: 1;
      padding: 15px 15px 5px 15px;
      border-right: 1px solid #ebeef5;
    }
  }

  .bottom {
    padding: 0 15px 10px 15px;
  }
}
</style>
