<template>
  <div class="notice-item-shield">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
    <div class="component-content screenSet" id="screenSet">
      <div class="header-title" style="position:relative;">
        公告
        <el-button
          type="primary"
          style="position: absolute;right: 30px;bottom: 8px;"
          size="small"
          @click="beforeConfirm()"
        >发布</el-button>
        <el-button
          type="primary"
          style="position: absolute;right: 100px;bottom: 8px;"
          size="small"
          @click="cancleEdit()"
        >取消</el-button>
      </div>
      <el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
        <el-form :model="formData" ref="formData" :rules="rules" label-width="120px" class="form-inline">
          <el-form-item label="是否开启公告：" prop="projectIntro" style="min-width: 1000px;margin-bottom: 10px">
            <el-col :span="20">
              <el-radio-group size="small" v-model="formData.openFlag">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="2">关闭</el-radio>
              </el-radio-group>
            </el-col>
          </el-form-item>

          <!-- <el-col :span="22" style="min-width: 600px;">
            <el-form-item label="是否开启公告：">
              <el-radio-group size="small" v-model="formData.openFlag" @change="changeOpenFlag">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="2">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col> -->
          <el-form-item v-show="formData.openFlag != 2" label="标题：" prop="noticeTitle">
            <el-col :span="20">
              <el-input size="small" v-model="formData.noticeTitle" placeholder="请输入公告标题" maxlength=20></el-input>
              <span class="word-num">{{(formData.noticeTitle).replace(/\s+/g,"").length}}/20</span>
            </el-col>
          </el-form-item>

          <!-- <el-col v-show="formData.openFlag != 2" :span="20">
            <el-form-item label="标题：" prop="noticeTitle">
              <el-input size="small" v-model="formData.noticeTitle" placeholder="请输入公告标题" maxlength=20></el-input>
              <span class="word-num">{{(formData.noticeTitle).replace(/\s+/g,"").length}}/20</span>
            </el-form-item>
          </el-col> -->

            <el-form-item v-show="formData.openFlag != 2" label="内容：" prop="noticeContent">
              <el-col :span="20">
                <el-input size="small" v-model="formData.noticeContent" placeholder="请输入公告内容"                 type="textarea"
                :autosize="{ minRows: 5}" maxlength=150></el-input>
                <span class="word-num">{{(formData.noticeContent).replace(/\s+/g,"").length}}/150</span>
              </el-col>
            </el-form-item>

          <!-- <el-col v-show="formData.openFlag != 2" :span="20">
            <el-form-item label="内容：" prop="noticeContent">
              <el-input size="small" v-model="formData.noticeContent" placeholder="请输入公告内容" maxlength=150></el-input>
              <span class="word-num">{{(formData.noticeContent).replace(/\s+/g,"").length}}/150</span>
            </el-form-item>
          </el-col> -->

        </el-form>
      </el-row>
    </div>

    <el-dialog 
      class="prot-dialog"
      title=""
      :visible.sync="isShowDialog"
      width="30%"
      center
      :close-on-click-modal=false
      :close-on-press-escape=false
      :show-close=false>
      <p v-show="isCancleBtn" class="prot-dialog-tips-1">确定取消吗？取消后将不保存本次操作内容</p>
      <p v-show="!isCancleBtn" class="prot-dialog-tips-1">点击发布后将立即生效，是否继续发布？</p>
      <!-- <p class="prot-dialog-tips-2">若您选择暂不发送，您只能录入量表的非敏感信息</p> -->
      <!-- <p class="prot-dialog-tips-3">为避免打扰居民，7天内只能发送1次，您已发送过短信，请尽快联系居民同意授权</p> -->
      <span v-show="isCancleBtn" slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancleConfirm"> 确定取消 </el-button>
        <el-button size="small" type="primary" @click="isShowDialog = false"> 继续操作 </el-button>
      </span>
      <span v-show="!isCancleBtn" slot="footer" class="dialog-footer">
        <el-button size="small" @click="openFlagCancle"> 取消 </el-button>
        <el-button size="small" type="primary" @click="openFlagConfirm"> 确定 </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import * as operationData from "../../utils/operation";
let vm = null;
export default {
  components: {
    BreadCrumb
  },
  data() {
    // let checkNoticeTitleStr = (rule, value, callback) => {
    //   if(value.indexOf("\\") != -1) {//存在
    //     callback(new Error('请勿输入字符“ \\ ”'));
    //   } else if (value.indexOf(".") != -1) {
    //     callback(new Error('请勿输入字符“ . ”'));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      curmbFirst: "教培项目",
      curmbSecond: "公告管理",
      projectId: "",
      formData: {
        noticeContent: "",
        noticeId: 0,
        noticeTitle: "",
        openFlag: 0,
        projectId: 0
      },
      isShowDialog: false,
      isCancleBtn: true,
      rules: {
        noticeTitle: [
          { required: true, message: "请输入公告标题", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "输入长度为2-20的内容，可包含中英文、数字及特殊符号",
            trigger: "blur"
          },
          // { validator: checkNoticeTitleStr, trigger: 'blur' }
        ],
        noticeContent: [
          { required: true, message: "请输入公告内容", trigger: "blur" },
          {
            min: 2,
            max: 150,
            message: "输入长度为2-150的内容，可包含中英文、数字及特殊符号",
            trigger: "blur"
          },
        ],
      }
    };
  },
  created() {
    vm = this;
    vm.projectId = vm.getUrlSearch(window.location.href, "projectId");
    vm.formData.projectId = vm.projectId
    vm.getNoticeInfo();
  },
  // 挂载到Dom完成时
  mounted: function() {
    commonUtil.resizeHeight();
  },
  methods: {
    //获取公告信息
    getNoticeInfo() {
      let req = {
        projectId: vm.projectId
      };
      openLoading(vm);
      vm.GET("portal/noticeInfo/getNoticeInfo", req).then(res => {
        closeLoading(vm);
        if (res.code == "000000") {
          vm.formData = res.data;
        }
      });
    },

    beforeConfirm() {
      let flag = false;
      vm.$refs['formData'].validate(valid => {
        if (valid) {
          flag = true;
        } else {
          flag = false;
        }
      });
      if(!flag) return;
      vm.isCancleBtn = false;
      // if(vm.formData.noticeId) {
      vm.isShowDialog = true;
      // }
    },

    //提交公告信息
    confirmEdit(needJump) {
      openLoading(vm);
      vm.formData.projectId = vm.projectId
      vm.POST("portal/noticeInfo/insertOrUpdate", vm.formData).then(res => {
        closeLoading(vm);
        if (res.code == "000000") {
          // if(needJump) {
            vm.$router.push('/item-manager');
            vm.$message.success('发布成功');
          // }
        }
      });
    },
    // 点击取消按钮
    cancleEdit() {
      vm.isCancleBtn = true;
      vm.isShowDialog = true;
    },

    // 切换开启状态
    changeOpenFlag(value) {
      if(vm.formData.noticeId && value == 1) {
        vm.isCancleBtn = false;
        vm.isShowDialog = true;
      }
    },

    // 确认取消
    cancleConfirm() {
      vm.isShowDialog = false;
      vm.$router.push('/item-manager');
    },

    // 确认开启的取消
    openFlagCancle() {
      vm.isShowDialog = false;
      // vm.formData.openFlag = 2;
      // vm.$forceUpdate();
    },

    // 确认开启
    openFlagConfirm() {
      vm.isShowDialog = false;
      vm.confirmEdit();
    }
  }
};
</script>
<style lang="scss">
.notice-item-shield {
  .component-content {
    background: #fff;
    padding: 20px 30px;
    .header-title {
      padding: 10px 12px;
      font-size: 12px;
      color: #449284;
      border-bottom: 1px solid #efefef;
    }
    .complete {
      float: right;
    }
    .text-black {
      color: #d51f35;
    }
  }
  .word-num {
    font-size: 12px;
    color: #999;
    padding-top: 5px;
  }
  .el-input {
    width: 80%;
  }
  .el-textarea {
    width: 80%;
  }
  .el-form-item__error {
    left: 13px;
  }
}
</style>