<template>
  <el-dialog :title="title" v-model="isShowDialog" width="50vw" :before-close="beforeClose">

    <div style="overflow-y: auto;">
      <div style="display: flex;justify-content: end;margin-bottom: 5px;">
      </div>
      <MOSTY.PageTree :searchType="'03'" :isShowLeftTree="false">
        <template #serach>
        </template>
        <template #table>
          <section class="table-content">
            <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading"
              :isSelect="false" :isSort="false" :tableHeight="'100%'" :actionsW="300">
              <template #stage="{ row }">
                <span v-if="row.stage == '31' || row.stage === '30'">结束</span>
                <span v-if="row.stage == '21'">汇总中</span>
                <span v-if="row.stage == '10' || row.stage == '20'">辨识中</span>
                <span v-if="row.stage == '22' || row.stage === '23'">评价中</span>
              </template>
              <template #actions="{ row }">
                <span class="operesee" @click="seeDetail(row)"><el-icon>
                    <Compass />
                  </el-icon>详情
                </span>
              </template>
            </MOSTY.Table>
          </section>
          <div class="fenye">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="listQuery.pageConfiger.pageCurrent" :page-sizes="[2, 5, 10, 20]"
              :page-size="listQuery.pageConfiger.pageSize" layout="total, prev, pager, next, sizes, jumper"
              :total="listQuery.pageConfiger.total"></el-pagination>
          </div>
        </template>
      </MOSTY.PageTree>
      <YsPage v-if="isShowPageList" :title="`${currRow?.orgName || ''}-详情`" :years="props.years" :row="currRow"
        @close="pageListClose" />
    </div>
  </el-dialog>

</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance, nextTick, watch, computed, defineProps, defineEmits } from 'vue'
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { getItem } from "@/utils/storage";

import YsPage from './YsPage.vue';
const props = defineProps(['years', 'row', 'isEdit'])
const emits = defineEmits(['close'])
const propsrow = ref({})
const xgsTCTitle = ref('')
const isShowPageList = ref(false)
/**单位id */
const ssdwid = getItem("deptId").ssdwid;
/** 部门id */
const ssbmid = getItem("deptId").ssbmid;
const isEditTc = ref(false)
/** 当前层级 1省 2市 3县 */
const currLev = ref(3) // 1 省 2 市 3 县
/** 当前查看或审核行 */
const currRow = ref({})
const searchArr = reactive([
  {
    showType: "year",
    prop: "years",
    width: '250px',
    defaultVal: new Date().getFullYear().toString(),

  },
]);

const beforeClose = () => {
  emits('close')
}
const tableloading = ref(false)
const USERID = getItem("USERID")
const ssdept = getItem("deptId")
const title = ref('');//弹窗标题
const isShowDialog = ref(true);
const listQuery = reactive({
  id: '',
  orgCode: '',
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  }

});
const isOpen = ref(false);
const tableData = ref([])


const tableColumns = reactive([
  {
    title: "部门名称",
    prop: "orgName",
  },
  {
    title: "状态",
    prop: "stage",
    width: '200',
    slot: true,
  },

  {
    title: "操作",
    prop: "actions",
    fixed: 'right',
    slot: true
  }
])


onMounted(() => {
  propsrow.value = JSON.parse(JSON.stringify(props.row))
  Object.assign(listQuery, { id: propsrow.value.id, orgCode: propsrow.value.orgCode })
  getDataList()
})

function getDataList () {
  tableloading.value = true;
  tableData.value = []
  const params = {
    orgCode: listQuery.orgCode,
    id: listQuery.id,
    ...listQuery.pageConfiger
  }
  getApi({ ...params }, "/mosty-jcgl/dangerPlanlist/getIdentifyProgressPageList")
    .then((res) => {
      if (res) {
        tableData.value = res.records;
        listQuery.pageConfiger.total = res.total;
      }
    }).finally(() => {
      tableloading.value = false;
    })
}


//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageConfiger.pageSize = currentSize;
  listQuery.pageConfiger.pageCurrent = 1; // 重置到第一页
  getDataList();
};
const handleCurrentChange = (pageCurrent) => {
  listQuery.pageConfiger.pageCurrent = pageCurrent;
  getDataList();
};




const seeDetail = (row, type) => {
  currRow.value = row
  xgsTCTitle.value = `${row.orgName}-查看详情`
  isShowPageList.value = true
}
const pageListClose = () => {
  isShowPageList.value = false
  getDataList()
}

</script>

<style lang="scss" scoped>
::v-deep .bigBox {
  height: initial;
}

::v-deep .bigBox .zy-right {
  margin-left: 0;
}

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

.toggle {
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #0f3916;

  .el-icon {
    transform: rotate(90deg);
    transition: all 0.25s ease;
  }

  &.active {
    .el-icon {
      transform: rotate(-90deg);
    }
  }
}

.bigBox {
  :deep(.table-content) {
    height: calc(100vh - 400px) !important;
  }
}
</style>
