<template>
  <el-dialog title="回顾页面" :visible.sync="dialogVisible" class="order-details">
    <el-form :model="form" ref="form" label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="峰会封面:">
            <el-upload
              class="upload-demo"
              :headers="getHeaderWithToken"
              :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :on-progress="uploadProcess"
              list-type="picture">
              <el-progress v-show="imgFlag == true" type="circle" :percentage="percent"
                           style="margin-top: 20px"></el-progress>
              <img v-if="$utils.isString(form.banner) && !$utils.isEmpty(form.banner) && !imgFlag"
                   :src="form.banner"
                   style="width:300px;max-height:300px;">
              <i v-else-if="!imgFlag" class="el-icon-plus avatar-uploader-icon"
                 style="lineHeight:100px;width:300px;height: 100px;border: 1px dashed #ccc;"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="峰会图片:">
            <el-upload
              :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
              list-type="picture-card"
              :file-list="list"
              :on-success="handlePictureCardPreview"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
<!--              <img width="100%" :src="form.picturePath" alt="">-->
          </el-form-item>
        </el-col>
      </el-row>
      <el-col :span="8">
        <el-form-item label="峰会视频:">
          <el-upload
            :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
            list-type="picture-card"
            :headers="getHeaderWithToken"
            :on-preview="handlePreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
            <video v-if="$utils.isString(form.videoPath) && !$utils.isEmpty(form.videoPath) && !imgFlag"
                 :src="form.videoPath"
                 style="width:300px;max-height:300px;"/>
            <i v-else-if="!imgFlag" class="el-icon-plus avatar-uploader-icon"
               style="lineHeight:100px;width:300px;height: 100px;border: 1px dashed #ccc;"></i>
        </el-form-item>
      </el-col>
    </el-form>
    <div slot="footer" class="dialog-footer1">
      <el-button class="button" @click="cancelHandel">取 消</el-button>
      <el-button class="button" type="primary" @click="cre">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import ElRow from "element-ui/packages/row/src/row";
  import ElInput from "../../../../node_modules/element-ui/packages/input/src/input.vue";
  import ElCol from "element-ui/packages/col/src/col";
  import ElFormItem from "../../../../node_modules/element-ui/packages/form/src/form-item.vue";
  import {getToken} from 'src/utils/auth';
  import {mapGetters} from 'vuex';
  import {
    one,
    save
  } from 'src/api/summit/activityShow';

  export default {
    props: ["reviewRow"],
    name: 'reviewPopup',
    components: {
      ElFormItem,
      ElCol,
      ElInput,
      ElRow
    },
    data() {
      return {
        imgDialogVisible: false,
        dialogVisible: false,
        dialogImageUrl:undefined,
        result: false,
        imgFlag: false,
        BASE_API: process.env.BASE_API,
        percent: 0,//上传进度
        imgFlag: false,
        list:[],
        form: {
          id: undefined,
          banner: undefined,
          activityId: undefined,
          banner: undefined,
          videoPath: undefined,
          picturePath: undefined,
        }
      }
    },
    watch: {
      dialogVisible(newValue, oldValue) {
        if (!newValue) {
          this.$emit("reviewDialogEvent", this.result);
        }
      },
    },
    computed: {
      ...mapGetters([
        'elements'
      ]),

      getHeaderWithToken() {
        return {Authorization: getToken()};
      },
    },
    watch: {
      dialogVisible(newValue, oldValue) {
        if (!newValue) {
          this.$emit("summitDialogEvent", this.result);
        }
      },
    },
    mounted() {

      this.getOrderInfo();
    },
    methods:{
      getOrderInfo() {
        one(this.reviewRow.id).then(res => {
          this.form=res.data
          this.dialogVisible=true
         this.imgDialogVisible=true;
        })
      },
      cre() {
        console.log(this.form.picturePath)

        save(this.form).then(res => {
          this.responseResult(res)
        })
      },
      responseResult(res) {
        if (res.status === 200) {
          this.$notify({
            title: '成功',
            message: '操作成功',
            type: 'success',
            duration: 2000
          });

          this.setSummitDialogEvent(true)
        } else {
          this.$notify({
            title: '失败',
            message: '操作失败！',
            type: 'error',
            duration: 2000
          });
        }
      },
      /**
       * 弹框-取消
       * */
      cancelHandel() {
        this.setSummitDialogEvent(false)
      },
      setSummitDialogEvent(e) {
        this.cleanForm();
        this.result = e
        this.dialogVisible = false

      },
      /**
       * 封面图上传
       * **/
      handleAvatarSuccess(res, file) {
        this.percent = 0;
        this.imgFlag = false;
        this.form.banner = res.data;
      },
      /**
       * 封面图上传进度
       * */
      uploadProcess(event, file, fileList) {
        this.imgFlag = true;
        this.percent = Math.floor(event.percent);
      },
      handlePreview(file) {

        this.form.videoPath=file.data
        this.imgDialogVisible = true;
      },
      handleRemove(file, fileList) {
        // console.log(file)
        console.log(file, fileList);
      },

      handlePictureCardPreview(res,file) {
        this.list.push({url: res.data})
        // this.imgDialogVisible = true;
      },
      cleanForm(){
       this.form= {
          id: undefined,
            banner: undefined,
            activityId: undefined,
            banner: undefined,
            videoPath: undefined,
            picturePath: undefined
        }
      }
    }
  }
</script>
<style>
  .label-text {
    margin-left: 10px;
    margin-right: 20px;
  }

  .label-title {
    margin-top: 10px;
  }

  .orderDetail tr th {
    background: #eef1f6;
  }

  .orderDetail tr td, .orderDetail tr th {
    width: 500px;
    text-align: center;
    border: 1px solid #dfe6ec;
    margin-left: 100px;
    margin-right: 100px;
    padding: 10px;
  }

  .label-value {
    margin-left: 80px;
    margin-right: 100px;
  }

  #license-img {
    width: 50px;
    height: 50px;
  }

  .order-details .el-form-item {
    margin-bottom: 10px !important;
  }

  .el-dialog__footer .dialog-footer1 {
    position: relative;
    text-align: center;
  }

  .fhjj {
    width: 500px;
  }

  .content {
    margin-left: 4%;
  }

  .height {
    margin-bottom: 2%;
  }

  . el-form-item__content {
    margin-left: 5% !important;
  }

  .status {
    margin-top: 4%;
  }
</style>

