
<script setup>
import { ref,watch } from "vue";

import { contractInterface } from "@/api/api.js";
import AllocationLable from "./allocationLable.vue";
import mPage from "@/components/mPage.vue";
import RaiHistoryContract from "./raiHistoryContract.vue";
import AllocationDetailCom from "./allocationDetail.vue";

const props = defineProps({
  isShowDlg: {
    type: Boolean,
    default: false,
  },
  listDlg: {
    type: Object,
    default: {},
  },
})
const emits = defineEmits(['update:isShowDlg','update:listDlg'])

const datalist=ref([])
const page_no=ref(1)
const total=ref(0) //条数
const PageSize=ref(10) //每页显示几条
const dealList=ref([])
const isPreview=ref(false)
const allocationDetailVisible=ref(false)
const allocationDetailForm=ref({})

watch(()=>props.isShowDlg,(newVal)=>{
  newVal && getList();
})

// 关闭弹框
const handleClose=()=>{
  emits("update:isShowDlg", false);
  emits("update:listDlg", false);
}

// 获取数据
const getList=async()=>{
console.log(props.listDlg);
const res = await contractInterface.getAllocationContract({
  ResearcherRealName: props.listDlg.RealName,
  Keyword: props.listDlg.searchVal,
  StartDate: props.listDlg.date[0] ? props.listDlg.date[0] : "",
  EndDate: props.listDlg.date[1] ? props.listDlg.date[1] : "",
  PageSize: PageSize.value,
  CurrentIndex: page_no.value,
});
  if (res.Ret === 200) {
    datalist.value = res.Data.List;
    total.value = res.Data.Paging.Totals;
  }
}
// 非标准预览
const isPreviewHistoryDetail=(res)=>{
  isPreview.value = true;
  dealList.value = res.Data.List;
}
//分页
const handleCurrentChange=(page)=>{
  page_no.value = page;
  getList();
}
// 派点详情
const allocationDetail=(item)=>{
  allocationDetailVisible.value = true;
  allocationDetailForm.value = item;
  allocationDetailForm.value.isDlgType = "关联合同";
}

</script>

<template>
  <el-dialog title="关联合同" width="90%" :append-to-body="true" v-model="props.isShowDlg" v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleClose">
    <allocation-lable :tableList="datalist" typeLable="关联合同" @isPreviewHistoryDetail="isPreviewHistoryDetail" @allocationDetail="allocationDetail" />
    <el-col :span="24" class="toolbar">
      <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChange" />
    </el-col>
    <rai-history-contract v-model:isPreview="isPreview" v-model:dealList="dealList" />
    <allocation-detail-com v-model:allocationDetailVisible="allocationDetailVisible" v-model:allocationDetailForm="allocationDetailForm" />
  </el-dialog>
</template>

<style scoped lang="scss">
.content-box-table-detail {
  height: 400px;
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  margin-top: 20px;
  .table-cont-top {
    position: sticky;
    top: 0;
    left: 0;
  }
  .table-cont {
    display: flex;
  }
  .head-column {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dcdfe6;
    background-color: #ebeef5;
    color: #333333;
    font-weight: 500;
    margin-top: -1px;
    margin-left: -0.5px;
  }
  .head-column-item {
    width: 107px;
    height: 48px;
  }
  .head-column-item-Proportion {
    width: 73px;
    height: 48px;
  }
}
.toolbar{
  height: 52px;
}
</style>
