<template>

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

    <div class="title">
      <div class="text">{{ popName }}</div>
      <Icon @click="goClose" class="close" icon="ep:close" />
    </div>

    <div class="container">

      <el-scrollbar>

        <el-form ref="formRef" :model="params" :rules :show-message="false" label-width="130" >

          <div :class="['content', { 'disabled': type === 'check' }]">
          
            <el-form-item prop="provincecenter" label="省中心：">
              <!-- <AsyncSelect v-model="params.provincecenter" code="province_center" /> -->
              <el-input v-model="params.provincecenter" placeholder="请输入..." />
            </el-form-item>

            <el-form-item prop="areacenter" label="区域中心：">
              <!-- <AsyncSelect v-model="params.areacenter" code="area_center" /> -->
              <el-input v-model="params.areacenter" placeholder="请输入..." />
            </el-form-item>

            <el-form-item prop="branchcenter" label="分中心：">
              <!-- <AsyncSelect v-model="params.branchcenter" code="branch_center" /> -->
              <el-input v-model="params.branchcenter" placeholder="请输入..." />
            </el-form-item>

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

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

            <el-form-item prop="tunnelCode" label="隧道名称：">
              <el-select @change="tunnelSelect" :teleported="false" v-model="params.tunnelCode">
                <el-option
                  v-for="item in tunnels"
                  :key="item.id"
                  :label="item.tunnelName"
                  :value="item.tunnelCode"
                />
              </el-select>
            </el-form-item>

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

            <el-form-item prop="holePosition" label="左右洞位置：">
              <AsyncRadio v-model="params.holePosition" code="equipment_tunnel_direction" />
            </el-form-item>

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

            <el-form-item prop="deviceId" label="设备ID：">
              <el-input v-model="params.deviceId" placeholder="请输入..." />
            </el-form-item>

            <el-form-item prop="deviceCode" label="设备编码：">
              <el-input v-model="params.deviceCode" placeholder="请输入..." />
            </el-form-item>

            <el-form-item prop="deviceType" label="设备类型：">
              <AsyncSelect v-model="params.deviceType" code="device_type" />
            </el-form-item>

            <el-form-item prop="module" label="所属模块：">
              <el-input v-model="params.module" placeholder="请输入..." />
            </el-form-item>

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

            <el-form-item prop="mileStart" label="起始桩号：">
              <el-input v-model="params.mileStart" placeholder="请输入..." />
            </el-form-item>

            <el-form-item prop="mileEnd" label="结束桩号：">
              <el-input v-model="params.mileEnd" placeholder="请输入..." />
            </el-form-item>

            <el-form-item prop="mileStartOffset" label="桩号偏移量：">
              <el-input v-model="params.mileStartOffset" placeholder="请输入..." />
            </el-form-item>

            <el-form-item prop="line" label="所在行：">
              <el-input v-model="params.line" placeholder="请输入..." />
            </el-form-item>

            <el-form-item prop="axisX" label="横坐标：">
              <el-input v-model="params.axisX" placeholder="请输入..." />
            </el-form-item>

            <el-form-item prop="axisY" label="纵坐标：">
              <el-input v-model="params.axisX" placeholder="请输入..." />
            </el-form-item>
            
            <el-form-item prop="length" label="长度：">
              <el-input v-model="params.length" placeholder="请输入..." />
            </el-form-item>

            <el-form-item prop="plcCode" label="区控编码：">
              <el-input v-model="params.plcCode" placeholder="请输入..." />
            </el-form-item>

            <el-form-item prop="modelVersion" label="设备模型版本：">
              <el-input v-model="params.modelVersion" placeholder="请输入..." />
            </el-form-item>

            <el-form-item prop="needCamera" label="视频联动：">
              <AsyncRadio v-modle="params.needCamera" code="infra_boolean_string" />
            </el-form-item>

            <el-form-item prop="laneInfo" label="车道信息：">
              <el-input v-model="params.laneInfo" placeholder="请输入..." />
            </el-form-item>

            <el-form-item prop="trafficEventDeviceId" label="视频事件设备ID：">
              <el-input v-model="params.trafficEventDeviceId" placeholder="请输入..." />
            </el-form-item>

            <el-form-item prop="deviceIp" label="IP地址：">
              <el-input v-model="params.deviceIp" placeholder="请输入..." />
            </el-form-item>

            <el-form-item prop="deviceUuid" label="UUID：">
              <el-input v-model="params.deviceUuid" placeholder="请输入..." />
            </el-form-item>

          </div>
        </el-form>

      </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 AsyncSelect from '@/components/AsyncSelect/index.vue'
  import AsyncRadio from '@/components/AsyncRadio/index.vue'
  import OrgSelect from '@/views/components/OrgSelect/index.vue'

  import { EquipmentTemplate, noEmpty } from '../../index'
  import { isIpAddress, isStoneNumber } from '@/config/check'
  import { ElMessage } from 'element-plus'
  import { ref, defineExpose } from 'vue'
  import { EQUIPMENT_TUNNEL, EQUIPMENT_TYPES } from '@/config/dict'
  import { getTunnelBasics, equipmentCreate, equipmentUpdate } from '@/api/system'

  defineProps<{
    facilities: any[]
  }>()

  const emits = defineEmits(['update'])
  
  const state = ref(false)
  const formRef = ref<any>(null)
  const type = ref<any>(null)
  const tunnels = ref([])

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

  const params = ref(EquipmentTemplate())

  const rules = reactive<any>({
    provincecenter: [{ required: true, validator: noEmpty }],
    areacenter: [{ required: true, validator: noEmpty }],
    branchcenter: [{ required: true, validator: noEmpty }],
    road: [{ required: true, validator: noEmpty }],
    deptId: [{ required: true }],
    tunnelCode: [{ required: true, validator: noEmpty }],
    holePosition: [{ required: true, validator: noEmpty }],
    directionName: [{ required: true, validator: noEmpty }],
    deviceId: [{ required: true, validator: noEmpty }],
    deviceCode: [{ required: true, validator: noEmpty }],
    deviceType: [{ required: true, validator: noEmpty }],
    module: [{ required: true, validator: noEmpty }],
    deviceName: [{ required: true, validator: noEmpty }],
    mileStart: [{ required: true, validator: noEmpty }],
    mileStartOffset: [{ required: true, validator: noEmpty }],
    line: [{ required: true, validator: noEmpty }],
    laneInfo: [{ required: true, validator: noEmpty }],
    deviceIp: [{ required: true, validator: noEmpty }],
    deviceUuid: [{ required: true, validator: noEmpty }]
  })


  const diaOpen = (xtype, e?) => {

    // console.log(e)

    if (e) {
      Object.assign(params.value, e)
    }

    type.value = xtype
    state.value = true
  }

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

  const onClosed = () => {
    params.value = EquipmentTemplate()
    formRef.value.resetFields()
  }

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

  // 隧道选择
  const tunnelSelect = (code) => {
    const selected = tunnels.value.find(item => item.tunnelCode === code)
    if (selected) {
      params.value.tunnelName = selected.tunnelName
    }
  }

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

    const isFirm = await pmsFirm()
    if (!isFirm) {
      return ElMessage.error('请完成数据填写！')
    }

    const quest = type.value === 'new' ? equipmentCreate : equipmentUpdate

    const res = await quest(params.value)

    if (res) {
      ElMessage.success(type.value === 'new' ? '创建成功！' : '更新成功！')
      
      state.value = false

      emits('update')
      
    }

  }

  onBeforeMount(async () => {

    const res = await getTunnelBasics({
      pageNo: 1,
      pageSize: 100
    })

    tunnels.value = res.list

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

  .container {
    padding: 0 16px;
    height: 600px;
    box-sizing: border-box;
  }
  
  .content {
    margin: 12px 24px;
    // padding: 0 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    &.disabled {
      pointer-events: none;
      :deep(.el-input) {
        background: rgba($color: #FFFFFF, $alpha: 0.2);
      }
    }
  }

  .upload-line {
    margin: 12px 24px;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    .upload {
      width: 148px;
      height: 148px;
      background: rgba($color: #000000, $alpha: 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

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