<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    okText="保存数据"
    cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form" v-if = "models == 1">
        <a-form-item :labelCol="labelCol"
        :wrapperCol="wrapperCol" label="数据库IP" >
          <a-input v-decorator="['ip']" :disabled="testConnBool"></a-input>
        </a-form-item>
        <a-form-item :labelCol="labelCol"
        :wrapperCol="wrapperCol" label="端口号" >
          <a-input v-decorator="['port']" :disabled="testConnBool"></a-input>
        </a-form-item>
        <a-form-item :labelCol="labelCol"
        :wrapperCol="wrapperCol" label="用户名" >
          <a-input v-decorator="['username']" :disabled="testConnBool"></a-input>
        </a-form-item>
        <a-form-item :labelCol="labelCol"
        :wrapperCol="wrapperCol" label="密码" >
          <a-input v-decorator="['password']" :disabled="testConnBool"></a-input>
        </a-form-item>
        <a-form-item  >
          <a-button type="primary" @click="testConn" style="width:100%;">测试数据库连接</a-button>
        </a-form-item>
        <a-form-item label="选择源数据库" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select show-search :disabled="selectDataBase"placeholder="选择源数据库" option-filter-prop="children" :filter-option="filterOption" size="large" v-decorator="['database', {}]">
            <a-select-option v-for="d in databaseSource" :key="d">
              {{ d }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="数据类型">
          <a-select  placeholder="选择数据类型" :disabled="selectDataBase" option-filter-prop="children" size="large" v-decorator="['dataType', {}]">
            <a-select-option v-for="d in dataTypedataSources" :key="d.id">
              {{ d.cnName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="选择型号">
          <a-select  placeholder="选择型号" :disabled="selectDataBase" @change="QueryByModelId" option-filter-prop="children" size="large" v-decorator="['shipModel', {}]">
            <a-select-option v-for="d in shipModelSources" :key="d.id">
              {{ d.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="选择舷号">
          <a-select  placeholder="选择舷号" :disabled="selectDataBase" option-filter-prop="children" size="large" v-decorator="['shipNum', {}]">
            <a-select-option v-for="d in shipNumSources" :key="d.id">
              {{ d.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item  >
          <a-button :disabled="selectDataBase" type="primary" style="width:100%;" @click="createSchema">验证目标模式</a-button>
        </a-form-item>
        <a-form-item  >
          <a-button :disabled="createSchemaboll" type="primary" style="width:100%;" @click="getTableInfo">开始同步</a-button>
        </a-form-item>
      </a-form>
      <a-table v-if="models == 2"
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading">
<!--        :locale="myLocale"-->

        <!-- 字符串超长截取省略号显示-->
      </a-table>
      <a-button v-if="models == 2" type="primary" style="width:100%;" @click="syncOriginalData">同步</a-button>
    </a-spin>
  </a-modal>
</template>

<script>
import moment from "moment"
import { shipNumPageList,shipModelPageList,shipNumQueryByModelId } from '@/api/ship'
import JCron from "@/components/jeecg/JCron";
import JSelectMultiple from '@/components/jeecg/JSelectMultiple'
import pick from 'lodash.pick'
import { 
    dataTypePageList,
    dataTypeDeleteById } from '@/api/dataType'
import {  datasyncqueryPage,
    datasyncqueryById,
    datasyncsyncOriginalData,
    datasynccreateSyncRecord,
    datasynccreateSchema,
    datasyncgetDatabases,
    datasyncgetTableInfo,
    datasynctestConn } from '@/api/dblink'

  export default {
    name: "uploadModal",
    components: {
      JCron,
      JSelectMultiple
    },
    data () {
      return {
        title:"操作",
        buttonStyle: 'solid',
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        strategys:[],
        dataLinkType:'',
        models:1,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'id',
            width:60,
            align:"id",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title: '表名',
            align:"tableName",
            dataIndex: 'tableName',
          },
          {
            title: '数据条数',
            align:"rowCount",
            dataIndex: 'rowCount'
          },
        ],
        queryParam: {
          pageNum :1,
          pageSize:20
        },
        dataTypedataSources: [],
        shipModelSources:[],
        shipNumSources:[],
        dataSource:[],
        selectDataBase:true,
        createSchemaboll:true,
        testConnBool:false,
        databaseSource:[],
        datamodel:{
          ip:"",
          port:"",
          username:"",
          password:"",
          database:"",
          dataType:"",
          shipModel:"",
          shipNum:""
        },
        recordId:""
      }
    },
    created () {
      
    },
    methods: {
      add () {
        this.edit({});
      },
      edit (record) {
        this.visible =true;
        let that = this;
        that.form.resetFields();
        console.log(record);
        this.model = Object.assign({},record);
        this.getselect();
        datasyncqueryById({id:this.model.id}).then((res) => {
            if (res.success) {
              let model = {};
              model.ip = res.result.sourceIp;
              model.port = res.result.sourcePort;
              model.username = res.result.username;
              model.password = res.result.password;
              model.database = res.result.sourceDatabase;
              model.dataType = res.result.dataTypeId;
              model.shipModel = res.result.shipModelId;
              model.shipNum = res.result.shipNumId;
              this.form.setFieldsValue(pick(model,'ip','port','username','password','database','dataType','shipModel','shipNum'));
            } else {
              this.$message.warning(res.message);
            }
        });
      },
      syncOriginalData(){
        datasyncsyncOriginalData({recordId:this.recordId}).then((res) => {
            if (res.success) {
              this.$message.success(res.message);
            } else {
              this.$message.warning(res.message);
            }
        });
      },
      getTableInfo(){
        this.form.validateFields((err, values) => {
          console.log('values',values)
          this.datamodel = values;
          var that = this;
          if (!err) {
            that.confirmLoading = true;
            datasyncgetTableInfo({ip:values.ip,port:values.port,username:values.username,password:values.password,database:values.database}).then((res) => {
                if (res.result) {
                  this.confirmLoading = false;
                  this.dataSource = res.result;
                  this.models = 2;
                } else {
                    this.$message.warning(res.message);
                }
            });
            datasynccreateSyncRecord({sourceIp:values.ip,
              sourcePort:values.port,
              username:values.username,
              password:values.password,
              sourceDatabase:values.database,
              dataTypeId:values.dataType,
              shipModelId:values.shipModel,
              shipNumId:values.shipNum}).then((res) => {
                if (res.success) {
                  this.recordId = res.result
                  this.$message.success(res.message);
                } else {
                    this.$message.warning(res.message);
                }
            });
          }
        })
      },
      QueryByModelId(val){
        shipNumQueryByModelId({modelId:val}).then((res) => {
            if (res.success) {
                this.shipNumSources = res.result.rows||res.result;
            } else {
                this.$message.warning(res.message);
            }
        });
      },
      createSchema(){
        this.form.validateFields((err, values) => {
          console.log('values',values)
          this.datamodel = values;
          var that = this;
          if (!err) {
            that.confirmLoading = true;
            datasynccreateSchema({shipModelId:this.datamodel.shipModel,shipNumId:this.datamodel.shipNum,dataTypeId:this.datamodel.dataType}).then((res) => {
                if (res.success) {
                  this.createSchemaboll =false;
                  this.confirmLoading = false;
                } else {
                  this.$message.warning(res.message);
                }
            });
          }
        })
        
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      testConn(){
        this.form.validateFields((err, values) => {
          console.log('values',values)
          this.datamodel = values;
          var that = this;
          if (!err) {
            that.confirmLoading = true;
            datasynctestConn({ip:values.ip,port:values.port,username:values.username,password:values.password}).then((res) => {
                if (res.result) {
                  this.confirmLoading = false;
                  this.getdatabaseList();
                } else {
                    this.$message.warning(res.message);
                }
            });
            
          }
        })
      },
      getdatabaseList(){
        datasyncgetDatabases({ip:this.datamodel.ip,port:this.datamodel.port,username:this.datamodel.username,password:this.datamodel.password}).then((res) => {
            if (res.success) {
              this.selectDataBase = false;
              this.databaseSource = res.result;
              this.getselect();
            } else {
              this.$message.warning(res.message);
            }
        });
      },
      getselect(){
        dataTypePageList(this.queryParam).then((res) => {
            if (res.success) {
                this.dataTypedataSources = res.result.rows||res.result;
            } else {
                this.$message.warning(res.message);
            }
        });
        shipModelPageList(this.queryParam).then((res) => {
            if (res.success) {
                this.shipModelSources = res.result.rows||res.result;
            } else {
                this.$message.warning(res.message);
            }
        });
        shipNumPageList(this.queryParam).then((res) => {
            if (res.success) {
                this.shipNumSources = res.result.rows||res.result;
            } else {
                this.$message.warning(res.message);
            }
        });
      },

      onOk(value) {
       
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        this.close();
      },
      handleCancel () {
        this.close()
      },
    }
  }
</script>

<style scoped>
.disabled{
  pointer-events: none;
}
</style>