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

        <!--        <app-filter-item :span="12" label="文件大小(KB)" prop="fileSize">-->
        <!--          <el-input v-model="form.fileSize" clearable placeholder="请输入" type="number" />-->
        <!--        </app-filter-item>-->

        <app-filter-item :span="12" label="共享数据源" prop="databaseId">
          <el-select v-model="form.databaseId" clearable placeholder="请选择数据源" @change="setDatabase">
            <el-option v-for="items in sqloptions" :key="items.id" :label="items.name" :value="items.id">
              <span style="float: left">{{ items.name }} </span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ items.dbType }}</span>
            </el-option>
          </el-select>
        </app-filter-item>

        <!--        <app-filter-item :span="24" label="下载地址" prop="filePath">-->
        <!--          <el-input v-model="form.filePath" clearable placeholder="请输入" />-->
        <!--        </app-filter-item>-->

        <app-filter-item :span="24" label="文件描述" prop="fileContent">
          <el-input v-model="form.fileContent" :autosize="{minRows: 2, maxRows: 4}" clearable placeholder="请输入"
                    type="textarea"
          />
        </app-filter-item>

        <app-filter-item :span="24" label="SQL查询语句" prop="fileContent">
          <code-editor v-model="form.fileSql" :full-screen="true" language="sql"
                       style="min-height: 100px"
          />
        </app-filter-item>
      </el-row>
    </el-form>
  </app-dialog>
</template>

<script>
import codeEditor from '@/components/codeEditor';
import dialogMixin from '@/mixins/dialog.js';
import API from '@/api/business/shareDataCatalog';
import sourceApi from '@/api/business/changeDataSource';

export default {
  name: 'AddEditDialog',
  components: { codeEditor },
  mixins: [dialogMixin],
  data() {
    return {
      form: {
        fileType: 'xlsx',
      },
      rules: {
        fileName: [{ required: true, message: '文件名称不能为空' }],
        fileSize: [{ required: true, message: '文件大小不能为空' }],
        // filePath: [{ required: true, message: '下载地址不能为空' }],
        fileType: [{ required: true, message: '请选择文件类型' }],
        databaseId: [{ required: true, message: '请选择共享数据源', trigger: 'change' }],
      },
      loading: false,
      sqloptions: [],
    };
  },
  methods: {
    initData(data) {
      const orgForm = this.$options.data().form;
      this.form = { ...orgForm, ...data };
      if (this.$route.query) {
        this.form.tableId = this.$route.query.id;
      }
      console.log(this.form, 'tabledIdtabledIdtabledId');
      this.getDataSource();
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
    },
    onCancel() {
      this.visible = false;
    },
    // 数据源下拉事件
    setDatabase(v) {
      const item = this.sqloptions.find(item => item.id === v);
      this.form.dbAlias = item.alias;
    },
    // 数据源下拉
    async getDataSource() {
      const data = await sourceApi.getList(4);
      this.sqloptions = data || [];
    },
    onConfirm() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          try {
            this.loading = true;
            const { state } = this.data?.id ? await API.fileEditTable(this.form) : await API.fileAddTable(this.form);
            if (state) {
              this.$message.success('操作成功');
              this.onCancel();
              this.$emit('confirm');
            }
          } finally {
            this.loading = false;
          }
        }
      });
    },
  },
};
</script>

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