<script setup name="projectCollection">
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import ElTree from '@/components/elTree/index.vue'
import { list, del } from '@/http/apis/projectCollection/projectCollectionEnter'
import { getIsShowRegionTree, getTreeParams } from '@/utils/getIsShowRegionTree'
import { storeToRefs } from 'pinia'
import store from '@/store'

const
  userInfo = storeToRefs(store.userStore).userInfo,
  { proxy } = getCurrentInstance(),
  router = useRouter(),
  searchForm = reactive({
    projectName: undefined,
    buildOrg: undefined
  }),
  tableListRef = ref(),
  total = ref(0),
  // 列表数据
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '项目编号',
      key: 'baseProjId',
      prop: 'baseProjId'
    },
    {
      label: '项目名称',
      key: 'baseProjName',
      prop: 'baseProjName'
    },
    {
      label: '建设单位',
      key: 'baseBuildDeprt',
      prop: 'baseBuildDeprt'
    },
    {
      label: '行政区划',
      key: 'baseAreaName',
      prop: 'baseAreaName'
    },
    {
      label: '预算年度',
      key: 'baseProjSetYear',
      prop: 'baseProjSetYear',
      width: '80'
    },
    {
      label: '操作',
      slot: 'action',
      width: '160',
      fixed: 'right'
    }
  ]),
  data = ref([]),
  areaCode = ref(),
  getTree = (value) => {
    areaCode.value = value.regionLevel === 3 ? value.regionCode : undefined
    tableListRef.value.pageParams.pageNumber = 1
    getTableData()
  },
  activeName = ref('1'),
  changeTab = (val) => {
    activeName.value = val
    reset()
  },
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await list(activeName.value, {
      ...pageParams,
      ...searchForm,
      regionCode: areaCode.value
    })
    data.value = res.data.records
    total.value = res.data.total
  },
  search = () => {
    getTableData()
  },
  reset = () => {
    searchForm.projectName = undefined
    searchForm.buildOrg = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  // 删除·
  deleteItem = (data) => {
    proxy.$messageBox
      .confirm('确定要删除该项吗?', '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await del(activeName.value, activeName.value === '1' ? data.baseProjId : data.draftId)
        proxy.$message.success('删除成功！')
        await getTableData()
      })
  }
onMounted(() => {
  if (!getIsShowRegionTree(['SUPER_ADMIN', 'REGION_MANAGER'])) {
    areaCode.value = userInfo.value.regionCode
    getTableData(tableListRef.value.pageParams)
  }
})
</script>
<template>
  <el-container class="overflow-y-auto">
    <div class="px-20 pt-10 pb-20 w-full">
      <el-row>
        <el-col
          v-if="getIsShowRegionTree(['SUPER_ADMIN','REGION_MANAGER'])"
          :span="4"
          class="pr-16"
        >
          <elTree :params="getTreeParams({'SUPER_ADMIN':false,'REGION_MANAGER':false})" @get-tree="getTree" />
        </el-col>
        <el-col :span="getIsShowRegionTree(['SUPER_ADMIN','REGION_MANAGER'])?20:24">
          <el-card class="w-full search">
            <el-form
              :model="searchForm"
              size="small"
              label-suffix=":"
            >
              <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.buildOrg"
                      placeholder="请输入"
                    />
                  </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>
          </el-card>
          <el-card class="w-full mt-8 tab-card">
            <template #header>

              <div class="flex justify-between items-center">
                <el-tabs v-model="activeName" @tab-change="changeTab">
                  <el-tab-pane label="归集列表" name="1" />
                  <el-tab-pane label="草稿箱" name="2" />
                </el-tabs>
                <div>
                  <el-button
                    type="primary"
                    size="small"
                    icon="Plus"
                    @click="router.push({ name: 'projectCollectionEnter'})"
                  >录入项目</el-button>
                </div>
              </div>
            </template>
            <table-list
              ref="tableListRef"
              :column="column"
              :data="data"
              :total="total"
              @get-table-data="getTableData"
            >
              <template #action="{ scope }">
                <a @click="$router.push({name:'projectCollectionDetail', query: { id: scope.row.baseProjId,draftId: scope.row.draftId,type:activeName }})">查看</a>
                <a v-if="scope.row.canOperation" @click="$router.push({ name: 'projectCollectionEnter', query: { id: scope.row.baseProjId, draftId: scope.row.draftId, type: activeName }})">编辑</a>
                <a v-if="scope.row.canOperation" class="text-danger" @click="deleteItem(scope.row)">删除</a>
              </template>
            </table-list>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </el-container>
</template>
<style lang='less' scoped>
</style>
