<template>
  <app-dialog
    v-model="visible"
    class="detail-dialog"
    :title="title"
    width="700px"
    append-to-body
    :loading="loading"
    @cancel="onCancel"
    @confirm="onConfirm"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row :gutter="15">
        <app-filter-item label="资源名称" prop="name" :span="12">
          <el-input v-model="form.name" clearable placeholder="请输入" />
        </app-filter-item>

        <app-filter-item label="资源类型" prop="is_active" :span="12">
          <el-input v-model="form.is_active" clearable placeholder="请输入" />
        </app-filter-item>
      </el-row>

      <el-row :gutter="15">
        <app-filter-item label="来源格式" prop="type" :span="12">
          <el-input v-model="form.type" clearable placeholder="请输入" />
        </app-filter-item>

        <app-filter-item label="是否发布" prop="is_publish" :span="12">
          <el-input v-model="form.is_publish" clearable placeholder="请输入" />
        </app-filter-item>
      </el-row>

      <el-row :gutter="15">
        <app-filter-item label="" prop="sourceType" :span="24">
          <el-radio-group v-model="form.sourceType">
            <el-radio label="1">开通库表</el-radio>
            <el-radio label="2">API接口</el-radio>
            <el-radio label="3">离线文件</el-radio>
          </el-radio-group>
        </app-filter-item>
      </el-row>

      <el-row :gutter="15" v-show="form.sourceType == '1'">
        <app-filter-item label=" 数据库地址" prop="databasePath" :span="24">
          <el-input v-model="form.databasePath" disabled />
        </app-filter-item>
        <app-filter-item label=" 数据库类型" :span="12">
          <el-input v-model="form.databaseType" disabled />
        </app-filter-item>

        <app-filter-item
          label="实例"
          prop="sl"
          :span="12"
          :rules="[{required: form.sourceType == '1', message: '实例不能为空'}]"
        >
          <el-input v-model="form.sl" clearable placeholder="请输入" />
        </app-filter-item>

        <app-filter-item
          label="用户名"
          prop="userName"
          :span="12"
          :rules="[
            {required: form.sourceType == '1', message: '用户名不能为空'},
          ]"
        >
          <el-input v-model="form.userName" clearable placeholder="请输入" />
        </app-filter-item>

        <app-filter-item
          label="密码"
          prop="pwd"
          :span="12"
          :rules="[{required: form.sourceType == '1', message: '密码不能为空'}]"
        >
          <el-input v-model="form.pwd" clearable placeholder="请输入" />
        </app-filter-item>
      </el-row>
    </el-form>
  </app-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialog.js'
export default {
  name: 'CompanyDialog',
  mixins: [dialogMixin],
  props: {
    selectedRows: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      form: {
        sourceType: '1',
      },
      rules: {
        name: [{required: true, message: '资源名称不能为空'}],
        is_active: [{required: true, message: '资源类型不能为空'}],
        type: [{required: true, message: '来源格式不能为空'}],
        is_publish: [{required: true, message: '是否发布不能为空'}],
      },
      loading: false,
    }
  },
  mounted() {},
  methods: {
    /**
     * @description: dialog每次显示时触发的init方法
     * @param {*} data 传入data
     * @return {*}
     */
    initData(data) {
      const orgForm = this.$options.data().form
      this.form = {...orgForm, ...data}
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    onCancel() {
      this.visible = false
    },
    onConfirm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          // const params = this.handleParams()
          // try {
          //   this.loading = true
          //   if (this.data?.id) {
          //     await updateData(params)
          //   } else {
          //     await dataAdd(params)
          //   }
          //   this.$message.success('操作成功')
          //   this.onCancel()
          this.$emit('confirm', {...this.form})
          // } finally {
          //   this.loading = false
          // }
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>
