<template>
  <div class="pending-archive-list">
    <div v-if="activeTab == 'list'">
      <div class="search-panel">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="年度:" prop="year">
            <el-date-picker
              v-model="searchForm.projectYear"
              type="year"
              placeholder="选择年"
              format="yyyy"
              value-format="yyyy"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="监审项目名称:">
            <el-input
              v-model="searchForm.projectName"
              placeholder="请输入监审项目名称"
              clearable
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              icon="iconfont-5039297 icon-chaxun"
              @click="handleSearch"
            >
              搜索
            </el-button>
            <el-button
              plain
              type="primary"
              icon="iconfont-5039297 icon-zhongzhi"
              @click="handleReset"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        border
        row-key="id"
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="year"
          label="立项年度"
          width="100"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="projectName"
          label="成本监审项目名称"
          show-overflow-tooltip
          header-align="center"
          align="left"
        >
          <template slot-scope="scope">
            <div class="cell-content cell-content--left">
              <span class="project-link" @click="handleDetail(scope.row)">
                {{ scope.row.projectName }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="auditObject"
          label="监审对象"
          header-align="center"
          align="left"
        />
        <el-table-column
          prop="auditPeriod"
          label="监审期间"
          header-align="center"
          align="center"
          width="200"
        />
        <el-table-column
          prop="source"
          label="立项来源"
          header-align="center"
          align="center"
          width="120"
        />
        <el-table-column
          prop="form"
          label="监审形式"
          header-align="center"
          align="center"
          width="120"
        />
        <el-table-column label="操作" align="center" width="200" fixed="right">
          <template slot-scope="scope">
            <span class="action-buttons">
              <el-button
                type="text"
                size="small"
                @click="handleTaskDetail(scope.row)"
              >
                任务详情
              </el-button>
              <el-button
                type="text"
                size="small"
                @click="handleArchive(scope.row)"
              >
                归档
              </el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 10px"
        background
        layout="total, sizes, prev, pager, next"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
    <taskDetail ref="taskDetail" />

    <el-dialog
      :visible.sync="archiveDrawerVisible"
      width="90%"
      title="归档详情"
      @close="handleArchiveDrawerClose"
    >
      <ArchiveDetail
        v-if="archiveDrawerVisible"
        :task-id="currentArchiveTaskId"
        @back="handleArchiveDrawerClose"
      />
    </el-dialog>
  </div>
</template>
<script>
  import taskDetail from '@/components/task/taskDetail.vue'
  import ArchiveDetail from './ArchiveDetail.vue'
  import { getArchiveList } from '@/api/audit/archive'
  import { getAllUnitList } from '@/api/auditEntityManage'
  export default {
    name: 'PendingArchiveList',
    components: {
      taskDetail,
      ArchiveDetail,
    },
    data() {
      return {
        allUnits: [],
        searchForm: {
          projectYear: '2025',
          projectName: '',
        },
        loading: false,
        tableData: [],
        pagination: {
          currentPage: 1,
          pageSize: 10,
          total: 0,
        },
        activeTab: 'list',
        archiveDrawerVisible: false,
        currentArchiveTaskId: '',
      }
    },
    created() {
      this.fetchData()
      this.loadAllUnits()
    },
    methods: {
      async fetchData() {
        try {
          this.loading = true
          const params = {
            currentPage: this.pagination.currentPage,
            pageSize: this.pagination.pageSize,
            projectYear: this.searchForm.projectYear,
            projectName: this.searchForm.projectName,
            isGd: 0,
            currentNode: 'gd',
          }
          const response = await getArchiveList(params)

          if (response && response.value) {
            const records = response.value.records || []
            const mainTasks = records.filter(
              (record) => !record.pid || record.pid === '0'
            )
            this.tableData = mainTasks.map((record) => {
              return {
                id: record.id,
                year: record.projectYear || record.year || '',
                projectName: record.projectName,
                auditObject: record.auditedUnitName || record.auditObject || '',
                auditPeriod: record.auditPeriod || '',
                source: this.getSourceTypeText(record.sourceType),
                form: this.getAuditTypeText(record.auditType),
                projectId: record.projectId,
                auditedUnitId: record.auditedUnitId,
                taskId: record.id,
              }
            })
            this.pagination.total = response.value.total || 0
          } else {
            this.tableData = []
            this.pagination.total = 0
          }
        } catch (error) {
          console.error('加载列表失败:', error)
          this.tableData = []
          this.pagination.total = 0
        } finally {
          this.loading = false
        }
      },
      getSourceTypeText(type) {
        const typeMap = {
          1: '年度计划内',
          2: '年度计划外',
        }
        return typeMap[type] || type || ''
      },
      getAuditTypeText(type) {
        const typeMap = {
          1: '定期监审',
          2: '定调价监审',
        }
        return typeMap[type] || type || ''
      },
      handleSearch() {
        this.pagination.currentPage = 1
        this.fetchData()
      },
      handleReset() {
        this.searchForm = {
          projectYear: '2025',
          projectName: '',
        }
        this.pagination.currentPage = 1
        this.fetchData()
      },
      handleCurrentChange(current) {
        this.pagination.currentPage = current
        this.fetchData()
      },
      handleSizeChange(size) {
        this.pagination.pageSize = size
        this.pagination.currentPage = 1
        this.fetchData()
      },
      handleDetail(row) {
        this.$refs.taskDetail.open(row, 'chengben')
      },
      backToList() {
        this.activeTab = 'list'
      },
      handleTaskDetail(row) {
        this.$refs.taskDetail.open(row, 'chengben')
      },
      handleArchive(row) {
        this.currentArchiveTaskId = row.taskId || row.id
        this.archiveDrawerVisible = true
      },

      handleArchiveDrawerClose() {
        this.fetchData()
        this.archiveDrawerVisible = false
        this.currentArchiveTaskId = ''
      },

      async loadAllUnits() {
        try {
          const response = await getAllUnitList()
          if (response && response.value) {
            const list = Array.isArray(response.value)
              ? response.value
              : response.value.list || []
            this.allUnits = list.map((item) => ({
              unitId: item.unitId || item.id,
              unitName: item.unitName || item.name || '',
            }))
          } else {
            this.allUnits = []
          }
        } catch (error) {
          console.error('加载被监审单位列表失败:', error)
          this.allUnits = []
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  .pending-archive-list {
    padding: $base-padding;
  }

  .action-link {
    color: #409eff;
    cursor: pointer;
    text-decoration: none;
  }

  .action-link:hover {
    text-decoration: underline;
  }

  .project-link {
    color: #409eff;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.3s;

    &:hover {
      color: #66b1ff;
      text-decoration: underline;
    }
  }

  .action-buttons {
    display: inline-flex;
    gap: 8px;
  }
</style>
