<template>
  <div class="el-active-updata-pc active_show_detail_pc_2" >

     <div class="active_show_detail_pc_2_pop1 common_popbg" v-if="isUpload && active"><!--pop-->
   <div class="register-pop common_pop">
      <span class="common_pop_close" @click="close"></span>
      <span class="register-pop-title">上传作品</span>
      <div class="active-updata-pc">
         <div class="active-uploading">
            <div class="active-form-list">
               <span class="sp1">作品名称：</span>
               <input type="text" v-model="infos.wksName" class="input1">
               <span class="sp2">（由汉字、字母或数字组成，1-20个字符）</span>
            </div>
            <div class="active-form-list">
               <span class="sp1">作者姓名：</span>
               <input type="text" v-model="infos.wksAuthor" class="input1">
               <span class="sp2">多名作者姓名请以分号（;）隔开</span>
            </div>
            <div class="active-form-list">
               <span class="sp1">上传作品：</span>
               <div>
                    <fyer-upload-imgs
                        multiple
                        compress
                        :before-read="beforeRead"
                        :before-remove="beforeRemove"
                        :limit="limit"
                        @preview="preview"
                        @exceed="exceed"
                        @readFile="onReadFile"
                        v-model="files"
                    >
                    </fyer-upload-imgs>
                    <div class="preview-bg" v-show="isPreview">
                        <div class="dialog">
                            <button class="close-preview" @click="closePreview">关闭</button>
                            <img :src="previewIMG" class="preview-img">
                        </div>
                    </div>
               </div>
               <span class="sp2">（支持格式：jpg、jpeg、png，文件大小不超过10M）<i></i></span>
            </div>
            <span class="active-uploading-btn"><a href="javascript:void(0)" @click="add" class="active-form-sub">确认并上传</a></span>
         </div>
      </div>
   </div>
   </div>
   <div class="active_show_detail_pc_2_pop2 common_popbg"    v-if="!isUpload && active" ><!--pop-->
      <div class="register-pop common_pop">
         <span class="common_pop_close" @click="close"></span>
         <span class="register-pop-title">作品详情</span>
         <div class="active-works-details-pc">
            <div class="works-detail">
               <span class="sp0">{{ds.wksName}}</span>
               <span class="sp1" style="height: 350px;overflow-y: auto;">
                 <img :src="ds.wksPhoto" alt="">
              </span>
               <ul class="ul1">
                  <li>作者：<span>{{ds.wksAuthor}}</span></li>
                  <li v-if="result">作者编号：<span>{{ds.wksCode}}</span></li>
                  <li v-if="result">作者票数：<span>{{Number(ds.wksVoteNum)}}</span></li>
               </ul>
               <span class="btn1">
                 <!-- <a href="">分享作品</a> -->
                  <a href="javascript:void(0)" @click="zan">投一票</a>
               </span>
            </div>
         </div>
      </div>
      </div>







  </div>
</template>

<script>
import formMixin from "../../../src/mixins/formMixin";
import lenye_base from "lenye_base";
import $ from "fy-kit";
import msg from "../../message";
import { fyerUploadImgs } from "fyer-upload-imgs";

export default {
  name: "ElActiveUpdataPc",
  mixins: [formMixin],
  model: {},
  components: {
    msg,
    fyerUploadImgs
  },
  props:{
        isUpload:{
            type: Boolean,
            default: true,
        },
        wksId:{  //活动作品id
          type: String,
          default: '61a0a0d0dc0d4a849af73925ab964ebb'
        },
      type:{
          type: String,
          default: ''
      }
  },
  data() {

    return {
      active:true,
      infos: {
        wksName: "",
        wksAuthor: "",
        wksPhoto: "", //附件ids upload-div-img
        actId:''
      },
      ds:{

      },
      userData:null,
      files: [

      ],
      maxSize: 1024 * 10, // 10 KB
      previewIMG: null,
      limit: 1,
      isPreview: false,
      result:true
    };
  },
  mounted() {
    this.uploadurl =
      lenye_base.base_data.getapiUrl() + "/file-service/upload/pic";
      this.infos.actId = $.util.urlParams('id');
      this.userData = $.util.storage('userData').get().getValue();
      // this.detail();
  },
  computed: {},
  methods: {
    close(bool){
      if(bool===1){
        this.active=true;
      }else{
        this.active=false
      }

    },
    // init() {
    //   this.detail();
    // },
    detail(id){
   this.wksId=id
       $.util
        .ajax(
          lenye_base.base_data.getapiUrl() +
            "/activity-service/common/actActivityWorks/queryById.do",
          lenye_base.base_data.getformatting({
            wksId:id
          })
        )
        .then(res => {
          if (res.success == "1") {
            this.ds = res.data;
          } else {
            msg.error(res.message);
          }
        });

    },
      detail1(id){
          this.wksId=id
        this.result = false;
          console.log(this.wksId)
          $.util
              .ajax(
                  lenye_base.base_data.getapiUrl() +
                  "/activity-service/common/actResults/queryById.do",
                  lenye_base.base_data.getformatting({
                      rstId:id
                  })
              )
              .then(res => {
                  if (res.success == "1") {
                      res.data['wksName'] = res.data.rstTitle
                      res.data['wksPhoto'] = res.data.rstPhoto
                       res.data['wksAuthor'] =  res.data.rstUserName


                      this.ds = res.data;
                  } else {
                      msg.error(res.message);
                  }
              });

      },
    zan(){

      if(!this.userData){
        msg.warning("请登录后再投票！");
        return  false;
      }
       $.util
        .ajax(
          lenye_base.base_data.getapiUrl() +
            "/activity-service/api2/actActivityWorks/vote.do",
          lenye_base.base_data.getformatting({
            wksId:this.wksId
          })
        )
        .then(res => {
          if (res.success == "1") {
            msg.success("投票成功！");
            this.detail(this.wksId)
          } else {
            msg.warning(res.message);
          }
        });

    },
    add() {
        console.log(this.isUpload)
      var iname = this.infos.wksName;
      if(!iname){
        msg.warning('作品名称不能为空！');
        return  false;
      }else if(!this.infos.wksAuthor){
        msg.warning('作者姓名不能为空！');
        return  false;
      }else if(iname.length>20){
        msg.warning('作品名称过长！');
        return  false;
      }else if(!this.infos.wksPhoto){
        msg.warning('请上传作品封面！');
        return  false;
      }



      $.util
        .ajax(
          lenye_base.base_data.getapiUrl() +
            "/activity-service/api2/actActivityWorks/save.do",
          lenye_base.base_data.getformatting(this.infos)
        )
        .then(res => {
          if (res.success == "1") {
            msg.success('上传成功！');
             this.audit(res.data);
             this.active = false;
          } else {
            msg.error(res.message);
          }
        });
    },
    audit(wksId){
      $.util
        .ajax(
          lenye_base.base_data.getapiUrl() +
            "/activity-service/api2/actActivityWorks/subAudit.do",
          lenye_base.base_data.getformatting({
            wksId,
            wksStatus:'1'
          })
        )
        .then(res => {
          if (res.success == "1") {
             this.active = false;
          } else {
            msg.error(res.message);
          }
        });
    },


    onReadFile(file){
      this.uploadFile(file[0])
    },
    uploadFile(userfile){
      $.img.upload(userfile,this.uploadurl).then(res=>{
          if(res.success=='1'){
             msg.success("上传成功！");
             this.infos.wksPhoto = res.data.fileId;

          }else{
             msg.error(res.message);
          }
      })
    },

    beforeRemove(index, file) {
      this.infos.wksPhoto = ""
      return true;
    },

    preview(index, file) {
      this.previewIMG = file.url;
      this.isPreview = true;
    },
    exceed() {
      msg.warning(`只能上传${this.limit}张图片`);
    },
    closePreview() {
      this.isPreview = false;
    },
    beforeRead(files) {
      if(!this.userData){
        msg.warning("请登录后操作！");
        return false;
      }
      var res = $.img.imgType(files,['jpg','png']);
      if(res){
        return res;
      }else{
        msg.warning("只能上传jpg和png格式的图片");
      }

    },




  }
};
</script>
<style>
.preview-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  overflow: auto;
}
.dialog img {
  display: block;
  margin: auto;
  margin-top: 10vh;
}
.close-preview {
  position: fixed;
  top: 2vh;
  left: 10vw;
  transform: translateX(-50%);
  font-size: 20px;
}
</style>

