<template>
  <div class="write-order-page" v-loading="loading">
    <header class="page-header">
      <div class="page-header__main">
        <div class="page-header__icon"><Icon icon="ep:edit-pen" /></div>
        <div>
          <h1>填写巡检工单</h1>
          <p>按设备和巡检项顺序填写检查结果与异常信息</p>
        </div>
      </div>
      <el-button size="default" @click="close">
        <Icon icon="ep:arrow-left" class="mr-5px" />返回
      </el-button>
    </header>

    <el-empty v-if="!loading && tabs.length === 0" class="empty-panel" description="暂无巡检设备" />
    <div v-else class="inspection-workbench">
      <aside class="device-panel">
        <header class="device-panel__header">
          <div>
            <strong>巡检设备</strong>
            <span>共 {{ tabs.length }} 台</span>
          </div>
        </header>
        <div class="device-list">
          <button
            v-for="(tab, tabIndex) in tabs"
            :key="`${tab.deviceId}-${tabIndex}`"
            type="button"
            class="device-item"
            :class="{ 'is-active': activeTab === String(tabIndex) }"
            @click="activeTab = String(tabIndex)">
            <span class="device-item__icon"><Icon icon="ep:monitor" /></span>
            <span class="device-item__content">
              <span class="device-item__name">{{ tab.deviceName }}</span>
              <span class="device-item__progress">
                已完成 {{ completedSteps(tabIndex) }} / {{ tab.orderDetails.length }} 项
              </span>
            </span>
            <Icon icon="ep:arrow-right" class="device-item__arrow" />
          </button>
        </div>
      </aside>

      <div class="device-content">
        <section
          v-for="(tab, tabIndex) in tabs"
          v-show="activeTab === String(tabIndex)"
          :key="`${tab.deviceId}-content`"
          class="device-inspection-panel">
          <header class="device-summary">
            <div class="device-summary__main">
              <div class="device-summary__icon"><Icon icon="ep:monitor" /></div>
              <div>
                <h2>{{ tab.deviceName }}</h2>
                <p>{{ tab.routeDesc || '按巡检项顺序完成当前设备检查' }}</p>
              </div>
            </div>
            <span class="device-summary__progress">
              {{ completedSteps(tabIndex) }}/{{ tab.orderDetails.length }} 已完成
            </span>
          </header>

          <div class="item-progress-strip">
            <div
              v-for="(step, stepIndex) in tab.orderDetails"
              :key="stepIndex"
              class="progress-item"
              :class="`is-${getStepStatus(tabIndex, stepIndex)}`">
              <span class="progress-item__index">
                <Icon v-if="getStepStatus(tabIndex, stepIndex) === 'finish'" icon="ep:check" />
                <template v-else>{{ stepIndex + 1 }}</template>
              </span>
              <span class="progress-item__name">{{ step.item }}</span>
            </div>
          </div>

          <div class="current-item-layout">
            <section class="entry-section">
              <header class="section-heading section-heading--between">
                <div class="section-heading__title">
                  <span></span>
                  {{ tab.orderDetails[currentStep[tabIndex]].item }}
                </div>
                <div class="step-counter">
                  第 {{ currentStep[tabIndex] + 1 }} / {{ tab.orderDetails.length }} 项
                </div>
              </header>

              <el-form
                :model="formData[tabIndex][currentStep[tabIndex]]"
                :rules="formRules"
                ref="formRefs"
                size="default"
                label-width="96px"
                class="inspection-form">
                <el-form-item label="设备id" v-if="false" prop="deviceId">
                  <el-input
                    v-model="formData[tabIndex][currentStep[tabIndex]].deviceId"
                    :model-value="tab.deviceId"
                    clearable />
                </el-form-item>
                <div class="form-grid">
                  <el-form-item :label="t('inspect.isException')" prop="ifNormal">
                    <el-select
                      v-model="formData[tabIndex][currentStep[tabIndex]].ifNormal"
                      :placeholder="t('inspect.isException')"
                      clearable>
                      <el-option
                        v-for="dict in getBoolDictOptions(DICT_TYPE.PMS_INSPECT_WRITE)"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                  </el-form-item>
                  <el-form-item :label="t('deviceForm.picture')" prop="picUrl">
                    <UploadImg
                      v-model="formData[tabIndex][currentStep[tabIndex]].picUrl"
                      height="55px"
                      width="120px" />
                  </el-form-item>
                  <el-form-item
                    :label="t('inspect.exceptionDes')"
                    prop="description"
                    class="form-grid__wide"
                    :rules="
                      formData[tabIndex][currentStep[tabIndex]].ifNormal ? [] : descriptionRule
                    ">
                    <el-input
                      v-model="formData[tabIndex][currentStep[tabIndex]].description"
                      type="textarea"
                      :rows="5"
                      :placeholder="t('inspect.exceptionDes')" />
                  </el-form-item>
                </div>
              </el-form>
            </section>

            <aside class="standard-section">
              <header class="standard-section__header">
                <Icon icon="ep:notebook-2" />
                <span>{{ t('inspect.InspectionStandards') }}</span>
              </header>
              <div class="standard-section__content">
                {{ tab.orderDetails[currentStep[tabIndex]].standard || '-' }}
              </div>
              <footer class="standard-section__footer">
                <span>{{ t('fileInfo.appendix') }}</span>
                <el-button
                  v-if="tab.orderDetails[currentStep[tabIndex]].urls"
                  link
                  type="primary"
                  @click="openWeb(tab.orderDetails[currentStep[tabIndex]].urls)">
                  <Icon icon="ep:view" class="mr-5px" />{{ t('action.preview') }}
                </el-button>
                <span v-else>-</span>
              </footer>
            </aside>
          </div>

          <div class="navigation-controls">
            <el-button
              size="default"
              :disabled="currentStep[tabIndex] === 0"
              @click="handlePrev(tabIndex)">
              <Icon icon="ep:arrow-left" class="mr-5px" />上一步
            </el-button>
            <el-button
              size="default"
              type="primary"
              :disabled="!isStepValid(tabIndex)"
              @click="handleNext(tabIndex, tab.deviceId)">
              {{ isLastStep(tabIndex) ? '完成提交' : '下一步' }}
              <Icon :icon="isLastStep(tabIndex) ? 'ep:check' : 'ep:arrow-right'" class="ml-5px" />
            </el-button>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useTagsViewStore } from '@/store/modules/tagsView'
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { IotInspectOrderApi } from '@/api/pms/inspect/order'
import { DICT_TYPE, getBoolDictOptions } from '@/utils/dict'

defineOptions({ name: 'InspectOrderWrite' })
const { t } = useI18n() // 国际化

const { delView } = useTagsViewStore() // 视图操作
const { currentRoute, push } = useRouter()
const message = useMessage() // 消息弹窗
const tabs = ref([])
const { params, name } = useRoute() // 查询参数
const id = params.id
onMounted(async () => {
  if (id) {
    const iotInspectOrderDetail = await IotInspectOrderApi.getIotInspectOrderDetail(id)
    tabs.value = iotInspectOrderDetail
    initFormData(iotInspectOrderDetail)
    loading.value = false
  }
})
const openWeb = (url) => {
  window.open(
    'http://1.94.244.160:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url))
  )
}

const close = () => {
  delView(unref(currentRoute))
  push({ name: 'IotInspectOrder', params: {} })
}
// 响应式状态
const loading = ref(true)
const activeTab = ref('0')
const currentStep = ref({})
const formRefs = ref([])
const formData = reactive([])
const descriptionRule = [{ required: true, message: '描述不能为空', trigger: 'blur' }]
// 表单验证规则
const formRules = reactive({
  ifNormal: [{ required: true, message: '请输入是否异常', trigger: 'blur' }]
  // description: [
  //   { required: true, message: '请输入异常描述', trigger: 'blur' },
  // ],
})

// 初始化表单数据
const initFormData = (tabsData) => {
  tabsData.forEach((tab, tabIndex) => {
    formData[tabIndex] = tab.orderDetails.map((item) => ({
      deviceId: item.deviceId,
      indexId: item.indexId,
      ifNormal: item.ifNormal,
      description: item.description,
      picUrl: item.picUrl
    }))
    currentStep.value[tabIndex] = 0
  })
}

// 步骤状态计算
const getStepStatus = (tabIndex, stepIndex) => {
  if (stepIndex < currentStep.value[tabIndex]) return 'finish'
  return stepIndex === currentStep.value[tabIndex] ? 'process' : 'wait'
}

// 完成步骤数计算
const completedSteps = (tabIndex) => {
  return formData[tabIndex].filter((item) => item.ifNormal != null).length
}

// 步骤验证
const isStepValid = (tabIndex) => {
  const current = currentStep.value[tabIndex]
  if (
    formData[tabIndex][current].ifNormal === null ||
    formData[tabIndex][current].ifNormal === undefined
  ) {
    return false
  }
  if (
    !formData[tabIndex][current].ifNormal &&
    (formData[tabIndex][current].description === undefined ||
      formData[tabIndex][current].description === null ||
      formData[tabIndex][current].description === '')
  ) {
    return false
  }
  return true
}

// 导航控制
const handlePrev = (tabIndex) => {
  if (currentStep.value[tabIndex] > 0) {
    currentStep.value[tabIndex]--
  }
}

const handleNext = (tabIndex, deviceId) => {
  if (!isStepValid(tabIndex)) {
    return ElMessage.warning('请先完成当前步骤的必填项')
  }
  const current = currentStep.value[tabIndex]
  const totalSteps = tabs.value[tabIndex].orderDetails.length
  if (currentStep.value[tabIndex] < totalSteps - 1) {
    formData[tabIndex][current].indexId = current + 1
    formData[tabIndex][current].deviceId = deviceId
    currentStep.value[tabIndex]++
    submitForm(tabIndex, current, '')
  } else {
    formData[tabIndex][current].indexId = current + 1
    formData[tabIndex][current].deviceId = deviceId
    submitForm(tabIndex, current, 'finish')
  }
}

const isLastStep = (tabIndex) => {
  return currentStep.value[tabIndex] === tabs.value[tabIndex].orderDetails.length - 1
}

// 提交表单
const submitForm = (tabIndex, current, type) => {
  try {
    IotInspectOrderApi.writeIotInspectOrder(formData[tabIndex][current], id)
    if (type === 'finish') {
      message.success(t('common.createSuccess'))
      delView(unref(currentRoute))
      //push({ name: 'IotInspectOrder', params: {} })
    }
  } catch (error) {
    ElMessage.error('提交失败，请检查数据')
  }
}
</script>

<style scoped>
@media (width <= 1400px) {
  .write-order-page .device-tabs :deep(.el-tabs__header.is-left) {
    width: 210px;
  }

  .write-order-page .inspection-workspace {
    grid-template-columns: 220px minmax(0, 1fr);
  }
}

@media (width <= 1100px) {
  .write-order-page .inspection-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 220px minmax(0, 1fr);
  }

  .write-order-page .steps-panel {
    border-right: 0;
    border-bottom: 1px solid var(--el-border-color-lighter);
  }
}

@media (width <= 768px) {
  .write-order-page .page-header {
    align-items: flex-start;
  }

  .write-order-page .page-header p {
    display: none;
  }

  .write-order-page .device-tabs :deep(.el-tabs__header.is-left) {
    width: 170px;
  }

  .write-order-page .custom-label__progress {
    display: none;
  }

  .write-order-page .step-panel__content {
    padding: 16px 12px 0;
  }

  .write-order-page .inspection-form {
    max-width: none;
  }

  .write-order-page .standard-panel {
    padding: 12px;
  }
}

.write-order-page {
  display: flex;
  min-height: calc(
    100vh - 20px - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height)
  );
  flex-direction: column;
  gap: 12px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  padding: 12px 16px;
  background: var(--el-bg-color);
  border-radius: 8px;
  box-shadow: var(--el-box-shadow-light);
}

.page-header__main {
  display: flex;
  align-items: center;
  min-width: 0;
}

.page-header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 12px;
  font-size: 18px;
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
  border: 1px solid var(--el-color-primary-light-7);
  border-radius: 8px;
}

.page-header h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  color: var(--el-text-color-primary);
}

.page-header p {
  margin: 1px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--el-text-color-secondary);
}

.empty-panel {
  min-height: 480px;
  background: var(--el-bg-color);
  border-radius: 8px;
  box-shadow: var(--el-box-shadow-light);
  flex: 1;
}

.device-tabs {
  display: flex;
  min-height: 580px;
  overflow: hidden;
  background: var(--el-bg-color);
  border-radius: 8px;
  box-shadow: var(--el-box-shadow-light);
  flex: 1;
}

.device-tabs :deep(.el-tabs__header.is-left) {
  width: 240px;
  margin-right: 0;
  overflow: hidden;
  background: var(--el-fill-color-extra-light);
  flex: 0 0 auto;
}

.device-tabs :deep(.el-tabs__nav-wrap.is-left) {
  height: 100%;
}

.device-tabs :deep(.el-tabs__item.is-left) {
  justify-content: flex-start;
  height: 48px;
  padding: 0 14px;
}

.device-tabs :deep(.el-tabs__content) {
  height: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  flex: 1;
}

.device-tabs :deep(.el-tab-pane) {
  height: 100%;
}

.custom-label {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 8px;
}

.custom-label__name {
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.custom-label__progress {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  flex: 0 0 auto;
}

.custom-label__info,
.step-info {
  color: var(--el-color-primary);
  flex: 0 0 auto;
}

.inspection-workspace {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.steps-panel {
  display: flex;
  min-width: 0;
  overflow: hidden;
  background: var(--el-fill-color-blank);
  border-right: 1px solid var(--el-border-color-lighter);
  flex-direction: column;
}

.steps-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  background: var(--el-fill-color-extra-light);
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.steps-panel__header span:last-child {
  font-size: 12px;
  font-weight: 400;
  color: var(--el-text-color-secondary);
}

.steps-panel__body {
  min-height: 0;
  padding: 18px 12px 10px 18px;
  overflow-y: auto;
  flex: 1;
}

.steps-nav {
  min-height: 100%;
}

.steps-nav :deep(.el-step__title) {
  min-width: 0;
  font-size: 14px;
  line-height: 22px;
}

.steps-nav :deep(.el-step__head.is-process .el-step__icon) {
  color: #fff;
  background: var(--el-color-primary);
  border-color: var(--el-color-primary);
}

.steps-nav :deep(.el-step__head.is-finish .el-step__icon) {
  color: #fff;
  background: var(--el-color-success);
  border-color: var(--el-color-success);
}

.step-title-wrapper {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  padding-right: 8px;
  gap: 6px;
}

.title-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.step-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.section-heading {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  background: var(--el-fill-color-extra-light);
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.section-heading--between {
  justify-content: space-between;
}

.section-heading__title {
  display: flex;
  align-items: center;
  min-width: 0;
}

.section-heading__title > span {
  width: 4px;
  height: 17px;
  margin-right: 9px;
  background: var(--el-color-primary);
  border-radius: 2px;
  flex: 0 0 auto;
}

.step-counter {
  margin-left: 16px;
  font-size: 13px;
  font-weight: 400;
  color: var(--el-text-color-secondary);
  white-space: nowrap;
}

.step-panel__content {
  display: flex;
  min-height: 0;
  padding: 24px 24px 0;
  overflow-y: auto;
  flex: 1;
  flex-direction: column;
}

.inspection-form {
  width: 100%;
  max-width: 920px;
}

.inspection-form :deep(.el-form-item) {
  margin-bottom: 20px;
}

.inspection-form :deep(.el-select),
.inspection-form :deep(.el-input) {
  width: 100%;
}

.standard-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 14px 16px;
  margin-top: 4px;
  background: var(--el-fill-color-extra-light);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 6px;
  gap: 10px;
}

.standard-item {
  display: flex;
  min-width: 0;
  align-items: flex-start;
}

.standard-item__label {
  width: 110px;
  margin-right: 10px;
  font-weight: 600;
  color: var(--el-text-color-regular);
  flex: 0 0 auto;
}

.standard-item__value {
  min-width: 0;
  color: var(--el-text-color-secondary);
  overflow-wrap: anywhere;
}

.navigation-controls {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 60px;
  padding: 10px 0;
  margin-top: auto;
  background: var(--el-bg-color);
  border-top: 1px solid var(--el-border-color-lighter);
  gap: 8px;
}

.navigation-controls :deep(.el-button) {
  margin-left: 0;
}

@media (width <= 1400px) {
  .write-order-page .inspection-workbench {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .write-order-page .current-item-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
}

@media (width <= 1200px) {
  .write-order-page .current-item-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .write-order-page .standard-section__content {
    max-height: 220px;
  }
}

@media (width <= 900px) {
  .write-order-page .inspection-workbench {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(520px, 1fr);
  }

  .write-order-page .device-panel {
    border-right: 0;
    border-bottom: 1px solid var(--el-border-color-lighter);
  }

  .write-order-page .device-list {
    flex-direction: row;
    padding: 10px;
    overflow-x: auto;
  }

  .write-order-page .device-item {
    width: 240px;
    flex: 0 0 auto;
  }
}

@media (width <= 600px) {
  .write-order-page .device-summary,
  .write-order-page .section-heading--between {
    align-items: flex-start;
  }

  .write-order-page .device-summary__progress,
  .write-order-page .step-counter {
    margin-top: 3px;
  }

  .write-order-page .current-item-layout {
    padding: 12px;
  }

  .write-order-page .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .write-order-page .form-grid__wide {
    grid-column: auto;
  }
}

.inspection-workbench {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 580px;
  overflow: hidden;
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  box-shadow: var(--el-box-shadow-light);
  flex: 1;
}

.device-panel {
  display: flex;
  min-width: 0;
  overflow: hidden;
  background: var(--el-fill-color-extra-light);
  border-right: 1px solid var(--el-border-color-lighter);
  flex-direction: column;
}

.device-panel__header {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 10px 16px;
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.device-panel__header > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

.device-panel__header strong {
  font-size: 15px;
  color: var(--el-text-color-primary);
}

.device-panel__header span {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.device-list {
  display: flex;
  min-height: 0;
  padding: 10px;
  overflow-y: auto;
  flex: 1;
  flex-direction: column;
  gap: 6px;
}

.device-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 9px 10px;
  color: var(--el-text-color-regular);
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
  gap: 10px;
}

.device-item:hover {
  background: var(--el-fill-color-light);
}

.device-item.is-active {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
  border-color: var(--el-color-primary-light-7);
}

.device-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 15px;
  color: var(--el-text-color-secondary);
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 6px;
  flex: 0 0 auto;
}

.device-item.is-active .device-item__icon {
  color: var(--el-color-primary);
  border-color: var(--el-color-primary-light-7);
}

.device-item__content {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.device-item__name {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-item__progress {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.device-item__arrow {
  color: var(--el-text-color-placeholder);
  flex: 0 0 auto;
}

.device-content {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.device-inspection-panel {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

.device-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  gap: 16px;
}

.device-summary__main {
  display: flex;
  align-items: center;
  min-width: 0;
}

.device-summary__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 12px;
  font-size: 17px;
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
  border-radius: 7px;
  flex: 0 0 auto;
}

.device-summary h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--el-text-color-primary);
}

.device-summary p {
  margin: 1px 0 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 18px;
  color: var(--el-text-color-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-summary__progress {
  font-size: 13px;
  color: var(--el-text-color-secondary);
  white-space: nowrap;
}

.item-progress-strip {
  display: flex;
  padding: 12px 18px;
  overflow-x: auto;
  background: var(--el-fill-color-extra-light);
  border-bottom: 1px solid var(--el-border-color-lighter);
  gap: 8px;
}

.progress-item {
  display: flex;
  max-width: 240px;
  min-width: 150px;
  padding: 7px 10px;
  color: var(--el-text-color-secondary);
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 6px;
  align-items: center;
  gap: 8px;
}

.progress-item.is-process {
  color: var(--el-color-primary);
  border-color: var(--el-color-primary-light-5);
}

.progress-item.is-finish {
  color: var(--el-color-success);
  border-color: var(--el-color-success-light-5);
}

.progress-item__index {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  color: #fff;
  background: var(--el-text-color-placeholder);
  border-radius: 50%;
  flex: 0 0 auto;
}

.progress-item.is-process .progress-item__index {
  background: var(--el-color-primary);
}

.progress-item.is-finish .progress-item__index {
  background: var(--el-color-success);
}

.progress-item__name {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.current-item-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
  padding: 18px;
  align-items: start;
  gap: 16px;
}

.entry-section,
.standard-section {
  overflow: hidden;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 7px;
}

.entry-section .inspection-form {
  max-width: none;
  padding: 18px 18px 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
}

.form-grid :deep(.el-form-item) {
  min-width: 0;
  align-items: flex-start;
}

.form-grid :deep(.el-form-item__label) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 32px;
  padding-right: 12px;
  line-height: 32px;
  white-space: nowrap;
}

.form-grid :deep(.el-form-item__content) {
  min-width: 0;
}

.form-grid__wide {
  grid-column: 1 / -1;
}

.standard-section {
  background: var(--el-fill-color-extra-light);
}

.standard-section__header {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color-lighter);
  gap: 8px;
}

.standard-section__header > :first-child {
  color: var(--el-color-primary);
}

.standard-section__content {
  max-height: 300px;
  padding: 14px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.8;
  color: var(--el-text-color-regular);
  white-space: pre-wrap;
}

.standard-section__footer {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
  background: var(--el-bg-color);
  border-top: 1px solid var(--el-border-color-lighter);
  gap: 12px;
}

.device-inspection-panel > .navigation-controls {
  position: static;
  min-height: 58px;
  padding: 10px 18px;
  margin-top: 0;
  border-top: 1px solid var(--el-border-color-lighter);
}
</style>
