<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { showFailToast} from 'vant';
import AttachmentS3Image from '@/components/AttachmentS3Image.vue';

const { proxy } = getCurrentInstance();
const route = useRoute();
const base_url = '/sgsafe/OnsiteDisposalContent';


const resultData = ref([]);
const queryFetch = (drillsId) => {
  const url = base_url + '/queryDataByDrillsId';
  const param = {
    json: drillsId
  };
  proxy.$axios.post(url, param).then(res => {
    if (res.data.code === 0) {
      resultData.value = res.data.data;
      console.log('resultData', resultData.value);
    } else {
      showFailToast('操作失败！' + res.data.msg);
    }
  });
};


onMounted(() => {
  if (route.query.drillsId) {
    queryFetch(route.query.drillsId);
  }
});
</script>

<template>
  <div id="app" class="container">
    <!-- 顶部标题栏 -->
    <div class="header">
      <h1 class="header-title">演练过程查看</h1>
    </div>

    <!-- 演练基本信息 -->
    <div class="card">
      <div class="card-title">所属演练计划</div>
      <div class="card-value">{{ resultData[0]?.drillPlanName || '暂无数据' }}</div>
    </div>

    <div class="card">
      <div class="card-title">使用的应急预案</div>
      <div class="card-value">{{ resultData[0]?.planName || '暂无数据' }}</div>
    </div>

    <div class="card">
      <div class="card-title">演练时间</div>
      <div class="card-value">{{ resultData[0]?.drillTime || '暂无数据' }}</div>
    </div>

    <!-- 演练步骤 -->
    <h2 class="section-title">演练步骤详情</h2>

    <div v-for="(item, idx) in resultData" :key="idx" class="step-container">
      <div>
        <span class="step-number">{{ idx + 1 }}</span>
        <span>步骤详情</span>
      </div>

      <div class="divider"></div>

      <div class="card">
        <div class="card-title">规定的演练步骤</div>
        <div class="card-value">{{ item.prescribeSteps || '暂无数据' }}</div>
      </div>

      <div class="card">
        <div class="card-title">具体执行内容</div>
        <div class="card-value">{{ item.executionContent || '暂无数据' }}</div>
      </div>

      <div class="attachment-container" v-if="item.relatedFile">
        <div class="attachment-title">相关附件</div>
        <AttachmentS3Image :readonly="true" :f-id="item.relatedFile" />
      </div>
    </div>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f7fa;
  color: #323233;
  line-height: 1.6;
  padding-bottom: 20px;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 12px;
}

.header {
  background: linear-gradient(135deg, #3498db, #2c3e50);
  color: white;
  padding: 20px 0;
  text-align: center;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.header-title {
  font-size: 22px;
  font-weight: 600;
}

.card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 16px;
  color: #7f8c8d;
  margin-bottom: 6px;
}

.card-value {
  font-size: 18px;
  font-weight: 500;
  color: #2c3e50;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #3498db;
  padding: 16px 0 8px 0;
  margin: 10px 0;
  border-bottom: 2px solid #eaeaea;
}

.step-container {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.step-number {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: #3498db;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 28px;
  margin-right: 8px;
  font-weight: bold;
}

.attachment-container {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
}

.attachment-title {
  font-size: 14px;
  color: #7f8c8d;
  margin-bottom: 8px;
}

.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #e0e0e0, transparent);
  margin: 16px 0;
}

.footer {
  text-align: center;
  margin-top: 30px;
  color: #95a5a6;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 600px) {
  .header-title {
    font-size: 19px;
  }

  .card-value {
    font-size: 16px;
  }

  .section-title {
    font-size: 16px;
  }
}

</style>