<template>
  <section class="datasourcePicker">
    <config-item label="数据类型">
      <ai-select v-model="options.dataType" placeholder="请选择数据类型" :select-list="dataTypes"/>
    </config-item>
    <div class="codeEditor" v-if="['htmlData','staticData'].includes(options.dataType)">
      <ai-dialog-btn :modal="false" dialog-title="编辑器" :customFooter="false"
                     @confirm="changeData" @open="content=contentstr">
        <code-editor slot="btn" readonly :value="contentstr" :lang="dataLang" theme="github" width="100%" height="250"/>
        <code-editor v-model="content" :lang="dataLang" theme="github" width="100%" height="440" wrap/>
      </ai-dialog-btn>
    </div>
    <config-item v-else-if="options.dataType === 'dynamicData'" label="数据源">
      <ai-select v-model="options.sourceDataId" placeholder="请选择数据源" :instance="instance"
                 :prop="{label:'description'}" @change="changeData"
                 action="/app/appdiylargescreen/allDatasourceByPage"/>
    </config-item>
    <config-item label="接口地址" v-else-if="options.dataType === 'apiData'">
      <el-input size="small" v-model="options.api" @change="changeData" placeholder="请输入数据接口URL"/>
    </config-item>
  </section>
</template>
<script>
import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
import ConfigItem from "./configItem.vue";
import {DvCompData} from "../config";
import CodeEditor from 'bin-ace-editor'
import 'brace/mode/json'
import 'brace/snippets/json';
import 'brace/theme/github';
import 'brace/theme/monokai';

export default {
  name: "datasourcePicker",
  components: {ConfigItem, AiDialogBtn, CodeEditor},
  model: {
    event: "input",
    prop: "options"
  },
  props: {
    options: Object,
    instance: Function
  },
  data() {
    return {
      dataTypes: Object.entries(DvCompData.types).map(e => ({id: e[0], label: e[1]})),
      content: "",
      sourceData: []
    }
  },
  computed: {
    contentstr: v => JSON.stringify(v.options.staticData),
    dataLang: v => v.options.dataType == 'htmlData' ? 'html' : 'json'
  },
  methods: {
    updateOptions() {
      this.$emit("input", this.options)
    },
    changeData() {
      new DvCompData(this.options.dataType, this.options, this.instance).getData().then(data => {
        this.options[this.options.dataType] = data
        this.updateOptions()
      })
    }
  },
}
</script>
<style scoped lang="scss">
.datasourcePicker {
  .codeEditor {
    position: relative;
    padding-left: 10px;
  }
}
</style>
