<template>
  <div class="memberGroupEdit-wrap common-wrap">
    <nav-crumb :navpath="navpath"></nav-crumb>
    <div class="right-content">
      <div class="right-box">
        <div class="memberGroupEdit-wrap__body">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
            <el-form-item label="" prop="selectedTag">
              <div class="memberGroupEdit-wrap__item__title">已选标签<span class="color-c0c4cc font-14">（筛选同时符合下列条件的会员）</span>
              <el-button type="text" class="m-l-220" @click="showAddTag">添加标签</el-button>
              </div>
              <div class="memberGroupEdit-wrap__tags w-548 border-box">

                <div class="memberGroupEdit-wrap__tagcell" v-for="(item,index) in selectedTagData" :key="index">
                  <span>{{item.name}}</span>
                  <span class="memberGroupEdit-wrap__tag-name">【选择:{{item.value}}】</span>
                  <i class="iconfont icon-bianji" @click="editSelTag(index,item)"></i>
                  <i class="iconfont icon-shanchu" @click="delSelTag(index,item)"></i>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="" prop="groupName" class="w-220">
              <div class="memberGroupEdit-wrap__item__title">分组名称</div>
              <el-input class="w-220" v-model="ruleForm.groupName" @focus="focus('groupName',10)" @keyup.native="(value) => toInput(value)">
              </el-input>
              <label class="input-label">{{inputNumObj.groupName}}/10</label>
            </el-form-item>
            <el-form-item label="" prop="validDate">
              <div class="memberGroupEdit-wrap__item__title">分组有效期</div>
              <el-date-picker
                v-model="ruleForm.validDate"
                type="date"
                :editable="false"
                format="yyyyMMdd"
                value-format="yyyyMMdd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="" prop="description" class="w-548">
              <div class="memberGroupEdit-wrap__item__title">分组描述</div>
              <el-input class="w-407" type="textarea" v-model="ruleForm.description" style="height: 96px;" @focus="focus('description',200)" @keyup.native="(value) => toInput(value)">
              </el-input>
               <template><label class="input-label textarea-label">{{inputNumObj.description}}/200</label></template>
            </el-form-item>
            <el-form-item label="" class="" prop="rateOne" v-if="ruleForm.isRealTime == 1">
            <div class="memberGroupEdit-wrap__item__title">更新频率</div>
              <el-select v-model="ruleForm.rateOne" placeholder="请选择" class="w-200" @change="changeRate(ruleForm.rateOne)">
                <el-option label="每日一次" value="0"></el-option>
                <el-option label="每周一次" value="1"></el-option>
                <el-option label="每月一次" value="2"></el-option>
              </el-select><el-select
                v-model="ruleForm.rateTwo"
                v-if="ruleForm.rateOne != 0"
                placeholder="请选择"
                class="w-200 p-l-8">
                <el-option
                v-for="item in rateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">

                </el-option>
              </el-select>
              <label>*人群有效期需早于所用标签的最早有效期，且最长不超过365天</label>
            </el-form-item>
            <el-form-item label="" class="">
              <el-button type="primary" @click.stop="confirmSave('ruleForm')">保存</el-button>
              <el-button @click.stop="cancelSave">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <vue-gic-footer></vue-gic-footer>
    <!-- 标签详情缩写版 -->
    <tagShortDetail :showTagDetail="showTagDetail" @hideTag="handleHideTag"></tagShortDetail>

    <!-- 会员分组-我的标签列表和暂存架 -->
    <add-tag-view :addTagShow="showTagFlag" @showShortDetail="showShortDetail"></add-tag-view>
  </div>
</template>
<script>
  import navCrumb from '@/components/nav/nav.vue';
  import addTagView from '@/components/addTagView.vue';
  import tagShortDetail from '@/components/tagShortDetail.vue';
  import strLength from '@/common/js/strlen';
  import showMsg from '@/common/js/showmsg';
  import errMsg  from '@/common/js/error';
  import { _debounce } from "@/common/js/public";
  import { getRequest, postRequest, postJson, postForm } from '@/api/api';
  export default {
      name: "memberGroupEdit",
      data() {

        const rateOneValid = (rule, value, callback) => {
          if (this.ruleForm.isRealTime == 1 && value === '') {

            callback(new Error('请选择更新频率'));
            console.log(value)

          } else {
             callback();
          }
        };
        const rateValid = (rule, value, callback) => {
          console.log(value)
          if (this.ruleForm.isRealTime == 1 && this.ruleForm.rateOne !=0 && value === '') {

            callback(new Error('请选择更新频率'));
            console.log(value)

          } else {
             callback();
          }
        };
        return {
          // 面包屑参数
          navpath: [
            {
              name: '首页',
              path: ''
            },
            {
              name: '会员标签',
              path: ''
            }
          ],

          // 编辑数据
          ruleForm: {
            selectedTag: [],
            groupName: '',
            validDate: '',
            description: '',
            isRealTime: 0, // 非实时需要根据标签判断
            rateOne: '',
            rateTwo: ''
          },
          pickerOptions: {
            disabledDate(time) {
              let curDate = (new Date()).getTime();
              let oneYear = 365 * 24 * 3600 * 1000;
              let y = curDate + oneYear;
              return time.getTime() < Date.now() - 8.64e7 || time.getTime() > y
            }
          },
          rules: {
            selectedTag: [
              { type: 'array',required: true,message: '请选择标签',  trigger: 'blur' }
            ],
            groupName: [
              { required: true, message: '请输入分组名称', trigger: 'blur' }
            ],
            validDate: [
              { required: true, message: '请选择分组过期时间', trigger: 'change' }
            ],
            rateOne: [
              { validator: rateOneValid,  trigger: 'blur' }
            ],
            rateTwo: [
              { validator: rateValid,  trigger: 'change' }
            ],
          },

          // 计算输入
          inputNumObj: {
            groupName: 0,
            description: 0,
          },

          // 频率
          rateOptions:[
            {
              value: '0',
              label: '周一'
            },
            {
              value: '1',
              label: '周二'
            },
          ],

          showTagFlag: false, //是否显示需要添加的标签层

          // 已选标签数据
          selectedTagData: [
            {
              id: 1,
              name: '有车一族',
              value: '233',
              isRealTime: 0,
            },
            {
              id: 2,
              name: '有车一族',
              value: '233',
              isRealTime: 1,
            },
            {
              id: 2,
              name: '有车一族',
              value: '233,有车一族,有车一族,有车一族,有车一族',
              isRealTime: 1,
            }
          ],

          showTagDetail: false, // 标签详情缩小版显示/隐藏

        }
      },
      methods: {
        /**
         * 点击显示添加标签层
         */
        showAddTag() {
          var that = this
          that.showTagFlag = true;
        },

        /**
         * 点击输入框
         */
        focus(name,num) {
          var that = this
          console.log(name,num);
          that.inputFlag = name;
          that.inputFlagNum = num;
        },

        /**
         * 输入
         */
        toInput: function(value) {
          var that = this;
          console.log(value);

          var temp = '';
          temp = strLength.getByteVal(value.target.value,that.inputFlagNum);
          console.log(temp)
          that.ruleForm[that.inputFlag] = temp.trim();

          that.inputNumObj[that.inputFlag] = strLength.getZhLen(that.ruleForm[that.inputFlag]);

          console.log(that.ruleForm[that.inputFlag]);
        },

        /**
         * 更新频率
         */
        changeRate(rate) {
          var that = this
          console.log(rate)
          that.ruleForm.rateTwo = '';
          if (rate == 1) {
            that.rateOptions = [];
            let week = ['一','二','三','四','五','六','日'];
            for (var i = 0; i <7; i++) {
              that.rateOptions.push(
                {
                  value: i,
                  label: `周${week[i]}`
                }
              )
            }
            return
          }
          if (rate == 2) {
            that.rateOptions = [];

            for (var i = 1; i <29; i++) {
              that.rateOptions.push(
                {
                  value: i,
                  label: `${i} 号`
                }
              )
            }
            return
          }
        },

        /**
         * 已选标签-编辑
         */
        editSelTag(index,item) {
          var that = this
          that.showTagFlag = true;
        },

        /**
         * 已选标签-删除
         */
        delSelTag(index,item) {
          var that = this

          that.selectedTagData.splice(index,1)
          that.ruleForm.selectedTag = that.selectedTagData
          that.checkRealTime()
        },

        /**
         * 已选标签-删除
         */
        checkRealTime() {
          var that = this

          if (!!that.selectedTagData.length) {
            const arrTag = that.selectedTagData.map(item=>item.isRealTime);

            if (arrTag.indexOf('0') != -1) {
              that.ruleForm.isRealTime = 0; // 如果有非实时,最后都是非实时
            }else {
              that.ruleForm.isRealTime = 1;
            }
            console.log(that.ruleForm)
            return false;
          }
          that.ruleForm.isRealTime = 0; // 如果已选标签为空,就是非实时
        },

        /**
         * 点击取消
         */
        cancelSave() {
          const that = this;

        },

        /**
         * 点击保存
         */
        confirmSave(formName) {
          const that = this;
          that.$refs[formName].validate((valid) => {
            if (valid) {
              console.log('valid')
              const flag = this.ruleForm.isRealTime == 1 && this.ruleForm.rateOne !=0 && that.ruleForm.rateTwo == ''
              if (!!flag) {
                that.$message.error({message: '请选择更新频率!'});
                return false;
              }
            } else {
              return false;
            }
          })
        },

        /**
         * 子组件 我的标签库/暂存架 -点击名字显示标签详情缩略版
         */
        showShortDetail() {
          const that = this;
          that.showTagDetail = true
        },

        /**
         * 隐藏标签详情缩小版
         */
        handleHideTag(val) {
          const that = this;
          that.showTagDetail = false
        },

      },
      mounted() {

      },
      components: {
        navCrumb,
        addTagView,
        tagShortDetail
      }
    }
</script>
<style lang="scss" scoped>

  .memberGroupEdit-wrap__tags {
    height: 100px;
    padding: 12px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    overflow-y:auto;

    .memberGroupEdit-wrap__tagcell {
      display: inline-block;
      vertical-align: top;
      padding: 0 10px;
      margin-right: 8px;
      margin-bottom: 8px;
      background: #F3F6F9;
      border-radius: 2px;

      span {
        display: inline-block;
        vertical-align: middle;
      }

      i {
        font-size: 18px;
        color: #4A4A4A;
        cursor: pointer;
      }

      .memberGroupEdit-wrap__tag-name {
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

  }

  .memberGroupEdit-wrap__body {
    width: 100%;
    font-size: 14px;

    .input-label {
      position: absolute;
      right: 10px;
      top: 34px;
      font-size: 12px;
      color: #909399;
    }

    .textarea-label {
      position: absolute;
      right: 10px;
      top: 96px;
      font-size: 12px;
      color: #909399;
    }
  }

</style>
