<template>
  <div>
    <el-form ref="dmLogForm" class="form-header" :model="selectForm" label-width="auto" size="small">
      <el-row type="flex" style="flex-wrap: wrap !important">
        <el-col :span="6">
          <el-form-item label="ACCS原航班号">
            <el-input v-model.trim="fltNo" class="formItem" placeholder="请输入航班号" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="数据接收日期" prop="createTime">
            <el-date-picker v-model="selectForm.createTime" class="formItem" type="date" placeholder="选择日期"
              :value-format="valueFormat" clearable>
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="运单号">
            <el-input v-model="selectForm.awbNbr" class="formItem" placeholder="请输入运单号" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="处理状态级别">
            <el-select v-model="selectForm.status" class="formItem" placeholder="不限" clearable>
              <el-option label="未处理" value="0"></el-option>
              <el-option label="处理成功" value="1"></el-option>
              <el-option label="无需处理" value="2"></el-option>
              <el-option label="处理失败" value="3"></el-option>
              <el-option label="校验不通过" value="4"></el-option>
              <el-option label="处理中" value="9"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="ACCS原航班日期">
            <el-date-picker v-model="selectForm.fltDate" class="formItem" type="date" placeholder="选择日期"
              :value-format="valueFormat" clearable>
            </el-date-picker>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="口岸代码">
            <el-select v-model="selectForm.portName" class="formItem" placeholder="不限" clearable>
              <el-option v-for="item in portList" :label="item.englishName" :value="item.englishName" :key="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="6">
          <el-form-item label="回推ACCS结果">
            <el-select v-model="selectForm.sendLogSendResult" class="formItem" placeholder="不限" clearable>
              <el-option label="未推" value="0">
              </el-option>
              <el-option label="推送成功" value="1">
              </el-option>
              <el-option label="推送失败" value="2">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="ml20" style="display: flex">
        <el-button type="primary" size="small" icon="el-icon-search" :loading="loading" @click="selectDMData(0)">查询
        </el-button>
      </div>
    </el-form>
    <Tables ref="dmLogTables" ductName="logDmData" :order="true" :data="data" :headerData="tableHeader"
      tableAlign="center" :showOverflowTooltip="false" :height="tableHeight" :page="selectForm.page"
      :limitSize="selectForm.size" :pageSizes="[100]" :totalCount="total" :loading="loading"
      @currentChange="currentChange" @sortChange="sortChange">
      <template v-slot:awbNbr="scope">
        <el-link type="primary" @click="gotoWeatherTable(scope.row)">
          {{
              scope.row.awbNbr
          }}<i class="el-icon-link"></i> </el-link>
      </template>
      <template v-slot:flightFltNo="scope">
        <el-link v-if="scope.row.allocDimId" type="primary"
          @click="$router.push({ name: 'FlightAllocConfigInfo', params: { handle: 'DMdetail', id: scope.row.allocDimId } })">
          {{
              scope.row.flightFltNo
          }}<i class="el-icon-link"></i> </el-link>
        <span v-else>{{ scope.row.flightFltNo }}</span>
      </template>
    </Tables>
  </div>
</template>

<script>
import dictLabels from "../../../assets/languages/dictLabels.js";
import { portNameList } from "@/api/system/user.js";
import { getDmDataList, getDmFlowInformation } from "@/api/system/logConfig.js";

export default {
  name: "DmLog",
  data() {
    return {
      selectForm: {
        fltNo: undefined,
        createTime: undefined,
        page: 1,
        size: 100,
      },
      data: [],
      tableHeader: this.tableHeaders['DM'],
      portList: [],
      rules: {
        createTime: [
          {
            required: true,
            message: "创建日期不能为空",
            trigger: "blur",
          },
        ],
      },
      pickerOptions: {},
      selectDate: null,
      createTimes: [],
      total: 0,
      tableHeight: null,
      loading: false,
      valueFormat: "yyyy-MM-dd",
    };
  },
  created() {
    this.selectForm.createTime = this.nowDate();
    this.getPort()
  },
  activated() {
    this.selectDMData();
  },
  deactivated() {
    this.data = [];
  },
  mounted() {
    this.tableHeight =
      window.innerHeight - this.$refs.dmLogForm.$el.offsetHeight - 130;
  },
  methods: {
    //获取口岸
    async getPort() {
      portNameList().then((res) => {
        if (res.code === 200) {
          this.portList = res.data;
        } else {
          this.msgWarning('查询条件' + res.msg)
        }
      });
      if (this.$store.state.tagsView.cachedViews.length == 0) {
        this.selectDMData();
      }
    },
    //数据查询
    async selectDMData(val) {
      this.data = [];
      this.loading = true;
      if (val === 0) {
        this.selectForm.page = 1;
      }
      getDmDataList(this.selectForm).then((res) => {
        this.loading = false;
        if (res.code === 200) {
          if (res.data.total === 0) {
            this.msgWarning('未查询到数据')
          } else {
            this.data = res.data.list;
            this.total = res.data.total;
          }
        } else {
          this.msgWarning(res.msg)
        }
      });
    },
    //跳转流水
    gotoWeatherTable(val) {
      getDmFlowInformation('accsId=' + val.dmAccsId).then(res => {
        if (res.code === 200) {
          if (res.data.list.length > 0) {
            this.$router.push({ name: 'weatherTable', params: { data: res.data.list } })
          } else {
            this.msgWarning('未查询到该条数据的流水')
          }
        } else {
          this.msgWarning(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    //分页
    currentChange(val) {
      this.selectForm.page = val.page;
      this.selectDMData();
    },
    //数据处理
    statusData(val) {
      if (dictLabels["logDmData"]["status"][val]) {
        return dictLabels["logDmData"]["status"][val];
      } else {
        return val;
      }
    },
    //排序
    sortChange(val) {
      let data = [];
      let nullData = [];
      this.data.forEach((item) => {
        if (item[val.prop]) {
          data.push(item);
        } else {
          nullData.push(item);
        }
      });
      data = data.sort(this.$refs.dmLogTables.compare(val.prop, val.order));
      if (val.order != "ascending") {
        this.data = nullData.concat(data);
      } else {
        this.data = data.concat(nullData);
      }
      this.data.forEach((item, index = 0) => {
        item.index = index;
      });
    },
  },
  computed: {
    fltNo: {
      get: function () {
        return this.selectForm.fltNo;
      },
      set: function (val) {
        this.selectForm.fltNo = this.upCase(val);
      },
    },
  },
};
</script>

<style scoped>
.tags {
  display: flex;
  margin: 0 20px 0 auto;
  color: black;
  line-height: 32px;
}

.tagTip {
  margin: 0 5px;
}
</style>