<template>
  <div class="list_container">
    <el-breadcrumb separator="/" class="bread_crumb">
      <el-breadcrumb-item>我的服务</el-breadcrumb-item>
      <el-breadcrumb-item>{{ $route.params.name }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="table_container">
      <ces-table
        class="r_yhgl_table"
        size="mini"
        url="tableData"
        detailsUrl="/fwgl/servicedetail/"
        :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-cancel="cancelItem"
        @action-examine="examineItem"
        @action-detail="detailItem"
      ></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";

export default {
  data: () => ({
    headers: [],
    url: "",
    detailsUrl: "ss/",
    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: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"],
      },
    ],
  }),
  components: {
    cesTable,
    dialogAction,
  },
  methods: {
    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/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();
    },
    cancelItem(item) {
      console.log("cancelItem - " + item.name);
    },
    examineItem(item) {
      console.log("examineItem - " + item.name);
    },
    detailItem(item) {
      console.log("detailItem - " + item.name);
    },
    confirmSubmit(item) {
      console.log(item.name);
    },
  },
  mounted() {
    switch (parseInt(this.$route.params.type)) {
      case 0:
        this.headers = [
          { label: "服务名称", prop: "name", type: "href", align: "left" },
          { label: "服务url", 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: "删除",
              },
            ],
          },
        ];
        break;
      case 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: "left" },
          { label: "服务类型", prop: "address", type: "", align: "center" },
          {
            label: "操作",
            type: "Button",
            align: "center",
            width: 160,
            btnList: [
              {
                type: "action-cancel",
                label: "取消",
                line: "|",
              },
              {
                type: "action-delete",
                label: "删除",
              },
            ],
          },
        ];
        break;
      case 2:
        this.headers = [
          { label: "服务名称", prop: "name", type: "href", 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-examine",
                label: "审批",
                line: "|",
              },
              {
                type: "action-delete",
                label: "删除",
              },
            ],
          },
        ];
        break;
      case 3:
        this.headers = [
          { label: "工作区域", prop: "name", type: "href", align: "left" },
          { 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: "查看详情",
              },
            ],
          },
        ];
        break;
      default:
        this.headers = [
          { label: "服务名称", prop: "name", type: "href", align: "left" },
          { label: "服务url", 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: 160,
            btnList: [
              {
                type: "action-edit",
                label: "编辑",
                line: "|",
              },
              {
                type: "action-sold-out",
                label: "申请下架",
                line: "|",
              },
              {
                type: "action-delete",
                label: "删除",
              },
            ],
          },
        ];
        break;
    }
  },
};
</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>
