<template>
  <div>
    <el-form ref="dmLogForm" class="form-header" :model="selectForm" label-width="auto" size="small"
      @submit.native.prevent>
      <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="例: xxx;xxx;" 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="回推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="mini" 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">
      <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: { id: scope.row.allocDimId, handle: 'detail', fltNo: scope.row.flightFltNo, fltDate: scope.row.flightFltDate ? scope.row.flightFltDate : ' ', routeStatus: 'dmLog', route: scope.row.currentFlightRoute ? scope.row.currentFlightRoute : ' ', status: ' ', createStatus: 1, } })">
          {{
              scope.row.flightFltNo
          }}<i class="el-icon-link"></i> </el-link>
        <span v-else>{{ scope.row.flightFltNo }}</span>
      </template>
      <template v-slot:remarksDetail="scope">
        <span v-if="scope.row.remarksDetail == null || scope.row.remarksDetail == ''">{{ scope.row.remarksDetail
        }}</span>
        <div v-else>
          <div v-for="item in scope.row.remarksDetail.split('\\r\\n')">{{ item }}</div>
        </div>
      </template>
    </Tables>
  </div>
</template>

<script>
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: 300,
      loading: false,
      valueFormat: "yyyy-MM-dd",
    };
  },
  created() {
    this.selectForm.createTime = this.nowDate();
  },
  activated() {
    this.selectDMData();
  },
  deactivated() {
    this.data = [];
  },
  mounted() {
    // this.tableHeight = window.innerHeight - this.$refs.dmLogForm.$el.offsetHeight - 130;
  },
  methods: {
    //数据查询
    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) {
          this.total = res.data.total
          if (res.data.total === 0) {
            this.msgWarning('未查询到数据')
          } else {
            this.data = res.data.list;
          }
        } 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, awbNbr: val.awbNbr } })
          } else {
            this.msgWarning('未查询到该条数据的流水')
          }
        } else {
          this.msgWarning(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    //分页
    currentChange(val) {
      this.selectForm.page = val.page;
      this.selectDMData();
    },
    //排序
    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>