<template>
  <div>
    <!-- <div class="pa-2 d-flex">
      <v-textarea rows="2" outlined dense placeholder="快捷解析"></v-textarea>
      <v-btn class="ml-3">解析</v-btn>
    </div> -->
    <MForm ref="formData" :items="formData" v-model="formValues">
      <div class="pa-2 d-flex align-center justify-center">
        <v-btn
          v-for="(item, index) in buttons"
          :key="index"
          :loading="item.loading"
          @click="item.handler(item)" rounded :color="item.color" class="buttons mr-3">
          {{ item.text }}
        </v-btn>
      </div>
    </MForm>
    <m-dialog title="快捷解析" :visible.sync="show" @submit="onSubmit">
      <v-textarea rows="3" outlined dense placeholder="快捷解析" v-model="text"></v-textarea>

      <Linear :visible.sync="loading"></Linear>
    </m-dialog>
  </div>
</template>

<script>
import MForm from '@/components/MForm'
import MDialog from '@/components/Dialog'
import Linear from '@/components/Progress/linear.vue'
import {
  datasourceConnectTest,
  datasourceValid,
  datasourceParse
} from '@/api/dataOrigin'
export default {
  name: 'source-edit',
  components: { MForm, MDialog, Linear },
  props: {
    // typeItems: {
    //   type: Array,
    //   default: () => []
    // },
    itemData: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      buttons: [
        {
          loading: false,
          text: '验证',
          color: 'primary',
          handler: this.handleValid
        },
        {
          loading: false,
          text: '连接测试',
          color: 'warning',
          handler: this.handleTest
        },
        {
          loading: false,
          text: '快捷解析',
          color: 'info',
          handler: this.handleParse
        }
      ],
      loading: false,
      text: null,
      show: false,
      formValues: {
        name_zh: null,
        name_en: null,
        type: null,
        host: null,
        port: null,
        database: null,
        username: null,
        password: null,
        param: null,
        status: true,
        desc: null
      }
    }
  },
  computed: {
    formData () {
      return [
        {
          type: 'text',
          key: 'name_zh',
          label: '请输入数据源中文名称 *',
          outlined: true,
          dense: true,
          rules: [v => !!v || '请输入数据源中文名称']
        },
        {
          type: 'text',
          key: 'name_en',
          label: '请输入数据源英文名称 *',
          disabled: !!this.itemData.id,
          outlined: true,
          dense: true,
          rules: [v => !!v || '请输入数据源英文名称']
        },
        {
          type: 'text',
          key: 'type',
          label: '请选择数据库类型 *',
          outlined: true,
          dense: true,
          rules: [v => !!v || '请选择数据库类型']
          // items: this.typeItems
        },
        // {
        //   type: 'autocomplete',
        //   key: 'type',
        //   label: '请选择数据库类型 *',
        //   outlined: true,
        //   dense: true,
        //   rules: [v => !!v || '请选择数据库类型'],
        //   items: this.typeItems
        // },
        {
          type: 'text',
          key: 'host',
          label: '请输入数据库服务器IP地址 *',
          col: 8,
          outlined: true,
          dense: true,
          rules: [v => !!v || '请输入数据库服务器IP地址']
        },
        {
          type: 'text',
          key: 'port',
          label: '请输入数据库服务器IP端口 *',
          col: 4,
          outlined: true,
          dense: true,
          rules: [v => !!v || '请输入数据库服务器IP端口']
        },
        {
          type: 'text',
          key: 'database',
          label: '请输入数据库名称 *',
          outlined: true,
          dense: true,
          rules: [v => !!v || '请输入数据库名称']
        },
        {
          type: 'text',
          key: 'username',
          col: '6',
          label: '请输入用户名 *',
          outlined: true,
          dense: true,
          rules: [v => !!v || '请输入用户名']
        },
        {
          type: 'password',
          key: 'password',
          col: '6',
          label: '请输入密码 *',
          outlined: true,
          dense: true,
          rules: [v => !!v || '请输入密码']
        },
        {
          type: 'text',
          key: 'param',
          label: '请输入连接参数 *',
          outlined: true,
          dense: true,
          rules: [v => !!v || '请输入连接参数']
        },
        {
          type: 'ifRadio',
          key: 'status',
          label: '状态',
          items: [
            { value: true, label: '启用' },
            { value: false, label: '关闭' }
          ]
        },
        {
          type: 'textarea',
          key: 'desc',
          outlined: true,
          label: '请输入描述'
        }
      ]
    }
  },
  created () {
    if (Object.keys(this.itemData).length) {
      Object.assign(this.formValues, this.itemData)
    }
  },
  methods: {
    validate () {
      return this.$refs.formData.validate()
    },
    getQuery () {
      return this.formValues
    },
    async handleTest (item) {
      item.loading = true
      const { status, ...obj } = this.formValues
      try {
        const { data } = await datasourceConnectTest(obj)
        if (data.connected) {
          this.$snackbar.success(data.message)
        } else {
          this.$snackbar.error(data.message)
        }
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        item.loading = false
      }
    },
    async handleValid (item) {
      const { status, ...obj } = this.formValues
      item.loading = true
      try {
        const { data } = await datasourceValid(obj)
        if (data.exists) {
          this.$snackbar.warning(data.message)
        } else {
          this.$snackbar.success('验证通过')
        }
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        item.loading = false
      }
    },
    handleParse () {
      this.show = true
    },
    async onSubmit () {
      if (!this.text) {
        this.$snackbar.warning('请输入解析字符串')
        return
      }
      try {
        this.loading = true
        const { data } = await datasourceParse({ conn_str: this.text })
        Object.assign(this.formValues, data.data_source)
        this.$snackbar.success('解析成功')
        this.show = false
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
