<template>
  <div class="approve_workspace">
    <apass-list
      ref="list"
      search-placeholder="请输入关键字"
      :other-filter="otherFilter"
      :list-header="listHeader"
      :list-data="listData"
      :list-total="listTotal"
      @list-action="init"
    >
      <el-breadcrumb separator="/" slot="breadcrumb">
        <el-breadcrumb-item :to="`/fwgl/${level}`">
          我的服务
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="`/fwgl/${level}/${type}`">
          云资源管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          工作区域审批
        </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 helper from "@/services/helper.js";
import apassList from "@/components/apass-list";
import apassDialog from "@/components/apass-dialog";

export default {
  components: {
    apassList,
    apassDialog,
  },
  data: () => ({
    level: 0, // 用户等级
    type: 0, // 访问的页面
    otherFilter: [],
    listHeader: [],
    listData: [],
    listTotal: 0,
    dialogInfo: {
      title: "",
      msg: "",
      submit: null,
    },
  }),
  computed: {},
  methods: {
    init(filter) {
      // console.log(filter);

      this.$http
        .get("/apaas/service/v3/resource/user/apply/list", {
          params: {
            search: filter.keyword,
            page: filter.page,
            limit: filter.size,
            depart: "",
            state1: filter.state1,
          },
        })
        .then(({ data }) => {
          this.listTotal = data.total;
          this.listData = data.data.cloud_apply_list;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    showDialog() {
      this.$refs.dialog.show();
    },
    detailAction(item) {
      console.log("detailAction");
    },
    approveAction(item) {
      console.log("approveAction");
    },
    deleteAction(item) {
      console.log("deleteAction");
    },
  },
  created() {
    this.level = parseInt(this.$route.params.level);
    this.type = parseInt(this.$route.params.type);

    let warnFlag = this.$route.query.warn || false;

    this.otherFilter = [
      {
        name: "审批状态",
        prop: "state1",
        default: "",
        options: [
          {
            name: "全部",
            value: "",
          },
          {
            name: "待审批",
            value: 0,
          },
          {
            name: "审批通过",
            value: 1,
          },
          {
            name: "审批未通过",
            value: -1,
          },
        ],
      },
    ];
    this.listHeader = [
      {
        label: "工作区域名称",
        prop: "name_space",
        type: "button",
        callback: this.detailAction,
      },
      {
        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: "申请类型",
        prop: "type",
        align: "center",
      },
      {
        label: "所属组织",
        prop: "org_name",
      },
      {
        label: "用户申请时间",
        prop: "apply_time",
        align: "center",
      },
      {
        label: "审批状态",
        align: "center",
        getText(item) {
          return ["未通过", "待审批", "通过"][(item.approve_state || 0) + 1];
        },
      },
      {
        label: "操作",
        type: "buttons",
        align: "center",
        width: 160,
        actionList: [
          {
            label: "审批",
            callback: this.approveAction,
            disabledRule(item) {
              return item.approve_state != 0 || warnFlag;
            },
          },
          {
            label: "删除",
            class: "warn",
            callback: this.deleteAction,
          },
        ],
      },
    ];
  },
};
</script>

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