<template>
  <div class="subPage">
    <form class="mainForm">
      <ul>
        <li class="flex-h">
          <span>案场：<em>*</em></span>
          <div class="flex-item">
            <div style="width: 50%;">
              <el-select v-model="CaseId" @change="caseChange" placeholder="请选择">
                <el-option
                  v-for="item in cases"
                  :key="item.CaseId"
                  :label="item.CaseName"
                  :value="item.CaseId">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>活动名称：<em>*</em></span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input v-model="activityName" placeholder="请输入内容"></el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>活动类型：<em>*</em></span>
          <div class="flex-item">
            <div>
              <el-select v-model="regValue" placeholder="请选择">
                <el-option
                  v-for="item in regOptions"
                  :key="item.regValue"
                  :label="item.label"
                  :value="item.regValue">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>活动方式：<em>*</em></span>
          <div class="flex-item">
            <div>
              <el-select v-model="activeType" placeholder="请选择">
                <el-option
                  v-for="item in activeTypeList"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>赠券卡券：<em>*</em></span>
          <div class="flex-item">
            <div>
              <el-select v-if="activeType === 'giveCard'" v-model="giftValue" placeholder="请选择">
                <el-option
                  v-for="item in cardList"
                  :key="item.CardId"
                  :label="item.CardName"
                  :value="item.CardId">
                </el-option>
              </el-select>
              <el-select v-if="activeType === 'giveCoupon'" v-model="giftValue" placeholder="请选择">
                <el-option
                  v-for="item in couponList"
                  :key="item.CouponId"
                  :label="item.CouponName"
                  :value="item.CouponId">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <!-- <li class="flex-h" v-if="activeType === 'giveCoupon'">
          <span>赠券数量：<em>*</em></span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input v-model="giftNum" placeholder="请输入内容"></el-input>
            </div>
          </div>
        </li> -->
        <li class="flex-h">
          <span>活动描述：</span>
          <div class="flex-item">
            <div>
              <el-input
                type="textarea"
                :rows="10"
                placeholder="请输入内容"
                v-model="desc">
              </el-input>
            </div>
          </div>
        </li>
        <li style="text-align:center">
          <el-button type="primary" size="mini" @click="submitData">提交</el-button>
          <el-button type="warning" size="mini" @click="redirection('activitiesList')">返回</el-button>
        </li>
      </ul>
    </form>
  </div>
</template>
<script>
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapActivityFlashbuyActions } = createNamespacedHelpers('activityFlashbuy')
const { mapActions: mapCardActions } = createNamespacedHelpers('card')
const { mapActions: mapCouponActions } = createNamespacedHelpers('coupon')

export default {
  data () {
    return {
      msg: '添加活动',
      postData: {
        TableId: '', // 桌位id
        AreaId: '', // 区域id
        CaseId: '', // 案场id
        OrgId: '', // 机构id
        TableNo: '', // 桌位编号
        Order: '', // 排序
      },
      regOptions: [{
        regValue: 'reigste',
        label: '注册'
      }],
      activeTypeList: [{
        value: '送券',
        id: 'giveCoupon'
      }, {
        value: '送卡',
        id: 'giveCard'
      }],
      activeType: '',
      regValue: '',
      giftOptions: [], // [{giftValue: '1',label: '饮品通用券'}, {giftValue: '2',label: '课程通用券'}, {giftValue: '3',label: '小小外交官体验券'}]
      giftValue: '',
      giftLabel: '',
      activityName: '', // 活动名称
      activityType: this.regValue, // 活动类型
      resourceDesc: '', // 存储JSON (赠券类型,赠送数量,活动描述)
      giftNum: '1', // 赠送数量
      desc: '', // 活动描述
      giftList: [], // 赠券卡券数据体
      cardList: [], // 卡列表
      couponList: [], // 券列表
    }
  },
  mounted () {
    this.getCouponList()
  },
  computed: {
    ...mapState({
      cases: x => x.app.cases.list,
      defaultCaseId: x => x.app.cases.default,
    }),
    giftData: {
      get () {
        let jsonData = this.$data.giftList
        let data = []
        for (let i = 0; i < jsonData.length; i++) {
          let tempData = []
          tempData.giftValue = jsonData[i].CouponId
          tempData.label = jsonData[i].CouponName
          data.push(tempData)
        }
        return data
      }
    },
    CaseId: {
      get () {
        return this.postData.CaseId || this.defaultCaseId
      },
      set (val) {
        this.postData.CaseId = val
      }
    }
  },
  methods: {
    ...mapActivityFlashbuyActions([
      'getCardListByCaseId',
      'getCouponListByCaseId',
    ]),
    ...mapCardActions([
      'GetCardList',
    ]),
    ...mapCouponActions([
      'GetCouponList',
    ]),
    caseChange () { // 更换案场请求卡券列表
      this.GetCardList({
        page: 1,
        pagesize: 100000,
        sendtype: 'system',
        usetype: 'luckdraw',
        usedid: this.$route.query.id || '',
        caseid: this.CaseId,
      }).then((res) => {
        // console.log(JSON.stringify(res))
        this.cardList = res.list || []
        // console.log(JSON.stringify(this.cardList))
      })
      this.GetCouponList({
        page: 1,
        pagesize: 100000,
        sendtype: 'system',
        usetype: 'luckdraw',
        usedid: this.$route.query.id || '',
        caseid: this.CaseId,
      }).then((res) => {
        // console.log(JSON.stringify(res))
        this.couponList = res.list || []
        // console.log(JSON.stringify(this.couponList))
      })
    },
    redirection (pathName) { // 重定向
      this.$router.push({ name: pathName })
    },
    submitData () { // 提交数据
      // 判断是否提交成功
      // 提交成功,跳转页面
      if (this.activityName === '') {
        this.$message({
          type: 'error',
          message: '活动名称不能为空'
        })
        return false
      }
      if (this.regValue === '') {
        this.$message({
          type: 'error',
          message: '活动类型不能为空'
        })
        return false
      }
      if (this.activeType === '') {
        this.$message({
          type: 'error',
          message: '活动方式不能为空'
        })
        return false
      }
      if (this.giftValue === '') {
        this.$message({
          type: 'error',
          message: '赠券卡券不能为空'
        })
        return false
      }
      if (this.giftNum - 0 < 1 && (this.giftNum - 0) % 1 !== 0) {
        this.$message({
          type: 'error',
          message: '赠券数量须为大于0正整数'
        })
        return false
      }
      // let tempGiftOptions = this.$data.giftOptions
      // let tempGiftValue = this.$data.giftValue
      // for (let i = 0; i < tempGiftOptions.length; i++) {
      //   if (tempGiftOptions[i].giftValue === tempGiftValue) {
      //     this.$data.giftLabel = tempGiftOptions[i].label
      //     break
      //   }
      // }
      if (this.activeType === 'giveCard') {
        for (var n = 0; n < this.cardList.length; n++) {
          if (this.cardList[n].CardId === this.giftValue) {
            this.giftLabel = this.cardList[n].CardName
          }
        }
      }
      if (this.activeType === 'giveCoupon') {
        for (var a = 0; a < this.couponList.length; a++) {
          if (this.couponList[a].CouponId === this.giftValue) {
            this.giftLabel = this.couponList[a].CouponName
          }
        }
      }
      let jsonString = '{"giftValue":"' + this.$data.giftValue + '","giftLabel":"' + this.giftLabel + '","giftNum":"' + this.$data.giftNum + '","desc":"' + this.$data.desc + '"}'
      this.$ajax(this.$api.marketingActivities.addMarketing.url, {
        method: this.$api.marketingActivities.addMarketing.method,
        queryData: { activityName: this.$data.activityName, activityType: this.$data.regValue, activeType: this.activeType, resourceDesc: jsonString, CaseId: this.postData.CaseId }
      }).then(res => {
        // console.log(res)
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        // 跳转路由
        this.redirection('activitiesList')
      })
    },
    getCouponList () {
      this.$ajax(this.$api.marketingActivities.getCouponList.url, {
        method: this.$api.marketingActivities.getCouponList.method,
        urlData: {
          type: 'system',
        },
      }).then(res => {
        this.giftList = res
        this.giftOptions = this.giftData
      })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>
