<template>
  <el-form class="dm-wrap" :model="form"  ref="form" :rules="rules" label-width="120px">
    <el-form-item prop="proName" label="礼品标题">
      <dm-input controls-position="right" placeholder="请输入礼品标题" :disabled="isInfo" v-model="form.proName" class="w300" :maxlength="20"></dm-input>
    </el-form-item>
    <el-form-item label="礼品主图" class="is-required">
      <div class="member-upload-image">
        <p class="gray fz13">规格750*750，大小≤1M</p>
        <vue-gic-upload-image
            :projectName="projectName"
            :wxFlag="wxFlag"
            :actionUrl="actionUrl"
            :imageList="imageList"
            :limitW="limitW"
            :limitH="limitH"
            :imgSize="imgSize"
            :maxImageLength="maxlength"
            @uploadOnSuccess="uploadOnSuccess"
            @sortImg="sortImg"
            @deleteImage="deleteImage">
        </vue-gic-upload-image>
      </div>
        <!-- <dm-upload-avatar :model.sync="form.giftImg" label="上传图片" tips="规格750*750，大小≤1M"></dm-upload-avatar> -->
    </el-form-item>
    <el-form-item prop="proCategoryId" label="礼品分组">
      <el-select v-model="form.proCategoryId"  placeholder="请选择" class="w300">
        <el-option v-for="(v,i) in categoryOptions" :key="i" :label="v.categoryName" :value="v.integralMallCategoryId">
          <span class="fl">{{v.categoryName}}</span>
          <el-button class="fr" type="text" @click.stop="deleteCategory(v.integralMallCategoryId)">x</el-button>
        </el-option>
      </el-select>
      <el-button type="text" @click="createCategory">新建分组</el-button>
    </el-form-item>
    <el-form-item prop="integralCost" label="积分费用">
      <el-input-number class="w300" controls-position="right" :disabled="isInfo || isEdit" v-model="form.integralCost" :precision="0" :step="1" :min="0" ></el-input-number>
    </el-form-item>
    <el-form-item prop="cashCost" label="现金费用">
      <el-input-number controls-position="right" :disabled="isInfo || isEdit" v-model="form.cashCost" class="w300" :precision="2" :step="0.1" :min="0"></el-input-number>
    </el-form-item>
    <el-form-item prop="costValue" label="礼品成本">
      <el-input-number controls-position="right" :disabled="isInfo || isEdit" v-model="form.costValue" class="w300" :precision="2" :step="0.1" :min="0"></el-input-number>
    </el-form-item>
    <el-form-item prop="limitTimes" label="次数限制">
      <el-checkbox :disabled="isInfo" v-model="isLimitTimes"> 每个会员限制兑换
      </el-checkbox>
      <el-input-number controls-position="right" :disabled="isInfo" v-model="form.limitTimes" class="w100" :precision="0" :min="0"></el-input-number> 次
    </el-form-item>
    <el-form-item prop="memberGradeArr" label="适用会员">
      <el-select v-model="form.memberGradeArr" multiple placeholder="请选择" class="w300">
        <el-option v-for="item in memberGradeOptions" :key="item.gradeId" :label="item.gradeName" :value="item.gradeId"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="展现门店" class="is-required">
      <vue-gic-store-linkage :disabled="isInfo" :msg="sendChildData" ref="selectTree" @sendSelectGroupData="getSelectGroupData"></vue-gic-store-linkage>
    </el-form-item>
    <el-form-item prop="exchangeDateType" label="兑换日期" class="is-required">
      <el-radio-group v-model="form.exchangeDateType" style="line-height:inherit;">
        <div class="mb10"><el-radio :label="1">全部日期</el-radio></div>
        <div class="mb10"><el-radio :label="2">固定日期
          <el-date-picker v-model="form.exchangeFixDate" :disabled="form.exchangeDateType !== 2"  type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-radio></div>
        <div class="mb10"><el-radio  :label="3">每月
          <el-select v-model="form.exchangeDateDayArr" :disabled="form.exchangeDateType !== 3"  multiple filterable default-first-option placeholder="请选择">
            <el-option v-for="item in monthOptions" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-radio></div>
        <div class="mb10"><el-radio  :label="4">每周
           <el-select v-model="form.exchangeDateWeekArr" :disabled="form.exchangeDateType !== 4" multiple placeholder="请选择">
            <el-option v-for="item in exchangeDateWeekOptions" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-radio></div>
      </el-radio-group>
    </el-form-item>

    <el-form-item prop="exchangeTimeType" label="兑换时段" class="is-required">
      <el-radio-group v-model="form.exchangeTimeType">
        <div class="mb10"><el-radio :label="1">全部时段</el-radio></div>
        <div class="mb10">
          <el-radio :label="2" class="vertical-middle">部分时段</el-radio>
          <span class="gray fz13 vertical-top ml20">请使用24小时制输入时间，格式如11:00至14:30</span>
        </div>
        <p v-for="(v,i) in timeRangeList" :key="i" class="pb10">
          <el-time-picker :disabled="form.exchangeTimeType === 1" class="vertical-middle w250" is-range v-model="v.timeRange" value-format="HH:mm" format="HH:mm" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker>
          <el-button class="vertical-middle" type="text" @click="delTimeRange(i)">删除</el-button>
        </p>
        <p><el-button type="text" @click="addTimeRange">添加时间段</el-button></p>
      </el-radio-group>
    </el-form-item>

    <el-form-item prop="proShowStatus" label="显示状态" class="is-required">
      <el-radio-group v-model="form.proShowStatus">
        <el-radio :label="1">上架状态就显示</el-radio>
        <el-radio :label="2">兑换状态下显示</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item prop="releaseType" label="发布时间" class="is-required">
      <el-radio-group v-model="form.releaseType">
        <el-radio :label="1">立即发布</el-radio>
        <el-radio :label="2">定时发布
          <el-date-picker v-model="form.limitTimeBegin" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item prop="changeType" label="兑换方式" class="is-required">
      <el-radio-group v-model="form.changeType">
        <div class="mb10">
          <el-radio :label="2" :disabled="form.changeType === 1 && (isInfo || isEdit)">快递发货，库存
          <el-input-number controls-position="right" v-show="form.changeType === 2"  v-model="form.virtualStock" class="w150 vertical-middle" :precison="0" :min="0"></el-input-number>
          </el-radio>
        </div>
        <div class="mb10">
          <el-radio :label="3" :disabled="form.changeType === 1 && (isInfo || isEdit)">在线发货，库存
          <el-input-number controls-position="right" v-show="form.changeType === 3"  v-model="form.virtualStock" class="w150 vertical-middle" :precison="0" :min="0"></el-input-number>
          </el-radio>
        </div>
        <div class="mb10">
          <el-radio :disabled="form.changeType !== 1 && (isInfo || isEdit)" :label="1" class="vertical-middle">微信兑换券</el-radio>
          <span class="gray ml20 fz13 vertical-top">礼品成本金额以选择兑换券的成本金额为准</span>
        </div>
      </el-radio-group>
    </el-form-item>
    <div v-show="form.changeType === 1" class="border-radius2" style="padding:15px;margin-bottom:20px;">
        <card-temp pbSize="pb15" :activeId.sync="form.proReferId" @emitActiveObj="getCardActiveObjFun"  :showPagination="false" :cardLimitType="3"></card-temp>
    </div>
    <div class="btn-wrap_fixed" :class="{'on':asideShow}">
      <el-button type="primary" @click="submit('form')" v-if="!isInfo">{{isAdd?'确认新增':'确认编辑'}}</el-button>
      <el-button @click="$router.go(-1)">返 回</el-button>
    </div>
  </el-form>
</template>

<script>
import infojs from './info.js';
export default infojs;
</script>
