<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="['30', '31'].includes(row.stage)">结束</span>
                <span v-else-if="['22', '23'].includes(row.stage)">评价中</span>
                <span v-else-if="['10', '20'].includes(row.stage)">辨识中</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>
    </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";
const { proxy } = getCurrentInstance();
const { D_BZ_YSFYLB, D_TB_YSCWKU } = proxy.$dict("D_BZ_YSFYLB", "D_TB_YSCWKU");
const props = defineProps(['years', 'row', 'isEdit'])
const emits = defineEmits(['close'])
const propsrow = ref({})
const isShowPageList = ref(false)
/** 当前查看或审核行 */
const currRow = ref({})
const beforeClose = () => {
  emits('close')
}

const tableloading = ref(false)
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: "userName",
  },
  {
    title: "状态",
    prop: "stage",
    width: '200',
    slot: true,
  },
  {
    title: "辨识条数",
    prop: "count",
  },

])
onMounted(() => {
  propsrow.value = JSON.parse(JSON.stringify(props.row))
  Object.assign(listQuery, { id: propsrow.value.id, orgCode: propsrow.value.orgCode })
  getDataList()
})
//查询
// function onSearch (obj) {
//   listQuery.pageConfiger.pageCurrent = 1
//   listQuery.identifyYear = obj.identifyYear;
//   getDataList();
// }

function getDataList () {
  tableloading.value = true;
  const params = {
    orgCode: listQuery.orgCode,
    id: listQuery.id,
    ...listQuery.pageConfiger
  }
  getApi({ ...params }, "/mosty-jcgl/dangerPlanlist/getIdentifyProgressPeoplePageList")
    .then((res) => {
      tableData.value = []
      if (res && res.records && res.records.length > 0) {
        tableData.value = res.records;
        listQuery.pageConfiger.total = res.total;
      } else {
        // 如果 records 为空数组或 res 为空，显示提示
        ElMessage.error('无人辨识,暂无数据')
        tableData.value = []
        listQuery.pageConfiger.total = 0
      }
    }).catch((error) => {
      ElMessage.error('获取数据失败')
    }).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
  isShowPageList.value = true
}

</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>
