<template>
  <div class="wrapper editwrap">
    <el-dialog
      :visible.sync="dialogVisible"
      title="信息报送"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form ref="editFormA" :model="editFormA"  label-width="100px">
        <el-form-item label="报送单位" prop="sendId">
          <el-select v-model="value" placeholder="请选择" >
            <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="简报" prop="briefing">
          <el-input type="textarea" v-model="editFormA.briefing"></el-input>
        </el-form-item>
        <el-form-item label="报送内容" prop="content">
          <el-input type="textarea" v-model="editFormA.content"></el-input>
          <template>
            <!-- `checked` 为 true 或 false -->
            <el-checkbox @change="checkedMsg(editFormA.checked)" v-model="editFormA.checked" style="width: 20%;" prop="checked">同时发送短信</el-checkbox>
          </template>
          <el-popover
                  placement="right"
                  width="500"
                  trigger="click">
            <el-table :data="gridData"  style="width: 100%"
                      max-height="250" >
              <el-table-column width="100" property="title" label="标题"></el-table-column>
              <el-table-column width="250" property="titlecontent" label="内容" ></el-table-column>
              <el-table-column
                      fixed="right"
                      label="操作"
                      width="100">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="max">选择</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button slot="reference"
                       type="text"
                       style="margin-left: 65%;"
                       size="small" id="bbb">选择模板&gt;&gt;</el-button>
          </el-popover>
        </el-form-item>
        <el-form-item id="shortmsg" label="短信内容" prop="msgcontent" style="display:none">
          <el-input type="textarea" v-model="editFormA.msgcontent"></el-input>
        </el-form-item>
        <el-form-item label="报送时间" v-if="editFormA.createTime != null && editFormA.createTime != ''" >
          <el-input type="text" v-model="editFormA.createTime" disabled></el-input>
        </el-form-item>
        <el-form-item label="材料文件" v-if="editFormA.id == null || editFormA.id == ''">
          <el-upload
                  ref="uploaderA"
                  class="uploader"
                  :limit="1"
                  :action="actionUrl"
                  :on-success="(a,b,c) => onSuccessA(a,b,c,'fileUrl')"
                  :on-error="onErrorA"
                  :on-remove="handleRemoveA"
                  :before-remove="(a,b,c) => beforeRemoveA(a,b,c,'fileUrl')"
                  :on-exceed="onExceedA"
                  :before-upload="beforeUploadA"
                  :multiple="false"
                  list-type="picture"
                  :file-list="fileListA"
          >
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip" >只能上传doc/docx/pdf/xls/xlsx格式文件，且不超过一个</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="报送附件" id ="fileSpan" v-if=" editFormA.fileUrl != '' && editFormA.fileUrl != null">
          <span
                  class="dbtn sd qiCr"
                  @click="checkFile(editFormA.fileUrl)"
          >
            <i class="el-icon el-icon-view"></i>
            下载文件
          </span>
        </el-form-item>
        <el-form-item label="回复内容"  v-if=" editFormA.receiveContent != '' && editFormA.receiveContent != null" prop="receiveContent">
          <el-input type="textarea" v-model="editFormA.receiveContent" ></el-input>
        </el-form-item>
        <el-form-item label="回复时间" v-if="editFormA.receiveTime != null && editFormA.receiveTime != ''" >
          <el-input type="text" v-model="editFormA.receiveTime" disabled></el-input>
        </el-form-item>
        <el-form-item label="回复附件" v-if=" editFormA.receiveEnclosure != '' && editFormA.receiveEnclosure != null">
          <span
                  class="dbtn sd qiCr"
                  @click="checkFile(editFormA.receiveEnclosure)"
          >
            <i class="el-icon el-icon-view"></i>
            下载文件
          </span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="confirmFun('editFormA')" v-if="editFormA.stutas != 0 && editFormA.stutas!=1">确定</el-button>
        <el-button @click="$emit('dialogFun')" size="small">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style lang="scss">
  @import '@/utils/default.scss';
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import METHOD from "@/utils/methods";
let uploadfile = require("@/assets/uploadfile.png");

@Component({
  components: { }
})

export default class EventsMgSend extends Vue {
  // @Getter('signs') signsData: any;
  //属性或参数中使用!:表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  @Prop(Boolean) dialogVisible!: Boolean;

  @Prop(Object) editForm!: {
    fullName: String;
  };

@Provide() stype:any = "a";
  //@Prop(String) content!: String;
@Provide() value: any = "";
  @Provide() gridData: any = [{
    title: '模板1',
    titlecontent: '事发突然，情况紧急，请领导批准！'
},{
    title: '模板2',
    titlecontent: '请领导批准！'
}];
  @Provide() options: any = [{
      value: '新乐市消防局',
      label: '103'
  }];
//上传
@Provide() actionUrl: any = "";
@Provide() fileUrl: any = [];
@Provide() fileListA: any = [];
@Provide() fileListB: any = [];
@Provide() rulesA: any = {
    // evaluateContent: [
    //   { required: true, trigger: "change", message: "该项为必填项！" }
    // ],
};
@Provide() editFormA: any = {content:"",briefing:'',
    msgcontent:'新乐市应急指挥调度平台显示发生紧急事件，请登录http://222.223.203.154:8089/login进行查看审批或拨打电话()进行审批。',
    checked:false};
@Provide() editFormB: any = {};

@Watch("fileUrl") change(val: any) {
    if(this.stype == 'a'){
        if (val.length > 0) {
            this.editFormA.fileUrl = val[0].response.data.viewPath;
            this.editFormA.sendEnclosure = val[0].response.data.viewPath;
            this.editFormA.fileOriginalName = val[0].response.data.originalName;

            this.fileListA = [];
            this.fileListA.push({
                name: this.editFormA.fileOriginalName,
                url: uploadfile,
            });
        } else {
            this.editFormA.fileUrl = "";
            this.editFormA.fileOriginalName = "";
        }
    } else {
        if (val.length > 0) {
            this.editFormB.fileUrl = val[0].response.data.viewPath;
            this.editFormA.sendEnclosure = val[0].response.data.viewPath;
            this.editFormB.fileOriginalName = val[0].response.data.originalName;

            this.fileListB = [];
            this.fileListB.push({
                name: this.editFormB.fileOriginalName,
                url: uploadfile,
            });
        } else {
            this.editFormB.fileUrl = "";
            this.editFormB.fileOriginalName = "";
        }
        console.log("this.fileListB", this.fileListB)
    }

}
//选择模板
handleClick(val){
    this.editFormA.content = val.titlecontent;
    document.querySelector('#bbb').click();
}
//点击文件
checkFile(url: any) {
    window.open("http://" + METHOD.GlobalUrl + "/ioc" + url)
}
checkedMsg(checked:any){
    console.log("---------"+checked)
    if(checked){
        document.getElementById("shortmsg").style.display="";
    }else{
        document.getElementById("shortmsg").style.display="none";
    }
}
  //取消事件要在父级取消是所以用到 $emit
  confirmFun(formName: string) {
    let that = this,
      // params =that.sendForm;
      //   console.log( that.editFormA)
      // return;
    if(this.value!=undefined){
        (that as any).$axios
            .post("/eventInfoSubmitted/insertSubmitted", that.editFormA)
            .then(() => {
                (that as any).$message({
                    message: "操作成功！",
                    type: "success"
                });
                (that as any).$emit("dialogFun");
                //that.$emit("refreshTableData"); //刷新表格
            });
    }else{
        this.$alert('请选择报送单位', '温馨提示', {
            confirmButtonText: '确定',
        });
    }
  }
postPGData() {
    let that = this;
    console.log("that.editFormA", that.editFormA);
    (that as any).$axios
        .post(
            `/eventInfo/addOrEditEventEvaluateInfo`,
            Object.assign({eventId: that.eventId},that.editFormA)
        )
        .then((res: any) => {
            (that as any).$message.success('成功！');
            that.$emit('redialogFun');
            that.$emit("refreshTableData"); //刷新表格
        });
}
//对数组去重排序
sortOut(arr: Array<any>){
    const compare = (a:any, b:any) => {
        if(a.handleTime > b.handleTime) return -1;
        else if(a.handleTime = b.handleTime) return 0;
        else return 1;
    }
    arr.sort(compare)
}
postCLData() {
    let that = this;
    (that as any).$axios
        .post(
            `/eventInfo/addOrEditEventHandleProcessInfo`,
            Object.assign({ eventId: that.eventId }, that.editFormB)
        )
        .then((res: any) => {
            (that as any).$message.success('成功！');
            that.getCLdata()
        });
}
// 上传
onSuccessA(res: any, file: any, fileListA: any, key: string) {
    this.$data[key] = fileListA;
    document.getElementById("fileSpan").style.display="";

}
onErrorA(err: any, file: any, fileListA: any) {
    this.$message.error("上传失败!");
}
handleRemoveA(file: any, fileListA: any, key: string) {
    this.$data[key] = fileListA;
    this.editFormA.fileUrl = "";
    this.editFormA.fileOriginalName = "";
    this.editFormA.sendEnclosure ="";
    document.getElementById("fileSpan").style.display="none";

}
onExceedA(file: any, fileListA: any) {
    this.$message.warning("只允许上传一个文件，如需更改请先删除！");
}
//删除文件
beforeRemoveA(file: any, fileListA: any) {
    if (file && file.status==="success") {
        let that = this,
            param;
        param = file.response
            ? file.response.data.savePath.replace(/\\/g, "%")
            : file.url.replace(/\\/g, "%").slice(9);
        METHOD.axiosGet(this, `/file/deleteFile?savePath=${param}`, function (
            res: any
        ) {
            if (res.code == 0) that.$message.success("删除成功");
            else return false;
        });
    }
}
beforeUploadA(file: any){
    console.log(file)
    var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
    const extension = testmsg === 'xls'
    const extension2 = testmsg === 'xlsx'
    const extension3 = testmsg === 'doc'
    const extension4 = testmsg === 'docx'
    const extension5 = testmsg === 'pdf'
    if(!extension && !extension2 && !extension3 && !extension4 && !extension5) {
        this.$message({
            message: '上传文件只能是doc、docx、pdf、xls、xlsx格式!',
            type: 'warning'
        });
    }
    return extension || extension2 || extension3 || extension4 || extension5
}
created() {
    let that = this;
    var id = that.editForm.id;
    that.editFormA.eventId = that.editForm.id;
    that.editFormA.briefing =this.editForm.eventAddress+this.editForm.alarmTime+this.editForm.eventName;
    (that as any).$axios
        .get(`/eventInfoSubmitted/submittedById/${id}`)
        .then((res: any) => {
            if(res!=undefined &&res.id!=''){
                that.editFormA=res
                that.value="新乐市消防局"
                that.editFormA.fileUrl=res.sendEnclosure
                console.log(that.editFormA.fileUrl)
            }
            if(res!=undefined &&res.checked== "1"){
                that.editFormA.checked=true;
                document.getElementById("shortmsg").style.display="";
            }
        });

    if (that.editFormB.fileOriginalName) {
        that.fileListB.push({
            name: that.editFormB.fileOriginalName,
            url: uploadfile,
        });
    }
    that.actionUrl = "http://" + METHOD.GlobalUrl + "/ioc/file/uploadFile";
}
}
</script>