<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      :data="data"
      :pageResult="pageResult"
      :selection="true"
      :quick-search-props="seacrh"
      :default-sorter="[{direction: 'DESC', property: 'create_time_'}]"
      :show-export="false"
      :show-custom-column="false"
      ref="htTable"
      @row-click="rowClick"
      v-if="tableshow"
      @select="selectDict"
      @select-all="selectDict"
    >
      <template v-slot:toolbar>
          <el-button size="small" @click="showDialog(1)" icon="el-icon-plus" type='primary'
            >添加</el-button
          >
          <ht-delete-button
            url="${portal}/uc/backupDatasource/v1/"
            :htTable="$refs.htTable"
            :style="{marginLeft: '10px'}"
            >删除</ht-delete-button
          >
      </template>
      <template>
        <ht-table-column
          prop="systemType"
          label="服务器类型"
          :show-overflow-tooltip="true"
        >
          <template v-slot="{row}">
            <el-link type="primary" @click="showDialog(row)" title="修改表单">{{
              row.systemType
            }}</el-link>
          </template>
        </ht-table-column>
        <ht-table-column prop="systemIp" label="服务器IP" />
        <ht-table-column prop="systemUser" label="服务器账号" />
        <!-- <ht-table-column prop="systemPwd" label="登录密码" /> -->
        <ht-table-column prop="dbType" label="数据类型" />
        <ht-table-column prop="dbPort" label="数据库端口" />
        <ht-table-column prop="dbName" label="数据库名称" />
        <ht-table-column prop="dbUser" label="数据库账号" />
        <!-- <ht-table-column prop="dbPwd" label="连接密码" /> -->
        <ht-table-column
          label="操作"
          align="center"
          style="display: flex"
          width="180px"
        >
          <template v-slot="{row}">
            <el-button size="mini" @click="see(row)">查看</el-button>
            <el-button size="mini" @click="backupsbtn(row)">备份</el-button>
          </template>
        </ht-table-column>
      </template>
    </ht-table>
    <!-- <BackupTable v-if="backupsshow"/> -->
    <el-tabs v-model="activeName" @tab-click="handleClick" v-if="backupsshow">
      <el-tab-pane label="备份记录" name="first">
        <BackupTable />
      </el-tab-pane>
      <el-tab-pane label="还原日志" name="second">
        <RestTable />
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      width="50%"
      :title="rows == 1 ? '添加备份' : '修改备份'"
      class="sp-manager__dialog"
      :visible="dialogVisible"
      v-if="dialogVisible"
      :before-close="beforeCloseDialog"
    >
      <el-form :model="addform" data-vv-scope="msgTemplateForm">
        <el-row type="flex" align="middle" justify="space-around">
          <el-col :span="12">
            <ht-form-item label="服务器类型" class="jiaxing">
              <el-select
                v-model="addform.systemType"
                placeholder="请选择服务器类型"
                
              >
                <el-option label="linux" value="linux"></el-option>
                <el-option label="windows" value="windows"></el-option>
              </el-select>
            </ht-form-item>
          </el-col>
          <el-col :span="12">
            <ht-form-item label="服务器IP">
              <ht-input v-model="addform.systemIp" :showWordLimit="true" :validate="{required: true}"/>
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <ht-form-item label="服务器账号">
              <ht-input
                v-model="addform.systemUser"
                :showWordLimit="true"
                :validate="{required: true}"
              />
            </ht-form-item>
          </el-col>
          <el-col :span="12">
            <ht-form-item label="服务器密码">
              <ht-input
                v-model="addform.systemPwd"
                :showWordLimit="true"
                :show-password="true"
                :validate="{required: true}"
              />
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <ht-form-item label="数据库类型" class="jiaxing">
              <el-select
                v-model="addform.dbType"
                placeholder="请选择数据库类型"
                @change="dbchange"
              >
                <el-option
                  v-for="item in dbTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </ht-form-item>
          </el-col>
          <el-col :span="12">
            <ht-form-item label="数据库名称">
              <ht-input
                v-model="addform.dbName"
                :showWordLimit="true"
                :validate="{required: true}"
              />
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push="1" :span="22">
            <ht-form-item label="数据库驱动">
              <ht-input
                v-model="addform.dbDriver"
                :showWordLimit="true"
                :validate="{required: true}"
              />
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push="1" :span="22">
            <ht-form-item label="连接URL">
              <ht-input
                v-model="addform.dbUrl"
                width="calc(100% - 40px ）"
                :showWordLimit="true"
                :value="addform.dbUrl"
                :validate="{required: true}"
              />
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <ht-form-item label="数据库账号">
              <ht-input
                v-model="addform.dbUser"
                :showWordLimit="true"
                :validate="{required: true}"
              />
            </ht-form-item>
          </el-col>
          <el-col :span="12">
            <ht-form-item label="数据库密码">
              <ht-input
                v-model="addform.dbPwd"
                :showWordLimit="true"
                :show-password="true"
                :validate="{required: true}"
              />
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <ht-form-item label="数据库端口">
              <ht-input
                v-model="addform.dbPort"
                :showWordLimit="true"
                :validate="{required: true}"
              />
            </ht-form-item>
          </el-col>
          <el-col :span="12">
            <ht-form-item label="备份类型" class="jiaxing">
              <el-select
                v-model="addform.backupType"
                placeholder="请选择备份类型"
              >
                <el-option label="手动备份" value="1"></el-option>
                <el-option label="自动备份" value="2"></el-option>
              </el-select>
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row v-if="addform.backupType == '2'">
          <el-col :push="1" :span="22">
            <ht-form-item
              label="自动备份CRON"
              label-width="115px"
              style="margin-left: -15px"
            >
              <ht-input
                v-model="addform.cron"
                :showWordLimit="true"
              />
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push="1" :span="22">
            <ht-form-item label="还原脚本">
              <!-- <ht-input
                v-model="addform.reductionCommond"
                type="textarea"
                :rows="3"
                :showWordLimit="true"
              /> -->
              <codemirror
                  ref="reduccode"
                  v-model="addform.reductionCommond"
                  :options="cmOptions2"
                  class="code"
                  style="width: 100%"
                ></codemirror>
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push="1" :span="22">
            <ht-form-item label="备份脚本">
              <codemirror
                  ref="backupcode"
                  v-model="addform.backupCommond"
                  :options="cmOptions2"
                  class="code"
                  style="width: 100%"
                ></codemirror>
            </ht-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <ht-submit-button
          :url="saveUrl"
          :model="addform"
          :is-submit="isSubmit"
          scope-name="msgTemplateForm"
          @before-save-data="beforeSaveData()"
          @after-save-data="afterSaveData"
          >保存</ht-submit-button
        >
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import portal from '@/api/portal.js'
import BackupTable from '@/views/system/Backupmanagement/backupTable.vue'
import RestTable from '@/views/system/Backupmanagement/restTable'
import {Loading} from 'element-ui'
export default {
  name: 'BackupManager',
  components: {BackupTable, RestTable},
  data() {
    return {
      seacrh: [
        {label: '服务器类型', prop: 'uc_backup_datasource.system_type_'},
        {label: '登录账号', prop: 'uc_backup_datasource.system_user_'},
      ],
      dialogVisible: false,
      activeName: 'first',
      backupsshow: false,
      tableshow: true,
      data: [],
      cmOptions2: {
        value: '',
        mode: 'x-sql',
        readOnly: false,
        smartIndent: true,
        tabSize: 1,
        theme: 'base16-light',
        lineNumbers: true,
        line: true,
        lineWrapping: true,
      },
      queryrow: {},
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0,
      },
      dbTypeList: [
        {
          value: 'mysql',
          driverName: 'com.mysql.cj.jdbc.Driver',
          url: 'jdbc:mysql://主机:3306/数据库名?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&zeroDateTimeBehavior=convertToNull',
          validationquery: 'select 1 from dual',
        },
        {
          value: 'oracle',
          driverName: 'oracle.jdbc.OracleDriver',
          url: 'jdbc:oracle:thin:@主机:1521:数据库实例',
          validationquery: 'select 1 from dual',
        },
        {
          value: 'mssql2012',
          driverName: 'com.microsoft.sqlserver.jdbc.SQLServerDriver',
          url: 'jdbc:sqlserver://主机:1433;databaseName=数据库名;',
          validationquery: 'select 1',
        },
        {
          value: 'mssql2008',
          driverName: 'com.microsoft.sqlserver.jdbc.SQLServerDriver',
          url: 'jdbc:sqlserver://主机:1433;databaseName=数据库名;',
          validationquery: 'select 1',
        },
        {
          value: 'pgsql',
          driverName: 'org.postgresql.Driver',
          url: 'jdbc:postgresql://主机:5432/数据库名',
          validationquery: 'select 1',
        },
        {
          value: 'dm8',
          driverName: 'dm.jdbc.driver.DmDriver',
          url: 'jdbc:dm://192.168.1.120:5236/EIP725_DM',
          validationquery: 'select 1 from dual',
        },
      ],
      currentProperty: {encrypt: 1},
      delurl: '',
      row: '',
      addform: {
        backupCommond: '',
        backupType: '1',
        cron: '',
        dbDriver: '',
        dbName: '',
        dbPort: '',
        dbPwd: '',
        dbType: 'mysql',
        dbUrl: 'jdbc:mysql://主机:3306/数据库名?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&zeroDateTimeBehavior=convertToNull',
        dbUser: '',
        id: '',
        reductionCommond: '',
        systemIp: '',
        systemPwd: '',
        systemType: 'linux',
        systemUser: '',
      },
      saveUrl: '',
      rows: '',
      isSubmit: false,
    }
  },
  mounted() {
    this.$bus.on('comback', () => {
      this.backupsshow = false
      this.tableshow = true
      this.activeName = 'first'
    })
  },
  methods: {
    rowClick(row, column, event) {
      this.$refs.htTable.$refs.htTable.toggleRowSelection(row)
    },
    loadData(param, cb) {
      // 加载请求渲染表格
      // param.sorter = [
      //   {
      //     group: 'main',
      //     operation: 'EQUAL',
      //     parentGroup: '',
      //     property: 'create_time_',
      //     relation: 'AND',
      //     value: {},
      //   },
      // ],
      portal
        .Backup(param)
        .then((response) => {
          this.data = response.rows
          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total,
          }
        })
        .finally(() => cb())
    },
    selectDict(selection, row) {
      this.queryrow = row
    },
    beforeCloseDialog() {
      this.dialogVisible = false
    },
    see(row) {
      this.tableshow = false
      this.$nextTick(() => {
        this.$bus.emit('seerow', row.id)
      })
      this.backupsshow = true
    },
    handleClick(tab, event) {
    },
    showDialog(row) {
      // console.log(row)
      if (row == 1) {
        this.rows = 1
      } else {
        this.addform = row
      }
      this.dialogVisible = true
    },
    backupsbtn(row) {
      let data = this.qs.stringify({
        id: row.id,
      })
      portal.Backupfunction(data).then((res) => {
        if (res.state == true) {
          this.$message({
            message: res.message,
            type: 'success',
          })
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
      this.loadData()
      this.addform = {
        backupCommond: '',
        backupType: '1',
        cron: '',
        dbDriver: '',
        dbName: '',
        dbPort: '',
        dbPwd: '',
        dbType: 'mysql',
        dbUrl: 'jdbc:mysql://主机:3306/数据库名?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&zeroDateTimeBehavior=convertToNull',
        dbUser: '',
        id: '',
        reductionCommond: '',
        systemIp: '',
        systemPwd: '',
        systemType: 'linux',
        systemUser: '',
      }
    },
    beforeCloseDialog() {
      this.dialogVisible = false
      this.addform = {
        backupCommond: '',
        backupType: '1',
        cron: '',
        dbDriver: '',
        dbName: '',
        dbPort: '',
        dbPwd: '',
        dbType: 'mysql',
        dbUrl: 'jdbc:mysql://主机:3306/数据库名?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&zeroDateTimeBehavior=convertToNull',
        dbUser: '',
        id: '',
        reductionCommond: '',
        systemIp: '',
        systemPwd: '',
        systemType: 'linux',
        systemUser: '',
      }
    },
    afterSaveData() {
      this.loadData()
      this.dialogVisible = false
      this.addform = {
        backupCommond: '',
        backupType: '1',
        cron: '',
        dbDriver: '',
        dbName: '',
        dbPort: '',
        dbPwd: '',
        dbType: 'mysql',
        dbUrl: 'jdbc:mysql://主机:3306/数据库名?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&zeroDateTimeBehavior=convertToNull',
        dbUser: '',
        id: '',
        reductionCommond: '',
        systemIp: '',
        systemPwd: '',
        systemType: 'linux',
        systemUser: '',
      }
    },
    beforeSaveData() {
      this.isSubmit = true
      if (this.rows == 1) {
        this.saveUrl = window.context.portal + `/uc/backupDatasource/v1/`
      } else {
        this.saveUrl =
          window.context.portal +
          `/uc/backupDatasource/v1/updateBackupDatasource`
      }
    },
    dbchange(val) {
      for(let i in this.dbTypeList){
        if(val===this.dbTypeList[i].value){
          this.addform.dbUrl=this.dbTypeList[i].url
        }
      }
      // console.log(this.addform.dburl)
    },
  },
  beforeDestroy() {
    this.$bus.off('comback')
  },
}
</script>
<style lang="scss" scoped>
/deep/.el-col-12 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.inputs{
  width: 100%;
}
/deep/.jiaxing .el-form-item__label::before{
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
.code-mirror-td /deep/ .CodeMirror {
  height: 160px;
  .CodeMirror-scroll {
    width: 940px;
    overflow: auto !important;
    margin-right: 0;
  }
}
/deep/ .cm-s-base16-light.CodeMirror{
  height: 100px;
  background: #202020;
  color: #f5f5f5;
}
/deep/.cm-s-base16-light .CodeMirror-gutters{
  background:#202020 ;
}
</style>

