<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 card" v-if="listType == 'card'">
      <div class="filter_contaner">
        <div class="filter_action">
          <el-button
            v-if="filterList && filterList.length"
            @click="showFliterList = !showFliterList"
          >
            {{ showFliterList ? "收起" : "筛选" }}
            <i
              class="el-icon--right"
              :class="
                showFliterList ? 'el-icon-caret-bottom' : 'el-icon-caret-top'
              "
            ></i>
          </el-button>
          <el-input
            v-model="search"
            prefix-icon="el-icon-search"
            placeholder="请输入应用名称"
            style="width:180px;"
            @input="searchChange"
            class="ces_toolbar_inp"
          ></el-input>
        </div>
        <table-filter
          :show="showFliterList"
          :filter-list="filterList"
          @filter-change="filterChange"
          style="margin-top: 5px;"
        ></table-filter>
      </div>
      <app-list
        :data="appList"
        :card-type="cardType"
        @deployment-action="deploymentAction"
        @delete-action="deleteAction"
        :details-url="detailsUrl"
      ></app-list>
      <div class="flex_grow"></div>
      <comments-pagination
        :total="100"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="changePageSize"
        @current-change="changeCurrentPage"
      ></comments-pagination>
    </div>
    <div class="main_container" v-if="listType == 'table'">
      <ces-table
        class="r_yhgl_table"
        size="mini"
        url="tableData"
        input-placeholder="请输入应用名称"
        empty-text="暂时没数据"
        :detailsUrl="detailsUrl"
        :border="false"
        :headers="headers"
        :searchShow="true"
        :autoAdd="false"
        :stripe="true"
        :pageSizeShow="true"
        :filterList="filterList"
        :isIndex="false"
        @action-approval="approvalItem"
        @action-delete="deleteItem"
        @action-edit="editItem"
        @off-line="offLine"
        @goods-shelf="goodsShelf"
        style="margin-top: 50px;"
      ></ces-table>
    </div>
    <dialog-action
      ref="myConfirm"
      :confirm-options="confirmOptions"
    ></dialog-action>
  </div>
</template>

<script>
import tableFilter from "@/components/table-filter";
import appList from "@/components/app-list/app-list";
import cesTable 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,
    cesTable,
    dialogAction,
    commentsPagination,
  },
  data: () => ({
    level: 0, // 用户等级
    type: 0, // 访问的页面
    listType: "",
    cardType: "",
    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",
      },
    ],
    search: "",
    pageSizes: [10, 50, 100],
    pageSize: 10,
    currentPage: 1,
    confirmOptions: {
      title: "",
      message: "",
      btnCancelText: "",
      btnSubmitText: "",
      item: null,
    },
  }),
  computed: {
    ...mapState({
      yyglNav: "yyglNav",
    }),
    pathName() {
      return this.yyglNav[this.level][this.type];
    },
    detailsUrl() {
      let url = "";

      if (this.level == 0 && this.type == 0) {
        url = `/yygl/${this.level}/${this.type}/detail/`;
      } else if (this.level == 0 && this.type == 1) {
        url = `/yygl/${this.level}/${this.type}/approvaldetail/`;
      } else {
        url = `/yygl/${this.level}/${this.type}/detail/`;
      }

      return url;
    },
  },
  methods: {
    searchChange(value) {
      console.log(value);
    },
    filterChange(filter) {
      console.log(filter);
    },
    deploymentAction(item) {
      console.log("deployment " + item.name);
    },
    deleteAction(item) {
      if (this.cardType === 0) {
        this.confirmOptions.title = "删除提示";
        this.confirmOptions.message =
          "您需要先进行应用商店下架申请，应用处于下架状态时才能进行删除操作。";
        this.confirmOptions.btnCancelText = "";
        this.confirmOptions.btnSubmitText = "";
        this.confirmOptions.confirmSubmit = () => {
          console.log("deleteItem - " + item.name);
          this.$refs.myConfirm.hideModel();
        };
      } else if (this.cardType === 1) {
        this.confirmOptions.title = "是否删除部署的应用";
        this.confirmOptions.message =
          "该操作会导致正在调用该应用的用户被迫终止对应用的调用，删除前需向正在调用该应用的用户发送通知，自通知发送之日起，2日后应用将被删除。";
        this.confirmOptions.btnCancelText = "";
        this.confirmOptions.btnSubmitText = "发送通知";
        this.confirmOptions.confirmSubmit = () => {
          console.log("deleteItem - " + item.name);
          this.$refs.myConfirm.hideModel();
        };
      }

      this.$refs.myConfirm.showModel();
    },
    changePageSize(value) {
      this.pageSize = value;
      this.currentPage = 1;
    },
    changeCurrentPage(value) {
      this.currentPage = value;
    },
    approvalItem(item) {
      console.log("approval --- " + item.id);
    },
    deleteItem(item) {
      console.log("delete --- " + item.id);
    },
    editItem(item) {
      this.$router.push(`/yygl/${this.level}/${this.type}/edit/${item.id}`);
    },
    offLine(item) {
      console.log("off line --- " + item.id);
    },
    goodsShelf(item) {
      console.log("goods shelf", item.state);
    },
  },
  created() {
    this.level = parseInt(this.$route.params.level);
    this.type = parseInt(this.$route.params.type);

    let level = this.level;
    let type = this.type;

    // 普通用户 --- 应用仓库 card列表形式
    if (level === 0 && type === 0) {
      this.listType = "card";
      this.cardType = 0;
    }
    // 普通用户 --- 我部署的应用
    else if (level === 0 && type === 1) {
      this.listType = "card";
      this.cardType = 1;
    }
    // 普通用户 --- 申请的应用 card列表形式
    else if (level === 0 && type === 2) {
      this.listType = "table";

      this.headers = [
        { label: "应用名称", prop: "name", type: "href", align: "left" },
        { label: "应用版本", prop: "date", type: "", align: "center" },
        { label: "应用类型", prop: "address", type: "", align: "center" },
        { label: "业务领域", prop: "address", type: "", align: "center" },
        { label: "在线区域", prop: "address", type: "", align: "center" },
        { label: "申请类型", prop: "address", type: "", align: "center" },
        { label: "申请时间", prop: "address", type: "", align: "center" },
        { label: "申请状态", prop: "address", type: "", align: "center" },
      ];
    }
    // 普通用户 --- 审批的应用
    else if (level === 0 && type === 3) {
      this.listType = "table";
      this.headers = [
        { label: "应用名称", prop: "name", type: "href", align: "left" },
        { label: "应用版本", prop: "date", type: "", align: "center" },
        { label: "应用类型", prop: "address", type: "", align: "center" },
        { label: "业务领域", prop: "address", type: "", align: "center" },
        { label: "在线区域", prop: "address", type: "", align: "center" },
        { label: "申请类型", prop: "address", type: "", align: "center" },
        { label: "审批时间", prop: "address", type: "", align: "center" },
        { label: "审批状态", prop: "address", type: "", align: "center" },
        {
          label: "操作",
          type: "Button",
          align: "center",
          width: 160,
          btnList: [
            {
              type: "action-approval",
              label: "审批",
              line: "|",
            },
            {
              type: "action-delete",
              label: "删除",
            },
          ],
        },
      ];
    }

    // 组织管理员 --- 应用仓库管理
    else if (level === 1 && type === 0) {
      this.listType = "table";
      this.headers = [
        { label: "应用名称", prop: "name", type: "href", align: "left" },
        { label: "应用版本", prop: "date", type: "", align: "center" },
        { label: "应用类型", prop: "address", type: "", align: "center" },
        { label: "业务领域", prop: "address", type: "", align: "center" },
        { label: "在线状态", prop: "address", type: "", align: "center" },
        { label: "创建时间", prop: "address", type: "", align: "center" },
        {
          label: "操作",
          type: "Button",
          align: "center",
          width: 160,
          btnList: [
            {
              type: "goods-shelf",
            },
          ],
        },
      ];
    }
    // 组织管理员 --- 部署的应用
    else if (level === 1 && type === 1) {
      this.listType = "table";
      this.headers = [
        { label: "应用名称", prop: "name", type: "href", align: "left" },
        { label: "应用版本", prop: "date", type: "", align: "center" },
        { label: "应用类型", prop: "address", type: "", align: "center" },
        { label: "业务领域", prop: "address", type: "", align: "center" },
        { label: "上架区域", prop: "address", type: "", align: "center" },
        { label: "部署时间", prop: "address", type: "", align: "center" },
        { label: "部署区域", prop: "address", type: "", align: "center" },
      ];
    }
    // 组织管理员 --- 应用审批管理
    else if (level === 1 && type === 2) {
      this.listType = "table";
      this.headers = [
        { label: "应用名称", prop: "name", type: "", align: "left" },
        { label: "应用版本", prop: "date", type: "", align: "center" },
        { label: "应用类型", prop: "address", type: "", align: "center" },
        { label: "业务领域", prop: "address", type: "", align: "center" },
        { label: "在线区域", prop: "address", type: "", align: "center" },
        { label: "申请类型", prop: "address", type: "", align: "center" },
        { label: "审批时间", prop: "address", type: "", align: "center" },
        { label: "申请状态", prop: "address", type: "", align: "center" },
        {
          label: "操作",
          type: "Button",
          align: "center",
          width: 160,
          btnList: [
            {
              type: "action-approval",
              label: "审批",
              line: "|",
            },
            {
              type: "action-delete",
              label: "删除",
            },
          ],
        },
      ];
    }

    // 超级管理员 --- 平台应用管理
    else if (level === 2 && type === 0) {
      this.listType = "table";
      this.headers = [
        { label: "应用名称", prop: "name", type: "href", align: "left" },
        { label: "应用版本", prop: "date", type: "", align: "center" },
        { label: "应用类型", prop: "address", type: "", align: "center" },
        { label: "业务领域", prop: "address", type: "", align: "center" },
        { label: "在线状态", prop: "address", type: "", align: "center" },
        { label: "所属组织", prop: "address", type: "", align: "center" },
        {
          label: "操作",
          type: "Button",
          align: "center",
          width: 240,
          btnList: [
            {
              type: "action-edit",
              label: "编辑",
              line: "|",
            },
            {
              type: "off-line",
              label: "下线",
              line: "|",
            },
            {
              type: "action-delete",
              label: "删除",
            },
          ],
        },
      ];
    }
    // 超级管理员 --- 应用部署管理
    else if (level === 2 && type === 1) {
      this.listType = "table";
      this.headers = [
        { label: "应用名称", prop: "name", type: "href", align: "left" },
        { label: "应用版本", prop: "date", type: "", align: "center" },
        { label: "应用类型", prop: "address", type: "", align: "center" },
        { label: "业务领域", prop: "address", type: "", align: "center" },
        { label: "上架区域", prop: "address", type: "", align: "center" },
        { label: "所属组织", prop: "address", type: "", align: "center" },
        { label: "部署时间", prop: "address", type: "", align: "center" },
        { label: "部署区域", prop: "address", type: "", align: "center" },
      ];
    }
    // 超级管理员 --- 应用审批管理
    else if (level === 2 && type === 2) {
      this.listType = "table";
      this.headers = [
        { label: "应用名称", prop: "name", type: "", align: "left" },
        { label: "应用版本", prop: "date", type: "", align: "center" },
        { label: "应用类型", prop: "address", type: "", align: "center" },
        { label: "业务领域", prop: "address", type: "", align: "center" },
        { label: "在线区域", prop: "address", type: "", align: "center" },
        { label: "申请类型", prop: "address", type: "", align: "center" },
        { label: "审批时间", prop: "address", type: "", align: "center" },
        { label: "申请状态", prop: "address", type: "", align: "center" },
        {
          label: "操作",
          type: "Button",
          align: "center",
          width: 160,
          btnList: [
            {
              type: "action-approval",
              label: "审批",
              line: "|",
            },
            {
              type: "action-delete",
              label: "删除",
            },
          ],
        },
      ];
    }

    // Error
    else {
      throw Error("The page doesn't exist");
    }
  },
};
</script>

<style scoped>
.list_container {
  height: 100%;
  padding: 0 20px;
  overflow: auto;
}
.main_container {
  min-height: calc(100% - 84px);
  padding: 15px 20px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  margin-bottom: 42px;
}
.main_container.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.flex_grow {
  flex-grow: 1;
}
.filter_action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
