<template>
  <div class="road-setting">
    <el-form ref="formRef" :model="formModels" :rules :show-message="false">
      <div class="roads">

        <el-form-item  prop="directionName" label="行车方向：">
          <el-input v-model="params.directionName" placeholder="请输入..." />
        </el-form-item>

        <el-form-item  prop="directionUpdown" label="上下行：">
          <AsyncSelect v-model="params.directionUpdown" code="tunnel_direction" />
        </el-form-item>

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

        <el-form-item prop="miles" label="起止桩号：">
          <div class="form-line">
            <div class="content-x">
              <el-input-number
                :controls="false"
                :min="0"
                v-model="params.mileStart"
                placeholder="起点桩号"
              />
            </div>
            <div class="gap"> - </div>
            <div class="content-x">
              <el-input-number
                :controls="false"
                :min="0"
                v-model="params.mileEnd"
                placeholder="终点桩号"
              />
            </div>
          </div>
        </el-form-item>

        <el-form-item prop="length" label="洞长(米)：">
          <el-input-number
            :controls="false"
            :min="0"
            v-model="params.length"
            placeholder="请输入..."
          />
        </el-form-item>

        <el-form-item prop="width" label="洞宽(米)：">
          <el-input-number
            :controls="false"
            :min="0"
            v-model="params.width"
            placeholder="请输入..."
          />
        </el-form-item>

        <el-form-item prop="height" label="洞高(米)：">
          <el-input-number
            :controls="false"
            :min="0"
            v-model="params.height"
            placeholder="请输入..."
          />
        </el-form-item>

        <el-form-item prop="limitHeight" label="限高(米)：">
          <el-input-number
            :controls="false"
            :min="0"
            v-model="params.limitHeight"
            placeholder="请输入..."
          />
        </el-form-item>

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

        <el-form-item prop="emergencyNum" label="紧急停车带数：">
          <el-input-number
            :controls="false"
            :min="0"
            v-model="params.emergencyNum"
            placeholder="请输入..."
          />
        </el-form-item>

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

      </div>
    </el-form>

    <div class="btn-line">
      <el-button @click="lineSet('add')" type="primary">新增</el-button>
    </div>

    <div class="line-x ttl">
      <div class="col-x">
        <div class="text">类型</div>
      </div>
      <div class="col-x">
        <div class="text">名称</div>
      </div>
      <div class="col-x">
        <div class="text">标志标线类型</div>
      </div>
      <div class="col-x">
        <div class="text">起止桩号</div>
      </div>
    </div>

    <div
      v-for="(item, x1) in params.makerlines"
      :key="`col_${x1}`"
      class="line-x content"
    >
      <div class="col-x">
        <AsyncSelect v-model="params.makerlines[x1].type" code="mark_line_type" />
      </div>
      <div class="col-x">

        <!-- 车道 -->
        <template v-if="params.makerlines[x1].type === 'type_01' && params.laneNum">
          
          <el-select
            v-model="params.makerlines[x1].name"
            :teleported="false"
          >
            <el-option
              v-for="({ name, key }) in getOptions(params.laneNum)"
              :key
              v-bind="{ label: name, value: key }"
            />
          </el-select>

        </template>

        <el-input v-else v-model="params.makerlines[x1].name" placeholder="请输入..." /> 
      </div>
      <div class="col-x">
        <AsyncSelect
          v-if="params.makerlines[x1].type === 'type_01'"
          v-model="params.makerlines[x1].markerlineType"
          code="road_line_type"
        />
      </div>
      <div class="col-x">
        <div v-for="(_, x2) in item.mileList" :key="`row_${x2}`" class="row-x">
          <el-input
            v-model="item.mileList[x2].mileStart"
            placeholder="请输入..."
          />
          <div class="gap">-</div>
          <el-input
            v-model="item.mileList[x2].mileEnd"
            placeholder="请输入..."
          />
          <Icon
            v-if="item.mileList.length > 1"
            class="delete"
            icon="ep:delete"
            :size="18"
            @click="sectionSet('delete', x1, x2)"
          />
          <Icon
            v-if="x2 === item.mileList.length - 1"
            @click="sectionSet('add', x1)"
            class="add"
            icon="ep:circle-plus"
            :size="18"
          />
        </div>
      </div>

      <div class="col-x">
        <div @click="lineSet('delete', x1)" class="col-delete">删除</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import AsyncSelect from '@/components/AsyncSelect/index.vue'
import { ROAD_MARK_TYPES, ROAD_LINE_TYPES } from '@/config/dict'
import { RoadTemplate, SectionTemplate, tunnelCheck, noEmpty } from '../../../../index'
import { ref, defineModel } from 'vue'

const params = defineModel<any>()
const formRef = ref<any>(null)

defineProps<{
  type: number,
  isTunnels?: boolean
}>()

const formModels = computed(() => {
  return {
    ...params.value,
    miles: [params.value.mileStart, params.value.mileEnd]
  }
})

const rules = reactive<any>({
  directionName: [{ required: true }],
  directionUpdown: [{ required: true }],
  holeName: [{ required: true }],
  miles: [{ required: true, validator: (_, value, call) => {
    if ((value[0] && value[1]) && (value[1] > value[0]) && value[0] > 0) {
      call()
    } else {
      call(false)
    }
  }}],
  length:  [{ required: true }],
  orderNo: [{ required: true }]
})

const lineSet = (type, x?) => {
  if (type === 'add') {
    params.value.makerlines.push(SectionTemplate(params.value.id))
  } else {
    params.value.makerlines.splice(x, 1)
  }
}

const sectionSet = (type, row, x?) => {
  if (type === 'add') {
    params.value.makerlines[row].mileList.push(SectionTemplate(params.value.id))
  } else {
    params.value.makerlines[row].mileList.splice(x, 1)
  }
}

const pmsFirm = () => {
  return new Promise((resolve) => {

    formRef.value?.validate((e) => {
      resolve(e)
    })

    if (tunnelCheck(params.value.makerlines)) {
      resolve(false)
    }

  })
}

const getOptions = (count) => {
  return (new Array(count)).fill(null).map((_, x) => {
    return {
      key: 'l' + x + 1,
      name: `${x + 1}车道`
    }
  })
}

// watch(
//   () => params.value.drivewayCount,
//   e => {
//     console.log(params.value.tunnelRoads)
//     params.value.tunnelRoads.forEach(item => {
//       if (item.roadType === 'x0') {
//         item.rodaName = ''
//       }
//     })
//   },
// )

defineExpose({
  pmsFirm
})
</script>

<style lang="scss" scoped>
.road-setting {

  .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;
    }
  }

  .roads {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;
    margin-right: 24px;
  }

  .line-x {
    padding: 0 24px;
    display: grid;
    grid-template-columns: 100px 180px 100px auto 80px;
    grid-column-gap: 24px;
    margin-top: 10px;
    &.ttl {
      .text {
        color: white;
        position: relative;
        &::before {
          content: '*';
          position: absolute;
          left: -8px;
          top: 1px;
          color: rgb(228, 116, 112);
        }
      }
    }

    &.content {
      background: rgba(69, 116, 182, 0.2);
      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
      padding: 12px 24px;
      box-sizing: border-box;
      margin-right: 24px;
      .row-x {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        &:last-child {
          margin-bottom: 0;
        }
        :deep(.el-input) {
          width: 100px;
        }
        .gap {
          color: white;
          margin: 0 8px;
        }
        .delete {
          margin-left: 10px;
          color: rgb(228, 116, 112);
          &:hover {
            color: rgba(228, 116, 112, 0.9);
            cursor: pointer;
          }
        }
        .add {
          margin-left: 20px;
          color: white;
          &:hover {
            color: rgba(255, 255, 255, 0.9);
            cursor: pointer;
          }
        }
        .chip {
          flex-grow: 1;
        }
      }

      .col-x {
        &:last-child {
          display: flex;
          justify-content: flex-end;
          margin-top: 6px;
        }
      }

      .col-delete {
        color: rgb(228, 116, 112);
        &:hover {
          color: rgba(228, 116, 112, 0.9);
          cursor: pointer;
        }
      }
    }
  }
}
</style>

<style lang="scss">

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

.col-x {
  .el-input-number {
    width: auto !important;
    .el-input__inner {
      text-align: left !important;
    }
  }
}

</style>
