peko-admin-web/src/views/prize/PrizeAdminView.vue

<template>
  <section class="content">
    <div class="box box-primary">
      <div class="box-body">
        <section class="content-header">
          <h1 id="itemTitle"></h1>
        </section>

        <section class="content">
          <div id="table"></div>
          <div id="toolbar">
            <form action=""
                  id="searchForm"
                  method="POST">

              奖品名称：<input type="text"
                     name="prizeName"
                     id="prizeName"
                     class="input-sm"
                     placeholder="奖品名称">

              奖品分类：<input type="text"
                     name="prizeType"
                     id="prizeType"
                     class="input-sm"
                     placeholder="奖品分类">

              平台价值区间：<input type="text"
                     name="priceStart"
                     id="priceStart"
                     class="input-sm"
                     placeholder="最小值">
              --&nbsp;<input type="text"
                     name="priceEnd"
                     id="priceEnd"
                     class="input-sm"
                     placeholder="最大值">

              实际价值区间：<input type="text"
                     name="actualStart"
                     id="actualStart"
                     class="input-sm"
                     placeholder="最小值">
              --&nbsp;<input type="text"
                     name="actualEnd"
                     id="actualEnd"
                     class="input-sm"
                     placeholder="最大值">
            </form>

            <button class="btn btn-primary"
                    id="searchBtn">搜索</button>
            <button class="btn btn-primary"
                    id="add">
              <i class="glyphicon glyphicon-plus"></i>增加
            </button>
          </div>
        </section>
      </div>
    </div>
  </section>

  <!-- 弹窗 -->
  <div class="modal fade"
       id="awardModal"
       rabindex='-1'
       role="dialog"
       aria-labelledby="modalLabel">
    <div class="modal-dialog"
         role="document">
      <div class="modal-content">

        <div class="modal-header">
          <button class="close"
                  type="button"
                  data-dismiss="modal"
                  aria-label="Close">
            <span aria-hidden="true">x</span>
          </button>

          <div class="modal-title"
               id="editModalLabel">奖品设置</div>
        </div>

        <div class="modal-body">
          <div class=""
               id="addModalLabel">
            <label for=""
                   class="col-sm-3 control-label"
                   style="margin-left: 30px;">奖品类型：</label>

            <div class="col-sm-8"
                 style="margin-left: -20px;">
              <select name="addType"
                      id="addType"
                      data-btn-class="btn btn-warning"
                      style="border-radius: 2px; width: 100px; height: 30px;">
                <option value="budGold">钻石</option>
                <option value="onlineGift">线上礼物</option>
                <option value="dress">装扮</option>
                <option value="entityGift">实体奖品</option>
                <option value="virtualCurrency">虚拟货币</option>
                <!-- <option value="beautiful">靓号</option> -->
              </select>
            </div>
          </div>
          <form action=""
                id="addForm"
                class="form-horizontal">

            <!-- 选择礼物 -->
            <div class="form-group awardChoose">

              <label for="awardChoose"
                     class="col-sm-3 control-label">选择礼物：</label>

              <div class="col-sm-4">
                <select name="awardChoose"
                        id="awardChoose"
                        onchange="updateAward(this)">
                  <!-- <option value="0">选取礼物</option> -->
                </select>
              </div>
            </div>

            <!-- 选择装扮类型 -->
            <div class="form-group dressType">

              <label for="dressType"
                     class="col-sm-3 control-label">选择装扮类型：</label>

              <div class="col-sm-8">
                <select name="dressType"
                        id="dressType"
                        data-btn-class="btn btn-warning">
                  <option value="4">头饰</option>
                  <option value="3">座驾</option>
                  <!--<option value="5">背景</option>-->
                </select>
              </div>
            </div>

            <!-- 选择具体装扮 -->
            <div class="form-group realDressType headwearGift">

              <label for="realDressType"
                     class="col-sm-3 control-label">选择具体装扮：</label>

              <div class="col-sm-8">
                <select name="realDressType"
                        id="realDressType"
                        class=" headwearContent">
                </select>
              </div>
            </div>

            <div class="form-group realDressType carGift">

              <label for="realDressType"
                     class="col-sm-3 control-label">选择具体装扮：</label>

              <div class="col-sm-8">
                <select name="realDressType"
                        id="realDressType"
                        class=" carContent">
                </select>
              </div>
            </div>

            <div class="form-group realDressType backgroundGift">

              <label for="realDressType"
                     class="col-sm-3 control-label">选择具体装扮：</label>

              <div class="col-sm-8">
                <select name="realDressType"
                        id="realDressType"
                        class=" backgroundContent">
                </select>
              </div>
            </div>

            <!-- 奖品名称 -->
            <div class="form-group giftName">

              <label for="giftName"
                     class="col-sm-3 control-label">奖品名称：</label>

              <input type="text"
                     class="validate[required]"
                     name="giftName"
                     id="giftName"
                     placeholder="单行输入">
            </div>

            <!-- 奖品图片 -->
            <div class="form-group awardAvatar">

              <label class="col-sm-3 control-label">奖品图片：</label>

              <div class="col-sm-8">
                <img src=""
                     alt=""
                     id="imgUrl"
                     style="width: 50px; height: 50px;">
                <input type="file"
                       id="uploadFile"
                       name="uploadFile"
                       accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
                <button class="btn btn-success"
                        type="button"
                        id="uploadBtn">上传</button>
                <input type="hidden"
                       id="alertWinPic"
                       name="alertWinPic"
                       class="form-control validate[required]">
              </div>
            </div>

            <!-- 靓号有效期 -->
            <div class="form-group validity">

              <label class="col-sm-3 control-label">靓号有效期：</label>

              <div class="col-sm-8">
                <label for="">
                  <input type="radio"
                         name="setDay">
                  <input type="text"
                         class="input-sm"
                         placeholder="0"
                         style='width: 80px;'>&nbsp;天
                </label>
                <label for="">
                  <input type="radio"
                         name="setDay">
                  <input type="text"
                         class="input-sm"
                         placeholder="0"
                         style="width:80px;">&nbsp;月
                </label>
                <label for="">
                  <input type="radio"
                         name="setDay">&nbsp;永久
                </label>
              </div>
            </div>

            <!-- 平台价值 -->
            <div class="form-group platformPrice">
              <label for="platformPrice"
                     class="col-sm-3 control-label">平台价值：</label>

              <div class="col-sm-3">
                <input type="text"
                       id="platformPrice"
                       name="platformPrice"
                       class="form-control validate[required]"
                       placeholder="">
              </div>

              <div class="col-sm-3"
                   id="attention"
                   style="color:lightgray;">平台价值和实际价值都指钻石价值</div>
            </div>

            <!-- 实际价值 -->
            <div class="form-group realPrice">
              <label for="realPrice"
                     class="col-sm-3 control-label">实际价值：</label>

              <div class="col-sm-3">
                <input type="text"
                       id="realPrice"
                       name="realPrice"
                       class="form-control validate[required]">
              </div>
            </div>

            <!-- 礼物等级 -->
            <div class="form-group awardLevel">
              <label for="awardLevel"
                     class="col-sm-3 control-label">礼物等级：</label>

              <div class="col-sm-8">
                <select name="awardLevel"
                        id="awardLevel">
                  <option value="1">一级</option>
                  <option value="2">二级</option>
                  <option value="3">三级</option>
                  <option value="4">四级</option>
                  <option value="5">五级</option>
                </select>
              </div>
            </div>

            <!-- 创建者 -->
            <div class="form-group creator">
              <label for="creator"
                     class="col-sm-3 control-label">创建者：</label>

              <div class="col-sm-8">
                <input type="text"
                       id="creator"
                       name="creator"
                       class="form-control validate[required]"
                       placeholder="请输入你的名字(必填)">
              </div>
            </div>
          </form>
        </div>

        <div class="modal-footer">

          <button type="button"
                  class="btn btn-default"
                  data-dismiss="modal">取消</button>

          <button type="button"
                  class="btn btn-primary"
                  data-primary="addSave"
                  id="save">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TableHelper from '@/utils/bootstrap-table-helper';

export default {
  name: "PrizeAdminView",
  setup () {
    // select框监听事件
    function updateAward (obj) {
      console.log('------------------ change')
      // 赋值
      let referenceId = parseInt($('#awardChoose').siblings('.combobox-container').find('input:hidden').val())
      $('#addForm').data('referenceID', referenceId);
    }
    window.updateAward = updateAward;
    return {
      updateAward
    };
  },
  created () {
    this.initData();
  },
  methods: {
    initData () {
      this.$nextTick(function () {
        // 定义线上礼物数据、装扮类型、具体装扮数据数组盒，用于ajax请求获取到的数据存储
        var onlineGift = [], dress = [], car = [], background = [];
        var giftID = null;
        var param = {
          id: '',
          prizeType: '',
          prizeName: '',
          prizeImgUrl: '',
          referenceId: '',
          prizeLevel: '',
          creator: '',
          platformValue: '',
          actualValue: ''
        }

        var main = {
          init: function () {
            this.eventRegister();
            this.getDataFromBack();
          },

          eventRegister: function () {

          },

          getDataFromBack: function () {

            // 获取头饰的数据
            $.get('/admin/headwear/total/list', {}, function (res) {
              if (res.code == 200) {
                for (var i = 0; i < res.data.length; i++) {
                  let item = res.data[i];
                  let name = item.name;
                  if (name && name.startsWith('{') && name.endsWith('}')) {
                    item.name = JSON.parse(name).zh;
                  }
                  dress.push(item);
                  var str = '<option value="' + item.headwearId + '">' + item.name + '</option>';

                  $('.headwearContent').append(str);
                }

              }
              console.log('dress', $('#headwearGift'));
              $('.headwearContent').combobox();
            })
            // 获取线上礼物的数据
            $.get('/admin/gift/getAllGiftList?consumeType=1&consumeType=2', function (res) {
              if (res.code == 200) {
                var data = res.data;
                console.log(data);
                for (var key in data) {
                  let item = data[key];
                  let giftName = item.giftName;
                  if (giftName && giftName.startsWith('{') && giftName.endsWith('}')) {
                    item.giftName = JSON.parse(giftName).zh;
                  }
                  var str = '<option value="' + item.giftId + '">' + item.giftName + '</option>';
                  $('#awardChoose').append(str);
                }
              } else {
                console.log('获取不到线上礼物' + res.code);
              }
              // for(var i = 0 ; i < res.data.length; i++) {
              //     onlineGift.push(res.rows[i]);

              //     // var str = '<option value="' + onlineGift[i].giftId + '">' + onlineGift[i].giftName + '</option>';
              //     // $('#awardChoose').append(str);
              // }
              // console.log('onlineGift',onlineGift);
            })
            // 获取座驾的数据
            $.get('/admin/car/goods/total/list', {}, function (res) {
              if (res.code == 200) {
                for (var i = 0; i < res.data.length; i++) {
                  let item = res.data[i];
                  let name = item.name;
                  if (name && name.startsWith('{') && name.endsWith('}')) {
                    item.name = JSON.parse(name).zh;
                  }
                  car.push(item);

                  var str = '<option value="' + item.id + '">' + item.name + '</option>';
                  $('.carContent').append(str);
                }
              }
              console.log('car', car);
              $('.carContent').combobox();
            })
            // 获取背景的数据
            //                    $.get('/admin/background/total/list',{},function(res) {
            //                        if(res.code == 200) {
            //                            for(var i = 0 ; i < res.data.length ; i++ ) {
            //                                background.push(res.data[i]);
            //
            //                                var str = '<option value="' + background[i].id + '">' + background[i].name + '</option>';
            //
            //                                $('.backgroundContent').append(str);
            //                            }
            //                        }
            //                            console.log('background',background);
            //                        $('.backgroundContent').combobox();
            //                    });
          }
        };
        main.init();

        var isEdit = false;
        $('#table').bootstrapTable('destroy');
        $('#table').bootstrapTable({
          columns: [
            { field: 'id', title: '编号', align: 'center', valign: 'middle', width: '10%' },
            { field: 'prizeName', title: '奖品名称', align: 'center', valign: 'middle', width: '10%' },
            {
              field: 'prizeImgUrl', title: '奖品图片', align: 'center', valign: 'middle', width: '10%', formatter: function (val, row, index) {
                return '<img src="' + val + '" alt="" style="width: 30px; height: 30px;">';
              }
            },
            {
              field: 'prizeType', title: '奖品分类', align: 'center', valign: 'middle', width: '10%', formatter: function (val, row, index) {
                switch (val) {
                  case 1:
                    return '<p>钻石</p>';


                  case 2:
                    return '<p>在线礼物</p>';


                  case 3:
                    return '<p>座驾</p>';


                  case 4:
                    return '<p>头饰</p>';


                  case 5:
                    return '<p>背景</p>';


                  case 6:
                    return '<p>实物</p>';


                  case 7:
                    return '<p>靓号</p>';


                  case 15:
                    return '<p>虚拟货币</p>';

                }
              }
            },
            { field: 'prizeLevel', title: '奖品等级', align: 'center', valign: 'middle', width: '10%' },
            // {field: '', title: '现有奖品个数', align: 'center', valign: 'middle', width: '10%'},
            // {filed: '', title: '历史被抽中数量', align: 'center', valign: 'middle', width: '10%'},
            { field: 'platformValue', title: '平台价值', align: 'center', valign: 'middle', width: '10%' },
            { field: 'actualValue', title: '实际价值', align: 'center', valign: 'middle', width: '10%' },
            {
              field: 'tmp', title: '操作', align: 'center', valign: 'middle', width: '10%', formatter: function (val, row, index) {
                var key = row.id;
                var buttonStr = '';
                if (key == 0) {
                  return '<button class="btn btn-primary btn -sm" disabled>编辑</button>'
                }
                if (row) {
                  return '<button class="btn btn-primary btn-sm opt-edit" data-id="' + key + '">编辑</button>'
                }
              }
            }
          ],
          cache: false,
          striped: true,
          showRefresh: false,
          pageSize: 10,
          pagination: true,
          pageList: [10, 20, 30, 50],
          sidePagination: 'server',
          queryParamsType: 'undefined',
          queryParams: function queryParams (params) {
            var giftKey = {
              '钻石': 1,
              '在线礼物': 2,
              '座驾': 3,
              '头饰': 4,
              '背景': 5,
              '实体奖品': 6,
              '靓号': 7
            }
            var key = $('#prizeType').val();
            var param = {
              pageSize: params.pageSize,
              pageNumber: params.pageNumber,
              prizeName: $('#prizeName').val(),
              prizeType: giftKey[key],
              minPlatformValue: $('#priceStart').val(),
              maxPlatformValue: $('#priceEnd').val(),
              minActualValue: $('#actualStart').val(),
              maxActualValue: $('#actualEnd').val(),
              partitionId: $('#partitionId').val(),
            };
            return param;
          },
          uniqueId: 'id',
          toolbar: '#toolbar',
          url: '/admin/prize/list',
          onLoadSuccess: function () {
            console.log('load success');
          },
          onLoadError: function () {
            console.log('load fail');
          }
        });

        function clearModal () {
          $('#addForm').find('input[type=text],select,input[type=hidden]').each(function () {
            $(this).val('');
          });
          $('#addForm').find('img').attr('src', '');
          $('#addForm').find('.combobox-container').removeClass('combobox-selected');
          // $('#addForm').find('select option').attr('selected',false);

        }

        // 搜索按钮点击事件

        $('#searchBtn').click(function () {
          TableHelper.doRefresh('#table');
        });
        // $('#table').on('click',function() {
        //     TableHelper.doRefresh('#table');
        // });

        // 编辑按钮点击事件
        $('#table').on('click', '.opt-edit', function () {
          clearModal();
          $('#awardModal').modal('show');
          var id = parseInt($(this).data('id'))
          isEdit = true;
          if (id == 'undefined' || !id) {
            return;
          }
          $('#addModalLabel').hide();
          var data = $('#table').bootstrapTable('getRowByUniqueId', id);
          var $prizeId;
          switch (data.prizeType) {
            case 1:
              $('#awardModal').find('.awardChoose').hide();//选择礼物
              $('#awardModal').find('.dressType').hide();//装扮类型
              $('#awardModal').find('.realDressType').hide();//具体装扮
              $('#awardModal').find('.giftName').show();//礼物名称
              $('#awardModal').find('.awardAvatar').show();//礼物图片
              $('#awardModal').find('.validity').hide();//靓号有效期
              $('#awardModal').find('.platformPrice').show();//平台价值
              $('#awardModal').find('.realPrice').show();//实际价值
              $('#awardModal').find('.awardLevel').show();//礼物等级
              $('.awardAvatar').find('#imgUrl').attr('src', data.prizeImgUrl);
              break;

            case 2:
              $('#awardModal').find('.awardChoose').show();//选择礼物
              $('#awardModal').find('.dressType').hide();//装扮类型
              $('#awardModal').find('.realDressType').hide();//具体装扮
              $('#awardModal').find('.giftName').show();//礼物名称
              $('#awardModal').find('.awardAvatar').show();//礼物图片
              $('#awardModal').find('.validity').hide();//靓号有效期
              $('#awardModal').find('.platformPrice').show();//平台价值
              $('#awardModal').find('.realPrice').show();//实际价值
              $('#awardModal').find('.awardLevel').show();//礼物等级
              $('#awardChoose').combobox();
              var $prizeName = $('#awardChoose').find('option[value=' + data.referenceId + ']').text();
              $('.awardChoose').find('input[type=text]').val($prizeName);


              break;

            case 3:

              $('#awardModal').find('.awardChoose').hide();//选择礼物
              $('#awardModal').find('.dressType').show();//装扮类型
              $('#awardModal').find('.headwearGift').show();//具体装扮
              $('#awardModal').find('.giftName').show();//礼物名称
              $('#awardModal').find('.awardAvatar').show();//礼物图片
              $('#awardModal').find('.validity').hide();//靓号有效期
              $('#awardModal').find('.platformPrice').show();//平台价值
              $('#awardModal').find('.realPrice').show();//实际价值
              $('#awardModal').find('.awardLevel').show();//礼物等级
              $('.carGift').show();
              $('.headwearGift').hide();
              $('.backgroundGift').hide();
              $('#dressType option[value=' + data.prizeType + ']').attr('selected', true).siblings().attr('selected', false);
              $('.carContent').find('option[value=' + data.referenceId + ']').attr('selected', true).siblings().attr('selected', false);
              $prizeId = $('.carContent').find('option[value=' + data.referenceId + ']').text();
              $('.carGift').find('input[type=text]').val($prizeId);
              break;

            case 4:

              $('#awardModal').find('.awardChoose').hide();//选择礼物
              $('#awardModal').find('.dressType').show();//装扮类型
              $('#awardModal').find('.headwearGift').show();//具体装扮
              $('#awardModal').find('.giftName').show();//礼物名称
              $('#awardModal').find('.awardAvatar').show();//礼物图片
              $('#awardModal').find('.validity').hide();//靓号有效期
              $('#awardModal').find('.platformPrice').show();//平台价值
              $('#awardModal').find('.realPrice').show();//实际价值
              $('#awardModal').find('.awardLevel').show();//礼物等级
              $('.carGift').hide();
              $('.headwearGift').show();
              $('.backgroundGift').hide();
              $('#dressType').val(data.prizeType);
              $('.headwearContent').find('option[value=' + data.referenceId + ']').attr('selected', true).siblings().attr('selected', false);
              $prizeId = $('.headwearContent').find('option[value=' + data.referenceId + ']').text();
              $('.headwearGift').find('input[type=text]').val($prizeId);
              break;

            case 5:

              $('#awardModal').find('.awardChoose').hide();//选择礼物
              $('#awardModal').find('.dressType').show();//装扮类型
              $('#awardModal').find('.headwearGift').show();//具体装扮
              $('#awardModal').find('.giftName').show();//礼物名称
              $('#awardModal').find('.awardAvatar').show();//礼物图片
              $('#awardModal').find('.validity').hide();//靓号有效期
              $('#awardModal').find('.platformPrice').show();//平台价值
              $('#awardModal').find('.realPrice').show();//实际价值
              $('#awardModal').find('.awardLevel').show();//礼物等级
              $('.carGift').hide();
              $('.headwearGift').hide();
              $('.backgroundGift').show();
              $('#dressType option[value=' + data.prizeType + ']').attr('selected', true).siblings().attr('selected', false);
              $('.backgroundContent').find('option[value=' + data.referenceId + ']').attr('selected', true).siblings().attr('selected', false);
              $prizeId = $('.backgroundContent').find('option[value=' + data.referenceId + ']').text();
              $('.backgroundGift').find('input[type=text]').val($prizeId);
              break;

            case 6:
              $('#awardModal').find('.awardChoose').hide();//选择礼物
              $('#awardModal').find('.dressType').hide();//装扮类型
              $('#awardModal').find('.realDressType').hide();//具体装扮
              $('#awardModal').find('.giftName').show();//礼物名称
              $('#awardModal').find('.awardAvatar').show();//礼物图片
              $('#awardModal').find('.validity').hide();//靓号有效期
              $('#awardModal').find('.platformPrice').show();//平台价值
              $('#awardModal').find('.realPrice').show();//实际价值
              $('#awardModal').find('.awardLevel').show();//礼物等级
              $('.awardAvatar').find('#imgUrl').attr('src', data.priceImgUrl);
              break;

            case 7:
              $('#awardModal').find('.awardChoose').hide();//选择礼物
              $('#awardModal').find('.dressType').show();//装扮类型
              $('#awardModal').find('.realDressType').show();//具体装扮
              $('#awardModal').find('.giftName').show();//礼物名称
              $('#awardModal').find('.awardAvatar').show();//礼物图片
              $('#awardModal').find('.validity').show();//靓号有效期
              $('#awardModal').find('.platformPrice').show();//平台价值
              $('#awardModal').find('.realPrice').show();//实际价值
              $('#awardModal').find('.awardLevel').show();//礼物等级
              // $('.validity');
              break;
          }


          $('.giftName').find('#giftName').val(data.prizeName);
          $('.platformPrice').find('#platformPrice').val(data.platformValue);

          $('.realPrice').find('#realPrice').val(data.actualValue);

          $('.awardLevel').find('select').val(data.prizeLevel);

          $('#imgUrl').attr('src', data.prizeImgUrl);


          $('#creator').val(data.creator);
          $('#addForm').data('wpId', data.id);
          $('#addForm').data('wpType', data.prizeType);
          $('#addForm').data('referenceID', data.referenceId);

          $('#awardPartitionId').val(data.partitionId);
        });

        // 添加事件
        $('#add').on('click', function () {
          isEdit = false;
          clearModal();
          $('#awardChoose').combobox();
          // $('.carContent').combobox();
          // $('.headwearContent').combobox();
          // $('.backgroundContent').combobox();

          $('#addType').find('option[value=budGold]').attr('selected', true).siblings().attr('selected', false);
          $('#addModalLabel').show();
          $('#awardModal').modal('show');
          $('#awardModal').find('.awardChoose').hide();//选择礼物
          $('#awardModal').find('.dressType').hide();//装扮类型
          $('#awardModal').find('.realDressType').hide();//具体装扮
          $('#awardModal').find('.giftName').show();//礼物名称
          $('#awardModal').find('.awardAvatar').show();//礼物图片
          $('#awardModal').find('.validity').hide();//靓号有效期
          $('#awardModal').find('.platformPrice').show();//平台价值
          $('#awardModal').find('.realPrice').show();//实际价值
          $('#awardModal').find('.awardLevel').show();//礼物等级
          $('#awardModal').find('.awardLevel select option[value=1]').attr('selected', true).siblings().attr('selected', false);
        });

        // select框监听事件
        $('#addModalLabel').on('change', 'select', function () {

          // var budGold = budGold();
          // console.log(budGold);
          clearModal();
          switch ($(this).val()) {
            case 'budGold':
              $('#awardModal').find('.awardChoose').hide();//选择礼物
              $('#awardModal').find('.dressType').hide();//装扮类型
              $('#awardModal').find('.realDressType').hide();//具体装扮
              $('#awardModal').find('.giftName').show();//礼物名称
              $('#awardModal').find('.awardAvatar').show();//礼物图片
              $('#awardModal').find('.validity').hide();//靓号有效期
              $('#awardModal').find('.platformPrice').show();//平台价值
              $('#awardModal').find('.realPrice').show();//实际价值
              $('#awardModal').find('.awardLevel').show();//礼物等级
              break;

            case 'onlineGift':
              $('#awardModal').find('.awardChoose').show();//选择礼物
              $('#awardModal').find('.dressType').hide();//装扮类型
              $('#awardModal').find('.realDressType').hide();//具体装扮
              $('#awardModal').find('.giftName').show();//礼物名称
              $('#awardModal').find('.awardAvatar').show();//礼物图片
              $('#awardModal').find('.validity').hide();//靓号有效期
              $('#awardModal').find('.platformPrice').show();//平台价值
              $('#awardModal').find('.realPrice').show();//实际价值
              $('#awardModal').find('.awardLevel').show();//礼物等级
              break;

            case 'dress':

              $('#awardModal').find('.awardChoose').hide();//选择礼物
              $('#awardModal').find('.dressType').show();//装扮类型
              $('#awardModal').find('.headwearGift').show();//具体装扮
              $('#awardModal').find('.giftName').show();//礼物名称
              $('#awardModal').find('.awardAvatar').show();//礼物图片
              $('#awardModal').find('.validity').hide();//靓号有效期
              $('#awardModal').find('.platformPrice').show();//平台价值
              $('#awardModal').find('.realPrice').show();//实际价值
              $('#awardModal').find('.awardLevel').show();//礼物等级

              $('.carGift').hide();
              $('.backgroundGift').hide();
              break;

            case 'entityGift':
              $('#awardModal').find('.awardChoose').hide();//选择礼物
              $('#awardModal').find('.dressType').hide();//装扮类型
              $('#awardModal').find('.realDressType').hide();//具体装扮
              $('#awardModal').find('.giftName').show();//礼物名称
              $('#awardModal').find('.awardAvatar').show();//礼物图片
              $('#awardModal').find('.validity').hide();//靓号有效期
              $('#awardModal').find('.platformPrice').show();//平台价值
              $('#awardModal').find('.realPrice').show();//实际价值
              $('#awardModal').find('.awardLevel').show();//礼物等级
              break;

            case 'virtualCurrency':
              $('#awardModal').find('.awardChoose').hide();//选择礼物
              $('#awardModal').find('.dressType').hide();//装扮类型
              $('#awardModal').find('.realDressType').hide();//具体装扮
              $('#awardModal').find('.giftName').show();//礼物名称
              $('#awardModal').find('.awardAvatar').show();//礼物图片
              $('#awardModal').find('.validity').hide();//靓号有效期
              $('#awardModal').find('.platformPrice').show();//平台价值
              $('#awardModal').find('.realPrice').show();//实际价值
              $('#awardModal').find('.awardLevel').show();//礼物等级
              break;

            case 'beautiful':
              $('#awardModal').find('.awardChoose').hide();//选择礼物
              $('#awardModal').find('.dressType').show();//装扮类型
              $('#awardModal').find('.realDressType').show();//具体装扮
              $('#awardModal').find('.giftName').show();//礼物名称
              $('#awardModal').find('.awardAvatar').show();//礼物图片
              $('#awardModal').find('.validity').show();//靓号有效期
              $('#awardModal').find('.platformPrice').show();//平台价值
              $('#awardModal').find('.realPrice').show();//实际价值
              $('#awardModal').find('.awardLevel').show();//礼物等级
              break;
          }
        });

        $('#dressType').on('change', function () {

          switch ($(this).val()) {
            case '3':
              $('.carGift').show();
              $('.headwearGift').hide();
              $('.backgroundGift').hide();
              $('#carContent').val('');
              break;

            case '4':
              $('.carGift').hide();
              $('.headwearGift').show();
              $('.backgroundGift').hide();
              $('#headwearContent').val('');
              break;

            case '5':
              $('.carGift').hide();
              $('.headwearGift').hide();
              $('.backgroundGift').show();
              $('#backgroundContent').val('');
              break;
          }
        });

        $('.realDressType').find('.carContent').on('change', function () {
          giftID = $('.carContent').val();
          console.log(giftID);
        });
        $('.realDressType').find('.headwearContent').on('change', function () {
          giftID = $('.headwearContent').val();
          console.log(giftID);
        });
        $('.realDressType').find('.backgroundContent').on('change', function () {
          giftID = $('.backgroundContent').val();
          console.log(giftID);
        });

        // 上传图片
        $('#uploadBtn').on('click', function () {
          if ($('#uploadFile').val() == '') {
            $('#tipMsg').text('上传图片为空');
            $('#tipModal').modal('show');
            return;
          }
          var options = {
            type: 'post',
            url: '/admin/upload/img',
            dataType: 'json',
            success: function (res) {
              if (res.path) {
                $('#alertWinPic').val(res.path);
                $('#imgUrl').attr('src', res.path);
                console.log(res.path);
              } else {
                $('#tipMsg').text(res.msg);
                $('#tipModal').modal('show');
              }
            }
          }
          $('#addForm').ajaxSubmit(options);
        });

        // 保存
        $('#save').on('click', function () {
          if ($('#addForm').validationEngine('validate')) {
            var $referenceId;
            var $prizeType = null;
            if ($('#addModalLabel').css('display') == 'block') {
              switch ($('#addType').val()) {
                case 'budGold':
                  $prizeType = '1';
                  $referenceId = 0;
                  break;

                case 'onlineGift':
                  $prizeType = '2';
                  $referenceId = parseInt($('#awardChoose').siblings('.combobox-container').find('input:hidden').val())
                  break;

                case 'dress':
                  $prizeType = $('#dressType').val();
                  // $referenceId = parseInt($('#realDressType').siblings('.combobox-container').find('input:hidden').val())
                  if ($prizeType == '3') {
                    $referenceId = parseInt($('.carGift').find('select').val())
                  } else if ($prizeType == '4') {
                    $referenceId = parseInt($('.headwearGift').find('select').val());
                  } else if ($prizeType == '5') {
                    $referenceId = parseInt($('.backgroundGift').find('select').val());
                  }
                  // $referenceId = $('#realDressType').val();
                  break;

                case 'entityGift':
                  $prizeType = '6';
                  $referenceId = 0;
                  break;

                case 'virtualCurrency':
                  $prizeType = '15';
                  $referenceId = 0;
                  break;

              }
              param.prizeType = $prizeType;
              param.referenceId = $referenceId;
              // giftID = $('#realDressType').find('option').attr('selected',true).val();
              // console.log(giftID,$('#realDressType').val());

            } else {
              param.prizeType = $('#addForm').data('wpType');
              param.referenceId = $('#addForm').data('referenceID');
              param.id = $('#addForm').data('wpId');
            }


            param.prizeImgUrl = $('#imgUrl').attr('src');
            param.prizeLevel = $('#awardLevel').val();
            param.creator = $('#creator').val();
            param.prizeName = $('#giftName').val();
            param.platformValue = $('#platformPrice').val();
            param.actualValue = $('#realPrice').val();
            if (param.prizeLevel == '' || param.prizeLevel == 'undefined' || param.creator == '' || param.creator == 'undefined') {
              $('#tipMsg').text('等级选择栏不能为空')
              $('#tipModal').modal('show');
            }
            param.partitionId = $('#awardPartitionId').val();

            $.ajax({
              type: 'post',
              url: '/admin/prize/save',
              data: {
                id: param.id,
                prizeType: param.prizeType,
                prizeName: param.prizeName,
                prizeImgUrl: param.prizeImgUrl,
                referenceId: param.referenceId,
                prizeLevel: param.prizeLevel,
                creator: param.creator,
                platFormValue: param.platformValue,
                actualValue: param.actualValue,
                partitionId: param.partitionId,
              },
              dataType: 'json',
              success: function (res) {
                if (res.code == 200) {
                  $('#awardModal').modal('hide');
                  $('#tipMsg').text('保存成功');
                  $('#tipModal').modal('show');
                  TableHelper.doRefresh('#table')
                } else {
                  $('#tipMsg').text('保存失败，错误码：' + res.message);
                  $('#tipModal').modal('show');
                }
              }
            })

          }
        });
      });
    }
  },
  data () {
    return {
      partitionInfo: [],
    }
  }
};

</script>

<style scoped>
input {
  outline: none;
  padding: 3px;
  /* border: 1px solid lightgray; */
}

#addModalLabel {
  margin-bottom: 50px;
}

.input-group-addon {
  width: 0;
}

/* .carGift {
            display: none !important;
        }
        .backgroundGift {
            display: none !important;
        } */
</style>