<template>
  <div style="padding:10px" v-loading="loading">
    <!-- 配舱汇总信息 -->
    <el-card class="mb10" ref="card1">
      <el-divider content-position="left">今日配舱汇总</el-divider>
      <el-row :gutter="10">
        <el-col :span="6">
          <div class="allInformation">
            <div class="informationItem">航班总重量（KG）</div>
            <div class="informationNum">{{ totalWeight }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="allInformation">
            <div class="informationItem">已配重量（KG）</div>
            <div class="informationNum">{{ allocationWeight }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="allInformation">
            <div class="informationItem">配舱比例（百分比）</div>
            <div class="informationNum">{{ (percentage == 0 ? 0 : ((percentage) * 100).toFixed(2)) + '%' }}</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 今日航班box -->
    <el-card class="mb10" ref="card2">
      <el-form ref="indexForm" size="mini" inline @submit.native.prevent>
        <el-form-item label="配载航班日期">
          <el-date-picker v-model="selectData.fltDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
            :clearable="false" @change="getFlight">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="航班种类">
          <el-select v-model="selectData.kindId" placeholder="不限" @change="getFlight" clearable>
            <el-option v-for="item in fltKindIdList" :label="item.englishName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-refresh" :loading="loading" @click="getFlight"></el-button>
        </el-form-item>
      </el-form>
      <el-row class="card2">
        <el-col :span="1" v-for="item in tableData">
          <div class="fltBox" @click="rowClick(item)"
            :style="{ backgroundColor: (item.percentage * 100).toFixed(2) >= 100 ? '#13ce66' : (item.percentage * 100).toFixed(2) >= 75 ? '#ffba00' : '#ff4949' }">
            <div class="fltName">{{ item.fltNo }}</div>
            <div class="fltWeight">{{ (item.percentage == 0 ? 0 : ((item.percentage) * 100).toFixed(2)) + '%' }}
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 各航班配舱进度详情 -->
      <el-divider content-position="left">各航班配舱进度</el-divider>
      <Tables ref="indexTable" ductName="indexTable" :order="true" :data="tableData" :headerData="tableHeader"
        tableAlign="center" :showOverflowTooltip="false" :height="tableHeight" :totalCount="total"
        :page="selectData.page" :limitSize="selectData.size" :pageSizes="[100]" :pagination="false"
        @currentChange="currentChange" @rowClick="rowClick">
        <template v-slot:percentage="scope">
          <el-progress stroke-width="100"
            :color="(scope.row.percentage * 100).toFixed(2) >= 100 ? '#13ce66' : (scope.row.percentage * 100).toFixed(2) >= 75 ? '#ffba00' : '#ff4949'"
            :stroke-width="18"
            :percentage="scope.row.percentage == 0 ? 0 : Number((scope.row.percentage * 100).toFixed(2))">
          </el-progress>
        </template>
      </Tables>
    </el-card>
  </div>
</template>

<script>
import { filghtKindData } from "@/api/flightInfoImport";
import { getOneDayFlight } from '@/api/home.js'

export default {
  name: 'Index',
  props: {
    user: {
      type: Object
    }
  },
  data() {
    return {
      selectData: {
        fltDate: null,
        kindId: null,
        page: 1,
        size: 1
      },//查询条件
      tableData: [],//table数据
      tableHeader: this.tableHeaders['index'],//表头
      fltKindIdList: [],//航班类型
      percentage: 0,//配舱比例
      totalWeight: 0,//航班总重量
      allocationWeight: 0,//航班已配重量
      type: "",
      tableHeight: null,
      total: 0,
      loading: false,
    };
  },
  created() {
    this.selectData.fltDate = this.nowDate();
    this.getFltKindId()
  },
  // activated() {
  //   this.getFlight()
  // },
  mounted() {
    this.tableHeight = window.innerHeight - this.$refs.card1.$el.offsetHeight - this.$refs.indexForm.$el.offsetHeight - 350
    this.getFlight()
  },
  methods: {
    //获取航班类型
    async getFltKindId() {
      filghtKindData().then(res => {
        if (res.code === 200) {
          this.fltKindIdList = res.data
        } else {
          this.msgWarning(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    //获取首页信息(日期查询)
    async getFlight() {
      this.loading = true
      getOneDayFlight(this.selectData).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.tableData = res.data.list
          this.percentage = res.data.percentage
          this.totalWeight = res.data.totalWeight
          this.allocationWeight = res.data.allocationWeight
        } else {
          this.msgWarning(res.msg)
        }
      }).catch(err => {
        this.loading = false
        console.log(err)
      })
    },
    //某行被点击
    rowClick(val) {
      let obj = {}
      obj.fltNo = val.fltNo
      obj.fltDate = val.fltDate
      this.$router.push({ name: 'QueryCargo', params: obj })
    },
    //翻页
    currentChange(val) { },
  },
};
</script>

<style lang="scss" scoped>
.cardTop {
  height: 400px;
  margin: 10px;
  padding: 10px;
  overflow: auto;

  &::-webkit-scrollbar {
    height: 5px;
    width: 5px;
  }

  &::-webkit-scrollbar-track {
    background-color: #fff;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #ccc;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: #409eff;
  }

  .label {
    font-weight: 700;
  }

  .totalWeight {
    font-size: 12px;
  }
}

.progressTab {
  height: 100%;
}

.allInformation {
  width: 100%;
  height: 100px;
  padding: 10px 20px;
  color: #fff;
  background-color: #409eff;

  .allInformation {
    font-size: 12px;
  }

  .informationNum {
    font-size: 24px;
    margin-top: 25px;
  }
}

.card2 {

  .fltBox {
    width: 90%;
    height: 60px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    position: relative;
    border-radius: 10px;
    padding: 5px;
    line-height: 25px;
    margin-bottom: 10px;
    overflow: hidden;

    .fltWeight {
      font-size: 14px;
    }
  }
}
</style>