<template>
  <el-card class="box-card" shadow="always">
    <div slot="header" class="clearfix">
      <span>{{ title }}</span>
      <el-button-group style="float: right;">
        <!-- zrx add-->
        <el-button v-if="form.isSync === '0'" type="primary" size="mini" icon="el-icon-coin" @click="handleSync">元数据同步</el-button>
        <el-button v-if="form.isSync === '2'" type="primary" size="mini" icon="el-icon-coin" @click="handleSync">元数据更新</el-button>
        <el-button v-if="form.isSync === '2'" type="primary" size="mini" icon="el-icon-coin" @click="handleWord">数据库文档</el-button>
        <el-button v-if="form.isSync === '3'" type="primary" size="mini" icon="el-icon-coin" @click="handleSync">元数据再次同步</el-button>
        <el-button type="primary" size="mini" icon="el-icon-coin" @click="handleCheckConnection">连通性检测</el-button>
        <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
      </el-button-group>
    </div>
    <div class="body-wrapper">
      <el-descriptions style="margin-top: 20px" title="数据源信息" :column="2" border size="medium" >
        <el-descriptions-item :labelStyle="{width: '200px'}" :contentStyle="{width: '35%'}">
          <template slot="label">
            <i class="el-icon-tickets"></i>
            数据源名称
          </template>
          {{form.sourceName}}
        </el-descriptions-item>
        <el-descriptions-item :labelStyle="{width: '200px'}">
          <template slot="label">
            <i class="el-icon-star-off"></i>
            状态
          </template>
          <template v-for="dict in statusOptions">
            <el-tag v-if="form.status == dict.itemText && form.status == '1' " size="small" type="success">{{ dict.itemValue }}</el-tag>
            <el-tag v-if="form.status == dict.itemText && form.status != '1'  " size="small" type="warning">{{ dict.itemValue }}</el-tag>
          </template>
        </el-descriptions-item>
        <el-descriptions-item :labelStyle="{width: '200px'}">
          <template slot="label">
            <i class="el-icon-document"></i>
            备注
          </template>
          {{form.remark}}
        </el-descriptions-item>
      </el-descriptions >
      <el-descriptions style="margin-top: 20px" title="数据库类型" :column="1" :colon="false" border size="medium">
        <el-descriptions-item :labelStyle="{width: '200px'}">
          <template slot="label">
            <i class="el-icon-menu"></i>
            数据库类型
          </template>
          <div class="modellist" style="width:100%">
            <div v-if="form.dbType =='1'" class="list" @click="chooseDbType('1')">
              <div class="limg"><img :src="databaseImg.imgMySQL"></div>
              <div class="ltitle">
                <el-tooltip content="mysql数据库" placement="bottom" effect="light">
                  <p class="title">mysql</p>
                </el-tooltip>
              </div>
            </div>
            <div v-if="form.dbType =='2'" class="list"  @click="chooseDbType('2')">
              <div class="limg"><img :src="databaseImg.imgMariaDB"></div>
              <div class="ltitle">
                <el-tooltip content="mariadb-3.0.3数据库" placement="bottom" effect="light">
                  <p class="title">mariadb-3.0.3</p>
                </el-tooltip>
              </div>
            </div>
            <div v-if="form.dbType =='3'" class="list"  @click="chooseDbType('3')">
              <div class="limg"><img :src="databaseImg.imgOracle"></div>
              <div class="ltitle">
                <el-tooltip content="oracle数据库" placement="bottom" effect="light">
                  <p class="title">oracle</p>
                </el-tooltip>
              </div>
            </div>
            <div v-if="form.dbType =='9'" class="list"  @click="chooseDbType('9')">
              <div class="limg"><img :src="databaseImg.imgdm8"></div>
              <div class="ltitle">
                <el-tooltip content="dm数据库" placement="bottom" effect="light">
                  <p class="title">dm</p>
                </el-tooltip>
              </div>
            </div>
            <div v-if="form.dbType =='8'" class="list"  @click="chooseDbType('8')">
              <div class="limg"><img :src="databaseImg.imgibmdb2"></div>
              <div class="ltitle">
                <el-tooltip content="db2数据库" placement="bottom" effect="light">
                  <p class="title">db2</p>
                </el-tooltip>
              </div>
            </div>
            <div v-if="form.dbType =='5'" class="list"  @click="chooseDbType('5')">
              <div class="limg"><img :src="databaseImg.imgPostgreSQL"></div>
              <div class="ltitle">
                <el-tooltip content="PostgreSQ数据库" placement="bottom" effect="light">
                  <p class="title">PostgreSQ</p>
                </el-tooltip>
              </div>
            </div>
            <div v-if="form.dbType =='6'" class="list" @click="chooseDbType('6')">
              <div class="limg"><img :src="databaseImg.imgSqlserver"></div>
              <div class="ltitle">
                <el-tooltip content="Sqlserver数据库" placement="bottom" effect="light">
                  <p class="title">Sqlserver</p>
                </el-tooltip>
              </div>
            </div>
            <div v-if="form.dbType =='7'" class="list" @click="chooseDbType('7')">
              <div class="limg"><img :src="databaseImg.imgkingbase"></div>
              <div class="ltitle">
                <el-tooltip content="kingbase数据库" placement="bottom" effect="light">
                  <p class="title">kingbase</p>
                </el-tooltip>
              </div>
            </div>
            <div v-if="form.dbType =='10'" class="list"  @click="chooseDbType('10')">
              <div class="limg"><img :src="databaseImg.imggaussdb"></div>
              <div class="ltitle">
                <el-tooltip content="GaussDB数据库" placement="bottom" effect="light">
                  <p class="title">GaussDB</p>
                </el-tooltip>
              </div>
            </div>
            <div v-if="form.dbType =='4'" class="list"  @click="chooseDbType('4')">
              <div class="limg"><img :src="databaseImg.imgdefault"></div>
              <div class="ltitle">
                <el-tooltip content="MaxCompute数据库" placement="bottom" effect="light">
                  <p class="title">MaxCompute</p>
                </el-tooltip>
              </div>
            </div>
          </div><!--modellist 模型监控列表-->
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions style="margin-top: 20px" title="连接信息" :column="2" border size="medium">
        <el-descriptions-item :labelStyle="{width: '200px'}" :contentStyle="{width: '35%'}">
          <template slot="label">
            <i class="el-icon-coin"></i>
            主机
          </template>
          {{form2.host}}
        </el-descriptions-item>
        <el-descriptions-item :labelStyle="{width: '200px'}">
          <template slot="label">
            <i class="el-icon-thumb"></i>
            端口
          </template>
          {{form2.port}}
        </el-descriptions-item>
        <el-descriptions-item v-if="form.dbType === '3' || form.dbType === '4'">
          <template slot="label">
            <i class="el-icon-user"></i>
            服务名
          </template>
          {{form2.sid}}
        </el-descriptions-item>
        <el-descriptions-item >
          <template slot="label">
            <i class="el-icon-coin"></i>
            数据库
          </template>
          {{form2.dbName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            用户名
          </template>
          {{form2.username}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-check"></i>
            密码
          </template>
          {{form2.password}}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </el-card>
</template>

<script>
import { getDataSource, checkConnection, sync, word } from '@/api/metadata/datasource'
import imgMySQL from '@/assets/database/MySQL.svg'
import imgMariaDB from '@/assets/database/MariaDB.svg'
import imgOracle from '@/assets/database/Oracle.svg'
import imgdm8 from '@/assets/database/dm8.png'
import imgibmdb2 from '@/assets/database/ibmdb2.png'
import imgPostgreSQL from '@/assets/database/PostgreSQL.svg'
import imgSqlserver from '@/assets/database/Sqlserver.svg'
import imgdefault from '@/assets/database/default.svg'
import imgkingbase from '@/assets/database/kingbase.png'
import imggaussdb from '@/assets/database/gaussdb.png'

export default {
  name: 'DataSourceDetail',
  props: {
    data: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      title: '数据源详情',
      databaseImg: {
        imgMySQL: imgMySQL,
        imgMariaDB: imgMariaDB,
        imgOracle: imgOracle,
        imgdm8: imgdm8,
        imgibmdb2: imgibmdb2,
        imgPostgreSQL: imgPostgreSQL,
        imgSqlserver: imgSqlserver,
        imgdefault: imgdefault,
        imgkingbase: imgkingbase,
        imggaussdb: imggaussdb
      },
      // 展示切换
      showOptions: {
        data: {},
        showList: true,
        showAdd: false,
        showEdit: false,
        showDetail: false
      },
      active: 1,
      // 表单参数
      form: {},
      form2: {},
      // 状态数据字典
      statusOptions: [],
      // 数据源类型数据字典
      dbTypeOptions: []
    }
  },
  created() {
    console.log('id:' + this.data.id)
    this.getDicts('sys_common_status').then(response => {
      if (response.success) {
        this.statusOptions = response.data
      }
    })
    this.getDicts('data_db_type').then(response => {
      if (response.success) {
        this.dbTypeOptions = response.data
      }
    })
  },
  mounted() {
    this.getDataSource(this.data.id)
  },
  methods: {
    showCard() {
      this.$emit('showCard', this.showOptions)
    },
    /** 获取详情 */
    getDataSource: function(id) {
      getDataSource(id).then(response => {
        if (response.success) {
          this.form = response.data
          console.log('ddd', this.form)
          this.form2 = this.form.dbSchema
        }
      })
    },
    /** 步骤条下一步 */
    handleNextStep() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.active++
        }
      })
    },
    /** 步骤条上一步 */
    handleLastStep() {
      this.active--
    },
    /** 检测数据库连通性 */
    handleCheckConnection() {
      checkConnection(this.form).then(response => {
        if (response.success) {
          this.$message.success('连接成功')
        }
      })
    },
    /** 元数据同步 */
    handleSync() {
      sync(this.data.id).then(response => {
        if (response.success) {
          this.$set(this.form, 'isSync', '1')
          this.$message.success('元数据正在后台同步中，同步完成后刷新缓存即可到元数据管理中查看结果')
        }
      })
    },
    /** 数据库文档 */
    handleWord() {
      word(this.data.id).then(response => {
        const blob = new Blob([response])
        const fileName = '数据库设计文档.doc'
        if ('download' in document.createElement('a')) {
          // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href)
          // 释放URL 对象
          document.body.removeChild(elink)
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card ::v-deep .el-card__body {
  height: calc(100vh - 230px);
  overflow-y: auto;
}
</style>
