<template>
  <div class="gradeManageRecord-addPage scrollbar-box">
    <div class="gradeManageRecord-addPage-min" v-if="pageType == 1">
      <div class="title-max-box">
        <p>基本信息</p>
        <p class="reset-button-one" @click="backPage">返回</p>
      </div>
      <div class="top-subject-box">
        <!--<p :style="'color:'+infoData.fiedColor+';border:1px solid ;'+infoData.fiedColor+';'">啊啊啊啊啊啊啊</p>-->
        <p :style="'color:'+addData.bigItem.levelColor+';border:1px solid '+addData.bigItem.levelColor+';'" v-if="addData.bigItem.levelName">{{addData.bigItem.levelName}}</p>
        <p>{{addData.bigItem.subName}}</p>
        <p>{{addData.bigItem.typeName}}</p>
      </div>
      <div class="top-info-box">
        <div class="info-text-box">
          <div>
            <p>学院：</p>
            <p>{{addData.bigItem.deptName}}</p>
          </div>
        </div>
        <div class="info-text-box">
          <div>
            <p>执行周期：</p>
            <p>{{addData.minItem.cycle}}</p>
          </div>
        </div>
        <div class="info-text-box">
          <div>
            <p>执行方式：</p>
            <p>{{addData.minItem.isAll == 1?'多人执行':(addData.minItem.isAll == 0?'单人执行':'')}}</p>
          </div>
        </div>
        <div class="info-text-box">
          <div>
            <p>执行截止时间：</p>
            <!--<p :class="infoData.nickName?'tableTypeColorA':''">啊啊啊啊啊啊啊</p>-->
            <p :class="addData.minItem.status == 0?'tableTypeColorA':''">{{addData.minItem.endDate}}</p>
          </div>
        </div>
        <!--<div class="info-text-box">-->
        <!--<div>-->
        <!--<p>执行人身份：</p>-->
        <!--<p>{{infoData.userPosition}}</p>-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="info-text-box">-->
        <!--<div>-->
        <!--<p>截止执行时间：</p>-->
        <!--<p>{{infoData.endTime}}</p>-->
        <!--</div>-->
        <!--</div>-->
      </div>
      <div class="top-info-box">
        <div class="info-text-box">
          <div>
            <p>规则名称：</p>
            <p>{{addData.minItem.ruleName}}</p>
          </div>
        </div>
        <div class="info-text-box">
          <div>
            <p>规则描述：</p>
            <p>{{addData.minItem.ruleRemark}}</p>
          </div>
        </div>
      </div>
      <p class="title-max-box">执行信息</p>
      <el-form class="add-form-box" :model="form" ref="form" :rules="rules">
        <el-form-item label="执行描述" prop="textarea" label-width="80px" style="margin:30px 0 0">
          <el-input
            style="width:500px;"
            type="textarea"
            resize="none"
            maxLength="50"
            :rows="6"
            placeholder="请输入执行描述"
            v-model="form.textarea">
          </el-input>
        </el-form-item>
        <el-form-item label="执行材料" prop="list" label-width="80px" style="margin-top:30px;" v-if="addData.minItem.isUpload == 1">
          <div class="upload-max-box">
            <div class="left-upload-box">
              <el-upload
                class="upload-demo"
                :action="uploadImgUrl"
                :show-file-list="false"
                drag
                multiple
                :on-success="(res)=>handleAvatarSuccess(res)"
                :headers="headers"
                :before-upload="beforeAvatarUpload">
                <i class="el-icon-upload" style="color:#CCE6FE;margin-top:40px;"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>
            </div>
            <div class="right-upload-box">
              <p v-if="documentType">文件请上传 pdf / doc / docx / ppt / pptx格式</p>
              <p v-if="videoType">视频请上传 mp4</p>
              <p v-if="pictureType">图片请上传 png / jpeg / gif 格式</p>
            </div>
          </div>
          <!--<el-upload-->
          <!--class="avatar-uploader"-->
          <!--:action="uploadImgUrl"-->
          <!--:show-file-list="false"-->
          <!--:on-success="(res)=>handleAvatarSuccess(res)"-->
          <!--:headers="headers"-->
          <!--:before-upload="beforeAvatarUpload">-->
          <!--<p class="reset-button-one left-button"><i class="el-icon-upload2" style="margin-right:10px;"></i>请上传执行材料</p>-->
          <!--</el-upload>-->
        </el-form-item>
        <div class="right-for-max-box">
          <div class="right-for-min-box" v-for="(item,index) in form.list" :key="index">
            <!--<el-tooltip class="item" effect="dark" :content="item.name" placement="top" v-if="">-->
              <!--<p>{{item.name}}</p>-->
            <!--</el-tooltip>-->
            <p>{{item.name}}</p>
            <p @click="pageTypeClickMin(2,item)">查看</p>
            <p @click="delItem(index)">删除</p>
          </div>
        </div>
      </el-form>
      <div class="bottom-button">
        <!--<p class="reset-button-one" @click="backPage">取消</p>-->
        <p class="inquire-button-one" @click="buttonClick">提交</p>
      </div>
    </div>
    <preview-page :previewData="previewData" v-if="pageType == 2"></preview-page>
  </div>
</template>

<script>
  import { gradeManageWorkFinish } from "@/api/laboratory/gradeManageWork";
  import { getToken } from "@/utils/auth";
  import previewPage from "./previewPage.vue"
  export default {
    name: "addPage",
    components: {
      previewPage
    },
    props:{
      addData:{},
    },
    data() {
      return {
        pageType:1,
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        upDataName:[],
        form:{
          textarea:"",
          list:[],
        },
        // 表单校验
        rules: {
          textarea: [
            { required: true, message: "请输入执行描述", trigger: "blur" },
            { required: true, message: "请输入执行描述", validator: this.spaceJudgment, trigger: "blur" }
          ],
          list: [
            { required: true, message: "请上传执行材料", trigger: "blur" },
            { required: true, message: "请上传执行材料", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        previewData:{},
        documentType:false,
        videoType:false,
        pictureType:false,
        indexOfList:[],
      }
    },
    created() {
      // this.$set(this,'form',this.addData.detail)
    },
    mounted(){
      let self = this;
      let list = this.addData.minItem.fileFormat.split(',');
      for(let i=0;i<list.length;i++){
        if(list[i] == '1'){
          self.documentType = true;
          self.indexOfList.push('application/pdf');
          self.indexOfList.push('application/msword');
          self.indexOfList.push('application/vnd.openxmlformats-officedocument.wordprocessingml.document');
          self.indexOfList.push('application/vnd.ms-powerpoint');
          self.indexOfList.push('application/vnd.openxmlformats-officedocument.presentationml.presentation');
        }else if(list[i] == '2'){
          self.videoType = true;
          self.indexOfList.push('video/mp4');
        }else if(list[i] == '3'){
          self.pictureType = true;
          self.indexOfList.push('image/png');
          self.indexOfList.push('image/jpeg');
          self.indexOfList.push('image/gif');
        }
      }
    },
    methods: {
      //提交
      buttonClick(){
        let self = this;
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.$confirm('是否确认提交?', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
              let obj = {
                subId:self.addData.bigItem.subId,
                ruleId:self.addData.minItem.ruleId,
                ruleUserId:self.addData.minItem.ruleUserId,
                isUpload:self.addData.minItem.isUpload,
                endDate:self.addData.minItem.endDate,
                detail:{
                  remark:self.form.textarea,
                  imgUrl:"",
                  imgName:"",
                },
                ruleType:self.addData.minItem.ruleType
              };
              if(self.form.list[0]){
                for(let i=0;i<self.form.list.length;i++){
                  obj.detail.imgUrl = obj.detail.imgUrl + self.form.list[i].url + ','
                  obj.detail.imgName = obj.detail.imgName + self.form.list[i].name + ','
                }
              }
              gradeManageWorkFinish(obj).then( response => {
                self.msgSuccess("操作成功");
                self.$parent.pageTypeClick(1);
              });
            }).then(() => {
            }).catch(() => {});
          }
        });
      },
      pageTypeClickMin(type,item){
        if (type == 1){
          this.pageType = 1;
          this.previewData = {};
        } else {
          this.previewData = item;
          this.pageType = 2;
        }
      },
      //返回
      backPage(){
        this.$parent.pageTypeClick(1);
      },
      //删除上传项
      delItem(index){
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
        }).then(() => {
          this.form.list.splice(index,1);
          this.$forceUpdate();
        }).catch(() => {});
      },
      //上传相关
      handleAvatarSuccess(res) {
        // console.log("=====================>2")
        // console.log("=====================>res",res)
        if(this.form.list.length>4){
          this.$message.error('最多上传5个文件');
          return
        }
        let obj ={
          name:this.upDataName,
          url:res.data.url,
        };
        this.form.list.push(obj);
        this.$forceUpdate()
      },
      beforeAvatarUpload(file) {
        console.log("=====================>1")
        let type = false;
        console.log('file',file);
        if(this.indexOfList.indexOf(file.type) == -1){
          this.$message.error('上传文件格式错误');
          type = false;
        }else{
          if(this.form.list.length>4){
            this.$message.error('最多上传5个文件');
            type = false;
          }else{
            this.upDataName = file.name;
            type = true;
          }
        }
        if(this.form.list.length>4){
          this.$message.error('最多上传5个文件');
          type = false;
        }
        return type;
      },
    }
  }
</script>

<style lang="scss" scoped>
  .gradeManageRecord-addPage{
    flex:1;
    display: flex!important;
    flex-direction: column;
    *{
      margin:0;
      padding:0;
    }
    .gradeManageRecord-addPage-min{
      flex:1;
      display: flex!important;
      flex-direction: column;
      margin:5px 20px 20px 10px!important;
      box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1)!important;
      border-radius:10px;
      .title-max-box{
        display: flex;
        border-bottom:1px solid #dedede;
        padding:0 20px!important;
        p:nth-child(1){
          flex:1;
          font-size:18px;
          line-height:80px;
          color:#0045AF;
        }
        p:nth-child(2){
          margin-top:20px;
        }
      }
      .add-form-box{
        padding:0 20px!important;

      }
      .top-subject-box{
        display: flex;
        margin:30px 0 0 50px;
        padding:0 20px!important;
        p:nth-child(1){
          line-height:30px;
          padding:0 16px;
          border-radius:6px;
          font-size:14px;
          font-weight:500;
          margin-right:18px;
        }
        p:nth-child(2){
          line-height:30px;
          font-size:16px;
          color:#333;
          margin-right:18px;
        }
        p:nth-child(3){
          line-height:30px;
          font-size:14px;
          color:#333;
          font-weight:500;
        }
      }
      .top-info-box{
        display: flex;
        padding:0 20px!important;
        .info-text-box{
          /*display: inline-block;*/
          flex:1;
          /*width:280px;*/
          margin-top:30px;
          div{
            display: flex;
            p{
              font-size:14px;
              font-weight: 500;
            }
            p:nth-child(1){
              width:120px;
              text-align: right;
              color:#999;
            }
            p:nth-child(2){
              flex:1;
              color:#333;
            }
            .tableTypeColorA{
              color:#FF6464!important;
            }
          }
        }
      }
      .title-max-box{
        font-size:18px;
        line-height:80px;
        color:#0045AF;
        border-bottom:1px solid #dedede;
      }
      .avatar-uploader{
        .left-button{
          width:200px;
        }
      }
      .right-for-max-box{
        margin:30px 0 0 80px;
        overflow: hidden;
        .right-for-min-box{
          padding:0 11px;
          margin:0 20px 20px 0;
          border-radius:4px;
          display: flex;
          p{
            font-weight:500;
            font-size:12px;
          }
          p:nth-child(1){
            width:300px;
            color:#333;
            display:block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
          p:nth-child(2){
            color:#0183FA;
            margin:0 30px 0 60px;
            cursor: pointer;
          }
          p:nth-child(3){
            color:#0183FA;
            cursor: pointer;

          }
        }
      }
      .bottom-button{
        display: flex;
        margin:40px auto;
        p{
          font-size:14px;
        }
        p:nth-child(1){
          margin-right:30px;
        }
      }
      .upload-max-box{
        display: flex;
        .right-upload-box{
          margin-left:30px;
          color:#9E9E9E;
          font-size:14px;
          font-weight:500;
          padding-top:50px;
          p{
            margin:0;
            line-height:30px;
          }

        }
      }
    }
  }
</style>
