<template>

  <el-dialog
    class="new-model"
    v-model="state"
    width="1112"
    :align-center="true"
    @closed="onClosed"
  >

    <div class="title">
      <div class="text">{{ popName }}</div>
      <Icon @click="goClose" class="close" icon="ep:close" />
    </div>
  
    <div :class="['content', { 'disabled': type === 'check' }]">

      <el-scrollbar>
        <BaseBlock ref="baseRef" v-model="params.tunnelBase" />
        <RoadBlock
          ref="roadRef"
          v-model="params"
        />
      </el-scrollbar>

    </div>
  
    <template #footer >
  
      <div class="footer">
        <el-button v-if="type === 'check'" type="primary" @click="goClose">关闭</el-button>
        <template v-else>
          <el-button @click="goClose">取消</el-button>
          <el-button @click="onSubmit" type="primary">确定</el-button>
        </template>
      </div>


    </template>
    
  
  </el-dialog>
  
  </template>
  
  <script lang='ts' setup>

  import BaseBlock from './components/Base/index.vue'
  import RoadBlock from './components/Road/index.vue'
  import { ElMessage } from 'element-plus'

  import { tunnelCreate, tunnelUpdate, getTunnelDetail } from '@/api/system'

  import { RoadTemplate, FacilityTemplate, CrossTemplate } from '../../index'
  
  import { ref, defineExpose } from 'vue'
  
  const state = ref(false)
  const baseRef = ref<any>(null)
  const roadRef = ref<any>(null)
  const type = ref<any>(null)

  const emits = defineEmits(['update'])

  let params = reactive({
    tunnelBase: FacilityTemplate(),
    tunnelHoles: [RoadTemplate(), RoadTemplate()],
    tunnelPassages: [CrossTemplate()]
  })

  const popName = computed(() => {
    return {
      check: '查看', edit: '编辑', new: '新增'
    }[type.value]
  })

  const diaOpen = (xtype, e?) => {
    if (e) {
      getTunnelDetail({ id: e.id }).then(res => {
        params.tunnelBase = res.tunnelBase
        params.tunnelHoles = res.tunnelHoles
        params.tunnelPassages = res.tunnelPassages

        for (let x = 0; x < 2; x++) {
          if (!params.tunnelHoles[x]) {
            params.tunnelHoles.push(RoadTemplate(params.tunnelBase.id))
          }
        }

        // if (!params.tunnelPassages.length) {
        //   params.tunnelPassages.push(CrossTemplate())
        // }

      })
    }

    type.value = xtype
    state.value = true
  }

  const goClose = () => {
    state.value = false
  }

  const onClosed = () => {
    // params = reactive({
    //   tunnelBase: FacilityTemplate(),
    //   tunnelHoles: [RoadTemplate(1), RoadTemplate(2)],
    //   tunnelPassages: [CrossTemplate()]
    // })
    Object.assign(params, {
    tunnelBase: FacilityTemplate(),
    tunnelHoles: [RoadTemplate(1), RoadTemplate(2)],
    tunnelPassages: [CrossTemplate()]
  });
  }

  // 提交
  const onSubmit = async () => {

    const base = await baseRef.value?.pmsFirm()
    if (!base) {
      return ElMessage.error('请完基础成数据填写！')
    }

    const roads = await roadRef.value?.pmsFirm()
    if (!roads) return

    // 数据过滤
    const { tunnelBase, tunnelHoles, tunnelPassages } = params
  
    const isTunnels = tunnelBase.tunnelDesignType === '0'

    const newPms = {
      tunnelBase,
      tunnelHoles: isTunnels ? tunnelHoles : [tunnelHoles[0]]
      // tunnelHoles: []
    }

    if (isTunnels) {
      newPms.tunnelPassages = tunnelPassages
    }

    if (type.value === 'new') {
      await tunnelCreate(newPms)
    } else {
      console.log(newPms,'newPms')
      await tunnelUpdate(newPms)
    }
   
    ElMessage.success(type.value === 'edit' ? '修改成功！' : '创建成功！')

    state.value = false

    emits('update')

  }
  
  defineExpose({
    diaOpen
  })
  
  </script>
  
  <style lang='scss' scoped>
  
  $base_url: '@/assets/images/home/';

  .title {
    height: 48px;
    display: flex;
    align-content: center;
    align-items: center;
    color: white;
    padding: 0 20px;
    font-size: 18px;
    font-weight: 600;
    justify-content: space-between;
    .close {
      cursor: pointer;
    }
  }
  
  .content {
    padding: 0 16px;
    height: 600px;
    &.disabled {
      :deep(.base-block) {
        pointer-events: none;
      }
      :deep(.road-setting) {
        pointer-events: none;
      }
      :deep(.el-input) {
        background: rgba($color: #FFFFFF, $alpha: 0.2);
      }
    }
  }
  
  .footer {
    // background: rgba(69, 116, 182, 0.36);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20px 24px;
    color: white;
  }
  
  </style>
  
  <style lang="scss">
  
  .new-model {
    padding: 0;
    box-sizing: border-box;
    // border: 1px solid rgba(255, 255, 255, 0.5);
    background: #0D3561;
    border-radius: 4px;
  
    .el-dialog__header {
      display: none;
    }
    .el-dialog__footer {
      padding-top: 0;
    }
    .def-btn {
      background: #1270FF;
      border: 1px solid rgba(155, 193, 255, 0.74);
      height: 28px;
      padding: 8px 10px;
      color: white;
      &:hover {
        border: 1px solid rgba(255, 255, 255, 0.8);
      }
    }
  }
  
  </style>