<template>
  <div class="service_management_list">
    <apass-list
      ref="list"
      search-placeholder="请输入关键字"
      :list-total="listTotal"
      :list-filter="filterList"
      :other-filter="filterList2"
      :list-header="listHeader"
      :list-data="listData"
      :list-padding-left="paddingLeft"
      @list-action="init"
    >
      <el-breadcrumb separator="/" slot="breadcrumb">
        <el-breadcrumb-item :to="`/fwgl/${level}`">我的服务</el-breadcrumb-item>
        <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
      </el-breadcrumb>

      <template slot="top">
        <div class="zuzhi_preview" v-if="cloud_zuzhi">
          <div class="cloud_title">
            <span>{{ userInfo && userInfo.department_name }}</span>
            <span>
              {{ "在用工作区域：" + cloud_zuzhi.count_zy + "个" }}
            </span>
          </div>
          <div class="dashboard_contaner">
            <div
              class="dashborad_list"
              v-for="(item, index) in cloud_zuzhi.dashboard_list"
              :key="index"
            >
              <chart
                :options="getDashboardOption(item)"
                class="dashboard_chart"
              />
              <p class="dashboard_info">
                <span>物理总量</span>
                <span v-text="item.total + item.unit"></span>
              </p>
              <p class="dashboard_info">
                <span>剩余量</span>
                <span v-text="item.total - item.value + item.unit"></span>
              </p>
            </div>
          </div>
        </div>

        <div class="admin_preview" v-if="cloud_admin">
          <div class="admin_preview-left">
            <div class="cloud_title">
              <span>云资源概览</span>
            </div>
            <div class="dashboard_contaner">
              <div
                class="dashborad_list"
                v-for="(item, index) in cloud_admin.dashboard_list"
                :key="index"
              >
                <chart
                  :options="getDashboardOption(item)"
                  class="dashboard_chart"
                />
                <p class="dashboard_info">
                  <span>物理总量</span>
                  <span v-text="item.total + item.unit"></span>
                </p>
                <p class="dashboard_info">
                  <span>剩余量</span>
                  <span v-text="item.total - item.value + item.unit"></span>
                </p>
              </div>
            </div>
          </div>
          <div class="admin_preview-right apass_button">
            <el-button type="primary" size="mini" @click="approveWorkspace">
              工作区域审批（{{ cloud_admin.unapprove }}）
            </el-button>
            <histogramScroll
              :xAxis="cloud_admin.cloumn.xAxis"
              :series="cloud_admin.cloumn.series"
            ></histogramScroll>
          </div>
        </div>
      </template>

      <template slot="header-left">
        <div class="cloud_title" v-if="cloud_admin">
          <span>组织概览</span>
        </div>
      </template>

      <!-- 超管的云资源管理展示的是组织列表 -->
      <template slot="list" v-if="level == 2 && type == 2">
        <organization-list
          slot="list"
          :data="listData"
          :details-url="`/fwgl/${level}/${type}/organizationCloudResource/`"
          :hide-delete="true"
        ></organization-list>
      </template>
    </apass-list>

    <apass-dialog
      ref="dialog"
      :title="dialogInfo.title"
      :msg="dialogInfo.msg"
      :submit="dialogInfo.submit"
    ></apass-dialog>

    <allot-info-confirm
      ref="allotConfirm"
      @allot-success="allotSuccess"
    ></allot-info-confirm>
  </div>
</template>

<script>
import { graphic } from "echarts/lib/export";
import { mapState } from "vuex";
import helper from "@/services/helper.js";
import apassList from "@/components/apass-list";
import apassDialog from "@/components/apass-dialog";
import allotInfoConfirm from "@/components/allot-info-confirm";
import organizationList from "@/components/organization-list/organization-list";
import histogramScroll from "@/components/e-charts/histogramScroll";

export default {
  components: {
    apassList,
    apassDialog,
    allotInfoConfirm,
    organizationList,
    histogramScroll,
  },
  data: () => ({
    level: 0, // 用户等级
    type: 0, // 访问的页面
    paddingLeft: 35,
    listTotal: 0,
    listHeader: [],
    listData: [],
    filterList: [],
    filterList2: [],
    otherFilter: [],
    dialogInfo: {
      title: "",
      msg: "",
      submit: null,
    },
    listUrl: "",
    deleteUrl: "",
    tempFliter: null,
    cloud_zuzhi: null,
    cloud_admin: null,
    cloud_admin_warn: false,
  }),
  computed: {
    ...mapState({
      fwglNav: "fwglNav",
      userInfo: "userInfo",
    }),
    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;
    },
  },
  methods: {
    initFilter() {
      if (this.type == 2) {
        //
      } else {
        Promise.all([
          this.$http.get("/apaas/service/v3/service/manager/servtype"),
          this.$http.get("/apaas/service/v3/service/manager/servarea"),
        ])
          .then((response) => {
            let data = response.map((item) => {
              return {
                name: item.body.data[0].type_name,
                prop: item.body.data[0].type_code,
                data: item.body.data.map((v) => ({
                  name: v.name,
                  value: v.id,
                })),
              };
            });

            this.filterList = [...data, ...this.otherFilter];
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    initHeader() {
      let _self = this;
      let level = this.level;
      let type = this.type;

      // 普通用户 --- 注册发布的服务
      if (level == 0 && type == 0) {
        this.listUrl = "/apaas/service/v3/service/manager/list";
        this.deleteUrl = "/apaas/service/v3/service/manager";
        this.listHeader = [
          {
            label: "服务名称",
            prop: "name",
            type: "button",
            callback: this.detailItem,
          },
          {
            label: "服务领域",
            prop: "sectors_name",
            align: "center",
          },
          {
            label: "开放程度",
            prop: "openness_name",
            align: "center",
          },
          {
            label: "服务描述",
            prop: "descript",
          },
          {
            label: "注册发布时间",
            prop: "create_time",
            getText(item) {
              let date = item.create_time || "";
              return helper.dateStringTransform(date);
            },
            width: 180,
            align: "center",
          },
          {
            label: "服务类型",
            prop: "data_service_type1_name",
            align: "center",
          },
          {
            label: "操作",
            type: "buttons",
            align: "center",
            width: 300,
            actionList: [
              {
                label: "编辑",
                callback: this.editItem,
              },
              {
                getLabel(item) {
                  return (
                    ["申请上架", "申请下架", "上架审核中", "下架审核中"][
                      item.state
                    ] || "-"
                  );
                },
                callback(item) {
                  if (item.state == 0) {
                    _self.applyForSoldUpItem(item);
                  } else if (item.state == 1) {
                    _self.applyForSoldOutItem(item);
                  }
                },
                disabledRule(item) {
                  return item.state == 2 || item.state == 3;
                },
              },
              {
                label: "删除",
                callback: this.deleteItem,
                class: "warn",
                disabledRule(item) {
                  return item.state != 2;
                },
              },
            ],
          },
        ];
        this.otherFilter = [
          {
            name: "开放程度",
            prop: "openness",
            data: [
              {
                name: "共享",
                value: 1,
              },
              {
                name: "受限",
                value: 2,
              },
              {
                name: "敏感",
                value: 3,
              },
            ],
          },
          {
            name: "服务状态",
            prop: "state",
            data: [
              {
                name: "已下架",
                value: 0,
              },
              {
                name: "已上架",
                value: 1,
              },
              {
                name: "上架审核中",
                value: 2,
              },
              {
                name: "下架审核中",
                value: 3,
              },
            ],
          },
        ];
      }
      // 普通用户 --- 申请的服务
      else if (level == 0 && type == 1) {
        this.listUrl = "/apaas/service/v3/service/apply/service/list";
        this.deleteUrl = "/apaas/service/v3/service/apply/service";
        this.listHeader = [
          {
            label: "服务名称",
            prop: "name",
            type: "button",
            callback: this.detailItem,
          },
          {
            label: "服务领域",
            prop: "sectors_name",
            align: "center",
          },
          {
            label: "开放程度",
            prop: "openness_name",
            align: "center",
          },
          {
            label: "服务描述",
            prop: "descript",
          },
          {
            label: "申请时间",
            prop: "service_apply_info",
            getText(item) {
              let date =
                (item.service_apply_info &&
                  item.service_apply_info.apply_time) ||
                "";
              return helper.dateStringTransform(date);
            },
            width: 180,
            align: "center",
          },
          {
            label: "服务类型",
            prop: "data_service_type1_name",
            align: "center",
          },
          {
            label: "申请状态",
            prop: "service_apply_info",
            getText(item) {
              return ["-", "待审批", "审批中", "审批通过", "审批未通过"][
                (item.service_apply_info &&
                  item.service_apply_info.approval_status) ||
                  0
              ];
            },
            align: "center",
          },
          {
            label: "操作",
            type: "buttons",
            align: "center",
            actionList: [
              {
                label: "删除",
                callback: this.deleteItem,
                disabledRule(item) {
                  return item.service_apply_info.approval_status === 1;
                },
              },
            ],
          },
        ];
        this.otherFilter = [
          {
            name: "开放程度",
            prop: "openness",
            data: [
              {
                name: "共享",
                value: 1,
              },
              {
                name: "受限",
                value: 2,
              },
              {
                name: "敏感",
                value: 3,
              },
            ],
          },
          {
            name: "申请状态",
            prop: "state",
            data: [
              {
                name: "待审批",
                value: 1,
              },
              {
                name: "审批中",
                value: 2,
              },
              {
                name: "审批通过",
                value: 3,
              },
              {
                name: "审批未通过",
                value: 4,
              },
            ],
          },
        ];
      }
      // 普通用户 --- 云资源服务
      else if (level == 0 && type == 2) {
        this.listUrl = "/apaas/service/v3/resource/user/apply/list";
        this.paddingLeft = 0;
        this.filterList2 = [
          {
            name: "初次申请状态",
            prop: "state1",
            default: "",
            options: [
              {
                name: "全部",
                value: "",
              },
              {
                name: "待审批",
                value: 0,
              },
              {
                name: "审批通过",
                value: 1,
              },
              {
                name: "审批未通过",
                value: -1,
              },
            ],
          },
          {
            name: "资源调整状态",
            prop: "state2",
            default: "",
            options: [
              {
                name: "全部",
                value: "",
              },
              {
                name: "待审批",
                value: 0,
              },
              {
                name: "审批通过",
                value: 1,
              },
              {
                name: "审批未通过",
                value: -1,
              },
            ],
          },
        ];
        this.listHeader = [
          {
            label: "运行状态",
            align: "center",
            type: "image",
            getImage(item) {
              return item.state == 1
                ? require("@/assets/imgs/ic_true.png")
                : require("@/assets/imgs/ic_failed.png");
            },
          },
          {
            label: "工作区域",
            prop: "name_space",
            type: "button",
            callback: this.cloudDetail,
          },
          {
            label: "CPU（核）",
            prop: "cpu",
            align: "center",
          },
          {
            label: "内存（GB）",
            prop: "memory",
            align: "center",
          },
          {
            label: "容器组（个）",
            prop: "containers",
            align: "center",
          },
          {
            label: "数据盘（块/GB）",
            type: "tooltip",
            align: "center",
            getLength(item) {
              let disks = (item.disk && item.disk.trim().split(" ")) || [];
              return disks.length;
            },
            getText(item) {
              let disks = (item.disk && item.disk.trim().split(" ")) || [];
              return disks[0];
            },
            getContent(item) {
              let disks = (item.disk && item.disk.trim().split(" ")) || [];
              let htmlStr = `<span>数据盘（块/GB）</span><br />`;

              disks.forEach((v) => {
                htmlStr += `<span>数据盘：${v}</span><br />`;
              });

              return htmlStr;
            },
          },
          {
            label: "申请时间",
            prop: "apply_time",
            align: "center",
          },
          {
            label: "初次申请状态",
            align: "center",
            getText(item) {
              return ["未通过", "待审批", "通过"][
                (item.approve_state || 0) + 1
              ];
            },
          },
          {
            label: "资源调整结果",
            align: "center",
            getText(item) {
              if (item.apply_type === 0) return "-";

              return ["未通过", "待审批", "通过"][
                (item.approve_update_state || 0) + 1
              ];
            },
          },
        ];
      }

      // 组织管理员 --- 组织服务管理
      else if (level == 1 && type == 0) {
        this.listUrl = "/apaas/service/v3/service/manager/list";
        this.listHeader = [
          {
            label: "服务名称",
            prop: "name",
            type: "button",
            callback: this.detailItem,
          },
          {
            label: "服务领域",
            prop: "sectors_name",
            align: "center",
          },
          {
            label: "开放程度",
            prop: "openness_name",
            align: "center",
          },
          {
            label: "请求方式",
            prop: "req_type",
            getText(item) {
              return ["-", "GET", "POST", "PUT", "DELETE"][item.req_type || 0];
            },
            align: "center",
          },
          {
            label: "服务描述",
            prop: "descript",
          },
          {
            label: "注册发布时间",
            prop: "create_time",
            getText(item) {
              let date = item.create_time || "";
              return helper.dateStringTransform(date);
            },
            width: 180,
            align: "center",
          },
          {
            label: "服务类型",
            prop: "data_service_type1_name",
            align: "center",
          },
          {
            label: "服务状态",
            prop: "state",
            getText(item) {
              return ["已下架", "已上架", "上架审核中", "下架审核中"][
                item.state
              ];
            },
            align: "center",
          },
        ];
        this.otherFilter = [
          {
            name: "开放程度",
            prop: "openness",
            data: [
              {
                name: "共享",
                value: 1,
              },
              {
                name: "受限",
                value: 2,
              },
              {
                name: "敏感",
                value: 3,
              },
            ],
          },
          {
            name: "服务状态",
            prop: "state",
            data: [
              {
                name: "已下架",
                value: 0,
              },
              {
                name: "已上架",
                value: 1,
              },
              {
                name: "上架审核中",
                value: 2,
              },
              {
                name: "下架审核中",
                value: 3,
              },
            ],
          },
        ];
      }
      // 组织管理员 --- 服务审批管理
      else if (level == 1 && type == 1) {
        this.listUrl = "/apaas/service/v3/service/approval/applied/list";
        this.deleteUrl = "/apaas/service/v3/service/approval/applied";
        this.listHeader = [
          {
            label: "服务名称",
            prop: "name",
          },
          {
            label: "服务领域",
            prop: "sectors_name",
            align: "center",
          },
          {
            label: "开放程度",
            prop: "openness_name",
            align: "center",
          },
          {
            label: "请求方式",
            prop: "req_type",
            getText(item) {
              return ["-", "GET", "POST", "PUT", "DELETE"][item.req_type || 0];
            },
            align: "center",
          },
          {
            label: "服务描述",
            prop: "descript",
          },
          {
            label: "审批时间",
            prop: "service_apply_info",
            getText(item) {
              let date =
                (item.service_apply_info &&
                  item.service_apply_info.approval_time) ||
                "";

              return item.service_apply_info &&
                item.service_apply_info.approval_status == 1
                ? helper.dateStringTransform(date)
                : "-";
            },
            width: 180,
            align: "center",
          },
          {
            label: "服务类型",
            prop: "data_service_type1_name",
            align: "center",
          },
          {
            label: "审批状态",
            prop: "service_apply_info",
            getText(item) {
              return ["-", "已审批", "待审批"][
                (item.service_apply_info &&
                  item.service_apply_info.approval_status) ||
                  0
              ];
            },
            align: "center",
          },
          {
            label: "操作",
            type: "buttons",
            align: "center",
            width: 160,
            actionList: [
              {
                getLabel(item) {
                  return item.service_apply_info.approval_status === 1
                    ? "详情"
                    : "审批";
                },
                callback: this.approvalItem,
              },
            ],
          },
        ];
        this.otherFilter = [
          {
            name: "开放程度",
            prop: "openness",
            data: [
              {
                name: "共享",
                value: 1,
              },
              {
                name: "受限",
                value: 2,
              },
              {
                name: "敏感",
                value: 3,
              },
            ],
          },
          {
            name: "审批状态",
            prop: "state",
            data: [
              {
                name: "已审批",
                value: 1,
              },
              {
                name: "待审批",
                value: 2,
              },
            ],
          },
        ];
      }
      // 组织管理员 --- 云资源管理
      else if (level == 1 && type == 2) {
        this.listUrl = "/apaas/service/v3/resource/user/apply/list";
        this.paddingLeft = 0;
        this.filterList2 = [
          {
            name: "初次申请状态",
            prop: "state1",
            default: "",
            options: [
              {
                name: "全部",
                value: "",
              },
              {
                name: "待审批",
                value: 0,
              },
              {
                name: "审批通过",
                value: 1,
              },
              {
                name: "审批未通过",
                value: -1,
              },
            ],
          },
          {
            name: "资源调整状态",
            prop: "state2",
            default: "",
            options: [
              {
                name: "全部",
                value: "",
              },
              {
                name: "待审批",
                value: 0,
              },
              {
                name: "审批通过",
                value: 1,
              },
              {
                name: "审批未通过",
                value: -1,
              },
            ],
          },
        ];
        this.listHeader = [
          {
            label: "运行状态",
            align: "center",
            type: "image",
            getImage(item) {
              return item.state == 1
                ? require("@/assets/imgs/ic_true.png")
                : require("@/assets/imgs/ic_failed.png");
            },
          },
          {
            label: "工作区域名称",
            prop: "name_space",
            type: "button",
            callback: this.cloudDetail,
          },
          {
            label: "CPU（核）",
            prop: "cpu",
            align: "center",
          },
          {
            label: "内存（GB）",
            prop: "memory",
            align: "center",
          },
          {
            label: "容器组（个）",
            prop: "containers",
            align: "center",
          },
          {
            label: "数据盘（块/GB）",
            type: "tooltip",
            align: "center",
            getLength(item) {
              let disks = (item.disk && item.disk.trim().split(" ")) || [];
              return disks.length;
            },
            getText(item) {
              let disks = (item.disk && item.disk.trim().split(" ")) || [];
              return disks[0];
            },
            getContent(item) {
              let disks = (item.disk && item.disk.trim().split(" ")) || [];
              let htmlStr = `<span>数据盘（块/GB）</span><br />`;

              disks.forEach((v) => {
                htmlStr += `<span>数据盘：${v}</span><br />`;
              });

              return htmlStr;
            },
          },
          {
            label: "申请用户",
            prop: "user_name",
            align: "center",
          },
          {
            label: "业务系统名",
            prop: "system_name",
            align: "center",
          },
          {
            label: "初次申请状态",
            align: "center",
            getText(item) {
              return ["未通过", "待审批", "通过"][
                (item.approve_state || 0) + 1
              ];
            },
          },
          {
            label: "资源调整结果",
            align: "center",
            getText(item) {
              if (item.apply_type === 0) return "-";

              return ["未通过", "待审批", "通过"][
                (item.approve_update_state || 0) + 1
              ];
            },
          },
          {
            label: "用户申请时间",
            prop: "apply_time",
            align: "center",
            width: 180,
          },
          {
            label: "操作",
            type: "buttons",
            align: "center",
            width: 80,
            actionList: [
              {
                getLabel(item) {
                  if (item.approve_state !== 1) {
                    return "-";
                  }

                  return item.approve_state === 1 && item.use_uid === ""
                    ? "分配"
                    : "已分配";
                },
                callback: this.cloudAllot,
                disabledRule(item) {
                  return !(item.approve_state === 1 && item.use_uid === "");
                },
              },
            ],
          },
        ];
      }

      // 超级管理员 --- 平台服务管理
      else if (level == 2 && type == 0) {
        this.listUrl = "/apaas/service/v3/service/manager/list";
        this.deleteUrl = "/apaas/service/v3/service/manager";
        this.listHeader = [
          {
            label: "服务名称",
            prop: "name",
            type: "button",
            callback: this.detailItem,
          },
          {
            label: "服务领域",
            prop: "sectors_name",
            align: "center",
          },
          {
            label: "开放程度",
            prop: "openness_name",
            align: "center",
          },
          {
            label: "请求方式",
            prop: "req_type",
            getText(item) {
              return ["-", "GET", "POST", "PUT", "DELETE"][item.req_type || 0];
            },
            align: "center",
          },
          {
            label: "服务描述",
            prop: "descript",
          },
          {
            label: "注册发布时间",
            prop: "create_time",
            getText(item) {
              let date = item.create_time || "";
              return helper.dateStringTransform(date);
            },
            width: 180,
            align: "center",
          },
          {
            label: "服务类型",
            prop: "data_service_type1_name",
            align: "center",
          },
          {
            label: "操作",
            type: "buttons",
            align: "center",
            width: 300,
            actionList: [
              {
                label: "编辑",
                callback: this.editItem,
              },
              {
                getLabel(item) {
                  if (item.state == 0 || item.state == 2) {
                    return "上架";
                  } else if (item.state == 1 || item.state == 3) {
                    return "下架";
                  } else {
                    return "-";
                  }
                },
                callback(item) {
                  if (item.state == 2) {
                    return _self.soldUpItem(item);
                  } else if (item.state == 3) {
                    return _self.soldOutItem(item);
                  } else {
                    return null;
                  }
                },
                disabledRule(item) {
                  return item.state == 0 || item.state == 1;
                },
              },
              {
                label: "删除",
                class: "warn",
                callback: this.deleteItem,
              },
            ],
          },
        ];
        this.otherFilter = [
          {
            name: "开放程度",
            prop: "openness",
            data: [
              {
                name: "共享",
                value: 1,
              },
              {
                name: "受限",
                value: 2,
              },
              {
                name: "敏感",
                value: 3,
              },
            ],
          },
        ];
      }
      // 超级管理员 --- 服务审批管理
      else if (level == 2 && type == 1) {
        this.listUrl = "/apaas/service/v3/service/approval/applied/list";
        this.deleteUrl = "/apaas/service/v3/service/approval/applied";
        this.listHeader = [
          {
            label: "服务名称",
            prop: "name",
          },
          {
            label: "服务领域",
            prop: "sectors_name",
            align: "center",
          },
          {
            label: "开放程度",
            prop: "openness_name",
            align: "center",
          },
          {
            label: "请求方式",
            prop: "req_type",
            getText(item) {
              return ["-", "GET", "POST", "PUT", "DELETE"][item.req_type || 0];
            },
            align: "center",
          },
          {
            label: "服务描述",
            prop: "descript",
          },
          {
            label: "审批时间",
            prop: "service_apply_info",
            getText(item) {
              let date =
                (item.service_apply_info &&
                  item.service_apply_info.approval_time) ||
                "";

              return item.service_apply_info &&
                item.service_apply_info.approval_status == 1
                ? helper.dateStringTransform(date)
                : "-";
            },
            width: 180,
            align: "center",
          },
          {
            label: "服务类型",
            prop: "data_service_type1_name",
            align: "center",
          },
          {
            label: "审批状态",
            prop: "service_apply_info",
            getText(item) {
              return ["-", "已审批", "待审批"][
                (item.service_apply_info &&
                  item.service_apply_info.approval_status) ||
                  0
              ];
            },
            align: "center",
          },
          {
            label: "操作",
            type: "buttons",
            align: "center",
            width: 160,
            actionList: [
              {
                getLabel(item) {
                  return item.service_apply_info.approval_status === 1
                    ? "详情"
                    : "审批";
                },
                callback: this.approvalItem,
              },
            ],
          },
        ];
        this.otherFilter = [
          {
            name: "开放程度",
            prop: "openness",
            data: [
              {
                name: "共享",
                value: 1,
              },
              {
                name: "受限",
                value: 2,
              },
              {
                name: "敏感",
                value: 3,
              },
            ],
          },
          {
            name: "审批状态",
            prop: "state",
            data: [
              {
                name: "已审批",
                value: 1,
              },
              {
                name: "待审批",
                value: 2,
              },
            ],
          },
        ];
      }
      // 超级管理员 --- 云资源管理
      else if (level == 2 && type == 2) {
        this.listUrl = "/apaas/service/v3/resource/user/apply/list";
      }

      // Error
      else {
        throw Error("The page doesn't exist");
      }
    },
    init(filter) {
      // console.log(filter);

      if (!this.listUrl) {
        return;
      }

      let params = {};

      this.tempFliter = filter;

      if (this.type == 2) {
        params = {
          search: filter.keyword,
          page: filter.page,
          limit: filter.size,
          depart: "",
          state1: filter.state1,
          state2: filter.state2,
        };

        // 超管增加withcolumn字段用于区分
        if (this.level == 2) {
          params.withcolumn = 1;
        }
      } else {
        params = {
          keyword: filter.keyword,
          page: filter.page,
          size: filter.size,
          data_service_type:
            (filter.service_type_1 &&
              filter.service_type_1.map((item) => item.value).join(",")) ||
            "", // 服务类型
          sectors:
            (filter.service_area &&
              filter.service_area.map((item) => item.value).join(",")) ||
            "", // 服务领域
          openness:
            (filter.openness &&
              filter.openness.map((item) => item.value).join(",")) ||
            "", // 开放程度
          state:
            (filter.state &&
              filter.state.map((item) => item.value).join(",")) ||
            "", // 服务状态
        };
      }

      this.$http
        .get(this.listUrl, { params })
        .then(({ data }) => {
          // console.log(data);

          if (this.type == 2) {
            const cloud = data.data.cloud_resource_count;

            // 超管的云资源管理展示的是组织列表
            if (this.level != 2) {
              this.listTotal = data.total;
              this.listData = data.data.cloud_apply_list;

              if (this.level == 1) {
                this.cloud_zuzhi = {
                  count_zy: cloud.count_zy,
                  dashboard_list: [
                    {
                      name: "CPU使用量",
                      value: cloud.cpu_use,
                      total: cloud.cpu_total,
                      unit: "（核）",
                    },
                    {
                      name: "内存使用量",
                      value: cloud.memory_use,
                      total: cloud.memory_total,
                      unit: "（GB）",
                    },
                    /* {
                      name: "数据盘使用量",
                      value: cloud.disk_use,
                      total: cloud.disk_total,
                      unit: "（GB）",
                    }, */
                    {
                      name: "容器组使用量",
                      value: cloud.containers_use,
                      total: cloud.containers_total,
                      unit: "（个）",
                    },
                  ],
                };
              }
            } else {
              this.cloud_admin = {
                dashboard_list: [
                  {
                    name: "CPU使用量",
                    value: cloud.cpu_use,
                    total: cloud.cpu_total,
                    unit: "（核）",
                  },
                  {
                    name: "内存使用量",
                    value: cloud.memory_use,
                    total: cloud.memory_total,
                    unit: "（GB）",
                  },
                  /* {
                    name: "数据盘使用量",
                    value: cloud.disk_use,
                    total: cloud.disk_total,
                    unit: "（GB）",
                  }, */
                  {
                    name: "容器组使用量",
                    value: cloud.containers_use,
                    total: cloud.containers_total,
                    unit: "（个）",
                  },
                ],
                cloumn: cloud.cloumn, // TODO: 柱状图
                unapprove: cloud.unapprove, // 审批数量
              };
            }
          } else {
            this.listTotal = data.data.total;
            this.listData = data.data.data;
          }
        })
        .catch((error) => {
          console.log(error);
        });

      // 超管的云资源管理展示的是组织列表
      if (this.level == 2 && this.type == 2) {
        this.$http
          .get("/apaas/backmgt/department/list", {
            params: {
              search: filter.keyword,
              page: filter.page,
              limit: filter.size,
            },
          })
          .then(({ data }) => {
            // console.log(data);

            this.listTotal = data.total;
            this.listData = data.data;
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    showDialog() {
      this.$refs.dialog.show();
    }, // 唤醒弹窗
    applyForSoldUpItem(item) {
      this.dialogInfo.title = "提示";
      this.dialogInfo.msg = "确认申请上架此服务吗？";
      this.dialogInfo.cancelText = "取消";
      this.dialogInfo.sunbmitText = "发送通知";
      this.dialogInfo.submit = () => {
        this.$http
          .post(`/apaas/service/v3/service/manager/send/upnotice`, {
            id: item.id,
          })
          .then(({ data }) => {
            if (data.success) {
              this.$message({
                message: data.errMsg,
                type: "success",
              });
              this.init(this.tempFliter);
            } else {
              this.$message({
                message: data.errMsg,
                type: "warning",
              });
            }
          })
          .catch((error) => {
            console.log(error);
            this.$message({
              message: `申请${item.name}失败`,
              type: "warning",
            });
          });
      };
      this.showDialog();
    }, // 服务上架申请
    applyForSoldOutItem(item) {
      this.dialogInfo.title = "是否确定下架服务";
      this.dialogInfo.msg =
        "下架此服务会导致用户被迫暂停对服务的调用，下架前需向超级管理员发送通知，超级管理员通过后此服务将会从服务超市中下架。";
      this.dialogInfo.cancelText = "取消";
      this.dialogInfo.sunbmitText = "发送通知";
      this.dialogInfo.submit = () => {
        this.$http
          .post(`/apaas/service/v3/service/manager/send/downnotice`, {
            id: item.id,
          })
          .then(({ data }) => {
            if (data.success) {
              this.$message({
                message: data.errMsg,
                type: "success",
              });
              this.init(this.tempFliter);
            } else {
              this.$message({
                message: data.errMsg,
                type: "warning",
              });
            }
          })
          .catch((error) => {
            console.log(error);
            this.$message({
              message: `申请${item.name}失败`,
              type: "warning",
            });
          });
      };
      this.showDialog();
    }, // 服务下架申请
    soldUpItem(item) {
      this.dialogInfo.title = "提示";
      this.dialogInfo.msg = "确认上架此服务吗？";
      this.dialogInfo.cancelText = "";
      this.dialogInfo.sunbmitText = "确定";
      this.dialogInfo.submit = () => {
        this.$http
          .post(`/apaas/service/v3/service/manager/up`, {
            id: item.id,
          })
          .then(({ data }) => {
            if (data.success) {
              this.$message({
                message: data.errMsg,
                type: "success",
              });
              this.init(this.tempFliter);
            } else {
              this.$message({
                message: data.errMsg,
                type: "warning",
              });
            }
          })
          .catch((error) => {
            this.$message({
              message: `上架${item.name}失败.`,
              type: "warning",
            });
          });
      };
      this.showDialog();
    }, // 上架服务(超级管理员)
    soldOutItem(item) {
      this.dialogInfo.title = "提示";
      this.dialogInfo.msg =
        "下架此服务会导致调用该服务的<br />用户被迫暂停对服务的调用";
      this.dialogInfo.cancelText = "";
      this.dialogInfo.sunbmitText = "确定";
      this.dialogInfo.submit = () => {
        this.$http
          .post(`/apaas/service/v3/service/manager/down`, {
            id: item.id,
          })
          .then(({ data }) => {
            if (data.success) {
              this.$message({
                message: data.errMsg,
                type: "success",
              });
              this.init(this.tempFliter);
            } else {
              this.$message({
                message: data.errMsg,
                type: "warning",
              });
            }
          })
          .catch((error) => {
            this.$message({
              message: `下架${item.name}失败.`,
              type: "warning",
            });
          });
      };
      this.showDialog();
    }, // 下架服务(超级管理员)
    deleteItem(item) {
      this.dialogInfo.title = "";
      this.dialogInfo.msg = "是否删除该条服务？";
      this.dialogInfo.cancelText = "";
      this.dialogInfo.sunbmitText = "";
      this.dialogInfo.submit = () => {
        this.$http
          .delete(this.deleteUrl, {
            params: {
              id: this.type == 1 ? item.service_apply_info.id : item.id,
            },
          })
          .then(({ data }) => {
            if (data.success) {
              this.$message({
                message: data.errMsg,
                type: "success",
              });
              this.init(this.tempFliter);
            } else {
              this.$message({
                message: data.errMsg,
                type: "warning",
              });
            }
          })
          .catch((error) => {
            this.$message({
              message: `删除${item.name}失败.`,
              type: "warning",
            });
          });
      };
      this.showDialog();
    }, // 删除服务
    detailItem(item) {
      let id = this.type == 1 ? item.service_apply_info.id : item.id;
      this.$router.push(`${this.detailsUrl + id}`);
    }, // 查看服务
    editItem(item) {
      this.$router.push(
        `/fwgl/${this.level}/${this.type}/serviceedit/${item.id}`
      );
    }, // 编辑服务
    approvalItem(item) {
      this.$router.push(
        `/fwgl/${this.level}/${this.type}/approvalserviceedit/${item.service_apply_info.id}`
      );
    }, // 审批服务
    cloudDetail(item) {
      this.$router.push({
        path: `/fwgl/${this.level}/${this.type}/cloud_detail/${item.id}`,
        query: {
          apply_id: item.apply_id,
          apply_type: item.apply_type,
          use_uid: item.use_uid,
          user_id: item.user_id,
        },
      });
    }, // 云资源想抢
    cloudAllot(item) {
      this.$refs.allotConfirm.getDetail(item.apply_id);
    }, // 云资源分配
    allotSuccess() {
      this.init(this.tempFliter);
    }, // 云资源分配成功
    getDashboardOption(item) {
      let percent = parseFloat(
        ((item.value / item.total) * 100 || 0).toFixed(1)
      );
      let colors = [];

      if (this.level == 2) {
        if (percent >= 80) {
          colors = ["#e3606d", "#f6d0d0"];
        } else {
          colors = ["#515fe7", "#e7ecfd"];
        }
      } else {
        if (percent >= 80) {
          colors = ["#e3606d", "#f6d0d0"];
          this.cloud_admin_warn = true;
        } else if (percent >= 60) {
          colors = ["#ef9535", "#fcefd8"];
        } else {
          colors = ["#515fe7", "#e7ecfd"];
        }
      }

      return {
        title: [
          {
            text: percent + "%",
            x: "center",
            y: "28%",
            textStyle: {
              fontSize: 34,
              fontWeight: "100",
              color: ["#0d1847"],
            },
          },
          {
            text: item.name,
            x: "center",
            y: "55%",
            textStyle: {
              fontSize: 12,
              fontWeight: "100",
              color: "#707693",
            },
          },
        ],
        angleAxis: {
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          min: 0,
          max: 138,
          boundaryGap: ["0", "100"],
          startAngle: 220,
          endAngle: -40,
        },
        radiusAxis: {
          type: "category",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        polar: {
          radius: "110%",
        },
        series: [
          {
            type: "bar",
            data: [, percent],
            coordinateSystem: "polar",
            barMaxWidth: 10,
            z: 1,
            name: "B",
            roundCap: true,
            itemStyle: {
              normal: {
                color: new graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: colors[0] },
                  { offset: 1, color: colors[1] },
                ]),
              },
            },
            barGap: "-100%",
          },
          {
            type: "bar",
            data: [, 100],
            z: 0,
            silent: true,
            coordinateSystem: "polar",
            barMaxWidth: 10,
            name: "C",
            roundCap: true,
            color: "#ddd",
            barGap: "-100%",
          },
          {
            type: "gauge",
            radius: "70%",
            min: 0, //最小刻度
            max: 100, //最大刻度
            splitNumber: 10, //刻度数量
            startAngle: 220,
            endAngle: -40,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 0.5,
                color: [[1, "rgba(0,0,0,0)"]],
              },
            }, //仪表盘轴线
            axisLabel: {
              show: false,
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 5,
              lineStyle: {
                color: "#e3e4ea",
                width: 0.5,
              },
              length: 3,
            }, //刻度样式
            splitLine: {
              show: true,
              length: 4,
              lineStyle: {
                color: "#e3e4ea",
                width: 0.5,
              },
            }, //分隔线样式
            detail: {
              show: false,
            },
            pointer: {
              show: false,
            },
          },
          {
            name: "point",
            type: "scatter",
            coordinateSystem: "polar",
            barGap: "-100%",
            zlevel: 0,
            symbol: "circle",
            symbolSize: 6,
            itemStyle: {
              normal: {
                show: true,
                color: "#fff",
              },
            },

            data: [, percent],
          },
        ],
      };
    }, // 仪表图option
    approveWorkspace() {
      this.$router.push({
        path: `/fwgl/${this.level}/${this.type}/approveWorkspace`,
        query: {
          warn: this.cloud_admin_warn ? 1 : 0,
        },
      });
    }, // 工作区域审批
  },
  created() {
    this.level = parseInt(this.$route.params.level);
    this.type = parseInt(this.$route.params.type);
    this.initHeader();

    this.$api.user.getNowUser().then(({ data }) => {
      if (data.success == 1) {
        this.$store.commit("userInfofun", data.data);

        const userLevel = this.$store.getters.level;

        if (userLevel == this.level) {
          this.initFilter();
        } else {
          console.log("用户没有当前页面的权限，即将跳转...");
          this.$router.push(`/fwgl/${userLevel}/${this.type}`);
        }
      } else {
        console.log(data.errMsg);
      }
    });
  },
};
</script>

<style scoped>
.service_management_list {
  height: 100%;
  min-width: 1200px;
}
.cloud_title {
  margin-top: 15px;
}
.cloud_title > span,
.cloud_title > span::before {
  display: inline-block;
  vertical-align: middle;
}
.cloud_title > span:nth-child(1)::before {
  content: "";
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background-color: #515fe7;
  margin-right: 10px;
  margin-bottom: 2px;
}
.cloud_title > span:nth-child(1) {
  font-size: 16px;
  color: #242c43;
  line-height: 30px;
}
.cloud_title > span:nth-child(2)::before {
  content: "";
  width: 2px;
  height: 12px;
  background-color: #b4c0f5;
  margin: 0 10px;
}
.cloud_title > span:nth-child(2) {
  font-size: 14px;
  line-height: 1;
  color: #58617a;
  line-height: 24px;
  margin-top: 3px;
}
.dashboard_contaner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
}
.dashborad_list {
  text-align: center;
  margin: 0 25px;
  font-size: 18px;
}
.dashboard_chart {
  width: 136px;
  height: 136px;
}
.dashboard_info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  line-height: 30px;
  color: #8890a7;
}
.dashboard_info:nth-of-type(1) {
  margin-top: -10px;
}
.dashboard_info > span:nth-of-type(2) {
  color: #0d1847;
  margin-left: 10px;
}
.admin_preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin_preview > * {
  width: calc(50% - 10px);
}
.admin_preview-right {
  height: 250px;
  margin-top: 15px;
  box-sizing: border-box;
}
.apass_button {
  position: relative;
}
.apass_button > .el-button {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9;
}
</style>
