<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-card shadow="never" class="search-card">
      <el-form :model="queryParams" ref="queryRef" inline label-width="80px">
        <el-form-item label="计划编号" prop="planNo" class="custom-form-item">
          <el-input v-model="queryParams.planNo" placeholder="请输入计划编号" clearable />
        </el-form-item>
        <el-form-item label="拜访人" prop="visitorId" class="custom-form-item">
          <el-select v-model="queryParams.visitorId" placeholder="请选择" clearable filterable style="width: 200px">
            <el-option v-for="item in staffOptions" :key="item.staffId" :label="(item.staffCode ? '(' + item.staffCode + ') ' : '') + item.staffName" :value="item.staffId" />
          </el-select>
        </el-form-item>
        <el-form-item label="计划状态" prop="status" class="custom-form-item">
          <el-select v-model="queryParams.status" placeholder="请选择" clearable>
            <el-option label="待审核" value="0" />
            <el-option label="已审核" value="1" />
            <el-option label="已驳回" value="2" />
          </el-select>
        </el-form-item>
        <div class="search-btns-area">
          <el-button icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
        </div>
      </el-form>
    </el-card>

    <!-- 列表区域 -->
    <el-card shadow="never" class="table-card">
      <template #header>
        <div class="card-header">
          <span class="list-title">拜访计划信息列表</span>
        </div>
      </template>
      <el-table v-loading="loading" :data="dataList" border class="custom-table" :header-cell-style="{ background: '#f8fafc', color: '#333', fontWeight: 'normal' }">
        <el-table-column label="计划编号" align="center" prop="planNo" width="180">
          <template #default="scope">
            <span class="link-text" @click="handleDetail(scope.row)">{{ scope.row.planNo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="拜访人" align="center" prop="visitorName" min-width="120" />
        <el-table-column label="开始时间" align="center" prop="startTime" min-width="150">
          <template #default="scope">{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</template>
        </el-table-column>
        <el-table-column label="结束时间" align="center" prop="endTime" min-width="150">
          <template #default="scope">{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" width="120">
          <template #default="scope">
            <el-tag v-if="scope.row.status === '0'" type="warning">待审核</el-tag>
            <el-tag v-else-if="scope.row.status === '1'" type="success">已审核</el-tag>
            <el-tag v-else-if="scope.row.status === '2'" type="danger">已驳回</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button link type="info" @click="handleDetail(scope.row)">详情</el-button>
            <el-button link type="primary" @click="handleAuditDetail(scope.row)">审核明细</el-button>
            <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>

    <!-- 弹窗组件 -->
    <AddPlan v-model="addOpen" @success="getList" />
    <DetailPlan v-model="detailOpen" :id="currentId" />

    <!-- 审核明细抽屉 (保留在 index 或移至专用组件) -->
    <el-drawer title="查看审核明细" v-model="auditOpen" size="500px" direction="rtl" destroy-on-close class="audit-drawer">
      <div class="audit-timeline-container" v-if="auditData.length > 0">
        <el-timeline>
          <el-timeline-item v-for="(item, index) in auditData" :key="index"
            :color="item.status === '1' ? '#10b981' : '#f56c6c'" :size="'large'"
            :icon="item.status === '1' ? 'Check' : 'Close'">
            <div class="audit-node">
              <div class="audit-header"><span class="audit-title">审核人：{{ item.status === '1' ? '已审批' : '已驳回' }}</span></div>
              <div class="audit-content-card">
                <div class="audit-user-info">
                  <div class="avatar-box">{{ (item.auditByName || '').charAt(0) }}</div>
                  <span class="user-name">{{ item.auditByName }}</span>
                  <span :class="'audit-status ' + (item.status === '1' ? 'pass' : 'reject')">
                    {{ item.status === '1' ? '已通过' : '已驳回' }}
                    <span class="time-text">{{ parseTime(item.auditTime) }}</span>
                  </span>
                </div>
                <div class="audit-opinion">审核意见：{{ item.remark || '无' }}</div>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
      <el-empty v-else description="暂无审核记录" />
    </el-drawer>
  </div>
</template>

<script setup name="VisitPlan">
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import { listPlan, delPlan } from "@/api/visit/plan";
import { listComStaff } from "@/api/system/comStaff/index";
import AddPlan from './add.vue';
import DetailPlan from './detail.vue';

const proxy = getCurrentInstance().proxy;

const loading = ref(false);
const dataList = ref([]);
const total = ref(0);
const staffOptions = ref([]);

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  planNo: undefined,
  visitorId: undefined,
  status: undefined
});

// 弹窗状态
const addOpen = ref(false);
const detailOpen = ref(false);
const auditOpen = ref(false);
const currentId = ref(undefined);
const auditData = ref([]);

const getList = () => {
  loading.value = true;
  listPlan(queryParams).then(response => {
    dataList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  }).catch(() => {
    loading.value = false;
  });
};

const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};

const resetQuery = () => {
  proxy.resetForm("queryRef");
  handleQuery();
};

const handleAdd = () => {
  addOpen.value = true;
};

const handleDetail = (row) => {
  currentId.value = row.id;
  detailOpen.value = true;
};

const handleAuditDetail = (row) => {
  auditData.value = row.auditList || [];
  auditOpen.value = true;
};

const handleDelete = (row) => {
  const ids = row.id || proxy.selectIds;
  proxy.$modal.confirm(`确认删除计划编号为"${row.planNo}"的数据项吗？`).then(() => {
    return delPlan(ids);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  });
};

onMounted(() => {
  getList();
  listComStaff({ pageSize: 1000 }).then(response => {
    staffOptions.value = response.rows || response.data || [];
  });
});
</script>

<style scoped lang="scss">
.app-container { padding: 20px; background-color: #f5f7fa; min-height: calc(100vh - 84px); }
.search-card { border: none; margin-bottom: 20px; :deep(.el-card__body) { padding: 15px 20px; } }
:deep(.el-form--inline) { display: flex; align-items: center; flex-wrap: wrap; }
.custom-form-item {
  margin-bottom: 0 !important;
  margin-right: 24px !important;
  :deep(.el-form-item__label) { padding-right: 12px; color: #333; font-weight: 400; }
  :deep(.el-input), :deep(.el-select) { width: 220px; }
}
.search-btns-area { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.table-card {
  border: none;
  :deep(.el-card__header) {
    padding: 12px 20px;
    border-bottom: 1px solid #ebeef5;
    background-color: #fff;
  }
  .list-title {
    font-size: 14px;
    font-weight: normal;
    color: #333;
  }
  :deep(.el-card__body) {
    padding: 15px 20px;
  }
}
.link-text { color: #409eff; cursor: pointer; }
.audit-drawer { :deep(.el-drawer__header) { border-bottom: 1px solid #ebeef5; margin-bottom: 0; padding: 15px 20px; color: #333; } }
.audit-timeline-container { padding: 20px; }
.audit-node { .audit-header { margin-bottom: 8px; } .audit-title { font-size: 14px; font-weight: normal; color: #333; } }
.audit-content-card {
  background: #f9fafb; border-radius: 6px; padding: 12px 16px;
  .audit-user-info {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
    .avatar-box { width: 32px; height: 32px; border-radius: 50%; background: #409eff; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: normal; }
    .user-name { font-size: 14px; color: #333; }
    .audit-status { font-size: 13px; &.pass { color: #67c23a; } &.reject { color: #f56c6c; } }
    .time-text { color: #999; margin-left: 6px; font-size: 12px; }
  }
  .audit-opinion { font-size: 13px; color: #666; }
}
</style>
