<template>
  <div style="padding:0 10px">
    <other-list style="padding:0 0 10px 0"></other-list>
    <div class="avue-flex"
         style="margin-bottom:10px;">
      <div class="item">
        <el-button type="primary"
                   @click="$refs.codeTip.open()"
                   icon="el-icon-notebook">说明</el-button>
      </div>
      <div class="item">
        <el-button icon="el-icon-plus"
                   type="primary"
                   @click="handleSc()">加入代码库</el-button>
      </div>
      <div class="item">
        <el-button icon="el-icon-download"
                   type="primary"
                   @click="handleImport()">从代码库导入</el-button>
      </div>
    </div>
    <monaco-editor v-model="item.fun"
                   height="150"
                   language="javascript"></monaco-editor>
    <code-tip ref="codeTip"
              :type="type"></code-tip>
    <el-dialog title="代码库"
               append-to-body
               class="avue-dialog"
               v-model="api.box"
               width="70%">
      <fun-list v-if="api.box"
                @change="handleApiChange"
                :menu="false"></fun-list>
    </el-dialog>
  </div>
</template>

<script>
import otherList from '@/page/group/other-list.vue'
import MonacoEditor from '@/page/components/monaco-editor'
import codeTip from '@/page/group/code-tip.vue'
import funList from '@/page/list/fun.vue'
import { addObj, getObj } from '@/api/fun'
import { dicOption } from '@/option/config'
export default {
  inject: ["contain"],
  components: { MonacoEditor, codeTip, otherList, funList },
  props: {
    item: Object
  },
  data () {
    return {
      api: {
        box: false,
        item: {}
      },
    }
  },
  methods: {
    handleApiChange (val) {
      this.api.item = val
      getObj(this.api.item.id).then(res => {
        const data = res.data.data;
        this.text[this.type] = data.content
        this.api.box = false;
        this.api.item = {}
        this.$message.success('导入成功')
      })
    },
    handleImport () {
      this.api.box = true
    },
    handleSc () {
      this.$DialogForm({
        title: '收藏代码',
        width: '400px',
        menuPosition: 'right',
        option: {
          labelWidth: 80,
          submitText: '确认',
          span: 24,
          column: [{
            label: "名称",
            prop: "name",
            rules: [{
              required: true,
              message: "请输入名称",
              trigger: "blur"
            }],
          }, {
            label: "类别",
            prop: "type",
            type: 'select',
            dicData: dicOption.funType,
            rules: [{
              required: true,
              message: "请选择类别",
              trigger: "blur"
            }],
          }]
        },
        callback: (res) => {
          const form = res.data || {}
          addObj({
            type: form.type,
            name: form.name,
            content: typeof (this.text[this.type]) == 'object' ? JSON.stringify(this.text[this.type]) : this.text[this.type]
          }).then(() => {
            res.close()
            this.$message.success('收藏成功')
          })

        }
      })

    },
  }
}
</script>
<style lang="scss" scoped>
.event {
  &__menu {
    margin-bottom: 10px;
    padding-right: 10px;
  }
  &__label {
    width: 100%;
    padding: 5px 10px 10px 10px;
    box-sizing: border-box;
    font-size: 13px;
    color: var(--text-color);
  }
  &__content {
    position: relative;
    padding: 0 10px;
    box-sizing: border-box;
  }
}
</style>