<template>
  <div class="organization_cloud_resource">
    <apass-list
      ref="list"
      search-placeholder="请输入关键字"
      :other-filter="otherFilter"
      :list-header="listHeader"
      :list-data="listData"
      :list-total="listTotal"
      @list-action="init"
      :list-padding-left="0"
    >
      <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);
    },
    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);

    this.otherFilter = [
      {
        name: "组织名称",
        prop: "organization",
        default: this.$route.params.id,
        options: [
          {
            value: "1",
            name: "不许删",
          },
          {
            value: "39",
            name: "应用测试一轮shf",
          },
          {
            value: "38",
            name: "我的组织",
          },
          {
            value: "37",
            name: "1234567890",
          },
          {
            value: "36",
            name: "测试bug",
          },
          {
            value: "35",
            name: "3213123",
          },
          {
            value: "33",
            name: "B.G.R.A123",
          },
          {
            value: "32",
            name: "Bgtest23.号",
          },
          {
            value: "31",
            name: "6",
          },
          {
            value: "30",
            name: "R.A.M.H.S.U",
          },
        ],
      },
    ];
    this.listHeader = [
      {
        label: "运行状态",
        align: "center",
        type: "image",
        getImage(item) {
          return item.state == 0
            ? require("@/assets/imgs/ic_true.png")
            : require("@/assets/imgs/ic_failed.png");
        },
      },
      {
        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: "初次申请状态",
        align: "center",
        getText(item) {
          return ["未通过", "待审批", "通过"][(item.approve_state || 0) + 1];
        },
      },
      {
        label: "资源调整结果",
        align: "center",
        getText(item) {
          return ["未通过", "待审批", "通过"][
            (item.approve_update_state || 0) + 1
          ];
        },
      },
      {
        label: "用户申请时间",
        prop: "apply_time",
        align: "center",
      },
      {
        label: "操作",
        type: "buttons",
        align: "center",
        width: 80,
        actionList: [
          {
            getLabel(item) {
              return item.use_uid ? "已分配" : "分配";
            },
            callback: this.cloudAllot,
            disabledRule(item) {
              return item.use_uid;
            },
          },
        ],
      },
    ];
    this.listData = [{}, {}, {}];
  },
};
</script>

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