<script setup name="projectListDialog">
import { h, reactive, ref, watch } from 'vue'
// import { list } from '@/http/apis/projectStoreManage/projectStore'
import { filterProjects } from '@/http/apis/performanceEvaluation/evaluationPlan'
// import { useRoute } from 'vue-router'
import store from '@/store'

const {
    projectTypeOptions
  } = store.dictStore.globalDicts || {},
  // route = useRoute(),
  props = defineProps({
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    data: {
      type: Array,
      default: undefined
    },
    params: {
      type: Object,
      default: () => {
        return {}
      }
    },
    templateTypeListData: {
      type: Array,
      default: undefined
    }
  }),
  emits = defineEmits(['close', 'getProjectData']),
  searchForm = reactive({
    projectName: undefined,
    buildOrg: undefined,
    projectKind: '1'
  }),
  tableListRef = ref(),
  total = ref(0),
  column = [
    {
      type: 'selection',
      reserveSelection: true,
      width: '55'
    },
    {
      label: '项目名称',
      key: 'projectName',
      prop: 'projectName',
      minWidth: '200',
      showOverflowTooltip: true
    },
    {
      label: '预算年度',
      key: 'projectYear',
      prop: 'projectYear',
      width: 80
    },
    {
      label: '项目金额',
      key: 'declareAmount',
      prop: 'declareAmount'
    },
    {
      label: '申报单位',
      key: 'buildOrgName',
      prop: 'buildOrgName'
    },
    {
      label: '项目类型',
      key: 'projectType',
      prop: 'projectType',
      render: row => h('span', projectTypeOptions[row.projectType] || '-'),
      width: 80
    },
    {
      label: '模板类型',
      key: 'templateType',
      prop: 'templateType',
      render: row => h('span', props.templateTypeListData?.find(i => i.id === row.templateType)?.name || '-')
    }
    // {
    //   label: '是否评价',
    //   key: 'isAppraisal',
    //   prop: 'isAppraisal',
    //   render: row => h('span', row.isAppraisal ? '是' : '否'),
    //   width: 80
    // },
    // {
    //   label: '是否复评',
    //   key: 'isReAppraisal',
    //   prop: 'isReAppraisal',
    //   render: row => h('span', row.isReAppraisal ? '是' : '否'),
    //   width: 80
    // }
  ],
  tableData = ref([]),
  loading = ref(false),
  getTableData = async () => {
    loading.value = true
    // const res = await finalProjectList({
    //   ...pageParams,
    //   ...searchForm,
    //   ...props.params
    // })
    const res = await filterProjects({
    // ...pageParams,
      ...searchForm,
      ...props.params
    })
    total.value = res.data.total
    tableData.value = res.data || []
    const selectCopyData = JSON.parse(JSON.stringify(selectData.value)) || []
    if (selectCopyData?.length) {
      tableData.value && tableData.value.forEach(item => {
        const dataIds = selectCopyData.map(i => i.projectId)
        if (dataIds.includes(item.projectId)) {
          tableListRef.value.toggleRowSelect(item, true)
        }
      })
    }
    loading.value = false
  },
  selectable = (row) => {
    if (row.selfAppraisalScoreTime && row.selfAppraisalTotalScore) {
      return false
    } else {
      return true
    }
  },
  search = () => {
    getTableData()
  },
  reset = () => {
    searchForm.projectName = undefined
    searchForm.buildOrg = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  selectData = ref([]),
  selectionChange = val => {
    const ids = val.map(i => i.projectId)
    tableData.value.forEach(row => {
      if (ids.includes(row.projectId)) {
        selectData.value.push(row)
      } else {
        selectData.value = selectData.value.filter(i => i.projectId !== row.projectId)
      }
    })
  },
  confirm = async () => {
    const obj = {}
    const data = selectData.value.reduce((cur, next) => {
      obj[next.projectId] ? '' : obj[next.projectId] = true && cur.push(next)
      return cur
    }, [])
    // const postData = data.map(i => i.projectId)
    // await addProject({ projectIds: postData, appraisalId: route.query.id || undefined })
    emits('getProjectData', data)
  }
watch(
  () => props.visible,
  async val => {
    if (val) {
      if (props.data?.length) {
        selectData.value = props.data.map(i => {
          return {
            ...i
          }
        })
      } else {
        selectData.value = []
      }
      getTableData()
    }
  }
)
</script>
<template>
  <el-dialog
    :model-value="visible"
    title="添加项目"
    width="70%"
    destroy-on-close
    @close="emits('close')"
  >
    <div v-if="false" class="search mb-16">
      <el-form label-suffix=":" :model="searchForm" 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="申报单位">
              <el-input v-model="searchForm.buildUnitName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="btn">
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-tabs v-model="searchForm.projectKind" @tab-change="search">
      <el-tab-pane label="申报项目" name="1" />
      <el-tab-pane label="历史归集项目" name="2" />
      <el-tab-pane label="运维项目" name="3" />
    </el-tabs>
    <div class="max-h-[500px] overflow-y-auto">
      <table-list
        ref="tableListRef"
        v-loading="loading"
        :column="column"
        :data="tableData"
        :total="total"
        :selectable="selectable"
        row-key="projectId"
        :pagination="false"
        @selection-change="selectionChange"
        @get-table-data="getTableData"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emits('close')">关闭</el-button>
        <el-button
          type="primary"
          @click="confirm"
        >
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
