<template>
  <div class="list_container">
    <div class="sevice_breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>我的服务</el-breadcrumb-item>
        <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main_container">
      <div class="filter_contaner">
        <el-button
          v-if="filterList && filterList.length"
          size="small"
          @click="showFliterList = !showFliterList"
        >
          {{ showFliterList ? "收起" : "筛选" }}
          <i
            class="el-icon--right"
            :class="
              showFliterList ? 'el-icon-caret-bottom' : 'el-icon-caret-top'
            "
          ></i>
        </el-button>
        <table-filter
          :show="showFliterList"
          :filter-list="filterList"
          @filter-change="filterChange"
          style="margin-top: 5px;"
        ></table-filter>
      </div>
      <app-list :data="appList"></app-list>
      <comments-pagination
        :total="100"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="changePageSize"
        @current-change="changeCurrentPage"
      ></comments-pagination>
    </div>
  </div>
</template>

<script>
import tableFilter from "@/components/table-filter";
import appList from "@/components/app-list";
import tableUm from "@/components/table-um";
import dialogAction from "@/components/dialog-action";
import commentsPagination from "@/components/comments-pagination";
import { mapState } from "vuex";

export default {
  components: {
    tableFilter,
    appList,
    tableUm,
    dialogAction,
    commentsPagination,
  },
  data: () => ({
    level: 0, // 用户等级
    type: 0, // 访问的页面
    showFliterList: false,
    filterList: [
      {
        name: "在线状态",
        prop: "zxzt",
        data: ["平台应用", "开发者应用", "未上架"],
      },
      {
        name: "应用类型",
        prop: "yylx",
        data: ["基础工具", "通用工具", "业务应用"],
      },
      {
        name: "业务领域",
        prop: "ywly",
        data: [
          "公安应用",
          "应急应用",
          "政务服务应用",
          "金融应用",
          "交通应用",
          "旅游应用",
        ],
      },
      {
        name: "是否支持开发",
        prop: "sfzckf",
        data: ["全部", "支持开发", "不支持开发"],
      },
    ],
    appList: [
      {
        id: 1000001,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "mapvideos",
        version: "V2.0",
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000002,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "语音识别",
        version: "V2.0",
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000003,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        version: "V2.0",
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000004,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        version: "V2.1",
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000005,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        version: "V2.2",
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000006,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        version: "V2.3",
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000007,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        version: "V2.4",
        time: "2019-04-11 12:50:30",
      },
      {
        id: 100000,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        version: "V2.5",
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000009,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        version: "V2.6",
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000010,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        version: "V2.7",
        time: "2019-04-11 12:50:30",
      },
    ],
    pageSizes: [10, 50, 100],
    pageSize: 10,
    currentPage: 1,
  }),
  computed: {
    ...mapState({
      yyglNav: "yyglNav",
    }),
    pathName() {
      return this.yyglNav[this.level][this.type];
    },
  },
  methods: {
    filterChange(filter) {
      console.log(filter);
    },
    changePageSize(value) {
      this.pageSize = value;
      this.currentPage = 1;
    },
    changeCurrentPage(value) {
      this.currentPage = value;
    },
  },
  created() {
    this.level = parseInt(this.$route.params.level);
    this.type = parseInt(this.$route.params.type);
  },
};
</script>

<style scoped>
.list_container {
  padding: 0 20px;
}
.main_container {
  height: calc(100% - 75px);
  padding: 15px 20px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
}
.main_container .ces-table-page {
  margin-top: 18px;
}
</style>
