<template>
  <div class="yqrange-index-wrapper">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond":curmbThird="curmbThird"></bread-crumb>
    <div class="yqrange-index-content screenSet" id="screenSet">
      <el-row class="step-content">
        <el-col :span="12">
          <div style="color:#666666;font-size:14px;">新建直播</div>
          <!--<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="6" :offset="5">
          <el-button size="small" type="primary" @click="complete">完成</el-button>
        </el-col>
      </el-row>
      <div class="first-step">

        <!--<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="liveName">
            <el-col :span="13">
              <el-input
                  size="small"
                  v-model="formData.liveName"
                  placeholder="请输入直播标题"
                  style="width:70%;"
              ></el-input>
              <span class="word-num">{{(formData.liveName).replace(/\s+/g,"").length}}/24</span>
            </el-col>
          </el-form-item>
          <el-form-item label="是否公开" prop="isPublicFlag">
            <el-radio-group v-model="formData.isPublicFlag" size="small">
              <el-radio label="1">否（仅限圈内人观看）</el-radio>
              <el-radio label="2">是（任何人可观看）</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="直播开始时间" prop="liveStartTime">
            <el-col :span="6">
            <el-date-picker
              v-model="formData.liveStartTime"
              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-col>
          </el-form-item>
          <el-form-item label="直播简介：" prop="introduce">
              <el-col :span="14">
            <div style="color:#666666;font-size:10px;">直播图片可选择仅文字版，仅图片版或文字版+图片版</div>
            <el-input type="textarea" v-model="formData.introduce" placeholder="请输入直播简介" maxlength="30" rows="3" style="width:60%;"></el-input>
            <div style="color:#666666;font-size:12px;">文字版</div>
              </el-col>
          <el-col :span="8">
              <el-upload
                v-model="formData.imgUrl3"
                class="bg-uploader"
                action="#"
                :show-file-list="false"
                :before-upload="beforeUploadPic1"
              >
                <img
                  v-if="formData.imgUrl3"
                  :src="formData.imgUrl3"
                  @mouseover.stop="imgMouseOver3=true"
                  class="bg-img"
                />
                <img
                  v-if="!formData.imgUrl3"
                  class="bg-img"
                  src="../../assets/image/small.png"
                />
                <div
                  class="img-delete"
                  v-show="imgMouseOver3"
                  @click.stop="deleteImg(3)"
                  @mouseout.stop="imgMouseOver3=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>
            <div style="color:#666666;font-size:12px;">图片版</div>
          </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">
              <div style="color:#666666;font-size:10px;">讲师（必填）</div>
            <el-col :span="12">
              <el-form-item label="姓名" prop="liveName">
                  <el-input
                    size="small"
                    v-model="formData.hostName"
                    placeholder="请输入姓名"
                    style="width:70%;"
                  ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="手机" prop="hostMobile">
              <el-input
                size="small"
                v-model="formData.hostMobile"
                placeholder="请输入手机号"
                style="width:70%;"
              ></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="姓名" prop="liveName">
                <el-input
                  size="small"
                  v-model="formData.hostName"
                  placeholder="请输入姓名"
                  style="width:70%;"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机" prop="hostMobile">
                <el-input
                  size="small"
                  v-model="formData.hostMobile"
                  placeholder="请输入手机号"
                  style="width:70%;"
                ></el-input>
              </el-form-item>
            </el-col>
          </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: '直播管理',
        curmbThird: '新建直播',
        active: 0,
        //页面展示位置
        stepData: [true, false, false],
        showStorage: true,
        formData: {
          liveName: '',
          liveStartTime: '',
          isPublicFlag: false,
          imgUrl1: '',
          imgUrl1More: {},
          imgUrl2: '',
          imgUrl2More: {},
          imgUrl3: '',
          imgUrl3More: {},
          intro:'',
          introduce: '',
          hostName: '',
          hostMobile: '',
          contentRole: '',
        },
        imgMouseOver1: false,
        uploadImgMessage1: false,//未上传图片，校验提示语
        imgMouseOver2: false,
        uploadImgMessage2: false,
        imgMouseOver3: false,
        uploadImgMessage3:false,
        contentList: [
          {
            value: '1',
            label: '所有人可发布动态'
          },{
            value: '2',
            label: '嘉宾可发布动态'
          },
        ],
        rules: {
          liveName: [
            { required: true, message: "请输入直播标题", trigger: "blur" },
            {
              min: 2,
              max: 24,
              message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
              trigger: "blur"
            },
            { validator: checkProjectStr, trigger: "blur" }
          ],
          isPublicFlag:[
            {required: true}
          ],
          liveStartTime: [
            {required: true}
          ],
          hostName: [
            {required: true}
          ],
          hostMobile: [
            {required: true}
          ],
          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;
        }
      },
      //完成
      complete() {
        this.$router.push({
          path: '/live-manage',
        })
      },
    },
  }
</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>
