<template>

  <div class="facility-setting">
  
    <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 class="col-x">
        <div class="text">高度(米)</div>
      </div>
      <div class="col-x">
        <div class="text">宽度(米)</div>
      </div>
  
    </div>
  
    <div v-for="(_, x) in params" :key="`col_${x}`" class="line-x content">
  
      <div class="col-x">
        <AsyncSelect v-model="params[x].type" code="cross_type" />
      </div>
      <div class="col-x">
        <el-input v-model="params[x].name" placeholder="请输入..." />
      </div>
      <div class="col-x">
        <el-input v-model="params[x].rightHole" placeholder="请输入..." />
      </div>
      <div class="col-x">
        <el-input v-model="params[x].leftHole" placeholder="请输入..." />
      </div>
      <div class="col-x">
        <el-input-number
          :controls="false"
          :min="0"
          v-model="params[x].height"
          placeholder="请输入..."
        />
      </div>
      <div class="col-x">
        <el-input-number
          :controls="false"
          :min="0"
          v-model="params[x].width"
          placeholder="请输入..."
        />
      </div>
  
      <div class="col-x">
        <div @click="goDelete(x)" class="col-delete">删除</div>
      </div>
  
    </div>
  
  </div>
  
  </template>
  
  <script lang='ts' setup>
  
  import AsyncSelect from '@/components/AsyncSelect/index.vue'
  import { FACILITY_TYPES } from '@/config/dict'
  import { CrossTemplate, facilityCheck } from '../../../../index' 

  import { defineModel } from 'vue'

  const params = defineModel<any>()
  
  const lineSet = (type, x?) => {
    if (type === 'add') {
      params.value.push(CrossTemplate())
    } else {
      params.value.splice(x, 1)
    }
  }

  const pmsFirm = () => {
    // console.log(params.value)
   return facilityCheck(params.value)
  }

  const goDelete = (x) => {
    params.value.splice(x, 1)
  }

  defineExpose({
    pmsFirm
  })
  
  </script>
  
  <style lang='scss' scoped>
  
  .facility-setting {
    margin-top: 20px;
    .line-x {
      padding: 0 24px;
      display: grid;
      grid-template-columns: 100px 180px 100px 100px 100px 100px auto;
      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;
            align-items: center;
            justify-content: flex-end;
          }
        }
  
        .col-delete {
          color: rgb(228, 116, 112);
          &:hover {
            color: rgba(228, 116, 112, 0.9);
            cursor: pointer;
          }
        }
      }
      
    }
  }
  
  </style>