<template>
  <div class="app_management_list">
    <apass-list
      ref="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="/">
        <el-breadcrumb-item>我的应用</el-breadcrumb-item>
        <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
      </el-breadcrumb>

      <app-list
        v-if="listType"
        slot="list"
        :data="listData"
        :card-type="cardType"
        @deployment-action="deploymentAction"
        @delete-action="deleteAction"
        :details-url="detailsUrl"
      ></app-list>
    </apass-list>

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

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

export default {
  components: {
    appList,
    apassList,
    apassDialog,
  },
  data: () => ({
    level: 0, // 用户等级
    type: 0, // 访问的页面
    listType: "",
    cardType: "",
    listTotal: 0,
    filterList: [],
    listHeader: [],
    listData: [],
    dialogInfo: {
      title: "",
      message: "",
      btnCancelText: "",
      btnSubmitText: "",
      item: null,
    },
    otherFilter1: [],
    otherFilter2: [],
    tempFliter: null,
  }),
  computed: {
    ...mapState({
      yyglNav: "yyglNav",
    }),
    pathName() {
      return this.yyglNav[this.level][this.type];
    },
    detailsUrl() {
      let url = "";

      if (this.level == 0 && this.type == 0) {
        url = `/yygl/${this.level}/${this.type}/detail/`;
      } else if (this.level == 0 && this.type == 1) {
        url = `/yygl/${this.level}/${this.type}/approvaldetail/`;
      } else {
        url = `/yygl/${this.level}/${this.type}/detail/`;
      }

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

      // 普通用户 --- 应用仓库 card列表形式
      if (level === 0 && type === 0) {
        this.listType = "card";
        this.cardType = 0;
        this.otherFilter1 = [
          {
            name: "在线状态",
            prop: "online_state",
            data: [
              {
                name: "平台应用",
                value: 1,
              },
              {
                name: "开发者应用",
                value: 2,
              },
              {
                name: "未上架",
                value: 0,
              },
            ],
          },
        ];
        this.otherFilter2 = [
          {
            name: "是否支持开发",
            prop: "developable",
            data: [
              {
                name: "支持开发",
                value: 1,
              },
              {
                name: "不支持开发",
                value: 0,
              },
            ],
          },
          {
            name: "应用来源",
            prop: "appSource",
            data: [
              {
                name: "创建的应用",
                value: 0,
              },
              {
                name: "申请的应用",
                value: 1,
              },
            ],
          },
        ];
      }
      // 普通用户 --- 我部署的应用
      else if (level === 0 && type === 1) {
        this.listType = "card";
        this.cardType = 1;
        this.otherFilter1 = [
          {
            name: "部署来源",
            prop: "online_state",
            data: [
              {
                name: "应用商店",
                value: 0,
              },
              {
                name: "开发者应用",
                value: 1,
              },
            ],
          },
        ];
        this.otherFilter2 = [
          {
            name: "是否支持开发",
            prop: "developable",
            data: [
              {
                name: "支持开发",
                value: 1,
              },
              {
                name: "不支持开发",
                value: 0,
              },
            ],
          },
          {
            name: "应用来源",
            prop: "appSource",
            data: [
              {
                name: "创建的应用",
                value: 0,
              },
              {
                name: "申请的应用",
                value: 1,
              },
            ],
          },
        ];
      }
      // 普通用户 --- 申请的应用 card列表形式
      else if (level === 0 && type === 2) {
        this.listType = "table";
        this.listHeader = [
          { label: "应用名称", prop: "name", type: "href", align: "left" },
          { label: "应用版本", prop: "date", type: "", align: "center" },
          { label: "应用类型", prop: "address", type: "", align: "center" },
          { label: "业务领域", prop: "address", type: "", align: "center" },
          { label: "在线区域", prop: "address", type: "", align: "center" },
          { label: "申请类型", prop: "address", type: "", align: "center" },
          { label: "申请时间", prop: "address", type: "", align: "center" },
          { label: "申请状态", prop: "address", type: "", align: "center" },
        ];
        this.otherFilter1 = [
          {
            name: "在线区域",
            prop: "online_state",
            data: [
              {
                name: "平台应用",
                value: 1,
              },
              {
                name: "开发者应用",
                value: 2,
              },
            ],
          },
        ];
        this.otherFilter2 = [
          {
            name: "申请类型",
            prop: "apply_type",
            data: [
              {
                name: "申请部署",
                value: 1,
              },
              {
                name: "申请开发",
                value: 2,
              },
            ],
          },
          {
            name: "申请状态",
            prop: "apply_state",
            data: [
              {
                name: "审批中",
                value: 1,
              },
              {
                name: "审批通过",
                value: 2,
              },
              {
                name: "审批未通过",
                value: 2,
              },
            ],
          },
          {
            name: "应用来源",
            prop: "appSource",
            data: [
              {
                name: "创建的应用",
                value: 0,
              },
              {
                name: "申请的应用",
                value: 1,
              },
            ],
          },
        ];
      }
      /* // 普通用户 --- 审批的应用
      else if (level === 0 && type === 3) {
        this.listType = "table";
        this.listHeader = [
          { label: "应用名称", prop: "name", type: "href", align: "left" },
          { label: "应用版本", prop: "date", type: "", align: "center" },
          { label: "应用类型", prop: "address", type: "", align: "center" },
          { label: "业务领域", prop: "address", type: "", align: "center" },
          { label: "在线区域", prop: "address", type: "", align: "center" },
          { label: "申请类型", prop: "address", type: "", align: "center" },
          { label: "审批时间", prop: "address", type: "", align: "center" },
          { label: "审批状态", prop: "address", type: "", align: "center" },
          {
            label: "操作",
            type: "Button",
            align: "center",
            width: 160,
            btnList: [
              {
                type: "action-approval",
                label: "审批",
                line: "|",
              },
              {
                type: "action-delete",
                label: "删除",
              },
            ],
          },
        ];
      } */

      // 组织管理员 --- 应用仓库管理
      else if (level === 1 && type === 0) {
        this.listType = "table";
        this.listHeader = [
          { label: "应用名称", prop: "name", type: "href", align: "left" },
          { label: "应用版本", prop: "date", type: "", align: "center" },
          { label: "应用类型", prop: "address", type: "", align: "center" },
          { label: "业务领域", prop: "address", type: "", align: "center" },
          { label: "在线状态", prop: "address", type: "", align: "center" },
          { label: "创建时间", prop: "address", type: "", align: "center" },
          {
            label: "操作",
            type: "Button",
            align: "center",
            width: 160,
            btnList: [
              {
                type: "goods-shelf",
              },
            ],
          },
        ];
      }
      // 组织管理员 --- 部署的应用
      else if (level === 1 && type === 1) {
        this.listType = "table";
        this.listHeader = [
          { label: "应用名称", prop: "name", type: "href", align: "left" },
          { label: "应用版本", prop: "date", type: "", align: "center" },
          { label: "应用类型", prop: "address", type: "", align: "center" },
          { label: "业务领域", prop: "address", type: "", align: "center" },
          { label: "上架区域", prop: "address", type: "", align: "center" },
          { label: "部署时间", prop: "address", type: "", align: "center" },
          { label: "部署区域", prop: "address", type: "", align: "center" },
        ];
      }
      // 组织管理员 --- 应用审批管理
      else if (level === 1 && type === 2) {
        this.listType = "table";
        this.listHeader = [
          { label: "应用名称", prop: "name", type: "", align: "left" },
          { label: "应用版本", prop: "date", type: "", align: "center" },
          { label: "应用类型", prop: "address", type: "", align: "center" },
          { label: "业务领域", prop: "address", type: "", align: "center" },
          { label: "在线区域", prop: "address", type: "", align: "center" },
          { label: "申请类型", prop: "address", type: "", align: "center" },
          { label: "审批时间", prop: "address", type: "", align: "center" },
          { label: "申请状态", prop: "address", type: "", align: "center" },
          {
            label: "操作",
            type: "Button",
            align: "center",
            width: 160,
            btnList: [
              {
                type: "action-approval",
                label: "审批",
                line: "|",
              },
              {
                type: "action-delete",
                label: "删除",
              },
            ],
          },
        ];
      }

      // 超级管理员 --- 平台应用管理
      else if (level === 2 && type === 0) {
        this.listType = "table";
        this.listHeader = [
          { label: "应用名称", prop: "name", type: "href", align: "left" },
          { label: "应用版本", prop: "date", type: "", align: "center" },
          { label: "应用类型", prop: "address", type: "", align: "center" },
          { label: "业务领域", prop: "address", type: "", align: "center" },
          { label: "在线状态", prop: "address", type: "", align: "center" },
          { label: "所属组织", prop: "address", type: "", align: "center" },
          {
            label: "操作",
            type: "Button",
            align: "center",
            width: 240,
            btnList: [
              {
                type: "action-edit",
                label: "编辑",
                line: "|",
              },
              {
                type: "off-line",
                label: "下线",
                line: "|",
              },
              {
                type: "action-delete",
                label: "删除",
              },
            ],
          },
        ];
      }
      // 超级管理员 --- 应用部署管理
      else if (level === 2 && type === 1) {
        this.listType = "table";
        this.listHeader = [
          { label: "应用名称", prop: "name", type: "href", align: "left" },
          { label: "应用版本", prop: "date", type: "", align: "center" },
          { label: "应用类型", prop: "address", type: "", align: "center" },
          { label: "业务领域", prop: "address", type: "", align: "center" },
          { label: "上架区域", prop: "address", type: "", align: "center" },
          { label: "所属组织", prop: "address", type: "", align: "center" },
          { label: "部署时间", prop: "address", type: "", align: "center" },
          { label: "部署区域", prop: "address", type: "", align: "center" },
        ];
      }
      // 超级管理员 --- 应用审批管理
      else if (level === 2 && type === 2) {
        this.listType = "table";
        this.listHeader = [
          { label: "应用名称", prop: "name", type: "", align: "left" },
          { label: "应用版本", prop: "date", type: "", align: "center" },
          { label: "应用类型", prop: "address", type: "", align: "center" },
          { label: "业务领域", prop: "address", type: "", align: "center" },
          { label: "在线区域", prop: "address", type: "", align: "center" },
          { label: "申请类型", prop: "address", type: "", align: "center" },
          { label: "审批时间", prop: "address", type: "", align: "center" },
          { label: "申请状态", prop: "address", type: "", align: "center" },
          {
            label: "操作",
            type: "Button",
            align: "center",
            width: 160,
            btnList: [
              {
                type: "action-approval",
                label: "审批",
                line: "|",
              },
              {
                type: "action-delete",
                label: "删除",
              },
            ],
          },
        ];
      }

      // Error
      else {
        throw Error("The page doesn't exist");
      }
    },
    initFilter() {
      let level = this.level;
      let type = this.type;
      let urls = [
        {
          path: "/apaas/hubApi/market/appTypes",
          callback(response) {
            let datas = [];

            datas = response.body.data.map((v) => ({
              name: v.name,
              value: v.id,
            }));

            return {
              name: "应用类型",
              prop: "appTypes",
              data: datas,
            };
          },
        },
        {
          path: "/apaas/hubApi/market/businessAreas",
          callback(response) {
            let datas = [];

            datas = response.body.data.map((v) => ({
              name: v.name,
              value: v.id,
            }));

            return {
              name: "业务领域",
              prop: "businessArea",
              data: datas,
            };
          },
        },
      ];

      Promise.all(urls.map((url) => this.$http.get(url.path)))
        .then((responses) => {
          let filterList = responses.map((response, index) => {
            return urls[index].callback(response);
          });

          this.filterList = [
            ...this.otherFilter1,
            ...filterList,
            ...this.otherFilter2,
          ];
        })
        .catch((error) => {
          console.log(error);
        });
    },
    initDatas(filter) {
      let listUrl = [
        "/apaas/hubApi/market/list",
        "/apaas/hubApi/market/deployList",
        "/apaas/hubApi/market/deployList",
      ];
      let params = {};

      if (filter.online_state) {
        params.online_state = filter.online_state
          .map((item) => {
            return item.value;
          })
          .join(",");
      } // 在线状态
      if (filter.appTypes) {
        params.appTypes = filter.appTypes
          .map((item) => {
            return item.value;
          })
          .join(",");
      } // 应用类型
      if (filter.businessArea) {
        params.businessArea = filter.businessArea
          .map((item) => {
            return item.value;
          })
          .join(",");
      } // 业务领域
      if (filter.developable) {
        params.developable = filter.developable
          .map((item) => {
            return item.value;
          })
          .join(",");
      } // 是否支持开发
      if (filter.appSource) {
        params.appSource = filter.appSource
          .map((item) => {
            return item.value;
          })
          .join(",");
      } // 应用来源

      this.tempFliter = filter;

      this.$http
        .get(listUrl[this.type], {
          params: {
            ...params,
            search: filter.keyword,
            page: filter.page,
            limit: filter.size,
          },
        })
        .then(({ data }) => {
          this.listTotal = data.total;
          this.listData = data.data || [];
        })
        .catch((error) => {
          console.log(error);
        });
    },
    deploymentAction(item) {
      console.log("deployment " + item.name);
    },
    deleteAction(item) {
      /* if (this.cardType === 0) {
        this.dialogInfo.title = "删除提示";
        this.dialogInfo.msg =
          "您需要先进行应用商店下架申请，应用处于下架状态时才能进行删除操作。";
        this.dialogInfo.btnCancelText = "";
        this.dialogInfo.btnSubmitText = "";
        this.dialogInfo.confirmSubmit = () => {
          console.log("deleteItem - " + item.name);
          this.$refs.myConfirm.hideModel();
        };
      } else if (this.cardType === 1) {
        this.dialogInfo.title = "是否删除部署的应用";
        this.dialogInfo.msg =
          "该操作会导致正在调用该应用的用户被迫终止对应用的调用，删除前需向正在调用该应用的用户发送通知，自通知发送之日起，2日后应用将被删除。";
        this.dialogInfo.btnCancelText = "";
        this.dialogInfo.btnSubmitText = "发送通知";
        this.dialogInfo.confirmSubmit = () => {
          console.log("deleteItem - " + item.name);
          this.$refs.myConfirm.hideModel();
        };
      }

      this.$refs.myConfirm.showModel(); */
    },
    changePageSize(value) {
      this.pageSize = value;
      this.currentPage = 1;
    },
    changeCurrentPage(value) {
      this.currentPage = value;
    },
    approvalItem(item) {
      console.log("approval --- " + item.id);
    },
    deleteItem(item) {
      console.log("delete --- " + item.id);
    },
    editItem(item) {
      this.$router.push(`/yygl/${this.level}/${this.type}/edit/${item.id}`);
    },
    offLine(item) {
      console.log("off line --- " + item.id);
    },
    goodsShelf(item) {
      console.log("goods shelf", item.state);
    },
  },
  created() {
    this.level = parseInt(this.$route.params.level);
    this.type = parseInt(this.$route.params.type);
    this.initHeader();
    this.initFilter();
  },
};
</script>

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