<template>
  <div class="system-edit-post-container">

      <el-form ref="formRef" :model="mailData" :rules="rules" size="default" label-width="90px">
        <el-form-item  label="邮件类型" prop="type">
            <el-radio-group v-model="mailData.type">
              <el-radio :label="1">奖励</el-radio>
              <el-radio :label="2">活动</el-radio>
              <el-radio :label="3">公告</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item  label="重复类型" prop="type">
          <el-radio-group v-model="mailData.repeatedCollection">
            <el-radio :label="0">重启重新领取</el-radio>
            <el-radio :label="1">只能领取一次</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item  label="新账号领取" prop="newGet">
          <el-radio-group v-model="mailData.newGet">
            <el-radio :label="0">新账号可领取</el-radio>
            <el-radio :label="1">新账号不能领取</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标题" prop="title" >
          <el-input  v-model="mailData.title" placeholder="请输入邮件标题"   />
        </el-form-item>
        <el-form-item label="发件人署名" prop="from">
          <el-input v-model="mailData.from" placeholder="请输入发件人署名" />
        </el-form-item>
        <el-form-item label="发送区服" prop="serverId">
          <el-select v-model="mailData.serverId" class="m-2" placeholder="选择服务器" size="large">
            <el-option  v-for="item in servers"  :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="收件人UID" prop="to">
          <el-input v-model="mailData.to" placeholder="请输入发件人UID,全服填0,多人格式uid;uid" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="mailData.content" type="textarea" />
        </el-form-item>
        <el-form-item label="奖励(不能用中文标点）" prop="content">
          <el-input v-model="mailData.drops" type="textarea" placeholder="格式: id:num,id:num"/>
        </el-form-item>

        <el-form-item   label="过期时间" prop="expired">
          <el-date-picker type="datetime" size="large" v-model="mailData.expired"    placeholder="默认10天后过期删除"  format="YYYY/MM/DD HH:mm:ss" value-format="x" />
        </el-form-item>

        <el-form-item   label="生效时间" prop="time">
          <el-date-picker   type="datetime" v-model="mailData.time"    placeholder="默认立即生效"  format="YYYY/MM/DD HH:mm:ss" value-format="x" />
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="mailData.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item>
          <el-button size="default" type="primary" class="ml10" @click="onSubmit">
            发送邮件
          </el-button>
        </el-form-item>
      </el-form>


  </div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent,ref,unref } from 'vue';
import {ElMessage} from "element-plus";
import { gameMailSend } from '/@/api/game';
import {ServerList} from "/@/utils/game";
import { Session } from '/@/utils/storage';



interface MailData{
  serverId:string
  to:string
  gmName:string
  type:string
  time:number
  expired:number
  newGet:string
  repeatedCollection:number
  title:string
  content:string
  drops:string
  remark:string

}

interface TableDataState{
  mailData:MailData;
  rules: object;
  servers:object;
}
export default defineComponent({
  name: 'systemEditPost',
  setup() {
    const formRef = ref<HTMLElement | null>(null);
    const menuRef = ref();
    const state = reactive<TableDataState>({
      mailData: {
        serverId:"",
        to:"",
        gmName:Session.get("userInfo").userName,
        type:"",
        time:0,
        expired:0,
        newGet:"",
        repeatedCollection:0,
        title:"",
        content:"",
        drops:"",
        remark:""
      },
      // 表单校验
      rules: {
        serverId: [
          { required: true, message: "区服不能为空", trigger: "blur" }
        ],
        type: [
          { required: true, message: "邮件类型不能为空", trigger: "blur" }
        ],
        repeatedCollection: [
          { required: true, message: "重复领取类型不能为空", trigger: "blur" }
        ],
        newGet: [
          { required: true, message: "新手领取类型不能为空", trigger: "blur" }
        ],
        title: [
          { required: true, message: "标题不能为空", trigger: "blur" }
        ],
        remark: [
          { required: true, message: "备注不能为空", trigger: "blur" }
        ],
        drops:[
          {pattern: /^[0-9:,]+$/,message: "只能0-9,:", trigger: "blur" }
        ],
      },
      servers:ServerList

    });


    // 新增
    const onSubmit = () => {
      const formWrap = unref(formRef) as any;
      if (!formWrap) return;
      formWrap.validate((valid: boolean) => {
        if (valid) {
            //添加
            if(state.mailData.drops.length>0){
              if (state.mailData.drops.includes("：")||state.mailData.drops.includes("，")){
                ElMessage.error('奖励不能包含中文标点');
                return
              }
              var ss=state.mailData.drops.split(",")
              for(var i=0;i<ss.length;i++){
                var drop=ss[i].split(":")
                if (drop.length!=2){
                  ElMessage.error('奖励格式不对');
                  return
                }
              }

            }
            gameMailSend(state.mailData).then(()=>{
              ElMessage.success('邮件发送成功');
            }).finally(()=>{
             // state.loading = false;
            })

        }
      });
    };
    // const resetForm = ()=>{
    //
    //   state.mailData = {
    //     to:"",
    //     gaName:"",
    //     type:"",
    //     time:0,
    //     expired:0,
    //     newGet:"",
    //     repeatedCollection:0,
    //     title:"",
    //     content:"",
    //     drops:"",
    //     remark:""
    //   }
    // };

    return {
      onSubmit,
      menuRef,
      formRef,
      ...toRefs(state),
    };
  },
});
</script>

<style scoped lang="scss">
.tree-border {
  margin-top: 5px;
  border: 1px solid #e5e6e7!important;
  background: #fff none!important;
  border-radius: 4px;
}
.system-edit-post-container {
  .menu-data-tree {
    border: var(--el-input-border, var(--el-border-base));
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    padding: 5px;
  }
}
</style>
