<template>
  <div class="yqrange-index-wrapper">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
    <div class="yqrange-index-content screenSet" id="screenSet">
      <el-row class="step-content">
        <el-col :span="14">
          <el-steps :active="active" simple class>
            <span class="step-num" :class="{ 'on-step': stepData[0] }">1</span>
            <el-step title="基础信息"></el-step>
            <span class="step-num" :class="{ 'on-step': stepData[1] }">2</span>
            <el-step title="选择范围">2</el-step>
          </el-steps>
        </el-col>
        <el-col :span="5" :offset="5">
          <el-button v-if="showStorage" size="small" @click="storage">暂存</el-button>
          <el-button v-if="active<1" size="small" type="primary" @click="nextStep">下一步</el-button>
          <el-button v-if="active>=1" size="small" type="primary" @click="complete">完成</el-button>
        </el-col>
      </el-row>
      <div class="first-step" v-if="active == 0">
        <p class="p-title">基础信息</p>
        <el-form  ref="formData"
                  :model="formData"
                  :rules="rules"
                  label-width="150px"
                  label-suffix="："
                  class="basic-form">
          <el-form-item label="圈子名称" prop="projectName">
            <el-col :span="13">
              <el-input
                  size="small"
                  v-model="formData.projectName"
                  placeholder="请输入圈子名称"
                  style="width:70%;"
              ></el-input>
              <span class="word-num">{{(formData.projectName).replace(/\s+/g,"").length}}/24</span>
            </el-col>
          </el-form-item>
          <div class="basic-item-icon">
            <el-form-item label="圈子头像" class="required-label">
              <el-upload
                  v-model="formData.imgUrl1"
                  class="bg-uploader"
                  action="#"
                  :show-file-list="false"
                  :before-upload="beforeUploadPic1"
              >
                <img
                    v-if="formData.imgUrl1"
                    :src="formData.imgUrl1"
                    @mouseover.stop="imgMouseOver1=true"
                    class="bg-img"
                />
                <img
                    v-if="!formData.imgUrl1"
                    class="bg-img"
                    src="../../assets/image/small.png"
                />
                <div
                    class="img-delete"
                    v-show="imgMouseOver1"
                    @click.stop="deleteImg(1)"
                    @mouseout.stop="imgMouseOver1=false"
                >
                  <i class="el-icon-delete"></i>
                </div>
                <div class="limit-text">
                  <p>尺寸:48*48</p>
                  <p>限制大小: 500kb</p>
                  <p>支持.jpg,.png格式</p>
                </div>
              </el-upload>
            </el-form-item>
            <p class="upload-message" v-if="uploadImgMessage1">请选择圈子头像</p>
          </div>
          <div class="basic-item-icon">
            <el-form-item label="圈子封面" class="required-label">
              <el-upload
                  v-model="formData.imgUrl2"
                  class="bg-uploader"
                  action="#"
                  :show-file-list="false"
                  :before-upload="beforeUploadPic2"
              >
                <img
                    v-if="formData.imgUrl2"
                    :src="formData.imgUrl2"
                    @mouseover.stop="imgMouseOver2=true"
                    class="bg-img"
                />
                <img
                    v-if="!formData.imgUrl2"
                    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 class="limit-text">
                  <p>尺寸:750*420</p>
                  <p>限制大小: 2Mb</p>
                  <p>支持.jpg,.png格式</p>
                </div>
              </el-upload>
            </el-form-item>
            <p class="upload-message" v-if="uploadImgMessage2">请选择圈子头像</p>
          </div>
          <el-form-item label="圈子介绍" prop="introduce">
            <el-col :span="13">
              <el-input
                  size="small"
                  v-model="formData.introduce"
                  placeholder="请输入圈子介绍"
                  style="width:70%;"
              ></el-input>
              <span class="word-num">{{(formData.introduce).replace(/\s+/g,"").length}}/24</span>
            </el-col>
          </el-form-item>
          <el-form-item label="内容发布权限" prop="contentRole">
            <el-select v-model="formData.contentRole" placeholder="请选择发布权限" size="small" clearable>
              <el-option
                  v-for="item in contentList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  import BreadCrumb from "@/components/breadcrumb.vue";
  import { openLoading, closeLoading } from "../../utils/utils";
  import { doUpload, getFilePath } from "../../utils/qiniu-util";
  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: '新建小圈',
        active: 0,
        //页面展示位置
        stepData: [true, false, false],
        showStorage: true,
        formData: {
          projectName: '',
          imgUrl1: '',
          imgUrl1More: {},
          imgUrl2: '',
          imgUrl2More: {},
          introduce: '',
          contentRole: '',
        },
        imgMouseOver1: false,
        uploadImgMessage1: false,//未上传图片，校验提示语
        imgMouseOver2: false,
        uploadImgMessage2: false,
        contentList: [
          {
            value: '1',
            label: '所有人可发布动态'
          },{
            value: '2',
            label: '嘉宾可发布动态'
          },
        ],
        rules: {
          projectName: [
            { required: true, message: "请输入圈子名称", trigger: "blur" },
            {
              min: 2,
              max: 24,
              message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
              trigger: "blur"
            },
            { validator: checkProjectStr, trigger: "blur" }
          ],
          introduce: [
            { required: true, message: "请输入圈子名称", trigger: "blur" },
            {
              min: 2,
              max: 24,
              message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
              trigger: "blur"
            },
            { validator: checkProjectStr, trigger: "blur" }
          ],
          contentRole: [
            { required: true, message: "请选择内容发布权限", trigger: "blur" },
          ]
        }
      }
    },
    methods: {
      //上传圈子头像
      beforeUploadPic1(file) {
        let fileLimit = {
          width: 48,
          height: 48,
          size: 0.5,
          sizeText: "500K",
          key: "imgUrl1",
          more: "imgUrl1More",
          show: "uploadImgMessage1"
        };
        this.beforeUpload(file, fileLimit);
      },
      beforeUploadPic2(file) {
        let fileLimit = {
          width: 750,
          height: 420,
          size: 2,
          sizeText: "2Mb",
          key: "imgUrl2",
          more: "imgUrl2More",
          show: "uploadImgMessage2"
        };
        this.beforeUpload(file, fileLimit);
      },
      //上传图片
      beforeUpload(file, fileLimit) {
        let vm = this;
        const isJPG = file.type === "image/jpeg";
        const isPNG = file.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
        if (!isJPG && !isPNG) {
          vm.$message.error("图片格式不符合规范，请根据规范上传图片");
          // return;
        }
        if (!isLt2M) {
          vm.$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 == "uploadImgMessage1") {
                  vm.uploadImgMessage1 = 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;
      },
      //删除图片
      deleteImg(type) {
        if (type == 1) {
          vm.formData.imgUrl1 = "";
          vm.imgMouseOver1 = false;
        }
      },
      //暂存
      storage() {},
      //下一步
      nextStep() {},
      //完成
      complete() {},
    },
  }
</script>
<style lang="scss">
  .yqrange-index-wrapper{
    .yqrange-index-content{
      background: #fff;
      padding: 10px;
      .step-content{
        overflow: hidden;
        height: 60px;
        padding: 15px 0 50px 0;
        border-bottom: 1px solid #efefef;
        .is-text {
          display: none;
        }
        .el-steps--simple {
          background: #fff;
          padding: 10px 8%;
        }
        .step-num {
          display: block;
          margin-top: 1.5px;
          font-size: 12px;
          border: 1px solid #999 !important;
          border-radius: 50%;
          width: 25px;
          height: 18px;
          line-height: 15px;
          text-align: center;
          color: #999;
        }
        .el-step__title.is-wait {
          color: #999;
        }
        .el-step__title.is-process {
          color: #449284;
        }
        .is-finish {
          color: #999 !important;
        }
        .on-step {
          color: #449284;
          border: 1px solid #449284 !important;
        }
      }
      .first-step{
        margin-top: 20px;
        .p-title{
          padding-left: 10px;
          margin-bottom: 15px;
        }
        .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 {
          .bg-img {
            float: left;
            width: 84px;
            height: 100px;
          }
          .limit-text {
            float: left;
            margin-left: 10px;
            margin-top: -10px;
            p {
              font-size: 12px;
              color: #999;
            }
          }
        }
        .el-upload__tip {
          position: absolute;
          top: -6px;
          left: 130px;
        }
      }
    }
  }
  .required-label .el-form-item__label::before{
    content: '*';
    color: #F56C6C;
    margin-right: 4px;
  }
</style>
