<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      :data="data"
      :pageResult="pageResult"
      :selection="true"
      :selectable='false'
      :show-export="false"
      :show-custom-column="false"
      quick-search-props="name"
    >
      <template v-slot:toolbar>
        <el-button
          size="small"
          @click="handelAdd"
          type="primary"
          icon='el-icon-plus'
        >添加</el-button>
      </template>

      <ht-table-column
        type="index"
        width="50"
        align="center"
        label="序号"
      />
      <ht-table-column
        prop="name"
        label="名称"
        width="150"
        :show-overflow-tooltip="true"
      />
      <ht-table-column
        prop="driverClass"
        label="驱动类"
        width="130"
        :show-overflow-tooltip="true"
      />
      <ht-table-column
        prop="username"
        label="用户名"
        width="120"
        :show-overflow-tooltip="true"
      />
      <ht-table-column
        prop="url"
        label="连接地址"
        :show-overflow-tooltip="true"
      />
      <ht-table-column
        label="操作"
        fixed="right"
        width="150"
      >
        <template v-slot="{row}">
          <el-button
            type="text"
            @click="handelEdit(row)"
          >
            <i class="el-icon-edit">编辑</i>
          </el-button>
          <el-button
            type="text"
            @click="handelDelete(row.id)"
          >
            <i class="el-icon-delete">删除</i>
          </el-button>
        </template>
      </ht-table-column>
    </ht-table>
    <!-- 修改弹框 -->
    <el-dialog
      :title="type === 'edit' ? '编辑' : '添加'"
      :visible.sync="dialogVisibleAdd"
      v-if='dialogVisibleAdd'
      width="40%"
      :before-close="handleClose"
    >
      <el-form
        ref='form'
        :model="form"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item
          label="名称"
          prop="name"
        >
          <el-input v-model="form.name" placeholder="请输入名称"/>
        </el-form-item>
        <el-form-item
          label="驱动类"
          prop="driverClass"
        >
          <el-select
            v-model="form.driverClass"
            placeholder="请选择驱动类"
            style="width:100%"
          >
            <el-option
              label="com.mysql.cj.jdbc.Driver"
              value="com.mysql.cj.jdbc.Driver"
            ></el-option>
            <el-option
              label="org.postgresql.Driver"
              value="org.postgresql.Driver"
            ></el-option>
            <el-option
              label="oracle.jdbc.OracleDriver"
              value="oracle.jdbc.OracleDriver"
            ></el-option>
            <el-option
              label="com.microsoft.sqlserver.jdbc.SQLServerDriver"
              value="com.microsoft.sqlserver.jdbc.SQLServerDriver"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="用户名"
          prop="username"
        >
          <el-input v-model="form.username" placeholder="请输入用户名"/>
        </el-form-item>
         <el-form-item
          label="密码"
          prop="password"
        >
          <el-input v-model="form. password" placeholder="请输入密码"/>
        </el-form-item>
        <el-form-item
          label="连接地址"
          prop="url"
        >
          <el-input
            type="textarea"
            rows="5"
            v-model="form.url"
            placeholder="请输入连接地址"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" placeholder="做点什么..."/>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handleCancel">取 消</el-button>
        <el-button
          type="primary"
          @click="save"
        >{{type === 'edit' ? '修改' : '保存'}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import report from '@/api/report.js'
import req from '@/request.js'
export default {
  name: 'table-code',
  data() {
    return {
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      dialogVisibleAdd: false,
      form: {
        driverClass: '',
        id: '',
        isDele: '',
        name: '',
        password: '',
        pkVal: '',
        remark: '',
        status: 0,
        url: '',
        username: ''
      },
      type: '',
      rules: {
        name: [{required: true, message: '请输入名称', trigger: 'blur'}],
        driverClass: [
          {required: true, message: '请选着驱动类', trigger: 'blur'}
        ],
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        url: [{required: true, message: '请输入连接地址', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}]
      }
    }
  },
  mounted() {},
  methods: {
    loadData(param, cb) {
      report
        .getBigscreenDataScouce(param)
        .then(response => {
          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
          this.data = response.rows
          // console.log(response.rows)
        })
        .finally(() => {
          if (cb) {
            cb()
          }
        })
    },
    handleClose(done) {
      this.form = {
        driverClass: '',
        id: '',
        isDele: '',
        name: '',
        password: '',
        pkVal: '',
        remark: '',
        status: 0,
        url: '',
        username: ''
      }
      done()
    },
    handleCancel() {
      this.form = {
        driverClass: '',
        id: '',
        isDele: '',
        name: '',
        password: '',
        pkVal: '',
        remark: '',
        status: 0,
        url: '',
        username: ''
      }
      this.dialogVisibleAdd = false
    },
    //编辑修改
    handelEdit(data) {
      this.type = 'edit'
      this.dialogVisibleAdd = true
      this.form = data
    },
    //删除
    handelDelete(id) {
      report.dataScouceDelete(id).then(res => {
        this.loadData()
      })
    },
    //添加
    handelAdd() {
      this.type = 'add'
      this.dialogVisibleAdd = true
    },
    //保存添加修改
    save() {
      this.$refs.form.validate(bool => {
        if (bool) {
          this.dialogVisibleAdd = false
          report.dataSourceEditSave(this.form).then(res => {
            this.loadData()
            this.form = {
              driverClass: '',
              id: '',
              isDele: '',
              name: '',
              password: '',
              pkVal: '',
              remark: '',
              status: 0,
              url: '',
              username: ''
            }
            //this.dialogVisibleAdd = false
          })
        }
      })
    }
  }
}
</script>