<template>
  <el-form
    :model="giftForm"
    :rules="rules"
    label-width="150px"
    style="margin-top: 20px"
  >
    <el-form-item label="适用会员" prop="gradeType" v-if="cliqueStatus">
      <el-radio-group v-model="giftForm.gradeType" @change="handleChange">
        <el-radio :label="1">
          品牌卡
        </el-radio>
        <el-radio :label="2">
          集团卡
        </el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item prop="memberGrade" :label="cliqueStatus ? '' : '适用会员'">
      <el-select
        v-model="giftForm.memberGrade"
        multiple
        placeholder="请选择"
        size="small"
        class="w-600"
        @change="memberChange"
      >
        <el-option
          v-for="item in memberGradeList"
          :key="item.gradeId"
          :label="item.gradeName"
          :value="item.gradeId"
        />
      </el-select>
      <span class="tips">不符合此处会员等级卡的客户在小程序积分商城中不可见该礼品</span>
    </el-form-item>
    <el-form-item prop="ladder" v-if="specialOrder">
      <el-checkbox-group v-model="giftForm.ladder" @change="changeladder" style="display:inline-block">
        <el-checkbox label="1" :disabled="!giftForm.memberGrade.length">
          设置阶梯价
        </el-checkbox>
      </el-checkbox-group>
      <el-popover
        placement="bottom"
        width="500"
        trigger="click"
        ref="popover"
      >
        <div style="margin-top:10px;margin-bottom:10px">
          <span style="color:#303133;font-size:16px">设置阶梯价</span>
          <span style="color:#606266;font-size:12px;margin-left:20px">*若未设置阶梯价则以原价进行兑换，请勿随意填入0积分/现金；</span>
        </div>
        <el-tabs :value="selectTab" type="border-card" class="card-style">
          <el-tab-pane
            :name="index"
            v-for="(item, index) in ladderMemberGrade"
            :key="index"
            :label="item.gradeName"
            :value="item.gradeId"
          >
            <div class="fr" style="margin-bottom:20px" v-if="list3.length && isTable">
              <el-input
                class="w-100"
                placeholder="请输入积分"
                v-model="integral"
                size="small"
              />
              <el-input
                class="w-100"
                placeholder="请输入金额"
                v-model="cash"
                size="small"
              />
              <el-button type="primary" size="small" @click="handleLadder(list3[index].skuList)">
                批量填充
              </el-button>
            </div>
            <!-- <el-table v-if="list3.length && isTable" :data="list3.length && isTable ? list3[index].skuList : []"> -->
            <el-table v-if="isTable" :data="isTable && list3.length ? list3[index].skuList : []">
              <el-table-column v-for="(it, i) in ladderHeader" :key="i" :label="it.proName">
                <template slot-scope="{ row }">
                  {{ row.giftPropValues[i].valueName }}
                </template>
              </el-table-column>
              <el-table-column label="积分">
                <template slot-scope="{ row }">
                  <el-input size="small" v-model.trim="row.giftProSkuIntegral" />
                </template>
              </el-table-column>
              <el-table-column label="现金(元)">
                <template slot-scope="{ row }">
                  <el-input size="small" v-model.trim="row.giftProSkuCash" />
                </template>
              </el-table-column>
            </el-table>
            <!-- <el-form v-if="list3.length && !isTable"> -->
            <el-form v-if="!isTable">
              <el-form-item label="积分">
                <el-input size="small" v-model.trim="list3[index].skuList[0].giftProSkuIntegral" style="width:180px" />
              </el-form-item>
              <el-form-item label="现金">
                <el-input size="small" v-model.trim="list3[index].skuList[0].giftProSkuCash" style="width:180px" />&nbsp;&nbsp;元
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <div style="margin-top:10px;text-align:right">
          <el-button type="default" @click="$refs.popover.showPopper = false">
            取消
          </el-button>
          <el-button type="primary" @click="saveLadderDetail">
            保存
          </el-button>
        </div>
        <el-button
          slot="reference"
          type="text"
          v-show="isDifferentialPricing"
          class="set-ladder"
          @click="setLadder"
        >
          点击设置
        </el-button>
      </el-popover>
    </el-form-item>
    <el-form-item label="限兑">
      <el-checkbox v-model="giftForm.limitTimesStatus" @change="refashData()">
        每个会员限制兑换
      </el-checkbox>
      <span v-if="giftForm.limitTimesStatus"> <el-input-number
        controls-position="right"
        v-model="giftForm.limitTimes"
        :precision="0"
        :min="0"
        @change="limitTimeChange"
      />次 </span>
      <span v-show="cardList.length" style="font-size: 12px;color: rgb(144, 147, 153);margin-left:10px;">
        兑换限制不得大于此兑换券的领取次数：
        <i>{{ limitTimesNum }}</i>次
      </span>
    </el-form-item>
    <el-form-item label="兑换日期" required>
      <el-radio v-model="giftForm.exchangeDateType" :label="1">
        全部日期
      </el-radio>
      <el-radio v-model="giftForm.exchangeDateType" :label="2">
        固定日期
      </el-radio>
      <el-radio v-model="giftForm.exchangeDateType" :label="3">
        每月
      </el-radio>
      <el-radio v-model="giftForm.exchangeDateType" :label="4">
        每周
      </el-radio>
      <el-radio v-model="giftForm.exchangeDateType" :label="6">
        生日当日
      </el-radio>
      <el-radio v-model="giftForm.exchangeDateType" :label="5">
        生日当月
      </el-radio>
    </el-form-item>
    <!-- 兑换日期 -->
    <!-- 固定日期 -->

    <el-form-item class="form-item-mt" v-if="giftForm.exchangeDateType === 2" prop="exchangeFixDate">
      <el-date-picker
        class="w-300"
        v-model="giftForm.exchangeFixDate"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
    </el-form-item>
    <!-- 每月 -->
    <el-form-item class="form-item-mt" v-if="giftForm.exchangeDateType === 3" prop="exchangeDateDayArr">
      <el-select
        size="small"
        v-model="giftForm.exchangeDateDayArr"
        multiple
        placeholder="请选择"
        class="w-300"
      >
        <el-option
          v-for="item in monthOptions"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </el-form-item>
    <!-- 每周 -->
    <el-form-item class="form-item-mt" v-if="giftForm.exchangeDateType === 4" prop="exchangeDateWeekArr">
      <el-select
        size="small"
        v-model="giftForm.exchangeDateWeekArr"
        multiple
        placeholder="请选择"
        class="w-300"
      >
        <el-option
          v-for="item in weekOptions"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </el-form-item>
    <!-- 兑换时段 -->
    <el-form-item label="兑换时段" prop="exchangeTimeType">
      <el-radio v-model="giftForm.exchangeTimeType" :label="1">
        全部时段
      </el-radio>
      <el-radio v-model="giftForm.exchangeTimeType" :label="2">
        部分时段
      </el-radio>
    </el-form-item>
    <div v-if="giftForm.exchangeTimeType === 2">
      <el-form-item
        class="mt8"
        v-for="(v, i) in giftForm.timeRangeList"
        :key="i"
        :prop="'timeRangeList.' + i + '.timeRange'"
        :rules="[{ validator: validateTime, trigger: 'change' }]"
      >
        <el-time-picker
          is-range
          v-model="v.timeRange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="HH:mm"
          format="HH:mm"
          placeholder="选择时间范围"
        />
        <el-button v-if="i" type="text" @click="delTimeRange(i)">
          删除
        </el-button>
      </el-form-item>
      <p style="font-size:12px;color:#909399;line-height:12px;margin-left:180px;">
        请使用24小时制输入时间，格式如11:00至14:30
      </p>
      <p>
        <el-button type="text" style="margin:8px 0 10px 180px" @click="addTimeRange">
          添加时间段
        </el-button>
      </p>
    </div>
    <!-- 实物礼品 -->
    <el-form-item
      label="配送方式"
      required
      v-if="giftType === 1"
      prop="changeTypeList"
    >
      <el-checkbox-group v-model="giftForm.changeTypeList" :disabled="editChangeTypeStatus">
        <el-checkbox label="2">
          快递发货
        </el-checkbox>
        <el-checkbox v-if="giftForm.changeType === 1" label="1">
          <!--兼容老数据-->
          微信兑换券
        </el-checkbox>
        <el-checkbox
          v-if="giftForm.changeType !== 1"
          label="4"
          @change="handleStatus"
          @click="selfRaising"
        >
          门店自提
        </el-checkbox>
        <span class="tips">公众号积分商城不支持此功能，小程序积分商城请升级至V3.5.8及以上版本</span>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="自提点" v-if="giftForm.changeTypeList.indexOf('4') != -1">
      <pickUp-store
        :isAdd="isAddPick"
        :pickUpPointType="pickUpPointType"
        :selectData="selectedStoreData"
        @getArr="getArr"
      />
    </el-form-item>
    <!-- 虚拟礼品 -->
    <el-form-item label="配送方式" v-if="giftType !== 1" prop="changeType">
      <el-radio-group v-model="giftForm.changeType" @change="changeDeliver" :disabled="editChangeTypeStatus">
        <el-radio :label="3">
          在线发货
          <el-tooltip effect="dark" content="上架虚拟商品时，若选择在线发货，则买家下单后，商户需及时在后台点击发货" placement="top-start">
            <i class="iconfont icon-xinxixianshi" />
          </el-tooltip>
        </el-radio>
        <el-radio :label="1" v-if="giftForm.changeType === 1">
          <!--兼容老数据-->
          微信兑换券
        </el-radio>
        <el-radio :label="5" v-if="giftForm.changeType !== 1" @change="textCode">
          文本券码
          <el-tooltip effect="dark" content="上架虚拟商品时，若选择文本券码，则可预先上传券码等信息，买家下单后，系统会自动将券码发给买家并完成交易，无需商户在后台点击发货。" placement="top-start">
            <i class="iconfont icon-xinxixianshi" />
          </el-tooltip>
        </el-radio>
      </el-radio-group>
      <el-button
        type="primary"
        size="mini"
        v-if="giftForm.changeType === 5"
        style="margin-left:20px;"
        @click="handleImportCoupon"
      >
        批量导入
      </el-button>
      <span v-if="giftForm.changeType === 5" style="font-size: 12px;color: rgb(144, 147, 153);margin-left:10px;">小程序积分商城请升级至V3.0.5及以上版本方可支持</span>
    </el-form-item>
    <!--兼容礼品老数据 微信兑换券-->
    <div class="section-content1" v-show="giftForm.changeType === 1">
      <h3>选择卡券</h3>
      <el-form-item
        label="选择卡券"
        required
        v-show="giftId === '-1'"
        style="margin-bottom:66px;"
      >
        <el-button plain @click="showCard">
          添加卡券
        </el-button>
      </el-form-item>
      <el-form-item label="选择卡券" required v-show="giftId !== '-1'" />
      <el-table :data="cardList" style="width: 900px;margin-left:170px;margin-top:-44px;" v-show="cardList.length > 0">
        <el-table-column label="卡券名称" prop="cardName" />
        <el-table-column label="有效期" prop="limitDay">
          <template slot-scope="scope">
            <div v-if="scope.row.cardEffectiveMode == 0">
              固定日期：{{ scope.row.beginDate + '至' + scope.row.endDate }}
            </div>
            <div v-if="scope.row.cardEffectiveMode == 1">
              领取后{{ (scope.row.startDay === 0 ? '当' : scope.row.startDay) + '天，有效天数' + scope.row.limitDay }}天
            </div>
            <div v-if="scope.row.cardEffectiveMode == 2">
              投放后当月
            </div>
          </template>
        </el-table-column>
        <el-table-column label="领取限制">
          <template slot-scope="scope">
            {{ scope.row.cardLimit }}张/人
          </template>
        </el-table-column>
        <el-table-column label="适用门店">
          <template slot-scope="scope">
            {{ scope.row.storeMode === 0 ? '所有门店' : scope.row.storeMode === 1 ? '部分分组' : '部分门店' }}
          </template>
        </el-table-column>
        <el-table-column label="库存" prop="couponStock" />
      </el-table>
    </div>
  </el-form>
</template>
<script>
export default {
  props: {
    cliqueStatus: Boolean,
    memberGradeList: Array,
  },
  data () {
    return {
      giftForm: {}, // 表单的值
      specialOrder: false, // 是否定制
    };
  },
  watch: {
    form: {
      handler (val) {
        console.log(val);
        this.giftForm = JSON.parse(JSON.stringify(val));
      },
      immediate: true,
    },
  },
  mounted () {

  },
  methods: {
    handleChange () {
      this.giftForm.memberGrade = [];
      this.getMemberGradeList();
    },
  },
};
</script>

<style>

</style>
