<template>
  <div class="port-query-box">
    <div class="search-btn flex">
      <el-button :class="isCode?'is-search': ''" @click="changeChoose(true)">
        {{ $t('message.containerQuery.containerQuery') }}
      </el-button>
      <el-button :class="isCode? '': 'is-search'" @click="changeChoose(false)">
        {{ $t('message.containerQuery.billOfLading') }}
      </el-button>
    </div>
    <div class="search-box">
      <span style="width: 6.25rem">{{
          isCode ? $t('message.containerQuery.containerBoxNumber') : $t('message.containerQuery.tdCode')
        }}：</span>
      <el-input disabled v-model="formData.code" clearable></el-input>
      <div @click="searchInfo" class="search"><i class="el-icon-search"></i></div>
    </div>

    <div class="info">
      <div v-if="isCode"> <!-- 集装箱信息-->
        <div class="line"></div>
        <div>
          <div><span style="margin-right: 1.25rem">{{
              $t('message.containerQuery.containerBoxNumber')
            }}:</span>{{ containerInfoTest.number }}
          </div>
          <div><span
            style="margin-right: 1.25rem">{{ $t('message.containerQuery.isoCode') }}:</span>{{ containerInfoTest.isoCode }}
          </div>
        </div>
        <vxe-grid border
                  ref="table-gird"
                  align="center"
                  resizable
                  :data="containerInfoTest.value"
                  :columns="columnsOptions"
                  max-height="500">
          <template #num1_header>
            <span>{{ $t('message.containerQuery.containerPosName') }}</span>
          </template>
          <template #num2_header>
            <span>{{ $t('message.containerQuery.eventDescription') }}</span>
          </template>
          <template #num3_header>
            <span>{{ $t('message.containerQuery.eventStatus') }}</span>
          </template>
          <template #num4_header>
            <span>{{ $t('message.containerQuery.eventDate') }}</span>
          </template>
          <template #num5_header>
            <span>{{ $t('message.containerQuery.eventActual') }}</span>
          </template>
          <template #num6_header>
            <span>{{ $t('message.containerQuery.eventType') }}</span>
          </template>
          <template #num7_header>
            <span>{{ $t('message.containerQuery.vesselsName') }}</span>
          </template>
          <template #num8_header>
            <span>{{ $t('message.containerQuery.eventVoyage') }}</span>
          </template>
          <template #num9_header>
            <span>{{ $t('message.containerQuery.vesselCompliance') }}</span>
          </template>
          <template #num10_header>
            <span>{{ $t('message.containerQuery.eventlocationCompliance') }}</span>
          </template>
        </vxe-grid>
      </div>
      <div v-else> <!--提单号信息-->
        <div class="line"></div>
        <div><span>{{ $t('message.containerQuery.route') }}</span></div>
        <div>
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in routeInfo"
              :key="index"
              :icon="activity.icon"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
              :timestamp="activity.timestamp">
              {{ language === 'zh' ? activity.content : activity.content2 }}
            </el-timeline-item>
          </el-timeline>
        </div>
        <div v-for="(item,index) in tdInfoTest" :key="index">
          <div class="line"></div>
          <div><span style="margin-right: 1.25rem">{{
              $t('message.containerQuery.containerBoxNumber')
            }}:</span>{{ item.number }}
          </div>
          <div><span style="margin-right: 1.25rem">{{ $t('message.containerQuery.isoCode') }}:</span>{{ item.isoCode }}
          </div>
          <vxe-grid border
                    align="center"
                    resizable
                    :ref="'table-gird' + index"
                    :data="item.value"
                    :columns="columnsOptions"
                    max-height="500">
            <template #num1_header>
              <span>{{ $t('message.containerQuery.containerPosName') }}</span>
            </template>
            <template #num2_header>
              <span>{{ $t('message.containerQuery.eventDescription') }}</span>
            </template>
            <template #num3_header>
              <span>{{ $t('message.containerQuery.eventStatus') }}</span>
            </template>
            <template #num4_header>
              <span>{{ $t('message.containerQuery.eventDate') }}</span>
            </template>
            <template #num5_header>
              <span>{{ $t('message.containerQuery.eventActual') }}</span>
            </template>
            <template #num6_header>
              <span>{{ $t('message.containerQuery.eventType') }}</span>
            </template>
            <template #num7_header>
              <span>{{ $t('message.containerQuery.vesselsName') }}</span>
            </template>
            <template #num8_header>
              <span>{{ $t('message.containerQuery.eventVoyage') }}</span>
            </template>
            <template #num9_header>
              <span>{{ $t('message.containerQuery.vesselCompliance') }}</span>
            </template>
            <template #num10_header>
              <span>{{ $t('message.containerQuery.eventlocationCompliance') }}</span>
            </template>
          </vxe-grid>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Watch} from 'vue-property-decorator'
import HttpApi from '@/api'

const jzxJson = require('../../../public/config/jzx.json')
const tdJson = require('../../../public/config/td.json')

@Component({})
export default class ContainerQuery extends Vue {
  private language = window.localStorage.getItem('language')
  private formData = {
    code: '',
    code2: 'auto'
  } // 集装箱号
  private container = 'code'
  private isCode = true
  private port: any
  private containerInfo: any = {
    pos: {
      name: '位置相关',
      tran: 'locations',
      value: [ // 位置相关
        {
          name: '集装箱位置',
          tran: 'containerPosName',
          value: 'Koper'
        },
        {
          name: '集装箱所处国家',
          tran: 'containerCountry',
          value: 'Slovenia'
        },
        {
          name: '集装箱所处地区',
          tran: 'containerState',
          value: 'Koper'
        },
        {
          name: '集装箱所处经纬度',
          tran: 'containerStateLatLon',
          value: '13.72944/45.54694'
        }
      ]
    },
    ship: {
      name: '船舶相关',
      tran: 'vessels',
      value: [ // 船舶相关
        {
          name: '船舶名称',
          tran: 'vesselsName',
          value: 'CSCL BOHAI SEA'
        },
        {
          name: 'IMO',
          tran: 'imo',
          value: '9645889'
        },
        {
          name: '呼号',
          tran: 'callsign',
          value: 'VRNG8'
        },
        {
          name: 'MMSI',
          tran: 'mmsi',
          value: '477441800'
        },
        {
          name: '船旗',
          tran: 'shipFlag',
          value: 'HK'
        }
      ]
    },
    box: {
      name: '集装箱箱体相关',
      tran: 'containerBox',
      value: [
        {
          name: '集装箱编号',
          tran: 'containerBoxNumber',
          value: 'FCIU9636190'
        },
        {
          name: '集装箱ISO代码',
          tran: 'isoCode',
          value: '45G1'
        },
        {
          name: '事件列表',
          tran: 'events',
          value: [
            {
              location: 4,
              description: 'Empty Equipment Despatched',
              status: 'CEP',
              date: '2022-05-10T18:03:00',
              actual: true,
              type: 'land',
              vessel: null,
              voyage: null,
              vesselCompliance: null,
              locationCompliance: 0
            }
          ]
        }
      ]
    },
    route: {
      name: '航线相关',
      tran: 'route',
      value: [ // 航线相关
        {
          name: '调度地',
          tran: 'prepol'
        },
        {
          name: '装载港',
          tran: 'pol'
        },
        {
          name: '卸货港',
          tran: 'pod'
        },
        {
          name: '目的地',
          tran: 'posTpod'
        }
      ]
    }
  } // 集装箱字段信息
  private oderNumberInfo: any = { // 提单号字段信息
    pos: {
      name: '位置相关',
      tran: 'locations',
      value: [ // 位置相关
        {
          name: '集装箱位置',
          tran: 'containerPosName',
          value: 'Koper'
        },
        {
          name: '集装箱所处国家',
          tran: 'containerCountry',
          value: 'Slovenia'
        },
        {
          name: '集装箱所处地区',
          tran: 'containerState',
          value: 'Koper'
        },
        {
          name: '集装箱所处经纬度',
          tran: 'containerStateLatLon',
          value: '13.72944/45.54694'
        }
      ]
    },
    ship: {
      name: '船舶相关',
      tran: 'vessels',
      value: [ // 船舶相关
        {
          name: '船舶名称',
          tran: 'vesselsName',
          value: 'CSCL BOHAI SEA'
        },
        {
          name: 'IMO',
          tran: 'imo',
          value: '9645889'
        },
        {
          name: '呼号',
          tran: 'callsign',
          value: 'VRNG8'
        },
        {
          name: 'MMSI',
          tran: 'mmsi',
          value: '477441800'
        },
        {
          name: '船旗',
          tran: 'shipFlag',
          value: 'HK'
        }
      ]
    },
    box: {
      name: '集装箱箱体相关',
      tran: 'containerBox',
      value: [
        {
          name: '集装箱编号',
          tran: 'containerBoxNumber',
          value: 'FCIU9636190'
        },
        {
          name: '集装箱ISO代码',
          tran: 'isoCode',
          value: '45G1'
        },
        {
          name: '事件列表',
          tran: 'events',
          value: {
            'location': 4,
            'description': 'Empty Equipment Despatched',
            'status': 'CEP',
            'date': '2022-05-10T18:03:00',
            'actual': true,
            'type': 'land',
            'vessel': null,
            'voyage': null,
            'vesselCompliance': null,
            'locationCompliance': 0
          }
        }
      ]
    }
  } // 集装箱字段信息
  private containerInfoTest: any = {}
  private tdInfoTest: any[] = []
  private columnsOptions: any[] = [
    {
      type: 'seq',
      width: 50
    },
    {
      title: 'location',
      showOverflow: true,
      minWidth: 150,
      formatter: (data: any) => {
        return `${data.row.locationname}（${data.row.locationcountry}）`
      },
      slots: {
        header: 'num1_header'
      }
    },
    {
      field: 'description',
      title: 'description',
      showOverflow: true,
      minWidth: 200,
      formatter: (data: any) => {
        return `${data.row.eventdescription}`
      },
      slots: {
        header: 'num2_header'
      }
    },
    {
      field: 'status',
      title: 'status',
      showOverflow: true,
      minWidth: 100,
      formatter: (data: any) => {
        return `${data.row.eventstatus}`
      },
      slots: {
        header: 'num3_header'
      }
    },
    {
      field: 'date',
      title: 'date',
      showOverflow: true,
      minWidth: 200,
      formatter: (data: any) => {
        return `${data.row.eventdate.replace('T', ' ')}`
      },
      slots: {
        header: 'num4_header'
      }
    },
    {
      field: 'actual',
      title: 'actual',
      showOverflow: true,
      minWidth: 100,
      formatter: (data: any) => {
        return `${data.row.eventactual}`
      },
      slots: {
        header: 'num5_header'
      }
    },
    {
      field: 'type',
      title: 'type',
      showOverflow: true,
      minWidth: 100,
      formatter: (data: any) => {
        return `${data.row.eventtype}`
      },
      slots: {
        header: 'num6_header'
      }
    },
    {
      field: 'vessel',
      title: 'vessel',
      showOverflow: true,
      minWidth: 150,
      formatter: (data: any) => {
        return `${data.row.vesselname === undefined ? '' : data.row.vesselname}`
      },
      slots: {
        header: 'num7_header'
      }
    },
    {
      field: 'voyage',
      title: 'voyage',
      showOverflow: true,
      minWidth: 100,
      formatter: (data: any) => {
        return `${data.row.eventvoyage !== null ? data.row.eventvoyage : ''}`
      },
      slots: {
        header: 'num8_header'
      }
    },
    {
      title: 'vesselCompliance',
      showOverflow: true,
      minWidth: 150,
      formatter: (data: any) => {
        return `${data.row.eventvesselCompliance !== null ? data.row.eventvesselCompliance : ''}`
      },
      slots: {
        header: 'num9_header'
      }
    },
    {
      title: 'locationCompliance',
      showOverflow: true,
      minWidth: 160,
      formatter: (data: any) => {
        return `${data.row.eventlocationCompliance !== null ? data.row.eventlocationCompliance : ''}`
      },
      slots: {
        header: 'num10_header'
      }
    }
  ]
  private routeInfo: any[] = []

  public mounted() {
    this.formatContainerData(jzxJson.data, true)
    this.formatContainerData(tdJson.data, false)
    window.addEventListener('setItemEvent', (e: any) => {
      if (e.key === 'language') {
        this.language = e.newValue
      }
    })
  }

  private changeChoose(flag: boolean) {
    this.isCode = flag
    this.$forceUpdate()
  }

  private searchInfo() {
    if (!this.formData.code) {
      // MessageUtil.info(`请输入${this.isCode ? '集装箱号' : '提单号'}`)
      return
    }
    if (!this.formData.code2) {
      // MessageUtil.info('请输入承运人编号')
      return
    }
    const param = {
      documentNumber: this.formData.code,
      carrier: this.formData.code2
    }
    if (this.isCode) {
      HttpApi.getContainersScreening(param).then((res: any) => {
        const tempRes = {
          'locations': [
            {
              'id': 1,
              'name': 'Koper',
              'state': 'Koper',
              'country': 'Slovenia',
              'country_code': 'SI',
              'locode': 'SIKOP',
              'lat': 45.54694,
              'lng': 13.72944
            }
          ],
          'vessels': [
            {
              'id': 1,
              'name': 'CSCL BOHAI SEA',
              'imo': '9645889',
              'call_sign': 'VRNG8',
              'mmsi': '477441800',
              'flag': 'HK'
            }
          ],
          'container': {
            'number': 'FCIU9636190',
            'iso_code': '45G1',
            'events': [
              {
                'location': 4,
                'description': 'Empty Equipment Despatched',
                'status': 'CEP',
                'date': '2022-05-10T18:03:00',
                'actual': true,
                'type': 'land',
                'vessel': null,
                'voyage': null,
                'vesselCompliance': null,
                'locationCompliance': 0
              }
            ]
          }
        }
      })
    } else {
      HttpApi.getContainersBillOfLadingScreening(param).then((res: any) => {
        console.log(res)
      })
    }
  }

  /**
   * 格式化集装箱数据
   * @param data
   * @param flag 判断是集装箱查询还是提单查询
   * @private
   */
  private formatContainerData(data: any, flag: boolean) {
    if (!flag) {
      data.containers.forEach((item: any) => { // 遍历集装箱信息
        const resultData: any = {}
        resultData.number = item.number
        resultData.isoCode = item.iso_code
        resultData.value = []
        item.events.forEach((event: any) => {
          const allData: any = {} // 由事件绑定的所有信息
          Object.keys(event).forEach((key) => {
            const name = 'event' + key
            allData[name] = event[key]
          })
          for (let i = 0; i < data.vessels.length; i++) {
            if (event.vessel === data.vessels[i].id) {
              Object.keys(data.vessels[i]).forEach((key: any) => {
                const name = 'vessel' + key
                allData[name] = data.vessels[i][key]
              })
              break
            }
          }
          for (let i = 0; i < data.locations.length; i++) {
            if (event.location === data.locations[i].id) {
              Object.keys(data.locations[i]).forEach((key: any) => {
                const name = 'location' + key
                allData[name] = data.locations[i][key]
              })
              break
            }
          }
          resultData.value.push(allData)
        })
        this.tdInfoTest.push(resultData)
      })
      let name = ''
      let name2 = ''
      Object.keys(data.route).forEach((key) => {
        if (key === 'pod') {
          name = '卸货港'
          name2 = 'pod'
        } else if (key === 'pol') {
          name = '装载港'
          name2 = 'pol'
        } else if (key === 'postpod') {
          name = '目的地'
          name2 = 'postpod'
        } else if (key === 'prepol') {
          name = '调度地'
          name2 = 'prepol'
        }
        const locationId = data.route[key].location
        let locationName = ''
        for (let i = 0; i < data.locations.length; i++) {
          if (locationId === data.locations[i].id) {
            const l = data.locations[i]
            locationName = `${l.name} (${l.country})`
            break
          }
        }
        const content = name + '-' + locationName
        const content2 = name2 + '-' + locationName
        this.routeInfo.push({
          content: content,
          content2: content2,
          timestamp: data.route[key].date.replace('T', ' '),
          color: data.route[key].actual ? '#0bbd87' : ''
        })
      })
    } else {
      const resultData: any = {}
      resultData.value = []
      resultData.number = data.container.number
      resultData.isoCode = data.container.iso_code
      data.container.events.forEach((event: any) => {
        const allData: any = {} // 由事件绑定的所有信息
        Object.keys(event).forEach((key: any) => {
          const name = 'event' + key
          allData[name] = event[key]
        })
        for (let i = 0; i < data.vessels.length; i++) {
          if (event.vessel === data.vessels[i].id) {
            Object.keys(data.vessels[i]).forEach((key: any) => {
              const name = 'vessel' + key
              allData[name] = data.vessels[i][key]
            })
            break
          }
        }
        for (let i = 0; i < data.locations.length; i++) {
          if (event.location === data.locations[i].id) {
            Object.keys(data.locations[i]).forEach((key: any) => {
              const name = 'location' + key
              allData[name] = data.locations[i][key]
            })
            break
          }
        }
        resultData.value.push(allData)
      })
      this.containerInfoTest = resultData
    }
  }

  private cancel() {
    console.log()
  }
}
</script>

<style scoped lang="scss">
.port-query-box {
  padding-top: 0.625rem;

  .search-btn {
    margin-bottom: 0.625rem;

    .el-button {
      width: 50%;
      margin: 0 !important;
      background: none !important;
      color: black !important;
    }

    .is-search {
      background: var(--aside-bg) !important;
      color: #FFFFFF !important;
    }
  }

  .search-box {
    height: 1.875rem;
    display: flex;
    align-items: center;

    .search {
      width: 1.875rem;
      height: 1.875rem;
      background: red;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.25rem;
      box-sizing: border-box;
      border-left: none;
      margin-left: 1.25rem;

      &:hover {
        opacity: 0.7;
      }
    }

    .el-input {
      width: 40%;
      height: 1.875rem;
      box-sizing: border-box;

      ::v-deep.el-input__inner {
        height: 1.875rem !important;
        color: black !important;
      }

      ::v-deep.el-input__suffix {
        height: 100%;
        display: flex;
        align-items: center;
      }
    }
  }

  .line {
    height: 0.625rem;
    border-bottom: 0.0625rem solid rgba(222, 222, 222, 1);
    width: 100%;
    margin-bottom: 0.625rem;
  }

  .info {
    width: 100%;
    height: 31.25rem;
    overflow: auto;

    .info-item {
      padding-left: 1.25rem;

      .content {
        .info {
          margin-left: 0.625rem;
        }
      }
    }
  }
}
</style>
