<template>
    <div style="padding:10px;">
        <div>
            <Form :model="formSearch" :rules="rules" ref="messageForm" :label-width="85">
                <Row :gutter="20" class="code-row-bg">
                    <Col span="24">
                        <Form-item prop="type" :label="$t('module.sendMessage.messageType')">
                            <Select v-model="formSearch.type" @on-change="typeChange" size="small" clearable>
                                <Option value="app">{{$t('module.sendMessage.CRCWorkAPP')}}</Option>
                                <Option value="sms">{{$t('module.sendMessage.SMS')}}</Option>
                                <Option value="email">{{$t('module.sendMessage.email')}}</Option>
                            </Select> 
                        </Form-item>
                    </Col>
                </Row>
                <Row :gutter="20" v-if="noTitle" class="code-row-bg">
                    <Col span="24">
                        <Form-item prop="title" :label="$t('module.sendMessage.title')">
                            <Input  v-model="formSearch.title"/>
                        </Form-item>
                    </Col>
                </Row>
                <Row :gutter="20" class="code-row-bg">
                    <Col span="24">
                        <Form-item prop="recipients" :label="$t('module.sendMessage.recipient')">
                            <Input  v-model="formSearch.recipients" placeholder="包含多个接收人时，请以英文逗号隔开" type="textarea" :rows="2"/>
                        </Form-item>
                    </Col>
                    <!-- <Col  v-if="showSender" span="12">
                        <Form-item prop="sender" :label="$t('module.sendMessage.sender')">
                            <Input  v-model="formSearch.sender" :title="formSearch.sender"/>
                        </Form-item>
                    </Col> -->
                </Row>
                <Row :gutter="20" class="code-row-bg">
                    <Col span="24">
                        <Form-item prop="content" :label="$t('module.sendMessage.content')">
                            <Input  v-model="formSearch.content" type="textarea" :rows="4"/>
                        </Form-item>
                    </Col>
                </Row>
                <!-- <div style="margin-left: -34px">
                <el-row class="warp">
                    <el-col :span="24" class="warp-main">
                        <el-form ref="infoForm" label-width="120px">
                            <el-form-item :label="$t('消息内容')">
                                <div class="edit_container">
                                    <quill-editor v-model="formSearch.content" ref="myQuillEditor" class="editer" :options="editorOption"> </quill-editor>
                                </div>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </div>  -->
            </Form>
        </div>
    </div>
</template>
<script>
import {quillEditor} from 'vue-quill-editor'; //调用编辑器
export default {
  components: {
      quillEditor
  },
  props: {
      
  },
  data() {
    const recipientValidate = (rule, value, callback) => {
        if(!value){
            callback(new Error(this.$t("module.sendMessage.enterRecipient")));
            return
        };
        let recipientList = value.split(",");
        //校验中文标点符号
        if(new RegExp(/[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/).test(value)){
            callback(new Error(this.$t('module.sendMessage.noChinesePunctuationMark')))
        }
        for(let recipient of recipientList){
            if(this.formSearch.type == "sms"){
                if (!new RegExp(/^1[34578]\d{9}$/).test(recipient)) {
                    callback(new Error(this.$t("module.sendMessage.enterCorrectPhoneNumber")));
                } 
            }else if(this.formSearch.type == "email"){
                if (!new RegExp(/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/).test(recipient)) {
                    callback(new Error(this.$t("module.sendMessage.enterCorrectEmail")));
                } 
            }
        }
        callback();
    }
    return {
        noTitle: true,
        showSender: true,
        formSearch: {
            type: "",
            title: "",
            sender: "",
            recipients: "",
            content: "",
        },
        rules: {
            type: [{ required: true, message: this.$t("module.sendMessage.selectMessageType"), trigger: "blur" }],
            title: [{ required: true, message: this.$t("module.sendMessage.enterTitle"), trigger: "blur" }],
            sender: [{ required: true, message: this.$t("module.sendMessage.enterSender"), trigger: "blur" }],
            recipients: [{ required: true, validator: recipientValidate, trigger: "blur" }],
            // recipients: [{ required: true, message: this.$t("module.sendMessage.enterRecipient"), trigger: "blur" }],
            content: [{ required: true, message: this.$t("module.sendMessage.entercontent"), trigger: "blur" }],
        },
    };
  },
  computed: {
      editor() {
            return this.$refs.myQuillEditor.quill
        }
  },
  created: function() {
      if(this.formSearch.vsType == "2" || this.vsId){
          this.yesOrNo = true;
      }
     
      this.$emit("SetTitle", this.$t("module.sendMessage.sendMessage"));
      this.$emit("SetPageSize", 800);
      this.$emit('SetPageActions', [
        {
            text: this.$t("发送"),
            theme: "success",
            icon: "checkmark-round",
            handle: this.send,
        }
    ]);
  },
  beforeMount: function() {},
  mounted: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
      send(){
        this.$refs["messageForm"].validate(valid => {
          if(valid){
            new $confirm(this.$t('module.sendMessage.confirmToSend'), this).then(() => {
                $store.dispatch("Send", this.formSearch).then(response => {
                    if(response.statusCode == "0"){
                        this.$Message.success({
                            content: this.$t("module.sendMessage.sendSuccessfully"),
                            duration: 3
                        })
                        this.$emit("Close");
                    }else{
                        this.$Message.warning({
                            content: response.msg,
                            duration: 3
                        })
                    }
                })
            }
            )
        }else{
            this.$Message.error({
                content: this.$t("module.valueSet.warning.formValidateFailed"),
                duration: 3
            })
        }})
      },
      typeChange(type){
          this.formSearch.recipients = "";
          if(type == "sms"){
              this.noTitle = false;
              this.showSender = false;
          }else{
              this.noTitle = true;
              this.showSender = true;
          }
      },
      cancel(){
          this.$emit("Close")
      },
  },
  watch: {},
  directives: {}
};
</script>
<style>
    .ivu-select-selection{
        min-height: 34px;
        border-radius: 3px
    }
    .ivu-select-selected-value{
        height: 32px;
        line-height: 32px;
    }
</style>

