<template>
  <div class="newContainerHistory flex">
    <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="newContainerHistory-left">
      <div class="newContainerHistory-left-top manageTitle">容器历史</div>
      <div class="newContainerHistory-left-bottom">
        <el-scrollbar style="height: 100%;">
          <el-tree :data="dataTree" :props="defaultProps" highlight-current default-expand-all @node-click="handleNodeClick"></el-tree>
        </el-scrollbar>
      </div>
    </div>
    <div class="newContainerHistory-right flex1">
      <Table :tableTag="tableTag" />
    </div>
  </div>
</template>

<script>
import pf from '@/layout/mixin/publicFunc'
import Table from '@/views/newQuery/components/table.vue'
export default {
  name: 'NewContainerHistory',
  mixins: [pf],
  components: { Table },
  data () {
    return {
      query: '',
      loading: false,
      dataTree: [
        {
          label: '',
          children: []
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      tableTag: {}
    }
  },
  created () {
    const { query } = this.$route
    this.query = query
  },
  mounted () {
    this.tableTag = this.query
    this.getListTree()
  },
  methods: {
    async getListTree () {
      try {
        this.loading = true
        const { code, returnData } = await this.getQueryList(SERVICE_ID.containerId, this.query)
        if (code == 0 && returnData && returnData.length) {
          const datas = [...returnData]
          datas.forEach(item => {
            item.label = `${item.carrierFlights}-${item.carrierFlightsDate.replaceAll('-', '/')}-${item.outAirport}-${item.landAirport}`
          })
          this.dataTree[0].label = `容器历史-${this.query.container_ID}`
          this.dataTree[0].children = datas
          this.loading = false
        }
      } catch (error) {
        console.log(error)
        this.loading = false
      }
    },
    handleNodeClick (data) {
      console.log(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.newContainerHistory {
  padding: 24px;
  height: calc(100vh - 80px);
  &-left {
    width: 360px;
    margin-right: 24px;
    background-color: #fff;
    &-bottom {
      height: calc(100% - 30px);
      padding: 12px;
      ::v-deep .el-tree {
        .el-tree-node__label {
          font-size: 14px;
          font-weight: 600;
        }
      }
    }
  }
  &-right {
    background-color: #fff;
  }
}
</style>