
<template>
  <div class="addActivity app-container">
    <el-form
      :model="setQuery"
      ref="setQuery"
      :rules="rules"
      v-loading="loading"
      label-width="170px"
      :disabled="mode == 'detail'"
    >
          <el-form-item label="活动名称：" prop="raffleName">
            <el-input
              v-model="setQuery.raffleName"
              class="item-width-300"
              placeholder="请输入活动名称"
            ></el-input>
          </el-form-item>

           <el-form-item label="活动类型：">
            <el-radio-group v-model="setQuery.raffleType">
                <el-radio :label="1">普通活动</el-radio>
                <el-radio :label="2">会员专属活动</el-radio>
            </el-radio-group>
          </el-form-item>

           <el-form-item label="排序：" prop="sort">
            <el-input
              v-model="setQuery.sort"
              class="item-width-300"
              placeholder="请输入排序"
            ></el-input>
          </el-form-item>

           <el-form-item label="活动周期类型：">
            <el-radio-group v-model="setQuery.raffleCycle">
                <el-radio :label="1">固定日期范围</el-radio>
                <el-radio :label="2">周循环</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-if="setQuery.raffleCycle == 1" label="活动时间：" prop="endTime">
             <el-date-picker
            v-model="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            class="item-width-350"
            type="datetimerange"
            :default-time="['00:00:00', '23:59:00']"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          
          <el-form-item label="选择循环周期：" v-else prop="raffleCycleContent">
             <el-checkbox-group v-model="setQuery.raffleCycleContent">
              <el-checkbox :label="1">周一</el-checkbox>
              <el-checkbox :label="2">周二</el-checkbox>
              <el-checkbox :label="3">周三</el-checkbox>
              <el-checkbox :label="4">周四</el-checkbox>
              <el-checkbox :label="5">周五</el-checkbox>
              <el-checkbox :label="6">周六</el-checkbox>
              <el-checkbox :label="7">周天</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

           <el-form-item  label="活动封面：" prop="coverImg">
            <Upload
              width="100px"
              height="100px"
              id="coverImg"
              type="coverImg"
              :imgUrl="setQuery.coverImg"
              @uploadEnd="uploadEnd"
              :disabled="mode == 'detail'"
            ></Upload>
          </el-form-item>

          <el-form-item label="活动背景：" prop="backImg">
            <Upload
              width="100px"
              height="100px"
              type="backImg"
              id="backImg"
              :imgUrl="setQuery.backImg"
              @uploadEnd="uploadEnd"
              :disabled="mode == 'detail'"
            ></Upload>
          </el-form-item>

            <el-form-item label="是否开启：">
            <el-radio-group v-model="setQuery.raffleStatus">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>

            <el-form-item label="是否展示：">
            <el-radio-group v-model="setQuery.raffleState">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="奖品选择：" prop="prizes">
          <el-button type="primary" size="small" @click="handleAdd">添加奖品</el-button>

           <el-table
              :data="setQuery.prizes"
              tooltip-effect="dark"
              border
              style="width: 100%"
            >
              <el-table-column
                align="center"
                label="图标"
                prop="prizeImg"
                show-overflow-tooltip
              >
              <template slot-scope="scope">
                <img :src="scope.row.prizeImg" class="img" alt="">
                </template>
              </el-table-column>
               <el-table-column
                align="center"
                label="图片"
                prop="prizeIcon"
                show-overflow-tooltip
              >
              <template slot-scope="scope">
                <img :src="scope.row.prizeIcon" class="img" alt="">
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="名称"
                prop="prizeName"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="奖品类型"
                prop="prizeType"
                show-overflow-tooltip
              >
              <template slot-scope="scope">
                {{ prizeTypeObj[scope.row.prizeType] }}
                </template>
              </el-table-column>
            
              <el-table-column
                align="center"
                label="数量"
                prop="prizeNum"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="奖品权重"
                prop="prizeWeight"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="奖品概率"
                prop="probability"
                show-overflow-tooltip
              >
               <template slot-scope="scope">
                  {{scope.row.probability + '%'}}
                </template>
              </el-table-column>
               <el-table-column
                align="center"
                label="中奖范围"
                prop="prizeRang"
                show-overflow-tooltip
              >
              </el-table-column>
               <el-table-column
                align="center"
                label="中奖周期限制"
                prop="showPrizeWeight"
                show-overflow-tooltip
              >
              <template slot-scope="scope">
                {{scope.row.prizeLotteryType | filterType}}
              </template>
              </el-table-column>
               <el-table-column
                align="center"
                label="中奖数量限制"
                prop="prizeLotteryNum"
                show-overflow-tooltip
              >
              </el-table-column>
               <el-table-column
                align="center"
                label="发货方式"
                prop="sendType"
                show-overflow-tooltip
              >
              <template slot-scope="scope">
                {{sendTypeObj[scope.row.sendType]}}
              </template>
              </el-table-column>

              <el-table-column prop="address" align="center" label="操作">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="handleEdit(scope.row,scope.$index)">编辑</el-button>
                  <el-button type="text" size="small" @click="handleDel(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
         


          <!-- <el-form-item label="活动详情：" prop="activityDetail">
            <div style="border: 1px solid #ccc; width: 500px">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
                :mode="editorMode"
              />
              <Editor
                style="height: 500px; overflow-y: hidden"
                v-model="setQuery.activityDetail"
                :defaultConfig="editorConfig"
                :mode="editorMode"
                @onCreated="onCreated"
              />
            </div>
          </el-form-item> -->

    </el-form>

    <div class="btn-group" v-if="mode != 'detail'">
      <el-button>取 消</el-button>
      <el-button type="primary" :loading="loading" @click="save"
        >确 定</el-button
      >
    </div>


    <el-dialog :title="title" width="750px" :visible.sync="dialogFormVisible">
    <el-form label-width="130px" :model="form"
      ref="form"
      :rules="rules1">
       
        <el-form-item label="奖品类型：">
          <el-radio-group v-model="form.prizeType" @input="changeType">
              <el-radio :label="1">加油券</el-radio>
              <el-radio :label="2">视频会员</el-radio>
              <el-radio :label="3">商品</el-radio>
              <el-radio :label="4">文字描述</el-radio>
              <el-radio :label="5">未中奖</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择：" v-if="form.prizeType == 1||form.prizeType == 2||form.prizeType == 3" prop="prizeContent">
         <el-input
            v-if="form.prizeContent"
            v-model="form.prizeContentDetail"
            disabled
            class="item-width-300"
            ></el-input>
          <el-button  type="primary" size="small" @click="choose(form.prizeType)">选择</el-button>

        </el-form-item>
         <el-form-item label="奖品图片：" prop="prizeImg">
          <Upload
            type="prizeImg"
            id="prizeImg"
            width="250px"
            height="150px"
            uploadType="OTHER"
            :imgUrl="form.prizeImg"
            @uploadEnd="uploadEnd1"
          ></Upload>
        </el-form-item>

          <el-form-item label="奖品图标：" prop="prizeIcon">
          <Upload
            type="prizeIcon"
            id="prizeIcon"
            width="250px"
            height="150px"
            uploadType="OTHER"
            :imgUrl="form.prizeIcon"
            @uploadEnd="uploadEnd1"
          ></Upload>
        </el-form-item>
     
        <el-form-item label="奖品名称"  prop="prizeName">
            <el-input
            v-model="form.prizeName"
            :maxlength="8"
            show-word-limit
            class="item-width-300"
            ></el-input>
        </el-form-item>
        <el-form-item label="奖品数量"  prop="prizeNum" v-if="form.prizeType != 5">
            <el-input
            v-model.number="form.prizeNum"
            class="item-width-300"
            ></el-input>
        </el-form-item>
        <el-form-item label="奖品概率"  prop="probability">
            <el-input
            v-model="form.probability"
            class="item-width-300"
            ></el-input>
        </el-form-item>
         <!-- <el-form-item label="显示区域权重"  prop="showPrizeWeight">
            <el-input
            v-model.number="form.showPrizeWeight"
            class="item-width-300"
            ></el-input>
        </el-form-item> -->
         <el-form-item label="奖品说明"  prop="prizeMsg">
            <el-input
            v-model="form.prizeMsg"
            class="item-width-300"
            ></el-input>
        </el-form-item>
        <template v-if="form.prizeType != 5">
          <el-form-item label="奖品有效期"  prop="valid">
            中奖后请在
              <el-input
              v-model.number="form.valid"
              class="item-width-100"
              ></el-input>
              天内进行领取，过期失效
          </el-form-item>
          <el-form-item label="发货方式：" prop="sendType">
            <el-radio-group v-model="form.sendType" >
              <template v-if="form.prizeType == 3 ||form.prizeType == 4 ||form.prizeType == 5">
                <el-radio :label="1">线下自提</el-radio>
                <el-radio :label="2">邮寄发货</el-radio>
              </template>
                <el-radio v-else :label="3" >线上发货</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="自提地址：" v-if="form.sendType == 1"  prop="address">
              <el-input
              v-model="form.address"
              class="item-width-300"
              ></el-input>
          </el-form-item>
        </template>


        <el-form-item label="中奖范围："  prop="prizeRang">
            <el-select v-model="form.prizeRang" class="item-width-300" multiple placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="中奖周期限制："  prop="prizeLotteryType">
            <el-select v-model="form.prizeLotteryType" class="item-width-300" placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="中奖数量限制："  prop="prizeLotteryNum" v-if="form.prizeType != 5 &&form.prizeLotteryType != -1">
            <el-input
            v-model.number="form.prizeLotteryNum"
            class="item-width-300"
            ></el-input>
        </el-form-item>

    </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="save1">确 定</el-button>
  </div>
</el-dialog>


<el-dialog title="选择" width="70%" :visible.sync="dialogTableVisible" custom-class="table-dialog" append-to-body>
      
    

    <div v-if="form.prizeType == 1" key="1">
          <div class="search">
            <div>
                <el-input
                v-model="couponQuery.couponName"
                size="small"
                clearable
                placeholder="请输入活动名称"
                class="item-width-200 "
                ></el-input>
                
                <el-button
                class="ml10"
                type="primary"
                size="small"
                icon="el-icon-search"
                @click="handleSearch"
            >
                搜索
            </el-button>
            </div>
        </div>
          <el-table
        :data="tableData"
        tooltip-effect="dark"
        border
        v-loading="loading2"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          label="选择"
          prop="id"
          show-overflow-tooltip
        >
        <template slot-scope="scope">
          <el-radio v-model="form.prizeContent" :label="scope.row.id" @input="selectCoupon($event,scope.row.couponName)"></el-radio>
          </template>
        </el-table-column>
        <el-table-column
          prop="couponName"
          align="center"
          label="优惠券名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="surplusNum"
          align="center"
          label="剩余数量"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="useNum"
          align="center"
          label="已使用"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          align="center"
          label="创建时间"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
      <div class="page-box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :current-page="couponQuery.currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="couponQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <div v-else-if="form.prizeType == 2" key="2">
      <div class="search">
            <div>
                <el-input
                v-model="query.title"
                size="small"
                clearable
                placeholder="请输入名称"
                class="item-width-200 "
                ></el-input>
                
                <el-button
                class="ml10"
                type="primary"
                size="small"
                icon="el-icon-search"
                @click="handleSearch1"
            >
                搜索
            </el-button>
            </div>
        </div>
          <el-table
        :data="tableData1"
        tooltip-effect="dark"
        border
        v-loading="loading1"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          label="选择"
          prop="pid"
          show-overflow-tooltip
        >
        <template slot-scope="scope">
          <el-radio v-model="form.prizeContent" :label="scope.row.pid" @input="selectCoupon($event,scope.row.title)"></el-radio>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          align="center"
          label="视频会员名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="salePrice"
          align="center"
          label="价格"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
      <div class="page-box">
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          background
          :current-page="query.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="query.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total1"
        >
        </el-pagination>
      </div>
    </div>
    <div v-else-if="form.prizeType == 3" key="3">
      <div class="search">
            <div>
                <el-input
                v-model="query1.goodsName"
                size="small"
                clearable
                placeholder="请输入商品名称"
                class="item-width-200 "
                ></el-input>
                
                <el-button
                class="ml10"
                type="primary"
                size="small"
                icon="el-icon-search"
                @click="handleSearch2"
            >
                搜索
            </el-button>
            </div>
        </div>
          <el-table
        :data="tableData2"
        tooltip-effect="dark"
        border
        v-loading="loading3"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          label="选择"
          prop="goodsId"
          show-overflow-tooltip
        >
        <template slot-scope="scope">
          <el-radio v-model="form.prizeContent" :label="scope.row.goodsId" @input="selectCoupon($event,scope.row.goodsName)"></el-radio>
          </template>
        </el-table-column>
         <el-table-column
          align="center"
          label="商品图片"
          prop="setMealCode"
          show-overflow-tooltip
        >
        <template slot-scope="scope">
          <img :src="scope.row.goodsImg" class="img" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="goodsName"
          align="center"
          label="商品名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="goodsType"
          align="center"
          label="类型"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{goodsTypeObj[scope.row.goodsType]||scope.row.goodsType}}
          </template>
        </el-table-column>
        <el-table-column
          prop="shopName"
          align="center"
          label="店铺名称"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
      <div class="page-box">
        <el-pagination
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          background
          :current-page="query1.currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="query1.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total2"
        >
        </el-pagination>
      </div>
    </div>
    </el-dialog>




  </div>
</template>

<script>
import {getLuckyDrawDetail,saveOrUpdateLuckyDraw} from '@/api/luckyDraw.js'
import Upload from "@/components/Upload";
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import OSS from "ali-oss";
import { requestUploadImg, finishUploadImg,getList } from "@/api/common";
import { getCouponList } from "@/api/coupon";
import {getGoodsList,goodsList} from '@/api/goods'

export default Vue.extend({
  components: {
    Upload,
    Editor,
    Toolbar,
  },
  data() {
    let validateProbability = (rule, value, callback) => {
        if (isNaN(value)) {
          callback(new Error('请输入数字或小数'));
        } else {
          callback();
        }
      }
    
    return {
      prizeTypeObj:{
        1:'优惠券',
        2:'视频会员',
        3:'商品',
        4:'文字描述',
        5:'未中奖'
      },
      sendTypeObj:{
        1:'线下自提',
        2:'邮寄发货',
        3:'线上发货',
      },
      goodsTypeObj:{},
      total:0,
      total1:0,
      total2:0,
      loading1:false,
      loading2:false,
      loading3:false,
      tableData:[],
      tableData1:[],
      tableData2:[],
      editIndex:0,
      options:[
        {
          label:'非会员',
          value:'0'
        },
      ],
      options1:[
        {
          label:'每日',
          value:1
        },
        {
          label:'每周',
          value:2
        },
        {
          label:'每月',
          value:3
        },
        {
          label:'无限制',
          value:-1
        }
      ],
      title:'',
      dialogTableVisible:false,
      dialogFormVisible:false,
      status:'',
      date:'',
      editor: null,
      editorMode: "default", // or 'simple'
      toolbarConfig: {},
      editorConfig: {
        placeholder: "请输入内容...",
        MENU_CONF: {
          uploadImage: {
            // 自定义上传
            customUpload(file, insertFn) {
              // file 即选中的文件
              requestUploadImg({
                fineName: file.name,
                operate: "OTHER",
              }).then((res) => {
                if (res.state == "Success") {
                  const client = new OSS({
                    // yourregion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
                    region: res.content.endPoint.split(".")[0],
                    // 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
                    accessKeyId: res.content.token.accessKeyId,
                    accessKeySecret: res.content.token.accessKeySecret,
                    // 填写Bucket名称。
                    bucket: res.content.bucket,
                    stsToken: res.content.token.securityToken,
                  });

                  client
                    .multipartUpload(res.content.paths[0].join("/"), file)
                    .then((r) => {
                      // 上传完成
                      finishUploadImg([{ path: res.content.paths[0] }]).then(
                        (msg) => {
                          if (msg.state == "Success") {
                            let url =
                              "http://" +
                              res.content.bucket +
                              "." +
                              res.content.endPoint +
                              "/" +
                              res.content.paths[0].join("/");
                            insertFn(url, "", "");
                          }
                        }
                      );
                    })
                    .catch((err) => {
                      console.log(err); //上传失败之后
                    });
                }
              });
            },
          },
        },
      },
      mode: "add",
      loading: false,
      limited:1,
      setQuery: {
        "backImg": "",
        "coverImg": "",
        "endTime": "",
        "prizes": [
          // {
          //   "prizeIcon": "",
          //   "prizeImg": "",
          //   "prizeMsg": "",
          //   "prizeName": "",
          //   "prizeNum": 0,
          //   "prizeRang": "",
          //   "prizeType": 0,
          //   "prizeWeight": 0,
          //   "probability":0,
          //   "sendType": 0,
          //   "showPrizeWeight": 0,
          //   "valid": 0
          // }
        ],
        "raffleCycle": 1,
        "raffleCycleContent": [],
        "raffleName": "",
        "raffleState": 1,
        "raffleStatus": 1,
        "raffleType": 2,
        "sort": 0,
        "startTime": ""
      },
      form:{

      },
      couponQuery: {
         couponName:'',
        startTime:'',
        endTime:'',
        couponType: 3,
        status:'2',
        currentPage: 1,
        pageSize: 10,
      },
      query:{
          title:'',
          regionCode:'520100',
					productType:['Recharge'],
					page:0,
					size:10
      },
      query1: {
        applyState:'',
        status: '3',
        goodsName: "",
        currentPage: 1,
        pageSize: 10,
      },
      couponName:'',
      rules:{
          raffleName: [
            { required: true, message: "请输入活动名称", trigger: "blur" },
          ],
          endTime: [
            { required: true, message: "请选择活动时间", trigger: "change" },
          ],
           raffleCycleContent: [
            { required: true, message: "请选择循环周期", trigger: "change" },
          ],
          coverImg: [
            { required: true, message: "请上传活动封面", trigger: "change" },
          ],
          backImg: [
            { required: true, message: "请上传活动主图", trigger: "change" },
          ],
          prizes:[
            { type:'array',required: true, message: "请添加奖品", trigger: "change" },
          ],
  
        },
      rules1:{
        
          prizeContent: [
            { required: true, message: "请选择", trigger: "change" },
          ],
          prizeIcon: [
            { required: true, message: "请上传奖品图标", trigger: "change" },
          ],
          prizeImg: [
            { required: true, message: "请上传奖品图片", trigger: "change" },
          ],
           prizeRang: [
            { required: true, message: "请选择中奖范围", trigger: "change" },
          ],
          prizeName: [
            { required: true, message: "请输入奖品名称", trigger: "blur" },
          ],
          prizeMsg: [
            { required: true, message: "请输入奖品说明", trigger: "blur" },
          ],
          prizeNum: [
            { required: true, message: "请输入奖品数量", trigger: "blur" },
            { type:'number',min:1,max:9999999999, message: "数量应在1-9999999999", trigger: "blur" },
          ],
          valid: [
            { required: true, message: "请输入有效期", trigger: "blur" },
            { type:'number',min:0,max:9999999999, message: "有效期需要数字", trigger: "blur" },
          ],
           sendType: [
            { required: true, message: "请选择发货方式", trigger: "change" },
          ],
          probability: [
            { required: true, message: "请输入概率", trigger: "blur" },
             { validator: validateProbability, trigger: 'blur' }
          ],
          prizeWeight: [
            { required: true, message: "请输入权重", trigger: "blur" },
          ],
           showPrizeWeight: [
            { required: true, message: "请输入显示权重", trigger: "blur" },
          ],
            address: [
            { required: true, message: "请输入显示地址", trigger: "blur" },
          ],
           prizeLotteryType: [
            { required: true, message: "请选择中奖周期限制", trigger: "change" },
          ],
           prizeLotteryNum: [
            { required: true, message: "请输入中奖数量限制", trigger: "blur" },
          ],
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },

  watch: {
    date(val){
      if(val){
        this.setQuery.startTime = val[0]
        this.setQuery.endTime = val[1]
      }else{
        this.setQuery.startTime = ''
        this.setQuery.endTime = ''
      }
    },
  
  },
  filters: {
    filterType(val) {
     let arr = [
        {
          label:'每日',
          value:1
        },
        {
          label:'每周',
          value:2
        },
        {
          label:'每月',
          value:3
        },
        {
          label:'无限制',
          value:-1
        }
      ]
      let msg = ''
      arr.forEach(item=>{
        if(item.value == val){
          msg = item.label
        }
      })
      return msg
    }
   },
  methods: {
    changeType(val){
      console.log('类型变化',val);
      if(val == 1 || val == 2){
        this.form.sendType = 3
      }else if(val == 3 || val == 4 || val == 5){
        this.form.sendType = 1
      }


      // this.form.prizeContent = ''
      this.$set(this.form,'prizeContent','')
    },
    choose(type){
      this.dialogTableVisible = true

      if(type == 1){
        this.handleSearch()
      }else if(type == 2){
        this.handleSearch1()
      }else if(type == 3){
        this.handleSearch2()
      }
    },
    // 优惠券搜索
    handleSearch(){
      this.couponQuery.currentPage = 1
      this.getCouponList();
    },
    handleSizeChange(val) {
      this.couponQuery.currentPage = 1;
      this.couponQuery.pageSize = val;
      this.getCouponList()
    },
    handleCurrentChange(val) {
      this.couponQuery.currentPage = val;
      this.getCouponList()
    },
    // 虚拟商品搜索
    handleSearch1(){
      this.query.page = 1
      this.getGoodsList();
    },
    handleSizeChange1(val) {
      this.query.page = 1;
      this.query.size = val;
      this.getGoodsList()
    },
    handleCurrentChange1(val) {
      this.query.page = val;
      this.getGoodsList()
    },
    // 商品搜索
    handleSearch2(){
      this.query1.currentPage = 1
      this.goodsList();
    },
    handleSizeChange2(val) {
      this.query1.currentPage = 1;
      this.query1.pageSize = val;
      this.goodsList()
    },
    handleCurrentChange2(val) {
      this.query1.currentPage = val;
      this.goodsList()
    },
    // 选择优惠券
    selectCoupon(e,name){
      console.log(e,name);
      // this.couponName = name
      this.$set(this.form,'prizeContentDetail',name)

    },
    // 小桔优惠券列表
    getCouponList(){
      this.loading2 = true
      getCouponList(this.couponQuery).then((res) => {
          this.loading2 = false;
          if (res.state == "Success") {
            this.tableData = res.content.records;
            this.total = res.content.total;
          }
        });
    },
    // 获取视频会员商品
    getGoodsList(){
      this.loading1 = true
      let query = JSON.parse(JSON.stringify(this.query))
      query.page--
      getGoodsList(query).then(res=>{
        this.loading1 = false
        if(res.state == 'Success'){
          this.tableData1 = res.content.content
          this.tableData1.map(item=>{
            item.salePrice = (item.salePrice/100).toFixed(2)
          })
          this.total1 = res.content.totalElements
        }
      })
    },
    // 商品列表
    goodsList(){
      this.loading3 = true
      goodsList(this.query1).then(res=>{
        this.loading3 = false
        if(res.state == 'Success'){
          this.tableData2 = res.content.records
          this.total2 = res.content.total
        }
      })
    },
    handleAdd(){
      this.dialogFormVisible = true
      this.title = '添加'
      this.form = {
            "prizeIcon": "",
            "prizeImg": "",
            "prizeMsg": "",
            "prizeName": "",
            "prizeNum": 1,
            "prizeRang": "",
            "prizeType": 1,
            "prizeWeight": 0,
            "probability": 0,
            "sendType": '',
            "showPrizeWeight": 0,
            "prizeContentDetail": '',
            "valid": 0,
            "address":"",
            "prizeContent":"",
            "prizeLotteryType":"",
            "prizeLotteryNum":"",
      }
    },
    handleEdit(row,index){
      this.dialogFormVisible = true
      this.title = '编辑'
      this.editIndex = index
       this.form = {
          "id": row.id,
          "prizeIcon": row.prizeIcon,
          "prizeImg": row.prizeImg,
          "prizeMsg": row.prizeMsg,
          "prizeName": row.prizeName,
          "prizeNum": row.prizeNum,
          "prizeRang": row.prizeRang.split(','),
          "prizeType": row.prizeType,
          "prizeWeight": row.prizeWeight,
          "probability": row.probability,
          "sendType": row.sendType,
          "showPrizeWeight": row.showPrizeWeight,
          "prizeContentDetail": row.prizeContentDetail,
          "valid": row.valid,
          "address":row.address,
          "prizeContent":Number(row.prizeContent),
          "prizeLotteryType":row.prizeLotteryType,
          "prizeLotteryNum":row.prizeLotteryNum, 
      }
      
    },

    handleDel(index){
      this.setQuery.prizes.splice(index,1)
    },
    validatePrice  (rule, value, callback) {
      if(value<0.01||value>999999){
        callback(new Error('价格只支持0.01~999999'));
      }else{
        callback()
      }
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
      if (this.mode == "detail") {
        this.editor.disable();
      }
    },
    uploadEnd(val) {
      console.log(val);
      this.setQuery[val.type] = val.url;
    },
    uploadEnd1(val) {
      console.log(val);
      this.form[val.type] = val.url;
    },
    save() {
      if(this.setQuery.prizes.length != 8){
        return this.$message.error('奖品必须设置为8个');
      }
      this.$refs.setQuery.validate((v) => {
        if (v) {
          this.loading = true;
          let obj = JSON.parse(JSON.stringify(this.setQuery))
            obj.raffleCycleContent = obj.raffleCycleContent.toString()
          saveOrUpdateLuckyDraw(obj).then((res) => {
            this.loading = false;
            if (res.state == "Success") {
              this.$notify({
                title: "成功",
                message: "操作成功",
                type: "success",
              });
              this.$router.push("/operationManage/luckyDrawManage/index");
            }else{
              this.loading = false;
            }
          });
        }else{
          this.$message.error('请检查是否有必填项未填');
        }
      });
    },

    save1(){
       this.$refs.form.validate((v) => {
        if (v) {
          let obj = JSON.parse(JSON.stringify(this.form))
          obj.prizeRang = obj.prizeRang.join()
          if(this.title == '添加'){
            this.setQuery.prizes.push(obj)
          }else{
            this.setQuery.prizes.splice(this.editIndex,1,obj)
          }
          this.dialogFormVisible = false
        }else{
          this.$message.error('请检查是否有必填项未填');
        }
      });
    },

    // 详情
    get() {
      this.loading = true;
      let raffleId = this.$route.query.id
      getLuckyDrawDetail({raffleId,regionCode:'520100'}).then((res) => {
        this.loading = false;
        if (res.state == "Success") {
          this.setQuery = res.content;
          if(this.setQuery.raffleCycle == 2){
            this.setQuery.raffleCycleContent = this.setQuery.raffleCycleContent.split(',').map(Number)
          }else{
             this.setQuery.raffleCycleContent = []
          }
          // this.setQuery.id = id
          // this.date = [this.setQuery.startTime+':00',this.setQuery.endTime+':00']
        }
      });
    },
    getList() {
      getList({currentPage:1,pageSize:99,status:1}).then((res) => {
        if (res.state == "Success") {
          res.content.records.map(item=>{
            this.options.push({
              label:item.setMealName,
              value:item.setMealCode
            })
          })
        }
      });
    },

  },
  created() {
    this.goodsTypeObj = JSON.parse(sessionStorage.getItem('goodsTypeObj')) 
    this.getList()
    this.mode = this.$route.query.mode || "add";
    this.status = this.$route.query.status
    if (this.$route.query.id) {
        this.get();
    }
  },
})
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

<style lang="scss" >
@import "@/styles/element-variables";
.table-dialog{
  .img{
    width: 40px!important;
    height: 40px!important;
  }
}
.addActivity {
  padding-bottom: 40px;
  .cell{
    .img{
    width: 40px!important;
    height: 40px!important;
  }
  }
  .item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    .ml20{
      margin-left: 20px !important;
    }
    .mb20{
      margin-bottom: 20px;
    }
    .textarea textarea{
      height: 40px;
    }
    .icon {
      font-size: 18px;
      font-weight: bold;
      margin-left: 10px;
      cursor: pointer;
      margin-top: 10px;
    }
    .box {
    }
  }
  .btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
  }


}
</style>
