<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>上架规则</el-breadcrumb-item>
          <el-breadcrumb-item>新建上架规则</el-breadcrumb-item>
        </el-breadcrumb>
        <h3>
          <span>新建上架规则</span>
        </h3>
      </div>
      <div class="section">
        <el-form
          ref="ruleForm"
          :rules="rules"
          :model="ruleForm"
          label-width="160px"
          size="small"
        >
          <el-form-item label="上架规则名称" prop="ruleTitle">
            <el-input
              maxlength="12"
              show-word-limit
              placeholder="请输入上架规则名称"
              v-model="ruleForm.ruleTitle"
              style="width:340px"
            />
          </el-form-item>
          <el-form-item label="上架规则名称备注" prop="ruleExplanation">
            <el-input
              maxlength="30"
              show-word-limit
              placeholder="请输入上架规则说明"
              v-model="ruleForm.ruleExplanation"
              style="width:340px"
            />
          </el-form-item>
          <el-form-item label="适用人群" prop="activityTime">
            <el-radio v-model="ruleForm.memberType" :label="1">
              全部会员
            </el-radio>
            <el-radio v-model="ruleForm.memberType" :label="2">
              会员分组
            </el-radio>
            <el-radio v-model="ruleForm.memberType" :label="3">
              会员筛选
            </el-radio>
          </el-form-item>
          <el-form-item v-if="ruleForm.memberType === 2">
            <vue-gic-member-group
              style="padding-left:0"
              :readonly="readonly"
              :height="543"
              :defaltSelected="defaltSelected"
              :projectName="projectName"

              :effectiveStatus="1"
              @handleDataTransferred="handleDataTransferred"
              @handleDataLeft="handleDataLeft"
            />
          </el-form-item>
          <el-form-item v-if="ruleForm.memberType === 3">
            <vue-gic-people
              :projectName="projectName"
              :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>
          </el-form-item>

          <div class="confim-btn" :style="{ width: fixedWidth + 'px' }">
            <el-button type="primary" size="small" @click="nextStep()">
              确认新建
            </el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    const activityTimeVal = (rule, value, callback) => {
      callback(new Error('请填写'));
    };
    return {
      fixedWidth: document.documentElement.clientWidth - 200,
      ruleForm: {

      },
      rules: {
        ruleTitle: [
          { required: true, message: '请填写', trigger: 'blur' },
        ],
        activityTime: [
          { required: true, message: '请填写', trigger: 'blur', validator: activityTimeVal },
        ],
      },
      projectName: 'integral-mall',
      searchBackTxt: '', // 保存选中的筛选条件用来不走接口查缩略信息
      conditionList: [],
      useId: '',
      hasSearchData: '',
      sceneValue: 'member', // 场景值
      responseParams: [], // 回显的数据
      defaltSelected: [],
      headerList: ['isRealTime', 'latestUpdateTime', 'updateType', 'effectiveStatus', 'effectiveDate'], // 表头配置，默认全部，分组名称默认显示不可配置
    };
  },
  methods: {
    // 子组件触发父组件事件,返回过滤条件数据
    findFilter (value) {

    },
    // 获取需要回显的数据, 供保存时候使用
    getBackData () {

    },
    // 显示保存按钮,隐藏确认按钮显示  (子组件会调用)
    editHide () {
    },
    // 显示编辑,保存按钮隐藏,确认按钮显示 (子组件会调用)
    editShow () {
    },
    // 隐藏保存按钮和确认按钮  (子组件会调用)
    // 传个参数给父组件 来查数据
    hideBtn (refresh) {
    },
    handleDataTransferred (data) {
      this.defaltSelected = data;
    },
    handleDataLeft (selectedData, selectionToRemove) {
      this.defaltSelected = selectedData;
    },
  },
};
</script>

<style scoped>
.confim-btn {
  height: 32px;
  padding: 12px 0;
  position: fixed;
  bottom: 0px;
  left: 200px;
  background: #fff;
  z-index: 2;
  text-align: center;
  border-top: 1px solid #dcdfe6;
}
.fix-btn {
  margin-left: -100px;
}
</style>
