<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"
        :rules="rules"
        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-button size="small" class="user-choose-submit right" type="primary" @click="submitForm('ruleForm')">{{btnText}}</el-button>
        </el-form-item>          
        <el-form-item label="协议标题" prop="protocolName">
          <el-input size="small" v-model="ruleForm.protocolName" maxlength="50" 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="协议内容" class="editor-required">
          <textarea v-model="ruleForm.content" id="editor">
              
          </textarea>
          <p v-show="needShowValidTips" class="valid-content">请输入协议内容</p>
        </el-form-item>
      </el-form>
      <!-- <el-dialog title="推送预览" :visible.sync="dialogFormVisible">
        <div>
          <span>主题： {{ ruleForm.title }} </span>
           <p style="display: inline-block; float: right;">
            <span style="margin-left: 0px">目标对象：</span>
            <span v-if="ruleForm.isAll == 2" style="color: #449284"> {{ objNum }} </span>
            <span v-if="ruleForm.isAll == 3" style="color: #449284"> {{ userChooseCount }} </span>
            <span v-else>全部</span>
          </p>
        </div>
        
        <hr>
        <el-form :model="ruleForm" class="rule-form">
          <el-form-item label="APP推送：" >
            云鹊医
          </el-form-item>
          <el-form-item label="推送标题：" >
            {{ ruleForm.title }}
          </el-form-item>
          <el-form-item label="推送介绍：" >
            <p style="white-space: pre-line">{{ ruleForm.content }}</p>
          </el-form-item>
          <el-form-item label="页面去向：" >
            {{ ruleForm.url }}
          </el-form-item>
          <el-form-item label="系统通知：" >
            {{ ruleForm.noticeFlag | getNotice }}
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="pushSend()">确 定</el-button>
        </div>
      </el-dialog> -->

    </div>
  </div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import { openLoading, closeLoading } from "../../utils/utils";
let editor = null;
let vm = null;
export default {
  components: {
    BreadCrumb
  },
  data() {
    return {
      curmbFirst: "新建协议",
      btnText: "创建完成",
      ruleForm: {
        protocolName: "",
        content: "",
      },
      rules: {
        protocolName: [
          { required: true, message: "请输入协议标题", trigger: "blur" },
          { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
        ],
        // content: [
        //   { required: true, message: "请输入推送介绍", trigger: "blur" },
        //   { min: 0, max: 250, message: "长度在 0 到 250 个字符", trigger: "blur" }
        // ]
      },
      needShowValidTips: false,
      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;
    this.btnText = this.isUpdate ? '更新版本' : '创建完成';
    this.curmbFirst = this.isUpdate ? '更新协议' : '新建协议';
    // vm.idType = localStorage.getItem("storageIdType");
    // console.log("idType:", vm.idType);
  },
  // 挂载到Dom完成时
  mounted: function() {
    // commonUtil.resizeHeight();
    CKEDITOR.replace( 'editor' );
    if(this.isUpdate) { // 只在修改时监听富文本的Ready事件
      CKEDITOR.on('instanceReady', function (event) {
          editor = event.editor;
          // editor.execCommand("toolbarCollapse");
          // editor.setReadOnly(true); //只读
          // 获取数据
          vm.getProtocolDetailById(vm.protocolId);
      });
    }
  },
  methods: {
    // 返回到列表页面
    goBack() {
      this.$router.push({
        path: '/protocol-list'
      })
    },
    submitForm(formName) {
      // if(this.ruleForm.isAll == 3 && this.userChooseCount == 0){
      //   vm.$message('请先选择用户');
      //   return;
      // }
      editor = editor || CKEDITOR.instances.editor;
      this.$refs[formName].validate((valid) => {
        // let val = CKEDITOR.instances.editor.getData();
        let val = editor.getData();
        if(!val) {
          valid = false
          this.needShowValidTips = true;
          setTimeout(() => {
            this.needShowValidTips = false;
          }, 10000);
          // return;
        } else {
          this.needShowValidTips = false;
        }

        if (valid) {
          this.ruleForm.content = val;
          if(this.isUpdate) { // 修改协议时传协议ID（protocolId）
            this.ruleForm.protocolId = this.protocolId
          }
          this.addOrUpdateProtocol(this.ruleForm)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    // 新增或修改协议
    addOrUpdateProtocol(params) {
      openLoading(this);
      vm.PUT("/smartcontract/protocolManage/protocol", params).then(res => {
        closeLoading(this);
        if(res && res.code && res.code == '000000'){
          // if( res && res.data ){
          //   // this.tableData = res.data;
          // }
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.$router.push({
            path: '/protocol-list'
          })
        }else{
          this.$message({
            message: '接口请求失败',
            type: 'warning'
          });
        }
      });
    },

    // 根据协议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;
            editor.setData(res.data.contents);
          }
        }else{
          vm.$message({
            message: '接口请求失败',
            type: 'warning'
          });
        }
      });      
    }
  },
};
</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;
}
.editor-required {
  label::before {
    content: '*';
    color: #F56C6C;
    margin-right: 4px;
  }
}
</style>