<template>
  <div style="padding: 20px">
    <!-- 第一步 -->
    <div v-if="steps == 1">
      <h3>基本信息</h3>
      <el-form ref="form" :model="shopInfo" label-width="200px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="名称" prop="storeRaffle.title">
              <el-input
                readonly
                type="text"
                style="width: 300px"
                placeholder="请输入名称"
                v-model="shopInfo.storeRaffle.title"
              ></el-input>
            </el-form-item>
            <el-form-item label="活动时间:" prop="storeRaffle.dateRange">
              <el-date-picker
                readonly
                v-model="shopInfo.storeRaffle.dateRange"
                type="datetimerange"
                range-separator="-"
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item label="活动透出图片:" prop="storeRaffle.pic">
              <el-image
                style="width: 400px; height: 200px"
                :src="shopInfo.storeRaffle.pic"
                :fit="fit"
              ></el-image>
            </el-form-item>
            <el-form-item
              label="每个ID抽奖次数"
              prop="storeRaffle.userLimitNum"
            >
              <el-input
                readonly
                type="text"
                style="width: 300px"
                placeholder="请输入名称"
                v-model="shopInfo.storeRaffle.userLimitNum"
              ></el-input>
            </el-form-item>
            <el-form-item label="参与活动用户资格" prop="storeRaffle.joinType">
              <el-radio-group v-model="shopInfo.storeRaffle.joinType" disabled>
                <el-radio :label="0">所有人</el-radio>
                <el-radio :label="1">固定时间下单</el-radio>
              </el-radio-group>

              <div v-if="shopInfo.storeRaffle.joinType == 1">
                <el-date-picker
                  readonly
                  v-model="shopInfo.storeRaffle.dateRange1"
                  type="datetimerange"
                  range-separator="-"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
                <div style="margin-top: 10px">
                  且下单金额累计满
                  <el-input
                    readonly
                    type="text"
                    style="width: 300px"
                    placeholder="请输入名称"
                    v-model="shopInfo.storeRaffle.orderFullAmount"
                  ></el-input>
                  元
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="text-align: center">
            <el-button type="primary" @click="submitForm(2, 'jy')"
              >下一步</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 第二步 -->
    <div v-if="steps == 2">
      <h3>设置奖品</h3>
      <span style="color: orange">建议奖品数量不超过五个</span>
      <div
        style="background: #f4f4f4; padding: 20px; margin-top: 20px"
        v-for="(item, index) in shopInfo.storeRaffleGiftVoList"
        :key="index"
      >
        <el-form ref="form2" :model="item" label-width="160px">
          <el-row style="width: 90%">
            <el-col :span="18">
              <el-form-item label="奖品类型:" prop="giftType">
                <el-radio-group v-model="item.giftType" disabled>
                  <el-radio :label="0">代金券</el-radio>
                  <el-radio :label="1">免单商品</el-radio>
                  <el-radio :label="2">下单折扣</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="商品折扣比例%:"
                prop="discountRatio"
                v-if="item.giftType == 2"
              >
                <el-input
                  readonly
                  type="text"
                  style="width: 300px"
                  v-model="item.discountRatio"
                ></el-input>
              </el-form-item>
              <el-form-item label="奖品数量:" prop="giftNum">
                <el-input
                  readonly
                  type="text"
                  style="width: 300px"
                  v-model="item.giftNum"
                ></el-input>
              </el-form-item>

              <el-form-item label="中奖概率%" prop="giftRatio">
                <el-input
                  readonly
                  type="text"
                  style="width: 300px"
                  v-model="item.giftRatio"
                ></el-input>
              </el-form-item>

              <el-form-item
                label="选择代金券"
                prop="userLimitNum"
                v-if="item.giftType == 0"
              >
                <el-table
                  v-if="item.storeVoucherVos"
                  v-loading="loading"
                  :data="item.storeVoucherVos"
                >
                  <el-table-column label="ID" align="center" prop="id" />
                  <el-table-column label="名称" align="center" prop="title" />
                  <el-table-column label="类型" align="center">
                    <template slot-scope="scope">
                      {{
                        scope.row.type == 1
                          ? "独立券"
                          : scope.row.type == 2
                          ? "连锁券"
                          : scope.row.type == 3
                          ? "联合券"
                          : ""
                      }}
                    </template>
                  </el-table-column>

                  <el-table-column label="推广方式" align="center">
                    <template slot-scope="scope">
                      {{
                        scope.row.showType == 0
                          ? "全网自动推出"
                          : scope.row.showType == 1
                          ? "定向渠道推广"
                          : ""
                      }}
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="总发放数量"
                    align="center"
                    prop="sendNum"
                  />
                  <el-table-column
                    label="已领取数量"
                    align="center"
                    prop="receiveNum"
                  />
                  <el-table-column label="操作" align="center" width="200">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        style="color: #00b529"
                        @click="removeVercher(item, scope.$index)"
                        >移除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
              <el-form-item
                label="选择商品"
                prop="userLimitNum"
                v-if="item.giftType == 1 || item.giftType == 2"
              >
                <el-table
                  v-if="item.spuList"
                  v-loading="loading"
                  :data="item.spuList"
                  row-key="id"
                >
                  <!-- <el-table-column type="selection" width="55" align="center" /> -->
                  <el-table-column label="商品Id" align="center" prop="id" />
                  <el-table-column label="商品信息" align="center">
                    <template slot-scope="scope">
                      <div
                        style="
                          display: flex;
                          flex-direction: row;
                          justify-content: space-between;
                          align-items: center;
                        "
                      >
                        <el-image
                          style="width: 30px; height: 30px"
                          :src="scope.row.pic"
                          :preview-src-list="[scope.row.pic]"
                        >
                        </el-image>
                        <div
                          :title="scope.row.title"
                          style="
                            width: 80px;
                            height: auto;
                            word-wrap: break-word;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                          "
                        >
                          {{ scope.row.title }}
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="分类"
                    align="center"
                    prop="categoryName"
                  />
                  <el-table-column label="商品状态" align="center">
                    <template slot-scope="scope">
                      {{
                        scope.row.spuStatus == 2
                          ? "售罄"
                          : scope.row.spuStatus == 0
                          ? "上架"
                          : scope.row.spuStatus == 1
                          ? "下架"
                          : ""
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="销量"
                    align="center"
                    prop="salesVolume"
                  />
                  <el-table-column label="价格" align="center" width="120">
                    <template slot-scope="scope">
                      {{ scope.row.originalPrice }}元/{{ scope.row.unit }}
                    </template>
                  </el-table-column>
                  <el-table-column label="类型" align="center" width="120">
                    <template slot-scope="scope">
                      {{
                        scope.row.spuType == 0
                          ? "农商商品"
                          : scope.row.spuType == 1
                          ? "同城秒送商品"
                          : scope.row.spuType == 2
                          ? "会员专区"
                          : ""
                      }}
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-col :span="24" style="text-align: center">
        <el-button @click="submitForm(1)">上一步</el-button>
        <el-button type="primary" @click="submitForm(3)">下一步</el-button>
      </el-col>
    </div>

    <!-- 第三步 -->
    <div v-if="steps == 3">
      <h3>配置获得抽奖次数任务</h3>
      <div
        style="background: #f4f4f4; padding: 20px; margin-top: 20px"
        v-for="(item, index) in shopInfo.storeRaffleTaskVoList"
        :key="index"
      >
        <el-form ref="form3" :model="item" label-width="160px">
          <el-row style="width: 90%">
            <el-col :span="18">
              <el-form-item label="任务类型:" prop="taskType">
                <el-radio-group v-model="item.taskType" disabled>
                  <el-radio :label="0">浏览商品</el-radio>
                  <el-radio :label="1">加购商品</el-radio>
                  <el-radio :label="2">店铺下单</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                v-if="item.taskType != 2"
                :label="
                  item.taskType == 0
                    ? '浏览时间(秒)'
                    : item.taskType == 1
                    ? '加购商品数量'
                    : ''
                "
                prop="taskVal"
              >
                <el-input
                  v-model="item.taskVal"
                  style="width: 300px"
                  readonly
                  :placeholder="
                    item.taskType == 0
                      ? '请输入浏览时间'
                      : item.taskType == 1
                      ? '加购商品数量'
                      : ''
                  "
                ></el-input>
              </el-form-item>
              <el-form-item label="奖励抽奖次数" prop="rewardNum">
                <el-input
                  v-model="item.rewardNum"
                  style="width: 300px"
                  readonly
                ></el-input>
              </el-form-item>

              <el-form-item label="完成任务限制" prop="taskLimitType">
                <el-radio-group v-model="item.taskLimitType" disabled>
                  <el-radio :label="0">活动时间限制次数</el-radio>
                  <el-radio :label="1">每天限制次数</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="可完成任务次数" prop="taskLimitNum">
                <el-input
                  v-model="item.taskLimitNum"
                  style="width: 300px"
                  readonly
                ></el-input>
                <div v-if="item.taskType == 2" style="color: orange">
                  避免用户下单后退单,以此来获得抽奖机会薅羊毛,建议奖励抽奖次数配置少一点
                </div>
              </el-form-item>
              <el-form-item label="选择商品" prop="userLimitNum"  v-if="item.taskType != 2">
                <el-table
                  v-if="item.spuList"
                  v-loading="loading"
                  :data="item.spuList"
                  row-key="id"
                >
                  <!-- <el-table-column type="selection" width="55" align="center" /> -->
                  <el-table-column label="商品Id" align="center" prop="id" />
                  <el-table-column label="商品信息" align="center">
                    <template slot-scope="scope">
                      <div
                        style="
                          display: flex;
                          flex-direction: row;
                          justify-content: space-between;
                          align-items: center;
                        "
                      >
                        <el-image
                          style="width: 30px; height: 30px"
                          :src="scope.row.pic"
                          :preview-src-list="[scope.row.pic]"
                        >
                        </el-image>
                        <div
                          :title="scope.row.title"
                          style="
                            width: 80px;
                            height: auto;
                            word-wrap: break-word;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                          "
                        >
                          {{ scope.row.title }}
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="分类"
                    align="center"
                    prop="categoryName"
                  />
                  <el-table-column label="商品状态" align="center">
                    <template slot-scope="scope">
                      {{
                        scope.row.spuStatus == 2
                          ? "售罄"
                          : scope.row.spuStatus == 0
                          ? "上架"
                          : scope.row.spuStatus == 1
                          ? "下架"
                          : ""
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="销量"
                    align="center"
                    prop="salesVolume"
                  />
                  <el-table-column label="价格" align="center" width="120">
                    <template slot-scope="scope">
                      {{ scope.row.originalPrice }}元/{{ scope.row.unit }}
                    </template>
                  </el-table-column>
                  <el-table-column label="类型" align="center" width="120">
                    <template slot-scope="scope">
                      {{
                        scope.row.spuType == 0
                          ? "农商商品"
                          : scope.row.spuType == 1
                          ? "同城秒送商品"
                          : scope.row.spuType == 2
                          ? "会员专区"
                          : ""
                      }}
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-form ref="form4" label-width="160px">
        <el-form-item label="活动规则" prop="taskType">
          <el-input
            type="textarea"
            :rows="20"
            placeholder="请输入内容"
            v-model="contont"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <el-col :span="24" style="text-align: center">
        <el-button @click="submitForm(2)">上一步</el-button>
        <el-button @click="close" type="primary">返回列表</el-button>
        <!-- <el-button type="primary" @click="submitFormOK">保存并发布</el-button> -->
      </el-col>
    </div>
  </div>
</template>

<script>
import { storeRaffleSave, storeRaffleInfo } from "@/api/marketing/lottery";
import voucherSpuList from "./components/spulist.vue";
import voucherList from "../../voucher/components/list.vue";
import axios from "axios";
import moment from "moment";
import { getToken } from "@/utils/auth";
export default {
  components: { voucherList, voucherSpuList },
  data() {
    return {
      SpuDialog: false,
      VoucherDialog: false,
      headers: {
        Auth: "Bearer " + getToken(),
        "Content-type": "multipart/form-data",
      },
      steps: 1,
      shopInfo: {
        storeRaffle: {
          title: "",
          dateRange: [],
          pic: "",
          userLimitNum: "1",
          joinType: 0,
          orderStartTime: "",
          orderEndTime: "",
          startTime: "",
          endTime: "",
        },

        storeRaffleGiftVoList: [
          {
            discountRatio: "",
            giftIds: "",
            giftNum: "",
            giftRatio: "",
            giftType: 0,
          },
        ],
        storeRaffleTaskVoList: [
          {
            rewardNum: "",
            taskIds: "",
            taskLimitNum: "",
            taskLimitType: 0,
            taskType: 0,
            taskVal: "",
          },
        ],
      },
      selectRow: {},
      selectSpuRow: {},
      spuRemoveList: [],
      contont: "",
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      storeRaffleInfo(this.$route.query.id).then((res) => {
        if (res.code == 200) {
          this.shopInfo = res.data;
          if (this.shopInfo.storeRaffle.startTime) {
            const startTime = new Date(this.shopInfo.storeRaffle.startTime);
            const endTime = new Date(this.shopInfo.storeRaffle.endTime);
            this.shopInfo.storeRaffle.dateRange = [startTime, endTime];
          }
          // if (this.shopInfo.storeRaffleGiftList) {
          //   this.shopInfo.storeRaffleGiftList.forEach((e) => {
          //     if (e.giftRatio) {
          //       e.giftRatio = e.giftRatio * 100;
          //     }
          //     if (e.discountRatio) {
          //       e.discountRatio = e.discountRatio * 100;
          //     }
          //   });
          // }
          if (this.shopInfo.storeRaffle.startTime) {
            const orderStartTime = new Date(
              this.shopInfo.storeRaffle.orderStartTime
            );
            const orderEndTime = new Date(
              this.shopInfo.storeRaffle.orderEndTime
            );
            this.shopInfo.storeRaffle.dateRange1 = [
              orderStartTime,
              orderEndTime,
            ];
          }
        }
      });
    },

    close() {
      this.$store.dispatch("tagsView/delView", this.$route); //关闭当前页
      this.$router.replace({
        path: "/marketing/marketing/lottery/index",
      });
    },

    submitForm(index, type) {
      if (index == 3) {
        this.addRule();
      }
      this.steps = index;
    },

    addRule() {
      this.contont = `
            一、活动主题
      【抽取免单大礼】
      二、活动时间
    ${moment(this.shopInfo.storeRaffle.startTime).format(
      "YYYY-MM-DD"
    )}-${moment(this.shopInfo.storeRaffle.endTime).format("YYYY-MM-DD")}

      三、活动参与要求
      1）用户需在农商直采平台注册登录

    ${
      this.shopInfo.storeRaffle.joinType == 1
        ? "2）需在" +
          moment(this.shopInfo.storeRaffle.orderStartTime).format(
            "YYYY-MM-DD"
          ) +
          moment(this.shopInfo.storeRaffle.orderEndTime).format("YYYY-MM-DD") +
          "内，在陕西农商网（店铺名称）有过下单行为，且累计满足" +
          this.shopInfo.storeRaffle.orderFullAmount +
          "元"
        : ""
    }

      四、活动方式
      1）活动期间内，完成农商直采平台注册登录，每个用户ID可有X次抽奖机会，注销后重新注册无法参与活动。
      2）可通过完成其他方式获得抽奖次数
      浏览商品${
        this.shopInfo.storeRaffleTaskVoList[0].taskType == 0
          ? this.shopInfo.storeRaffleTaskVoList[0].taskVal
          : "0"
      }s，获得${this.shopInfo.storeRaffleTaskVoList[0].rewardNum}次抽奖机会
      加购X件商品至购物车，获得${
        this.shopInfo.storeRaffleTaskVoList[0].rewardNum
      }次抽奖机会
      在陕西农商云（店铺名称）店铺内下单任意商品，获得${
        this.shopInfo.storeRaffleTaskVoList[0].rewardNum
      }次抽奖机会
      五、奖品信息
      1）店铺${
        this.shopInfo.storeRaffleGiftVoList[0].giftType == 0
          ? this.shopInfo.storeRaffleGiftVoList[0].giftNum
          : 0
      }元代金券
      2）下单店铺商品，可享免单（固定商品选其一，${
        this.shopInfo.storeRaffleGiftVoList[0].giftType == 1
          ? this.shopInfo.storeRaffleGiftVoList[0].giftNum
          : 0
      }件免单）
      3）下单店铺商品，可享低折优惠（固定商品选其一，${
        this.shopInfo.storeRaffleGiftVoList[0].giftType == 2
          ? this.shopInfo.storeRaffleGiftVoList[0].giftNum
          : 0
      }件享受低折，）
      获奖须知虚拟奖品:(1)代金券:获奖者代金券成功领取后将自动存入获奖者的券包，可在农商直采“我的、代金券"中查询并至XXXXX（店铺名称）使用。(2)免单商品：获奖者请及时领取下单，如超过活动时间未进行下单，将无法保证领取资格。(3)下单折扣：获奖者请及时领取下单，如超过活动时间未进行下单，将无法保证领取资格。
      六、温馨提示
      1）活动参与者应仔细阅读本活动须知，参与本活动则视为已阅读、知晓并同意遵守本次活动规则。系统发生故障或遭受第三方攻击及其他主办方无法控制的情形，主办不对因网络传输原因而导致参加者提交的信息错误承担任何责任。如遇不可抗力、网络突发故障范围内，主办方对前述情形所导致的一后果不承担任何责任，并有权相应地取消、终止、修改、暂停或延迟本次活动。
      2）为保证活动公平，若发现有参与者使用任何不正当手段参加活动，主办方有权在不事先通知的前提下取消其活动参与及获奖资格，包括但不限于：使用非法工具分享、下载、安装、注册、登陆多个账号及其他不正当手段进行的恶意刷量行为，使用相同地址收件及不遵守本活动规则参与活动，影响活动正常有序进行的其他行为。
      3）禁止利用抽奖活动进行赌博活动等违法违规行为；若在活动前后发现违法违规行为，不仅限于冒用欺诈、赌博、冒用他人身份等用户，主办方有权取消活动参与资格及中奖资格。
      4）未满18周岁的消费者需在家长(即法定监护人)的陪伴下参加本次活动并行使相关权利
            `;

      console.log(this.shopInfo);
    },
  },
};
</script>

<style></style>
