<script setup>
import { useDrillsStepsStore } from '@/stores/drillsSteps.js';
import { getCurrentInstance, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { showFailToast, showSuccessToast } from 'vant';
import AttachmentS3Image from '@/components/AttachmentS3Image.vue';

const { proxy } = getCurrentInstance();
const router = useRouter();
const drillsSteps = useDrillsStepsStore();

const plan_url = '/sgsafe/EmergencyPlanMaster';
const steps_url = '/sgsafe/OnsiteDisposalContent';

const guid = () => {
  const chars = '0123456789abcdefghijklmnopqrstuvwxyz';
  const length = chars.length;
  const randomString = (len) => {
    const array = new Uint8Array(len);
    crypto.getRandomValues(array);
    return Array.from(array)
      .map(byte => chars[byte % length])
      .join('');
  };
  return `${randomString(8)}${randomString(8)}${randomString(8)}${randomString(8)}`;
};

const active = ref(0);
const total = ref(0);
const resultData = ref([]);
const queryFetch = () => {
  const url = plan_url + '/queryOnsiteSteps';
  let json = '';
  if (drillsSteps.planId) {
    json = drillsSteps.planId;
  } else {
    json = JSON.parse(sessionStorage.getItem('drillsSteps')).planId;
  }
  const param = {
    json: json
  };
  proxy.$axios.post(url, param).then(res => {
    if (res.data.code === 0) {
      resultData.value = res.data.data;
      total.value = resultData.value.length;
      console.log('resultData', resultData.value);
    } else {
      showFailToast('操作失败！' + res.data.msg);
    }
  });
};

const currentText = ref('');
const currentFId = ref(guid());

const switchPrevState = () => {
  active.value = active.value - 1;
  const element = drillsSteps.stepsList[drillsSteps.stepsList.length - 1];
  currentText.value = element.executionContent;
  currentFId.value = element.relatedFile;
  drillsSteps.subtractLastElement();
  console.log('stepList', drillsSteps.stepsList);
  console.log('currentText', currentText.value);
  console.log('currentFid', currentFId.value);
};

const switchNextState = () => {
  if (!currentText.value) {
    showFailToast('请先填写当前步骤');
    return;
  }
  console.log('drillsId', drillsSteps.drillsId);
  drillsSteps.addElement({
    stepsId: resultData.value[active.value].id,
    drillsId: drillsSteps.drillsId,
    executionContent: currentText.value,
    relatedFile: currentFId.value
  });

  console.log('stepList', drillsSteps.stepsList);
  console.log('currentText', currentText.value);
  console.log('currentFid', currentFId.value);
  currentText.value = '';
  currentFId.value = guid();
  active.value = active.value + 1;
};

const switchFinish = () => {
  drillsSteps.addElement({
    stepsId: resultData.value[active.value].id,
    drillsId: drillsSteps.drillsId,
    executionContent: currentText.value,
    relatedFile: currentFId.value
  });
  const url = steps_url + '/save';
  const param = {
    json: JSON.stringify({
      contents: drillsSteps.stepsList
    })
  };
  proxy.$axios.post(url, param).then(res => {
    if (res.data.code === 0) {
      showSuccessToast('操作成功！');
      sessionStorage.removeItem('drillsSteps');
      drillsSteps.clearDrills();
      console.log('stepList', drillsSteps.stepsList);
      router.push('/drillProcess')
    } else {
      showFailToast('操作失败！' + res.data.msg);
    }
  });
};

onMounted(() => [
  queryFetch()
]);
</script>

<template>
  <div class="container">
    <div class="header">
      <div class="app-title">
        <i class="fas fa-mobile-alt"></i>掌上演练
      </div>
    </div>

    <!-- 导航栏 -->
    <div class="nav-container">
      <div class="step-indicator">当前步骤: {{ active + 1 }}/{{ total }}</div>
      <div class="progress-bar">
        <div class="progress-fill" :style="{ width: ((active / (total - 1)) * 100) + '%' }"></div>
      </div>

      <van-steps class="custom-steps" :active="active" active-color="#1a73e8">
        <van-step v-for="(item, idx) in resultData" :key="idx">
          步骤{{ idx + 1 }}
        </van-step>
      </van-steps>

      <div class="nav-buttons">
        <div v-if="active !== 0" class="nav-button prev-button" @click="switchPrevState">
          <i class="fas fa-arrow-left" style="margin-right: 8px;"></i>上一步
        </div>
        <div v-else style="width: 10px;"></div>

        <div v-if="active !== total-1" class="nav-button next-button" @click="switchNextState">
          下一步<i class="fas fa-arrow-right" style="margin-left: 8px;"></i>
        </div>
        <div v-else class="nav-button finish-button" @click="switchFinish">
          完成演练<i class="fas fa-play-circle" style="margin-left: 8px;"></i>
        </div>
      </div>
    </div>

    <!-- 步骤内容 -->
    <div class="step-content">
      <div class="step-title">
        <i class="fas fa-list-ol"></i>步骤 {{ active + 1 }}
      </div>

      <div class="step-instruction">
        {{ resultData[active]?.prescribeSteps || '暂无步骤说明' }}
      </div>

      <div class="input-area">
        <van-field
          type="textarea"
          v-model="currentText"
          placeholder="请输入本步骤的具体实施内容"
          rows="5"
          autosize
        />
      </div>

      <div class="attachment-area">
        <div class="attachment-title">
          <i class="fas fa-paperclip"></i>步骤附件
        </div>
        <!-- 这里替换为实际的附件组件 -->
        <AttachmentS3Image :f-id="currentFId" />
      </div>
    </div>
  </div>

</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}

body {
  background-color: #f7f9fc;
  color: #333;
  line-height: 1.6;
}

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

.header {
  background: linear-gradient(135deg, #1a73e8 0%, #6c14d0 100%);
  color: white;
  padding: 20px 0;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.app-title {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-title i {
  margin-right: 12px;
  font-size: 28px;
}

.nav-container {
  background: white;
  border-radius: 16px;
  margin: 20px 0;
  padding: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.step-content {
  background: white;
  border-radius: 16px;
  padding: 25px 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.step-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a73e8;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.step-title i {
  margin-right: 10px;
  font-size: 20px;
}

.step-instruction {
  background: #f0f7ff;
  padding: 15px;
  border-radius: 12px;
  margin-bottom: 20px;
  border-left: 4px solid #1a73e8;
  font-size: 15px;
  line-height: 1.7;
}

.input-area {
  margin-bottom: 20px;
}

.attachment-area {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  margin-top: 25px;
}

.attachment-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #5f6368;
  display: flex;
  align-items: center;
}

.attachment-title i {
  margin-right: 10px;
  color: #1a73e8;
}

.nav-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 25px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

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

.prev-button {
  background: #fff;
  color: #dc3545;
  border: 1px solid #dc3545;
}

.next-button {
  background: #007bff;
  color: white;
}

.finish-button {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
}

.step-indicator {
  text-align: center;
  margin: 15px 0;
  font-size: 14px;
  color: #5f6368;
}

.progress-bar {
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  margin: 15px 0;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #1a73e8 0%, #6c14d0 100%);
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* 自定义步骤条样式 */
.custom-steps .van-step--horizontal .van-step__circle {
  width: 26px;
  height: 26px;
  background: #e9ecef;
  color: #5f6368;
}

.custom-steps .van-step--horizontal.van-step--process .van-step__circle {
  background: #1a73e8;
  color: white;
}

.custom-steps .van-step--horizontal.van-step--finish .van-step__circle {
  background: #28a745;
  color: white;
}

/* 响应式设计 */
@media (max-width: 600px) {
  .container {
    padding: 0 12px;
  }

  .app-title {
    font-size: 20px;
  }

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

  .nav-button {
    padding: 10px 20px;
    font-size: 14px;
  }
}
</style>
