<template>
  <div>
    <drag-modal :title="dialogTitle" :width="dialogWidth" :visible="visible" :isFooter="operateBizBtn.length > 0 ? true : false" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleClose" :canClickMask="canClickMask" :leftPosition="leftPosition" :topPosition="topPosition" :initPosition="initPosition" okText="保存" cancelText="关闭" wrapClassName="ant-modal-cust-warp" style="top: 5%; height: 70%; overflow-y: hidden" >
    <a-spin :spinning="confirmLoading" size="large">
      <a-config-provider :locale="locale">
        <a-form class="k-form-build-9136076486841527" layout="horizontal" :hideRequiredMark="false" :form="form" @submit="handleSubmit" >
          <div class="build-block" >
            <!-- grid_1627364786488 - 栅格布局 -->
            <a-row class="grid-row" :gutter="10" >
              <a-col class="grid-col" :span="8" >
                <div class="build-block" >
                  <!-- input_1627364978231 - 英文船名 -->
                  <a-form-item :label-col="{'style':'width:100px'}" :wrapper-col="{'style':'width:auto; flex:1'}" :style="data_vesselEName_record.options.hidden ? 'display: none' : 'display: flex'" >
                    <span slot="label">
                      <a-tooltip>
                        <span>英文船名</span>
                      </a-tooltip>
                    </span>
                    <JInput ref="vesselEName" :recordModel="'vesselEName'" style="width:100%;" :disabled="true" placeholder="" type="text" :readOnly="true" @focus="handleFocus" @change="handleChange" @blur="handleBlur" @enter="handleEnter" v-decorator="[ 'vesselEName', { rules: [{'message':'必填项','required':false}], validateTrigger: 'blur' }, ]" />
                  </a-form-item>
                </div>
              </a-col>
              <a-col class="grid-col" :span="8" >
                <div class="build-block" >
                  <!-- input_1627365343806 - 中文船名 -->
                  <a-form-item :label-col="{'style':'width:100px'}" :wrapper-col="{'style':'width:auto; flex:1'}" :style="data_vesselCName_record.options.hidden ? 'display: none' : 'display: flex'" >
                    <span slot="label">
                      <a-tooltip>
                        <span>中文船名</span>
                      </a-tooltip>
                    </span>
                    <JInput ref="vesselCName" :recordModel="'vesselCName'" style="width:100%;" :disabled="true" placeholder="" type="text" :readOnly="true" @focus="handleFocus" @change="handleChange" @blur="handleBlur" @enter="handleEnter" v-decorator="[ 'vesselCName', { rules: [{'message':'必填项','required':false}], validateTrigger: 'blur' }, ]" />
                  </a-form-item>
                </div>
              </a-col>
              <a-col class="grid-col" :span="8" >
                <div class="build-block" >
                  <!-- input_1627365440536 - MMSI -->
                  <a-form-item :label-col="{'style':'width:100px'}" :wrapper-col="{'style':'width:auto; flex:1'}" :style="data_mmsi_record.options.hidden ? 'display: none' : 'display: flex'" >
                    <span slot="label">
                      <a-tooltip>
                        <span>MMSI</span>
                      </a-tooltip>
                    </span>
                    <JInput ref="mmsi" :recordModel="'mmsi'" style="width:100%;" :disabled="true" placeholder="" type="text" @focus="handleFocus" @change="handleChange" @blur="handleBlur" @enter="handleEnter" v-decorator="[ 'mmsi', { rules: [{'message':'必填项','required':false}], validateTrigger: 'blur' }, ]" />
                  </a-form-item>
                </div>
              </a-col>
            </a-row>
          </div>
          <div class="build-block" >
            <!-- grid_1627365603444 - 栅格布局 -->
            <a-row class="grid-row" :gutter="10" >
              <a-col class="grid-col" :span="8" >
                <div class="build-block" >
                  <!-- input_1627365438536 - UN代码 -->
                  <a-form-item :label-col="{'style':'width:100px'}" :wrapper-col="{'style':'width:auto; flex:1'}" :style="data_vesselCode_record.options.hidden ? 'display: none' : 'display: flex'" >
                    <span slot="label">
                      <a-tooltip>
                        <span>UN代码</span>
                      </a-tooltip>
                    </span>
                    <JInput ref="vesselCode" :recordModel="'vesselCode'" style="width:100%;" :disabled="true" placeholder="" type="text" @focus="handleFocus" @change="handleChange" @blur="handleBlur" @enter="handleEnter" v-decorator="[ 'vesselCode', { rules: [{'message':'必填项','required':false}], validateTrigger: 'blur' }, ]" />
                  </a-form-item>
                </div>
              </a-col>
              <a-col class="grid-col" :span="8" >
                <div class="build-block" >
                  <!-- input_1627365496087 - IMO代码 -->
                  <a-form-item :label-col="{'style':'width:100px'}" :wrapper-col="{'style':'width:auto; flex:1'}" :style="data_imo_record.options.hidden ? 'display: none' : 'display: flex'" >
                    <span slot="label">
                      <a-tooltip>
                        <span>IMO代码</span>
                      </a-tooltip>
                    </span>
                    <JInput ref="imo" :recordModel="'imo'" style="width:100%;" :disabled="true" placeholder="" type="text" @focus="handleFocus" @change="handleChange" @blur="handleBlur" @enter="handleEnter" v-decorator="[ 'imo', { rules: [{'message':'必填项','required':false}], validateTrigger: 'blur' }, ]" />
                  </a-form-item>
                </div>
              </a-col>
              <a-col class="grid-col" :span="8" >
                <div class="build-block" >
                  <!-- input_1627365506135 - 航线进口操作员 -->
                  <a-form-item :label-col="{'style':'width:100px'}" :wrapper-col="{'style':'width:auto; flex:1'}" :style="data_hanDlerUserName_record.options.hidden ? 'display: none' : 'display: flex'" >
                    <span slot="label">
                      <a-tooltip>
                        <span>航线进口操作员</span>
                      </a-tooltip>
                    </span>
                    <JInput ref="hanDlerUserName" :recordModel="'hanDlerUserName'" style="width:100%;" :disabled="true" placeholder="" type="text" @focus="handleFocus" @change="handleChange" @blur="handleBlur" @enter="handleEnter" v-decorator="[ 'hanDlerUserName', { rules: [{'message':'必填项','required':false}], validateTrigger: 'blur' }, ]" />
                  </a-form-item>
                </div>
              </a-col>
            </a-row>
          </div>
          <div class="build-block" >
            <!-- grid_1627365604599 - 栅格布局 -->
            <a-row class="grid-row" :gutter="10" >
              <a-col class="grid-col" :span="8" >
                <div class="build-block" >
                  <!-- input_1627365439552 - 船长联系人 -->
                  <a-form-item :label-col="{'style':'width:100px'}" :wrapper-col="{'style':'width:auto; flex:1'}" :style="data_captainName_record.options.hidden ? 'display: none' : 'display: flex'" >
                    <span slot="label">
                      <a-tooltip>
                        <span>船长联系人</span>
                      </a-tooltip>
                    </span>
                    <JInput ref="captainName" :recordModel="'captainName'" style="width:100%;" :disabled="true" placeholder="" type="text" @focus="handleFocus" @change="handleChange" @blur="handleBlur" @enter="handleEnter" v-decorator="[ 'captainName', { rules: [{'message':'必填项','required':false}], validateTrigger: 'blur' }, ]" />
                  </a-form-item>
                </div>
              </a-col>
              <a-col class="grid-col" :span="8" >
                <div class="build-block" >
                  <!-- input_1627365496996 - 船长联系方式 -->
                  <a-form-item :label-col="{'style':'width:100px'}" :wrapper-col="{'style':'width:auto; flex:1'}" :style="data_captainTel_record.options.hidden ? 'display: none' : 'display: flex'" >
                    <span slot="label">
                      <a-tooltip>
                        <span>船长联系方式</span>
                      </a-tooltip>
                    </span>
                    <JInput ref="captainTel" :recordModel="'captainTel'" style="width:100%;" :disabled="true" placeholder="" type="text" @focus="handleFocus" @change="handleChange" @blur="handleBlur" @enter="handleEnter" v-decorator="[ 'captainTel', { rules: [{'message':'必填项','required':false}], validateTrigger: 'blur' }, ]" />
                  </a-form-item>
                </div>
              </a-col>
              <a-col class="grid-col" :span="8" >
                <div class="build-block" >
                  <!-- input_1627365505115 - 航线出口操作员 -->
                  <a-form-item :label-col="{'style':'width:100px'}" :wrapper-col="{'style':'width:auto; flex:1'}" :style="data_exportUserName_record.options.hidden ? 'display: none' : 'display: flex'" >
                    <span slot="label">
                      <a-tooltip>
                        <span>航线出口操作员</span>
                      </a-tooltip>
                    </span>
                    <JInput ref="exportUserName" :recordModel="'exportUserName'" style="width:100%;" :disabled="true" placeholder="" type="text" @focus="handleFocus" @change="handleChange" @blur="handleBlur" @enter="handleEnter" v-decorator="[ 'exportUserName', { rules: [{'message':'必填项','required':false}], validateTrigger: 'blur' }, ]" />
                  </a-form-item>
                </div>
              </a-col>
            </a-row>
          </div>
          <div class="build-block" >
            <!-- grid_1627365605814 - 栅格布局 -->
            <a-row class="grid-row" :gutter="10" >
              <a-col class="grid-col" :span="8" >
                <div class="build-block" >
                  <!-- input_1627365572944 - 航线代码 -->
                  <a-form-item :label-col="{'style':'width:100px'}" :wrapper-col="{'style':'width:auto; flex:1'}" :style="data_lineCode_record.options.hidden ? 'display: none' : 'display: flex'" >
                    <span slot="label">
                      <a-tooltip>
                        <span>航线代码</span>
                      </a-tooltip>
                    </span>
                    <JInput ref="lineCode" :recordModel="'lineCode'" style="width:100%;" :disabled="true" placeholder="" type="text" @focus="handleFocus" @change="handleChange" @blur="handleBlur" @enter="handleEnter" v-decorator="[ 'lineCode', { rules: [{'message':'必填项','required':false}], validateTrigger: 'blur' }, ]" />
                  </a-form-item>
                </div>
              </a-col>
              <a-col class="grid-col" :span="8" >
                <div class="build-block" >
                  <!-- input_1627365497893 - 航线名称 -->
                  <a-form-item :label-col="{'style':'width:100px'}" :wrapper-col="{'style':'width:auto; flex:1'}" :style="data_lineName_record.options.hidden ? 'display: none' : 'display: flex'" >
                    <span slot="label">
                      <a-tooltip>
                        <span>航线名称</span>
                      </a-tooltip>
                    </span>
                    <JInput ref="lineName" :recordModel="'lineName'" style="width:100%;" :disabled="true" placeholder="" type="text" @focus="handleFocus" @change="handleChange" @blur="handleBlur" @enter="handleEnter" v-decorator="[ 'lineName', { rules: [{'message':'必填项','required':false}], validateTrigger: 'blur' }, ]" />
                  </a-form-item>
                </div>
              </a-col>
              <a-col class="grid-col" :span="8" >
                <div class="build-block" >
                  <!-- input_1659167398657 - 航次ID -->
                  <a-form-item :label-col="{'style':'width:100px'}" :wrapper-col="{'style':'width:auto; flex:1'}" :style="data_voyageId_record.options.hidden ? 'display: none' : 'display: flex'" >
                    <span slot="label">
                      <a-tooltip>
                        <span>航次ID</span>
                      </a-tooltip>
                    </span>
                    <JInput ref="voyageId" :recordModel="'voyageId'" style="width:100%;" :disabled="true" placeholder="" type="text" @focus="handleFocus" @change="handleChange" @blur="handleBlur" @enter="handleEnter" v-decorator="[ 'voyageId', { rules: [{'message':'必填项','required':false}], validateTrigger: 'blur' }, ]" />
                  </a-form-item>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-form>
      </a-config-provider>
    </a-spin>
    <template slot="footer">
      <a-button v-for="(item, index) in operateBizBtn" :key="index" :type="item.type ? item.type : 'primary'" :icon="item.icon" @click="handleBusiness(item.operation, item)" >{{ item.label }}</a-button >
    </template>
  </drag-modal>
  </div>
  </template>
  
    <script>
    import baseModalMixin from './baseModalMixin'
    import formBuildMixin from './formBuildMixin'
  
    export default {
      mixins: [formBuildMixin, baseModalMixin],
      data() {
        return {
          pageId: 'VOYAGE_INFO_SHOW',
          operateBizBtn: [{'hidden':false,'icon':'close-circle','permission':'','label':'关闭','sort':1,'type':'primary','params':[],'displayTab':'','displayMode':'flat','hotKey':'','operationMethod':'','operation':'close','direction':'right'}],
          dialogTitle: '',
          dialogServiceName: 'codeService',
          dialogWidth: '40%',
          dialogBaseCodeType: '',
          dialogModalType: 'dialog',
          dialogUrl: {'add':'save','update':'updateTemplateById'},
  
          data_vesselEName_record: {"icon":"icon-write","options":{"type":"text","readonly":true,"disabled":true,"placeholder":""},"model":"vesselEName","rules":[{"message":"必填项","required":false}],"label":"英文船名","type":"input","key":"input_1627364978231"},
          data_vesselCName_record: {"icon":"icon-write","options":{"type":"text","readonly":true,"disabled":true,"placeholder":""},"model":"vesselCName","rules":[{"message":"必填项","required":false}],"label":"中文船名","type":"input","key":"input_1627365343806"},
          data_mmsi_record: {"icon":"icon-write","options":{"type":"text","disabled":true,"placeholder":""},"model":"mmsi","rules":[{"message":"必填项","required":false}],"label":"MMSI","type":"input","key":"input_1627365440536"},
          data_vesselCode_record: {"icon":"icon-write","options":{"type":"text","disabled":true,"placeholder":""},"model":"vesselCode","rules":[{"message":"必填项","required":false}],"label":"UN代码","type":"input","key":"input_1627365438536"},
          data_imo_record: {"icon":"icon-write","options":{"type":"text","disabled":true,"placeholder":""},"model":"imo","rules":[{"message":"必填项","required":false}],"label":"IMO代码","type":"input","key":"input_1627365496087"},
          data_hanDlerUserName_record: {"icon":"icon-write","options":{"type":"text","disabled":true,"placeholder":""},"model":"hanDlerUserName","rules":[{"message":"必填项","required":false}],"label":"航线进口操作员","type":"input","key":"input_1627365506135"},
          data_captainName_record: {"icon":"icon-write","options":{"type":"text","disabled":true,"placeholder":""},"model":"captainName","rules":[{"message":"必填项","required":false}],"label":"船长联系人","type":"input","key":"input_1627365439552"},
          data_captainTel_record: {"icon":"icon-write","options":{"type":"text","disabled":true,"placeholder":""},"model":"captainTel","rules":[{"message":"必填项","required":false}],"label":"船长联系方式","type":"input","key":"input_1627365496996"},
          data_exportUserName_record: {"icon":"icon-write","options":{"type":"text","disabled":true,"placeholder":""},"model":"exportUserName","rules":[{"message":"必填项","required":false}],"label":"航线出口操作员","type":"input","key":"input_1627365505115"},
          data_lineCode_record: {"icon":"icon-write","options":{"type":"text","disabled":true,"placeholder":""},"model":"lineCode","rules":[{"message":"必填项","required":false}],"label":"航线代码","type":"input","key":"input_1627365572944"},
          data_lineName_record: {"icon":"icon-write","options":{"type":"text","disabled":true,"placeholder":""},"model":"lineName","rules":[{"message":"必填项","required":false}],"label":"航线名称","type":"input","key":"input_1627365497893"},
          data_voyageId_record: {"icon":"icon-write","options":{"type":"text","disabled":true,"placeholder":""},"model":"voyageId","rules":[{"message":"必填项","required":false}],"label":"航次ID","type":"input","key":"input_1659167398657"}
        }
      },
      methods: {
        callInMountedCustom(ctos3CommonApi, packageRpcParam){
      this.axios.get('/billBooking/getUN/' + this.vesselCode + '/' + this.voyageId).then((
          res) => {
          this.setData(res.result)
      })
  },
  handleBusinessCustom(operation){
      if (operation === 'close') {
          this.visible=false
          
      }
  },
  dynamicFuncCustom(operation){
  if(operation==='test'){
      console.log("11111")
  }
  }
      }
    }
    </script>