<template>

  <div class="road-block">

    <!-- 导航 -->
    <div v-if="isTunnels" class="navs">
  
      <div
        v-for="item in navs"
        :class="['x-nav', { 'act': act === item.key }]"
        :key="item.key"
        @click="navChange(item)"
      >
        {{ item.text }}
      </div>
    
      <div :style="slideStyle" class="slide"></div>
  
    </div>

    <div class="title" v-else>隧道配置</div>
  
    <!-- 道路信息 -->
    <RoadSetting
      ref="roadRef1"
      v-model="params.tunnelHoles[0]"
      :type="1"
      :isTunnels
      v-show="+act === 1"
    />
    <template v-if="isTunnels">
      <RoadSetting ref="roadRef2" v-model="params.tunnelHoles[1]" :type="2" v-show="+act === 2" />
      <CrossSetting
        ref="crossRef"
        v-model="params.tunnelPassages"
        v-show="+act === 3"
      />
    </template>
  
  </div>
  
  </template>
  
  <script lang='ts' setup>


  import RoadSetting from './RoadSetting.vue'
  import CrossSetting from './CrossSetting.vue'
  import { ElMessage } from 'element-plus'
  
  import { ref, defineModel } from 'vue'

  const params = defineModel<any>()
  const roadRef1 = ref<any>(null)
  const roadRef2 = ref<any>(null)
  const crossRef = ref<any>(null)

  const isTunnels = computed(() => {
    return params.value.tunnelBase.tunnelDesignType === '0'
  })
  
  const navs = ref([
    { text: '上行洞', key: '1' },
    { text: '下行洞', key: '2' },
    { text: '横通道', key: '3' }
  ])
  
  const act = ref('1')
  
  // 导航动画
  const slideStyle = computed(() => {
    const x = navs.value.findIndex(item => item.key === act.value)
    return {
      transform: `translateX(${x * 82}px)`
    }
  })
  
  // 切换
  const navChange = (e) => {
    act.value = e.key
  }

  // 检验
  const pmsFirm = async () => {

    const upRoad = await roadRef1.value?.pmsFirm()
    if (!upRoad) {
      ElMessage.error(`${isTunnels.value ? '上行洞' : '隧道配置'}数据录入有误！`)
      return false
    }

    if (!isTunnels.value) {
      return true
    }

    const downRoad = await roadRef2.value?.pmsFirm()
    if (!downRoad) {
      ElMessage.error('下行洞数据录入有误！')
      return false
    }

    const facility = crossRef.value.pmsFirm()
    if (facility) {
      ElMessage.error('横通道数据录入有误！')
      return false
    }

    return true

  }

  defineExpose({
    pmsFirm
  })
  
  </script>
  
  <style lang='scss' scoped>
  
  .road-block {

    .title {
      font-size: 16px;
      font-weight: 600;
      color: #ffffff;
      margin-left: 10px;
      margin-top: 20px;
    }
  
    .navs {
      margin: 0 24px 0 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      height: 48px;
      position: relative;
      .x-nav {
        font-size: 16px;
        font-weight: 600;
        width: 70px;
        height: 48px;
        display: inline-block;
        border: 1px solid #203A60;
        box-sizing: border-box;
        color: #ffffff;
        margin-right: 12px;
        border-radius: 12px 12px 0 0;
        text-align: center;
        line-height: 48px;
        cursor: pointer;
        position: relative;
        z-index: 2;
      }
  
      .slide {
        position: absolute;
        width: 24px;
        height: 3px;
        background: #0073E6;
        left: 23px;
        bottom: -1px;
        border-radius: 12px 12px 0 0;
        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
      }
  
      .btn-line {
        --el-color-primary: #1270FF;
      }
  
    }
  
    .roads {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 30px;
      margin-right: 24px;
    }
  
  }
  
  
  </style>
