<script name="relatedProjectDialog" setup>
import { nextTick, ref, watch, reactive } from 'vue'
import { list } from '@/http/apis/projectStoreManage/projectStore'

const
  props = defineProps({
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    data: Object,
    column: {
      type: Array,
      default: () => {
        return [
          {
            type: 'selection',
            reserveSelection: true,
            width: '55',
            fixed: 'left'
          },
          {
            label: '项目名称',
            prop: 'projectName',
            key: 'projectName'
          },
          {
            label: '预算年度',
            prop: 'projectYear',
            key: 'projectYear',
            width: 80
          }
        ]
      }
    }
  }),
  searchForm = reactive({
    projectName: undefined,
    projectYear: undefined
  }),
  // 表格数据
  tableListRef = ref(),
  total = ref(0),
  tableData = ref([]),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await list({
      ...pageParams,
      ...searchForm
    })
    tableData.value = res.data.records
    total.value = res.data.total
    selectCopyData.value = JSON.parse(JSON.stringify(selectData.value))
    if (selectCopyData.value?.length) {
      tableData.value && tableData.value.forEach(item => {
        const dataIds = selectCopyData.value.map(i => i.id)
        if (dataIds.includes(item.id) && !tableListRef.value.getSelectRows().map(i => i.id).includes(item.id)) {
          tableListRef.value.toggleRowSelect(item, true)
        }
      })
    }
  },
  // 搜索
  search = () => {
    tableListRef.value.pageParams.pageNumber = 1
    getTableData()
  },
  reset = () => {
    searchForm.projectName = undefined
    searchForm.projectYear = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  // 表格多选
  selectData = ref([]),
  selectCopyData = 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)
      }
    })
  },
  submit = async () => {
    const obj = {}
    const data = selectData.value.reduce((cur, next) => {
      obj[next.id] ? '' : obj[next.id] = true && cur.push(next)
      return cur
    }, [])
    emits('getProjectList', data)
    emits('close', true)
  },
  emits = defineEmits(['close', 'getProjectList'])

watch(() => props.visible, async (val) => {
  if (val) {
    await nextTick()
    if (props.data?.length) {
      selectData.value = props.data.map(i => {
        return {
          id: i.baseProjId,
          projectName: i.baseProjName,
          projectYear: i.baseProjSetYear
        }
      })
    }
    reset()
  } else {
    tableListRef.value.tableRef.clearSelection()
  }
})
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="选择项目"
    :width="840"
    @close="emits('close')"
  >
    <el-form :model="searchForm" label-suffix=":" size="small">
      <el-row :gutter="16">
        <el-col :span="8">
          <el-form-item label="项目名称">
            <el-input v-model="searchForm.projectName" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目预算年度" prop="projectYear">
            <el-date-picker
              v-model="searchForm.projectYear"
              type="year"
              value-format="YYYY"
              placeholder="请选择"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="btn">
            <div class="flex">
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <table-list
      ref="tableListRef"
      :column="column"
      :data="tableData"
      :total="total"
      row-key="id"
      @selection-change="selectionChange"
      @get-table-data="getTableData"
    />

    <template #footer>
      <div class="flex justify-center">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="emits('close')">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
