<template>
  <app-dialog v-model="visible" :loading="loading" :title="title" append-to-body class="detail-dialog" hide-footer>
    <div ref="scroll-box" class="h-100 overflow-y pr-10" style="scroll-behavior: smooth">
      <el-form ref="form" :model="form" class="w-90" label-width="100px">
        <el-timeline>
          <el-timeline-item v-if="form.is_created_table == '1'">
            <div class="text-color-primary mb-15">已创建表</div>
            <el-row :gutter="15">
              <app-filter-item :span="24" label="建表语句" prop="description">
                <!--                <el-input v-model="form.createTableSql" autosize clearable placeholder="请输入" readonly type="textarea" />-->
                <code-editor v-model="form.createTableSql" :full-screen="true" language="sql" style="min-height: 100px;" />
              </app-filter-item>
            </el-row>
          </el-timeline-item>

          <el-timeline-item v-if="form.is_created_trigger == '1'">
            <div class="text-color-primary mb-15">已创建触发器</div>
            <table v-for="(table, i) in form.trigger" :key="`table_${i}`" class="descriptions-table mb-15">
              <tr v-for="(val, k) in table" :key="`col_${i}_${k}`">
                <th class="trigger-th">{{ k }}</th>
                <td>{{ val }}</td>
              </tr>
            </table>
          </el-timeline-item>
        </el-timeline>
      </el-form>
    </div>
  </app-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialog.js';
import DICT from '@/utils/dict';
import companyApi from '@/api/business/dataCollectCompany';
import codeEditor from '@/components/codeEditor/index.vue';

export default {
  name: 'ManualDialog',
  components: { codeEditor },
  mixins: [dialogMixin],
  props: {
    clusterId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      DICT,
      form: {
        sn: 1,
        level: '1',
        source: '1',
        tableType: '1',
        sourceType: '1',
        updateRate: '1',
      },
      config: {},
      loading: false,
    };
  },
  methods: {
    /**
     * @description: dialog每次显示时触发的init方法
     * @param {*} data 传入data
     * @return {*}
     */
    initData(data) {
      const orgForm = this.$options.data().form;
      this.form = { ...orgForm, ...data };
      this.data?.id && this.getData();
    },
    async getData() {
      try {
        this.loading = true;
        const data = await companyApi.queryTrigger(this.data.id);
        this.form = data || {};
      } catch (error) {
        console.log(error, 333);
      } finally {
        this.loading = false;
      }
    },
    onCancel() {
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-timeline {
  padding-left: 1px;

  ::v-deep {
    .el-timeline-item__node {
      background-color: #1890ff;
    }

    .el-timeline-item__tail {
      border-left: 0.10417vw solid #d8e5ff;
    }
  }
}

.trigger-th {
  width: 180px !important;
}

::v-deep {
  .gz-dialog .el-form-item__error {
    left: 0;
  }

  .el-form-item {
    margin-bottom: 18px !important;

    .el-form-item__content .el-input {
      max-width: 218px;
    }
  }

  .el-input__suffix {
    right: 0;
  }
}
</style>
