<template>
  <el-dialog
    :title="!dataForm.productId ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    @close="handlereset"
    lock-scroll
    width="750px"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      label-width="100px"
    >
      <!-- <el-form-item label="所属分类" prop="poids">
        <el-cascader v-model="dataForm.poids" :options="categorys" :props="props" clearable></el-cascader>
      </el-form-item> -->
      <!-- <el-form-item label="商品类型" prop="goodsType">
        <el-select v-model="dataForm.goodsType" placeholder="请选择">
          <el-option v-for="item in goodsTypeList" :key="item.dictType" :label="item.dictValue" :value="item.dictType">
          </el-option>
        </el-select>
      </el-form-item> -->
      <!-- 关联的图书ids -->
      <el-form-item label="标题" prop="title">
        <el-input
          v-model="dataForm.title"
          placeholder="请输入讲书标题"
        ></el-input>
      </el-form-item>
      <el-form-item label="讲书章节" prop="chapter" :required="true">
        <el-input
          style="width: 150px;"
          v-model.number="dataForm.chapter"
          @input="numberChange"
          placeholder="请输入章节序号"
          type="number"
          min="1"
        ></el-input>
        <br /><span style="color: #999;">请输入大于0的整数,且为必填项</span>
      </el-form-item>
      <el-form-item label="音频">
        <el-upload
          :limit="1"
          class="el-uploadvideo "
          v-loading="loading"
          element-loading-text="正在保存到服务器，请勿离开..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
          :class="{
            uoloadSty: dataForm.showBtnDealImg,
            disUoloadSty: dataForm.noneBtnImg
          }"
          :action="baseUrl + '/oss/fileoss'"
          :file-list="voiceList"
          :on-success="videohandlePicSuccess"
          accept=".mp3"
          :on-remove="videohandleRemove"
          :show-file-list="true"
          :on-progress="uploadVideoProcess"
        >
          <!-- <i class="el-icon-plus"></i>  -->
          <el-button slot="trigger" size="small" type="primary"
            >上传文件</el-button
          >
        </el-upload>
        <el-progress
          v-show="progressFlag"
          :percentage="loadProgress"
        ></el-progress>
        <div>
          <audio
            id="resource"
            :src="dataForm.voices"
            controls
            v-show="true"
          ></audio>
        </div>
      </el-form-item>

      <el-form-item label="轮播图" prop="images">
        <el-upload
          :limit="3"
          class="el-uploadfeng"
          :action="baseUrl + '/oss/fileoss'"
          list-type="picture-card"         
          :file-list="swiperfileList"
          :on-success="bannerHandlePicSuccess"
          accept=".jpeg,.jpg,.gif,.png"
          :on-remove="bannerHandleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <!-- <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
            <img width="100%" :src="dataForm.productImageList" alt="">
          </el-dialog> -->
        <span>支持图片类型：.jpeg,.jpg,.gif,.png， 最多上传3张图片</span>
      </el-form-item>

      <el-form-item label="内容" prop="content">
        <quill-editor
          v-model="dataForm.content"
          ref="myQuillEditor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)"
          class="shangpin_editor"
        >
        </quill-editor>
      </el-form-item>
      <!-- <el-form-item label="排序" prop="sort">
        <el-input v-model="dataForm.sort" placeholder="排序"></el-input>
      </el-form-item> -->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handlereset">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" :disabled="loading"
        >确定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import global from "../../common/common.vue"; //引入共用组间

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  data() {
    // 自定义校验规则
    var checkMoney = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("章节序号不能为空,且必须大于0"));
      }
      // setTimeout(() => {
      if (!Number.isInteger(value)) {
        callback(new Error("请输入数字值"));
      } else {
        if (value <= 0) {
          callback(new Error("章节序号必须要大于0"));
        } else {
          callback();
        }
      }
      // }, 100);
    };
    return {
      loading: false,
      progressFlag: false,
      loadProgress: 0,
      baseUrl: global.baseUrl,
      visible: false,
      categorys: [],
      fileList: [], // 封面图
      swiperfileList: [],
      dialogVisible: false,
      props: {
        value: "catId",
        label: "name",
        children: "children",
        checkStrictly: true
      },
      dataForm: {
        productId: 0,
        talkid: null,
        limitCountImg: 1, // 图片数量
        title: "",
        productPid: "",
        voices: "",
        chapter: null,
        content: "",
        images:[]
      },
      voiceList: [],
      swiperfileList:[],
      dataRule: {
        title: [
          {
            required: true,
            message: "书评标题不能为空",
            trigger: "blur"
          }
        ],

        chapter: [
          {
            validator: checkMoney,
            trigger: "blur"
          }
        ]
      },

      // 富文本编辑器配置
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"], // 引用  代码块
            [
              {
                header: 1
              },
              {
                header: 2
              }
            ], // 1、2 级标题
            [
              {
                list: "ordered"
              },
              {
                list: "bullet"
              }
            ], // 有序、无序列表
            [
              {
                script: "sub"
              },
              {
                script: "super"
              }
            ], // 上标/下标
            [
              {
                indent: "-1"
              },
              {
                indent: "+1"
              }
            ], // 缩进
            [
              {
                direction: "rtl"
              }
            ], // 文本方向
            [
              {
                size: [
                  "12",
                  "14",
                  "16",
                  "18",
                  "20",
                  "22",
                  "24",
                  "28",
                  "32",
                  "36"
                ]
              }
            ], // 字体大小
            [
              {
                header: [1, 2, 3, 4, 5, 6]
              }
            ], // 标题
            [
              {
                color: []
              },
              {
                background: []
              }
            ], // 字体颜色、字体背景颜色
            // [{ font: ['songti'] }], // 字体种类
            [
              {
                align: []
              }
            ], // 对齐方式
            ["clean"], // 清除文本格式
            ["image", "video"] // 链接、图片、视频
          ]
        },
        placeholder: "请输入正文"
      }
    };
  },
  created() {},
  methods: {
    init(id, bookid) {
      this.productPid = bookid;
      this.dataForm.talkid = id || null;
      console.log(id, this.productPid, "this.productPid");
      this.dataForm.productId = bookid || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.talkid) {
          this.$http({
            url: this.$http.adornUrl(`/book/teach/getTeachDetail`),
            method: "get",
            params: this.$http.adornParams({
              teachId: id
            })
          }).then(({ data }) => {
            // console.log(data, 666);
            if (data && data.code === 0) {
              this.dataForm.title = data.bookTeach.title;
              this.dataForm.voices = data.bookTeach.voices;
              this.dataForm.content = data.bookTeach.content;
              this.dataForm.chapter = data.bookTeach.chapter;
              if(data.bookTeach.images != ''){
                let arr = data.bookTeach.images.split(';');
                // console.log('转换成的数组',arr)
                arr.forEach( (item,index) => {
                  this.swiperfileList.push({
                    name: index,
                    url:item
                  })
                })                
              }
              // console.log('初始化图片', this.swiperfileList)
              if (this.dataForm.voices != "") {
                this.voiceList.push({
                  name: data.bookTeach.title,
                  url: data.bookTeach.voices
                });
              }
              // else {
              // console.log(data.bookBuyConfig.productImageList)
              // let arr = []
              //  let arr1 = []

              //   arr = data.bookBuyConfig.productImageList.split(',');
              //   console.log(arr)
              //   arr.forEach((item, index) => {
              //     arr1.push({
              //       name: index,
              //       url: item
              //     })
              //   });
              //   this.swiperfileList = arr1
              // }
            }
          });
        } else {
          console.log("为新增数据");
        }
      });
    },
    bannerHandlePicSuccess(res, file) {
      // 轮播图上传成功
      if (res.msg == "success") {
        this.swiperfileList.push({
          name: file.name,
          url: res.url
        });
        // this.dataForm.images.push(res.url)
        // console.log(this.swiperfileList)
        this.$message.success("上传成功");
      } else {
        this.$message.error("上传失败");
      }
    },
    bannerHandleRemove(file, fileList) {
        // 轮播图删除操作
        this.swiperfileList = fileList
       
      },      
    numberChange() {
      console.log("改变了input值");
    },
    dealImgChange(file, fileList) {
      this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
    },
    // 表单提交
    dataFormSubmit() {
      // console.log('userid', this.$store.state.user.id)
      this.$refs["dataForm"].validate(valid => {
        if (valid && this.dataForm.chapter > 0) { 
          var imageslist = []
          let arr = []
          // console.log('this.swiperfileList',this.swiperfileList)
          if(this.swiperfileList.length > 0){
            arr = this.swiperfileList.map( item => {
              return item.url
            })
          }
          imageslist = arr.join(";");
          console.log(imageslist,'imageslist')         
          this.$http({
            url: this.$http.adornUrl(
              `/book/teach/${
                !this.dataForm.talkid ? "addTeach1" : "updateTeach"
              }`
            ),
            method: "post",
            data: this.$http.adornData({
              bookId: parseInt(this.productPid),
              chapter: this.dataForm.chapter,
              title: this.dataForm.title,
              voices: this.dataForm.voices,
              content: this.dataForm.content,
              images:imageslist,  // 轮播图
              // 'video': "https://ehh-private-01.oss-cn-beijing.aliyuncs.com…3/08/28/91fd5a4c35c34763abca5d2929637164movie.mp4",
              teachId: this.dataForm.talkid || undefined
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.dataForm.productDetails = "";
                  this.dataForm.video = "";
                  this.voiceList = [];
                  this.swiperfileList = []
                  this.dataForm.images = []
                  this.$refs["dataForm"].resetFields();
                  // this.$refs['dataForm'].reset()
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        } else {
          this.$message.error("章节序号必须大于0!");
        }
      });
    },
    changeTime(e) {
      console.log(e);
    },   
    // 字符串图片地址
    getStringImgUrl() {
      let arr = this.swiperfileList.map(item => item.url);
      if (arr.length <= 0) {
        return null;
      } else {
        return arr.toString();
      }
    },
    handlePicSuccess(res, file) {
      // console.log(res,'res')
      if (res.msg == "success") {
        // this.dataForm.productImages = res.url;
        this.fileList.push({
          name: file.name,
          url: res.url
        });
        this.dataForm.voices = res.url;
        console.log(this.dataForm.voices, "voices");
        this.$message.success("上传成功");
      } else {
        this.$message.error("上传失败");
      }
    },
    uploadVideoProcess(event, file, fileList) {
      this.progressFlag = true; // 显示进度条
      this.loadProgress = parseInt(event.percent); // 动态获取文件上传进度
      console.log("this.loadProgress", this.loadProgress);
      if (this.loadProgress >= 100) {
        this.loadProgress = 99;
        this.loading = true;
        // setTimeout( () => {this.progressFlag = false}, 1000) // 一秒后关闭进度条
      }
    },

    videohandlePicSuccess(res, file) {
      console.log(res, "res");
      if (res.msg == "success") {
        // this.dataForm.productImages = res.url;
        this.voiceList.push({
          name: file.name,
          url: res.url
        });
        this.dataForm.voices = res.url;
        // console.log(this.dataForm.productImages,'productImages')
        this.loadProgress = 100;
        setTimeout(() => {
          this.progressFlag = false;
          this.loading = false;
          this.$message.success("上传成功");
        }, 1000); // 一秒后关闭进度条
      } else {
        this.$message.error("上传失败");
      }
    },

    handleRemove(file, fileList) {
      this.dataForm.productImages = "";
      this.fileList = fileList;
      this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
    },
    videohandleRemove(file, fileList) {
      this.dataForm.voices = "";
      this.voiceList = fileList;
    },
    handlereset() {
      (this.fileList = []), (this.voiceList = []); // 清空视频列表
      this.dataForm.voices = "";
      this.visible = false;
      this.swiperfileList = []
      this.dataForm.images = []     
      this.$refs["dataForm"].resetFields();
      this.dataForm.productDetails = "";
      this.progressFlag = false;
      this.loading = false;
      // this.$refs['dataForm'].reset()
    },
    // 失去焦点事件
    onEditorBlur(quill) {
      console.log("editor blur!", quill);
    },
    // 获得焦点事件
    onEditorFocus(quill) {
      //console.log('editor focus!', quill)
    },
    // 准备富文本编辑器
    onEditorReady(quill) {
      // console.log('editor ready!', quill)
    }
  },
  components: {
    quillEditor
  },
  mounted() {
    this.$bus.$on("haveBookIds", data => {
      // console.log('haveBookIds', data)
      data.bookIds.length > 0
        ? (this.dataForm.Books = data.bookIds)
        : (this.dataForm.Books = []);
    });
  },

  watch: {
    visible: {
      handler(val, oldVal) {
        // this.getGoodsTypeList()
      },
      deep: true
    }
  }
};
</script>

<style lang="less">
/deep/ .el-uploadvideo .el-upload-list li {
  height: auto !important;
}
// .disUoloadSty {
//   .el-upload--picture-card {
//     display: none;
//     /* 上传按钮隐藏 */
//   }
// }

// .el-form-item {
//   /deep/ .el-form-item__label {
//     font-size: 12px;
//   }
// }
.el-uploadvideo {
  .el-progress {
    display: none !important;
  }
}
.el-uploadfeng {
  .el-upload-list__item {
    width: 120px;
    height: 120px;
  }

  .el-upload--picture-card {
    width: 120px;
    height: 120px;
    line-height: 120px;
  }
}

.shangpin_editor .ql-editor {
  height: 150px;
}
</style>
