<template>
  <div class="app-container" >
    <el-form  ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="收件人" prop="receiverName">
        <el-input v-model="receiverName" placeholder="请选择收件人" readonly>
          <template slot="append">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleSelect"
            >选择人员</el-button>
          </template>
        </el-input>
        <el-input v-model="receiverAccount" v-show="false"/>
      </el-form-item>
      <el-form-item label="主题" prop="mailTheme">
        <el-input v-model="form.mailTheme" placeholder="请输入邮件主题" />
      </el-form-item>
      <el-form-item label="附件">
        <el-upload
          class="upload-file"
          :before-upload="handleBefore"
          :before-remove="beforeRemove"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :show-file-list="true"
          :file-list="mail.oldFileList"
          :action=actionUp
          multiple
          :http-request="fileRequest"
        >
          <div slot="tip" class="el-upload__tip"></div>
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-upload"
            size="mini"
          >上传</el-button>
        </el-upload>

        <ul v-show="!!mail.oldFileList.length" class="old-file-list"></ul>
      </el-form-item>
      <el-form-item label="邮件内容" prop="mailContent" style="height: 250px;">
        <Editor v-model="form.mailContent" />
      </el-form-item>
      <el-input v-model="form.status" v-show="false"/>
      <el-input v-model="form.fileName" v-show="false"/>
      <el-input v-model="form.filePath" v-show="false"/>
      <el-form-item style="text-align:center;">
        <el-button type="primary" @click="submitForm(1)">发 送</el-button>
        <el-button @click="submitForm(0)">保存草稿</el-button>
      </el-form-item>
    </el-form>

    <!-- 选择人员对话框 -->
    <select-user-by-dept ref="selectUserByDept" :title="title" :open="open" :inputName="receiverName" :inputAccount="receiverAccount" append-to-body @ok="selectOK"/>

<!--    &lt;!&ndash; 选择人员对话框 &ndash;&gt;-->
<!--    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>-->
<!--      <SelectRen ref="renlist" :userIds="receiverAccount" @fatherFunction = "selectChange" @removeFunction="removeSelectuser"/>-->

<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="cancel">取 消</el-button>-->
<!--        <el-button type="primary" @click="submitRen">选 定</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->

  </div>
</template>

<script>
  import { addInfo, updateInfo, uploadFujian} from "@/api/system/email/send";
  import Editor from '@/components/Editor';
  import SelectUserByDept from "@/components/SelectRen/selectUserByDept";

  export default {
    name: "Info",
    components: {
      Editor,
      SelectUserByDept
    },
    data() {
      return {
         userIds: '',
        // 遮罩层
        loading: true,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          mailTheme: [
            { required: true, message: "主题不能为空", trigger: "blur" }
          ]
        },
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        receiverName: "", // 收件人的昵称
        receiverAccount: "", // 收件人的账号
        mail: {
          oldFileList: [],
          fileList: []
        },
        actionUp:'aaaa',//接口地址
        fujianName:'',
        fujianPath:''
      };
    },
    methods: {
      // 表单重置
      reset() {
        this.form = {
          mailGuid: undefined,
          receiverName: undefined,
          receiverAccount: undefined,
          mailTheme: undefined,
          mailContent: undefined,
          status: "0",
        };
        this.receiverName='';
        this.receiverAccount='';
        this.fujianName='';
        this.fujianPath='';
        this.mail.oldFileList=[];
        this.mail.fileList=[];
        this.resetForm("form");
      },
      /** 写信==发送status=1、保存草稿status=0按钮 */
      submitForm: function(status) {
        this.form.status = status;
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.receiverAccount = this.receiverAccount;
            this.form.receiverName = this.receiverName;
            if(this.fujianName!='' && this.fujianPath!=''){
              this.form.fileName = this.fujianName.substring(0, this.fujianName.length - 1);
              this.form.filePath = this.fujianPath.substring(0, this.fujianPath.length - 1);
            }

            if(status==1){
              if (this.form.receiverName.length < 1 || this.form.receiverAccount.length < 1) {
                this.$message({
                  showClose: true,
                  message: '收件人不能为空',
                  type: 'warning',
                  duration: 1200
                });
                return;
              }
            }
            if (this.form.mailGuid != undefined) {
              updateInfo(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  //this.getList();
                }
              });
            } else {
              // let reg=new RegExp('"','g')//g代表全部
              // this.form.mailContent=this.form.mailContent.replace(reg,"'");
              //console.log(JSON.stringify(this.form))
              addInfo(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.reset();
                }
              });
            }
          }
        });
      },
      /** 附件上传---开始  */
      handleBefore(file) {
        // 上传前可以对要上传文件进行控制
        // if (file.type.indexOf("image/") == -1) {
        //   this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
        // }
      },
      handleSuccess(file, fileInfo) {
        this.mail.fileList.push({
          name: fileInfo.name,
          uuid: fileInfo.uid,
          url: fileInfo.url
        });
      },
      handlePreview(file) {
        // 预览,一些文件因为格式问题无法预览。推荐使用a标签，src为文件的下载地址，点击即可下载,参照录音

        window.open(file.url);
      },
      handleRemove(file) {
        // 移除
        this.mail.oldFileList.forEach((item, index) => {
          if (item.uid === file.uid) {
            this.mail.oldFileList.splice(index, 1);
            //删除
          }
        });
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      fileRequest(item) {
        let uploadData = new FormData()
        uploadData.append('file',item.file)
        uploadFujian(uploadData).then(response => {
          if (response.code === 200) {
            this.fujianName += response.fileName+',';
            this.fujianPath += response.url+',';
            this.mail.oldFileList.push({
              name: response.fileName,
              url: process.env.VUE_APP_BASE_API+response.url
            });
            this.msgSuccess("上传成功");
          }
        });
      },
      /** 附件上传---结束  */

      /** 选择人员 按钮弹窗操作 */
      handleSelect() {
        this.$refs.selectUserByDept.childOpen=true;
        this.open = true;
        this.title = "选择收件人";
      },
      /** 人员选择器的返回值  */
      selectOK(zh, xm) {
        this.receiverAccount = zh;
        this.receiverName=xm;
        this.open=false;
      }
    },
    watch: {
    }
  };
</script>

<style>
  .el-input-group__append, .el-input-group__prepend{
    background: #188efd !important;
    color: #fff !important;
  }
</style>
