<template>
  <section class="apps-container">
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.appName" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="reqGetApplicationList">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <template>
      <el-table :data="list" highlight-current-row v-loading="loading" style="width: 100%;">
        <el-table-column type="index" width="60">
        </el-table-column>
        <el-table-column prop="appName" label="应用名称" width="180">
        </el-table-column>
        <el-table-column prop="appDir" label="应用短码" width="120">
        </el-table-column>
        <el-table-column prop="appDir" label="活动路径" :formatter="formatAppDir" min-width="120">
        </el-table-column>
        <el-table-column prop="endTime" label="离线时间" :formatter="formatDateEndTime" min-width="80">
        </el-table-column>
        <el-table-column prop="startTime" label="创建时间" :formatter="formatDateStartTime" min-width="80">
        </el-table-column>
        <el-table-column label="操作" min-width="150">
          <template slot-scope="scope">
            <el-button size="small" @click="toReport(scope.$index, scope.row)">报表</el-button>
            <el-button size="small" @click="toCheckCode(scope.$index, scope.row)">查码</el-button>
            <!-- <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-col :span="24" class="toolbar">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
      </el-pagination>
    </el-col>
  </section>
</template>

<script>
import { getApplicationList } from "./../../api/api.js";
import { formatDate } from "./../../common/utils.js";

export default {
  data() {
    return {
      loading: false,
      filters: {
        appName: ""
      },
      list: [],
      total: 0,
      page: 1,
      pageSize: 20
    };
  },
  methods: {
    formatDateStartTime: function(row, column) {
      return formatDate.format(new Date(row.startTime));
    },
    formatDateEndTime: function(row, column) {
      return formatDate.format(new Date(row.endTime));
    },
    formatAppDir: function(row, column) {
      return "https://k.wxpai.cn/" + row.appDir + "/?c=";
    },
    handleCurrentChange(val) {
      this.page = val;
      this.reqGetApplicationList();
    },
    // 去报表页
    toReport: function(index, row) {
      console.log("row.appCode", row.appCode);
      this.$router.push({
        path: "/report",
        query: {
          code: row.appCode
        }
      });
    },
    // 去查码
    toCheckCode: function(index, row) {
      this.$router.push({
        path: "/checkcode",
        query: {
          code: row.appCode
        }
      });
    },
    reqGetApplicationList() {
      let parm = {
        appName: this.filters.appName,
        page: this.page,
        size: this.pageSize
      };
      getApplicationList(parm).then(res => {
        let { code, content } = res;
        if (code == 200 && content) {
          this.total = content.total;
          this.list = content.list;
        }
        // else if (code == 404) {
        //   this.$router.push({
        //     path: "/login"
        //   });
        // }
      });
    }
  },
  mounted() {
    this.reqGetApplicationList();
  }
};
</script>

<style scoped lang="less">
</style>