<template>
  <div class="edit-entry-wrap">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird"></bread-crumb>
    <div class="component-content screenSet" id="screenSet">
      <div class="header-title">{{ title }}</div>
      <div class="button-group">
        <el-button size="small" @click="complete(0)">暂存</el-button>
        <el-button type="primary" size="small" @click="complete(1)">完成</el-button>
      </div>
      <el-form
        ref="formData"
        :model="formData"
        :rules="rules"
        label-width="150px"
        class="basic-form"
      >
        <el-form-item label="入口名称：" prop="entryName">
          <el-col :span="13">
            <el-input
              size="small"
              v-model="formData.entryName"
              placeholder="请输入名称"
              style="width:83%;"
              :disabled="peopleLevel == 'L3'"
            ></el-input>
            <span class="word-num">{{(formData.entryName).replace(/\s+/g,"").length}}/24</span>
          </el-col>
        </el-form-item>
        <el-form-item label="发起机构：" prop="organizationName">
          <el-col :span="13">
            <el-input
              size="small"
              v-model="formData.organizationName"
              placeholder="请输入发起机构名称"
              style="width:83%;"
              :disabled="peopleLevel == 'L3'"
              @input="changeOrganizationName"
              @blur="blurName"
              @focus="focusName"
            ></el-input>
            <span class="word-num">{{(formData.organizationName).replace(/\s+/g,"").length}}/12</span>
          </el-col>
          <el-popover
            class="popover-content"
            placement="bottom"
            :content="organizationContent"
            v-model="visibleName"
            @click="checkDefault"
          >
            <p @click="checkDefault">我的机构： {{ organizationContent }}</p>
          </el-popover>
        </el-form-item>
        <el-form-item label="项目时间：" required>
          <el-col :span="5">
            <el-form-item prop="projectBegintime">
              <el-date-picker
                v-model="formData.projectBegintime"
                size="small"
                type="datetime"
                placeholder="请选择开始时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions0"
                style="width: 100%;"
                :disabled="peopleLevel == 'L3'"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1">~</el-col>
          <el-col :span="5">
            <el-form-item label prop="projectEndtime">
              <el-date-picker
                v-model="formData.projectEndtime"
                size="small"
                type="datetime"
                placeholder="请选择结束时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions1"
                default-time="23:59:59"
                style="width: 100%;"
                :disabled="peopleLevel == 'L3'"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="项目简介：" prop="projectIntro">
          <el-col :span="13">
            <el-input
              size="small"
              type="textarea"
              :autosize="{ minRows: 5}"
              placeholder="请输入项目简介"
              v-model="formData.projectIntro"
              style="width:83%;"
              :disabled="peopleLevel == 'L3'"
            ></el-input>
            <span class="word-num">{{(formData.projectIntro).replace(/\s+/g,"").length}}/200</span>
          </el-col>
        </el-form-item>
        <div class="basic-item-icon">
          <span class="require">*</span>
          <el-form-item label="列表图片：">
            <el-upload
              v-model="formData.attachmentUrl1"
              class="bg-uploader"
              action="#"
              :show-file-list="false"
              :before-upload="beforeUploadListPic"
              :disabled="peopleLevel == 'L3'"
            >
              <img
                v-if="formData.attachmentUrl1"
                @mouseover.stop="imgMouseOver=true && peopleLevel != 'L3'"
                :src="formData.attachmentUrl1"
                class="bg-img"
              />
              <img
                v-if="!formData.attachmentUrl1"
                class="bg-img"
                src="../../assets/image/small.png"
              />
              <div
                class="img-delete"
                v-show="imgMouseOver"
                @click.stop="deleteImg(1)"
                @mouseout.stop="imgMouseOver=false"
              >
                <i class="el-icon-delete"></i>
              </div>
              <div class="limit-text">
                <p>尺寸:230*172</p>
                <p>限制大小: 500Kb</p>
                <p>支持.jpg,.png格式</p>
              </div>
            </el-upload>
          </el-form-item>
          <p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
        </div>
        <el-form-item label="封面类型：">
          <el-radio-group
            size="small"
            v-model="formData.type"
            @change="changeCover"
            :disabled="peopleLevel == 'L3'"
          >
            <el-radio :label="1">图片</el-radio>
            <el-radio :label="2">视频</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="basic-item-icon">
          <span class="require">*</span>
          <el-form-item label="封面文件：">
            <el-upload
              v-model="formData.attachmentUrl2"
              class="bg-uploader"
              action="#"
              :show-file-list="false"
              :before-upload="beforeUploadCoverPic"
              :disabled="peopleLevel == 'L3'"
            >
              <img
                v-if="formData.type == 1 && formData.attachmentUrl2"
                :src="formData.attachmentUrl2"
                @mouseover.stop="imgMouseOver2=true  && peopleLevel != 'L3'"
                class="bg-img"
              />
              <video
                v-if="formData.type == 2 && formData.attachmentUrl2"
                width="100"
                controls
                class="bg-video"
                @mouseover.stop="imgMouseOver2=true  && peopleLevel != 'L3'"
              >
                <source :src="formData.attachmentUrl2" type="video/mp4" />浏览器不支持mp4
              </video>
              <img
                v-if="!formData.attachmentUrl2"
                class="bg-img"
                src="../../assets/image/small.png"
              />
              <div
                class="img-delete"
                v-show="imgMouseOver2"
                @click.stop="deleteImg(2)"
                @mouseout.stop="imgMouseOver2=false"
              >
                <i class="el-icon-delete"></i>
              </div>
              <div v-show="formData.type == 1" class="limit-text">
                <p>尺寸:750*420</p>
                <p>限制大小: 2.0 Mb</p>
                <p>支持.jpg,.png格式</p>
              </div>
              <div v-show="formData.type == 2" class="limit-text">
                <p></p>
                <p>限制大小: 500 Mb</p>
                <p>支持.mp4</p>
              </div>
            </el-upload>
          </el-form-item>
          <p class="upload-message" v-if="uploadImgMessage2">请选择封面</p>
        </div>
        <el-form-item label="关联项目：">
          <el-col :span="10">
            <!-- :disabled="projectStatus == 3 || projectStatus == 4 || projectStatus == 5  || projectStatus == 6" -->
            <el-select
              v-model="formData.project"
              multiple
              collapse-tags
              style="width: 350px"
              placeholder="关联项目"
              @change="changeValue"
            >
              <el-option
                v-for="item in optionsProject"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="已选择：" class="check-project">
          <el-col :span="10" class="tags-list">
            <el-tag
              class="tags-project"
              v-for="tag in tagsProject"
              v-bind:class="{'tags-project-online': tag.disabled === true }"
              :key="tag.value"
              closable
              :type="tag.type"
              style="margin-left: 10px;"
              @close="handleCloseProject(tag)"
            >{{tag.name}}</el-tag>
          </el-col>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import { doUpload, getFilePath } from "../../utils/qiniu-util";
import { mapGetters } from "vuex";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import * as operationData from "../../utils/operation";
import Sortable from "sortablejs";
let vm = null;
export default {
  components: {
    BreadCrumb
  },
  data() {
    let checkProjectStr = (rule, value, callback) => {
      if (value.indexOf("\\") != -1) {
        callback(new Error("请勿输入字符“ \\ ”"));
      } else if (value.indexOf(".") != -1) {
        callback(new Error("请勿输入字符“ . ”"));
      } else {
        callback();
      }
    };
    return {
      curmbFirst: "教培项目",
      curmbSecond: "项目组件",
      curmbThird: "新建入口",
      title: "",
      projectId: null,
      peopleLevel: null,
      uploadImgMessage: false,
      uploadImgMessage2: false,
      imgMouseOver: false,
      imgMouseOver2: false,
      organizationContent: "云鹊医",
      formData: {
        entryName: "",
        projectBegintime: "",
        projectEndtime: "",
        projectIntro: "",
        type: 1,
        attachmentUrl1: "",
        attachmentUrl2: "",
        organizationName: "",
        project: []
      },
      optionsProject: [],
      tagsProject: [],
      visibleName: false,
      pickerOptions0: {
        disabledDate: time => {
          if (
            this.formData.projectEndtime != "" &&
            this.formData.projectEndtime != null
          ) {
            return (
              time.getTime() > new Date(this.formData.projectEndtime).getTime()
            );
          }
        }
      },
      pickerOptions1: {
        disabledDate: time => {
          return (
            time.getTime() < new Date(this.formData.projectBegintime).getTime()
          ); //减去一天的时间代表可以选择同一天;
        }
      },
      rules: {
        entryName: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
          {
            min: 2,
            max: 24,
            message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
            trigger: "blur"
          },
          { validator: checkProjectStr, trigger: "blur" }
        ],
        organizationName: [
          { required: true, message: "请填写发起机构名称", trigger: "blur" },
          {
            min: 1,
            max: 12,
            message: "超过12个最大字数限制，请精简字数或使用简称",
            trigger: "blur"
          }
        ],
        projectBegintime: [
          {
            required: true,
            message: "请选择时间",
            trigger: "change"
          }
        ],
        projectEndtime: [
          {
            required: true,
            message: "请选择时间",
            trigger: "change"
          }
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change"
          }
        ],
        projectIntro: [
          { required: true, message: "请填写项目简介", trigger: "blur" },
          { min: 1, max: 200, message: "超出可输入的最大长度", trigger: "blur" }
        ],
        attachmentUrl1: [
          { required: true, message: "请选择列表图片", trigger: "blur" }
        ],
        attachmentUrl2: [
          { required: true, message: "请选择封面", trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    ...mapGetters(["_token"])
  },
  created() {
    vm = this;
    vm.projectId = vm.getUrlSearch(window.location.href, "projectId");
    vm.peopleLevel = vm.getUrlSearch(window.location.href, "level");
    vm.initTitle();
    vm.initOption();
  },
  mounted: function() {
    commonUtil.resizeHeight();
  },
  methods: {
    initTitle() {
      if (vm.projectId == null) {
        vm.title = "新建入口";
        vm.curmbThird = "新建入口";
      } else {
        vm.title = "编辑入口";
        vm.curmbThird = "编辑入口";
      }
    },
    initOption() {
      vm.optionsProject = [
        {
          value: 1,
          label: "项目A"
        },
        {
          value: 2,
          label: "项目B"
        },
        {
          value: 3,
          label: "项目C"
        }
      ];
    },
    submitForm(formName) {
      let flag = null;
      this.$refs[formName].validate(valid => {
        if (valid) {
          flag = true;
        } else {
          console.log("error submit!!");
          flag = false;
        }
      });
      return flag;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //  删除图片
    deleteImg(type) {
      if (type == 1) {
        vm.formData.attachmentUrl1 = "";
        vm.imgMouseOver = false;
      } else {
        vm.formData.attachmentUrl2 = "";
        vm.imgMouseOver2 = false;
      }
    },
    changeCover(radio) {
      this.formData.attachmentUrl2 = "";
    },
    beforeUploadListPic(file) {
      let fileLimit = {
        width: 230,
        height: 172,
        size: 0.5,
        sizeText: "500K",
        key: "attachmentUrl1",
        more: "attachmentMore1",
        show: "uploadImgMessage"
      };
      this.beforeAvatarUpload(file, fileLimit);
    },
    beforeUploadCoverPic(file) {
      let fileLimit = {
        width: 750,
        height: 420,
        size: 2,
        sizeText: "2.0M",
        key: "attachmentUrl2",
        more: "attachmentMore2",
        show: "uploadImgMessage2"
      };
      if (this.formData.type == 1) {
        this.beforeAvatarUpload(file, fileLimit);
      } else {
        this.beforeUploadMp4(file);
      }
    },
    beforeAvatarUpload(file, fileLimit) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
      if (!isJPG && !isPNG) {
        this.$message.error("图片不符合规范，请根据规范上传图片");
        return;
      }
      if (!isLt2M) {
        this.$message.error("图片不符合规范，请根据规范上传图片 ");
        return;
      }
      let _img = new FileReader();
      _img.readAsDataURL(file);
      _img.onload = function(theFile) {
        let image = new Image();
        image.src = theFile.target.result;
        image.onload = function() {
          let _this = this;
          if (
            _this.width != fileLimit.width ||
            _this.height != fileLimit.height
          ) {
            vm.$message.error("图片不符合规范，请根据规范上传图片");
          } else {
            openLoading(vm);
            doUpload(
              vm,
              file,
              getFilePath(file, null),
              "preview4",
              "progress1",
              1
            ).then(function(path) {
              closeLoading(vm);
              console.log(path);
              if (fileLimit.show == "uploadImgMessage") {
                vm.uploadImgMessage = false;
              } else if (fileLimit.show == "uploadImgMessage2") {
                vm.uploadImgMessage2 = false;
              }
              vm.formData[fileLimit.key] = path.fullPath;
              vm.formData[fileLimit.more] = {
                attachmentName: path.name,
                attachmentExt: path.ext,
                attachmentSize: path.size
              };
              vm.$message.success("上传成功");
            });
          }
        };
      };
      return isJPG && isLt2M;
    },
    beforeUploadMp4(file) {
      console.log(file);
      const isMP4 = file.type === "video/mp4";
      const isLt = file.size / 1024 / 1024 < 500;
      if (!isLt) {
        this.$message.error("视频不符合规范，请根据规范上传视频");
        return;
      }
      if (!isMP4) {
        this.$message.error("视频不符合规范，请根据规范上传视频");
      } else {
        openLoading(vm);
        doUpload(
          vm,
          file,
          getFilePath(file, null),
          "preview4",
          "progress1",
          ""
        ).then(function(path) {
          closeLoading(vm);
          console.log(path);
          vm.uploadImgMessage2 = false;
          vm.formData.attachmentUrl2 = path.fullPath;
          vm.$message.success("上传成功");
        });
      }
    },
    checkDefault() {
      vm.formData.organizationName = vm.organizationContent;
      vm.visibleName = false;
    },
    blurName() {
      vm.visibleName = false;
      setTimeout(function() {
        // console.log('失去焦点');
        vm.submitForm("formData");
      }, 200);
    },
    focusName() {
      let textLength = vm.formData.organizationName.length;
      if (textLength == 0) {
        vm.visibleName = true;
      } else {
        vm.visibleName = false;
      }
    },
    changeOrganizationName() {
      let textLength = vm.formData.organizationName.length;
      console.log("文字长度", textLength);
      if (textLength == 0) {
        vm.visibleName = true;
      } else {
        vm.visibleName = false;
      }
    },
    tagDrop() {
      this.$nextTick(function() {
        if(vm.tagsProject.length > 0) {
          const ele = document.querySelector('.check-project .el-col-10');
          // console.log('ele',ele);
          Sortable.create(ele, {
            onEnd({ newIndex, oldIndex }) {
              const currRow = vm.tagsProject.splice(oldIndex, 1)[0]
              vm.tagsProject.splice(newIndex, 0, currRow)
            }
          })
        }
      });
    },
    changeValue(value) {
      this.tagsProject = [];
      let len = 0;
      for (let i = 0; i < value.length; i++) {
        for (let j = 0; j < this.optionsProject.length; j++) {
          if (value[i] == this.optionsProject[j].value) {
            this.tagsProject[len] = {};
            this.tagsProject[len] = this.optionsProject[j];
            this.tagsProject[len].value = this.optionsProject[j].value;
            this.tagsProject[len].name = this.optionsProject[j].label;
            len++;
          }
        }
      }
      vm.tagDrop();
    },
    handleCloseProject(tag) {
      if (tag.disabled == true) {
        return;
      }
      vm.tagsProject.splice(vm.tagsProject.indexOf(tag), 1);
      vm.formData.project = [];
      for (let j = 0; j < vm.tagsProject.length; j++) {
        vm.formData.project[j] = vm.tagsProject[j].value;
      }
    },
    complete(type) {
      console.log("type:" + type);
      if (type == 1) {
        //完成
      } else {
        //暂存
      }
    }
  }
};
</script>
<style lang="scss">
.edit-entry-wrap {
  .component-content {
    position: relative;
    padding: 10px;
    background: #fff;
    .header-title {
      padding: 10px 12px;
      font-size: 12px;
      color: #449284;
      border-bottom: 1px solid #efefef;
    }
    .button-group {
      position: absolute;
      margin-top: 10px;
      right: 5%;
      z-index: 999;
    }
    .basic-form {
      position: relative;
      margin-top: 10px;
      .basic-item-icon {
        position: relative;
        .require {
          position: absolute;
          left: 67px;
          top: 11px;
          color: #f56c6c;
        }
        .upload-message {
          position: absolute;
          left: 160px;
          top: 105px;
          font-size: 12px;
          color: #f56c6c;
        }
        .img-delete {
          position: absolute;
          left: 0px;
          top: 0px;
          width: 84px;
          height: 100px;
          background: #000;
          opacity: 0.7;
          z-index: 999;
          i {
            color: #fff;
            margin-top: 39px;
            margin-left: 0px;
          }
        }
      }
      .word-num {
        font-size: 12px;
        color: #999;
        padding-top: 5px;
      }
      .line {
        margin-left: 10px;
        width: 20px;
      }
      .bg-uploader {
        img {
          float: left;
        }
        .bg-img {
          width: 84px;
          height: 100px;
        }
        .bg-video {
          float: left;
          width: 84px;
          height: 100px;
        }
        .limit-text {
          float: left;
          margin-left: 10px;
          margin-top: -10px;
          p {
            font-size: 12px;
            color: #999;
          }
        }
      }
      .el-popover--plain {
        padding: 18px 20px;
        top: 40px;
      }
      .check-project {
        top: 95%;
        right: 5%;
        position: absolute;
        z-index: 999;
        .tags-list {
          border: 1px #e8e8e8 solid;
          height: 350px;
          min-width: 280px;
          overflow-y: scroll;
          .el-tag {
            margin-top: 5px;
            display: table;
            background-color: #e6f1fc;
            color: #389efe;
          }
          .tags-project-online {
            color: #9aceff;
            background-color: #f3f8fe;
            border-color: #d5eafe;
          }
        }
      }
    }
  }
}
</style>