<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:platform_name="{ row }">
              <span class="can_click_text" @click="viewDetail(row)">
                {{ row.platform_name }}
              </span>
            </template>
            <template v-slot:platform_type="{ row }">
              {{ ["", "自有平台", "第三方平台"][row.platform_type] }}
            </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="platform_type">
          <el-radio-group v-model="formData.platform_type">
            <el-radio v-for="(item, index) in typeList" :key="'platform_type' + index" :label="item.value">
              {{ item.name }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="平台名称" prop="platform_name">
          <el-input v-model.trim="formData.platform_name" placeholder="请输入平台名称" maxlength="50" show-word-limit />
        </el-form-item>
        <el-form-item label="平台帐号" prop="platform_account" v-if="formData.platform_type == 1">
          <el-input
            v-model.trim="formData.platform_account"
            placeholder="请输入aPaaS在该平台注册的帐号"
            maxlength="50"
            show-word-limit />
        </el-form-item>
        <el-form-item label="工作组名称" prop="work_group" v-if="formData.platform_type == 1">
          <el-input
            v-model.trim="formData.work_group"
            placeholder="请输入aPaaS在该平台注册申请的工作组名称"
            maxlength="50"
            show-word-limit />
        </el-form-item>
        <el-form-item label="服务地址" prop="service_url" v-if="formData.platform_type == 1">
          <el-input
            v-model.trim="formData.service_url"
            placeholder="请输入服务地址URL"
            maxlength="100"
            show-word-limit />
        </el-form-item>
        <el-form-item label="服务地址TOKEN" prop="service_token" v-if="formData.platform_type == 1">
          <el-input
            v-model.trim="formData.service_token"
            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="token">
          <el-input
            v-model.trim="formData.token"
            placeholder="请输入SERVER TOKEN参数"
            maxlength="100"
            show-word-limit />
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model.trim="formData.platform_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" :disabled="!testSuccess" @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, watch } 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: "platform_name",
    },
    {
      label: "平台类型",
      prop: "platform_type",
    },
    {
      label: "描述",
      prop: "platform_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, // 1-新增 2-编辑
  addDialog: false, // 新增/编辑弹窗
  formData: {
    platform_type: 1,
    platform_name: "",
    platform_account: "",
    work_group: "",
    service_url: "",
    service_token: "",
    apiserver: "",
    token: "",
    platform_desc: "",
  },
  rules: {
    platform_name: [{ required: true, message: "平台名称不能为空", trigger: "blur" }],
    platform_type: [{ required: true, message: "请选择平台类型", trigger: "change" }],
    platform_account: [{ required: true, message: "平台帐号不能为空", trigger: "blur" }],
    work_group: [{ required: true, message: "工作组名称不能为空", trigger: "blur" }],
    service_url: [{ required: true, message: "服务地址URL不能为空", trigger: "blur" }],
    service_token: [{ required: true, message: "服务地址的TOKEN参数不能为空", trigger: "blur" }],
    apiserver: [{ required: true, message: "APISERVER参数不能为空", trigger: "blur" }],
    token: [{ required: true, message: "SERVER TOKEN参数不能为空", 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,
    },
  ],
  testSuccess: false, // 测试连接结果
});
watch(
  () => state.formData,
  (newValue, oldValue) => {
    state.testSuccess = false;
  },
  {
    deep: true,
  }
);

const getRoleRows = () => {
  let params = { ...state.filter };
  axios.get(`/apaas/application/v5/platform/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 = {
    platform_type: 1,
    platform_name: "",
    platform_account: "",
    work_group: "",
    service_url: "",
    service_token: "",
    apiserver: "",
    token: "",
    platform_desc: "",
  };
  if (bgForm.value) {
    nextTick(() => {
      bgForm.value.validate((valid) => {
        if (!valid) {
          bgForm.value.clearValidate();
        }
      });
    });
  }
}; // 重置表单
const viewDetail = async (row) => {
  let { data } = await getDetail(row.id);
  if (data.code == 200) {
    state.platfromInfo[0].value = ["", "自有平台", "第三方平台"][data.data.platform_type];
    state.platfromInfo[1].value = data.data.platform_name;
    state.platfromInfo[2].value = data.data.platform_account;
    state.platfromInfo[3].value = data.data.work_group;
    state.platfromInfo[4].value = data.data.service_url;
    state.platfromInfo[5].value = data.data.service_token;
    state.platfromInfo[6].value = data.data.apiserver;
    state.platfromInfo[7].value = data.data.token;
    state.platfromInfo[8].value = data.data.platform_desc;
    if (data.data.platform_type == 2) {
      state.platfromInfo.splice(2, 4);
    }
    state.detailDialog = true;
  } else {
    ElMessage.error(data.data);
  }
}; // 查看详情
const getDetail = (id) => {
  return axios.get(`/apaas/application/v5/platform/detail/${id}`);
}; // 获取详情
const edit_row = async (row) => {
  resetForm();
  let { data } = await getDetail(row.id);
  if (data.code == 200) {
    Object.assign(state.formData, data.data);
    state.dialogType = 2;
    state.addDialog = true;
  } else {
    ElMessage.error(data.data);
  }
}; // 编辑
const testUrl = () => {
  bgForm.value.validate((valid) => {
    if (valid) {
      let params = {
        ...state.formData,
      };
      axios.post(`/apaas/application/v5/platform/check`, params).then((res) => {
        if (res.data.code == 200) {
          ElMessage.success("测试连接通过");
          state.testSuccess = true;
        } else {
          ElMessage.error("测试连接失败");
        }
      });
    }
  });
}; // 测试连接
const postData = () => {
  let params = {
    ...state.formData,
  };
  let url = ["", "/apaas/application/v5/platform/add", "/apaas/application/v5/platform/update"];
  axios.post(url[state.dialogType], params).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success(res.data.msg);
      state.addDialog = false;
      state.testSuccess = false;
      changePage(1);
    } else {
      ElMessage.error(res.data.data);
    }
  });
}; // 新建/编辑数据
const delete_row = (row) => {
  state.actionRow = row;
  state.delDialog = true;
}; // 删除
const deleteData = () => {
  axios.delete(`/apaas/application/v5/platform/${state.actionRow.id}`).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,
  testSuccess,
} = 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>
