<template>
  <div class="list_container">
    <el-breadcrumb separator="/" class="bread_crumb">
      <el-breadcrumb-item>我的服务</el-breadcrumb-item>
      <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="table_container">
      <ces-table
        class="r_yhgl_table"
        size="mini"
        url="tableData"
        :detailsUrl="detailsUrl"
        :border="false"
        :headers="headers"
        :searchShow="true"
        :autoAdd="false"
        :emptyText="emptyText"
        :stripe="true"
        :pageSizeShow="true"
        :filterList="filterList"
        :isIndex="false"
        @action-delete="deleteItem"
        @action-edit="editItem"
        @action-sold-out="soldOutItem"
        @action-sold-out-2="soldOutItem2"
        @action-cancel="cancelItem"
        @action-approval="approvalItem"
        @action-detail="detailItem"
        @action-allot="allotItem"
      ></ces-table>
    </div>
    <dialog-action
      ref="myConfirm"
      :confirm-options="confirmOptions"
    ></dialog-action>
  </div>
</template>

<script>
import cesTable from "@/components/table-um";
import dialogAction from "@/components/dialog-action";
import { mapState } from "vuex";

export default {
  data: () => ({
    level: 0, // 用户等级
    type: 0, // 访问的页面
    headers: [],
    url: "",
    confirmOptions: {
      title: "",
      message: "",
      btnCancelText: "",
      btnSubmitText: "",
      item: null,
    },
    emptyText: "暂时没数据",
    filterList: [
      {
        name: "服务类型",
        prop: "fwlx",
        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"],
      },
      {
        name: "服务领域",
        prop: "fwly",
        data: [
          "数据服务",
          "时空服务",
          "视频服务",
          "感知服务",
          "综合服务",
          "数据服务2",
          "时空服务2",
          "视频服务2",
          "感知服务2",
          "综合服务2",
          "感知服务3",
          "综合服务3",
        ],
      },
      {
        name: "开放程度",
        prop: "kfcd",
        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"],
      },
      {
        name: "服务状态",
        prop: "fwzt",
        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"],
      },
    ],
  }),
  computed: {
    ...mapState({
      fwglNav: "fwglNav",
    }),
    pathName() {
      return this.fwglNav[this.level][this.type];
    },
    detailsUrl() {
      let url = "";

      if (this.level == 0 && this.type == 1) {
        url = `/fwgl/${this.level}/${this.type}/applyserviceedit/`;
      } else {
        url = `/fwgl/${this.level}/${this.type}/servicedetail/`;
      }

      return url;
    },
  },
  components: {
    cesTable,
    dialogAction,
  },
  methods: {
    initHeader() {
      let level = this.level;
      let type = this.type;

      // 普通用户 --- 注册发布的服务
      if (level == 0 && type == 0) {
        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: "left" },
          {
            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: "action-sold-out",
                label: "申请下架",
                line: "|",
              },
              {
                type: "action-delete",
                label: "删除",
              },
            ],
          },
        ];
      }
      // 普通用户 --- 申请的服务
      else if (level == 0 && type == 1) {
        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: "left" },
          { label: "申请时间", prop: "address", type: "", align: "center" },
          { label: "服务类型", prop: "address", type: "", align: "center" },
          { label: "申请状态", prop: "address", type: "", align: "center" },
          {
            label: "操作",
            type: "Button",
            align: "center",
            btnList: [
              {
                type: "action-delete",
                label: "删除",
              },
            ],
          },
        ];
      }
      // 普通用户 --- 审批的服务
      else if (level == 0 && type == 2) {
        this.headers = [
          { label: "服务名称", prop: "name", type: "", align: "left" },
          { label: "服务领域", prop: "address", type: "", align: "center" },
          { label: "开放程度", prop: "address", type: "", align: "center" },
          { label: "请求方式", prop: "address", type: "", align: "center" },
          { label: "服务描述", prop: "address", type: "", align: "left" },
          { 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 == 0 && type == 3) {
        this.headers = [
          { label: "工作区域", prop: "name", type: "", align: "center" },
          { label: "网络环境", prop: "name", type: "", align: "center" },
          { label: "CPU（核）", prop: "name", type: "", align: "center" },
          { label: "内存（GB）", prop: "name", type: "", align: "center" },
          { label: "资源总量（GB）", prop: "name", type: "", align: "center" },
          { label: "实例数（个）", prop: "name", type: "", align: "center" },
          { label: "申请时间", prop: "name", type: "", align: "center" },
          { label: "申请状态", prop: "name", type: "", align: "center" },
          {
            label: "操作",
            type: "Button",
            align: "center",
            width: 160,
            btnList: [
              {
                type: "action-detail",
                label: "查看详情",
              },
            ],
          },
        ];
      }

      // 组织管理员 --- 组织服务管理
      else if (level == 1 && type == 0) {
        this.headers = [
          { label: "服务名称", prop: "name", type: "href", align: "left" },
          { label: "服务领域", prop: "date", type: "", align: "center" },
          { label: "开放程度", prop: "date", type: "", align: "center" },
          { label: "请求方式", prop: "date", type: "", align: "center" },
          { label: "服务描述", prop: "date", type: "", align: "left" },
          { label: "注册发布时间", prop: "date", type: "", align: "center" },
          { label: "服务类型", prop: "date", type: "", align: "center" },
          { label: "服务状态", prop: "date", type: "", align: "center" },
        ];
      }
      // 组织管理员 --- 服务审批管理
      else if (level == 1 && type == 1) {
        this.headers = [
          { label: "服务名称", prop: "name", type: "", align: "left" },
          { label: "服务领域", prop: "date", type: "", align: "center" },
          { label: "开放程度", prop: "date", type: "", align: "center" },
          { label: "请求方式", prop: "date", type: "", align: "center" },
          { label: "服务描述", prop: "date", type: "", align: "left" },
          { label: "审批时间", prop: "date", type: "", align: "center" },
          { label: "服务类型", prop: "date", type: "", align: "center" },
          { label: "审批状态", prop: "date", 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 == 2) {
        this.headers = [
          { label: "工作区域", prop: "name", type: "", align: "center" },
          { label: "网络环境", prop: "name", type: "", align: "center" },
          { label: "CPU（核）", prop: "name", type: "", align: "center" },
          { label: "内存（GB）", prop: "name", type: "", align: "center" },
          { label: "资源总量（GB）", prop: "name", type: "", align: "center" },
          { label: "实例数（个）", prop: "name", type: "", align: "center" },
          { label: "使用用户", prop: "name", type: "", align: "center" },
          { label: "用户申请时间", prop: "name", type: "", align: "center" },
          {
            label: "操作",
            type: "Button",
            align: "center",
            width: 160,
            btnList: [
              {
                type: "action-allot",
                label: "分配",
              },
            ],
          },
        ];
      }

      // 超级管理员 --- 组织服务管理
      else if (level == 2 && type == 0) {
        this.headers = [
          { label: "服务名称", prop: "name", type: "href", align: "left" },
          { label: "服务领域", prop: "date", type: "", align: "center" },
          { label: "开放程度", prop: "date", type: "", align: "center" },
          { label: "请求方式", prop: "date", type: "", align: "center" },
          { label: "服务描述", prop: "date", type: "", align: "left" },
          { label: "注册发布时间", prop: "date", type: "", align: "center" },
          { label: "服务类型", prop: "date", type: "", align: "center" },
          {
            label: "操作",
            type: "Button",
            align: "center",
            width: 240,
            btnList: [
              {
                type: "action-edit",
                label: "编辑",
                line: "|",
              },
              {
                type: "action-sold-out-2",
                label: "下架",
                line: "|",
              },
              {
                type: "action-delete",
                label: "删除",
              },
            ],
          },
        ];
      }
      // 超级管理员 --- 服务审批管理
      else if (level == 2 && type == 1) {
        this.headers = [
          { label: "服务名称", prop: "name", type: "", align: "left" },
          { label: "服务领域", prop: "date", type: "", align: "center" },
          { label: "开放程度", prop: "date", type: "", align: "center" },
          { label: "请求方式", prop: "date", type: "", align: "center" },
          { label: "服务描述", prop: "date", type: "", align: "left" },
          { label: "审批时间", prop: "date", type: "", align: "center" },
          { label: "服务类型", prop: "date", type: "", align: "center" },
          { label: "审批状态", prop: "date", 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 == 2) {
        this.headers = [
          { label: "所属组织", prop: "name", type: "", align: "center" },
          { label: "CPU使用量", prop: "name", type: "", align: "center" },
          { label: "内存使用量", prop: "name", type: "", align: "center" },
          { label: "工作区域数量", prop: "name", type: "", align: "center" },
          { label: "创建时间", prop: "name", type: "", align: "center" },
          {
            label: "操作",
            type: "Button",
            align: "center",
            btnList: [
              {
                type: "action-delete",
                label: "删除",
              },
            ],
          },
        ];
      }

      // Error
      else {
        this.headers = [];
        throw Error("The page doesn't exist");
      }
    },
    deleteItem(item) {
      this.confirmOptions.title = "";
      this.confirmOptions.message = "是否删除该条服务？";
      this.confirmOptions.btnCancelText = "";
      this.confirmOptions.btnSubmitText = "";
      this.confirmOptions.confirmSubmit = () => {
        console.log("deleteItem - " + item.name);
        this.$refs.myConfirm.hideModel();
      };
      this.$refs.myConfirm.showModel();
    },
    editItem(item) {
      this.$router.push(
        `/fwgl/${this.level}/${this.type}/serviceedit/${item.id}`
      );
    },
    soldOutItem(item) {
      this.confirmOptions.title = "提示";
      this.confirmOptions.message =
        "下架此服务会导致用户被迫暂停对服务的调用，下架前需向超级管理员发送通知，超级管理员通过后此服务将会从服务超市中下架。";
      this.confirmOptions.btnCancelText = "";
      this.confirmOptions.btnSubmitText = "发送通知";
      this.confirmOptions.confirmSubmit = () => {
        console.log("soldOutItem - " + item.name);
        this.$refs.myConfirm.hideModel();
      };
      this.$refs.myConfirm.showModel();
    },
    soldOutItem2(item) {
      this.confirmOptions.title = "提示";
      this.confirmOptions.message = "下架此服务会导致用户被迫暂停对服务的调用";
      this.confirmOptions.btnCancelText = "";
      this.confirmOptions.btnSubmitText = "确定";
      this.confirmOptions.confirmSubmit = () => {
        console.log("soldOutItem2 - " + item.name);
        this.$refs.myConfirm.hideModel();
      };
      this.$refs.myConfirm.showModel();
    },
    cancelItem(item) {
      console.log("cancelItem - " + item.name);
    },
    approvalItem(item) {
      this.$router.push(
        `/fwgl/${this.level}/${this.type}/approvalserviceedit/${item.id}`
      );
    },
    detailItem(item) {
      console.log("detailItem - " + item.name);
    },
    allotItem(item) {
      console.log("allotItem - " + item.name);
    },
    confirmSubmit(item) {
      console.log(item.name);
    },
  },
  created() {
    this.level = parseInt(this.$route.params.level);
    this.type = parseInt(this.$route.params.type);
    this.initHeader();
  },
};
</script>

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