<template>
  <div v-loading="loading" class="page-view overflow-h">
    <!--    <el-empty :image-size="200" />-->
    <app-title-bar class="mb-10">
      汇聚数据源
      <template #right-area>
        <el-button icon="el-icon-plus" size="mini" type="primary" @click="addData"> 新增</el-button>
      </template>
    </app-title-bar>

    <div class="grid-box flex-1 overflow-y pa-25 bg-white border-radius-4">
      <div v-for="item in cardList" :key="item.id" class="bg-white">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="flex-row-sb-c">
            <span />
          </div>
          <div class="">
            <div class="card-header flex-row-c">
              <svg-icon :icon-class="getSvg(item.dbType)" class="mr-5" icon-style="icon" />
            </div>

            <div class="flex-row-sb-c pb-10">
              <span class="text-color-light fs-17 fw-bold"> {{ item.name }}</span>

              <div class="flex-row-s-c">
                <el-button icon="el-icon-edit" size="small" type="text" @click="editData(item)" />
                <el-button class="text-color-error" icon="el-icon-delete" size="small" type="text"
                           @click="delData(item)"
                />
              </div>
            </div>
            <table class="descriptions-table flex-1">
              <tr>
                <th>数据库连接名</th>
                <td>{{ item.alias }}</td>
              </tr>
              <tr>
                <th>是否生效</th>
                <td>
                  <el-tag :type="item.enabled ? '' : 'info'" size="mini">{{ item.enabled ? '是' : '否' }}</el-tag>
                </td>
              </tr>
              <tr>
                <th>数据库类型</th>
                <td>{{ item.dbType }}</td>
              </tr>
              <tr>
                <th>数据源类型</th>
                <td>{{ filterDict('DATASOURCE_TYPE', item.datasourcesType).label }}</td>
              </tr>
              <!--              <tr>-->
              <!--                <th>驱动类路径</th>-->
              <!--                <td>{{ item.classPath }}</td>-->
              <!--              </tr>-->
            </table>
          </div>
        </el-card>
      </div>
    </div>

    <ht-load-data context="portal" url="/sys/sysDataSourceDef/v1/getAll"
                  @after-load-data="afterLoadSourcesettingData"
    />
    <source-pane v-model="dialogVisible" :data="currentRow" :sys-data-source="sysDataSourceDefs" :title="dialogTitle"
                 @onConfirm="getData"
    />
    <!-- 加载数据 用作编辑数据源和查看数据源-->
    <!-- <ht-load-data
      :url="loadDataUrl"
      context="portal"
      @after-load-data="afterLoadData"
    ></ht-load-data> -->
  </div>
</template>

<script>
import SourcePane from './Source.vue';
import API from '@/api/business/changeDataSource'; // import DICT from '@/utils/dict';
import DICT from '@/utils/dict';

export default {
  components: { SourcePane },
  data() {
    return {
      loading: true,
      svgList: ['oracle', 'sqlServer', 'mySql', 'postgreSql'],
      dialogVisible: false,
      dialogTitle: '',
      currentRow: null,
      sysDataSourceDefs: [],
      cardList: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    filterDict: (type, val) => {
      return DICT[type].find(item => item.value === val);
    },
    async getData() {
      try {
        this.loading = true;
        const data = await API.getList(1);
        this.cardList = data || [];
      } catch (error) {
        console.log(error);
      } finally {
        setTimeout(() => {
          this.loading = false;
        }, 500);
      }
    },
    getSvg(dy) {
      if (dy) return this.svgList.find(item => item.toLowerCase() === dy.toLowerCase());
    },
    onSourceConfirm() {
    },
    editData(row) {
      this.currentRow = row;
      this.dialogTitle = `编辑数据源 - ${row.name}`;
      this.dialogVisible = true;
    },
    addData() {
      this.dialogTitle = '新增数据源';
      this.dialogVisible = true;
      this.currentRow = null;
    },
    delData(row) {
      this.$confirm('是否删除该交换库数据源?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        try {
          await API.delSource(row.id);
          this.getData();
        } catch (error) {
          console.log(error);
        }
      });
    },
    afterLoadSourcesettingData(data) {
      this.sysDataSourceDefs = data;
      // if (this.sysDataSourceRow && this.sysDataSourceRow.id) {
      //   this.loadDataUrl =
      //     `/sys/sysDataSource/v1/getJson?id=` + this.sysDataSourceRow.id
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
.grid-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 30px;

  ::v-deep {
    .el-card {
      flex: 1;
      height: 100%;
      position: relative;
      //padding-left: 50px;
      background: linear-gradient(-210deg, transparent 1.5em, #fff 0);

      &::before {
        content: '';
        display: block;
        width: 1.73em;
        height: 3em;
        position: absolute;
        background: linear-gradient(-60deg, #ebeef5 50%, transparent 0);
        left: -4px;
        top: 0;
        border-bottom-left-radius: inherit;
        transform: translateY(-0.5em) rotate(30deg);
        transform-origin: bottom right;
        box-shadow: 0.2em 0.2em 0.3em -0.1em rgba(0, 0, 0, 0.25);
      }
    }

    .el-card__body {
      padding: 11px;
    }

    .el-card__header {
      padding: 0 15px;
      border: 0;
    }
  }
}

.icon {
  width: 10em;
  height: 5em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
