<template>
  <div class="base-block">
    <el-form ref="formRef" :model="formModels" :rules :show-message="false">
      <div class="block-container">

        <el-form-item prop="tunnelCode" label="隧道编号：">
          <el-input v-model="params.tunnelCode" placeholder="请输入..." />
        </el-form-item>

        <el-form-item prop="tunnelName" label="隧道名称：">
          <el-input v-model="params.tunnelName" placeholder="请输入..." />
        </el-form-item>

        
        <el-form-item prop="deptId" label="所属机构：">
          <OrgSelect
            v-model="params.deptId"
            :props="{
              value: 'id',
              label: 'name',
              checkStrictly: true
            }"
          />
        </el-form-item>

        <el-form-item prop="road" label="所属路段：">
          <el-input v-model="params.road" placeholder="请输入..." />
        </el-form-item>

        <el-form-item label="经纬度：">
          <div class="form-line">
            <div class="content-x">
              <el-input v-model="params.latitude" placeholder="请输入经度" />
            </div>
            <div class="gap"></div>
            <div class="content-x">
              <el-input v-model="params.longitude" placeholder="请输入维度" />
            </div>
          </div>
        </el-form-item>

        <el-form-item prop="tunnelType" label="隧道类型：">
          <AsyncSelect code="tunnelType" v-model="params.tunnelType" />
        </el-form-item>

        <el-form-item prop="tunnelDesignType" label="设计类型：">
           <AsyncRadio code="tunnel_design_type" v-model="params.tunnelDesignType" />
        </el-form-item>

        <el-form-item prop="length" label="隧道长度(米)：">
          <el-input v-model="params.length" placeholder="请输入经度" />
        </el-form-item>

        <el-form-item prop="miles" label="起止桩号：">

          <div class="form-line">
            <div class="content-x">
              <el-input v-model="params.mileStart" placeholder="起点桩号" />
            </div>
            <div class="gap"> - </div>
            <div class="content-x">
              <el-input v-model="params.mileEnd" placeholder="终点桩号" />
            </div>
          </div>
          
        </el-form-item>

        <el-form-item prop="crossNum" label="横通道数量：">
          <el-input-number
            :controls="false"
            :min="0"
            v-model="params.crossNum"
            placeholder="请输入..."
          />
        </el-form-item>

        <el-form-item prop="trafficFlow" label="设计流量：">
          <el-input-number
            :controls="false"
            :min="0"
            v-model="params.trafficFlow"
            placeholder="请输入..."
          />
        </el-form-item>

        <el-form-item prop="sort" label="排序：">
          <el-input-number
            :controls="false"
            :min="0"
            v-model="params.sort"
            placeholder="请输入..."
          />
        </el-form-item>

        <el-form-item prop="modules" label="包含模块：">
          <el-input v-model="params.modules" placeholder="请输入..." />
        </el-form-item>

        <!--  -->
      </div>
    </el-form>
  </div>
</template>

<script lang="ts" setup>

  import OrgSelect from '@/views/components/OrgSelect/index.vue'
  import AsyncSelect from '@/components/AsyncSelect/index.vue'
  import AsyncRadio from '@/components/AsyncRadio/index.vue'

  import { TUNNEL_TYPES } from '@/config/dict'
  import { noEmpty, isEmpty, textAble } from '../../../../index'

  import { ref, defineModel, reactive } from 'vue'

  const test = ref('100')

  const params = defineModel<any>()
  const formRef = ref<any>(null)
  
  const formModels = computed(() => {
    return {
      ...params.value,
      miles: [params.value.mileStart, params.value.mileEnd]
    }
  })

  const rules = reactive<any>({
    tunnelCode: [{ required: true, validator: noEmpty }],
    tunnelName: [{ required: true, validator: noEmpty }],
    deptId: [{ required: true, trigger: 'blur' }],
    road: [{ required: true, validator: textAble }],
    tunnelType: [{ required: true, validator: noEmpty }],
    tunnelDesignType: [{ required: true, validator: noEmpty }],
    length: [{ required: true, validator: noEmpty }],
    modules: [{ required: true, validator: textAble }],
    miles: [{ required: true, validator: (_, value, call) => {
      if ((value[0] && value[1]) && (value[1] > value[0]) && value[0] > 0) {
        call()
      } else {
        call(false)
      }
    }}]
  })

  const pmsFirm = () => {
    return new Promise(resolve => {
      formRef.value?.validate(e => {
        resolve(e)
      })
    })
  }

  defineExpose({
    pmsFirm
  })

</script>

<style lang="scss" scoped>
.block-container {
  padding-right: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
  .form-line {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .content-x {
      flex-grow: 1;
    }
    .gap {
      color: rgba($color: #ffffff, $alpha: 0.5);
      width: 24px;
      text-align: center;
    }
  }
}
</style>

<style lang="scss">

.base-block {
  .el-input-number {
    width: 100% !important;
    .el-input__inner {
      text-align: left !important;
    }
  }
}

</style>
