<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="pagerDto._Co_LadingBillNumber"
          placeholder="提单号"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="pagerDto._Eq_DeliveryPushStatus"
          placeholder="交航推送状态"
          clearable
          filterable
        >
          <el-option
            v-for="item in PushStatus"
            :key="item.Id"
            :label="item.Name"
            :value="item.Id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="pagerDto._Eq_ArrivePushStatus"
          placeholder="到达推送状态"
          clearable
          filterable
        >
          <el-option
            v-for="item in PushStatus"
            :key="item.Id"
            :label="item.Name"
            :value="item.Id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-search"
          size="small"
          type="primary"
          :loading="ladding"
          @click="pagerSerach(1)"
          >搜索</el-button
        >
        <el-button icon="el-icon-plus" size="small" plain type="primary">
          <router-link
            :to="{ name: 'ChannelCNTrunkLineEdit', params: { Id: 0 } }"
            >添加推送信息</router-link
          >
        </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="sData" border height="660">
      <el-table-column label="提单号" prop="LadingBillNumber" />
      <el-table-column label="交航推送状态" prop="DeliveryPushStatusStr" />
      <el-table-column label="到达推送状态" prop="ArrivePushStatusStr" />
      <el-table-column label="附件" prop="PdfUrl">
        <template slot-scope="r">
          <a :href="r.row.PdfUrl" target="_blank">查看扫描件</a>
        </template>
      </el-table-column>
      <el-table-column label="错误信息" prop="ErrorMessage" show-overflow-tooltip="true" width="500px" />
      <el-table-column label="操作" width="280px">
        <template slot-scope="scope">
          <el-button size="mini" type="primary">
            <router-link
              :to="{
                name: 'ChannelCNTrunkLineEdit',
                params: { Id: scope.row.Id },
              }"
              >编辑</router-link
            >
          </el-button>
          <el-button
            size="mini"
            type="info"
            :loading="PushLoading"
            @click="DeliveryPush(scope.row.Id)"
          >
            交航推送
          </el-button>
          <el-button
            size="mini"
            type="success"
            :loading="PushLoading"
            @click="ArrivePush(scope.row.Id)"
          >
            到达推送
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-sizes="[100, 200, 300, 400]"
      :current-page="pagerDto.PageIndex"
      :page-size="pagerDto.PageSize"
      background
      layout="prev, pager, next ,total ,jumper,sizes,slot "
      :total="pagerDto.total"
      @current-change="pagerSerach"
      @size-change="sizeChange"
    />
  </div>
</template>
<script>
import { Get9518Des } from "@/api/enum/enums";
import {
  _queryPager,
  _DeliveryPush,
  _ArrivePush,
} from "@/api/channel/CNTrunkLine";
export default {
  name: "ChannelCNTrunkLine",
  data() {
    return {
      ladding: false,
      PushLoading: false,
      sData: [],
      PushStatus: [],
      row: {},
      pagerDto: {
        PageIndex: 1,
        PageSize: 100,
        total: 0,
        QuerySort: [{ Field: "Id", IsDesc: true }],
      },
    };
  },
  created() {
    Get9518Des("PushStatusEnum").then((res) => {
      this.PushStatus = res;
    });
    this.pagerSerach();
  },
  methods: {
    DeliveryPush(Id) {
      this.PushLoading = true;
      _DeliveryPush(Id)
        .then((res) => {
          this.$message({
            type: "success",
            message: "操作已执行，请查看干线推送状态！",
          });
          this.pagerSerach();
        })
        .finally(() => {
          this.PushLoading = false;
        });
    },
    ArrivePush(Id) {
      this.PushLoading = true;
      _ArrivePush(Id)
        .then((res) => {
          this.$message({
            type: "success",
            message: "操作已执行，请查看干线推送状态！",
          });
          this.pagerSerach();
        })
        .finally(() => {
          this.PushLoading = false;
        });
    },
    sizeChange(pageSize) {
      this.pagerDto.PageSize = pageSize;
      this.pagerSerach();
    },
    pagerSerach(page = 1) {
      this.pagerDto.PageIndex = page;
      this.ladding = true;
      _queryPager(this.pagerDto)
        .then((response) => {
          this.sData = response.Result;
          this.ladding = false;
          this.pagerDto.total = response.TotalCount;
        })
        .catch((response) => {
          this.ladding = false;
        });
    },
  },
};
</script>
