<template>
  <div class="container">
    <i class="dialog-close" @click="$emit('closeDialog')"></i>
    <span class="dialog-title">临时航班详情</span>
    <form class="form">
      <div>
        <label for="sqdw" class="form-label">申请单位</label>
        <input name="sqdw" class="form-input" type="text" v-model="form.sqdw" disabled>
      </div>
      <div>
        <label for="hbxz" class="form-label">航班性质</label>
        <span v-for="item in radioDataHbxz" :key="item.value" class="form-radio">
          <input
            :value="item.value"
            :checked="form.hbxz===item.value"
            name="hbxz"
            :id="item.value"
            type="radio"
            disabled
          >
          <label class="radio-label" :for="item.value">{{item.name}}</label>
        </span>
      </div>
      <div>
        <label for="ycdw" class="form-label">用船单位</label>
        <input name="ycdw" class="form-input" type="text" v-model="form.ycdw" disabled>
      </div>
      <div>
        <label for="cm" class="form-label">船名</label>
        <input name="cm" class="form-input" type="text" v-model="form.cm" disabled>
      </div>
      <div>
        <label for="rs" class="form-label">人数</label>
        <input name="rs" class="form-input" type="text" v-model="form.rs" disabled>
      </div>
      <div>
        <label for="sj" class="form-label">时间</label>
        <input name="sj" class="form-input" type="text" v-model="form.sj" disabled>
      </div>
      <div>
        <label for="hx" class="form-label">航线</label>
        <span v-for="item in radioDataHx" :key="item.value" class="form-radio">
          <input
            :value="item.value"
            :checked="form.hx===item.value"
            name="hx"
            :id="item.value"
            type="radio"
            disabled
          >
          <label class="radio-label" :for="item.value">{{item.name}}</label>
        </span>
        <label for="qthx" class="form-label-s">其他航线:</label>
        <input type="text" class="form-input form-input-s" v-model="form.qthx" disabled>
      </div>
      <div>
        <label for="tkmt" class="form-label">停靠码头</label>
        <input name="tkmt" class="form-input" type="text" v-model="form.tkmt" disabled>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'LshbDialog',
}
</script>

<script setup>
  
  import { onMounted, reactive, ref } from 'vue'
  import { useNow, useDateFormat } from '@vueuse/core'

  const props = defineProps(['lshb-data'])


  onMounted(() => {
    form.cm = props.lshbData.name
    form.sqdw = props.lshbData.ent
    form.ycdw = props.lshbData.ent
    form.hbxz = props.lshbData.type
  })

  const form = reactive({
    sqdw: '',
    hbxz: '商务',
    ycdw: '',
    cm: '',
    rs: '120人',
    sj: useDateFormat(useNow(), 'YYYY-MM-DD').value + '  19:00-20:00',
    hx: 'jhyhx',
    qthx: '',
    tkmt: '十六铺一号码头3泊位'

  })

  const radioDataHbxz = [
    { value: '商务', name: '商务' },
    { value: '婚庆', name: '婚庆' },
    { value: '个人', name: '个人' },
    { value: '公务接待', name: '公务接待' },
  ]

  const radioDataHx = [
    { value: 'sbhx', name: '世博航线' },
    { value: 'jhyhx', name: '精华游航线' },
  ]


</script>

<style lang="scss" scoped>
.container {
  position: absolute;
  top: 30vh;
  left: 37vw;
  width: 476px;
  height: 414px;
  background: url('@/assets/imgs/lshb-bg.png') no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 26px 0 22px 42px;
  z-index: 9;
  text-align: left;

  .dialog-title {
    display: block;
    margin-bottom: 30px;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0px 3px 5px rgba(0,38,76,0.4);
  }

  .form {
    text-align: left;

    .disabled {
      cursor: not-allowed;
      opacity: 0.8;
    }

    input[type="radio"]:disabled:checked {
      appearance: none;
      background-color: #0075ff;
      border: 1px solid #ccc;
      width: 13px;
      height: 13px;
      border-radius: 50%;
    }

    &>div {
      margin-bottom: 12px;
    }

    .form-label {
      display: inline-block;
      width: 56px;
      height: 14px;
      font-size: 14px;
      text-shadow: 0px 3px 5px rgba(0,38,76,0.4);
      text-align-last: justify;
    }

    .form-label-s {
      display: inline-block;
      width: fit-content;
      height: 13px;
      font-size: 13px;
      margin-left: 20px;
    }

    .radio-label {
      font-size: 13px;
    }
    .form-input {
      box-sizing: border-box;
      width: 200px;
      height: 26px;
      outline: none;
      border: none;
      background-color: #1A5482;
      font-size: 13px;
      color: #e3e3e3;
      padding: 0 5px;
      margin-left: 12px;
    }

    .form-input-s {
      width: 81px;
    }

    .form-radio {
      margin-left: 12px;
      input {
        margin-right: 4px;
      }
    }
    
  }

}
</style>
