<template>
  <div class="list-container">
    <el-card class="list-card">
      <template #header>
        <div class="list-header">
          <i class="fa fa-table blue-color" style="margin-right: 10px;"></i>
          <span>{{ queryParams.nickName + '【' + queryParams.finishDate + '】' }}</span>
          <div class="header-buttons">
            <el-input
              v-model="queryParams.parent"
              placeholder="搜索所属场站..."
              @change="handleQuery"
              style="width: 200px; margin-right: 10px;"
              prefix-icon="search"
              clearable
            />
            <el-input
              v-model="queryParams.orderCode"
              placeholder="搜索工单编码..."
              @change="handleQuery"
              style="width: 200px; margin-right: 10px;"
              prefix-icon="search"
              clearable
            />
            <el-button @click="handleExport">
              <i class="fa fa-download" style="margin-right: 8px;"></i>导出
            </el-button>
          </div>
        </div>
      </template>
      <el-table :data="orderPersonList" style="width: 100%">
        <el-table-column prop="orderCode" label="工单编码" header-align="center" align="center">
          <template #default="scope">
            <span style="color: #409EFF;" link type="primary" @click="handleWorkOrderClick(scope.row)">
              {{ scope.row.orderCode }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="center" label="维保中心" header-align="center" align="center"></el-table-column>
        <el-table-column prop="parent" label="所属场站" header-align="center" align="center"></el-table-column>
        <el-table-column prop="pcs" label="作业场站" header-align="center" align="center"></el-table-column>
        <el-table-column prop="orderType" label="工单类型" header-align="center" align="center"></el-table-column>
        <el-table-column prop="finishDate" label="日期" header-align="center" align="center"></el-table-column>
        <el-table-column prop="scoreType" label="工分项类型" header-align="center" align="center"></el-table-column>
        <el-table-column prop="score" label="工分项分值" header-align="center" align="center" :formatter="formatScore"></el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="applyFilter"
      />
    </el-card>
  </div>
</template>

<script>
import { listGxtOrderPerson } from '@/api/gxt/gxtOrderPerson';
import { download } from '@/utils/request';

export default {
  name: 'ScoreDetail',
  data() {
    return {
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderCode: null,
        parent: null,
        status: 0,
        userName: null,
        nickName: null,
        finishDate: null
      },
      orderPersonList: []
    }
  },
  created() {
    this.getItemValue();
    this.applyFilter();
  },
  activated() {
    this.getItemValue();
    this.applyFilter();
  },
  methods: {
    applyFilter() {
      listGxtOrderPerson(this.queryParams).then(response => {
        if (response.code === 200) {
          this.total = response.total;
          this.orderPersonList = response.rows;
        }
      });
    },
    getItemValue() {
      this.queryParams.pageNum = 1;
      this.queryParams.orderCode = null;
      this.queryParams.userName = sessionStorage.getItem('userName');
      this.queryParams.nickName = sessionStorage.getItem('nickName');
      this.queryParams.finishDate = sessionStorage.getItem('finishDate');
      this.queryParams.parent = sessionStorage.getItem('deptName');
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.applyFilter();
    },
    formatScore(row, column, cellValue) {
      if (cellValue == null || cellValue === '') return '0.00';
      return parseFloat(cellValue).toFixed(2);
    },
    handleExport() {
      download("gxt/orderperson/exportOrderScorePerson", this.queryParams, `工分明细列表_${new Date().getTime()}.xlsx`);
    },
    handleWorkOrderClick(row) {
      if (!row.orderCode) return;
      if (row.orderType === '维保工单') {
        sessionStorage.setItem('fromRoute', '/homePage/maintenance');
        sessionStorage.setItem('workOrderProjectNo', row.orderCode);
        this.$router.push({ path: '/workScore/orderScore' });
      } else {
        sessionStorage.setItem('fromRoute', '/homePage/repair');
        sessionStorage.setItem('workOrderProjectNo', row.orderCode);
        this.$router.push({ path: '/workScore/orderScore' });
      }
    }
  }
}
</script>

<style scoped>
.list-container {
  padding: 20px;
}

.list-header {
  font-weight: bold;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-buttons {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.blue-color {
  color: #165dff;
}

/* 表头加粗 */
.el-table th {
  font-weight: bold !important;
}

/* 悬浮卡片通用样式 */
.list-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.list-card:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
</style>
