<template>
  <a-drawer
    :width="'50%'"
    :destroy-on-close="true"
    :visible="show"
    :centered="true"
    size="small"
    @close="show = false"
    wrapClassName="view_sql_data_body"
  >
    <template slot="title">{{ $t('脚本信息') }}</template>
    <a-spin :spinning="loading">
      <div class="sql_body">
        <w-sql-editor
          v-model="sqlData"
          start-paras
          read-only
        />
      </div>
    </a-spin>
    <div class="a_foot_nuttop">
      <a-space :size=12>
        <a-button type="primary" @click="copySql">{{ $t('复制') }}</a-button>
        <a-button @click="show = false">{{ $t('关闭') }}</a-button>
      </a-space>
    </div>
  </a-drawer>
</template>
<script>
  const { wSqlEditor } = require('w-vue-middle/monacoEditor');
  const $modelService = require("w-vue-chongqing/src/api/dataModel");
  export default {
    components: {
      wSqlEditor,
    },
    props: {
      value: {
        type: Boolean,
        default: false,
      },
      id: { // 表id
        type: String,
        default: '',
      },
    },
    watch: {
      show(val) {
        this.$emit('input', val);
      },
      value(val) {
        this.show = val;
        if (val) {
          this.initSql();
        }
      },
    },
    data() {
      return {
        show: this.value,
        loading: false,
        sqlData: undefined,
      };
    },
    methods: {
      // 初始化sql
      initSql() {
        if (!this.id) {
          return
        }
        this.loading = true;
        this.sqlData = undefined;
        $modelService.getHdwSql({
          id: this.id,
        }).then(({data}) => {
          this.sqlData = data;
        }).finally(() => {
          this.loading = false;
        })
      },
      // 复制sql
      copySql() {
        if (!this.sqlData) {
          return
        }
        this.$copyClipboard(this.sqlData);
      }
    },
  };
</script>
<style lang="less" scoped>
  .view_sql_data_body {
    .sql_body {
      height: calc(100vh - 130px);
    }
  }
</style>
