<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="ptyx-add" v-loading="loading" loading-text="加载中" >
    <section class="dm-form__wrap">
      <h3 class="dm-title__label">游戏内容</h3>
      <el-form-item label="游戏名称" prop="gameName" class="width50">
        <dm-input v-model="form.gameName" class="w400" :maxlength="25"></dm-input>
      </el-form-item>
      <el-form-item label="LOGO上传" prop="logoImg" class="width50">
        <dm-upload-avatar :model.sync="form.logoImg" width="auto" label="上传图片" tips=" 请上传高度为80px的PNG透明背景图片"></dm-upload-avatar>
      </el-form-item>
      <el-form-item label="游戏时间" prop="dateTime" class="width50">
        <el-date-picker :default-time="['00:00:00', '23:59:59']" class="w400" v-model="form.dateTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="游戏说明" prop="gameIntroduction" class="width50">
        <dm-input class="w400" type="textarea" :rows="4" v-model="form.gameIntroduction" :maxlength="200"></dm-input>
      </el-form-item>
    </section>
    <section class="dm-form__wrap">
      <h3 class="dm-title__label">奖项设置</h3>
      <el-form-item label="首次奖项设置" class="width50">
        <el-button  @click="showCard('firstStrategy')">{{firstStrategy.cardName || '卡券选择'}}</el-button>
      </el-form-item>
      <el-form-item label="首次特殊策略" class="el-form-item__margin-top14">
        <el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="tableLoading">
          <el-table-column prop="strategyName" label="策略名称" align="left"></el-table-column>
          <el-table-column prop="proTitle" label="卡券名称" align="left">
            <template slot-scope="scope">
                <p>{{scope.row.proTitle}} </p>
                <p class="fz12 gray">{{scope.row.proSubName}} </p>
            </template>
          </el-table-column>
          <el-table-column prop="prizeName" label="移动" align="left" width="180">
            <template slot-scope="scope">
                <i class="el-icon-upload2 cursor" :class="scope.$index === 0 ?'cursor-nodrop gray':'cursor blue'" @click="sortGame(scope.row.gamePrizeStrategyId,1,scope.$index === 0)"></i>
                <i class="el-icon-download cursor" :class="scope.$index === (tableList.length-1) ?'cursor-nodrop gray':'cursor blue'" @click="sortGame(scope.row.gamePrizeStrategyId,4,scope.$index === (tableList.length-1))"></i>
                <i class="el-icon-sort-up cursor" :class="scope.$index === 0 ?'cursor-nodrop gray':'cursor blue'" @click="sortGame(scope.row.gamePrizeStrategyId,2,scope.$index === 0)"></i>
                &nbsp;
                <i class="el-icon-sort-down cursor" :class="scope.$index === (tableList.length-1) ?'cursor-nodrop gray':'cursor blue'" @click="sortGame(scope.row.gamePrizeStrategyId,3,scope.$index === (tableList.length-1))"></i>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left" width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="editStrategy(scope.row.gamePrizeStrategyId)">编辑</el-button>
              <dm-delete @confirm="delItem(scope.row)" tips="是否删除该策略?">
                <el-button type="text">删除</el-button>
              </dm-delete>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="tableList.length<10" class="dm-button--add" @click="addStrategy('')">
          <i class="el-icon-plus">新增策略</i>
        </div>
      </el-form-item>
      <el-form-item label="后续奖项设置" class="width50">
        <el-button  @click="showCard('lastStrategy')">{{lastStrategy.cardName || '卡券选择'}}</el-button>
      </el-form-item>
    </section>
    <section class="dm-form__wrap">
      <h3 class="dm-title__label">分享设置</h3>
      <el-form-item label="分享图片" class="width50">
        <dm-upload-avatar :model.sync="form.shareImg" fileType="fileShare" label="上传图片" width="80" height="80" tips="图片建议尺寸：高度200*200"></dm-upload-avatar>
      </el-form-item>
      <el-form-item label="分享标题" class="width50">
        <dm-input class="w400" v-model="form.shareTitle" :maxlength="20"></dm-input>
      </el-form-item>
      <el-form-item label="分享描述" class="width50">
        <dm-input class="w400" type="textarea" :rows="4" v-model="form.shareTextInfo" :maxlength="50"></dm-input>
      </el-form-item>
    </section>
    <div class="btn-wrap_fixed" :class="{'on':asideShow}">
      <el-button type="primary" @click="znmSave('form')">保 存</el-button>
      <el-button @click="$router.go(-1)">返 回</el-button>
    </div>
    <vue-gic-card :showCardDialog="showCardDialog" :cardLimit="3" @selectCard="selectCard"></vue-gic-card>
    <strategy :show.sync="strategyShow" :dataId="gamePrizeStrategyId" :gameActivityId="form.gameActivityId" :cardObj="dialogStrategy" @get-data="showCard" @refresh="znmStrategyList"></strategy>
  </el-form>
</template>

<script>
import {znmDetail,znmSave,znmStrategyList,znmStrategySort,znmStrategyDel} from '@/service/api/gameApi.js';
import {numberToChinese,formateDateTimeByType} from '@/utils/index.js';
import dmUploadAvatar from '@/components/upload/avatar';
import strategy from './strategy';
let gameInfo = {};
let cardType = 'firstStrategy'
export default {
  data () {
    return {
      loading:false,
      tableLoading:false,
      form:{
        gameActivityId:'',
        gameName:'',
        logoImg:{
          code:'',
          imgUrl:'',
        },
        dateTime:[],
        gameIntroduction:'',
        //分享
        shareTitle:'',
        shareTextInfo:'',
        shareImg:{
          code:'',
          imgUrl:'',
          wxImg:''
        }
      },
      rules:{
        gameName:{type:'string', required: true, message: '游戏标题不能为空', trigger: 'blur' },
        logoImg:{type:'object', required: true, message: 'logo不能为空', trigger: 'blur' },
        dateTime:{type:'array', required: true, message: '游戏时间不能为空', trigger: 'blur' },
        gameIntroduction:{type:'string', required: true, message: '游戏说明不能为空', trigger: 'blur' },
        shareImgUrl:{type:'object', required: true, message: '分享图片不能为空', trigger: 'blur' },
        shareTitle:{type:'string', required: true, message: '分享标题不能为空', trigger: 'blur' },
        shareTextInfo:{type:'string', required: true, message: '分享描叙不能为空', trigger: 'blur' },
      },
      tableList:[],
      showCardDialog: false,
      strategyShow:false,
      firstStrategy:{},
      lastStrategy:{},
      dialogStrategy:{},
      gamePrizeStrategyId:'',
      editFlag:this.$route.meta.type === 'edit',
      addFlag:this.$route.meta.type === 'add',
    }
  },
  components:{
    dmUploadAvatar,
    strategy
  },
  computed: {
    asideShow() {
      return this.$store.state.marketing.asideShow
    }
  },
  created(){
    if (this.editFlag) {
      this.znmDetail();
      this.znmStrategyList();
      this.$store.commit('mutations_breadcrumb',[{name:'营销管理',path:''},{name:'游戏营销',path:'/game'},{name:'找你马',path:'/game/znm'},{name:'找你马详情',path:''}])
    }else if (this.addFlag) {
      this.znmDetail(true);
      this.$store.commit('mutations_breadcrumb',[{name:'营销管理',path:''},{name:'游戏营销',path:'/game'},{name:'找你马',path:'/game/znm'},{name:'找你马新增',path:''}])
    }
  },
  methods: {
    addStrategy(val) {
      this.dialogStrategy = {}
      this.strategyShow = true;
      this.gamePrizeStrategyId = val
    },
    editStrategy(val){
      this.strategyShow = true;
      this.gamePrizeStrategyId = val
    },
    //删除策略
    delItem(row){
      znmStrategyDel({gamePrizeStrategyId:row.gamePrizeStrategyId}).then(res => {
        if (res.errorCode === 0) {
          this.$tips({type: 'success', message: '删除成功'});
          this.znmStrategyList();
        } else {
          this.$tips({type: 'error', message: res.message || '删除失败'});
        }
      })
    },
    //加载策略列表
    async znmStrategyList() {
      this.tableLoading = true;
      try {
        let res = await znmStrategyList({gameActivityId:this.$route.params.id || this.form.gameActivityId});
        if (res.errorCode === 0 ) {
          this.tableList = res.result.strategyList;
          if (res.result.firstStrategy) {
            this.firstStrategy = {
              coupCardId:res.result.firstStrategy.prizeReferId,
              cardName:res.result.firstStrategy.proTitle,
            }
          }
          if (res.result.lastStrategy) {
            this.lastStrategy = {
              coupCardId:res.result.lastStrategy.prizeReferId,
              cardName:res.result.lastStrategy.proTitle,
            }
          }
        }
      } catch(err) {
        console.log(err)
      }
      this.tableLoading = false;
    },
    //加载详情
    async znmDetail(addFlag) {
      this.loading = true;
      let res = await znmDetail({gameActivityId:addFlag?'':this.$route.params.id});
      this.loading = false;
      gameInfo = res.result;
      if (typeof gameInfo === 'string') {
        this.form.gameActivityId = gameInfo;
        return;
      }
      this.form = {
        gameActivityId:gameInfo.gameActivityId,
        gameName:gameInfo.gameName,
        logoImg:{
          code:gameInfo.logoImgFieldCode,
          imgUrl:gameInfo.logoImgUrl,
        },
        dateTime:[gameInfo.gameStartTime||'',gameInfo.gameEndTime||''],
        gameIntroduction:gameInfo.gameIntroduction,
        //分享
        shareTitle:gameInfo.shareTitle,
        shareTextInfo:gameInfo.shareTextInfo,
        shareImg:{
          code:gameInfo.shareImgFieldCode,
          imgUrl:gameInfo.shareImgUrl,
          wxImg:gameInfo.shareImgUrlWX
        }
      }
    },
    //提交保存
    znmSave (formName) {
      if (!this.firstStrategy.coupCardId || !this.lastStrategy.coupCardId) {
        this.$tips({type:'warning',message:'首次奖项和后续奖不能为空'});
        return;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            gameName: this.form.gameName,	//	是	String	游戏名称
            logoImgUrl: this.form.logoImg.imgUrl,	//	是	String	LOGO上传 url
            logoImgFieldCode: this.form.logoImg.code,	//	是	String	LOGO上传 code
            gameStartTime: formateDateTimeByType(this.form.dateTime[0],'yyyy-MM-dd-HH-mm'),	//	是	String	开始时间 “2018-05-23 11:00”
            gameEndTime: formateDateTimeByType(this.form.dateTime[1],'yyyy-MM-dd-HH-mm'),	//	是	String	结束时间 2018-06-14 16:00
            gameIntroduction: this.form.gameIntroduction,	//	是	string	游戏说明
            firstCouponId: this.firstStrategy.coupCardId,	//	是	String	首次奖项设置 load-game-znm-strategy-list 返回的firstStrategy—prizeReferId卡券ID
            strategyIds: this.tableList.map(v => v.gamePrizeStrategyId).join(','),	//	否	String	(不是必传)首次特殊策略 load-game-znm-strategy-list strategyList集合—gamePrizeStrategyId 多个用逗号隔开
            lastCouponId: this.lastStrategy.coupCardId,	//	是	string	后续奖项设置 load-game-znm-strategy-list 返回的lastStrategy—prizeReferId卡券ID
            shareImgUrl: this.form.shareImg.imgUrl,	//	是	string	分享图片 url
            shareImgFieldCode: this.form.shareImg.code,	//	是	string	分享图片 code
            shareImgUrlWX: this.form.shareImg.wxImg,	//	是	string	分享图片 wx
            shareTitle: this.form.shareTitle,	//	是	string	分享标题
            shareTextInfo: this.form.shareTextInfo,	//	是	string	分享描述
          };
          if (this.editFlag) {
            params.gameActivityId = this.form.gameActivityId;	//否	String	游戏主键ID(新增不传—前面回显的NEWxxxxx不用传, 修改必传)
            params.firstStrategyId = this.firstStrategy.gamePrizeStrategyId;	//	否	string	(新建不传)首次奖项设置 load-game-znm-strategy-list 返回的firstStrategy—gamePrizeStrategyId
            params.lastStrategyId = this.lastStrategy.gamePrizeStrategyId;	//	否	string	(新建不传)后续奖项设置 load-game-znm-strategy-list 返回的lastStrategy—gamePrizeStrategyId
          }
          let res = znmSave(params).then(res => {
            if (res.errorCode === 0) {
              this.$tips({type: 'success', message: this.$route.meta.type === 'add'?'新增成功':'编辑成功'});
              if (this.$route.meta.type === 'add') {
                this.$router.push('/game/znm');
              } else {
                this.$confirm('操作成功，是否返回列表?', '提示', {
                  confirmButtonText: '返回列表',
                  cancelButtonText: '留在本页',
                  type: 'warning'
                }).then(() => {
                  this.$router.push('/game/znm');
                }).catch(() => {
                  this.znmDetail();
                  this.znmStrategyList();
                });
              }
            } else {
              this.$tips({type:'error',message:res.message || '操作失败'});
            }
          })
        } else {
          this.$tips({type:'warning',message:'表单填写不完整，请检查表单'});
          return false;
        }
      });
    },
    // 显示卡券弹窗
    showCard(type) {
      console.log(type)
      cardType = type;
      this.showCardDialog = true;
    },
    // 子组件触发方法
    selectCard(val) {
      console.log(val)
      if (val && val.cardName) {
         this[cardType] = val
         console.log(this[cardType])
      }
      this.showCardDialog = false;
    },
    //策略排序
    sortGame(id,type,flag){
      if(flag) return;
      znmStrategySort({sortType:type,gamePrizeStrategyId:id,gamePrizeStrategyIds:this.tableList.map(v => v.gamePrizeStrategyId).join(',')}).then(res => {
        console.log(res)
        this.znmStrategyList();
      })
    }
  },
  filters: {
    numberToChinese(val) {
      return numberToChinese(val);
    }
  }
}
</script>
