<template>
  <div class="send-push-wrapper" id="screenSetSPId">
    <div class="component-content">
      <el-row :gutter="30" class="row" type="flex">
        <el-form
          :model="formData"
          ref="formData"
          :rules="rules"
          label-width="120px"
          class="form-inline"
        >
          <el-form-item
            label="标题："
            prop="noticeTitle"
            style="min-width: 1000px"
          >
            <el-col :span="20">
              <el-input
                size="small"
                v-model="formData.noticeTitle"
                placeholder="请输入推送标题"
                maxlength="30"
              ></el-input>
              <span class="word-num"
                >{{ formData.noticeTitle.replace(/\s+/g, '').length }}/30</span
              >
            </el-col>
          </el-form-item>
          <el-form-item label="内容：" prop="noticeContent">
            <el-col :span="20">
              <el-input
                size="small"
                v-model="formData.noticeContent"
                placeholder="请输入推送内容"
                type="textarea"
                :autosize="{ minRows: 5 }"
                maxlength="250"
              ></el-input>
              <span class="word-num"
                >{{
                  formData.noticeContent.replace(/\s+/g, '').length
                }}/250</span
              >
            </el-col>
          </el-form-item>
          <el-form-item label="发送时间：" prop="customPushTime">
            <el-col :span="8">
              <el-date-picker
                :shortcuts="pickerOptions0 && pickerOptions0.shortcuts"
                :disabled-date="pickerOptions0 && pickerOptions0.disabledDate"
                :cell-class-name="
                  pickerOptions0 && pickerOptions0.cellClassName
                "
                v-model="formData.customPushTime"
                size="small"
                type="datetime"
                placeholder="请选择发送时间"
                value-format="yyyy-MM-dd HH:mm"
                format="yyyy-MM-dd HH:mm"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="发送方式：" prop="channel">
            <el-col :span="20">
              <el-checkbox-group v-model="formData.channel">
                <el-checkbox size="small" :label="1"
                  >App系统消息推送</el-checkbox
                >
              </el-checkbox-group>
            </el-col>
          </el-form-item>
          <el-form-item label="发送对象：" prop="sendScopeType">
            <el-col :span="20">
              <el-radio-group v-model="formData.sendScopeType">
                <el-radio :label="1">尚未参加的学员</el-radio>
                <el-radio :label="2">未完成项目的学员</el-radio>
                <el-radio :label="3">项目内区域/机构负责人</el-radio>
                <!-- <el-radio :label=4>本机构及下级机构学员</el-radio> -->
                <el-radio :label="5">所有人</el-radio>
              </el-radio-group>
            </el-col>
          </el-form-item>
        </el-form>
      </el-row>
      <el-col :span="20" :offset="2">
        <el-button type="primary" size="small" @click="cancleEdit()"
          >取消</el-button
        >
        <el-button type="primary" size="small" @click="beforeConfirm()"
          >发布</el-button
        >
      </el-col>
    </div>

    <el-dialog
      class="prot-dialog"
      :title="dialogTitle"
      v-model="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">
        {{ dialogContent }}
      </p>
      <!-- <p class="prot-dialog-tips-2">若您选择暂不发送，您只能录入量表的非敏感信息</p> -->
      <!-- <p class="prot-dialog-tips-3">为避免打扰居民，7天内只能发送1次，您已发送过短信，请尽快联系居民同意授权</p> -->
      <template v-slot:footer>
        <span v-show="isCancleBtn" class="dialog-footer">
          <el-button size="small" @click="cancleConfirm"> 确定取消 </el-button>
          <el-button size="small" type="primary" @click="isShowDialog = false">
            继续操作
          </el-button>
        </span>
      </template>
      <template v-slot:footer>
        <span v-show="!isCancleBtn" class="dialog-footer">
          <el-button size="small" @click="openFlagCancle"> 取消 </el-button>
          <el-button size="small" type="primary" @click="openFlagConfirm">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { $on, $off, $once, $emit } from '../../../../utils/gogocodeTransfer'
import { openLoading, closeLoading } from '@/utils/utils'
import * as commonUtil from '@/utils/utils'
import * as operationData from '@/utils/operation'
let vm = null
export default {
  props: {
    formData: {
      type: Object,
    },
  },
  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: '',
      dialogTitle: '确认要发布吗？',
      dialogContent: `点击发布后将在「${this.formData.customPushTime}」向项目人员推送，是否继续发布？`,
      isShowDialog: false,
      isCancleBtn: true,
      rules: {
        noticeTitle: [
          { required: true, message: '请输入推送标题', trigger: 'blur' },
          {
            min: 2,
            max: 30,
            message: '输入长度为2-30的内容，可包含中英文、数字及特殊符号',
            trigger: 'blur',
          },
          // { validator: checkNoticeTitleStr, trigger: 'blur' }
        ],
        noticeContent: [
          { required: true, message: '请输入推送内容', trigger: 'blur' },
          {
            min: 2,
            max: 250,
            message: '输入长度为2-250的内容，可包含中英文、数字及特殊符号',
            trigger: 'blur',
          },
        ],
        channel: [
          { required: true, message: '请选择发送方式', trigger: 'blur' },
        ],
        customPushTime: [
          { required: true, message: '请选择发送时间', trigger: 'blur' },
        ],
        sendScopeType: [
          { required: true, message: '请选择发送对象', trigger: 'blur' },
        ],
      },
      changeNum: 1,
      pickerOptions0: {
        disabledDate: (time) => {
          if (this.formData.customPushTime) {
            return time.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000
          }
        },
      },
    }
  },
  watch: {
    formData: {
      handler(newVal) {
        this.changeNum++
        $emit(this, 'changeNum', this.changeNum)
      },
      deep: true,
    },
  },
  created() {
    vm = this
  },
  // 挂载到Dom完成时
  mounted: function () {
    // commonUtil.resizeHeight(300, 500, 'slidebar-container', 'screenSetSPId');
  },
  methods: {
    beforeConfirm() {
      vm.dialogTitle = '确认要发布吗？'
      let flag = false
      vm.$refs['formData'].validate((valid) => {
        if (valid) {
          flag = true
        } else {
          flag = false
        }
      })
      if (!flag) return
      ;(this.dialogContent = `点击发布后将在「${this.formData.customPushTime}」向项目人员推送，是否继续发布？`),
        (vm.isCancleBtn = false)
      vm.isShowDialog = true
    },

    //提交推送信息
    confirmEdit(needJump) {
      openLoading(vm)
      // vm.formData.projectId = vm.projectId
      vm.POST('portal/noticeInfo/insertOrUpdateAppPush', vm.formData).then(
        (res) => {
          closeLoading(vm)
          if (res.code == '000000') {
            vm.$router.push('/item-manager')
            vm.$message.success('发布成功')
          } else {
            vm.$message.error(res.message)
          }
        }
      )
    },
    // 点击取消按钮
    cancleEdit() {
      vm.dialogTitle = '确定取消吗？'
      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()
    },
  },
  emits: ['changeNum'],
}
</script>

<style lang="scss" scoped>
.send-push-wrapper {
  .el-radio {
    display: block;
    padding-bottom: 12px;
  }
  .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;
  }
  .prot-dialog-tips-1 {
    text-align: center !important;
  }
}
</style>
