<template>
  <div class="startupPage">
    <template>
      <div class="head-title">
        启动页
      </div>
      <div class="content">
        <div style="display:flex;" flex="box:first">
          <div class="Auth_outside">
            <div flex="dir:left main:center cross:center" class="inside">
              <img v-if="addMsg.PicUrl!=''" class="authPic" :src="getIconLink(addMsg.PicUrl)" alt="">
              <img v-else class="authPic" :src="getIconLink(addMsg.PicUrl)" alt="" />
            </div>
          </div>
          <div class="Auth_right">
            <el-card shadow="never">
              <div slot="header">设置</div>
              <el-form label-width="100px">
                <el-form-item label="是否开启">
                  <el-switch v-model="addMsg.IsShow" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="音频时间">
                  <el-input placeholder="请输入内容" v-model="addMsg.Seconds" size="small" type="number" :min="0" style="max-width:600px">
                    <template slot="append">秒</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="音频地址">
                  <el-input v-model="addMsg.MusicUrl" size="small" placeholder="请输入内容" style="max-width:600px">
                    <el-button @click="changevideo = true" slot="append">添加音频</el-button>
                  </el-input>

                </el-form-item>
                <el-form-item label="上传图片">
                  <el-upload class="avatar-uploader" action="" accept="image/jpeg,image/gif,image/png,image/bmp"
                             :show-file-list="false"  :http-request="UploadImage" :before-upload="beforeAvatarUpload">
                    <div class="app-upload" flex="main:center cross:center" style="width: 100px; height: 40px;">
                      <el-button size="mini">选择文件</el-button>
                    </div>
                    <div class="Auth_imgList" flex="main:center cross:center" v-if="addMsg.PicUrl!=''">
                      <img :src="getIconLink(addMsg.PicUrl)" alt="">
                      <el-button type="danger" v-if="addMsg.PicUrl!=''" class="image-delete" size="mini"
                                 icon="el-icon-close" @click.stop="addMsg.PicUrl=''" circle></el-button>
                    </div>
                  </el-upload>

                </el-form-item>


              </el-form>
            </el-card>
            <el-button type="primary" style="margin-top:20px;padding:9px 25px" size="small" @click="saveMsg">保存
            </el-button>
          </div>
        </div>
      </div>
    </template>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
    <!-- 选择视频 -->
    <el-dialog title="选择文件" :visible.sync="changevideo" width="1240px">
      <Choosevideo @Selectvideo="Selectvideo"></Choosevideo>
    </el-dialog>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import Choosevideo from "@/components/global/Choosevideo.vue";

  export default {
    data() {
      return {
        choicImg: false,
        dataList: [],
        msg: {
          pageIndex: 1,
          pageSize: 15,
          Name: "",
        },
        changevideo: false,

        addMsg: {
          ID:0,
          MusicUrl:'https://vt-im-bucket.oss-cn-chengdu.aliyuncs.com/static/jiahe.mp3',//音乐地址
          Seconds:0,
          IsShow: 0, //是否开启
          PicUrl: '', //图片
        },
        imgshow:true,
      };
    },
    created() {

    },
    components: {
      ChooseImg,
      Choosevideo
    },
    methods: {
      GetData() {
        this.apipost("/api/Education/GetEducationStartUpModel", {
        }, res => {
          if (res.data.resultCode == 1) {
            this.addMsg.IsShow = res.data.data.IsShow;
            this.addMsg.ID = res.data.data.ID;
            this.addMsg.Seconds = res.data.data.Seconds;
            if (res.data.data.PicUrl) {
              this.addMsg.PicUrl = res.data.data.PicUrl;
            }
            if (res.data.data.MusicUrl) {
              this.addMsg.MusicUrl = res.data.data.MusicUrl;
            }
          } else {
            this.Info(res.data.message);
          }
        })
      },

      //保存
      saveMsg() {
        if(this.addMsg.Seconds==''){
          this.addMsg.Seconds=0
        }
        this.apipost("/api/Education/AddOrUpdateEducationStartUp ", this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.GetData();
            this.Success(res.data.message);
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //选择图片
      SelectId(msg) {
        this.addMsg.PicUrl = this.getIconLink(msg.url);
        this.choicImg = false;
      },
      Selectvideo(val) {
        this.addMsg.MusicUrl = val.Path;

        this.changevideo = false;
      },
      UploadImage(file) {
        if(this.imgshow==true){
          this.UploadFileToTencent(this.FileType().GoodsImg, file.file, res => {
            if (res.resultCode == 1) {
              if(res.FileUrl){
                this.addMsg.PicUrl = res.FileUrl;
              }
            }
          })
        }

      },
      beforeAvatarUpload(file){
        if(file.size/1024 >190){
          this.Error('图片大于190KB');
          this.imgshow=false
        }else {
          this.imgshow=true
        }
      }

    },
    mounted() {
      this.GetData();
    }
  };

</script>
<style>
  .startupPage .content {
    margin-top: 12px;
    box-sizing: border-box;
  }

  .startupPage .Auth_outside {
    width: 401px;
    height: 741px;
    background-color: #fff;
    border-radius: 30px;
    padding: 37px 13px;
    margin-right: 24px;
  }

  .startupPage .inside {
    width: 375px;
    height: 667px;
    background-color: #eee;
  }

  .startupPage .authPic {
    width: auto;
    height: auto;
    max-width: 750px;
    max-height: 1334px;
    transform: scale(0.5);
  }

  .startupPage .Auth_imgList {
    height: 222px;
    width: 125px;
    border: 1px solid #e3e3e3;
    border-radius: 2px;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
  }

  .startupPage .Auth_imgList img {
    max-width: 100%;
    max-height: 100%;
  }

  .startupPage .image-delete {
    position: absolute;
    right: -8px;
    top: -8px;
    padding: 4px 4px;
  }

</style>