<script name="meetingProjectDialog" setup>
import { ref, reactive, watch } from 'vue'
import { projects } from '@/http/apis/expertManage/reviewMeeting'

const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    meetingId: {
      type: Number,
      default: null
    }
  }),
  emits = defineEmits(['close']),
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '项目名称',
      key: 'projectName',
      prop: 'projectName',
      minWidth: '150',
      showOverflowTooltip: true
    },
    {
      label: '申报单位',
      key: 'buildOrg',
      prop: 'buildOrg',
      minWidth: '80',
      showOverflowTooltip: true
    },
    {
      label: '项目类型',
      key: 'projectTypeName',
      prop: 'projectTypeName',
      width: '100'
    },
    {
      label: '申报金额（万元）',
      key: 'declaredAmount',
      prop: 'declaredAmount',
      width: '150'
    },
    {
      label: '预算年度',
      key: 'projectYear',
      prop: 'projectYear',
      width: '80'
    }
  ]),
  tableData = ref(),
  getTableData = async () => {
    const res = await projects(props.meetingId)
    tableData.value = res.data
  }
watch(
  () => props.visible,
  async val => {
    if (val) {
      getTableData()
    }
  }
)
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="评审项目"
    width="60%"
    @close="emits('close')"
  >
    <table-list
      ref="tableListRef"
      :column="column"
      :data="tableData"
      :pagination="false"
      @get-table-data="getTableData"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emits('close')">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

