<template>
  <div class="task-list">
    <div class="search-bar">
      <div class="left">
        <el-input
            v-model="searchQuery"
            placeholder="请输入任务关键词"
            class="search-input"
            size="large"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>

        <el-select v-model="rescueType" placeholder="请选择" class="filter-select" size="large">
          <template #prefix>任务类型：</template>
          <el-option label="全部" value="" />
          <el-option label="应急搜捞" value="SAR" />
          <el-option label="专项调查" value="SI" />
        </el-select>

        <el-select v-model="rescueResponseLevel" placeholder="请选择" class="filter-select" size="large">
          <template #prefix>快速响应等级：</template>
          <el-option label="全部" value="" />
          <el-option label="一级" value="一级" />
          <el-option label="二级" value="二级" />
          <el-option label="三级" value="三级" />
        </el-select>

        <el-select v-model="rescueSecrecy" placeholder="请选择" class="filter-select" size="large">
          <template #prefix>是否涉密：</template>
          <el-option label="全部" value="" />
          <el-option label="是" value="是" />
          <el-option label="否" value="否" />
        </el-select>

        <el-button size="large" :icon="RefreshLeft" @click="handleReset">重置</el-button>
        <el-button size="large" :icon="Search" type="primary" @click="handleSearch" style="margin-left: 0;">检索</el-button>
      </div>
      <div class="right">
        <el-button size="large" type="success" @click="handleInput">任务录入</el-button>
      </div>
    </div>

    <div class="table">
      <div class="row" v-for="(item,index) in dataList" :key="index" @click="onDetail(item.tsy_id)">
        <div class="info">
          <div class="top">
            <div class="tag" :class="{tag2: item.rescue_type === 'SI'}">{{ item.rescue_type === 'SAR' ? '应急搜捞' : '专项调查' }}</div>
            <div class="code">{{ item.rescue_code }}</div>
          </div>
          <div class="bottom">
            <el-row :gutter="20">
              <el-col :span="2">
                <div class="label">状态：</div>
                <div class="value">{{ item.rescue_status }}</div>
              </el-col>
              <el-col :span="3">
                <div class="label">搜寻处置目标：</div>
                <div class="value">{{ item.rescue_target_name }}</div>
              </el-col>
              <el-col :span="3">
                <div class="label">快速响应等级：</div>
                <div class="value">{{ item.rescue_response_level }}</div>
              </el-col>
              <el-col :span="2">
                <div class="label">是否涉密：</div>
                <div class="value">{{ item.rescue_secrecy }}</div>
              </el-col>
              <el-col :span="2">
                <div class="label">联系人：</div>
                <div class="value">{{ item.fill_person }}</div>
              </el-col>
              <el-col :span="3">
                <div class="label">填报时间：</div>
                <div class="value">{{ item.fill_time }}</div>
              </el-col>
              <el-col :span="3">
                <div class="label">搜寻处置目标位置：</div>
                <div class="value">{{ item.rescue_target_lat }}，{{ item.rescue_target_lon }}</div>
              </el-col>
              <el-col :span="3">
                <div class="label">建议搜寻区域范围：</div>
                <div class="value">{{ item.rescue_target_radius }}</div>
              </el-col>
              <el-col :span="3">
                <div class="label">搜寻处置目标价值：</div>
                <div class="value">{{ item.rescue_target_price }}</div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="right">
          <el-icon><ArrowRightBold /></el-icon>
        </div>
      </div>
    </div>

    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import { Search, RefreshLeft } from '@element-plus/icons-vue'
import { regPage } from '@/api/task.js'

const router = useRouter();
const searchQuery = ref('')
const rescueType = ref('')
const rescueResponseLevel = ref('')
const rescueSecrecy = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const start = ref(0)
const total = ref(0)

const dataList = ref([])

const handleSearch = () => {
  start.value = 0
  currentPage.value = 1
  getDataList()
}

const handleReset = () => {
  searchQuery.value = ''
  rescueType.value = ''
  rescueResponseLevel.value = ''
  rescueSecrecy.value = ''
  start.value = 0
  currentPage.value = 1
  getDataList()
}

const handleInput = () => {
  router.push('/input')
}

const handleSizeChange = (val: number) => {
  pageSize.value = val
  start.value = 0
  currentPage.value = 1
  getDataList()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  start.value = pageSize.value * (val -1)
  getDataList()
}

// 获取列表数据
const getDataList = () => {
  regPage({
    start: start.value,
    limit: pageSize.value,
    query: searchQuery.value,
    rescue_type: rescueType.value,
    rescue_response_level: rescueResponseLevel.value,
    rescue_secrecy: rescueSecrecy.value,
  }).then(res => {
    dataList.value = res.page.records
    total.value = res.page.total
  })
}

// 跳转任务详情页
const onDetail = (id: number) => {
  router.push(`/input/${id}`)
}

onMounted(() => {
  getDataList()
})
</script>

<style lang="scss" scoped>
.task-list {
  padding: 20px 8%;
  box-sizing: border-box;
  min-height: calc(100vh - 220px);
  background-color: rgb(241,244,251);

  .search-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .left {
      display: flex;
      gap: 15px;

      .search-input {
        width: 200px;
      }

      .filter-select {
        width: 200px;
      }
    }
  }

  .table {
    color: #242424;

    .row {
      margin-bottom: 20px;
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      border-radius: 10px;
      border: 2px solid transparent;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */

      &:hover {
        cursor: pointer;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        border: 2px solid rgb(18,150,219);

        .right {
          border: 2px solid transparent;
          background-color: rgb(0,160,243);
          color: #fff;
        }
      }

      .info {
        flex: 1;

        .top {
          display: flex;
          align-items: center;

          .tag {
            margin-right: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            padding: 0 8px;
            color: #fdbb13;
            border: 2px solid #fdbb13;
          }

          .tag2 {
            color: rgb(18,150,219);
            border: 2px solid rgb(18,150,219);
          }

          .code {
            color: #000;
            font-weight: bold;
          }
        }

        .bottom {
          margin-top: 10px;

          .label {
            font-size: 12px;
            color: #bbb;
          }

          .value {
            font-size: 14px;
            color: #242424;
          }
        }
      }

      .right {
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        border: 2px solid rgb(0,160,243);
        color: rgb(0,160,243);
        font-size: 26px;
      }
    }


  }

  .pagination {
    margin: 50px;
    display: flex;
    justify-content: center;
  }
}
</style>
