<template>
  <div class="mall-section-container">
    <div class="mall-content-section">
      <div class="mall-content-title">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '' }"><a href="/report/#/memberSummary">首页</a></el-breadcrumb-item>
          <el-breadcrumb-item>积分商城</el-breadcrumb-item>
          <el-breadcrumb-item>活动</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/flashSale' }">秒杀</el-breadcrumb-item>
          <el-breadcrumb-item>{{ isEdit === '1' ? '编辑' : '新建' }}秒杀</el-breadcrumb-item>
        </el-breadcrumb>
        <h3>
          <span>{{ isEdit === '1' ? '编辑' : '新建' }}秒杀</span>
        </h3>
      </div>
      <div class="section">
        <el-form :model="flashSaleForm" :rules="flashSaleRules" ref="flashSaleForm" label-width="110px" class="demo-ruleForm" label-position="right">
          <el-form-item label="活动名称">
            <el-input v-model.trim="flashSaleForm.proName" class="w-300" type="text" placeholder="活动名称将会在小程序秒杀组件中展示" @input="value => goodsLimit(value)">
              <span slot="suffix">{{ proNameLen }}/9</span>
            </el-input>
          </el-form-item>
          <el-form-item label="数据对话">
            <dm-activity-select :repProjectName="projectName" width="300" :actId.sync="flashSaleForm.dataDialogueId" :showAdd="false"></dm-activity-select>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker class="date-picker" style="width:400px" v-model="dateValue" type="datetimerange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="适用对象">
            <template>
              <el-radio v-model="flashSaleForm.memberLabelType" :label="1">全部会员</el-radio>
              <el-radio v-model="flashSaleForm.memberLabelType" :label="2">会员分组</el-radio>
              <el-radio v-model="flashSaleForm.memberLabelType" :label="3">会员筛选</el-radio>
            </template>
          </el-form-item>
          <el-form-item v-if="flashSaleForm.memberLabelType === 2">
            <vue-gic-member-group style="padding-left:0" :defaltSelected="defaltSelected" :height="height" :projectName="projectName" :headerList="headerList" :effectiveStatus="effectiveStatus" @handleDataTransferred="handleDataTransferred" @handleDataLeft="handleDataLeft"> </vue-gic-member-group>
          </el-form-item>
          <el-form-item v-if="flashSaleForm.memberLabelType === 3">
            <div v-if="channel === 0">
              <vue-gic-people :projectName="projectName" :isAdd="isAdd" :searchBackTxt.sync="searchBackTxt" :conditionList.sync="conditionList" :triggerReset="true" :useId="useId" :hasSearchData="hasSearchData" :sceneValue="sceneValue" ref="peopleFilter" @findFilter="findFilter" @getBackData="getBackData" @editHide="editHide" @editShow="editShow" @hideBtn="hideBtn" />
              <div class="gic-people--button" v-show="toggleTag">
                <el-button size="small" type="primary" @click="getData">确 定</el-button>
                <el-button size="small" @click="cancelFilter">取 消</el-button>
              </div>
            </div>
            <!-- <div v-if="channel === 1">{{ peopleFilterInfo }}</div>
              -->
            <el-popover placement="top-start" width="400" trigger="hover" :content="searchParams">
              <el-button slot="reference" type="text">{{ peopleFilterInfo }}</el-button>
            </el-popover>
          </el-form-item>
          <el-form-item label="购买限制">
            <el-checkbox-group v-model="flashSaleForm.limit" @change="changeLimit">
              <el-checkbox label="1">忽略商品&nbsp;(仅对礼品生效)&nbsp;的限购</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="活动列表背景色">
            <el-radio-group v-model="flashSaleForm.backgroundColor">
              <el-radio :label="0">白色</el-radio>
              <el-radio :label="1">灰色</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="活动列表顶图">
            <el-upload class="avatar-uploader" :action="uploadAction" :headers="headersUpload" :show-file-list="false" :on-success="handleSuccess" :before-upload="beforeUpload">
              <img v-if="flashSaleForm.imageUrl" :src="flashSaleForm.imageUrl" class="avatar" />
              <div v-else class="avatar-icon">
                <i class="el-icon-plus avatar-uploader-icon"></i>
                <span style="display:block;font-size:12px;color:#606266;line-height: 17px;">上传图片</span>
              </div>
            </el-upload>
            <p class="avatar-text">图片宽度≥700px，高度≤1500px，大小不超过 2 MB，未上传展示默认图</p>
          </el-form-item>
          <el-form-item label="活动商品设置">
            <div class="add-sku-content">
              <div class="add-table" v-if="selectList.length">
                <el-table :data="selectList" ref="multipleTable" style="width: 100%">
                  <el-table-column label="商品信息">
                    <template slot-scope="{ row }">
                      <div class="gift-info" v-if="row.giftType">
                        <img :src="row.mainImageUrl" alt />
                        <div class="info-name">
                          <p class="pro-ellipsis">{{ row.proName }}</p>
                          <p class="category-ellipsis">编码：{{ row.proCode }}</p>
                        </div>
                      </div>
                      <div class="gift-info" v-else>
                        <img v-if="row.mainImageUrl" :src="row.mainImageUrl" alt />
                        <img v-if="row.cardType === 2 && !row.mainImageUrl" src="../../../../static/img/quan02.png" alt />
                        <img v-if="row.cardType === 0 && !row.mainImageUrl" src="../../../../static/img/quan01.png" alt />
                        <img v-if="row.cardType === 1 && !row.mainImageUrl" src="../../../../static/img/quan03.png" alt />
                        <div class="info-name">
                          <p class="pro-ellipsis">{{ row.proTitle }}</p>
                          <p class="category-ellipsis">{{ row.remarks || '--' }}</p>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="原价">
                    <template slot-scope="{ row }">{{ row.integralCost }}积分+{{ row.cashCost }}元</template>
                  </el-table-column>
                  <el-table-column label="当前库存">
                    <template slot-scope="{ row }">{{ row.virtualStock }}</template>
                  </el-table-column>
                  <el-table-column label="活动价格">
                    <template slot-scope="{ row }">
                      <div><el-input v-model="row.integral" placeholder="输入积分" size="small" class="w-110"></el-input></div>
                      <div class="mt10"><el-input v-model="row.cash" placeholder="输入现金" size="small" class="w-110"></el-input></div>
                    </template>
                  </el-table-column>
                  <el-table-column label="活动库存">
                    <template slot-scope="{ row }">
                      <div><el-input v-model="row.integral" placeholder="输入库存" size="small" class="w-110"></el-input></div>
                      <div class="mt10"><el-input v-model="row.cash" placeholder="输入限兑数量" size="small" class="w-110"></el-input></div>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column label="参与活动">
                    <template slot-scope="{ row }"></template>
                  </el-table-column> -->
                  <el-table-column label="操作">
                    <template slot-scope="{ row }">
                      <el-button type="text">删除</el-button>
                      <el-button type="text" v-if="row.giftType && JSON.parse(row.giftProStandardJson).length">收起</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="add-sku">
                <div class="add-sku-button">
                  <el-button @click="addGoods" type="text">添加商品&nbsp;({{ selectList.length }}/20)</el-button>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <goods-select v-if="goodsDialog" :selectListMore="selectListMore" @closeGoodsSelect="closeGoodsSelect" @getSelectList="getSelectList"></goods-select>
    </div>
  </div>
</template>

<script>
// import qs from 'qs';
// import request from '../../../service/request.js';
import getInputVal from '../../../utils/common.js';
import goodsSelect from '../../../components/goodsSelect';
// import copy from '../../../utils/clone.js';
export default {
  components: {
    goodsSelect
  },
  data() {
    return {
      isEdit: '',
      getTimeAll: getInputVal.formatDate,
      getTime: getInputVal.getTime,
      getTime2: getInputVal.getTime2,
      getHours: getInputVal.getHours,
      proNameLen: 0,
      flashSaleForm: {
        proName: '',
        dataDialogueId: '', // 数据对话id
        beginTime: '',
        endTime: '',
        memberLabelType: 1, // 会员类型
        limit: [], // 购买限制
        limit2: '',
        backgroundColor: 0,
        imageUrl: '' // 活动列表顶图
      },
      projectName: 'integral-mall',
      defaltSelected: [], //  默认穿梭窗已选入数据
      height: 543, // 穿梭窗高度， 默认是543
      // projectName: 'mall', // 默认是memberTag
      headerList: ['isRealTime', 'latestUpdateTime', 'updateType', 'effectiveStatus', 'effectiveDate'], // 表头配置，默认全部，分组名称默认显示不可配置
      effectiveStatus: 1,
      // 人群筛选器
      // projectName: 'mall', // 当前项目名
      searchBackTxt: '', // 保存选中的筛选条件用来不走接口查缩略信息
      getSaveData: '',
      conditionList: [],
      usePeopleFilter: false,
      sceneValue: 'member', // 场景值
      useId: '', // 模板id
      hasSearchData: '', // 当前页回显的数据(接口返回)
      operateType: true, // 编辑的时候是false 新增是true 例如列表筛选是开始true 编辑改成false
      toggleTag: false, // 控制(确认取消)按钮显示的参数,仅供参考,可自行修改
      saveTag: false, // 控制(保存)按钮显示的参数,仅供参考,可自行修改
      searchParams: {}, //查询数据数据
      responseParams: [], //回显的数据
      channel: 0,
      // uploadAction: window.location.origin + '/api-plug/upload-img?requestProject=integral-mall',
      uploadAction: 'http://gicdev.demogic.com/api-plug/upload-img?requestProject=integral-mall',
      headersUpload: {
        sign: ''
      },
      goodsDialog: false, // 选择商品弹窗
      selectList: [], // 选中的商品
      selectListMore: []
    };
  },
  created() {
    this.isEdit = this.$route.query.edit;
  },
  methods: {
    // 选中活动商品
    getSelectList(val) {
      if (val) {
        this.selectList = val;
      }
      // this.deleteList = [];
      // for (let i in val) {
      //   this.deleteList.push(val[i].mallProId);
      // }
    },
    // 开启和关闭选择商品弹窗
    addGoods() {
      this.selectListMore = this.selectList;
      this.goodsDialog = true;
    },
    closeGoodsSelect(val) {
      this.goodsDialog = false;
      // this.selectListMore = this.selectList;
    },
    changeLimit(value) {
      if (value.length) {
        this.flashSaleForm.limit2 = 1;
      } else {
        this.flashSaleForm.limit2 = 0;
      }
      console.log(this.flashSaleForm.limit2);
    },
    // 秒杀活动名称字数限制
    goodsLimit(value) {
      this.$nextTick(() => {
        this.flashSaleForm.proName = getInputVal.getInputVal(value, 9);
        this.proNameLen = getInputVal.getZhLen(this.flashSaleForm.proName);
      });
    },
    handleDataTransferred(data) {
      this.defaltSelected = data;
    },
    handleDataLeft(selectedData, selectionToRemove) {
      this.defaltSelected = selectedData;
    },
    //人群筛选器使用的方法
    // 父组件调用子组件方法,触发父组件事件
    getData() {
      var that = this;
      that.$refs.peopleFilter.confirmSet();
      that.usePeopleFilter = true;
    },
    // 子组件触发父组件事件,返回过滤条件数据
    findFilter(value) {
      // var that = this;
      this.searchParams = value;
    },
    // 取消
    cancelFilter() {
      var that = this;
      that.$refs.peopleFilter.cancelSet();
    },
    // 获取需要回显的数据, 供保存时候使用
    getBackData(val) {
      var that = this;
      that.responseParams = val;
      this.getSaveData = val;
    },
    // 显示编辑,保存按钮隐藏,确认按钮显示 (子组件会调用)
    editShow() {
      var that = this;
      that.toggleTag = true;
      that.saveTag = false;
    },
    // 显示保存按钮,隐藏确认按钮显示  (子组件会调用)
    editHide() {
      var that = this;
      that.toggleTag = false;
      that.saveTag = true;
    },
    // 隐藏保存按钮和确认按钮  (子组件会调用)
    // 传个参数给父组件 来查数据
    hideBtn(refresh) {
      if (refresh === 0) {
        this.memberSearchStr = -1;
        this.toggleTag = false;
        // 查数据的方法
        // this.getList();
      }
    }
    // 保存当前模板,对接保存接口
  },
  computed: {
    dateValue: {
      get() {
        return [this.flashSaleForm.beginTime, this.flashSaleForm.endTime];
      },
      set(val) {
        [this.flashSaleForm.beginTime, this.flashSaleForm.endTime] = val ? [this.getTimeAll(val[0]), this.getTimeAll(val[1])] : ['', ''];
      }
    }
  }
};
</script>
<style scoped>
.section {
  background: #fff;
  margin: 24px;
  padding: 24px;
}
.w-300 {
  width: 300px;
}
.w-280 {
  width: 280px;
}
.w-140 {
  width: 140px;
}
.w-110 {
  width: 110px;
}
.mt10 {
  margin-top: 10px;
}
/* .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
} */
/* 图片上传 */
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-icon {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar-uploader-icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: #c0c4cc;
  display: block;
  margin: auto;
  margin-top: 26px;
  margin-bottom: 11px;
}
.avatar-uploader {
  width: 100px;
  height: 100px;
  display: block;
  background: #f5f7fa;
  border: 1px dashed #c4c6cf;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-text {
  font-size: 12px;
  font-weight: 400;
  color: #909399;
  line-height: 17px;
  margin-top: 8px;
}
/* 添加商品 */

.add-sku-content {
  border: 1px solid #e4e7ed;
}
.add-table {
  margin: 10px 13px;
  background: #f7f8fa;
}
.add-sku {
  margin: 10px 13px;
  padding-top: 7px;
  padding-left: 8px;
  padding-bottom: 7px;
  background: #f7f8fa;
}
.add-sku-button {
  width: 130px;
  height: 32px;
  background: #ffffff;
  border-radius: 2px;
  border: 1px dashed #c4c6cf;
  text-align: center;
}
.add-sku-button .el-button {
  color: #606266;
}
.add-sku-button .el-button:hover {
  color: #597ef7;
}

.gift-info img {
  width: 75px;
  height: 75px;
  border-radius: 4px;
  padding: 4px;
  border: 1px solid #dcdfe6;
}
.info-name {
  display: inline-block;
  vertical-align: top;
  width: 60%;
}
.pro-ellipsis {
  color: #303133;
  height: 54px;
  line-height: 18px;
  /* width: 230px; */
  font-size: 14px;
}
.category-ellipsis {
  color: #909399;
  font-size: 13px;
}
.el-icon-edit {
  margin-left: 5px;
  cursor: pointer;
}
.operate-span {
  font-size: 13px;
  cursor: pointer;
}
.intergral-edit .el-icon-edit {
  display: none;
}
.intergral-edit:hover .el-icon-edit {
  display: inline-block;
}
.icon-xinxixianshi {
  margin-left: 5px;
  color: #909399;
  font-size: 14px;
  cursor: pointer;
}
.page-info {
  padding: 8px 16px;
  box-sizing: border-box;
  border-radius: 4px;
  background: #f4f4f5;
  color: #606266;
  margin-bottom: 22px;
  line-height: 1.5;
}
.page-info h3 {
  font-size: 13px;
  color: #606266;
  margin-bottom: 4px;
}
.page-info .el-icon-info {
  color: #1890ff;
  margin-right: 10px;
  font-size: 14px;
}
</style>
