<!--
@ 作者: 秦东
@ 时间: 2024-04-18 14:52:06
@ 备注: 数据资源
-->
<script lang="ts" setup>
import { getOrPostDate, postSaveData } from "@/api/date/apidate";
import {
  dateTypes,
  dataSourceTypes,
  interfaceTypes,
  dataBaseStruct,
} from "@/api/date/type";

/**
@ 作者: 秦东
@ 时间: 2024-04-19 11:50:16
@ 功能: 引入页面
*/
import EditAssets from "@/views/date/editAssets.vue";

const editAssetsOpen = ref(false);
const editAssetsInfo = reactive<dataBaseStruct>({});
const dataLoading = ref(false);
const dataList = ref<dataBaseStruct[]>([]);
const searchData = reactive({
  pageNum: 1,
  pageSize: 10,
  databaseName: "",
  dataType: "",
  total: 0,
});
/**
@ 作者: 秦东
@ 时间: 2024-04-18 14:57:24
@ 功能: 获取数据
*/
const gainDateList = () => {
  dataLoading.value = true;
  let sendData = {
    url: import.meta.env.VITE_APP_SJZT_URL + "/database/app/datasource/page",
    methodType: "GET",
    where:
      "pageNum=" +
      searchData.pageNum +
      "&pageSize=" +
      searchData.pageSize +
      "&databaseName=" +
      searchData.databaseName +
      "&dataType=" +
      searchData.dataType,
  };
  getOrPostDate("POST", sendData).then((data: any) => {
    searchData.total = data.data.total;
    if (data.data.records && data.data.records.length > 0) {
      data.data.records.forEach((item: any) => {
        dateTypes.forEach((items: any) => {
          if (items.value == item.dataType) {
            item.dataTypeName = items.label;
          }
        });
        dataSourceTypes.forEach((itemsd: any) => {
          if (itemsd.value == item.datasourceType) {
            item.datasourceTypeName = itemsd.label;
          }
        });
        interfaceTypes.forEach((interItem: any) => {
          if (interItem.value == item.interfaceType) {
            item.interfaceTypeName = interItem.label;
          }
        });
      });
    }
    dataList.value = data.data.records;
    // console.log("获取数据=====>",searchData)
    dataLoading.value = false;
  });
};
/**
@ 作者: 秦东
@ 时间: 2024-04-19 08:09:40
@ 功能: 判断数据库类型
*/
function dataBaseType(val: any) {
  // console.log("判断数据库类型-->",val,dateTypes,val.dataType)
  let titleVal = "";
  if (val.dataType) {
    try {
      dateTypes.forEach((item: any) => {
        // console.log("判断数据库类型-1->",item.value,val.dataType,item.value==val.dataType)
        if (item.value == val.dataType) {
          // console.log("判断数据库类型-3->",item.value,val.dataType,item.value==val.dataType,item.label)
          titleVal = item.label;
          // return item.label
          throw item.label;
        }
      });
    } catch (e) {
      // console.log("判断数据库类型-12->",e)
    }
  }
  // console.log("判断数据库类型-2->",titleVal)
  return titleVal;
}
/**
@ 作者: 秦东
@ 时间: 2024-04-19 09:21:09
@ 功能: 重置查询条件
*/
const resuct = () => {
  searchData.pageNum = 1;
  searchData.pageSize = 10;
  searchData.databaseName = "";
  searchData.dataType = "";
  gainDateList();
};
/**
@ 作者: 秦东
@ 时间: 2024-04-19 09:28:53
@ 功能: 选择每页显示几条数据
*/
const handleSizeChange = (val: number) => {
  searchData.pageSize = val;
  gainDateList();
};
/**
@ 作者: 秦东
@ 时间: 2024-04-19 09:28:53
@ 功能: 翻页操作
*/
const handleCurrentChange = (val: number) => {
  searchData.pageNum = val;
  gainDateList();
};
/**
@ 作者: 秦东
@ 时间: 2024-04-19 10:44:53
@ 功能: 连接
*/
const openLink = (val: any) => {
  let sendData = {
    url: import.meta.env.VITE_APP_SJZT_URL + "/database/app/datasource/test",
    methodType: "GET",
    where:
      "databaseName=" +
      val.databaseName +
      "&port=" +
      val.port +
      "&ipAddress=" +
      val.ipAddress +
      "&datasourceType=" +
      val.datasourceType +
      "&dataType=" +
      val.dataType +
      "&interfaceType=" +
      val.interfaceType +
      "&account=" +
      val.account +
      "&password=" +
      val.password +
      "&id=" +
      val.id +
      "&redashDatasourceId=" +
      val.redashDatasourceId,
  };
  // console.log("连接-1->",sendData)
  getOrPostDate("POST", sendData).then((data: any) => {
    // console.log("连接-->",data)
    if (data.code == 200) {
      ElMessage.success(data.msg);
    } else {
      ElMessage.error(data.msg);
    }
    gainDateList();
  });
};
onMounted(() => {
  gainDateList();
});
/**
@ 作者: 秦东
@ 时间: 2024-04-19 11:54:12
@ 功能: 重置
*/
const resettingHandel = () => {
  editAssetsOpen.value = false;
  editAssetsInfo.databaseName = "";
  editAssetsInfo.port = "";
  editAssetsInfo.ipAddress = "";
  editAssetsInfo.datasourceType = "";
  editAssetsInfo.dataType = "";
  editAssetsInfo.interfaceType = "";
  editAssetsInfo.account = "";
  editAssetsInfo.password = "";
  editAssetsInfo.id = "";
  editAssetsInfo.redashDatasourceId = "";
  editAssetsInfo.author = "";
  gainDateList();
};
/**
@ 作者: 秦东
@ 时间: 2024-04-19 12:59:18
@ 功能: 新增数据源
*/
const addDataBase = () => {
  editAssetsInfo.id = "";
  editAssetsOpen.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2024-04-19 13:35:02
@ 功能: 编辑数据源
*/
const editDataBase = (val: dataBaseStruct) => {
  editAssetsInfo.databaseName = val.databaseName;
  editAssetsInfo.port = val.port;
  editAssetsInfo.ipAddress = val.ipAddress;
  editAssetsInfo.datasourceType = val.datasourceType;
  editAssetsInfo.dataType = val.dataType;
  editAssetsInfo.interfaceType = val.interfaceType;
  editAssetsInfo.account = val.account;
  editAssetsInfo.password = val.password;
  editAssetsInfo.id = val.id;
  editAssetsInfo.redashDatasourceId = val.redashDatasourceId;
  editAssetsInfo.author = val.author;
  editAssetsInfo.dataSourceDes = val.dataSourceDes;
  editAssetsOpen.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2024-04-19 14:26:27
@ 功能: 删除数据
*/
const delDataBase = (val: dataBaseStruct) => {
  ElMessageBox.confirm(
    "确认删除<" + val.databaseName + ">此数据项?一经删除！数据将不可恢复！",
    "警告",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).then(() => {
    let sendData = {
      url: import.meta.env.VITE_APP_SJZT_URL + "/database/app/datasource/delete",
      dataInfo: val,
    };
    postSaveData(sendData).then((data: any) => {
      if (data.code == 0) {
        ElMessage.success(data.msg);
        gainDateList();
      } else {
        ElMessage.error(data.msg);
      }
    });
  });
};
</script>
<template>
  <div class="dataBox">
    <EditAssets
      v-model:is-show="editAssetsOpen"
      :data-info="editAssetsInfo"
      @setResetting="resettingHandel"
    />
    <el-card style="width: 100%">
      <template #header>
        <div class="card_header">
          <div>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="数据源名称">
                <el-input
                  v-model="searchData.databaseName"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
              <el-form-item label="数据源类型">
                <el-select
                  v-model="searchData.dataType"
                  placeholder="请选择"
                  clearable
                  style="width: 180px"
                >
                  <el-option
                    v-for="item in dateTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-button type="primary" @click="gainDateList"
              ><el-space wrap><i class="fa fa-search"></i>查询</el-space></el-button
            >
            <el-button plain @click="resuct">重置</el-button>
          </div>
        </div>
      </template>
      <el-row class="newAddBox">
        <el-col :span="24">
          <el-button type="primary" @click="addDataBase"
            ><el-space wrap><i class="fa fa-plus"></i>新增数据源</el-space></el-button
          >
          <el-button plain>导出数据源</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="dataList"
        v-loading="dataLoading"
        stripe
        :header-cell-style="{ background: '#f5f8fd' }"
        style="width: 100%"
      >
        <el-table-column fixed type="selection" width="50" align="center" />
        <el-table-column fixed label="序号" type="index" width="60" align="center" />
        <el-table-column prop="datasourceTypeName" label="数据库产品" width="120" />
        <el-table-column prop="dataTypeName" label="数据库类型" width="160" />
        <el-table-column prop="databaseName" label="数据库名称" width="160" />
        <el-table-column prop="dataSourceDes" label="描述" width="160" />
        <el-table-column prop="interfaceTypeName" label="接口方式" width="100" />
        <el-table-column prop="ipAddress" label="IP地址" width="160" />
        <el-table-column prop="port" label="端口" align="center" />
        <el-table-column prop="account" label="帐号" width="160" />
        <el-table-column prop="author" label="帐号权限" width="100" align="center" />
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="scope">
            <el-text v-if="scope.row.status == 1" class="mx-1" type="primary"
              >已连接</el-text
            >
            <el-text v-else class="mx-1" type="danger">连接失败</el-text>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="250" align="center">
          <template #default="scope">
            <el-button class="oper-btn" plain @click="openLink(scope.row)"
              >连接</el-button
            >
            <el-button class="oper-btn" plain @click="editDataBase(scope.row)"
              >编辑</el-button
            >
            <el-button class="oper-btn" plain @click="delDataBase(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24" class="pageSetUp">
          <el-pagination :small="small" :total="searchData.total" layout="total" />
          <el-pagination
            v-model:current-page="searchData.pageNum"
            v-model:page-size="searchData.pageSize"
            :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
            :small="small"
            :background="true"
            :total="searchData.total"
            layout="sizes, prev, pager,next,jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<style lang="scss" scoped>
.dataBox {
  padding: 10px;
  .el-table .el-table__header td {
    background: #f5f8fd;
  }
  .newAddBox {
    margin-bottom: 20px;
  }
  .card_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .el-form-item {
    margin-bottom: 0px;
  }
  .pageSetUp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0 10px 0;
    height: 55px;
  }
}
.oper-btn {
  background: rgba(61, 127, 255, 0.1);
  border: 1px solid rgba(61, 127, 255, 0.6);
  color: #3d7fff;
}
</style>
