<template>
  <!-- 编辑页面 -->
  <div id="app">
    <div class="cancel-body">
      <div class="cancel" @click="showPanel()">
        <p @click="setPageApp(1)" v-bind:class="{ 'you' : flag, 'you2': !flag}">{{con}}</p>
      </div>
    </div>
    
     <input class="fileBtn" id="file" type="file" accept="image/*"  @click="preview(this)" style="">
      
    <div v-show="panelShow">
      <div class="spacing"></div>
      <!-- mockdown部分 -->
      <div class="step">
        <div class="Navigation">
          <div class="writtenWords-img">
            <img class="img" src="./imge/img/T.png" width="100%" height="100%" />
            <span class="writtenWordsTwo">文字</span>
          </div>
          <div class="writtenWords-imgs">
            <img class="img" src="./imge/img/B.png" width="100%" height="100%" />
            <span
              class="writtenWordsTwo"
              onclick="document.getElementById('textarea').style.fontWeight = 'bold'"
              style="margin-right:20px;"
            >加粗</span>
          </div>

          <div class="lc">
            <img
              class="img"
              src="./imge/img/picture.png"
              width="100%"
              height="100%"
              style="margin-top:4px;"
            />
          </div>
          <div class="writtenWords-imgss">
            <img class="img" src="./imge/img/file.png" width="100%" height="100%" />
            <span
              class="writtenWordsTwos"
              onclick="document.getElementById('textarea').style.fontWeight = 'bold'"
              style="margin-right:20px;"
            >文件</span>
          </div>
        </div>
        <el-input type="textarea" id="textarea" :rows="12" placeholder="请输入内容" v-model="textarea"></el-input>
      </div>

      <div class="writtenWords-img">
        <!-- <mavon-editor
          ref="md"
          :toolbars="markdownOption"
          v-model="handbook"
          style="position: relative;"
        ></mavon-editor>-->
         
        
      </div>
      <!-- 底部 -->
      <div class="footer">
        <div class="preview" @click="set()">预览</div>
        <div class="Submission" @click="submit()">提交</div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import Picture from "./components/Picture";
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";

//调用安卓
window["selectFileMethds"] = id => {
  Platform.selectFile(id);
};

//安卓调用
window["submitFile"] = json => {
  alert(json.path);
  //不需要Platform.submitFile();
  alert("收到文件");
  console.log("json.path");
};

export default {
  data() {
    return {
      fileList: [],
      panelShow: true,
      con: "取消",
      flag: false,
      textarea: "",
      formData: {
        content: "this.textarea",
        treeCode: "this.formData.treeCode",
        id: "this.formData.id",
        name: "this.formData.name"
      },
      markdownOption: {
        bold: true,
        link: true,
        imagelink: true,
        subfield: true
      },
      handbook: ""
    };
  },
  components: {
    Picture
  },

  created() {
    // this.setPageApp();
    // this.getData();
  },

  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    // submitContent(String content) 编辑内容、
    setPageApp: function(markdown, html) {
      var markdown = this.handbook;
      var a = "功能文档";
      var url = `http://10.192.33.108:8086/rest/app/selectByTreeCodeAndName?treeCode=df&name=${a}`;
      axios.get(url).then(res => {
        console.log((this.formData = res.data));
        // this.formData.content = this.textarea;
        // this.formData.name = res.data.data.name;
        // this.formData.id = res.data.data.id;
        // this.formData.treeCode = res.data.data.treeCode;
      }),
        function(err) {
          console.log(err);
        };
    },

  //上传图片
    //      preview(obj){
    //     var file =  document.getElementById('file').value;//获取文件
    //     var index = file.lastIndexOf('.'); //获取最后一位小数点
    //     var extension =  file.substr(index +  1);
    //     var arr = ['jpeg','PNG','jpg','gif'];
    //     if ((arr,extension)) {
    //         var img = document.getElementById("previewimg");
    //         img.src = window.URL.createObjectURL(obj.files[0]);
    //         var file = obj.files[0];
    //         UpladFile(file);
    //     } else {
    //         alert('请选择正确的图片格式');
    //         return false;
    //     }
    // },
 
    //上传文件方法
    //        UpladFile(fileObj) {
    //     var form = new FormData(); // FormData 对象
    //         form.append("file", fileObj); // 文件对象
    //         form.append('_token','{{ csrf_token() }}');
    //         xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
    //         xhr.open("post", "http://127.0.0.1/b/1.php", true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
    //         xhr.send(form); //开始上传，发送form数据
    //         xhr.onreadystatechange = function () {
    //            var data = xhr.responseText;
    //            console.log(data);
 
    //         }
    // },
 
  
    //  isInArray(arr,value){
    //     for(var i = 0; i < arr.length; i++){
    //         if(value === arr[i]){
    //             return true;
    //         }
    //     }
    //     return false;
    // },

    submit(markdown, html) {
      var markdown = this.handbook;
      var url = `http://10.192.33.108:8086/rest/app/updateKnowledge`;
      axios.post(url, this.formData).then(res => {
        this.content = res.data;
        console.log(this.content);
        console.log(this.textarea);
        // console.log("这里是id" + id);
        // console.log("markdown内容: " + markdown);
        // console.log("html内容:" + markdown);
      }),
        function(err) {
          console.log(err);
        };
    },

    getData() {
       alert("val")
    },

    showPanel() {
      this.panelShow = !this.panelShow;
      if (this.panelShow == true) {
        this.panelShow = true;
      } else if (this.panelShow == false) {
        this.panelShow = false;
      }
      this.flag = !this.flag;
      if (this.flag == true) {
        this.con = "编辑";
      } else if (this.flag == false) {
        this.con = "取消";
      }
    },

    upload() {
      selectFileMethds("0");
    }
  },

  //安卓调用
  mounted() {
    window["showContent"] = val => {
      this.getData(val);
    };

    window["selectFile"] = file => {
      this.getData(1);
    };
  }
};
</script>

<style>
.file {
  position: relative;
  background: #ecf1ff;
  overflow: hidden;
  color: rgb(65, 81, 129);
  text-decoration: none;
  text-indent: 0;
  margin-top: -10px !important;
  font-size: 12px !important;
}
.file input {
  position: absolute;
  font-size: 20px !important;
  right: 0;
  top: 0;
  opacity: 0;
}

.el-button.el-button--primary.el-button--small {
  margin-top: 3px !important;
}

.el-button.el-button--primary.el-button--small {
  padding: 5px 0px !important;
}

.el-button--primary {
  background-color: #ecf1ff !important;
  border-color: #ecf1ff !important;
  color: #405189 !important;
}

.el-upload-list--picture .el-upload-list__item {
  height: 30px !important;
  margin-top: 20px !important;
}

.null {
  display: flex;
  background-color: #ecf1ff;
  width: 20%;
  margin-left: 170px;
  margin-top: -30px;
}

.input {
  height: 180px;
  width: 100%;
}

.auto-textarea-wrapper .auto-textarea-input {
  color: #d2d2d2;
}

.spacing {
  height: 15px;
}
.v-note-wrapper .v-note-op .v-right-item .op-icon {
  color: #405189 !important;
  margin-left: 20px !important;
}

.v-note-wrapper .v-note-op.shadow {
  border: none;
}

.v-note-wrapper .v-note-op .v-left-item {
  background-color: #ecf1ff;
}

.v-note-wrapper .v-note-op .v-right-item {
  background-color: #ecf1ff;
}

.activated {
  height: 100px;
  widows: 100px;
  background-color: red;
}

body {
  margin: 0;
  padding: 0;
}

.cancel-body {
  height: 29px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.cancel {
  height: 29px;
  width: 55px;
  background-color: #405189;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  border-radius: 3px 3px 3px 3px;
  font-size: 14px;
}

.Navigation {
  height: 30px;
  background-color: #ecf1ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.writtenWords-img {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 5px;
  margin-right: 30px;
}

.writtenWords-imgs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 30px;
}

.writtenWords-imgss {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.img {
  height: 21px;
  width: 21px;
}

.writtenWords {
  font-size: 10px;
  color: #405189;
}

.writtenWordsTwo {
  font-size: 10px;
  color: #405189;
  margin-left: -4px;
}

.writtenWordsTwos {
  font-size: 10px;
  color: #405189;
}

.step {
  height: 290px;
  border-left: 1px solid #999999;
  border-right: 1px solid #999999;
  border-bottom: 1px solid #999999;
  margin-left: 15px;
  margin-right: 15px;
  overflow-y: scroll;
}

.inspection-steps {
  height: 10px;
  font-size: 12px;
  color: #333333;
  margin-top: 20px;
  margin-top: 11px;
  padding-left: 5px;
}

.Check-preparation {
  font-size: 13px;
  color: #333333;
  margin-top: 13px;
  height: 80px;
  margin-left: 25px;
  line-height: 1.5;
}

.Check-preparation-three {
  font-size: 13px;
  color: #333333;
  margin-top: 13px;
  height: 80px;
  margin-left: 25px;
  line-height: 1.5;
  margin-top: 50px;
}

.content {
  color: #999999;
  font-size: 13px;
  line-height: 1.5;
}

.content-three {
  color: #999999;
  font-size: 13px;
  line-height: 1.5;
}

.testing {
  font-size: 13px;
  color: #333333;
  margin-top: 5px;
  height: 80px;
  line-height: 1.5;
}

.footer {
  height: 41px;
  margin-right: 15px;
  margin-left: 15px;
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.preview {
  height: 41px;
  width: 157px;
  color: #405189;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #405189;
  border-radius: 3px 3px 3px 3px;
}

.Submission {
  height: 41px;
  width: 157px;
  color: white;
  background-color: #405189;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px 3px 3px 3px;
}
</style>