<template>
    <div >
        <el-container class="bgDiv">
            <el-header style="height:150px">Header</el-header>
            <el-container>
                <el-aside width="550px" style="text-align:left">
                    <H1 style="text-align:center">抽奖活动</H1>
                    <div class="leftMain">
                        <el-form ref="form" :model="formModel" label-width="80px">
                            <el-form-item label="活动名称">
                                <el-select v-model="formModel.activityId" placeholder="请选择" style="width:350px" size="mini" @change="handleChange">
                                    <el-option
                                    v-for="item in activityList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="奖项">
                                <el-select v-model="formModel.awardId" placeholder="请选择" style="width:350px" size="mini">
                                    <el-option
                                    v-for="item in awardInfoList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                    <span style="float: left">{{ item.name }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">数量：{{ item.num }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div style="text-align:center">
                            <span>
                                <el-button type="primary" @click="handleSubmit" :loading="submitting">开始抽奖</el-button>
                                <el-button >重新开始</el-button>
                            </span>
                        </div>
                        <div class="imgDiv">
                            <el-image
                                style="width: 150px; height: 150px"
                                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                                fit="fit">
                            </el-image>
                        </div>
                    </div>
                </el-aside>
                <el-main>
                    <div style="text-align:center;margin-bottom:30px" >中奖名单</div>
                    <div style="width:100%">
                      <span>一等奖：1人</span>
                      <el-divider></el-divider>
                      <div style="margin-bottom:30px;">
                        <div class="imgText">
                          <el-image
                            style="width: 80px; height: 80px"
                            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
                            <div style="font-size:12px">13588888888</div>
                        </div>
                        <div class="imgText">
                          <el-image
                            style="width: 80px; height: 80px"
                            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
                            <div style="font-size:12px">13588888888</div>
                        </div>
                      </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import startLotteryApi from "@/api/business/startLottery";

export default {
  data() {
    return{
      submitting:false,
      formModel:{},
      activityList:[],
      awardInfoList:[],
    }
  },
  created() {
    var self = this;

    startLotteryApi.list().then(function (response) {
        var jsonData = response.data;
        if (jsonData.result) {
            if (jsonData.data != null && jsonData.data != "") {
                self.activityList = jsonData.data;
            }
        }
    });
  },
  methods: {
    handleChange(val){
      var self = this;
      var formData = new FormData();
  
      formData.append("activityId", val);

      self.awardInfoList=[];

      startLotteryApi.findByActivityId(formData).then(function (response) {
          var jsonData = response.data;
          if (jsonData.result) {
              if (jsonData.data != null && jsonData.data != "") {
                  self.awardInfoList = jsonData.data;
              }
          }
      });
    },
    handleSubmit(){

    }
  }
}
</script>
<style>
.bgDiv{
  background-image:url('../../public/bg2.jpg');
  background-size: 100% auto; /* 这会让图片在水平方向上铺满，垂直方向上保持原始比例 */
  background-repeat: repeat-x; /* 这会在水平方向上平铺 */
  color:#ffffff
}
 .el-header, .el-footer {
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    text-align: center;
    padding:10px
  }
  
  .el-main {
    height:500px;
    overflow:auto;
    text-align: left;
    padding:50px
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  .leftMain{
    margin-top:30px
  }
  .imgDiv{
    margin-top:50px;
    text-align:center
  }
  .el-form-item__label{
    color:#ffffff
  }
  .imgText{
    float:left;
    margin-left:20px
  }
</style>