<template>
  <div>
    <div class="bigBox" :style="{ height: bigHeight }">

      <div class="right">
        <div class="titleBox">
          <div class="title">承诺书详情</div>
          <div class="btnBox">
            <el-button type="primary" @click="CloseEvent">
              <el-icon>
                <Back />
              </el-icon>
              <span>返回</span>
            </el-button>
          </div>
        </div>
        <!-- 表格 -->
        <div class="tabBox">
          <el-table ref="multipleTableRef" :data="tableData" stripe v-loading="tableloading" style="width: 100%" @selection-change="handleSelectionChange" border>
            <el-table-column label="签订人员" property="ryXm"></el-table-column>
            <el-table-column label="签订时间" property="qdsj"></el-table-column>
            <el-table-column label="签订状态" property="status">
              <template #default="{ row }">
                <el-tag style="color: red;" v-if="!row.qdsj">未签订</el-tag>
                <span v-if="row.qdsj">已签订</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="{ row }">
                <span class="operesee" @click="registration(row)"><el-icon>
                    <Compass />
                  </el-icon>查看</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="fenye">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.size" layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!--  承诺书签订详情 -->
    <div v-if="xqShow" class="dialog-box">
      <cnsmain @close="xqShow = false" v-if="xqShow" :cnsId="cnsId" :ryid="ryid" />
    </div>
  </div>
</template>

<script setup>
// 引入
import cnsmain from "./cnsmain.vue";
import { reactive, onMounted, ref, defineProps, watch } from "vue";
import { filterYear } from "@/utils/auth.js";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
const emits = defineEmits(["close"]);
//关闭综合配置表
const CloseEvent = () => {
  emits("close");
};
const xqShow = ref(false);

const props = defineProps({
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  xqid: String,
  orgcode: String
});
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 10
});
const rgBoxWid = ref("calc(100% - 300px)");
// 数据
const bigHeight = ref(); //整个高度
const tableData = ref([]);
const total = ref(0);
onMounted(() => {
  bigHeightFn();
  getDataList();
});
// 分页
const handleSizeChange = (val) => {
  listQuery.pageSize = val;
  // getDataList();
};
// 分页码
const handleCurrentChange = (cur) => {
  listQuery.pageCurrent = cur;
  // getDataList();
};
const token = ref("");

// 方法
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
};
//详情
const cnsId = ref("");
const ryid = ref("");
const registration = (row) => {
  ryid.value = row.ryId;
  cnsId.value = listQuery.cnsId;
  xqShow.value = true;
};
//获取列表数据
const tableloading = ref(false);
function getDataList () {
  tableloading.value = true;
  listQuery.cnsId = props.xqid;
  listQuery.orgcode = props.orgcode;
  let params = listQuery;
  getApi(params, "/mosty-jcgl/cns/getQdxxByOrgcode").then((res) => {
    if (res) {
      tableloading.value = false;
      tableData.value = res;
      total.value = res.total;
    } else {
      tableData.value = [];
      tableloading.value = false;
    }
  });
}


watch(
  () => props.saveBtnShow,
  (val) => {

  }
);
</script>

<style lang="scss" scoped>
.titleBox {
  border: none !important;
}

.searchBox {
  .el-form {
    margin-bottom: 17px;
  }
}

.bigBox {
  display: flex;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
  }

  .left {
    width: 300px;
    // height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--el-color-primary);

    .treeBox {
      margin-top: 15px;
    }
  }

  .right {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }

  .btnBox {
    display: flex;
  }
}

.tabBox {
  height: calc(100% - 65px);
  border-left: 0 !important;

  .el-table {
    height: 91%;
  }

  .fenye {
    top: 95%;
  }
}

.el-form {
  .el-form-item {
    width: 600px;
    margin: 0 auto;
    margin-top: 10px;
  }
}
</style>