<template>
  <el-dialog :title="props.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" style="width: 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>
              <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>
      <!-- 县公司 -->
      <xgsTC :title="xgsTCTitle" :years="props.years" v-if="isShowXgsTC" @close="closeXgsTC" :row="currRow" />
    </div>
  </el-dialog>
</template>
<script setup>
// 引入
import { reactive, onMounted, ref, defineProps, defineEmits } from 'vue'
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { filterqx } from "@/utils/auth.js";
import xgsTC from './xgsTC.vue';
const propsrow = ref({})
const props = defineProps({
  years: {
    type: String,
    default: ''
  },
  row: {
    type: Object,
    default: () => { }
  },
  title: {
    type: String,
    default: ''
  },
  /** 是否编辑 （使用登记-才能编辑） */
  isEdit: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['close'])

/** 县公司标题 */
const xgsTCTitle = ref('')
const isEditTc = ref(false)
const isShowXgsTC = ref(false)
/** 当前层级 1省 2市 3县 */
const currLev = ref(3) // 1 省 2 市 3 县

/** 是否是县公司 */
const isxgs = ref(filterqx('isxgs') == '1')
/**市公司 */
const isgs = ref(filterqx('isgs') == '1')
/**省公司 */
const isSgs = ref(filterqx('isSgs') == '1')
/** 当前查看或审核行 */
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 isShowDialog = ref(true);
const listQuery = reactive({
  id: '',
  orgCode: '',
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  }

});
const tableData = ref([])

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

  {
    title: "操作",
    width: 'auto',
    prop: "actions",
    fixed: 'right',
    slot: true
  }
])
function getDataList () {
  tableData.value = []
  tableloading.value = true;
  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}-查看详情`
  isEditTc.value = type == 'edit'
  isShowXgsTC.value = true
}

const closeXgsTC = () => {
  isShowXgsTC.value = false
  getDataList()
}

onMounted(() => {
  propsrow.value = JSON.parse(JSON.stringify(props.row))
  Object.assign(listQuery, { id: propsrow.value.id, orgCode: propsrow.value.orgCode })
  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>
