<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-21 16:37:02
 * @LastEditors: 无尘
 * @LastEditTime: 2019-11-25 10:53:44
 -->
<!--
<consume-config></consume-config>

import consumeConfig from '@/components/active-config/configs/consume-config.vue';
-->

<template>
  <div class="consume-config border-box">
    <el-form label-width="154px" :model="consumeAction" ref="consumeForm" :rules="rules">
      <el-form-item label="消费门店控制：" prop="">
        <ul class="flex ">
          <template v-for="(item, index) in consumeStoreData">
            <li :class="['li-cell li-second-cell flex-1 ', consumeAction.consumeStoreControlFlag == item.goalId ? 'li-second-active' : '']" :key="index + 'first'" @click="selectStore(item)">
              <div class="li-cell-inner">
                <div class="li-cell-bottom border-box">
                  <div class="li-cell-scene">
                    <div class="li-cell-scene_title font-14 color-303133">{{ item.goalName }}</div>
                    <div class="li-cell-scene_text font-14 color-606266">{{ item.describe }}</div>
                  </div>
                </div>
              </div>
              <div class="common-cell-check">
                <div class="common-cell-triangle">
                  <div class="common-cell-outer">
                    <i class="el-icon-upload-success el-icon-check"></i>
                  </div>
                </div>
              </div>
            </li>
          </template>
        </ul>
        <div v-if="consumeAction.consumeStoreControlFlag == 1" class="store-select-wrap">
          <div class="store-select-title">
            <el-tooltip placement="top">
              <div slot="content">该文案将显示在消费奖励规则中，<br />向活动参与者说明消费门店的条件要求，<br />请尽量用简洁易懂的描述。</div>
              <span class="font-12 color-606266 cursor-pointer store-title-name">门店条件文案：</span>
            </el-tooltip>

            <limitInput :inputWidth="385" :disflag="$route.query.editFlag ? true : false" :inputValue.sync="consumeAction.consumeStoreName" :holder="'请输入门店条件文案'" :getByType="'char'" :maxLength="30"> </limitInput>
          </div>
          <div class="store-select-body">
            <vue-gic-store-card :readonly="$route.query.editFlag ? true : false" :uuid.sync="uuid" ref="storeCard"></vue-gic-store-card>
          </div>
        </div>
      </el-form-item>
      <el-form-item class="m-t-20" label="成交额控制：" prop="">
        <ul class="flex  ">
          <template v-for="(item, index) in dealAmountData">
            <li :class="['li-cell li-second-cell flex-1 ', consumeAction.dealAmountControlFlag == item.goalId ? 'li-second-active' : '']" :key="index + 'first'" @click="selectMoney(item)">
              <div class="li-cell-inner">
                <div class="li-cell-bottom border-box">
                  <div class="li-cell-scene">
                    <div class="li-cell-scene_title font-14 color-303133">{{ item.goalName }}</div>
                    <div class="li-cell-scene_text font-14 color-606266">{{ item.describe }}</div>
                  </div>
                </div>
              </div>
              <div class="common-cell-check">
                <div class="common-cell-triangle">
                  <div class="common-cell-outer">
                    <i class="el-icon-upload-success el-icon-check"></i>
                  </div>
                </div>
              </div>
            </li>
          </template>
        </ul>
        <div v-if="consumeAction.dealAmountControlFlag == 1" class="store-select-wrap child-select-wrap">
          <div class="store-select-title">
            <span class="font-14 color-606266">控制区间：</span>
            <el-input-number v-model="consumeAction.dealAmountControlMin" controls-position="right" :min="1" :max="999999"> </el-input-number>
            <span class="font-14 color-606266 p-l-3 p-r-10">元 - </span>
            <el-input-number v-model="consumeAction.dealAmountControlMax" controls-position="right" :min="1" :max="999999"> </el-input-number>
            <span class="font-14 color-606266">元 </span>
          </div>
        </div>
      </el-form-item>
      <el-form-item class="m-t-20" label="单笔成交件数控制：" prop="">
        <ul class="flex">
          <template v-for="(item, index) in singleDealData">
            <li :class="['li-cell li-second-cell flex-1 ', consumeAction.singleDealNumberControlFlag == item.goalId ? 'li-second-active' : '']" :key="index + 'first'" @click="selectNumber(item)">
              <div class="li-cell-inner">
                <div class="li-cell-bottom border-box">
                  <div class="li-cell-scene">
                    <div class="li-cell-scene_title font-14 color-303133">{{ item.goalName }}</div>
                    <div class="li-cell-scene_text font-14 color-606266">{{ item.describe }}</div>
                  </div>
                </div>
              </div>
              <div class="common-cell-check">
                <div class="common-cell-triangle">
                  <div class="common-cell-outer">
                    <i class="el-icon-upload-success el-icon-check"></i>
                  </div>
                </div>
              </div>
            </li>
          </template>
        </ul>
        <div v-if="consumeAction.singleDealNumberControlFlag == 1" class="store-select-wrap child-select-wrap">
          <div class="store-select-title">
            <span class="font-14 color-606266">控制区间：</span>
            <el-input-number v-model="consumeAction.singleDealNumberControlMin" controls-position="right" :min="1" :max="99"> </el-input-number>
            <span class="font-14 color-606266 p-l-3 p-r-10">件 - </span>
            <el-input-number v-model="consumeAction.singleDealNumberControlMax" controls-position="right" :min="1" :max="99"> </el-input-number>
            <span class="font-14 color-606266">件 </span>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
export default {
  name: 'consume-config',
  props: {
    value: {
      type: [Object, Array],
      default() {
        return {
          consumeStoreControlFlag: 0, //消费门店控制开关 1控制，0不控制
          consumeStoreName: '', //消费门店文案
          dealAmountControlFlag: 0, //成交额控制开关 0不控制，1控制区间
          dealAmountControlMin: 0, //成交额控制最小值
          dealAmountControlMax: 0, //成交额控制最大值
          singleDealNumberControlFlag: 0, //单笔成交件数控制开关 0不控制，1控制区间
          singleDealNumberControlMin: 0, //单笔成交件数最小值
          singleDealNumberControlMax: 0, //单笔成交件数最大值
          uuid: '',
          storeList: []
        };
      }
    }
  },
  components: {
    limitInput
  },
  data() {
    return {
      consumeAction: {
        consumeStoreControlFlag: 0, //消费门店控制开关 1控制，0不控制
        consumeStoreName: '', //消费门店文案
        dealAmountControlFlag: 0, //成交额控制开关 0不控制，1控制区间
        dealAmountControlMin: 0, //成交额控制最小值
        dealAmountControlMax: 0, //成交额控制最大值
        singleDealNumberControlFlag: 0, //单笔成交件数控制开关 0不控制，1控制区间
        singleDealNumberControlMin: 0, //单笔成交件数最小值
        singleDealNumberControlMax: 0, //单笔成交件数最大值
        uuid: '',
        storeList: []
      },
      consumeStoreData: [
        {
          goalId: 0,
          goalName: '不予控制',
          describe: '不对消费门店作要求，即在全国任意门店消费都满足条件。'
        },
        {
          goalId: 1,
          goalName: '消费门店控制',
          describe: '满足要求的门店范围，受邀人只有在范围内的门店消费，才有资格被计为有效消费行为。'
        }
      ],
      dealAmountData: [
        {
          goalId: 0,
          goalName: '不予控制',
          describe: '不对订单的成交金额作要求，即消费任意金额都算满足条件。'
        },
        {
          goalId: 1,
          goalName: '成交额控制',
          describe: '满足要求的成交额范围，受邀人的成交额只有满足该范围，才有资格被计为有效消费行为。'
        }
      ],
      singleDealData: [
        {
          goalId: 0,
          goalName: '不予控制',
          describe: '不对订单的成交商品件数作要求，即消费任意商品件数都算满足条件。'
        },
        {
          goalId: 1,
          goalName: '成交件数控制',
          describe: '满足要求的成交件数范围，受邀人的成交件数只有满足该范围，才有资格被计为有效消费行为。'
        }
      ]
    };
  },
  methods: {
    /**
     * 表单提交
     */
    submitForm() {
      const that = this;
      that.consumeAction.storeList = that.refs.storeCard.rightList;
      return new Promise(function(resolve, reject) {
        that.$refs['consumeForm'].validate(valid => {
          if (valid) {
            that.consumeAction.storeList = that.refs.storeCard.rightList;
            that.$emit('input', that.consumeAction);
            resolve(that.consumeAction);
          } else {
            reject(false);
          }
        });
      });
    },
    /**
     * 选择消费门店控制：
     */
    selectStore(item) {
      const that = this;
      that.consumeAction.consumeStoreControlFlag = item.goalId;
    },
    /**
     * 选择成交额控制：
     */
    selectMoney(item) {
      const that = this;
      that.consumeAction.dealAmountControlFlag = item.goalId;
    },

    /**
     * 选择单笔成交件数控制：
     */
    selectNumber(item) {
      const that = this;
      that.consumeAction.singleDealNumberControlFlag = item.goalId;
    }
  },
  watch: {
    value(newData) {
      const that = this;
      that.consumeAction = JSON.parse(JSON.stringify(newData));
    }
  },
  mounted() {
    const that = this;
    that.consumeAction = JSON.parse(JSON.stringify(that.value));
  }
};
</script>
<style lang="less" scoped>
.p-l-3 {
  padding-left: 3px;
}
.p-r-10 {
  padding-right: 10px;
}
.consume-config {
  width: 100%;
  padding: 20px;
  background: #fff;
  .consume-config-title {
    margin: 0 auto;
    text-align: center;
    font-weight: 600;
    line-height: 30px;
    padding-top: 27px;
    margin-bottom: 48px;
  }
  .m-b-0 {
    margin-bottom: 0;
  }
  .m-t-48 {
    margin-top: 48px;
  }
  .m-t-50 {
    margin-top: 50px;
  }
  .consume-config-subtitle {
    width: 800px;
    margin: 14px auto;
    line-height: 20px;
    font-weight: 500;
    text-align: center;
  }
  ul {
    .li-cell {
      position: relative;
      width: 427px;
      height: 131px;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      border: 1px solid rgba(220, 223, 230, 1);
      margin-left: 10px;
      cursor: pointer;
      max-width: 30%;
      &:first-child {
        margin-left: 0;
      }
      .li-cell-inner {
        border-radius: 4px;
        width: 100%;
        height: 100%;
        .li-cell-left {
          height: 100%;
          padding-left: 30px;
          img {
            max-width: 66px;
            max-height: 66px;
          }
        }
        .li-cell-right {
          height: 100%;
          padding: 16px 36px;
          .li-cell-active_name {
            font-weight: 600;
            line-height: 25px;
          }
          .li-cell-active_describe {
            margin-top: 13px;
            font-weight: 500;
            line-height: 20px;
          }
        }
      }
      .common-cell-check {
        display: none;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 22px;
        height: 22px;
        z-index: 1;
        .common-cell-triangle {
          position: relative;
          width: 100%;
          height: 100%;
          overflow: hidden;
          .common-cell-outer {
            position: absolute;
            right: -16px;
            bottom: -6px;
            width: 32px;
            height: 20px;
            background: #1890ff;
            text-align: center;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            transform: rotate(-45deg);

            i {
              position: absolute;
              top: 0px;
              left: 7px;
              font-size: 12px;
              color: #fff;
              -webkit-transform: rotate(45deg);
              -moz-transform: rotate(45deg);
              transform: rotate(45deg);
            }
          }
        }
      }
      /* 二级 */
      &.li-second-cell {
        max-width: 234px;
        height: 141px;
        padding: 20px;
        .li-cell-inner {
          .li-cell-bottom {
            height: 60px;
            background: #fff;
            border-radius: 0 0 4px 4px;
            .li-cell-scene {
              .li-cell-scene_title {
                font-weight: 600;
                line-height: 20px;
              }
              .li-cell-scene_text {
                margin-top: 10px;
                font-weight: 500;
                line-height: 20px;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3; //规定几行显示省略号
                -webkit-box-orient: vertical;
                overflow: hidden;
              }
            }
          }
        }
        .common-cell-check {
          .common-cell-triangle {
            .common-cell-outer {
              background: #1890ff;
              i {
                color: #fff;
              }
            }
          }
        }
      }
      &.li-second-active {
        border-radius: 4px;
        border: 2px solid rgba(24, 144, 255, 1);
        box-shadow: 0px 6px 8px 0px rgba(166, 181, 199, 0.34);
        .common-cell-check {
          display: block;
          .common-cell-triangle {
            border-bottom-right-radius: 1px;
          }
        }
      }
    }
  }
  .store-select-wrap {
    width: 580px;
    // height: 470px;
    margin-top: 10px;
    padding: 20px 45px;
    background: rgba(245, 247, 250, 1);
    .store-title-name {
      padding-bottom: 3px;
      border-bottom: 2px dotted #1890ff;
    }
    .store-select-body {
      margin-top: 20px;
    }
    &.child-select-wrap {
      padding-left: 20px;
      .el-input-number {
        width: 123px;
      }
    }
  }
}
</style>
