<!-- 角色管理 -->
<template>
  <div class="detail_container">
    <bg-breadcrumb></bg-breadcrumb>
    <div class="main_container">
      <bg-filter-group @search="changeSearch" v-model="filter.search" placeholder="请输入容器平台名称">
        <template v-slot:left_action>
          <div class="apaas_button">
            <el-button class="register_btn" type="primary" @click="register">
              <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon>
              新增
            </el-button>
          </div>
        </template>
      </bg-filter-group>
      <div class="table_container">
        <div class="table bg-scroll">
          <bg-table
            ref="Bgtable"
            :headers="headers"
            :rows="tableRows"
            isIndex
            :paddingLeft="32"
            :indexWidth="108"
            :stripe="true">
            <template v-slot:name="{ row }">
              <span class="can_click_text" @click="viewDetail(row)">
                {{ row.name }}
              </span>
            </template>
            <template v-slot:created_time="{ row }">
              {{ row.created_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
            </template>
            <template v-slot:action="{ row }">
              <bg-table-btn
                class="can_click_text"
                :click="
                  () => {
                    edit_row(row);
                  }
                ">
                编辑
              </bg-table-btn>
              <bg-table-btn
                class="can_click_text"
                :click="
                  () => {
                    delete_row(row);
                  }
                "
                :disabled="row.state == 1 || row.role_type == 1">
                删除
              </bg-table-btn>
            </template>
          </bg-table>
        </div>
        <bg-pagination
          :page="filter.page"
          :size="filter.limit"
          :total="tableTotal"
          @change-page="changePage"
          @change-size="changeSize">
        </bg-pagination>
      </div>
    </div>
    <!-- 新增/编辑弹窗 -->
    <el-dialog
      class="dialog-box"
      :title="dialogType == 1 ? '新增' : '编辑'"
      :close-on-click-modal="false"
      v-model="addDialog"
      width="614px">
      <el-form
        class="bg_form"
        ref="bgForm"
        :model="formData"
        :rules="rules"
        label-width="130px"
        style="margin-top: 24px">
        <el-form-item label="平台类型" prop="type">
          <el-radio-group v-model="formData.type">
            <el-radio v-for="(item, index) in typeList" :key="'type' + index" :label="item.value">
              {{ item.name }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="平台名称" prop="name">
          <el-input v-model.trim="formData.name" placeholder="请输入平台名称" maxlength="50" show-word-limit />
        </el-form-item>
        <el-form-item label="平台帐号" prop="account" v-if="formData.type == 1">
          <el-input v-model.trim="formData.account" placeholder="请输入aPaaS在该平台注册的帐号" maxlength="50" show-word-limit />
        </el-form-item>
        <el-form-item label="工作组名称" prop="group_name" v-if="formData.type == 1">
          <el-input v-model.trim="formData.group_name" placeholder="请输入aPaaS在该平台注册申请的工作组名称" maxlength="50" show-word-limit />
        </el-form-item>
        <el-form-item label="服务地址" prop="address" v-if="formData.type == 1">
          <el-input v-model.trim="formData.address" placeholder="请输入服务地址URL" maxlength="100" show-word-limit />
        </el-form-item>
        <el-form-item label="服务地址TOKEN" prop="address_toekn" v-if="formData.type == 1">
          <el-input v-model.trim="formData.address_toekn" placeholder="请输入服务地址的TOKEN参数" maxlength="100" show-word-limit />
        </el-form-item>
        <el-form-item label="APISERVER" prop="apiserver">
          <el-input
            v-model.trim="formData.apiserver"
            placeholder="请输入APISERVER参数"
            maxlength="100"
            show-word-limit />
        </el-form-item>
        <el-form-item label="SERVER TOKEN" prop="server_token">
          <el-input v-model.trim="formData.server_token" placeholder="请输入SERVER TOKEN参数" maxlength="100" show-word-limit />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input
            v-model.trim="formData.desc"
            placeholder="请输入描述"
            maxlength="300"
            show-word-limit
            :rows="4"
            type="textarea" />
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <div class="apaas_button">
          <el-button
            type="default"
            @click="
              () => {
                addDialog = false;
                dialogType = 0;
              }
            "
            >取消</el-button
          >
          <el-button type="info" @click="testUrl">
            <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-checklist"></bg-icon>
            测试链接
          </el-button>
          <el-button type="primary" @click="postData">保存</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 平台详情 -->
    <el-dialog class="dialog_box" title="平台详情" v-model="detailDialog" width="600px">
      <div>
        <bg-info class="info_box" :data="platfromInfo" :col="1"></bg-info>
      </div>
    </el-dialog>
    <!-- 删除弹窗 -->
    <el-dialog class="dialog_box" title="提示" v-model="delDialog" width="400px">
      <div>删除后，aPaaS平台将不再与该容器平台对接，确认删除吗？</div>
      <template v-slot:footer>
        <div class="apaas_button">
          <el-button type="default" @click="delDialog = false">取 消</el-button>
          <el-button type="primary" @click="deleteData">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref, onBeforeMount, nextTick } from "vue";
import axios from "../../../../request/http.js";
import { ElMessage } from "element-plus";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
const Bgtable = ref(null);
const bgForm = ref(null);
const state = reactive({
  filter: {
    page: 1,
    limit: 10,
    search: "",
  },
  headers: [
    {
      label: "容器平台名称",
      prop: "name",
    },
    {
      label: "平台类型",
      prop: "type_name",
    },
    {
      label: "描述",
      prop: "desc",
      minWidth: 346,
    },
    {
      label: "创建人",
      prop: "created_by",
    },
    {
      label: "创建时间",
      prop: "created_time",
      width: 276,
    },
    {
      label: "操作",
      prop: "action",
      width: 130,
      fixed: "right",
    },
  ],
  tableRows: [],
  tableTotal: 0,
  actionRow: {},
  delDialog: false,
  dialogType: 1,
  addDialog: false,
  formData: {
    type: 1,
    name: "",
    account: "",
    group_name: "",
    address: "",
    address_toekn: "",
    apiserver: "",
    server_token: "",
    desc: "",
  },
  rules: {
    name: [{ required: true, message: "平台名称不能为空", trigger: "blur" }],
    type: [{ required: true, message: "请选择平台类型", trigger: "change" }],
    account: [{ required: true, message: "平台帐号不能为空", trigger: "blur" }],
    group_name: [{ required: true, message: "工作组名称不能为空", trigger: "blur" }],
    address: [{ required: true, message: "服务地址URL不能为空", trigger: "blur" }],
    address_toekn: [{ required: true, message: "服务地址的TOKEN参数不能为空", trigger: "blur" }],
    apiserver: [{ required: true, message: "APISERVER参数不能为空", trigger: "blur" }],
    server_token: [{ required: true, message: "SERVER TOKEN参数不能为空", trigger: "blur" }],
    desc: [{ required: true, message: "描述不能为空", trigger: "blur" }],
  },
  typeList: [
    {
      name: "自有平台",
      value: 1,
    },
    {
      name: "第三方平台",
      value: 2,
    },
  ],
  detailDialog: false,
  platfromInfo: [
    {
      name: "平台类型",
      value: "",
      nameWidth: 144,
    },
    {
      name: "平台名称",
      value: "",
      nameWidth: 144,
    },
    {
      name: "平台帐号",
      value: "",
      nameWidth: 144,
    },
    {
      name: "工作组名称",
      value: "",
      nameWidth: 144,
    },
    {
      name: "服务地址",
      value: "",
      nameWidth: 144,
    },
    {
      name: "TOKEN",
      value: "",
      nameWidth: 144,
    },
    {
      name: "APISERVER",
      value: "",
      nameWidth: 144,
    },
    {
      name: "TOKEN",
      value: "",
      nameWidth: 144,
    },
    {
      name: "描述",
      value: "",
      nameWidth: 144,
    },
  ],
});
const getRoleRows = () => {
  let params = { ...state.filter };
  console.log(params);
  state.tableRows = [
    {
      id: 1,
      type: 1,
      name: "比格容器云平台",
      account: "admin",
      group_name: "beagle",
      type_name: "自有平台",
      desc: "这是一个由比格大数据公司自主研发的一款云原生容器平台这是一个由比格大数据公司自主研发的一款云原生容器平台",
      created_by: "王先生",
      created_time: "2020-01-01 00:00:00",
      address: "https://cloud1.wodcloud.com/",
      address_token: "11112321123123123123",
      apiserver: "https://apaas1.wodcloud.com/",
      server_token: "1234567bqsid123k12s0h1d3uhf493fh02hd3h38ff",
    },
    {
      id: 2,
      type: 2,
      name: "阿里云平台",
      type_name: "第三方平台",
      desc: "阿里云平台",
      created_by: "王先生",
      created_time: "2020-01-01 00:00:00",
      apiserver: "https://apaas2.wodcloud.com/",
      server_token: "abcdefgbqsis0h1d3uhf493fh02hdd102h9s3h38ff",
    },
    {
      id: 3,
      type: 2,
      name: "腾讯云平台",
      type_name: "第三方平台",
      desc: "这是腾讯云平台啊",
      created_by: "王先生",
      created_time: "2020-01-01 00:00:00",
      apiserver: "https://apaas3.wodcloud.com",
      server_token: "bqsid123k12s0h1d3uhf493fh02hddsaassdsh38ff",
    },
  ];
  state.tableTotal = 3;
  // axios.get(`/apaas/system/v5/role/list`, { params }).then((res) => {
  //   if (res.data.code == 200) {
  //     state.tableRows = res.data.data || [];
  //     state.tableTotal = res.data.total;
  //   } else {
  //     ElMessage.error(res.data.data);
  //   }
  // });
}; // 获取角色列表

const changePage = (val) => {
  state.filter.page = val;
  getRoleRows();
}; // 改变页码

const changeSize = (val) => {
  state.filter.limit = val;
  changePage(1);
}; // 改变每页条数

const changeSearch = (val) => {
  state.filter.search = val;
  changePage(1);
}; // 表格关键字筛选

const register = () => {
  resetForm();
  state.dialogType = 1;
  state.addDialog = true;
}; // 新增

const resetForm = () => {
  state.formData = {
    type: 1,
    name: "",
    account: "",
    group_name: "",
    address: "",
    address_toekn: "",
    apiserver: "",
    server_token: "",
    desc: "",
  };
  if (bgForm.value) {
    nextTick(() => {
      bgForm.value.validate((valid) => {
        if (!valid) {
          bgForm.value.clearValidate();
        }
      });
    });
  }
};
const viewDetail = (row) => {
  state.platfromInfo[0].value = row.type_name
  state.platfromInfo[1].value = row.name
  state.platfromInfo[2].value = row.account
  state.platfromInfo[3].value = row.group_name
  state.platfromInfo[4].value = row.address
  state.platfromInfo[5].value = row.address_token
  state.platfromInfo[6].value = row.apiserver
  state.platfromInfo[7].value = row.server_token
  state.platfromInfo[8].value = row.desc
  if (row.type == 2) {
    state.platfromInfo.splice(2,4)
  }
  state.detailDialog = true;
  console.log(row, "查看详情");
}; // 查看详情

const edit_row = (row) => {
  resetForm();
  state.dialogType = 2;
  state.addDialog = true;
}; // 编辑

const testUrl = () => {};
const postData = () => {};

const delete_row = (row) => {
  state.actionRow = row;
  state.delDialog = true;
}; // 删除

const deleteData = () => {
  console.log(state.actionRow);
  state.delDialog = false;
  // axios.delete(`/apaas/system/v5/role/delete`, { data: { ids: [...ids] } }).then((res) => {
  //   if (res.data.code == 200) {
  //     ElMessage.success(res.data.msg);
  //     state.delDialog = false;
  //     changePage(1);
  //   } else {
  //     ElMessage.error(res.data.data);
  //   }
  // });
};
onBeforeMount(() => {
  getRoleRows();
});

const {
  filter,
  headers,
  tableRows,
  tableTotal,
  delDialog,
  dialogType,
  addDialog,
  formData,
  rules,
  typeList,
  detailDialog,
  platfromInfo,
} = toRefs(state);
</script>

<style lang="scss" scoped>
.detail_container {
  width: 100%;
  padding: 0 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  .main_container {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    background-color: #fff;
    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
    border-radius: 6px;
    margin: 0 0 16px;
    position: relative;
    height: calc(100% - 62px);
    .table_container {
      height: calc(100% - 70px);
      padding: 0 16px;
      .table {
        max-height: calc(100% - 64px);
      }
    }
  }
}
</style>
<style>
.dialog-box .el-dialog__body {
  padding: 0 24px;
}
.bg-info {
  text-align: left;
}
</style>
