<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 class="grid-row" :gutter="0" >
              <a-col class="grid-col" :span="12" >
                <div class="build-block" >
                  <!-- grid_1646825117300 - 栅格布局 -->
                  <a-row 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: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>
                          <!--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:100px'}" :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 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: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>
                          <!--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:100px'}" :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_1652773516594 - 预抵时间 -->
                        <a-form-item :colon="true" :label-col="{'style':'width:100px'}" :wrapper-col="{'style':'width:auto; flex:1'}" :style="data_etaArriveTimeArr_record.options.hidden ? 'display: none' : 'display: flex'" >
                          <span slot="label">
                            <a-tooltip>
                              <span>预抵时间</span>
                            </a-tooltip>
                          </span>
                          <JDate v-if="!data_etaArriveTimeArr_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, 'etaArriveTimeArr')" v-decorator="[ 'etaArriveTimeArr', { initialValue: ['2022-11-04 16:41:48','2022-11-04 16:41:48'] }, ]" />
                        </a-form-item>
                      </div>
                    </a-col>
                    <a-col class="grid-col" :span="8" >
                    </a-col>
                  </a-row>
                </div>
                <div class="build-block" >
                  <!-- grid_1646825123562 - 栅格布局 -->
                  <a-row class="grid-row" :gutter="0" >
                    <a-col class="grid-col" :span="16" >
                      <div class="build-block" >
                        <!-- date_1652773550210 - 预离时间 -->
                        <a-form-item :colon="true" :label-col="{'style':'width:100px'}" :wrapper-col="{'style':'width:auto; flex:1'}" :style="data_etaDischargeTimeArr_record.options.hidden ? 'display: none' : 'display: flex'" >
                          <span slot="label">
                            <a-tooltip>
                              <span>预离时间</span>
                            </a-tooltip>
                          </span>
                          <JDate v-if="!data_etaDischargeTimeArr_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, 'etaDischargeTimeArr')" v-decorator="[ 'etaDischargeTimeArr', { initialValue: ['2022-11-04 16:41:48','2022-11-04 16:41:48'] }, ]" />
                        </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_undefined_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_undefined_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 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: 'TRANS_SHIPMENT',
          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_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_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_etaArriveTimeArr_record: {"icon":"icon-calendar","options":{"range":true,"placeholder":"请选择","clearable":true,"showTimeDefaultValue":true,"format":"YYYY-MM-DD HH:mm:ss","customClass":""},"model":"etaArriveTimeArr","label":"预抵时间","type":"date","key":"date_1652773516594"},
          data_etaDischargeTimeArr_record: {"icon":"icon-calendar","options":{"range":true,"placeholder":"请选择","clearable":true,"showTimeDefaultValue":true,"format":"YYYY-MM-DD HH:mm:ss","customClass":""},"model":"etaDischargeTimeArr","label":"预离时间","type":"date","key":"date_1652773550210"},
          data_buttonGroup_1646825307535_record: {'key':'buttonGroup_1646825307535','type':'buttonGroup','model':'buttonGroup_1646825307535','options':{'gutter':0,'hidden':false,'customClass':''}},
          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: [{"icon":"icon-write","options":{"filterOperations":["contains","notcontains","startswith","endswith","=","<>"],"type":"text","placeholder":"请输入","width":"120","customClass":""},"model":"vesselCName","label":"中文船名","type":"input","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","options":{"filterOperations":["contains","notcontains","startswith","endswith","=","<>"],"type":"text","placeholder":"请输入","width":"100","customClass":""},"model":"terminal","label":"作业码头","type":"input","key":"input_1652768729753"},{"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"},{"icon":"icon-button-remove","options":{"type":"primary","customClass":"","dynamicFun":"trans"},"model":"trans","label":"转船","type":"button","key":"button_1652768867314"}]
        }
      },
      methods: {
        dynamicFuncCustom(operation){
      if (operation == "handleSearch") {
          this.getData().then((values) => {
              const rpcParamsE = {}
              rpcParamsE.vesselCName = values.vesselCName
              rpcParamsE.vesselEName = values.vesselEName
              if (this.model.portId === 'I' && values.voyage != "") {
                  rpcParamsE.voyageI = values.voyage
              } else if(this.model.portId === 'E' && values.voyage != "") {
                  rpcParamsE.voyageE = values.voyage
              }
              rpcParamsE.terminal = values.terminal
              if (values.etaArriveTimeArr === '') {
                  rpcParamsE.etaArriveTimeBin = null
                  rpcParamsE.etaArriveTimeEnd = null
              } else {
                  rpcParamsE.etaArriveTimeBin = new Date(values.etaArriveTimeArr[0])
                  rpcParamsE.etaArriveTimeEnd = new Date(values.etaArriveTimeArr[1])
              }
              if (values.etaDischargeTimeArr === '') {
                  rpcParamsE.etaDischargeTimeBin = null
                  rpcParamsE.etaDischargeTimeEnd = null
              } else {
                  rpcParamsE.etaDischargeTimeBin = new Date(values.etaDischargeTimeArr[0])
                  rpcParamsE.etaDischargeTimeEnd = new Date(values.etaDischargeTimeArr[1])
              }
              rpcParamsE.portId = this.model.portId
              console.log(rpcParamsE)
              this.axios.post('voyageInfo/list', rpcParamsE).then((res) => {
                  if (res.code === '0000') {
                      const data = res.result.data
                      data.forEach(item => {
                          if (item.shipAgentType == '0') {
                              item.shipAgentType = "主代"
                          } else if (item.shipAgentType == '1') {
                              item.shipAgentType = "非主代"
                          }
                      })
                      this.setData({
                          voyageInfo: data
                      })
                      this.loading = false
                  }
              })
          })
      }
      if (operation == "reset") {
          this.resetFields(['vesselCName', 'vesselEName', 'voyage', 'terminal'])
          this.setData({
              etaArriveTimeArr: '',
              etaDischargeTimeArr: ''
          })
      }
  },
  handleBusinessCustom(operation){
      if (operation === 'close') {
          this.visible = false
      }
  },
  logEventCustom(value, key){
          if (value.event === 'onRowButtonClick' && value.dynamicFun == "trans") {
          this.$confirm({
              title: '请确认',
              content: '确定要转船吗？',
              okText: '确认',
              cancelText: '取消',
              onOk() {
                  this.confirmLoading = true
                  this.ctos3CommonApi('ifcsumYpService', 'transShipmentI', [this.model.ids,
                      this.model.tabType, value.data.id
                  ]).then((result) => {
                      if (result.responseData.statusCode === 0) {
                          this.$message.success('转船成功')
                          this.confirmLoading = false
                          this.visible = false
                          this.$emit("ok", 'trans')
                      } else {
                          this.$message.error('转船失败')
                          this.confirmLoading = false
                      }
                  }).catch(res => {
                      this.confirmLoading = false
                  })
              },
              onCancel() {},
          })
      }
  },
  callInMountedCustom(ctos3CommonApi, packageRpcParam){
          var nowdays = new Date();
      var year = nowdays.getFullYear();
      var month = nowdays.getMonth() + 1;
      if (month == 0) {
          month = 12;
          year = year - 1;
      }
      if (month < 10) {
          month = '0' + month;
      }
      var myDate = new Date(year, month, 0);
          var startDate = year + '-' + month + '-01';
          var endDate = year + '-' + month + '-' + myDate.getDate();
      this.setData({
          "etaArriveTime": [startDate, endDate],
          "etaDischargeTime": [startDate, endDate]
      })
      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>