<template>
  <div class="detailPage">
    <h1 class="title">
      {{pageName}}
    </h1>
    <form class="detailForm">
      <div role="row"
           class="row-item">
        <div class="row-title">
          DataId:
        </div>
        <el-input v-model="DataId"
                  class="row-input"
                  size="small "
                  placeholder="请输入DataId"></el-input>
      </div>
      <div role="row"
           class="row-item">
        <div class="row-title">
          Group:
        </div>
        <el-input v-model="Group"
                  class="row-input"
                  size="small "
                  placeholder="请输入Group"></el-input>
      </div>
      <div class="showMore"
           @click="showMore">{{more ? '收起' : '更多高级设置'}}</div>
      <div class="moreOption"
           v-if="more">
        <div role="row"
             class="row-item">
          <div class="row-title">
            标签:
          </div>
          <el-input v-model="tag"
                    class="row-input"
                    size="small "
                    placeholder="请输入标签"></el-input>
        </div>
        <div role="row"
             class="row-item">
          <div class="row-title">
            归属应用:
          </div>
          <el-input v-model="applied"
                    class="row-input"
                    size="small "
                    placeholder="请输入归属应用"></el-input>
        </div>
      </div>
      <div class="row-item1">
        <div class="row-title">
          描述:
        </div>
        <el-input type="textarea"
                  class="row-input"
                  rows="4"
                  placeholder="请输入内容"
                  resize="none"
                  v-model="describe">
        </el-input>
      </div>
    </form>
    <el-tabs type="border-card">
      <el-tab-pane :lazy="true">
        <span slot="label"><i class="el-icon-document"></i> Text</span>
        <MyEditor :language="'text'"
                  :codes="TextCodes"
                  @onMounted="textOnMounted"
                  @onCodeChange="textOnCodeChange" />
      </el-tab-pane>
      <el-tab-pane :lazy="true">
        <span slot="label"><i class="el-icon-document"></i> Json</span>
        <MyEditor :language="'json'"
                  :codes="JsonCodes"
                  @onMounted="jsonOnMounted"
                  @onCodeChange="jsonOnCodeChange" />
      </el-tab-pane>
      <el-tab-pane label="XML"
                   :lazy="true">
        <MyEditor :language="'xml'"
                  :codes="XmlCodes"
                  @onMounted="xmlOnMounted"
                  @onCodeChange="xmlOnCodeChange" />
      </el-tab-pane>
      <el-tab-pane label="Yaml"
                   :lazy="true">
        <MyEditor :language="'yaml'"
                  :codes="yamlCodes"
                  @onMounted="yamlOnMounted"
                  @onCodeChange="yamlOnCodeChange" />
      </el-tab-pane>
      <el-tab-pane :lazy="true">
        <span slot="label"><i class="el-icon-document"></i> HTML</span>
        <MyEditor :language="'html'"
                  :codes="htmlCodes"
                  @onMounted="htmlOnMounted"
                  @onCodeChange="htmlOnCodeChange" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import MyEditor from '@/components/monacoEditor'
export default {
  name: 'Detail',
  components: {
    MyEditor
  },
  data () {
    return {
      more: false,
      pageName: '编辑配置',
      DataId: '',
      Group: '',
      tag: '',
      applied: '',
      describe: '',
      // 编辑器
      TextCodes: 'Text',
      JsonCodes: 'Json',
      XmlCodes: 'Xml',
      yamlCodes: 'Yaml',
      htmlCodes: 'Html',
      textEditor: null,
      jsonEditor: null,
      xmlEditor: null,
      yamlEditor: null,
      htmlEditor: null
    }
  },
  methods: {
    showMore: function () {
      if (this.more) {
        this.more = false;
      } else {
        this.more = true;
      }
    },
    // 编辑器
    textOnMounted (edit) {
      this.jsonEditor = edit;
    },
    jsonOnMounted (edit) {
      this.jsonEditor = edit;
    },
    xmlOnMounted (edit) {
      this.xmlEditor = edit;
    },
    yamlOnMounted (edit) {
      this.yamlEditor = edit;
    },
    htmlOnMounted (edit) {
      this.htmlEditor = edit;
    },
    textOnCodeChange (value, event) { },
    jsonOnCodeChange (value, event) { },
    xmlOnCodeChange (value, event) { },
    yamlOnCodeChange (value, event) { },
    htmlOnCodeChange (value, event) { }
  }
}
</script>
<style scoped>
.detailPage {
  width: 100%;
  position: relative;
}
.title {
  width: 100%;
  height: 50px;
  font-size: 30px;
  font-weight: bold;
  padding-left: 20px;
  margin: 20px 0 10px 0;
}
.detailForm {
  box-sizing: border-box;
}
.row-item {
  width: 100%;
  height: 30px;
  margin-bottom: 10px;
}
.row-item1 {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
}
.row-item .row-title {
  font-size: 14px;
  font-weight: bold;
  color: #233;
  width: 7%;
  height: 100%;
  text-align: right;
  margin-right: 1%;
  line-height: 30px;
  display: inline-block;
}
.row-item1 .row-title {
  font-size: 14px;
  font-weight: bold;
  color: #233;
  width: 7%;
  height: 100%;
  text-align: right;
  margin-right: 1%;
  line-height: 50px;
  display: inline-block;
}

.row-item .row-input,
.row-item1 .row-input {
  width: 90%;
  display: inline-block;
}
.showMore {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  padding: 0 10px;
  color: cadetblue;
  cursor: pointer;
}
</style>
