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

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

<script>
import { mapState } from "vuex";
import apassList from "@/components/apass-list";
import apassDialog from "@/components/apass-dialog";

export default {
  components: { apassList, apassDialog },
  data: () => ({
    level: 0, // 用户等级
    type: 0, // 访问的页面
    listTotal: 0,
    listHeader: [],
    listData: [
      {
        id: 1000001,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "贵阳市公安局",
        system_count: 6,
        organization_manager: 3,
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000002,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "语音识别",
        system_count: 6,
        organization_manager: 3,
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000003,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        system_count: 6,
        organization_manager: 3,
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000004,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        system_count: 6,
        organization_manager: 3,
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000005,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        system_count: 6,
        organization_manager: 3,
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000006,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        system_count: 6,
        organization_manager: 3,
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000007,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        system_count: 6,
        organization_manager: 3,
        time: "2019-04-11 12:50:30",
      },
      {
        id: 100000,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        system_count: 6,
        organization_manager: 3,
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000009,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        system_count: 6,
        organization_manager: 3,
        time: "2019-04-11 12:50:30",
      },
      {
        id: 1000010,
        img:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        name: "轨迹绘制",
        system_count: 6,
        organization_manager: 3,
        time: "2019-04-11 12:50:30",
      },
    ],
    filterList: [
      {
        name: "服务类型",
        prop: "data_service_type",
        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"],
      },
      {
        name: "服务领域",
        prop: "sectors",
        data: [
          "数据服务",
          "时空服务",
          "视频服务",
          "感知服务",
          "综合服务",
          "数据服务2",
          "时空服务2",
          "视频服务2",
          "感知服务2",
          "综合服务2",
          "感知服务3",
          "综合服务3",
        ],
      },
      {
        name: "开放程度",
        prop: "openness",
        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"],
      },
      {
        name: "服务状态",
        prop: "state",
        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"],
      },
    ],
    dialogInfo: {
      title: "",
      msg: "",
      submit: 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() {
      /* this.$http
        .get("/apaas/serviceapp/v3/servicemarket/list", {
          params: {},
        })
        .then(({ data }) => {
          console.log(data);
        })
        .catch((error) => {
          console.log(error);
        }); */
    },
    initHeader() {
      let level = this.level;
      let type = this.type;

      // 普通用户 --- 注册发布的服务
      if (level == 0 && type == 0) {
        this.listHeader = [
          {
            label: "服务名称",
            prop: "name",
            type: "button",
            callback: this.detailItem,
          },
          {
            label: "服务领域",
            prop: "sectors_name",
            type: "",
            align: "center",
          },
          {
            label: "开放程度",
            prop: "openness_name",
            type: "",
            align: "center",
          },
          {
            label: "服务描述",
            prop: "descript",
          },
          {
            label: "注册发布时间",
            prop: "create_time",
            type: "",
            align: "center",
          },
          {
            label: "服务类型",
            prop: "data_service_type1_name",
            type: "",
            align: "center",
          },
          {
            label: "操作",
            type: "buttons",
            align: "center",
            width: 240,
            actionList: [
              {
                label: "编辑",
                callback: this.editItem,
              },
              {
                label: "申请下架",
                callback: this.applyForSoldOutItem,
              },
              {
                label: "删除",
                callback: this.deleteItem,
              },
            ],
          },
        ];
      }
      // 普通用户 --- 申请的服务
      else if (level == 0 && type == 1) {
        this.listHeader = [
          {
            label: "服务名称",
            prop: "name",
            type: "button",
            callback: this.detailItem,
          },
          {
            label: "服务领域",
            prop: "date",
            align: "center",
          },
          {
            label: "开放程度",
            prop: "address",
            align: "center",
          },
          {
            label: "服务描述",
            prop: "address",
          },
          {
            label: "申请时间",
            prop: "address",
            align: "center",
          },
          {
            label: "服务类型",
            prop: "address",
            align: "center",
          },
          {
            label: "申请状态",
            prop: "address",
            align: "center",
          },
          {
            label: "操作",
            type: "buttons",
            align: "center",
            actionList: [
              {
                label: "删除",
                callback: this.deleteItem,
              },
            ],
          },
        ];
      }
      // 普通用户 --- 云资源服务
      else if (level == 0 && type == 2) {
        this.listHeader = [
          {
            label: "工作区域",
            prop: "name",
          },
          {
            label: "网络环境",
            prop: "name",
            align: "center",
          },
          {
            label: "CPU（核）",
            prop: "name",
            align: "center",
          },
          {
            label: "内存（GB）",
            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: "操作",
            type: "buttons",
            align: "center",
            width: 160,
            actionList: [
              {
                label: "查看详情",
                callback: this.detailItem,
              },
            ],
          },
        ];
      }

      // 组织管理员 --- 组织服务管理
      else if (level == 1 && type == 0) {
        this.listHeader = [
          {
            label: "服务名称",
            prop: "name",
            type: "button",
            callback: this.detailItem,
          },
          {
            label: "服务领域",
            prop: "date",
            align: "center",
          },
          {
            label: "开放程度",
            prop: "date",
            align: "center",
          },
          {
            label: "请求方式",
            prop: "date",
            align: "center",
          },
          {
            label: "服务描述",
            prop: "date",
          },
          {
            label: "注册发布时间",
            prop: "date",
            align: "center",
          },
          {
            label: "服务类型",
            prop: "date",
            align: "center",
          },
          {
            label: "服务状态",
            prop: "date",
            align: "center",
          },
        ];
      }
      // 组织管理员 --- 服务审批管理
      else if (level == 1 && type == 1) {
        this.listHeader = [
          {
            label: "服务名称",
            prop: "name",
          },
          {
            label: "服务领域",
            prop: "date",
            align: "center",
          },
          {
            label: "开放程度",
            prop: "date",
            align: "center",
          },
          {
            label: "请求方式",
            prop: "date",
            align: "center",
          },
          {
            label: "服务描述",
            prop: "date",
          },
          {
            label: "审批时间",
            prop: "date",
            align: "center",
          },
          {
            label: "服务类型",
            prop: "date",
            align: "center",
          },
          {
            label: "审批状态",
            prop: "date",
            align: "center",
          },
          {
            label: "操作",
            type: "buttons",
            align: "center",
            width: 160,
            actionList: [
              {
                label: "审批",
                callback: this.approvalItem,
              },
              {
                label: "删除",
                callback: this.deleteItem,
              },
            ],
          },
        ];
      }
      // 组织管理员 --- 云资源管理
      else if (level == 1 && type == 2) {
        this.listHeader = [
          {
            label: "工作区域",
            prop: "name",
          },
          {
            label: "网络环境",
            prop: "name",
            align: "center",
          },
          {
            label: "CPU（核）",
            prop: "name",
            align: "center",
          },
          {
            label: "内存（GB）",
            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: "操作",
            type: "buttons",
            align: "center",
            width: 160,
            actionList: [
              {
                label: "分配",
                callback: this.allotItem,
              },
            ],
          },
        ];
      }

      // 超级管理员 --- 组织服务管理
      else if (level == 2 && type == 0) {
        this.listHeader = [
          {
            label: "服务名称",
            prop: "name",
            type: "button",
            callback: this.detailItem,
          },
          {
            label: "服务领域",
            prop: "date",
            align: "center",
          },
          {
            label: "开放程度",
            prop: "date",
            align: "center",
          },
          {
            label: "请求方式",
            prop: "date",
            align: "center",
          },
          {
            label: "服务描述",
            prop: "date",
          },
          {
            label: "注册发布时间",
            prop: "date",
            align: "center",
          },
          {
            label: "服务类型",
            prop: "date",
            align: "center",
          },
          {
            label: "操作",
            type: "buttons",
            align: "center",
            width: 240,
            actionList: [
              {
                label: "编辑",
                callback: this.editItem,
              },
              {
                label: "下架",
                callback: this.soldOutItem,
              },
              {
                label: "删除",
                callback: this.deleteItem,
              },
            ],
          },
        ];
      }
      // 超级管理员 --- 服务审批管理
      else if (level == 2 && type == 1) {
        this.listHeader = [
          {
            label: "服务名称",
            prop: "name",
          },
          {
            label: "服务领域",
            prop: "date",
            align: "center",
          },
          {
            label: "开放程度",
            prop: "date",
            align: "center",
          },
          {
            label: "请求方式",
            prop: "date",
            align: "center",
          },
          {
            label: "服务描述",
            prop: "date",
          },
          {
            label: "审批时间",
            prop: "date",
            align: "center",
          },
          {
            label: "服务类型",
            prop: "date",
            align: "center",
          },
          {
            label: "审批状态",
            prop: "date",
            align: "center",
          },
          {
            label: "操作",
            type: "buttons",
            align: "center",
            width: 160,
            actionList: [
              {
                label: "审批",
                callback: this.approvalItem,
              },
              {
                label: "删除",
                callback: this.deleteItem,
              },
            ],
          },
        ];
      }
      // 超级管理员 --- 云资源管理
      else if (level == 2 && type == 2) {
        this.listHeader = [
          {
            label: "所属组织",
            prop: "name",
          },
          {
            label: "CPU使用量",
            prop: "name",
            align: "center",
          },
          {
            label: "内存使用量",
            prop: "name",
            align: "center",
          },
          {
            label: "工作区域数量",
            prop: "name",
            align: "center",
          },
          {
            label: "创建时间",
            prop: "name",
            align: "center",
          },
          {
            label: "操作",
            type: "buttons",
            align: "center",
            actionList: [
              {
                label: "删除",
                callback: this.deleteItem,
              },
            ],
          },
        ];
      }

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

      this.$http
        .get("/apaas/service/v3/service/manager/list", {
          params: {
            data_service_type: 0,
            sectors: 0,
            openness: 0,
            state: "",
            keyword: filter.keyword,
            page: filter.page,
            size: filter.size,
          },
        })
        .then(({ data }) => {
          // console.log(data);
          this.listTotal = data.data.total;
          this.listData = data.data.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    showDialog() {
      this.$refs.dialog.show();
    },
    editItem(item) {
      this.$router.push(
        `/fwgl/${this.level}/${this.type}/serviceedit/${item.id}`
      );
    },
    applyForSoldOutItem(item) {
      this.dialogInfo.title = "是否确定下架服务";
      this.dialogInfo.msg =
        "下架此服务会导致用户被迫暂停对服务的调用，下架前需向超级管理员发送通知，超级管理员通过后此服务将会从服务超市中下架。";
      this.dialogInfo.cancelText = "取消";
      this.dialogInfo.sunbmitText = "发送通知";
      this.dialogInfo.submit = () => {
        console.log("applyForSoldOutItem - " + item.name);
      };
      this.showDialog();
    },
    deleteItem(item) {
      this.dialogInfo.title = "";
      this.dialogInfo.msg = "是否删除该条服务？";
      this.dialogInfo.cancelText = "";
      this.dialogInfo.sunbmitText = "";
      this.dialogInfo.submit = () => {
        console.log("deleteItem - " + item.name);
      };
      this.showDialog();
    },
    detailItem(item) {
      this.$router.push(`${this.detailsUrl + item.id}`);
    },
    approvalItem(item) {
      this.$router.push(
        `/fwgl/${this.level}/${this.type}/approvalserviceedit/${item.id}`
      );
    },
    allotItem(item) {
      console.log("allotItem - " + item.name);
    },
    soldOutItem(item) {
      this.dialogInfo.title = "提示";
      this.dialogInfo.msg =
        "下架此服务会导致调用该服务的<br />用户被迫暂停对服务的调用";
      this.dialogInfo.cancelText = "";
      this.dialogInfo.sunbmitText = "确定";
      this.dialogInfo.confirmSubmit = () => {
        console.log("submit - " + item.name);
      };
      this.showDialog();
    },
    dialogSubmit() {
      console.log("dialog submit");
    },
  },
  created() {
    this.level = parseInt(this.$route.params.level);
    this.type = parseInt(this.$route.params.type);
    this.initFilter();
    this.initHeader();
  },
};
</script>

<style scoped>
.service_management_list {
  height: 100%;
}
</style>
