<!-- 角色管理 -->
<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="100px"
        style="margin-top: 24px">
        <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="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="address" v-if="formData.type == 1">
          <el-input v-model.trim="formData.address" placeholder="请输入服务地址URL" maxlength="300" show-word-limit />
        </el-form-item>
        <el-form-item label="APISERVER" prop="apiserver" v-else>
          <el-input
            v-model.trim="formData.apiserver"
            placeholder="请输入APISERVER参数"
            maxlength="300"
            show-word-limit />
        </el-form-item>
        <el-form-item label="TOKEN" prop="token_value">
          <el-input v-model.trim="formData.token_value" placeholder="请输入TOKEN参数" maxlength="300" show-word-limit />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input
            v-model.trim="formData.desc"
            placeholder="请输入描述"
            maxlength="100"
            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: {
    name: "",
    type: 1,
    address: "",
    apiserver: "",
    token_value: "",
    desc: "",
  },
  rules: {
    name: [{ required: true, message: "平台名称不能为空", trigger: "blur" }],
    type: [{ required: true, message: "请选择平台类型", trigger: "change" }],
    address: [{ required: true, message: "服务地址URL不能为空", trigger: "blur" }],
    apiserver: [{ required: true, message: "APISERVER参数不能为空", trigger: "blur" }],
    token_value: [{ required: true, message: "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: "TOKEN",
      value: "",
      nameWidth: 144,
    },
    {
      name: "描述",
      value: "",
      nameWidth: 144,
    },
  ],
});
const getRoleRows = () => {
  let params = { ...state.filter };
  console.log(params);
  state.tableRows = [
    {
      id: 1,
      name: "比格容器云平台",
      type_name: "自有平台",
      desc: "这是一个由比格大数据公司自主研发的一款云原生容器平台这是一个由比格大数据公司自主研发的一款云原生容器平台",
      created_by: "王先生",
      created_time: "2020-01-01 00:00:00",
      address: "https://cloud1.wodcloud.com/",
      token_value: "1234567bqsid123k12s0h1d3uhf493fh02hd3h38ff",
    },
    {
      id: 2,
      name: "阿里云平台",
      type_name: "第三方平台",
      desc: "阿里云平台",
      created_by: "王先生",
      created_time: "2020-01-01 00:00:00",
      address: "https://cloud2.wodcloud.com/",
      token_value: "abcdefgbqsis0h1d3uhf493fh02hdd102h9s3h38ff",
    },
    {
      id: 3,
      name: "腾讯云平台",
      type_name: "第三方平台",
      desc: "这是腾讯云平台啊",
      created_by: "王先生",
      created_time: "2020-01-01 00:00:00",
      address: "https://cloud3.wodcloud.com/",
      token_value: "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 = {
    name: "",
    type: 1,
    address: "",
    apiserver: "",
    token_value: "",
    desc: "",
  };
  if (bgForm.value) {
    nextTick(() => {
      bgForm.value.validate((valid) => {
        if (!valid) {
          bgForm.value.clearValidate();
        }
      });
    });
  }
};
const viewDetail = (row) => {
  state.platfromInfo[0].value = row.name
  state.platfromInfo[1].value = row.type_name
  state.platfromInfo[2].value = row.address
  state.platfromInfo[3].value = row.token_value
  state.platfromInfo[4].value = row.desc
  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>
