<template>
  <div class="create-protocol">
    <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
    <div class="component-content screenSet" id="screenSet">
      <!-- <div class="header-title"></div> -->
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="ruleForm"
      >
        <el-form-item>
          <el-button size="small" class="user-choose-submit right" style="margin-left:20px;" type="default" @click="goBack()">返回</el-button>
        </el-form-item>          
        <el-form-item label="协议标题" >
          <el-input size="small" v-model="ruleForm.protocolName" maxlength="50" disabled style="widht:200px;" show-word-limit></el-input>
          <!-- <el-input v-model="ruleForm.protocolName" maxlength="30" show-word-limit></el-input> -->
        </el-form-item>        
        <el-form-item label="腾讯问卷id" >
          <el-input size="small" v-model="ruleForm.txWenJuanId" style="widht:200px;" disabled></el-input>
          <!-- <el-input v-model="ruleForm.protocolName" maxlength="30" show-word-limit></el-input> -->
        </el-form-item>    
        <el-form-item label="协议内容">
          <!-- <textarea v-model="ruleForm.content" id="detailEditor">
          </textarea> -->
          <div style="width:375px;" v-html="ruleForm.content">

          </div>
        </el-form-item>
        <el-form-item label="签署居民数量">
          <el-input size="small" v-model="ruleForm.signNum" maxlength="50" disabled style="widht:200px;" show-word-limit></el-input>
        </el-form-item>        
        <el-form-item label="创建人">
          <el-input size="small" v-model="ruleForm.createdName" maxlength="50" disabled style="widht:200px;" show-word-limit></el-input>
        </el-form-item>        
        <el-form-item label="创建时间">
          <el-input size="small" v-model="ruleForm.createTime" maxlength="50" disabled style="widht:200px;" show-word-limit></el-input>
        </el-form-item>        
      </el-form>
    </div>
  </div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import { openLoading, closeLoading } from "../../utils/utils";
let detailEditor = null;
let vm = null;
export default {
  components: {
    BreadCrumb
  },
  data() {
    return {
      curmbFirst: '查看协议',
      ruleForm: {
        protocolName: '',
        content: '',
        signNum: '',
        createdName: '',
        createTime: '',
      },
      isUpdate: false,
      protocolId: 0
    };
  },
  computed: {
    // ...mapGetters(['_token'])
  },
  created() {
    vm = this;
    this.isUpdate = this.$route.query && this.$route.query.isUpdate || this.isUpdate;
    this.protocolId = this.$route.query && this.$route.query.protocolId || 0;
    // vm.idType = localStorage.getItem("storageIdType");
    // console.log("idType:", vm.idType);
  },
  // 挂载到Dom完成时
  mounted: function() {
    vm.getProtocolDetailById(vm.protocolId);
    // commonUtil.resizeHeight();
    // CKEDITOR.replace( 'detailEditor' );
    // if(this.isUpdate) { // 只在修改时监听富文本的Ready事件
    //   CKEDITOR.on('instanceReady', function (event) {
    //       detailEditor = event.editor;
    //       detailEditor.execCommand("toolbarCollapse");
    //       detailEditor.setReadOnly(true); //只读
    //       // 获取数据
    //       vm.getProtocolDetailById(vm.protocolId);
    //   });
    // }
  },
  methods: {
    // 根据协议ID获取协议详情
    getProtocolDetailById(protocolId) {
      vm.GET("/smartcontract/protocolManage/protocol", {protocolId: protocolId}).then(res => {
        if(res && res.code && res.code == '000000'){
          if( res && res.data ){
            vm.ruleForm.protocolName = res.data.protocolName;
            vm.ruleForm.content = res.data.contents;
            vm.ruleForm.signNum = res.data.signNum;
            vm.ruleForm.createdName = res.data.createdName;
            vm.ruleForm.createTime = res.data.createTime;
            vm.ruleForm.txWenJuanId = res.data.txWenJuanId;
            // detailEditor.setData(res.data.contents);
          }
        }else{
          vm.$message({
            message: '接口请求失败',
            type: 'warning'
          });
        }
      });      
    },
    goBack() {
      this.$router.push({
        path: '/protocol-list'
      })
    }
  },
  beforeDestroy() {
    if (detailEditor) detailEditor.destroy();
  },
  destroy() {
     if (detailEditor) detailEditor.destroy();   
  }
};
</script>
<style lang="scss">
.topIndex{
    z-index: 10000 !important;
  }
.create-protocol {
  .component-content {
    margin-top: 80px;
    padding: 10px;
    background: #fff;
    .header-title {
      padding: 10px 12px;
      font-size: 12px;
      color: #449284;
      border-bottom: 1px solid #efefef;
    }
    .ruleForm {
        width: 70%;
        margin-left: 50px;
    }
    .rule-form {
      margin-top: 20px;
      margin-left: 30px;
      .el-form-item__content {
        font-size: 12px;
      }
    }
    .update-input {
      width: 200px;
    }
    .update-item {
      /* float: left; */
      margin-right: 5px;
    }
    .el-upload__tip {
      // margin-top: -10px;
      // margin-left: 205px;
      margin-top: -40px;
      margin-left: 290px;
      cursor: pointer;
      width: 60px;
      color: #449284;
    }
    .tip-text {
      margin-top: -40px;
      margin-left: 380px;
      width: 260px;
      color: red;
    }
    .el-upload-list {
      display: none;
    }
    .table-empty {
      img {
        width: 100px;
      }
      p {
        margin-top: -50px;
      }
    }
    .user-select{
      display: inline-block;
      height: auto;
      padding: 5px 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      .select-btn{
        display: inline-block;
        font-size: 14px;
        padding: 5px;
        border-radius: 4px;
        background: #449284 !important;
        border: 1px solid #449284 !important;
        color: #FFF;
        cursor: pointer;
      }
      .numbers{
        font-size: 14px;
        margin-left: 10px;
        display: inline-block;
        .choosed{
          color: #449284;
        }
      }
    }
    .user-choose-modal{
      .el-form-item__label{
        width: 120px;
        font-size: 14px;
      }
      .select-choose{
        width: 150px;
      }
      .block-item{
        display: block;
      }
      .user-number{
        margin: 40px auto 0;
        text-align: center;
        width: 70%;
        height:34px;
        line-height: 34px;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        .title{
          display: inline-block;
        }
        .number{
          display: inline-block;
          margin-left: 50px;
          .target-num{
            padding: 7px;
          }
          .choosed{
            color: #449284;
          }
        }
      }
      .click-refresh-tips{
        text-align: center;
        margin: 5px auto 20px;
        height: 20px;
        color: #e6a23c;
      }
      .user-choose-submit{
        margin: 0 auto;
        display: block;
      }
    }

  }
}
.valid-content {
  color:#F56C6C;
  font-size: 12px;
  line-height: 26px;
}
</style>