<template>
  <div>
    <el-card shadow="never" style="margin-bottom: 20px">
      <el-form v-model="pagerDto" inline>
        <el-form-item label="统计时间">
          <el-date-picker
            v-model="timeRange2"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="服务商">
             <el-input v-model="qm.ServiceProvider" />
        </el-form-item>
        <el-form-item label="国家">
          <el-input v-model="qm.ReceiverCountryCode"/>
        </el-form-item>
        <el-form-item>
          <el-button @click="serarch()" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-bottom: 20px">
      <el-table :data="logs" width="100%" :height="570" border>
        <el-table-column label="服务商" prop="ServiceProvider" width="200" />
        <el-table-column label="国家" prop="ReceiverCountryCode" />
         <el-table-column label="ESB签收" prop="ESBSignCount" />
        <el-table-column label="末端签收" prop="EndSignCount" />
        <el-table-column label="签收同步率" prop="SingSyncRate" >
            <template slot-scope="r">
            {{
                `${(r.row.SingSyncRate*100).toFixed(2)}%`
            }}
          </template>
        </el-table-column>
        <el-table-column label="ESB上网" prop="ESBOnlineCount" />
        <el-table-column label="总票数" prop="TotalCount"/>
        <el-table-column label="上网同步率" prop="OnlineSyncRate" width="200" >
         <template slot-scope="r">
            {{
                 `${(r.row.OnlineSyncRate*100).toFixed(2)}%`
            }}
          </template>
        </el-table-column>
        <el-table-column label="ESB与末端同步数" prop="ESBEndCount"/>
        <el-table-column label="实际末端上网数" prop="EndOnlineCount" width="200" />
        <el-table-column label="末端同步率" prop="EndSyncRate" width="200">
            <template slot-scope="r">
            {{
                `${(r.row.EndSyncRate*100).toFixed(2)}%`
            }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { GetTrackPageResult } from "@/api/esb";
export default {
  name: "TrackMonitor",
  data() {
    return {
      logs: [],
      timeRange2:[],
      qm: {
        StartTime: "",
        EndTime: "",
        ServiceProvider: "",
        ReceiverCountryCode: "",
      },
    };
  },
  methods: {
    serarch() {
      if (this.timeRange2 && this.timeRange2.length > 0) {
        this.qm.StartTime = this.timeRange2[0];
        this.qm.EndTime = this.timeRange2[1];
      } else {
        this.$message({ type: "error", message: "必须选择统计时间！" });
        return false;
      }
      GetTrackPageResult(this.qm).then((r) => {
        this.logs = r;
      });
    },
  },
};
</script>
