<script setup name = 'projectDeclare'>
import { ref, reactive, h, onMounted, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { getProjectList, draftList, declareExport, removeProject } from '@/http/apis/declareMange'
import store from '@/store'
import useExportExc from '@/utils/useExportExc'
const {
    statusOptionsCascader, statusOptions,
    projectConTypeOptions
  } = store.dictStore.globalDicts || {},
  { proxy } = getCurrentInstance(),
  // 搜索栏表单数据
  searchForm = reactive({
    stage: undefined,
    status: undefined,
    projectName: '',
    projectType: undefined,
    projectYear: undefined,
    createTiming_: undefined
  }),
  // 获取项目列表
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const params = {
      ...pageParams,
      ...searchForm,
      createOnMin: searchForm.createTiming_?.length && searchForm.createTiming_[0],
      createOnMax: searchForm.createTiming_?.length && searchForm.createTiming_[1],
      projectYear: searchForm.projectYear * 1 || undefined,
      createTiming_: undefined,
      status: searchForm.status?.[searchForm.status.length - 1]
    }
    const res = tabStatus.value ? await getProjectList(params) : await draftList(params)
    projectData.value = res.data.records
    total.value = res.data.total
  },
  activeName = ref('已申报'),
  // 切换栏
  handleClick = (tab, event) => {
    switch (tab.props.name) {
      case '已申报':
        tabStatus.value = true
        formReset()
        break
      case '草稿箱':
        tabStatus.value = false
        formReset()
        break
      default:
        break
    }
  },
  tabStatus = ref(true),
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '项目名称',
      key: 'projectName',
      prop: 'projectName',
      minWidth: '250',
      showOverflowTooltip: true
    },
    {
      label: '项目类型',
      key: 'projectTypeName',
      prop: 'projectTypeName',
      width: '100'
    },
    {
      label: '申报金额(万元)',
      key: 'declaredAmount',
      prop: 'declaredAmount',
      width: '120'
    },
    {
      label: '预算年度',
      key: 'projectYear',
      prop: 'projectYear',
      width: '100'
    },
    {
      label: '创建时间',
      key: 'createOn',
      prop: 'createOn',
      showOverflowTooltip: true,
      width: '180'
    },
    {
      label: '项目状态',
      key: 'status',
      prop: 'status',
      width: '220',
      render: row => [
        h('span', {
          class: ['dot mr-4', `bg-${row.status && statusOptions[row.status]?.color}`]
        }),
        h(
          'span',
          {
            class: `text-${row.status && statusOptions[row.status]?.color}`
          },
          row.status && statusOptions[row.stage]?.name + '-' + statusOptions[row.status]?.name
        )
      ]
    },
    {
      label: '操作',
      slot: 'action',
      width: '200',
      fixed: 'right'
    }
  ]),
  column2 = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '项目名称',
      key: 'projectName',
      prop: 'projectName',
      minWidth: '250',
      showOverflowTooltip: true
    },
    {
      label: '项目类型',
      key: 'projectTypeName',
      prop: 'projectTypeName',
      width: '100'
    },
    {
      label: '申报金额(万元)',
      key: 'declareAmount',
      prop: 'declareAmount',
      width: '120'
    },
    {
      label: '预算年度',
      key: 'projectYear',
      prop: 'projectYear',
      width: '80'
    },
    {
      label: '创建时间',
      key: 'createOn',
      prop: 'createOn',
      showOverflowTooltip: true,
      width: '180'
    },
    {
      label: '操作',
      slot: 'action',
      width: '160',
      fixed: 'right'
    }
  ]),
  projectData = ref([]),
  // 数据总数
  total = ref(1),
  editProject = (row) => {
    $router.push({ name: 'declarePage', query: { id: row.id, isDraft: 1 }})
  },
  checkDetail = (detailData) => {
    if (tabStatus.value) {
      $router.push({ name: 'projectDeclareDetail', query: { id: detailData.id }})
    } else {
      $router.push({ name: 'draftDetails', query: { id: detailData.id }})
    }
  },
  reDeclare = (row) => {
    if (row.status === 20005) {
      $router.push({ name: 'reDeclarationFinal', query: { id: row.id }})
    } else {
      $router.push({ name: 'declarePage', query: { id: row.id }})
    }
  },
  // 提交查询
  onSearch = () => {
    getTableData()
  },
  formReset = () => {
    searchForm.status = undefined
    searchForm.projectName = undefined
    searchForm.createTiming_ = undefined
    searchForm.projectType = undefined
    searchForm.projectYear = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  $router = useRouter(),
  // 去项目申报页
  toDeclarePage = () => {
    $router.push({ name: 'declarePage' })
  },
  tableListRef = ref(),
  // 导出excel文件
  { exportLoading, exportData } = useExportExc(),
  handleExcel = () => {
    exportData(() => declareExport(1, {
      ...searchForm,
      createOnMin: searchForm.createTiming_?.length && searchForm.createTiming_[0],
      createOnMax: searchForm.createTiming_?.length && searchForm.createTiming_[1],
      projectYear: searchForm.projectYear * 1 || undefined,
      status: searchForm.status?.[searchForm.status.length - 1]
    }))
  },
  dictionaryList = ref([]),
  // 删除项目
  remove = (data) => {
    proxy.$messageBox
      .confirm(`确定要删除${data.projectName}吗?`, '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await removeProject(data.projectCode)
        proxy.$message.success('删除成功')
        getTableData()
      })
  }
onMounted(async () => {
  tabStatus.value = ref(true)
  getTableData()
})
</script>
<template>
  <el-row>
    <el-card class="w-full search">
      <!-- 已申报 -->
      <el-form
        v-show="tabStatus"
        size="small"
        :model="searchForm"
        label-suffix=":"
      >
        <el-row :gutter="16" class="mb-16">
          <el-col :span="8">
            <el-form-item label="项目名称" class="w-full">
              <el-input
                v-model="searchForm.projectName"
                maxlength="50"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目类型">
              <el-select
                v-model="searchForm.projectType"
                placeholder="全部"
                class="w-full"
              >
                <el-option
                  v-for="(v,k) in projectConTypeOptions"
                  :key="k"
                  :label="v"
                  :value="k"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-show="tabStatus" label="项目状态">
              <el-cascader
                v-model="searchForm.status"
                class="w-full"
                :props="{label:'name',value:'code'}"
                :options="statusOptionsCascader"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="8">
            <el-form-item label="预算年度">
              <el-date-picker
                v-model="searchForm.projectYear"
                class="w-full"
                type="year"
                format="YYYY"
                value-format="YYYY"
                placeholder="请选择"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间" class="w-full">
              <el-date-picker
                v-model="searchForm.createTiming_"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD HH:mm"
                value-format="YYYY-MM-DD HH:mm"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item class="btn">
              <div class="flex">
                <el-button type="primary" @click="onSearch">查询</el-button>
                <el-button @click="formReset">重置</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 草稿箱 -->
      <el-form
        v-show="!tabStatus"
        label-suffix=":"
        :model="searchForm"
        size="small"
      >
        <el-row :gutter="16" class="mb-16">
          <el-col :span="8">
            <el-form-item label="项目名称" class="w-full">
              <el-input
                v-model="searchForm.projectName"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目类型">
              <el-select
                v-model="searchForm.projectType"
                placeholder="全部"
                class="w-full"
              >
                <el-option
                  v-for="(item,index) in dictionaryList?.filter(i => i.type === 'PROJECT_TYPE')"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预算年度">
              <el-date-picker
                v-model="searchForm.projectYear"
                class="w-full"
                type="year"
                value-format="YYYY"
                placeholder="请选择"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="10">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="searchForm.createTiming_"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD HH:mm"
                value-format="YYYY-MM-DD HH:mm"
              />
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item class="btn">
              <div class="flex">
                <el-button type="primary" @click="onSearch">查询</el-button>
                <el-button @click="formReset">重置</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-click="handleClick">
            <el-tab-pane label="已申报" name="已申报" />
            <el-tab-pane label="草稿箱" name="草稿箱" />
          </el-tabs>
          <div>
            <el-button
              v-show="tabStatus"
              type="primary"
              size="small"
              plain
              :loading="exportLoading"
              @click="handleExcel"
            >导出</el-button>
            <el-button
              type="primary"
              size="small"
              icon="plus"
              @click="toDeclarePage"
            >项目申报</el-button>
          </div>
        </div>
      </template>
      <table-list
        ref="tableListRef"
        :column="tabStatus ? column : column2"
        :data="projectData"
        :total="total"
        @get-table-data="getTableData"
      >
        <template #action="{ scope }">
          <a @click="checkDetail(scope.row)">详情</a>
          <a v-if="!tabStatus" @click="editProject(scope.row)">编辑</a>
          <a v-if="tabStatus && [10002,10005,10007,10013,20005].includes(scope.row.status)" @click="reDeclare(scope.row)">重新申报</a>
          <a v-if="tabStatus && [10007].includes(scope.row.status)" @click="remove(scope.row)">删除</a>
        </template>
      </table-list>
    </el-card>
  </el-row>
</template>
<style lang='less' scoped>

</style>

