<template>
  <div class="wrapper editwrap">
    <el-dialog
      :visible.sync="dialogVisible"
      :title="title"
      :show-close="false"
      :close-on-click-modal="false"
      class="w800"
    >
      <el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
        <!-- <el-form-item label="所属单位">
          <el-select v-model="editForm.unitId" placeholder="请选择" @change="selectedBFun">
            <el-option
              v-for="item in deptList"
              :key="item.id"
              :label="item.fullName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="所属部门" prop="deptName">
          <el-input v-model="editForm.deptName"></el-input>
        </el-form-item>
        <el-form-item label="演练名称" prop="exerciseName">
          <el-input v-model="editForm.exerciseName"></el-input>
        </el-form-item>
        <el-form-item label="演练代号" prop="exerciseCodeName">
          <el-input v-model="editForm.exerciseCodeName"></el-input>
        </el-form-item>
        <el-form-item label="演练类型" prop="exerciseType">
          <el-input v-model="editForm.exerciseType"></el-input>
        </el-form-item>
        <el-form-item label="演练等级" prop="grade">
          <el-radio-group v-model="editForm.grade">
            <el-radio label="Ⅰ级">Ⅰ级</el-radio>
            <el-radio label="Ⅱ级">Ⅱ级</el-radio>
            <el-radio label="Ⅲ级">Ⅲ级</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="演练地点" prop="place">
          <el-input v-model="editForm.place"></el-input>
        </el-form-item>
        <el-form-item label="演练形式" prop="exerciseForm">
          <el-select v-model="editForm.exerciseForm" placeholder="请选择">
            <el-option label="综合现场演练" value="综合现场演练"></el-option>
            <el-option label="单项现场演练" value="单项现场演练"></el-option>
            <el-option label="综合桌面演练" value="综合桌面演练"></el-option>
            <el-option label="单项桌面演练" value="单项桌面演练"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申报时间" prop="applyTime">
          <el-date-picker
            v-model="editForm.applyTime"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            v-model="editForm.startTime"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            v-model="editForm.endTime"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="主办单位" prop="hostUnit">
          <el-input v-model="editForm.hostUnit"></el-input>
        </el-form-item>
        <el-form-item label="演练单位" prop="exerciseUnit">
          <el-input v-model="editForm.exerciseUnit"></el-input>
        </el-form-item>
        <el-form-item label="参演人数" prop="peopleNum">
          <el-input type="number" v-model="editForm.peopleNum"></el-input>
        </el-form-item>
        <el-form-item style="width:100%" label="上传附件" prop="filePath">
          <el-upload
            ref="uploaderA"
            class="uploader"
            :limit="1"
            :action="actionUrl"
            :on-success="onSuccess"
            :on-error="onError"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-exceed="onExceed"
            :multiple="false"
            list-type="picture"
            :file-list="fileList"
          >
            <i class="el-icon-plus"></i>上传文件
          </el-upload>
        </el-form-item>
        <el-form-item style="width:100%" label="演练目的" prop="exercisePurpose">
          <el-input type="textarea" autosize v-model="editForm.exercisePurpose"></el-input>
        </el-form-item>
        <el-form-item style="width:100%" label="演练内容" prop="content">
          <textarea id="editorA" v-model="editForm.content"></textarea>
        </el-form-item>
        <el-form-item style="width:100%" label="评估总结" prop="summarize">
          <textarea id="editorB" v-model="editForm.summarize"></textarea>
        </el-form-item>
        <el-form-item style="width:100%" label="备注" prop="remarks">
          <el-input type="textarea" autosize v-model="editForm.remarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="confirmFun('editForm')">确定</el-button>
        <el-button @click="$emit('dialogFun')" size="small">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import City from "@/components/city.vue";
import Mapdialog from "@/components/maplnglat.vue";
import METHOD from "@/utils/methods";

@Component({
  components: { City, Mapdialog },
})
export default class DrillMgEdit extends Vue {
  //属性或参数中使用!:表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  @Prop(Boolean) dialogVisible!: Boolean;

  @Prop(Object) editForm!: {
    exerciseName: String;
    exerciseType: String;
    place: String;
    exercisePurpose: String;
    content: String;
    summarize: String;
    filePath: String;
    fileName: String;
  };
  @Prop(String) title!: String;

  @Provide() deptList: any = []; //单位

  @Provide() rules: any = {
    exerciseName: [
      { required: true, trigger: "blur", message: "该项为必填项！" },
    ],
    exerciseType: [
      { required: true, trigger: "blur", message: "该项为必填项！" },
    ],
    place: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    exercisePurpose: [
      { required: true, trigger: "blur", message: "该项为必填项！" },
    ],
    content: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    peopleNum: [{ typr: "number", trigger: "blur", message: "请填写数字！" }],
  };
  @Provide() editorA: any;
  @Provide() editorB: any;
  @Provide() fileListArr: any = [];
  @Provide() actionUrl: string = "";
  @Provide() fileList: any = [];

  dialogFun() {
    this.dialogVisible = false;
  }
  @Watch("fileListArr") changetoB(newVal: any) {
    console.log( newVal )
    if (newVal.length > 0) {
      this.editForm.filePath = newVal[0].response.data.savePath;
      this.editForm.fileName = newVal[0].response.data.originalName;
    } else {
      this.editForm.filePath = "";
      this.editForm.fileName = "";
    }
  }
  //取消事件要在父级取消是所以用到 $emit
  confirmFun(formName: string) {
    let that = this,
      params = that.editForm;
    that.editForm.content = that.editorA.getHTML();
    that.editForm.summarize = that.editorB.getHTML();
    // console.log( that.editForm )
    // return
    (that as any).$refs[formName].validate((valid: boolean) => {
      if (valid) {
        if (that.editorA.getText() == false) {
          that.$message.error("没有演练内容！");
          return;
        }
        (that as any).$axios
          .post("/exerciseInfo/addOrEditExerciseInfo", params)
          .then(() => {
            (that as any).$message({
              message: "操作成功！",
              type: "success",
            });
            (that as any).$emit("dialogFun");
            that.$emit("refreshTableData"); //刷新表格
          });
      } else {
        return false;
      }
    });
  }
  //创建编辑器
  creatEditor() {
    let that = this,
      opt = [
        "fontSize",
        "foreColor",
        "bold",
        "italic",
        "underline",
        "strikeThrough",
        "line",
        "justifyLeft",
        "justifyCenter",
        "justifyRight",
        "line",
        "table",
        "insertImage",
        "insertOrderedList",
        "insertUnorderedList",
        "indent",
      ];
    that.editorA = new ice.editor("editorA");
    that.editorA.menu = opt;
    that.editorA.height = "200px";
    that.editorA.create();
    that.editorB = new ice.editor("editorB");
    that.editorB.menu = opt;
    that.editorB.height = "200px";
    that.editorB.create();
  }
  /*
  上传
  */
  onSuccess(res: any, file: any, fileList: any, key: string) {
    this.fileListArr = fileList;
  }
  onError(err: any, file: any, fileList: any) {
    this.$message.error("上传失败!");
  }
  handleRemove(file: any, fileList: any, key: string) {
    this.fileListArr = fileList;
  }
  onExceed(file: any, fileList: any) {
    this.$message.warning("只允许上传一个文件，如需更改请先删除！");
  }
  beforeRemove(file: any, fileList: any) {
    let that = this,
      param;
    param = file.response
      ? file.response.data.savePath.replace(/\\/g, "%")
      : file.url.replace(/\\/g, "%").slice(9);
    (that as any).$axios.get(`/file/deleteFile?savePath=${param}`, function (
      res: any
    ) {
      if (res.code == 0) that.$message.success("删除成功");
      else return false;
    });
  }
  created() {
    let that = this;
    that.actionUrl = "http://" + METHOD.GlobalUrl + "/ioc/" + "file/uploadFile";
    METHOD.deptList(that, function (res: any) {
      that.deptList = res.data;
    });
    that.$nextTick(() => {
      that.creatEditor();
      if (that.editForm.filePath) {
          that.fileList.push({
            name: that.editForm.fileName,
            url: that.editForm.filePath,
          });
        }
    });
  }
}
</script>
<style lang="scss" scoped>
.el-form-item {
  width: 50%;
  display: inline-block;
}
</style>
<style lang="scss">
.w800 .el-dialog {
  min-width: 800px;
}
.el-upload {
  background: #ccd6ef;
  padding: 0 20px;
  border: 1px solid #bdb8b8;
}
</style>