<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"
      :msg="dialogInfo.msg"
      :cancel-text="dialogInfo.cancelText"
      :cancel-type="dialogInfo.cancelType"
      :cancel="dialogInfo.cancel"
      :sunbmit-text="dialogInfo.sunbmitText"
      :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: {
      msg: "",
      cancelText: "",
      cancelType: "",
      cancel: null,
      sunbmitText: "",
      submit: null,
    },
    tempFilter: null,
  }),
  computed: {},
  methods: {
    init(filter) {
      // console.log(filter);

      this.tempFilter = filter;

      this.$http
        .get("/apaas/service/v3/resource/apply/approveList", {
          params: {
            search: filter.keyword,
            page: filter.page,
            limit: filter.size,
            state: filter.state,
          },
        })
        .then(({ data }) => {
          this.listTotal = data.total;
          this.listData = data.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    showDialog() {
      this.$refs.dialog.show();
    },
    detailAction(item) {
      this.$router.push({
        path: `/fwgl/${this.level}/${this.type}/cloud_detail/${item.id}`,
        query: {
          apply_id: item.apply_id,
          apply_type: item.apply_type,
          use_uid: item.use_uid,
          user_id: item.user_id,
        },
      });
    },
    approveAction(item) {
      let action = (type) => {
        this.$http
          .put("/apaas/service/v3/resource/apply/approve", null, {
            params: {},
          })
          .then(({ data }) => {
            if (data.success == 1) {
              this.$message({
                message: data.errMsg || `操作成功.`,
                type: "success",
              });
              this.init(this.tempFilter);
            } else {
              this.$message({
                message: data.errMsg || "操作失败",
                type: "warning",
              });
            }
          })
          .catch((error) => {
            console.log(error);
            this.$message({
              message: "操作失败",
              type: "warning",
            });
          });
      };

      this.dialogInfo.msg = "该工作区域的申请通过还是拒绝？";
      this.dialogInfo.cancelText = "拒绝";
      this.dialogInfo.cancelType = "danger";
      this.dialogInfo.cancel = () => {
        action(-1);
      };
      this.dialogInfo.sunbmitText = "通过";
      this.dialogInfo.submit = () => {
        action(1);
      };
      this.showDialog();
    },
    deleteAction(item) {
      this.dialogInfo.msg = "确认要删除这条申请记录吗？";
      this.dialogInfo.cancelText = "";
      this.dialogInfo.cancelType = "";
      this.dialogInfo.cancel = null;
      this.dialogInfo.sunbmitText = "";
      this.dialogInfo.submit = () => {
        console.log("deleteAction");
      };
      this.showDialog();
    },
  },
  created() {
    this.level = parseInt(this.$route.params.level);
    this.type = parseInt(this.$route.params.type);

    let warnFlag = this.$route.query.warn == 1 ? true : false;

    this.otherFilter = [
      {
        name: "审批状态",
        prop: "state",
        default: "",
        options: [
          {
            name: "全部",
            value: "",
          },
          {
            name: "待审批",
            value: 0,
          },
          {
            name: "审批通过",
            value: 1,
          },
          {
            name: "审批未通过",
            value: -1,
          },
        ],
      },
    ];
    this.listHeader = [
      {
        label: "工作区域名称",
        prop: "namespace",
        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.apply_type === 0 ? "初次申请" : "资源调整";
        },
      },
      {
        label: "所属组织",
        prop: "department_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>
