<template>
  <div class="data-table">
    <div
      :style="dataTableContentStyle"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      class="data-table-content"
    >
      <template v-if="tableData.length && upid == 1">
        <el-table
          :data="tableData"
          style="width: 100%"
          ref="userTableData"
        >
          <el-table-column
            :label="dataContent[1] + '国航行李BRS扫描数据统计表'"
          >
            <el-table-column
              prop="A"
              label="日期"
            >
            </el-table-column>
            <el-table-column label="离港数">
              <el-table-column
                prop="totalfly"
                label="航班（架次）"
                width="240"
              >
              </el-table-column>
              <el-table-column
                prop="totalbag"
                label="行李（件数）"
                width="240"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="扫描数">
              <el-table-column
                prop="brsfly"
                label="航班（架次）"
              >
              </el-table-column>
              <el-table-column
                prop="brsbag"
                label="行李（件数）"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="扫描率">
              <el-table-column
                prop="ra_brsfly"
                label="航班"
              >
              </el-table-column>
              <el-table-column
                prop="ra_brsbag"
                label="行李"
              >
              </el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table>
      </template>
      <template v-else-if="tableData.length && upid == 2">
        <el-table
          :data="tableData"
          style="width: 100%"
          ref="userTableDatard"
        >
          <el-table-column label="Mannual Load扫描数据统计表">
            <el-table-column
              prop="A"
              label="日期"
            >
            </el-table-column>
            <el-table-column label="离港数">
              <el-table-column
                prop="totalfly"
                label="航班（架次）"
                width="240"
              >
              </el-table-column>
              <el-table-column
                prop="totalbag"
                label="行李（件数）"
                width="240"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="扫描数">
              <el-table-column
                prop="starfly"
                label="航班（架次）"
              >
              </el-table-column>
              <el-table-column
                prop="starbag"
                label="行李（件数）"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="扫描率">
              <el-table-column
                prop="ra_starfly"
                label="航班"
              >
              </el-table-column>
              <el-table-column
                prop="ra_starbag"
                label="行李"
              >
              </el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table>
      </template>
      <template v-else-if="tableData.length && upid == 3">
        <el-table
          :data="tableData"
          style="width: 100%"
          ref="TableDatardrfid"
        >
          <el-table-column label="航易行RFID扫描数据统计表">
            <el-table-column
              prop="A"
              label="日期"
            >
            </el-table-column>
            <el-table-column label="离港数">
              <el-table-column
                prop="totalfly"
                label="航班（架次）"
                width="240"
              >
              </el-table-column>
              <el-table-column
                prop="totalbag"
                label="行李（件数）"
                width="240"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="扫描数">
              <el-table-column
                prop="hyxfly"
                label="航班（架次）"
              >
              </el-table-column>
              <el-table-column
                prop="hyxbag"
                label="行李（件数）"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="扫描率">
              <el-table-column
                prop="ra_hyxfly"
                label="航班"
              >
              </el-table-column>
              <el-table-column
                prop="ra_hyxbag"
                label="行李"
              >
              </el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table>
      </template>
      <template v-else-if="tableData.length && upid == 4">
        <el-table
          ref="userTableDatas"
          :data="tableData"
          style="width: 100%"
          :show-summary="true"
        >
          <el-table-column
            prop="a1"
            label="日期"
          >
          </el-table-column>
          <el-table-column label="中转行李流向">
            <el-table-column label="D-D">
              <el-table-column
                prop="a2"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="a3"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="a4"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="D-I">
              <el-table-column
                prop="a5"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="a6"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="a7"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="I-I">
              <el-table-column
                prop="a8"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="a9"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="a10"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="I-D">
              <el-table-column
                prop="a11"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="a12"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="a13"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="a14"
            label="进港中转航班数"
          >
          </el-table-column>
          <el-table-column
            prop="a15"
            label="中转总件数"
          >
          </el-table-column>
          <el-table-column
            prop="a16"
            label="未转出总件数"
          >
          </el-table-column>
          <el-table-column
            prop="a17"
            label="转出成功率"
          >
          </el-table-column>
        </el-table>
      </template>
      <template v-else-if="tableData.length && upid == 5">
        <el-table
          ref="transferTableData"
          :data="tableData"
          style="width: 100%"
          :show-summary="true"
        >
          <el-table-column
            prop="a1"
            label="日期"
          >
          </el-table-column>
          <el-table-column label="D-D">
            <el-table-column label="T3-T3">
              <el-table-column
                prop="a2"
                label="进港中转航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a3"
                label="出港航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a4"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="a5"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="a6"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="T2-T2">
              <el-table-column
                prop="a7"
                label="进港中转航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a8"
                label="出港航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a9"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="a10"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="a11"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="T3-T2">
              <el-table-column
                prop="a12"
                label="进港中转航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a13"
                label="出港航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a14"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="a15"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="a16"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="T2-T3">
              <el-table-column
                prop="a17"
                label="进港中转航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a18"
                label="出港航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a19"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="a20"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="a21"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
          </el-table-column>
          <el-table-column label="D-I">
            <el-table-column label="T3-T3">
              <el-table-column
                prop="a22"
                label="进港中转航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a23"
                label="出港航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a24"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="a25"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="a26"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="T2-T2">
              <el-table-column
                prop="a27"
                label="进港中转航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a28"
                label="出港航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a29"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="a30"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="a31"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="T3-T2">
              <el-table-column
                prop="a32"
                label="进港中转航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a33"
                label="出港航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a34"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="a35"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="a36"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="T2-T3">
              <el-table-column
                prop="a37"
                label="进港中转航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a38"
                label="出港航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a39"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="a40"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="a41"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
          </el-table-column>
          <el-table-column label="I-I">
            <el-table-column label="T3-T3">
              <el-table-column
                prop="a42"
                label="进港中转航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a43"
                label="出港航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a44"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="a45"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="a46"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="T2-T2">
              <el-table-column
                prop="a47"
                label="进港中转航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a48"
                label="出港航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a49"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="a50"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="a51"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="T3-T2">
              <el-table-column
                prop="a52"
                label="进港中转航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a53"
                label="出港航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a54"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="a55"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="a56"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="T2-T3">
              <el-table-column
                prop="a57"
                label="进港中转航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a58"
                label="出港航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a59"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="a60"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="a61"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
          </el-table-column>
          <el-table-column label="I-D">
            <el-table-column label="T3-T3">
              <el-table-column
                prop="a62"
                label="进港中转航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a63"
                label="出港航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a64"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="a65"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="a66"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="T2-T2">
              <el-table-column
                prop="a67"
                label="进港中转航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a68"
                label="出港航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a69"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="a70"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="a71"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="T3-T2">
              <el-table-column
                prop="a72"
                label="进港中转航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a73"
                label="出港航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a74"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="a75"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="a76"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="T2-T3">
              <el-table-column
                prop="a77"
                label="进港中转航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a78"
                label="出港航班数"
              >
              </el-table-column>
              <el-table-column
                prop="a79"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="a80"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="a81"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="a82"
            label="进港中转航班数"
          >
          </el-table-column>
          <el-table-column
            prop="a83"
            label="出港航班数"
          >
          </el-table-column>
          <el-table-column
            prop="a84"
            label="中转总件数"
          >
          </el-table-column>
          <el-table-column
            prop="a85"
            label="转出总件数"
          >
          </el-table-column>
          <el-table-column
            prop="a86"
            label="未转出总件数"
          >
          </el-table-column>
          <el-table-column
            prop="a87"
            label="转出成功率"
          >
          </el-table-column>
        </el-table>
      </template>
      <template v-else-if="tableData.length && upid == 6">
        <el-table
          ref="transferBaggageTableData"
          :data="tableData"
          style="width: 100%"
          :show-summary="true"
        >
          <el-table-column
            prop="a1"
            label="日期"
          >
          </el-table-column>
          <el-table-column
            prop="a2"
            label="进港中转航班量"
          >
          </el-table-column>
          <el-table-column
            prop="a3"
            label="中转行李件数"
          >
          </el-table-column>
          <el-table-column
            prop="a4"
            label="未转出件数"
          >
          </el-table-column>
          <el-table-column label="未转出件数分项">
            <el-table-column
              prop="a5"
              label="MCT时间紧"
            >
            </el-table-column>
            <el-table-column
              prop="a6"
              label="过检设备原因"
            >
            </el-table-column>
            <el-table-column
              prop="a7"
              label="混装"
            >
            </el-table-column>
            <el-table-column
              prop="a8"
              label="布控"
            >
            </el-table-column>
            <el-table-column
              prop="a9"
              label="等锥桶"
            >
            </el-table-column>
            <el-table-column
              prop="a10"
              label="车辆故障"
            >
            </el-table-column>
            <el-table-column
              prop="a11"
              label="货舱门/卡锁故障"
            >
            </el-table-column>
            <el-table-column
              prop="a12"
              label="机位远"
            >
            </el-table-column>
            <el-table-column
              prop="a13"
              label="未通过扫描"
            >
            </el-table-column>
            <el-table-column
              prop="a14"
              label="BHS无记录"
            >
            </el-table-column>
            <el-table-column
              prop="a15"
              label="分拣设备故障"
            >
            </el-table-column>
            <el-table-column
              prop="a16"
              label="进港晚卸"
            >
            </el-table-column>
            <el-table-column
              prop="a17"
              label="设备紧张"
            >
            </el-table-column>
            <el-table-column
              prop="a18"
              label="导入晚"
            >
            </el-table-column>
            <el-table-column
              prop="a19"
              label="正常传出未装机"
            >
            </el-table-column>
            <el-table-column
              prop="a20"
              label="错传"
            >
            </el-table-column>
            <el-table-column
              prop="a21"
              label="原因待定"
            >
            </el-table-column>
          </el-table-column>
        </el-table>
      </template>
      <template v-else-if="tableData.length && upid == 7">
        <el-table
          ref="baggageProportionTableData"
          :data="tableData"
          style="width: 100%"
          :show-summary="true"
        >
          <el-table-column
            prop="a1"
            label="日期"
          >
          </el-table-column>
          <el-table-column label="总">
            <el-table-column
              prop="a2"
              label="中转行李百分比"
            >
            </el-table-column>
            <el-table-column
              prop="a3"
              label="行李总件数"
            >
            </el-table-column>
            <el-table-column
              prop="a4"
              label="中转行李件数"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column label="国内">
            <el-table-column
              prop="a5"
              label="中转行李百分比"
            >
            </el-table-column>
            <el-table-column
              prop="a6"
              label="行李总件数"
            >
            </el-table-column>
            <el-table-column
              prop="a7"
              label="中转行李件数"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column label="国际">
            <el-table-column
              prop="a8"
              label="中转行李百分比"
            >
            </el-table-column>
            <el-table-column
              prop="a9"
              label="行李总件数"
            >
            </el-table-column>
            <el-table-column
              prop="a10"
              label="中转行李件数"
            >
            </el-table-column>
          </el-table-column>
        </el-table>
      </template>
      <template v-else>
        <NoData
          image-width="auto"
          image-height="100%"
        />
      </template>
    </div>
  </div>
</template>
<script>
import NoData from '@/components/nodata'
import { TempQuery } from '@/api/temp'
import { throttledExportToExcel } from '@/utils/table'
export default {
  props: {
    // 接口ID
    dataId: {
      type: [String, Number],
      default: '',
    },
    isloadings: {
      type: Number,
    },
    upid: {
      type: [String, Number],
    },
    dataContent: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      loading: false,
      page: 0,
      serviceId: null,
      rowTitle: '',
      tableCols: [], //表头数据
      tableData: [
        // {
        //   date: "wnz（7月）",
        //   name: "409",
        //   province: "18946",
        //   city: "409",
        //   address: "18294",
        //   zip: "100%",
        //   cp: "96.56%",
        // },
      ],
    }
  },
  components: {
    NoData,
  },
  watch: {
    dataContent: {
      handler(val) {
        if (val) {
          this.getQuery()
        }
      },
      deep: true,
    },
    isloadings: {
      handler(val) {
        this.downFile()
      },
    },
  },
  computed: {
    dataTableContentStyle() {
      const style = {}
      if (this.minHeight) {
        style['min-height'] = this.minHeight
      }
      if (this.tableHeight) {
        style['height'] = this.tableHeight
      }
      return style
    },
  },
  mounted() {
    // this.getQuery();
  },
  methods: {
    //获取表格数据
    async getQuery() {
      try {
        this.loading = true
        const { code, returnData } = await TempQuery({
          id: this.dataId,
          dataContent: this.dataContent,
        })
        if (code == 0) {
          if (returnData.listValues.length === 0) {
            this.page--
            this.noMore = true
            this.loading = false
          }
          const titleColumn = returnData.columnSet.find(
            item => item.needShow === 1
          )
          if (titleColumn) {
            this.rowTitle = titleColumn.columnName
          }
          // returnData.listValues.forEach((res) => {
          //   if (!res.A) {
          //     res.A = 0;
          //   }
          //   if (!res.totalfly) {
          //     res.totalfly = 0;
          //   }
          //   if (!res.totalbag) {
          //     res.totalbag = 0;
          //   }
          //   if (!res.brsfly) {
          //     res.brsfly = 0;
          //   }
          //   if (!res.brsbag) {
          //     res.brsbag = 0;
          //   }
          //   if (!res.ra_brsfly) {
          //     res.ra_brsfly = 0;
          //   }
          //   if (!res.ra_brsbag) {
          //     res.ra_brsbag = 0;
          //   }
          //   if (!res.starfly) {
          //     res.starfly = 0;
          //   }
          //   if (!res.starbag) {
          //     res.starbag = 0;
          //   }
          //   if (!res.ra_starfly) {
          //     res.ra_starfly = 0;
          //   }
          //   if (!res.ra_starfly) {
          //     res.ra_starfly = 0;
          //   }
          //   if (!res.hyxfly) {
          //     res.hyxfly = 0;
          //   }
          //   if (!res.hyxbag) {
          //     res.hyxbag = 0;
          //   }
          //   if (!res.ra_hyxfly) {
          //     res.ra_hyxfly = 0;
          //   }
          //   if (!res.ra_hyxbag) {
          //     res.ra_hyxbag = 0;
          //   }
          // });
          this.tableData = returnData.listValues
          this.tableCols = returnData.columnSet
          this.serviceId = returnData.submitID
          this.loading = false
          // setTimeout(() => {
          //   this.initTableData();
          //   this.loading = false;
          // }, 100);
        } else {
          this.page--
          this.loading = false
          this.$message.error('获取表格数据失败')
        }
      } catch (error) {
        this.page--
        this.loading = false
      }
    },
    downFile() {
      if (this.upid == 1) {
        let tableName = this.dataContent[1] + '国航行李BRS扫描数据统计表'
        const table = this.$refs['userTableData'].$el.cloneNode(true)
        const fileName = `${tableName}.xlsx`
        throttledExportToExcel(table, tableName, fileName)
      } else if (this.upid == 2) {
        let tableName = 'Mannual Load扫描数据统计表'
        const table = this.$refs['userTableDatard'].$el.cloneNode(true)
        const fileName = `${tableName}.xlsx`
        throttledExportToExcel(table, tableName, fileName)
      } else if (this.upid == 3) {
        let tableName = '航易行RFID扫描数据统计表'
        const table = this.$refs['TableDatardrfid'].$el.cloneNode(true)
        const fileName = `${tableName}.xlsx`
        throttledExportToExcel(table, tableName, fileName)
      } else if (this.upid == 4) {
        let tableName = '中转四个流向统计表'
        const table = this.$refs['userTableDatas'].$el.cloneNode(true)
        const fileName = `${tableName}.xlsx`
        throttledExportToExcel(table, tableName, fileName)
      } else if (this.upid == 5) {
        let tableName = '中转流向明细统计表'
        const table = this.$refs['transferTableData'].$el.cloneNode(true)
        const fileName = `${tableName}.xlsx`
        throttledExportToExcel(table, tableName, fileName)
      } else if (this.upid == 6) {
        let tableName = '中转行李因素分析统计表'
        const table = this.$refs['transferBaggageTableData'].$el.cloneNode(true)
        const fileName = `${tableName}.xlsx`
        throttledExportToExcel(table, tableName, fileName)
      } else if (this.upid == 7) {
        let tableName = '中转行李比例明细统计表'
        const table =
          this.$refs['baggageProportionTableData'].$el.cloneNode(true)
        const fileName = `${tableName}.xlsx`
        throttledExportToExcel(table, tableName, fileName)
      }
    },
  },
}
</script>
<style lang="scss" scoped></style>
