<template>
  <div class="edit-entry-wrap">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird"></bread-crumb>
    <div class="component-content screenSet" id="screenSet">
      <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>
    </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() {
    return {
      curmbFirst: "教培项目",
      curmbSecond: "项目组件",
      curmbThird: "新建入口",
      formData: {
        entryName: "",
        projectBegintime: "",
        projectEndtime: "",
        projectIntro: "",
        type: 1,
        attachmentUrl1: "",
        attachmentUrl2: "",
      },
      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: {
        projectName: [
          { 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;
  },
  mounted: function() {
    commonUtil.resizeHeight();
  },
  methods: {
  },
};
</script>
<style lang="scss">
.edit-entry-wrap {
  .component-content {
    background: #fff;
    padding: 10px;
    .basic-form {
      .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;
          }
        }
      }
    }
  }
}
