<script setup name="driverDialog">
import { nextTick, reactive, ref, watch } from 'vue'
import { getMeetingProjectList } from '@/http/apis/expertManage/reviewMeeting'
import store from '@/store'
const { projectTypeOptions } = store.dictStore.globalDicts || {}

const
  props = defineProps({
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    data: {
      type: Array,
      default: undefined
    },
    meetingType: {
      type: String,
      default: '1'
    },
    dictionaryList: {
      type: Array,
      default: undefined
    }
  }),
  emits = defineEmits(['close', 'getProjectData']),
  tableListRef = ref(),
  total = ref(0),
  column = reactive([
    {
      type: 'selection',
      width: '50'
    },
    {
      label: '项目名称',
      key: 'projectName',
      prop: 'projectName',
      minWidth: '150',
      showOverflowTooltip: true
    },
    {
      label: '申报单位',
      key: 'buildOrg',
      prop: 'buildOrg',
      minWidth: '120',
      showOverflowTooltip: true
    },
    {
      label: '项目类型',
      slot: 'projectTypeName',
      prop: 'projectTypeName',
      width: '100'
    },
    {
      label: '申报金额',
      key: 'declaredAmount',
      prop: 'declaredAmount',
      width: '100'
    },
    {
      label: '预算年度',
      key: 'projectYear',
      prop: 'projectYear',
      width: '80'
    }
  ]),
  tableData = ref([]),
  getTableData = async (pageParams = tableListRef.value?.pageParams) => {
    const res = await getMeetingProjectList({
      meetingType: props.meetingType,
      ...pageParams
    })
    total.value = res.data.total
    tableData.value = res.data.records || []
    await nextTick()
    const selectCopyData = JSON.parse(JSON.stringify(selectData.value)) || []
    if (selectCopyData?.length) {
      tableData.value && tableData.value.forEach(item => {
        const dataIds = selectCopyData.map(i => i.id * 1)
        if (dataIds.includes(item.id)) {
          tableListRef.value.toggleRowSelect(item, true)
        }
      })
    }
  },
  selectData = ref([]),
  selectionChange = val => {
    const ids = val.map(i => i.id)
    tableData.value.forEach(row => {
      if (ids.includes(row.id)) {
        selectData.value.push(row)
      } else {
        selectData.value = selectData.value.filter(i => i.id !== row.id)
      }
    })
  },
  confirm = () => {
    const obj = {}
    const data = selectData.value.reduce((cur, next) => {
      obj[next.id] ? '' : obj[next.id] = true && cur.push(next)
      return cur
    }, [])
    emits('getProjectData', data)
  }
watch(
  () => props.visible,
  async val => {
    if (val) {
      if (props.data?.length) {
        selectData.value = props.data.map(i => i)
      }
      getTableData()
    }
  }
)
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="添加项目"
    width="840px"
    destroy-on-close
    @close="emits('close')"
  >
    <table-list
      ref="tableListRef"
      :column="column"
      :data="tableData"
      :total="total"
      row-key="id"
      @selection-change="selectionChange"
      @get-table-data="getTableData"
    >
      <template #projectTypeName="{scope}">
        {{ projectTypeOptions[scope.row?.projectType] }}
      </template>
    </table-list>
    <template #footer>
      <el-button type="primary" size="small" @click="confirm">
        确定
      </el-button>
      <el-button size="small" @click="emits('close')">
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>
