<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="请输入运单号"
              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="viewRouteConfig(scope.row)"
        >
          {{ 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: null,
      loading: false,
      valueFormat: "yyyy-MM-dd",
    };
  },
  created() {
    this.selectForm.createTime = this.nowDate();
    // this.$nextTick(()=>{
    //   let height = window.innerHeight - this.$refs.dmLogForm.$el.offsetHeight - 130;
    //   if(height < 300){
    //     this.tableHeight = 300;
    //   }else{
    //     this.tableHeight = height;
    //   }
    // })
  },
  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;
      });
    },
    // 当前配载航班号跳转查看航线配置详情
    viewRouteConfig(row) {
      this.$router.push({
        path: "/routeInfo",
        query: {
          id: row.allocDimId,
          purposeOfFlightNo: row.flightFltNo,
          flightDate: row.flightFltDate,
          flightRouteListStr: row.currentFlightRoute,
          routesStr: row.currentFlightRoute,
          pageName: "dmLog",
          disable: true,
        },
      });
    },
  },
  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>