<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-steps>
      </div>
      <!-- 基本信息 -->
      <el-card style="margin-top: 40px;" v-if="active==0">
        <div style="margin-top:30px;">
          <el-form  :model="form1" :rules="rules1" ref="form1"   label-width="120px">
            <el-form-item label="礼物名称" prop="name">
              <el-input v-model="form1.name" placeholder="请输入礼物名称"></el-input>
            </el-form-item>
            <el-form-item label="礼物价格" prop="price">
              <el-input v-model="form1.price" placeholder="请输入礼物价格"></el-input>
            </el-form-item>
            <el-form-item label="热力值" prop="hotValue">
              <el-input v-model="form1.hotValue" placeholder="请输入礼物热力值"></el-input>
            </el-form-item>
            <el-form-item label="积分值" prop="pointsValue">
              <el-input v-model="form1.pointsValue" placeholder="请输入礼物积分值"></el-input>
            </el-form-item>
            <el-form-item prop="icon" label="请上传礼物图片" style="width: 45%;">
              <el-upload class="avatar-uploader" action="/api/putObject" :show-file-list="false"
                :on-success="uploadIconSuccess">
                <img v-if="form1.icon" :src="form1.icon" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
      </el-card>

      <!-- 勋章配置 -->
      <div style="margin-top: 40px;" v-if="active==1">
        <el-card style="margin-top: 10px;">
          <el-form ref="form2"  :model="form2" :rules="rules2">
            <el-form-item label="是否赠送勋章" >
              <el-switch :active-value="1" :inactive-value="0" v-model="form2.isGiveMedal"></el-switch>
            </el-form-item>
          </el-form>
          <el-form  label-position="top" ref="form2"  :model="form2" :rules="rules2" >
            <el-form-item v-if="form2.isGiveMedal==1" prop="giveMedalId" label="选择打赏赠送的勋章" >
              <div style="margin: 40px 0;"></div>
              <el-radio-group v-model="form2.giveMedalId">
                  <el-radio  v-for="(item,index) in medalList" :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-radio>
                </el-radio-group>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <!-- 实物配置 -->
      <div style="margin-top: 40px;" v-if="active==2">
        <el-card style="margin-top: 10px;">
          <el-form ref="form3" :model="form3" :rules="rules3"  label-width="100px">
            <el-form-item label="是否赠送实物">
              <el-switch :active-value="1" :inactive-value="0" v-model="form3.isSendGoods"></el-switch>
            </el-form-item>
          </el-form>
          <el-form label-position="top" v-if="form3.isSendGoods==1" ref="form3" :model="form3" :rules="rules3" >
            <el-form-item label="实物名称" prop="goodsName">
              <el-input v-model="form3.goodsName" placeholder="请输入实物名称"></el-input>
            </el-form-item>
            <el-form-item label="包邮数量" prop="goodsPostAmount">
              <el-input v-model="form3.goodsPostAmount" placeholder="多少数量包邮"></el-input>
            </el-form-item>
            <el-form-item label="实物图片" prop="goodsPic">
              <el-upload class="avatar-uploader" action="/api/putObject" :show-file-list="false"
                :on-success="uploadGoodsSuccess">
                <img v-if="form3.goodsPic" :src="form3.goodsPic" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item required="true" label="选择捐赠实物获取的勋章" prop="donateMedalId">
              <div style="margin: 40px 0;"></div>
              <el-radio-group v-model="form3.donateMedalId">
                  <el-radio  v-for="(item,index) in medalList" :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-radio>
                </el-radio-group>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

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

<script>
  import { getList as getMedalList} from "../../../api/medal/medal.js"
  export default {
    props:{
      form1:Object,
      form2:Object,
      form3:Object,
    },
    data() {
      return {
        dialogFormVisible: false,
        //步骤条
        active: 0,
        //表单
        rules1:{
          name: [
            { required: true, message: '请输入礼物名称', trigger: 'blur' },
          ],
          price: [
            { required: true, message: '请输入礼物价格', trigger: 'blur' },
          ],
          hotValue: [
            { required: true, message: '请输入热力值', trigger: 'blur' },
          ],
          pointsValue: [
            { required: true, message: '请输入积分值', trigger: 'blur' },
          ],
          icon: [
            { required: true, message: '请上传礼物图片', trigger: 'blur' },
          ],
        },
        rules2:{
          giveMedalId:[
            {required: true, message: '请选择打赏赠送的勋章', trigger: 'blur' },
          ]
        },
        rules3:{
          goodsName:[
            {required: true, message: '请输入实物名称', trigger: 'blur' },
          ],
          goodsPic: [
            { required: true, message: '请上传实物图片', trigger: 'blur' },
          ],
          goodsPostAmount: [
            { required: true, message: '请输入包邮的数量', trigger: 'blur' },
          ],
          donateMedalId:[
            {required: true, message: '请选择捐赠实物获取的勋章', trigger: 'blur' },
          ]
        },
        //勋章配置
        medalList:[],
      }
    },
    created() {
      this.getMedalList()
    },
    methods: {
      //获取勋章列表
      async getMedalList() {
        let res = await getMedalList()
        this.medalList = res.data.data.records
      },
      open() {
        this.dialogFormVisible = true
      },
      close() {
        this.dialogFormVisible = false
      },
      confirm() {
        this.validForm('form3')
      },
      //上传礼物图片
      uploadIconSuccess(res) {
        this.form1.icon=res.data
      },
      //上传实物图片
      uploadGoodsSuccess(res){
        this.form3.goodsPic=res.data
      },
      next(){
        switch (this.active){
          case 0:
            this.validForm('form1')
            break;
          case 1:
            this.validForm('form2')
            break;
          default:
            break;
        }
      },
      handelNext(){
        if (this.active==2) {
          this.submit()
        }else{
          this.active++
        }
      },
      submit(){
        let form={}
        Object.assign(form,this.form1,this.form2,this.form3)
        this.active=0
        this.$emit('submit',form)
      },
      validForm(formName) {
        //是否需要验证
        let flag=true

        if (formName=='form2') {
          if (this.form2.isGiveMedal==0) {
            //不需要验证
            flag=false
          }
        }else if (formName=='form3') {
          if (this.form3.isSendGoods==0) {
            flag=false
          }
        }
        if (flag) {
          this.$refs[formName].validate((valid) => {
            if (!valid) {
              return false;
            }
            this.handelNext()
          });
        }else{
          this.handelNext()
        }
      },
    }

  }
</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>
