<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="undefined" :form="form" @submit="handleSubmit" >
          <div class="build-block" >
            <!-- grid_1646825079017 - 栅格布局 -->
            <a-row v-if="!data_fsd_record.options.hidden" class="grid-row" :gutter="0" >
              <a-col class="grid-col" :span="12" >
                <div class="build-block" >
                  <!-- grid_1646825117300 - 栅格布局 -->
                  <a-row v-if="!data_gdf_record.options.hidden" class="grid-row" :gutter="0" >
                    <a-col class="grid-col" :span="12" >
                      <div class="build-block" >
                        <!-- select_1648001190710 - 中文船名 -->
                        <a-form-item :colon="true" :label-col="{'style':'width:80px'}" :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>
                          <!--dict-->
                          <!--model,joinSymbol,valueField,labelField,wheres,limit,order,orderColumn-->
                          <!--wheres-->
                          <!--column|operation|value%column|operation|value%...-->
                          <j-search-select-tag v-if="!data_vesselCName_record.options.hidden" style="width:100%" placeholder="请选择" :getFieldItemValue="getFieldItemValue" @change="handleChange($event, 'vesselCName')" @handleSelectChange= "handleSelectChange" v-decorator="[ 'vesselCName', { }, ]" :dict="`VesselInfo,/,vesselCName,vesselCName,,10,,`" />
                        </a-form-item>
                      </div>
                    </a-col>
                    <a-col class="grid-col" :span="12" >
                      <div class="build-block" >
                        <!-- input_1646825141248 - 航次 -->
                        <a-form-item :colon="true" :label-col="{'style':'width:80px'}" :wrapper-col="{'style':'width:auto; flex:1'}" :style="data_voyage_record.options.hidden ? 'display: none' : 'display: flex'" >
                          <span slot="label">
                            <a-tooltip>
                              <span>航次</span>
                            </a-tooltip>
                          </span>
                          <JInput ref="voyage" :recordModel="'voyage'" style="width:100%;" placeholder="请输入" type="text" :allowClear="true" @focus="handleFocus" @change="handleChange" @blur="handleBlur" @enter="handleEnter" v-decorator="[ 'voyage', { }, ]" />
                        </a-form-item>
                      </div>
                    </a-col>
                  </a-row>
                </div>
                <div class="build-block" >
                  <!-- grid_1646825119890 - 栅格布局 -->
                  <a-row v-if="!data_gr_record.options.hidden" class="grid-row" :gutter="0" >
                    <a-col class="grid-col" :span="12" >
                      <div class="build-block" >
                        <!-- select_1648001212460 - 英文船名 -->
                        <a-form-item :colon="true" :label-col="{'style':'width:80px'}" :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>
                          <!--dict-->
                          <!--model,joinSymbol,valueField,labelField,wheres,limit,order,orderColumn-->
                          <!--wheres-->
                          <!--column|operation|value%column|operation|value%...-->
                          <j-search-select-tag v-if="!data_vesselEName_record.options.hidden" style="width:100%" placeholder="请选择" :getFieldItemValue="getFieldItemValue" @change="handleChange($event, 'vesselEName')" @handleSelectChange= "handleSelectChange" v-decorator="[ 'vesselEName', { }, ]" :dict="`VesselInfo,/,vesselEName,vesselEName,,10,,`" />
                        </a-form-item>
                      </div>
                    </a-col>
                    <a-col class="grid-col" :span="12" >
                      <div class="build-block" >
                        <!-- select_1646825144798 - 作业码头 -->
                        <a-form-item :colon="true" :label-col="{'style':'width:80px'}" :wrapper-col="{'style':'width:auto; flex:1'}" :style="data_terminal_record.options.hidden ? 'display: none' : 'display: flex'" >
                          <span slot="label">
                            <a-tooltip>
                              <span>作业码头</span>
                            </a-tooltip>
                          </span>
                          <!--dict-->
                          <!--model,joinSymbol,valueField,labelField,wheres,limit,order,orderColumn-->
                          <!--wheres-->
                          <!--column|operation|value%column|operation|value%...-->
                          <j-search-select-tag v-if="!data_terminal_record.options.hidden" style="width:100%" placeholder="请选择" :getFieldItemValue="getFieldItemValue" @change="handleChange($event, 'terminal')" @handleSelectChange= "handleSelectChange" v-decorator="[ 'terminal', { }, ]" :dict="`BasTerminalCustoms,/,placeCod,cWorkPlaceStr,,50,,`" />
                        </a-form-item>
                      </div>
                    </a-col>
                  </a-row>
                </div>
              </a-col>
              <a-col class="grid-col" :span="12" >
                <div class="build-block" >
                  <!-- grid_1646825121726 - 栅格布局 -->
                  <a-row class="grid-row" :gutter="0" >
                    <a-col class="grid-col" :span="16" >
                      <div class="build-block" >
                        <!-- date_1654063522714 - 预抵时间 -->
                        <a-form-item :colon="true" :label-col="{'style':'width:80px'}" :wrapper-col="{'style':'width:auto; flex:1'}" :style="data_etaArriveTime_record.options.hidden ? 'display: none' : 'display: flex'" >
                          <span slot="label">
                            <a-tooltip>
                              <span>预抵时间</span>
                            </a-tooltip>
                          </span>
                          <JDate v-if="!data_etaArriveTime_record.options.hidden" :range="true" :placeholder="'请选择'" :format="'YYYY-MM-DD HH:mm:ss'" :width="'100%'" :clearable="true" style="width:100%" :parentDisabled="disabled" @change="handleChange($event, 'etaArriveTime')" v-decorator="[ 'etaArriveTime', { initialValue: ['2022-09-20 16:41:47','2022-12-19 16:41:47'] }, ]" />
                        </a-form-item>
                      </div>
                    </a-col>
                    <a-col class="grid-col" :span="8" >
                      <div class="build-block" >
                        <!-- select_1663581818814 - 完成状态 -->
                        <a-form-item :colon="true" :label-col="{'style':'width:80px'}" :wrapper-col="{'style':'width:auto; flex:1'}" :style="data_finishStatus_record.options.hidden ? 'display: none' : 'display: flex'" >
                          <span slot="label">
                            <a-tooltip>
                              <span>完成状态</span>
                            </a-tooltip>
                          </span>
                          <j-dict-select-tag v-if="!data_finishStatus_record.options.hidden" :options=" data_finishStatus_record.options.options " :dynamic="0" :dictCode="`undefined`" style="width:100%" placeholder="请选择" @change="handleChange($event, 'finishStatus')" v-decorator="[ 'finishStatus', { }, ]" />
                        </a-form-item>
                      </div>
                    </a-col>
                  </a-row>
                </div>
                <div class="build-block" >
                  <!-- grid_1646825123562 - 栅格布局 -->
                  <a-row v-if="!data_bd_record.options.hidden" class="grid-row" :gutter="0" >
                    <a-col class="grid-col" :span="16" >
                      <div class="build-block" >
                        <!-- date_1654063548990 - 预离时间 -->
                        <a-form-item :colon="true" :label-col="{'style':'width:80px'}" :wrapper-col="{'style':'width:auto; flex:1'}" :style="data_etaDischargeTime_record.options.hidden ? 'display: none' : 'display: flex'" >
                          <span slot="label">
                            <a-tooltip>
                              <span>预离时间</span>
                            </a-tooltip>
                          </span>
                          <JDate v-if="!data_etaDischargeTime_record.options.hidden" :range="true" :placeholder="'请选择'" :format="'YYYY-MM-DD HH:mm:ss'" :width="'100%'" :clearable="true" style="width:100%" :parentDisabled="disabled" @change="handleChange($event, 'etaDischargeTime')" v-decorator="[ 'etaDischargeTime', { initialValue: ['2022-09-20 16:41:47','2022-12-19 16:41:47'] }, ]" />
                        </a-form-item>
                      </div>
                    </a-col>
                    <a-col class="grid-col" :span="8" >
                      <div class="build-block" >
                        <!-- buttonGroup_1646825307535 - 按钮组 -->
                        <a-button-group v-if="!data_buttonGroup_1646825307535_record.options.hidden" class="grid-row" >
                          <div class="build-block" >
                            <!-- button_1646825310787 - 查询 -->
                            <a-form-item :wrapper-col="{'offset':0,'span':24}" :style="data_handleSearch_record.options.hidden ? 'display: none' : 'display: flex'" >
                              <a-button @click=" dynamicData['commonFunc']( 'handleSearch', {} ) " type="primary" :block="false" :style="{'verticalAlign':'middle','textAlign':'center'}" > 查询 </a-button>
                            </a-form-item>
                          </div>
                          <div class="build-block" >
                            <!-- button_1646825315414 - 重置 -->
                            <a-form-item :wrapper-col="{'offset':0,'span':24}" :style="data_reset_record.options.hidden ? 'display: none' : 'display: flex'" >
                              <a-button @click=" dynamicData['commonFunc']( 'reset', {} ) " type="primary" :block="false" :style="{'verticalAlign':'middle','textAlign':'center'}" > 重置 </a-button>
                            </a-form-item>
                          </div>
                        </a-button-group>
                      </div>
                    </a-col>
                  </a-row>
                </div>
              </a-col>
            </a-row>
          </div>
          <div class="build-block" >
            <!-- grid_1646825081607 - 栅格布局 -->
            <a-row v-if="!data_fd_record.options.hidden" class="grid-row" :gutter="0" >
              <a-col class="grid-col" :span="24" >
                <div class="build-block" >
                  <!-- batch_1646825362177 - 动态表格 -->
                  <a-form-item label="" :label-col="{}" :wrapper-col="{}" :style="{}" >
                    <KBatch v-if="!data_voyageInfo_record.options.hidden" ref="KBatch" style="width:100%" v-bind="data_voyageInfo_record.options" :recordKey="data_voyageInfo_record.key" :optionsKey="data_voyageInfo_record.options.key" :baseColumnConfigList="data_voyageInfo_BaseColumnList" :model="'voyageInfo'" :config="config" :parentDisabled="disabled" :dynamicData="dynamicData" :selectMode="selectMode" :selectDeferred="selectDeferred" :excelName="excelName" :pageId="pageId" @invokeGetFormData="invokeGetFormData" @change="handleChange($event, 'voyageInfo')" @logEvent="logEvent($event, 'voyageInfo', data_voyageInfo_record)" v-decorator="[ 'voyageInfo', { }, ]" />
                  </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: 'DZ_VOYAGE_INFO_SELECT',
          operateBizBtn: [{'hidden':false,'icon':'','permission':'','label':'关闭','sort':0,'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_fsd_record: {'key':'grid_1646825079017','type':'grid','model':'fsd','options':{'gutter':0,'selfLayoutType':'Grid','hidden':false,'customClass':'','labelWidth':60,'fractionDigits':2}},
          data_gdf_record: {'key':'grid_1646825117300','type':'grid','model':'gdf','options':{'gutter':0,'selfLayoutType':'Grid','hidden':false,'customClass':'','labelWidth':60,'fractionDigits':2}},
          data_vesselCName_record: {"icon":"icon-xiala","options":{"options":[],"dynamic":1,"placeholder":"请选择","dynamicKey":"VesselInfo,/,vesselCName,vesselCName,,10,,","customClass":""},"model":"vesselCName","label":"中文船名","type":"select","key":"select_1648001190710"},
          data_voyage_record: {"icon":"icon-write","options":{"filterOperations":["contains","notcontains","startswith","endswith","=","<>"],"type":"text","placeholder":"请输入","clearable":true,"customClass":""},"model":"voyage","label":"航次","type":"input","key":"input_1646825141248"},
          data_gr_record: {'key':'grid_1646825119890','type':'grid','model':'gr','options':{'gutter':0,'selfLayoutType':'Grid','hidden':false,'customClass':'','labelWidth':60,'fractionDigits':2}},
          data_vesselEName_record: {"icon":"icon-xiala","options":{"options":[],"dynamic":1,"placeholder":"请选择","dynamicKey":"VesselInfo,/,vesselEName,vesselEName,,10,,","customClass":""},"model":"vesselEName","label":"英文船名","type":"select","key":"select_1648001212460"},
          data_terminal_record: {"icon":"icon-xiala","options":{"options":[],"dynamic":1,"placeholder":"请选择","dynamicKey":"BasTerminalCustoms,/,placeCod,cWorkPlaceStr,,50,,","customClass":""},"model":"terminal","label":"作业码头","type":"select","key":"select_1646825144798"},
          data_etaArriveTime_record: {"icon":"icon-calendar","options":{"range":true,"rangeDefaultType":"day","beginDefaultValue":-45,"placeholder":"请选择","clearable":true,"showTimeDefaultValue":true,"endDefaultValue":45,"format":"YYYY-MM-DD HH:mm:ss","customClass":""},"model":"etaArriveTime","label":"预抵时间","type":"date","key":"date_1654063522714"},
          data_finishStatus_record: {"options":{"options":[{"label":"是","value":"Y"},{"label":"否","value":"N"}],"placeholder":"请选择"},"model":"finishStatus","label":"完成状态","type":"select","key":"select_1663581818814"},
          data_bd_record: {'key':'grid_1646825123562','type':'grid','model':'bd','options':{'gutter':0,'selfLayoutType':'Grid','hidden':false,'customClass':'','labelWidth':60,'fractionDigits':2}},
          data_etaDischargeTime_record: {"icon":"icon-calendar","options":{"range":true,"rangeDefaultType":"day","beginDefaultValue":-45,"placeholder":"请选择","clearable":true,"showTimeDefaultValue":true,"endDefaultValue":45,"format":"YYYY-MM-DD HH:mm:ss","customClass":""},"model":"etaDischargeTime","label":"预离时间","type":"date","key":"date_1654063548990"},
          data_buttonGroup_1646825307535_record: {'key':'buttonGroup_1646825307535','type':'buttonGroup','model':'buttonGroup_1646825307535','options':{'gutter':0,'hidden':false,'customClass':''}},
          data_handleSearch_record: {"icon":"icon-button-remove","options":{"type":"primary","customClass":"","dynamicFun":"handleSearch"},"model":"handleSearch","label":"查询","type":"button","key":"button_1646825310787"},
          data_reset_record: {"icon":"icon-button-remove","options":{"type":"primary","customClass":"","dynamicFun":"reset"},"model":"reset","label":"重置","type":"button","key":"button_1646825315414"},
          data_fd_record: {'key':'grid_1646825081607','type':'grid','model':'fd','options':{'gutter':0,'selfLayoutType':'Grid','hidden':false,'customClass':'','labelWidth':60,'fractionDigits':2}},
          data_voyageInfo_record: {"options":{"selectType":"none","height":"60vh","lazyNoPaging":true,"hasPaging":false,"key":"id","customClass":""},"model":"voyageInfo","label":"动态表格","type":"batch","key":"batch_1646825362177"},
          data_voyageInfo_BaseColumnList: [{"label":"ID","type":"input","options":{"type":"text","placeholder":"请输入","formatPic":true,"width":"120"},"model":"id","key":"input_1662275916042"},{"icon":"icon-write","label":"中文 船名","type":"input","options":{"filterOperations":["contains","notcontains","startswith","endswith","=","<>"],"type":"text","placeholder":"请输入","width":"120","customClass":""},"model":"vesselCName","key":"input_1646825353623"},{"icon":"icon-write","options":{"filterOperations":["contains","notcontains","startswith","endswith","=","<>"],"type":"text","placeholder":"请输入","width":"120","customClass":""},"model":"vesselEName","label":"英文船名","type":"input","key":"input_1646825358457"},{"icon":"icon-write","options":{"filterOperations":["contains","notcontains","startswith","endswith","=","<>"],"type":"text","placeholder":"请输入","width":"120","customClass":""},"model":"shipAgentType","label":"船舶代理性质","type":"input","key":"input_1652768785255"},{"icon":"icon-write","label":"作业码头","type":"input","options":{"filterOperations":["contains","notcontains","startswith","endswith","=","<>"],"type":"text","placeholder":"请输入","width":"100","customClass":""},"model":"terminal","key":"input_1652768729753"},{"icon":"icon-write","label":"作业码头","type":"input","options":{"hidden":true,"filterOperations":["contains","notcontains","startswith","endswith","=","<>"],"type":"text","placeholder":"请输入","width":"100","customClass":""},"model":"terminalCode","key":"input_1659338031104"},{"icon":"icon-write","options":{"filterOperations":["contains","notcontains","startswith","endswith","=","<>"],"type":"text","placeholder":"请输入","width":"100","customClass":""},"model":"voyageI","label":"进口航次","type":"input","key":"input_1646825359050"},{"icon":"icon-write","options":{"filterOperations":["contains","notcontains","startswith","endswith","=","<>"],"type":"text","placeholder":"请输入","width":"100","customClass":""},"model":"voyageE","label":"出口航次","type":"input","key":"input_1646872707476"},{"icon":"icon-calendar","options":{"placeholder":"请选择","width":"140","customClass":""},"model":"etaArriveTime","label":"预抵时间","type":"date","key":"date_1646825497898"},{"icon":"icon-calendar","options":{"placeholder":"请选择","width":"140","customClass":""},"model":"etaDischargeTime","label":"预离时间","type":"date","key":"date_1646825502203"},{"icon":"icon-calendar","options":{"placeholder":"请选择","width":"140","customClass":""},"model":"arriveTime","label":"靠泊时间","type":"date","key":"date_1647669115989"},{"icon":"icon-calendar","options":{"placeholder":"请选择","width":"140","customClass":""},"model":"dischargeTime","label":"离港时间","type":"date","key":"date_1647669121612"},{"icon":"icon-write","options":{"filterOperations":["contains","notcontains","startswith","endswith","=","<>"],"type":"text","placeholder":"请输入","width":"120","customClass":""},"model":"lineCode","label":"公司航线代码","type":"input","key":"input_1646825491029"},{"icon":"icon-write","options":{"filterOperations":["contains","notcontains","startswith","endswith","=","<>"],"type":"text","placeholder":"请输入","width":"120","customClass":""},"model":"lineName","label":"公司航线名称","type":"input","key":"input_1646825541983"}]
        }
      },
      methods: {
        dynamicFuncCustom(operation){
      if (operation == "handleSearch") {
          const param = {}
          param.taskType = this.model.taskType
          param.ieFlag = this.model.ieFlag
          this.getData().then((values) => {
              param.pageSize = 1000
              if (values.vesselCName != undefined) {
                  param.vesselCName = values.vesselCName
              }
              if (values.vesselEName != undefined) {
                  param.vesselEName = values.vesselEName
              }
              if (values.voyage != '') {
                  if (this.model.ieFlag == 'I') {
                      param.voyageI = values.voyage
                  } else {
                      param.voyageE = values.voyage
                  }
              }
              if (values.terminal != undefined) {
                  param.terminal = values.terminal
              }
              if (values.etaArriveTime != "") {
                  param.etaArriveTime = [new Date(values.etaArriveTime[0]), new Date(values
                      .etaArriveTime[1])]
              }
              if (values.etaDischargeTime != "") {
                  param.etaDischargeTime = [new Date(values.etaDischargeTime[0]), new Date(values
                      .etaDischargeTime[1])]
              }
              param.finishStatus = values.finishStatus
          })
          if (this.model.ieFlag == 'I') {
              this.axios.post('/billBooking/query/bill', param).then(res => {
                  if (res.code === "0000") {
                      const result = res.result.data
                      result.forEach(item => {
                          if (item.shipAgentType == '0') {
                              item.shipAgentType = "主代"
                          } else if (item.shipAgentType == '1') {
                              item.shipAgentType = "非主代"
                          }
                      })
                      this.setData({
                          'voyageInfo': result,
                      })
                  }
              })
          } else {
              this.axios.post('/billBooking/query/billE', param).then(res => {
                  if (res.code === "0000") {
                      const result = res.result.data
                      result.forEach(item => {
                          if (item.shipAgentType == '0') {
                              item.shipAgentType = "主代"
                          } else if (item.shipAgentType == '1') {
                              item.shipAgentType = "非主代"
                          }
                      })
                      this.setData({
                          'voyageInfo': result,
                      })
                  }
              })
          }
      }
      if (operation == "reset") {
          this.resetFields(['vesselCName', 'vesselEName', 'voyage', 'terminal'])
          this.setData({
              etaArriveTime: '',
              etaDischargeTime: '',
              finishStatus: ''
          })
      }
  },
  handleBusinessCustom(operation){
      if (operation === 'close') {
          this.visible = false
      }
  },
  logEventCustom(value, key){
      if (value.event === 'onRowDblClick' && key === 'voyageInfo') {
          this.voyageInfo = value.data
          this.$emit('ok', "selectVoyage")
          this.visible = false
      }
                      },
  callInMountedCustom(ctos3CommonApi, packageRpcParam){
      this.$nextTick(() => {
          const param = {}
          param.taskType = this.model.taskType
          param.ieFlag = this.model.ieFlag
          this.getData().then((values) => {
              if (values.vesselCName != undefined) {
                  param.vesselCName = values.vesselCName
              }
              if (values.vesselEName != undefined) {
                  param.vesselEName = values.vesselEName
              }
              if (values.voyage != '') {
                  param.voyageI = values.voyage
              }
              if (values.terminal != undefined) {
                  param.terminal = values.terminal
              }
              if (values.etaArriveTime != "" && values.etaArriveTime != undefined) {
                  param.etaArriveTime = [new Date(values.etaArriveTime[0]), new Date(values
                      .etaArriveTime[1])]
              }
              if (values.etaDischargeTime != "" && values.etaDischargeTime != undefined) {
                  param.etaDischargeTime = [new Date(values.etaDischargeTime[0]), new Date(
                      values.etaDischargeTime[1])]
              }
          })
          this.axios.post('/billBooking/query/bill', param).then(res => {
              if (res.code === "0000") {
                  const result = res.result.data
                  result.forEach(item => {
                      if (item.shipAgentType == '0') {
                          item.shipAgentType = "主代"
                      } else if (item.shipAgentType == '1') {
                          item.shipAgentType = "非主代"
                      }
                  })
                  this.setData({
                      'voyageInfo': result,
                  })
              }
          })
      })
  },
  handleDialogBusinessCustom(operation, data){
  
  }
      }
    }
    </script>