<template>
  <div class="container-box">
    <div class="tab-box">
      <div v-for="(item, index) in dict.type.protocol_type" :key="index" @click="changeIndex(item.value)" :class="code == item.value ? 'tab-item isActive' : 'tab-item'">
        {{ item.label }}
      </div>
    </div>
    <div class="hint-box">
      <p >图片如需在移动端横向撑满，需要给图片设置斜体（<em> I </em>）</p>
    </div>
    <div class="content" v-loading="loading">
      <!-- <Editor :height="500" :value="content" @input="getEditor"></Editor> -->
      <editor v-model="content" :min-height="500" />
    </div>
    <div class="btn-box">
      <el-button type="primary" @click="submit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { protocolInfo, protocolSave } from "@/api/operating.js";
export default {
  name: '',
  dicts: ['protocol_type'],
  data () {
    return {
      content: '',
      code: 'user_protocol',
      params: {},
      obj: {},
      loading: false
    };
  },
  created () { },
  mounted () {
    this.getAgreementDetail(this.code);
  },
  methods: {
    changeIndex (code) {
      this.code = code;
      this.getAgreementDetail(this.code);
    },
    //查询详情
    getAgreementDetail () {
      this.loading = true;
      protocolInfo(this.code).then((res) => {
        if (res && res.code === 200) {
          this.obj = res.data;
          this.content = res.data.protocolContent;
        }
      }).catch(() => {
        this.obj = {}
        this.content = ""
      }).finally(() => {
        this.loading = false;
      });
    },
    submit () {
      if (!this.content) {
        this.$message.warning('请填写内容');
        return;
      }
      this.params.id = this.obj.id || null;
      this.params.protocolCode = this.code;
      this.params.protocolContent = this.content;
      protocolSave(this.params).then((res) => {
        if (res && res.code === 200) {
          this.$message.success('提交成功');
        }
      })
    },
    // 富文本的回调
    getEditor (e) {
      this.content = e;
    }
  }
};
</script>

<style lang="scss" scoped>
.container-box {
  display: flex;
  flex-direction: column;
  padding: 20px;
  .tab-box {
    display: flex;
    align-items: center;
    .tab-item {
      width: 150px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border: 1px solid #ccc;
      cursor: pointer;
      &.isActive {
        background-color: #398ddf;
        color: #fff;
      }
    }
  }
  .content {
    // margin-top: 30px;
  }
  .btn-box {
    margin-top: 20px;
  }

  .hint-box{
    padding: 20px 0;
    p{
      margin: 10px 0 0 0 ;
      color: #f1a156;
    }
  }
}
</style>
