<template>
  <basic-container>
    <el-dialog title="创建活动" :append-to-body="true" :visible.sync="dialogFormVisible">
      <!-- 步骤条 -->
      <div class="steps">
        <el-steps :active="active" process-status="finish">
          <el-step title="活动信息"></el-step>
          <el-step title="图片上传"></el-step>
          <el-step title="活动配置"></el-step>
          <el-step title="打赏礼物"></el-step>
        </el-steps>
      </div>
      <!-- 基本信息 -->
      <el-card style="margin-top: 40px;" v-if="active==0">
        <div style="margin-top: 30px;">
          <el-form ref="form1" :model="form1" :rules="rules1" label-width="120px">
            <el-form-item label="活动主题" prop="name">
              <el-input v-model="form1.name"></el-input>
            </el-form-item>

            <el-form-item label="活动时间" required>
              <el-col :span="11">
                <el-form-item prop="beginTime">
                  <el-date-picker type="datetime" placeholder="请选择活动开始时间" v-model="form1.beginTime" style="width: 100%;"
                    format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col style="text-align: center;" :span="2">至</el-col>
              <el-col :span="11">
                <el-form-item prop="endTime">
                  <el-date-picker type="datetime" placeholder="请选择活动结束时间" v-model="form1.endTime" style="width: 100%;"
                    format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item prop="applyEndTime" label="报名结束时间" required>
              <el-date-picker type="datetime" placeholder="请选择报名结束时间" v-model="form1.applyEndTime" style="width: 100%;"
                format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="活动标签" prop="tagIds">
              <el-select style="width: 100%;" size="medium" v-model="form1.tagIds" multiple placeholder="请选择活动标签">
                <el-option v-for="item in tagList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="作品基础浏览量" prop="visitBase">
              <el-input v-model="form1.visitBase" ></el-input>
            </el-form-item>
            <el-form-item label="活动简介" prop="description">
              <el-input type="textarea" v-model="form1.description"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <!-- 活动图片上传 -->
      <el-card style="margin-top: 30px;" v-if="active==1">
        <el-form label-position="top" inline="true" style="margin-top: 20px;" ref="form2" :model="form2" :rules="rules2"
          label-width="100px">
          <el-form-item prop="cover" label="活动封面图" style="width: 45%;">
            <el-upload class="avatar-uploader" action="/api/putObject" :show-file-list="false"
              :on-success="handleUploadCover">
              <img v-if="form2.cover" :src="form2.cover" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item prop="poster" label="活动海报" style="width: 48%;">
            <el-upload class="avatar-uploader" action="/api/putObject" :show-file-list="false"
              :on-success="handleUploadPoster">
              <img v-if="form2.poster" :src="form2.poster" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item required prop="ads" label="广告轮播图" style="width: 80%;">
            <el-upload class="upload-demo" action="/api/putObject" :on-success="handleUploadAds"
              :on-remove="handleRemove" :file-list="fileList" list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-form>

      </el-card>

      <!-- 活动配置 -->
      <div style="margin-top: 40px;" v-if="active==2">
        <el-card class="box-card">
          <div slot="header" style="padding: 5px 0;">
            <span>热力值比例</span>
          </div>
          <div style="margin: 0 40px;">
            <el-form>
              <el-form-item>
                <div style="display: flex;">
                  <div style="margin-right: 10px;">1热力值等于</div>
                  <el-input style="width: 150px;" v-model="form3.bonusProportion" placeholder="请输入现金值"></el-input>
                  <div style="margin-left: 10px;">现金</div>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-top: 10px;">
          <div slot="header" style="padding: 5px 0;">
            <span>代理毛利率</span>
          </div>
          <div style="margin: 0 40px;">
            <el-form>
              <el-form-item>
                <el-input  v-model="form3.grossProfitRate" placeholder="请输入代理毛利率,不能超过1"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-card>

        <el-card style="margin-top: 10px;">
          <div slot="header" style="padding: 5px 0;">
            <span>榜单设置</span>
          </div>
          <div>
            <!-- <el-input v-model="form.classification" placeholder="以逗号分割,如:男歌手,女歌手,组合"></el-input> -->
            <el-form label-width="100px" ref="list">
              <el-form-item style="width: 50%;" v-for="(item, index) in list" :key="index" :label="'榜单' + (index+1)"
                :rules="{
                    required: true, message: '榜单不能为空', trigger: 'blur'
                  }">
                <div style="display: flex;">
                  <el-input placeholder="请输入榜单" maxlength="4" v-model="list[index]"></el-input>
                  <el-button style="margin-left: 5px;" plain type="danger" @click.prevent="removeList(item)">删除
                  </el-button>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" plain @click="list.push('')">新增榜单</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>

        <el-card style="margin-top: 10px;">
          <div slot="header" style="padding: 5px 0;">
            <span>参赛信息</span>
          </div>
          <div>
            <el-form ref="form3" :model="form3" :rules="rules3" label-width="100px">
              <el-form-item required label="人物标题" prop="personTitle">
                <el-input v-model="form3.personTitle" placeholder="请输入人物标题,如:歌手名字,运动员名字"></el-input>
              </el-form-item>
              <el-form-item label="作品标题" prop="productionTitle">
                <el-input v-model="form3.productionTitle" placeholder="请输入作品标题,如:歌曲名称,作品名称"></el-input>
              </el-form-item>
              <el-form-item label="介绍标题" prop="introductionTitle">
                <el-input v-model="form3.introductionTitle" placeholder="请输入介绍标题,如:个人介绍,作品宣言"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-card>

        <el-card style="margin-top: 10px;">
          <div slot="header" style="padding: 5px 0;">
            <span>投票参数</span>
          </div>
          <div>
            <el-form inline="true" style="margDin-top: 40px;" label-width="200px">
              <el-form-item prop="ticketDays" label="每个用户一天可以投多少票">
                <el-input-number v-model="form3.ticketDays" :min="1" label="票"></el-input-number>
              </el-form-item>
              <el-form-item prop="ticketHotValue" label="一票等于多少热力值">
                <el-input-number v-model="form3.ticketHotValue" :min="1" :max="10" label="积分"></el-input-number>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>

      <!-- 打赏物品 -->
      <el-card style="margin-top: 40px;" v-if="active==3">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 40px 0;"></div>
        <el-form ref="form4" :model="form4" :rules="rules4">
          <el-form-item prop="presentIds">
            <el-checkbox-group @change="handleCheckedPresentChange" v-model="form4.presentIds">
              <el-checkbox style="margin-bottom: 40px;" v-for="(item,index) in presentList" :key="index"
                :label="item.id">
                <div style="display: flex;flex-direction: column;">
                  <el-image style="width: 100px; height: 100px" :src="item.icon" fit="contain"></el-image>
                  <span style="text-align: center;padding-top: 10px;">{{item.name}}</span>
                </div>
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>

      </el-card>

      <div slot="footer" class="dialog-footer">
        <el-button v-if="active!=0" @click="active--">上一步</el-button>
        <el-button v-if="active!=3" type="primary" @click="next">下一步</el-button>
        <el-button v-if="active==3" type="primary" @click="confirm()">确认</el-button>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
  import {
    getList as getTagList
  } from "../../../api/tag/tag.js"
  import {
    getList as getPresentList
  } from "../../../api/present/present.js"
  const checkLen = (rule, value, callback) => {
    let type = rule.field
    let len = 0
    let msg = ''
    if (type == 'personTitle') {
      //人物标题 8字以内
      msg = '请输入人物标题'
      len = 16
    } else if (type == 'productionTitle') {
      //作品标题 48字以内
      msg = '请输入作品标题'
      len = 96
    }
    if (!value) {
      console.log(rule.message);
      return callback(new Error(msg));
    }
    console.log(tipLen(value, len));
    if (tipLen(value, len)) {
      callback()
    } else {
      callback(new Error('中文' + (len / 2) + '字以内,英文' + len + '字以内'))
    }
  }
  const tipLen = (val, num) => {
    let reg = /^[\u4e00-\u9fa5]{0,}$/; //定义正则表达式
    let len = 0;
    for (let i = 0; i < val.length; i++) {
      if (reg.test(val[i])) { //如果是中文，则让len+2
        len += 2;
      } else {
        len++; //反之英文len+1
      }
    }
    if (len < num) {
      return true
    }
    //如果英文和汉字加起来长度超过设定的字符数，截取字数
    // val = val.substring(0, num);
    return false
  }
  export default {
    props: {
      form1: Object,
      form2: Object,
      form3: Object,
      form4: Object,
    },
    watch:{
      form2(){
        if (!this.$isEmpty(this.form2.ads)) {
          let tmp = this.form2.ads.split(",")
          tmp.forEach((item, index) => {
            let obj = {
              name: '轮播图' + (index + 1),
              url: item
            }
            this.fileList.push(obj)
          })
        }
      },
      form3(){
        if (!this.$isEmpty(this.form3.classification)) {
          this.list = this.form3.classification.split(",")
        }
      }
    },
    data() {
      return {
        dialogFormVisible: false,
        //步骤条
        active: 2,
        //奖金比例
        marks: {
          0: '0%',
          20: '20%',
          40: '40%',
          60: '60%',
          80: '80%',
          100: {
            style: {
              width: '60px',
            },
            label: '100%'
          }
        },
        //活动标签
        tagList: [],
        //活动轮播图
        fileList: [], //回显

        // 打赏物品
        checkAll: false,
        isIndeterminate: false,
        presentList: [],
        //榜单设置
        list: [],

        //验证规则
        rules1: {
          name: [{
            required: true,
            message: '请输入活动名称',
            trigger: 'blur'
          }, ],
          beginTime: [{
            required: true,
            message: '请选择活动开始时间',
            trigger: 'blur'
          }, ],
          endTime: [{
            required: true,
            message: '请选择活动结束时间',
            trigger: 'blur'
          }, ],
          applyEndTime: [{
            required: true,
            message: '请选择报名结束时间',
            trigger: 'blur'
          }, ],
          tagIds: [{
            required: true,
            message: '请选择活动标签',
            trigger: 'blur'
          }, ],
          description: [{
            required: true,
            message: '请输入活动简介',
            trigger: 'blur'
          }, ]
        },
        rules2: {
          cover: [{
            required: true,
            message: '请上传活动封面图',
            trigger: 'blur'
          }, ],
          poster: [{
            required: true,
            message: '请上传活动海报',
            trigger: 'blur'
          }, ],
          ads: [{
            required: true,
            message: '请上传活动轮播图',
            trigger: 'blur'
          }, ]
        },
        rules3: {
          personTitle: [{
            validator: checkLen,
            trigger: 'blur'
          }],
          productionTitle: [{
            required: true,
            message: '请输入作品标题',
            trigger: 'blur'
          }, ],
          introductionTitle: [{
            required: true,
            message: '请输入介绍标题',
            trigger: 'blur'
          }, ],
        },
        rules4: {
          presentIds: [{
            required: true,
            message: '请选择打赏的礼物',
            trigger: 'blur'
          }, ],
        }
      }
    },
    created() {
      this.getTagList()
      this.getPresentList()
    },
    methods: {
      //获取标签列表
      async getTagList() {
        let res = await getTagList()
        this.tagList = res.data.data.records
      },
      //获取礼物列表
      async getPresentList() {
        let res = await getPresentList()
        this.presentList = res.data.data.records
      },
      open() {
        this.dialogFormVisible = true
      },
      close() {
        this.dialogFormVisible = false
      },
      confirm() {
        this.validForm('form4')
      },
      //上传封面图
      handleUploadCover(res) {
        this.form2.cover = res.data
      },
      //上传海报图
      handleUploadPoster(res) {
        this.form2.poster = res.data
      },
      //上传轮播图
      handleUploadAds(res) {
        let index = this.fileList.length + 1
        let obj = {
          name: '轮播图' + index,
          url: res.data
        }
        this.fileList.push(obj)
        let tmpList = this.fileList.map(item => item.url)
        this.form2.ads = tmpList.join(',')
      },
      //活动轮播图
      handleRemove(file, fileList) {
        this.fileList = fileList
        let tmp = this.fileList.map(item => item.url)
        this.form2.ads = tmp.join(",")
      },
      //打赏物品
      handleCheckAllChange(val) {
        if (val) {
          this.form4.presentIds = this.presentList.map(item => item.id)
        } else {
          this.form4.presentIds = []
        }
        this.isIndeterminate = false;
      },
      handleCheckedPresentChange(val) {
        let checkedCount = val.length;
        this.checkAll = checkedCount === this.presentList.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.presentList.length;
      },
      //榜单设置
      submitListForm() {
        if (this.$isEmpty(this.form3.bonusProportion)) {
          this.$message.error('请输入1热力值等于多少现金');
          return false
        }

        if (this.$isEmpty(this.form3.grossProfitRate)) {
          this.$message.error('请输入代理毛利率');
          return false
        }

        if (this.$isEmpty(this.list)) {
          this.$message.error('榜单不能为空');
          return false
        }
        let flag = true
        this.list.forEach(item => {
          if (this.$isEmpty(item)) {
            flag = false
            this.$message.error('榜单不能为空');
          }
        })
        return flag
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeList(item) {
        let index = this.list.indexOf(item)
        if (index !== -1) {
          this.list.splice(index, 1)
        }
      },
      submit() {
        let form = {}
        Object.assign(form, this.form1, this.form2, this.form3, this.form4)
        this.active = 0
        this.$emit('submit', form)
      },
      //下一步
      next() {
        switch (this.active) {
          case 0:
            this.validForm('form1')
            break;
          case 1:
            this.validForm('form2')
            break;
          case 2:
            if (this.submitListForm()) {
              this.validForm('form3')
              this.form3.classification = this.list.join(",")
            }
            break;
          default:
            break;
        }
      },
      validForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (!valid) {
            return false;
          }
          if (this.active == 3) {
            this.submit()
          } else {
            this.active++
          }
        });
      }
    }

  }
</script>

<style lang="scss">
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
