<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="cloud_info" v-if="cloud_zuzhi">
          <div class="zuzhi_title">
            <span>{{ cloud_zuzhi.org_name }}</span>
            <span>
              {{ "在用工作区域：" + (cloud_zuzhi.used_area || 0) + "个" }}
            </span>
          </div>
          <div class="dashboard_contaner">
            <div
              class="dashborad_list"
              v-for="(item, index) in cloud_zuzhi.dashboard_list"
              :key="index"
            >
              <chart
                :options="getDashboardOptions(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.value + item.unit"></span>
              </p>
            </div>
          </div>
        </div>
      </template>

      <div slot="list" v-if="level == 2 && type == 2">
        <p style="text-align: center;margin-top: 20px;">组织列表</p>
      </div>
    </apass-list>

    <apass-dialog
      ref="dialog"
      :title="dialogInfo.title"
      :msg="dialogInfo.msg"
      :submit="dialogInfo.submit"
    ></apass-dialog>
  </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 Dashboard from "@/components/e-charts/dashboard";

export default {
  components: { apassList, apassDialog, Dashboard },
  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,
  }),
  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;
    },
  },
  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);
            },
            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;
                },
              },
              {
                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: 1,
              },
              {
                name: "已下架",
                value: 2,
              },
            ],
          },
        ];
      }
      // 普通用户 --- 申请的服务
      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);
            },
            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 = "";
        this.paddingLeft = 0;
        this.filterList2 = [
          {
            name: "初次申请状态",
            prop: "state1",
            default: 0,
            options: [
              {
                name: "全部",
                value: 0,
              },
              {
                name: "待审批",
                value: 1,
              },
              {
                name: "审批通过",
                value: 2,
              },
              {
                name: "审批未通过",
                value: 3,
              },
            ],
          },
          {
            name: "资源调整状态",
            prop: "state2",
            default: 0,
            options: [
              {
                name: "全部",
                value: 0,
              },
              {
                name: "待审批",
                value: 1,
              },
              {
                name: "审批通过",
                value: 2,
              },
              {
                name: "审批未通过",
                value: 3,
              },
            ],
          },
          /* {
            name: "申请状态",
            prop: "state3",
            default: 0,
            options: [
              {
                name: "全部",
                value: 0,
              },
              {
                name: "待审批",
                value: 1,
              },
              {
                name: "审批通过",
                value: 2,
              },
              {
                name: "审批未通过",
                value: 3,
              },
            ],
          }, */
        ];
        this.listHeader = [
          {
            label: "运行状态",
            align: "center",
            type: "image",
            getImage(item) {
              return item.state == 0
                ? require("@/assets/imgs/ic_true.png")
                : require("@/assets/imgs/ic_guoqi.png");
            },
          },
          {
            label: "工作区域",
            prop: "name",
            type: "button",
            callback: this.cloudDetail,
          },
          {
            label: "CPU（核）",
            prop: "name",
            align: "center",
          },
          {
            label: "内存（GB）",
            prop: "name",
            align: "center",
          },
          {
            label: "容器组（个）",
            prop: "name",
            align: "center",
          },
          {
            label: "数据盘（块/GB）",
            type: "tooltip",
            align: "center",
            getLength(item) {
              return item.sjp.length;
            },
            getText(item) {
              return item.sjp[0];
            },
            getContent(item) {
              let htmlStr = `<span>数据盘（块/GB）</span><br />`;

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

              return htmlStr;
            },
          },
          {
            label: "申请时间",
            prop: "name",
            align: "center",
          },
          {
            label: "初次申请状态",
            prop: "name",
            align: "center",
          },
          {
            label: "资源调整结果",
            prop: "name",
            align: "center",
          },
        ];
        this.listData = [
          {
            name: "区域1",
            state: 0,
            sjp: ["8/60"],
          },
          {
            name: "区域2",
            state: 1,
            sjp: ["2/3", "22/33"],
          },
          {
            name: "区域3",
            state: 0,
            sjp: ["2/100", "22/33", "55/66"],
          },
        ];
      }

      // 组织管理员 --- 组织服务管理
      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);
            },
            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: 1,
              },
              {
                name: "已下架",
                value: 2,
              },
            ],
          },
        ];
      }
      // 组织管理员 --- 服务审批管理
      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)
                : "-";
            },
            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 = "";
        this.paddingLeft = 0;
        this.filterList2 = [
          {
            name: "初次申请状态",
            prop: "state1",
            default: 0,
            options: [
              {
                name: "全部",
                value: 0,
              },
              {
                name: "待审批",
                value: 1,
              },
              {
                name: "审批通过",
                value: 2,
              },
              {
                name: "审批未通过",
                value: 3,
              },
            ],
          },
          {
            name: "资源调整状态",
            prop: "state2",
            default: 0,
            options: [
              {
                name: "全部",
                value: 0,
              },
              {
                name: "待审批",
                value: 1,
              },
              {
                name: "审批通过",
                value: 2,
              },
              {
                name: "审批未通过",
                value: 3,
              },
            ],
          },
        ];
        this.listHeader = [
          {
            label: "运行状态",
            align: "center",
            type: "image",
            getImage(item) {
              return item.state == 0
                ? require("@/assets/imgs/ic_true.png")
                : require("@/assets/imgs/ic_guoqi.png");
            },
          },
          {
            label: "工作区域名称",
            prop: "name",
            type: "button",
            callback: this.cloudDetail,
          },
          {
            label: "CPU（核）",
            prop: "name",
            align: "center",
          },
          {
            label: "内存（GB）",
            prop: "name",
            align: "center",
          },
          {
            label: "容器组（个）",
            prop: "name",
            align: "center",
          },
          {
            label: "数据盘（块/GB）",
            prop: "name",
            align: "center",
          },
          {
            label: "申请用户",
            prop: "name",
            align: "center",
          },
          {
            label: "业务系统名",
            prop: "name",
            align: "center",
          },
          {
            label: "初次申请状态",
            prop: "name",
            align: "center",
          },
          {
            label: "资源调整状态",
            prop: "name",
            align: "center",
          },
          {
            label: "用户申请时间",
            prop: "name",
            align: "center",
          },
          {
            label: "操作",
            type: "buttons",
            align: "center",
            width: 80,
            actionList: [
              {
                label: "分配",
                getLabel(item) {
                  return item.allot == 0 ? "分配" : "已分配";
                },
                callback: this.cloudAllot,
                disabledRule(item) {
                  return item.allot == 1;
                },
              },
            ],
          },
        ];
        this.listData = [
          {
            name: "区域1",
            state: 0,
            sjp: ["8/60"],
            allot: 1,
          },
          {
            name: "区域2",
            state: 1,
            sjp: ["2/3", "22/33"],
            allot: 0,
          },
          {
            name: "区域3",
            state: 0,
            sjp: ["2/100", "22/33", "55/66"],
            allot: 1,
          },
        ];
        this.cloud_zuzhi = {
          org_name: "北京比格大数据",
          used_area: 2,
          dashboard_list: [
            {
              name: "cpu使用量",
              value: 6,
              total: 10,
              unit: "（核）",
            },
            {
              name: "内存使用量",
              value: 13,
              total: 20,
              unit: "（GB）",
            },
            {
              name: "数据盘使用量",
              value: 500,
              total: 560,
              unit: "（GB）",
            },
            {
              name: "容器组使用量",
              value: 10,
              total: 18,
              unit: "（个）",
            },
          ],
        };
      }

      // 超级管理员 --- 平台服务管理
      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);
            },
            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 == 1 ? "下架" : "上架";
                },
                callback(item) {
                  item.state == 1
                    ? _self.soldOutItem(item)
                    : _self.soldUpItem(item);
                },
                disabledRule(item) {
                  return item.state === 0;
                },
              },
              {
                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)
                : "-";
            },
            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.cloud_admin = {
          dashboard_list: [
            {
              name: "cpu使用量",
              value: 6,
              total: 10,
              unit: "（核）",
            },
            {
              name: "内存使用量",
              value: 13,
              total: 20,
              unit: "（GB）",
            },
            {
              name: "数据盘使用量",
              value: 240,
              total: 560,
              unit: "（GB）",
            },
            {
              name: "容器组使用量",
              value: 10,
              total: 18,
              unit: "（个）",
            },
          ],
          histogram: {},
        };
      }

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

      if (!this.listUrl) {
        return;
      }

      this.tempFliter = filter;

      this.$http
        .get(this.listUrl, {
          params: {
            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(",")) ||
              "", // 服务状态
            keyword: filter.keyword,
            page: filter.page,
            size: filter.size,
          },
        })
        .then(({ data }) => {
          // console.log(data.data);
          this.listTotal = data.data.total;
          this.listData = data.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) {
      console.log("cloudDetail - " + item.name);
    },
    cloudAllot(item) {
      console.log("cloudAllot - " + item.name);
    },
    getDashboardOptions(item) {
      let percent = Math.round((item.value / item.total) * 100);
      let colors = ["#515fe7", "#e7ecfd"];

      if (percent >= 80) {
        colors = ["#e3606d", "#f6d0d0"];
      }

      return {
        title: {
          text: percent + "%",
          subtext: item.name,
          x: "center",
          y: "center",
          textVerticalAlign: "auto",
          textStyle: {
            fontSize: 34,
            fontWeight: "100",
            color: ["#0d1847"],
          },
          subtextStyle: {
            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],
          },
        ],
      };
    },
  },
  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%;
}
.zuzhi_title {
  margin-top: 15px;
}
.zuzhi_title > span,
.zuzhi_title > span::before {
  display: inline-block;
  vertical-align: middle;
}
.zuzhi_title > span:nth-child(1)::before {
  content: "";
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background-color: #515fe7;
  margin-right: 10px;
}
.zuzhi_title > span:nth-child(1) {
  font-size: 16px;
  color: #242c43;
  line-height: 30px;
}
.zuzhi_title > span:nth-child(2)::before {
  content: "";
  width: 2px;
  height: 12px;
  background-color: #b4c0f5;
  margin: 0 10px;
}
.zuzhi_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;
}
</style>
