<template>
  <!-- 标签模板配置 -->
  <div class="tag-config" v-if="showTag">
    <div v-for="(parent, pindex) in templateData" :key="pindex">
      <!-- 1.选项控件 -->
      <template v-if="parent.templateCode == 'tag001'">
        <template v-if="tagData.isMultiple">
          <div class="m-b-20" :key="'tag1' + pindex">
            <div class="checkboxOption-wrap__body__checkAll border-box tag-mode">
              <el-checkbox :indeterminate="parent.isIndeterminate" v-model="parent.checkAll" @change="handleCheckAllChange($event, parent)">全选</el-checkbox>
            </div>
            <div class="checkboxOption-wrap__body__options border-box tag-options">
              <el-checkbox-group v-model="parent.checkeditems" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="(item, index) in parent.options" :label="item.key" :key="item.key + index">{{ item.value }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="m-b-20" :key="'tag1' + pindex">
            <div class="checkboxOption-wrap__body__options border-box tag-options">
              <el-radio-group v-model="parent.checkeditems">
                <el-radio v-for="(item, index) in parent.options" :label="item.key" :key="item.key + index">{{ item.value }}</el-radio>
              </el-radio-group>
            </div>
          </div>
        </template>
      </template>

      <!-- 2.数字范围 -->
      <template v-if="parent.templateCode == 'tag003'">
        <div class="m-b-20" :key="'tag2' + pindex">
          <el-input :value="parent.numRange[0]" @input="v => $set(parent.numRange, 0, onInputNum(v, parent.expandParams))" class="select-wrap-input" style="width: 100px;margin-right: 0;" placeholder="请输入数字" @blur="e => $set(parent.numRange, 0, onInputBlur(e, parent.expandParams))"></el-input>
            <label> - </label>
          <el-input :value="parent.numRange[1]" @input="v => $set(parent.numRange, 1, onInputNum(v, parent.expandParams))" class="select-wrap-input" style="width: 100px;margin-right: 0;" placeholder="请输入数字" @blur="e => $set(parent.numRange, 1, onInputBlur(e, parent.expandParams))"></el-input>
        </div>
      </template>

      <!-- 2.数字范围区间等等 -->
      <template v-if="parent.templateCode == 'com001'">
        <div class="m-b-20" :key="'tag2' + pindex">
          <el-select v-model="parent.symbol" placeholder="请选择" style="width: 100px">
            <el-option
              v-for="item in parent.options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

          <div style="display: inline-block" v-if="parent.symbol == '区间'">
            <el-input :value="parent.numRange[0]" @input="v => $set(parent.numRange, 0, onInputNum(v, parent.expandParams))" @keyup.native="handleNumRangeEnd($event, parent.expandParams)" @blur="e => $set(parent.numRange, 0, onInputBlur(e, parent.expandParams))" class="select-wrap-input" style="width: 100px;margin-right: 0;" placeholder="请输入数字"></el-input>
              <label>-</label>
            <el-input :value="parent.numRange[1]" @input="v => $set(parent.numRange, 1, onInputNum(v, parent.expandParams))" @keyup.native="handleNumRangeEnd($event, parent.expandParams)" @blur="e => $set(parent.numRange, 1, onInputBlur(e, parent.expandParams))" class="select-wrap-input" style="width: 100px;margin-right: 0;" placeholder="请输入数字"></el-input>
          </div>
          <div style="display: inline-block" v-if="parent.symbol != '区间'">
            <el-input :value="parent.num" @input="v => $set(parent, 'num', onInputNum(v, parent.expandParams))" @keyup.native="handleNumRangeEnd($event, parent.expandParams)" @blur="e => $set(parent, 'num', onInputBlur(e, parent.expandParams))" class="select-wrap-input" style="width: 100px;margin-right: 0;" placeholder="请输入数字"></el-input>
          </div>

          <!-- <label class="label-tip">注：如果起始值为空则视为小于等于最大输入值；如果最大值为空则视为大于等于最小输入值！</label> -->
        </div>
      </template>
      <!-- 3.时间属性-固定时段/相对时段+最近+之后 -->
      <template v-if="parent.templateCode == 'tag014'">
        <div class="m-b-20" :key="'tag3' + pindex">
          <el-radio v-model="parent.radio" label="1">固定时段</el-radio>
          <el-radio v-model="parent.radio" label="2">相对时段</el-radio>
          <!-- 固定时段 -->
          <div class="m-t-18 p-20 border-box bg-f3f6f9" v-if="parent.radio == 1">
            <el-date-picker
              v-model="parent.dateRangeValue"
              type="daterange"
              :editable="false"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="yyyy-MM-dd"
              value-format="yyyyMMdd"
              ><!-- :picker-options="pickerOptions"  -->
            </el-date-picker>
          </div>
          <!-- 相对时段 -->
          <div class="relative-range m-t-18 border-box" v-if="parent.radio != 1">
            <div>
              <div>
                <label class="inline-block w-98 label-unit">时间精度</label>
                <el-radio-group v-model="parent.timeRadio" @change="timeRadioChange($event, parent)">
                  <el-radio label="1">天</el-radio>
                  <el-radio label="2">月</el-radio>
                  <el-radio label="3">年</el-radio>
                </el-radio-group>
              </div>
              <div class="m-t-20">
                <label class="inline-block w-98"></label>
                 <el-checkbox v-model="parent.timeChecked" @change="currentDayChange($event, parent)">
                  当{{ parent.timeRadio == 1 ? '天' : parent.timeRadio == 2 ? '月' : '年' }}
                </el-checkbox>
                <!-- <el-radio v-model="parent.timeChecked" label="1" @change="currentDayChange($event, parent)"> 当{{ parent.timeRadio == 1 ? '天' : parent.timeRadio == 2 ? '月' : '年' }}</el-radio> -->
                <!-- <el-checkbox v-model="parent.timeChecked"><label class="inline-block middle">当{{parent.timeRadio==1?'天':parent.timeRadio==2?'月':'年'}}</label></el-checkbox> -->
              </div>
              <div class="m-t-20">
                <label class="inline-block w-98"></label>
                <el-checkbox v-model="parent.timeAfterChecked">

                </el-checkbox>
                <!-- <el-radio v-model="parent.timeChecked" label="2">{{ '' }}</el-radio> -->
                <!-- <el-checkbox v-model="parent.timeCheckedTwo"> </el-checkbox> -->
                <el-select v-model="parent.timeSelect" placeholder="请选择" class="w-86 m-l-8">
                  <el-option label="最近" value="1"></el-option>
                  <el-option label="之后" value="2"></el-option>
                </el-select>
                <el-input
                  v-model="parent.timeInput"
                  placeholder="请输入"
                  class="w-90"
                  @blur="value => toEditDateInput(value, parent.timeRadio, parent)"
                ></el-input>
                <template v-if="parent.timeRadio == 1">
                  <label class="inline-block middle label-unit m-l-8">天</label>
                  <label class="inline-block middle label-tip">正整数，最大365</label>
                </template>
                <template v-if="parent.timeRadio == 2">
                  <label class="inline-block middle label-unit m-l-8">月</label>
                  <label class="inline-block middle label-tip">正整数，最大24</label>
                </template>
                <template v-if="parent.timeRadio == 3">
                  <label class="inline-block middle label-unit m-l-8">年</label>
                  <label class="inline-block middle label-tip">正整数，最大2</label>
                </template>
              </div>
            </div>
          </div>
        </div>
      </template>
      <!-- 4.最近 天 -->
      <template v-if="parent.templateCode == 'tag005'">
        <div class="m-b-20" :key="'tag4' + pindex">
          <label class="inline-block middle label-unit">最近</label
          ><el-input v-model="parent.timeRecent" placeholder="请输入" class="w-90 m-r-20 m-l-20" @blur="value => toEditInput(value, 'timeRecent', parent)"></el-input
          ><label class="inline-block middle label-unit">天</label>
        </div>
      </template>
      <!-- 5.之后 天 -->
      <template v-if="parent.templateCode == 'tag006'">
        <div class="m-b-20" :key="'tag5' + pindex">
          <label class="inline-block middle label-unit">之后</label
          ><el-input v-model="parent.timeAfter" placeholder="请输入" class="w-90 m-r-20 m-l-20" @blur="value => toEditInput(value, 'timeAfter', parent)"></el-input
          ><label class="inline-block middle label-unit">天</label>
        </div>
      </template>
      <!-- 6.属于/不属于 -->
      <template v-if="parent.templateCode == 'tag002'">
        <div class="m-b-20" :key="'tag6' + pindex">
          <el-radio v-model="parent.computeRadio" label="in">属于</el-radio>
          <el-radio v-model="parent.computeRadio" label="notIn">不属于</el-radio>
          <el-radio v-model="parent.computeRadio" label="isEmpty" v-if="['mainClerkId','clerkId','openClerkId'].includes(currentKey)">无归属</el-radio>
        </div>
      </template>
      <!-- 7.固定时段/最近 -->
      <template v-if="parent.templateCode == 'tag004'">
        <div :key="'tag7' + pindex" class="m-t-20">
          <div>
            <el-radio v-model="parent.fixedRecentRadio" label="1">固定时段</el-radio>
            <el-radio v-model="parent.fixedRecentRadio" label="2">最近时段</el-radio>
          </div>
          <!-- 固定时段 -->
          <div class="w-500 h-80 fixed-date-picker border-box" style="padding-bottom: 5px">
            <label class="inline-block middle label-unit m-r-8" v-if="parent.fixedRecentRadio == 1">时间范围</label
            ><el-date-picker
              v-model="parent.fixedRecentRangeValue"
              v-if="parent.fixedRecentRadio == 1"
              type="daterange"
              :editable="false"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="yyyy-MM-dd"
              value-format="yyyyMMdd"
              :picker-options="pickerOptions"
              >
            </el-date-picker>
            <div v-if="parent.fixedRecentRadio == 2">
              <label class="inline-block middle label-unit m-r-8">最近</label
              ><el-input v-model="parent.fixedRecentTimeRecent" placeholder="请输入1-730" class="m-r-8" style="width: 120px" @blur="value => toEditInput(value, 'fixedRecentTimeRecent', parent)"></el-input
              ><label class="inline-block middle label-unit">天</label>
            </div>
          </div>
        </div>
      </template>
      <!-- 8.输入添加值 -->
      <template v-if="parent.templateCode == 'tag007'">
        <div class="m-b-20" :key="'tag8' + pindex">
          <div><el-input v-model="parent.addInputValue" placeholder="请输入" class="w-184 m-r-8"></el-input><el-button class="middle" type="text" @click.stop="addInputVal(parent)">添加</el-button></div>
          <div class="m-t-18 add-tags-wrap">
            <template v-for="(item, index) in parent.addTags">
              <span :key="item.value + index" class="el-tag el-tag--small">{{ item.value }}<i class="el-tag__close el-icon-close" @click="delInputVal(index, parent)"></i></span>
            </template>
          </div>
        </div>
      </template>
      <!-- 9.输入搜索下拉多选 添加值 -->
      <template v-if="parent.templateCode == 'tag008'?(['mainClerkId','clerkId','openClerkId'].includes(currentKey)?(templateData[0].computeRadio!='isEmpty'?true:false):true):false">
        <div class="m-b-20" :key="'tag9' + pindex">
          <div>
            <el-select
              size="small"
              v-model="parent.searchModel"
              multiple
              filterable
              remote
              style="width: 100%"
              placeholder="请输入导购名称或code"
              :reserve-keyword="false"
              :remote-method="remoteMethod"
              @focus="remoteMethodFocus($event, parent, pindex)"
              @change="changeRemoteMethod(parent)"
              @remove-tag="val => removeRemoteMethod(val, parent)"
              class="el-select--small"
            >
              <el-option class="options" v-for="item in parent.searchOptions" :key="item.key" :label="item.value" :value="item.key">
                <div :class="parent.addSelectTags.some(el => el.clerkId == item.key) && 'active'">
                  <p>{{ item.value || '--' }}</p>
                  <p>{{ item.clerkCode || '--' }}</p>
                </div>
              </el-option>
              </el-select>
          </div>
          <!-- <div class="m-t-18 add-tags-wrap">
            <template v-for="(item, index) in parent.addSelectTags">
              <span class="el-tag el-tag--small" :key="item.value + index">{{ item.value }}<i class="el-tag__close el-icon-close" @click="delSearchSelectVal(index, parent)"></i></span>
            </template>
          </div> -->
        </div>
      </template>
      <!-- 10.存在其一/所有,/属于不属于 -->
      <template v-if="parent.templateCode == 'tag012'">
        <div class="m-b-20" :key="'tag10' + pindex">
          <el-select v-model="parent.selectOne" placeholder="请选择" class="w-98">
            <el-option label="所有" value="all"></el-option>
            <el-option label="存在其一" value="in"></el-option> </el-select
          ><label class="inline-block middle label-unit m-l-8">{{ tagData.tagName }}</label
          ><el-select v-model="parent.selectTwo" placeholder="请选择" class="w-98 m-l-8">
            <el-option label="属于" value="in"></el-option>
            <el-option label="不属于" value="notin"></el-option> </el-select
          ><!-- <label
                  class="inline-block middle label-tip m-l-8"
                  >{{parent.selectLabelTip}}</label> -->
        </div>
      </template>
      <!-- 11.门店选择器 -->
      <div v-if="parent.templateCode == 'tag011'">
        <div :key="'tag11' + pindex">
          <template v-if="loadSelector">
            <!--scenes服务门店查上线，其余门店查所有-->
            <vue-gic-store-new :options="parent.uuidOptions" :creatorId="creatorId" :uuid.sync="parent.uuid" ref="storeNew" :isAdd="!parent.uuid" :scenes="storeTagScense(parent)" :scenesVal="storeTagScense(parent)" />
          </template>
          <!-- <vue-gic-store-new :options="parent.uuidOp0tions" :creatorId="creatorId" :uuid.sync="parent.uuid" ref="storeNew" :isAdd="!parent.uuid"> </vue-gic-store-new> -->
        </div>
      </div>
      <!-- 12.多选项( 全部选项/已选选项 ) -->
      <template v-if="parent.templateCode == 'tag009'">
        <div class="multiple-select-wrap m-b-20" :key="'tag12' + pindex">
          <!-- <div class="multiple-select-wrap__search w-184">
                    <el-input
                      placeholder="请输入关键字搜索"
                      prefix-icon="el-icon-search"
                      v-model="parent.inputSearch"
                      @keyup.native="(value) => toSearchInput(value)">
                    </el-input>
                  </div> -->
          <div class="multiple-select-wrap__body">
            <div class="multiple-select-wrap__tab">
              <el-tabs v-model="parent.allSelectActive">
                <el-tab-pane label="全部选项" name="first">
                  <div class="all-select-options">
                    <template v-for="(item, index) in parent.allSelectOptions">
                      <el-checkbox :key="item.check + index" v-model="item.check" @change="allSelectChange($event, index, item, parent)">{{ item.name }}</el-checkbox>
                    </template>
                  </div>
                </el-tab-pane>
                <el-tab-pane :label="'已选选项(' + parent.selectedOptions.length + ')'" name="second">
                  <div class="slected-opyions">
                    <template v-for="(item, index) in parent.selectedOptions">
                      <span class="el-tag el-tag--small" :key="item.name + index">{{ item.name }}<i class="el-tag__close el-icon-close" @click="delallSelectVal(index, item, parent)"></i></span>
                    </template>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
      </template>
      <!-- 13.多选项 城市选择( 全部选项/已选选项 ) -->
      <template v-if="parent.templateCode == 'tag010'">
        <div class="multiple-select-wrap city-select-wrap m-b-20" :key="'tag13' + pindex">
          <!-- <div class="multiple-select-wrap__search w-184">
                    <el-input
                      placeholder="请输入关键字搜索"
                      prefix-icon="el-icon-search"
                      v-model="parent.inputSearch"
                      @keyup.native="(value) => toSearchInput(value,'city')">
                    </el-input>
                  </div> -->
          <div class="multiple-select-wrap__body">
            <div class="multiple-select-wrap__tab">
              <el-tabs v-model="parent.citySelectActive">
                <el-tab-pane label="全部选项" name="first">
                  <div class="all-select-options all-select-options__city">
                    <div class="city-checkbox city-checkbox-all border-box">
                      <el-checkbox :indeterminate="parent.isIndeterminateCity" v-model="parent.checkAllCity" @change="cityCheckAllChange($event, parent)">全选</el-checkbox>
                    </div>
                    <el-checkbox-group v-model="parent.checkeditemsCity" @change="citySelectChange($event, parent)">
                      <template v-for="(item, index) in parent.citySelectOptions">
                        <div class="city-checkbox border-box border-t-e4e7ed" :key="item.provinceId + index">
                          <el-checkbox :label="item.provinceId" :key="item.provinceId">{{ '' }}</el-checkbox><label class="inline-block middle font-14 pointer city-name" @click.stop="toggleCity(item.provinceId, item, parent)">{{ item.provinceName }}</label>
                          <div
                            class="el-select-dropdown el-popper is-multiple"
                            style="min-width: 240px; position: absolute; top: 30px; left: 20px; transform-origin: center top 0px; z-index: 2215;"
                            x-placement="bottom-start"
                            v-if="item.showCity">
                            <div class="el-scrollbar" style="">
                              <div class="el-select-dropdown__wrap el-scrollbar__wrap" style=" margin-right: -17px;">
                                <ul class="el-scrollbar__view el-select-dropdown__list">
                                  <!--市列表-->
                                  <template v-for="(itemCity, index) in item.children">
                                    <li
                                      :key="itemCity.check + index"
                                      :class="['el-select-dropdown__item', 'city-name', !!itemCity.check ? 'selected' : '']"
                                      @click.stop="toggleClickCity(itemCity, item, parent)">
                                      <span class="city-name">{{ itemCity.cityName }}</span>
                                    </li>
                                  </template>
                                </ul>
                              </div>
                              <div class="el-scrollbar__bar is-horizontal">
                                <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
                              </div>
                              <div class="el-scrollbar__bar is-vertical">
                                <div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
                              </div>
                            </div>
                            <!---->
                            <div x-arrow="" class="popper__arrow" style="left: 35px;"></div>
                          </div>
                        </div>
                      </template>
                    </el-checkbox-group>
                  </div>
                </el-tab-pane>
                <el-tab-pane :label="'已选选项(' + parent.citySelectedOptions.length + ')'" name="second">
                  <div class="slected-opyions city-slected-opyions">
                    <template v-for="(item, index) in parent.citySelectedOptions">
                      <span :key="item.selected + index" class="el-tag el-tag--small">{{ item.selected }}<i class="el-tag__close el-icon-close" @click="delcitySelectVal(index, item, parent)"></i></span>
                    </template>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
      </template>
      <!-- 14.选项控件异步 -->
      <template v-if="parent.templateCode == 'tag013'">
        <div class="m-b-20" :key="'tag14' + pindex">
          <div class="checkboxOption-wrap__body__checkAll border-box tag-mode">
            <el-checkbox :indeterminate="parent.isIndeterminate" v-model="parent.checkAll" @change="handleCheckAllChange($event, parent)">全选</el-checkbox>
          </div>
          <div class="checkboxOption-wrap__body__options border-box tag-options">
            <!-- @change="handleCheckedChange($event, parent)" -->
            <el-checkbox-group v-model="parent.checkeditems" @change="handleCheckedCitiesChange">
                <el-checkbox class="tag013check" v-for="(item, index) in parent.options" :label="item.key" :key="item.key + index">
                  <el-tooltip :content="item.value" placement="top" trigger="hover">
                    <span>{{ item.value }}</span>
                  </el-tooltip>
                </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </template>

      <!-- 15.时间属性(月日-月日+最近+之后) -->
      <template v-if="parent.templateCode == 'tag015'">
        <div class="m-b-20" :key="'tag15' + pindex">
          <el-radio v-model="parent.radio" label="1">固定时段</el-radio>
          <el-radio v-model="parent.radio" label="2">相对时段</el-radio>
          <!-- 固定时段 -->
          <div class="m-t-18 w-438 p-20 border-box bg-f3f6f9" v-if="parent.radio == 1">
            <vue-gic-datepicker
              v-model="parent.dateRangeValue"
              type="daterange"
              :editable="false"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="MMdd"
              value-format="MMdd"
            >
            </vue-gic-datepicker>
          </div>
          <!-- 相对时段 -->
          <div class="relative-range m-t-18 border-box" v-if="parent.radio != 1">
            <div>
              <div>
                <label class="inline-block w-98 label-unit">时间精度
                <el-popover placement="top" trigger="hover">
                  <template>
                      <span style="font-weight: 600">选择【天】：</span><br />当天：选择相对时段为“当天”，那么统计的是当天凌晨至当前时间内的数据；<br />最近X天：选择相对时间段为“最近2天”，那么系统在8月5号统计的是8.3-8.4号的数据；系统在8月7号统计的是8.5-8.6号的数据；<br/>之后X天：选择相对时间段为“之后2天”，那么系统在8月5号统计的是8.6-8.7号的数据，系统在8月7号统计的是8.8-8.9号的数据；<br/>
                      <span style="font-weight: 600">选择【月】：</span><br />当月：选择相对时段为“当月”，那么统计的是当月1号至当前时间的数据；<br />最近X月：选择相对时间段为“最近2月”，那么系统在8月统计的是6.1-7.31号的数据；系统在9月统计的是7.1-8.31号的数据；<br />之后X月：选择相对时段为"之后2月"，那么系统在8月统计的是9.1-10.31号的数据；系统在9月统计的是10.1-11.30号的数据；<br/>
                  </template>
                  <i slot="reference" class="iconfont icon-QuestionCircleOutlined" style="font-size: 14px"/>
                </el-popover>
                </label>
                <el-radio-group v-model="parent.timeRadio" @change="timeRadioChange($event, parent)">
                  <el-radio label="1">天</el-radio>
                  <el-radio label="2">月</el-radio>
                </el-radio-group>
              </div>
              <div class="m-t-20">
                <label class="inline-block w-98"></label>
                 <el-checkbox v-model="parent.timeChecked" @change="currentDayChange($event, parent)">
                  当{{ parent.timeRadio == 1 ? '天' : parent.timeRadio == 2 ? '月' : '年' }}
                </el-checkbox>
              </div>
              <div class="m-t-20">
                <label class="inline-block w-98"></label>
                <el-checkbox v-model="parent.timeAfterChecked">

                </el-checkbox>
                <el-select v-model="parent.timeSelect" placeholder="请选择" class="w-86 m-l-8">
                  <el-option label="最近" value="1"></el-option>
                  <el-option label="之后" value="2"></el-option>
                </el-select>
                <el-input
                  v-model="parent.timeInput"
                  placeholder="请输入"
                  class="w-90"
                  @blur="value => toEditDateInput(value, parent.timeRadio, parent)"
                ></el-input>
                <template v-if="parent.timeRadio == 1">
                  <label class="inline-block middle label-unit m-l-8">天</label>
                  <label class="inline-block middle label-tip">正整数，最大365</label>
                </template>
                <template v-if="parent.timeRadio == 2">
                  <label class="inline-block middle label-unit m-l-8">月</label>
                  <label class="inline-block middle label-tip">正整数，最大24</label>
                </template>
              </div>
            </div>
          </div>
        </div>
      </template>
      <!-- 16.时间属性(年月日-年月日) -->
      <template v-if="parent.templateCode == 'tag016'">
        <div class="m-b-20" :key="'tag16' + pindex">
          <el-date-picker
            v-model="parent.dateRangeValue"
            type="daterange"
            :editable="false"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="yyyy-MM-dd"
            value-format="yyyyMMdd">
          </el-date-picker>
        </div>
      </template>
      <!-- 19.时间属性(年月日时分秒-年月日时分秒) -->
      <template v-if="parent.templateCode == 'tag019'">
        <div class="m-b-20" :key="'tag17' + pindex">
          <el-radio v-model="parent.radio" label="1">固定时段</el-radio>
          <el-radio v-model="parent.radio" label="2">相对时段</el-radio>
          <!-- 固定时段 -->
          <div class="m-t-18 w-438 p-20 border-box bg-f3f6f9" v-if="parent.radio == 1">
            <el-date-picker
              v-model="parent.dateRangeValue"
              type="daterange"
              :editable="false"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="yyyy-MM-dd"
              :default-time="['00:00:00', '23:59:59']"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </div>
          <!-- 相对时段 -->
          <div class="relative-range m-t-18 border-box" v-if="parent.radio != 1">
            <div>
              <div>
                <label class="inline-block w-98 label-unit">时间精度</label>
                <el-radio-group v-model="parent.timeRadio" @change="timeRadioChange($event, parent)">
                  <el-radio label="1">天</el-radio>
                  <el-radio label="2">月</el-radio>
                  <el-radio label="3">年</el-radio>
                </el-radio-group>
              </div>
              <div class="m-t-20">
                <label class="inline-block w-98"></label>

                <el-checkbox v-model="parent.timeChecked" @change="currentDayChange($event, parent)">
                  当{{ parent.timeRadio == 1 ? '天' : parent.timeRadio == 2 ? '月' : '年' }}
                </el-checkbox>
              </div>

              <div class="m-t-20">
                <label class="inline-block w-98"></label>
                <el-checkbox v-model="parent.timeAfterChecked">

                </el-checkbox>
                <el-select v-model="parent.timeSelect" placeholder="请选择" class="w-86 m-l-8">
                  <el-option label="最近" value="1"></el-option>
                  <el-option label="之后" value="2" ></el-option>
                </el-select>
                <el-input
                  v-model="parent.timeInput"
                  placeholder="请输入"
                  class="w-90"
                  @blur="value => toEditDateInput(value, parent.timeRadio, parent)"
                ></el-input>
                <template v-if="parent.timeRadio == 1">
                  <label class="inline-block middle label-unit m-l-8">天</label>
                  <label class="inline-block middle label-tip">正整数，最大365</label>
                </template>
                <template v-if="parent.timeRadio == 2">
                  <label class="inline-block middle label-unit m-l-8">月</label>
                  <label class="inline-block middle label-tip">正整数，最大24</label>
                </template>
                <template v-if="parent.timeRadio == 3">
                  <label class="inline-block middle label-unit m-l-8">年</label>
                  <label class="inline-block middle label-tip">正整数，最大2</label>
                </template>
              </div>
            </div>
          </div>
        </div>
      </template>

      <template v-if="parent.templateCode == 'tag020'">
        <div class="m-b-20" :key="'tag17' + pindex">
          <el-radio-group v-model="parent.radio" @change="timeRadioChange($event,parent)">
          <el-radio label="1">固定时段</el-radio>
          <el-radio label="2">相对时段</el-radio>
          </el-radio-group>
          <!-- 固定时段 -->
          <div class="m-t-18 w-438 p-20 border-box bg-f3f6f9" v-if="parent.radio == 1">
            <el-date-picker
              v-model="parent.dateRangeValue"
              type="daterange"
              :editable="false"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="yyyy-MM-dd"
              :picker-options="tag020PickerOptions(parent)"
              :default-time="['00:00:00', '23:59:59']"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </div>
          <!-- 相对时段 -->
          <div class="relative-range m-t-18 border-box" v-if="parent.radio != 1">
            <div>
              <div>
                <label class="inline-block w-98 label-unit">时间精度
                  <el-popover  placement="top" open-delay="100" trigger="hover">
                    <div >
                      <template v-if="tagData.isActive == 1 ">
                        <span style="font-weight: 600">选择【天】：</span><br />当天：选择相对时段为“当天”，那么统计的是当天凌晨至当前时间内的数据；<br />最近X天：选择相对时间段为“最近2天”，那么系统在8月1号统计的是7.30-7.31号的数据；系统在8月5号统计的是8.3-8.4号的数据；<br/>
                        <span style="font-weight: 600">选择【月】：</span><br />当月：选择相对时段为“当月”，那么统计的是当月1号至当前时间的数据；<br />最近X月：选择相对时间段为“最近2月”，那么系统在8月统计的是6.1-7.31号的数据；系统在9月统计的是7.1-8.31号的数据；<br />
                        <span style="font-weight: 600">选择【年】：</span><br />当年：选择相对时段为“当年”，那么统计的是当年1号至当前时间的数据；<br />最近X年：选择相对时间段为“最近1年”，那么系统统计的是去年1.1-12.31号的数据。
                      </template>
                      <template v-else>
                        <span style="font-weight: 600">选择【天】：</span><br />最近X天：选择相对时段为“最近2天”，那么系统在5号凌晨统计3-4号的数据；系统在6号凌晨统计时，统计的是4-5号的数据；<br />
                        <span style="font-weight: 600">选择【月】：</span><br />当月：选择相对时间段为“当月”，那么系统在8月5号凌晨进行统计时，统计的是在8.1-8.4号的数据；系统在6号凌晨统计时，统计的是在8.1-8.5号的数据；<br />最近X月：选择相对时间段为“最近2月”，那么系统在8月5号凌晨进行统计时，统计的是6.1-7.31号的数据；系统在6号凌晨统计时，统计的还是6.1-7.31号的数据；<br />
                        <span style="font-weight: 600">选择【年】：</span><br />当年：选择相对时间段为“当年”，那么系统在8月5号凌晨进行统计时，统计的是在当年1.1-8.4号的数据；系统在6号凌晨统计时，统计的是在当年1.1-8.5号的数据；<br />最近X年：选择相对时间段为“最近1年”，那么系统在8月5号凌晨进行统计时，统计的是在去年1.1-12.31号的数据；系统在6号凌晨统计时，统计的还是在去年1.1-12.31号的数据。
                      </template>
                    </div>
                    <i slot="reference" class="iconfont icon-tishi" style="color: #909399"></i>
                  </el-popover>
                </label>
                <el-radio-group v-model="parent.timeRadio" @change="timeRadioChange($event, parent)">
                  <el-radio label="1">天</el-radio>
                  <el-radio label="2">月</el-radio>
                  <el-radio label="3">年</el-radio>
                </el-radio-group>
              </div>
              <template  v-if="['haobanWechatRelatedTime','onceCostTime'].includes(currentKey)">
                <div class="m-t-20" v-if="parent.timeRadio!=='1'">
                  <label class="inline-block w-98"></label>
                    <el-checkbox v-model="parent.timeChecked" @change="currentDayChange($event, parent)">
                      当{{  parent.timeRadio == 2 ? '月' : '年' }}
                    </el-checkbox>
                </div>
              </template>
              <div class="m-t-20" v-else >
                <label class="inline-block w-98"></label>
                <el-checkbox v-model="parent.timeChecked" @change="currentDayChange($event, parent)">
                   当{{ parent.timeRadio == 1 ? '天' : parent.timeRadio == 2 ? '月' : '年' }}
                </el-checkbox>
              </div>
              <div class="m-t-20">
                <label class="inline-block w-98"></label>
                <el-checkbox v-model="parent.timeAfterChecked" style="margin-right: 7px">

                </el-checkbox>
                <span>最近</span>
                <!-- <el-select v-model="parent.timeSelect" placeholder="请选择" class="w-86 m-l-8" disabled>
                  <el-option label="最近" value="1" style="color: #303133"></el-option>
                </el-select> -->
                <el-input
                  v-model="parent.timeInput"
                  placeholder="请输入"
                  class="w-90"
                  @blur="value => toEditDateInput(value, parent.timeRadio, parent)"
                ></el-input>
                <template v-if="parent.timeRadio == 1">
                  <label class="inline-block middle label-unit m-l-8">天</label>
                  <label class="inline-block middle label-tip">正整数，最大730</label>
                </template>
                <template v-if="parent.timeRadio == 2">
                  <label class="inline-block middle label-unit m-l-8">月</label>
                  <label class="inline-block middle label-tip">正整数，最大24</label>
                </template>
                <template v-if="parent.timeRadio == 3">
                  <label class="inline-block middle label-unit m-l-8">年</label>
                  <label class="inline-block middle label-tip">正整数，最大2</label>
                </template>
              </div>
            </div>
          </div>
        </div>
      </template>

      <!-- 17.时间属性(年月日-年月日 + 最近) -->
      <template v-if="parent.templateCode == 'tag017'">
        <div class="m-b-20" :key="'tag18' + pindex">
          <el-radio v-model="parent.radio" label="1">固定时段</el-radio>
          <el-radio v-model="parent.radio" label="2">相对时段</el-radio>
          <!-- 固定时段 -->
          <div class="m-t-18 w-438 p-20 border-box bg-f3f6f9" v-if="parent.radio == 1">
            <el-date-picker
              v-model="parent.dateRangeValue"
              type="daterange"
              :editable="false"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="yyyy-MM-dd"
              value-format="yyyyMMdd">
            </el-date-picker>
          </div>
          <!-- 相对时段 -->
          <div class="relative-range m-t-18 border-box" v-if="parent.radio != 1">
            <div>
              <div>
                <label class="inline-block w-98 label-unit">时间精度
                <el-popover placement="top" trigger="hover">
                  <template>
                      <span style="font-weight: 600">选择【天】：</span><br />当天：选择相对时段为“当天”，那么统计的是当天凌晨至当前时间内的数据；<br />最近X天：选择相对时段为“最近2天”，那么系统在5号统计3-4号的数据；系统在6号统计时，统计的是4-5号的数据；<br/>
                      <span style="font-weight: 600">选择【月】：</span><br />当月：选择相对时间段为“当月”，那么系统在8月5号统计的是在8.1-8.4号的数据；系统在6号统计的是在8.1-8.5号的数据；<br />最近X月：选择相对时间段为“最近2月”，那么系统在8月5号统计的是6.1-7.31号的数据；系统在6号统计的还是6.1-7.31号的数据；<br />
                      <span style="font-weight: 600">选择【年】：</span><br />当年：选择相对时间段为“当年”，那么系统在8月5号统计的是在当年1.1-8.4号的数据；系统在6号统计的是在当年1.1-8.5号的数据；<br />最近X年：选择相对时间段为“最近1年”，那么系统在8月5号统计的是在去年1.1-12.31号的数据；系统在6号统计的还是在去年1.1-12.31号的数据。<br />
                  </template>
                  <i slot="reference" class="iconfont icon-QuestionCircleOutlined" style="font-size: 14px"/>
                </el-popover>
                </label>
                <el-radio-group v-model="parent.timeRadio" @change="timeRadioChange($event, parent)">
                  <el-radio label="1">天</el-radio>
                  <el-radio label="2">月</el-radio>
                  <el-radio label="3">年</el-radio>
                </el-radio-group>
              </div>
              <div class="m-t-20">
                <label class="inline-block w-98"></label>
                <el-checkbox v-model="parent.timeChecked" @change="currentDayChange($event, parent)">
                  当{{ parent.timeRadio == 1 ? '天' : parent.timeRadio == 2 ? '月' : '年' }}
                </el-checkbox>
              </div>
              <div class="m-t-20">
                <label class="inline-block w-98"></label>
                <el-checkbox v-model="parent.timeAfterChecked" style="margin-right: 6px"></el-checkbox>

              <label class="inline-block middle label-unit m-r-8">最近</label>
                <el-input
                  v-model="parent.timeInput"
                  placeholder="请输入"
                  class="w-90"
                  @blur="value => toEditDateInput(value, parent.timeRadio, parent)"
                ></el-input>
                <template v-if="parent.timeRadio == 1">
                  <label class="inline-block middle label-unit m-l-8">天</label>
                  <label class="inline-block middle label-tip">正整数，最大365</label>
                </template>
                <template v-if="parent.timeRadio == 2">
                  <label class="inline-block middle label-unit m-l-8">月</label>
                  <label class="inline-block middle label-tip">正整数，最大24</label>
                </template>
                <template v-if="parent.timeRadio == 3">
                  <label class="inline-block middle label-unit m-l-8">年</label>
                  <label class="inline-block middle label-tip">正整数，最大2</label>
                </template>
              </div>
            </div>
          </div>
        </div>
      </template>

      <!-- 会员标签嵌入卡券选择器 com023 -->
      <!-- v-if="parent.templateCode == 'com023'" -->
      <div v-if="parent.templateCode == 'com023'" style="min-height: 60px">
        <div style="margin-bottom:20px" v-if="templateDataList.tagName == '已领取指定卡券' || templateDataList.tagName == '待领取指定卡券'">
          选择卡券：<el-radio-group v-model="cardRadioType">
            <el-radio :label="0">全部卡券</el-radio>
            <el-radio :label="1">部分卡券</el-radio>
          </el-radio-group>
        </div>
        <vue-gic-card
          v-show="cardRadioType"
          @reciver-card-list="reciverCardList"
          :disabledList="disabledList"
          :cardLimit="cardLimit"
          :cardType="cardType"
          :tag-list="tagList"
          :type="1">
        </vue-gic-card>
        <p v-show="!cardRadioType" class="grey" style="margin-top:15px">说明：选择全部卡券后，后续创建的卡券也会进行统计。</p>
      </div>

      <!-- 会员分层 tag021 -->
      <template v-if="parent.templateCode == 'tag021'">
        <div class="m-b-20" :key="'tag021' + pindex">
          <div class="checkboxOption-wrap__body__checkAll border-box tag-mode">
            <el-checkbox :indeterminate="parent.isIndeterminate" v-model="parent.checkAll" @change="handleCheckAllChange($event, parent)">全选</el-checkbox>
          </div>
          <div class="checkboxOption-wrap__body__options border-box tag-options" style="padding: 20px 0">
            <el-checkbox-group v-model="parent.checkeditems" @change="handleCheckedCitiesChange">
              <el-checkbox style="width: 170px; margin: 0 16px 16px" v-for="(item, index) in parent.options" :label="item.memberTagGroupId" :key="item.memberTagGroupId + index">
                <span>{{ item.groupName }}</span>
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </template>

      <!-- 核心流失 tag022 -->
      <template v-if="parent.templateCode == 'tag022'">
        <div class="m-b-20" :key="'tag022' + pindex">
          <div class="checkboxOption-wrap__body__checkAll border-box tag-mode">
            <el-checkbox :indeterminate="parent.isIndeterminate" v-model="parent.checkAll" @change="handleCheckAllChange($event, parent)">全选</el-checkbox>
          </div>
          <div class="checkboxOption-wrap__body__options border-box tag-options">
            <el-checkbox-group v-model="parent.checkeditems" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="(item, index) in parent.options" :label="item.memberTagGradeId" :key="item.memberTagGradeId + index">{{item.aliasName}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </template>

      <!-- 嵌入商品选择器 -->
      <div v-if="parent.templateCode == 'com022'">
        <p style="margin-bottom:15px">下方商品筛选器的“剔除”逻辑是剔除用户消费的商品，而非剔除会员，若想“剔除”人，请使用外面标签与标签之间的“剔除”逻辑。</p>
        <vue-gic-goods-selector ref="selector" @changelist="changelist"></vue-gic-goods-selector>
        <!-- <vue-gic-selector ref="selector" @changelist="changelist"></vue-gic-selector> -->
      </div>

      <!-- 单笔消费商品数量 -->
      <div v-if="parent.templateCode == 'com025'">
        <div class="m-b-20" :key="'tag2' + pindex">
          商品数量
          <el-select v-model="parent.symbol" placeholder="请选择" style="width: 100px;margin:0 10px">
            <el-option
              v-for="item in parent.options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

          <div style="display: inline-block" v-if="parent.symbol == '区间'">
            <el-input :value="parent.numRange[0]" @input="v => $set(parent.numRange, 0, onInputNum(v, parent.expandParams))" @keyup.native="handleNumRangeEnd($event, parent.expandParams)" @blur="e => $set(parent.numRange, 0, onInputBlur(e, parent.expandParams))" class="select-wrap-input" style="width: 100px;margin-right: 0;" placeholder="请输入数字"></el-input>
              <label>-</label>
            <el-input :value="parent.numRange[1]" @input="v => $set(parent.numRange, 1, onInputNum(v, parent.expandParams))" @keyup.native="handleNumRangeEnd($event, parent.expandParams)" @blur="e => $set(parent.numRange, 1, onInputBlur(e, parent.expandParams))" class="select-wrap-input" style="width: 100px;margin-right: 10px;" placeholder="请输入数字"></el-input>
          </div>
          <div style="display: inline-block" v-if="parent.symbol != '区间'">
            <el-input :value="parent.num" @input="v => $set(parent, 'num', onInputNum(v, parent.expandParams))" @keyup.native="handleNumRangeEnd($event, parent.expandParams)" @blur="e => $set(parent, 'num', onInputBlur(e, parent.expandParams))" class="select-wrap-input" style="width: 100px;margin-right: 10px;" placeholder="请输入数字"></el-input>
          </div>
          件
        </div>

        <p style="margin-bottom:15px">已选商品</p>
        <vue-gic-goods-selector ref="selector" @changelist="changelist"></vue-gic-goods-selector>
      </div>

      <!-- 标签值 / 固定时间 / 之后时间 tag024 -->
      <template v-if="parent.templateCode == 'tag024'">
        <div class="m-b-20" :key="'tag24' + pindex">
          <div>
            <el-radio v-model="parent.radio" label="1">固定时段</el-radio>
            <el-radio v-model="parent.radio" label="2">之后时段</el-radio>
          </div>
          <!-- 固定时段 -->
          <div class="m-t-18 w-500 h-80 fixed-date-picker border-box bg-f3f6f9">
            <label class="inline-block middle label-unit m-r-8" v-if="parent.radio == 1">时间范围</label
            ><el-date-picker
              v-model="parent.dateRangeValue"
              v-if="parent.radio == 1"
              type="daterange"
              :editable="false"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="yyyy-MM-dd"
              value-format="yyyyMMdd"
              :picker-options="tag024Options"
              ><!-- :picker-options="pickerOptions"  -->
            </el-date-picker>
            <div v-if="parent.radio == 2">
              <label class="inline-block middle label-unit m-r-8">之后</label
              ><el-input v-model="parent.afterday" placeholder="请输入1-365" style="width: 120px" class="m-r-8" @blur="value => toEditInput(value, 'afterday', parent)"></el-input
              ><label class="inline-block middle label-unit">天</label>
              <span class="tips m-l-8 middle">（输入1则统计截止到明天23:59:59即将过期的积分）</span>
            </div>
          </div>
        </div>
      </template>

      <!-- 是否同意隐私协议 tag025 -->
      <template v-if="parent.templateCode == 'tag025'">
        <div class="m-b-20" :key="'tag25' + pindex">
          <div>
            <el-radio-group  v-model="parent.isAgree" @change="parent.ids=[]">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </div>
          <!-- 固定时段 -->
          <div class="m-t-18 border-box" v-if="parent.isAgree===1">
            <el-select v-model="parent.ids" multiple collapse-tags class="tag025-select" popper-class="tag025-scrollbar" style="width:260px;color:#2F54EB" placeholder="选择会员同意的协议版本">
                <el-option
                  v-for="agreement in parent.options"
                  :key="agreement.agreementId"
                   :label="agreement.agreementName"
                  :value="agreement.agreementId">
                  <div>
                    <p class="agreement-name">{{agreement.agreementName}}</p>
                    <p class="create-time">{{agreement.createTime|formatDate}}</p>
                  </div>
                </el-option>
              </el-select>
          </div>
        </div>
      </template>

      <!-- 是否同意隐私协议(新) tag026 -->
      <template v-if="parent.templateCode == 'tag026'">
        <div class="m-b-20" :key="'tag026' + pindex">
          <div>
            <label class="inline-block m-r-20 label-unit">渠道<el-tooltip popper-class="edit-tag-tooltip" placement="top" open-delay="100" effect="light">
              <div slot="content">若商户对接了微盟，客户除了在达摩侧会员小程序中会进行协议文件的授权，还可能在微盟微商城小程序中进行协议的授权，因此可区分不同渠道进行筛选；</div>
               <i class="iconfont icon-tishi m-l-4" style="color: #909399"></i></el-tooltip>
              </label><el-radio-group  v-model="parent.channel" @change="parent.ids=[]">
              <el-radio :label="0">达摩</el-radio>
              <el-radio :label="1">微盟</el-radio>
            </el-radio-group>
          </div>
          <div class="m-t-18" v-if="parent.channel===0">
            <label class="inline-block m-r-20 label-unit">状态<el-tooltip popper-class="edit-tag-tooltip" placement="top" open-delay="100" effect="light">
              <div slot="content">同意：同意授权协议；<br/>未同意：未授权/拒绝/取消授权协议；</div>
               <i class="iconfont icon-tishi m-l-4" style="color: #909399"></i></el-tooltip>
              </label><el-radio-group  v-model="parent.isAgree" @change="parent.ids=[]">
              <el-radio :label="1">同意</el-radio>
              <el-radio :label="0">未同意</el-radio>
            </el-radio-group>
          </div>
          <div class="m-t-18" v-if="parent.channel===1">
            <label class="inline-block m-r-20 label-unit">事由<el-tooltip popper-class="edit-tag-tooltip" placement="top" open-delay="100" effect="light">
              <div slot="content">商户在微盟侧可以配置在用户“访问”微商城小程序或进行“登录”时，要求同意协议，因此客户在微盟侧同意隐私协议的来源可能不同，您可基于您在微盟侧的协议配置情况来进行筛选。比如在微盟侧将“隐私协议”配置在了“访问”场景下，那么在筛选客户同意协议情况时就筛选“访问”来源下的授权情况；</div>
               <i class="iconfont icon-tishi m-l-4" style="color: #909399"></i></el-tooltip>
              </label><el-radio-group  v-model="parent.event" @change="parent.ids=[]">
              <el-radio :label="0">访问</el-radio>
              <el-radio :label="1">登录</el-radio>
            </el-radio-group>
          </div>
          <div class="m-t-18" v-if="(parent.channel===0&&parent.isAgree===1)||(parent.channel===1)">
            <label class="inline-block m-r-20 label-unit">时间<el-tooltip popper-class="edit-tag-tooltip" placement="top" open-delay="100" effect="light">
              <div slot="content">可根据客户最新一次同意协议的时间来筛选符合条件的客户。由于协议可能存在更新，客户同意协议的版本可能不一，建议根据“后台最新一次上传协议文件的时间至当前时间”来筛选出同意了最新版协议的客户；</div>
              <i class="iconfont icon-tishi m-l-4" style="color: #909399"></i></el-tooltip></label>
            <el-date-picker v-model="parent.date" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期"></el-date-picker><span class="m-l-16">至&nbsp;&nbsp;当前时间</span>
            <el-popover placement="bottom" width="600" trigger="click" :open-delay="200" v-if="!parent.channel">
              <el-table :data="parent.options" max-height="400">
                <el-table-column min-width="150" property="agreementName" label="协议名称"></el-table-column>
                <el-table-column width="100" property="agreementType" label="协议类型">
                  <template slot-scope="{row}">{{row.agreementType|agreementTypeFilter}}</template>
                </el-table-column>
                <el-table-column width="200" property="createTime" label="上传时间">
                  <template slot-scope="{row}">{{row.createTime|formatDate}}</template>
                </el-table-column>
              </el-table>
              <el-button slot="reference" type="text" class="m-l-16">查看上传记录</el-button>
            </el-popover>
          </div>
        </div>
      </template>

      <!-- 会员标签嵌入卡券选择器 com024 -->
      <!-- v-if="parent.templateCode == 'com024'" -->
      <div v-if="parent.templateCode == 'com024'" style="min-height: 100px">
        <div style="margin-bottom:20px">
          <el-input type="text"  v-model="expiration" style="width:90px;" @change="onChangeTime" />
          天后过期
          <span class="grey">（仅支持输入1-30之间的正整数）</span>
        </div>
        选择卡券：<el-radio-group v-model="cardRadioType">
          <el-radio :label="0">全部卡券</el-radio>
          <el-radio :label="1">部分卡券</el-radio>
        </el-radio-group>
        <vue-gic-card
          v-show="cardRadioType"
          ref="gicCard"
          style="margin-top:20px"
          @reciver-card-list="reciverCardList"
          :disabledList="disabledList"
          :cardLimit="cardLimit"
          :cardType="cardType"
          :tag-list="tagList"
          :type="1"
          :effect="true">
        </vue-gic-card>
        <p v-show="!cardRadioType" class="grey" style="margin-top:15px">说明：选择全部卡券后，后续创建的卡券也会进行统计。</p>
      </div>
      <!--会员等级变更选项-->
      <div v-if="parent.templateCode == 'com009'">
        <el-form :model="com009" label-width="130px" label-position="left">
          <el-form-item label="变更前会员等级：">
            <el-select v-model="com009.beforeGradeId" style="width: 100%">
              <el-option v-for="item in parent.options[0].data" :key="item.key" :value="item.key" :label="item.value">{{ item.value }}</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="变更后会员等级：">
            <el-select v-model="com009.afterGradeId" style="width: 100%">
              <el-option v-for="item in parent.options[0].data" :key="item.key" :value="item.key" :label="item.value">{{ item.value }}</el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <!--固定/最近 + 天（当天、之后） 月（当月、之后）-->
      <template v-if="parent.templateCode == 'tag030'">
        <div :key="'tag7' + pindex">
          <div>
            <el-radio v-model="parent.radioType" :label="0">固定时段</el-radio>
            <el-radio v-model="parent.radioType" :label="1">相对时段</el-radio>
          </div>
          <!-- 固定时段 -->
          <div class="w-500 tag030 border-box" :style="{'paddingBottom': '5px', 'minHeight': parent.radioType ? '120px' : 'auto'}">
            <label class="inline-block middle label-unit m-r-8" v-if="!parent.radioType">时间范围</label
            >
            <vue-gic-datepicker
              v-model="parent.fixedTimeRangeValue"
              v-if="!parent.radioType"
              type="daterange"
              :editable="false"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="MMdd"
              value-format="MMdd"
            >
            </vue-gic-datepicker>
            <template v-if="parent.radioType">
              <div class="tag030flex">
                <span>时间精度
                  <el-popover placement="top" trigger="hover">
                    <template>
                        <span style="font-weight: 600">选择【天】：</span><br />当天：选择相对时段为“当天”，那么系统在凌晨统计的是当天的数据；<br />之后X天：选择相对时间段为“之后2天”，那么系统在8月5号统计的是8.6-8.7号的数据；系统在8月7号统计的是8.8-8.9号的数据；<br/>
                        <span style="font-weight: 600">选择【月】：</span><br />当月：选择相对时段为“当月”，那么统计的是当月1号至当月最后一天的数据；<br />之后X月：选择相对时间段为“最近2月”，那么系统在8月统计的是9.1-10.31号的数据；系统在9月统计的是10.1-11.30号的数据；<br />
                    </template>
                  <i slot="reference" class="iconfont icon-QuestionCircleOutlined" style="font-size: 14px"/></el-popover>
                ：</span>
                <el-radio-group v-model="parent.recentType" class="radio" @change="onChangeRadioGroup">
                  <el-radio :label="0">天</el-radio>
                  <el-radio :label="1">月</el-radio>
                </el-radio-group>
              </div>
              <el-checkbox-group v-model="parent.checkGroup" class="flex-direction">
                <el-checkbox :label="`当${parent.recentType ? '月' : '天'}`"></el-checkbox>
                <el-checkbox label="之后">
                  <span>
                    之后
                    <el-input v-model.number="parent.recentValue" :placeholder="!parent.recentType ? '请输入1-90' : '请输入1-3'" @input="v => $set(parent, 'recentValue', onValidateIpt(v))" class="ipt" />{{ parent.recentType ? '月' : '天' }}
                  </span>
                </el-checkbox>
              </el-checkbox-group>
            </template>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import qs from 'qs';
// import vueGicGoodsSelector from '@/components/selector/index.vue';
import tagDetails from '@/components/tagDetail/mixin/index';
import VueGicCard from '@/components/card/card';
import { aliasNames } from '@/config'
import timeFormat from '@/common/js/timeFormat';
import { getTagType, findWidget, findOndJson } from '@/request/tagConfig';
import moment from 'moment'

// 两个数字区间 numRange [0, 1]
const templateCode = ['tag001', 'tag002', 'tag003', 'tag004', 'tag005', 'tag006', 'tag007', 'tag008', 'tag009', 'tag010', 'tag011', 'tag012', 'tag013', 'tag014', 'tag015', 'tag016', 'tag017', 'tag018', 'tag024'];

/**
 * checkeditems 多选框
 */
const templateCodeKeyWords = ['checkeditems', '', 'numRange', '', '', '', '', '', '', '', '', '', '', '', 'monthDayRange', '', '', ''];

// const RegTest = /^[0-9]+(.[0-9]{0,2})?$/;
const RegTest = /^-?[0-9]*(.[0-9]{0,2})?$/;
const RegNoC = /([\u4e00-\u9fa5]|[a-zA-Z])/g;

export default {
  name: 'tag-config',

  props: {
    tagId: String,
    columnKey: String,
    templateDataList: Object,
    creatorId: String
  },

  mixins: [tagDetails],

  components: {
    VueGicCard
  },

  data() {
    return {
      showTag: true,
      select: {
        expends: true
      },
      templateCode: null,
      timeAfterChecked: '',
      tagList: [],
      // 卡券
      disabledList: [],
      cardLimit: [],
      cardType: null,
      postTemplateData: {
        selectedVal: [],
        template: []
      },
      currentComputeType: '',
      templateData: [],
      id: '',
      searchFlag: false,
      // 标签详情数据
      tagData: {
        tagId: '',
        tagName: '',
        tagDescribe: '',
        isActive: 0, // 是否实时
        inputSearch: '' // 输入搜索
      },
      com001: {
        options: [],
        numRange: ['', ''],
        symbol: '',
        num: ''
      },
      tag001: {
        checkeditems: [],
        isIndeterminate: false,
        checkAll: false,
        options: [],
        compute: 'in'
      },

      // 多选项值异步
      tag013: {
        checkeditems: [],
        isIndeterminate: false,
        checkAll: false,
        options: [],
        compute: 'in'
      },

      // 属于/不属于(计算控件)
      tag002: {
        computeRadio: 'in'
      },

      // 数字区间
      tag003: {
        numRange: ['', '']
      },

      // 时间属性-固定时段/最近
      tag004: {
        fixedRecentRadio: '1',
        fixedRecentRangeValue: [],
        fixedRecentTimeRecent: ''
      },
      // 最近 天
      tag005: {
        timeRecent: '',
        timeType: 'lastday'
      },

      // 之后 天
      tag006: {
        timeAfter: '',
        timeType: 'afterday'
      },

      // 添加输入值
      tag007: {
        addInputValue: '',
        addTags: []
      },

      // 搜索下拉多选添加值
      tag008: {
        searchModel: [],
        searchOptions: [
          // {
          //   key: 1,
          //   value: '测试去1'
          // }
        ],
        addSelectTags: []
      },
      // 多选项( 全部选项/已选选项 )
      tag009: {
        allSelectActive: 'first',
        inputSearch: '',
        allSelectOptions: [],
        selectedOptions: []
      },

      // 多选项(城市选择) ( 全部选项/已选选项 )
      tag010: {
        citySelectActive: 'first',
        isIndeterminateCity: false,
        checkAllCity: false,
        citySelectOptions: [],
        checkeditemsCity: [], // 已选省
        citySelectedOptions: []
      },
      // 门店选择器
      tag011: {
        // 门店选择器参数
        uuid: '', // 新增传空，编辑必传
        // 需要的下拉 默认为全部[0,1,2,3,4,5]
        // 0 全部 1 门店类型 2门店标签 3 门店区域 4 门店分组 5 部分门店
        uuidOptions: [0, 1, 2, 3, 4, 5],
        isAdd: true, // 新增: true, 编辑: false
      },

      // 多范围()
      tag012: {
        selectOne: 'all',
        selectTwo: 'in',
        selectLabel: '曾经消费门店',
        selectLabelTip: '注：存在其一即会员至少有一个字段值满足所选条件；所有即会员的所有字段值满足所选条件'
      },

      // 时间属性-固定时段/相对时段 年月日-年月日+最近+之后
      tag014: {
        radio: '1',
        dateRangeValue: [],

        // 相对时间
        timeRadio: '1', // 年月日
        timeChecked: false,
        timeAfterChecked: false,
        // timeCheckedTwo: false,
        timeSelect: '1', // 最近/之后
        timeInput: ''
      },
      // 时间属性- 月日-月日+最近+之后
      tag015: {
        radio: '1',
        dateRangeValue: [],
        // 相对时间
        timeRadio: '1', // 年月日
        timeChecked: false,
        timeAfterChecked: false,
        // timeCheckedTwo: false,
        timeSelect: '1', // 最近
        timeInput: ''
      },
      // 时间属性- 年月日-年月日
      tag016: {
        dateRangeValue: []
      },
      // 时间属性- 年月日-年月日+最近
      tag017: {
        radio: '1',
        dateRangeValue: [],
        // 相对时间
        timeRadio: '1', // 年月日
        timeChecked: false,
        timeAfterChecked: false,
        // timeCheckedTwo: false,
        timeSelect: '1', // 最近
        timeInput: ''
      },

      // 时间属性- 年月日-年月日
      tag019: {
        radio: '1',
        dateRangeValue: [],

        // 相对时间
        timeRadio: '1', // 年月日
        timeChecked: false,
        timeAfterChecked: false,
        // timeCheckedTwo: false,
        timeSelect: '1', // 最近/之后
        timeInput: ''
      },
      tag020: {
        radio: '1',
        dateRangeValue: [],

        // 相对时间
        timeRadio: '1', // 年月日
        timeChecked: false,
        timeAfterChecked: false,
        // timeCheckedTwo: false,
        timeSelect: '1', // 最近/之后
        timeInput: ''
      },
      // 会员分层
      tag021: {
        checkeditems: [],
        isIndeterminate: false,
        checkAll: false,
        options: [],
        compute: 'in'
      },
      // 核心流失
      tag022: {
        checkeditems: [],
        isIndeterminate: false,
        checkAll: false,
        options: [],
        compute: 'in'
      },

      // 商品选择器
      com022: {
        selectList: [],
        conditionsList: [],
        abbrInfo: '',
        finalId: null
      },
      // 卡券选择器
      com023: {

      },
      tag024: {
        radio: '1',
        dateRangeValue: [],
        afterday: ''
      },
      tag024Options: {
        disabledDate(time) {
          const getYear = new Date().getFullYear();
          const setYear = new Date().setYear(getYear + 1);
          return time.getTime() > (setYear - 24 * 60 * 60 * 1000);
        }
      },
      tag025: {
        isAgree: 1, // 0否 1是
        ids: [],
        options: []
      },
      tag026: {
        channel: 0, // 渠道 0达摩 1微盟
        isAgree: 1, // 状态 0未同意 1同意
        event: 0, // 事由 0访问 1登录
        date: null,
        options: []
      },
      // 会员等级变更
      com009: {
        beforeGradeId: '',
        afterGradeId: '',
        tag004DatePickerLimt: 365 * 24 * 60 * 60 * 1000
      },
      // 开卡纪念日
      tag030: {
        radioType: 0,
        fixedTimeRangeValue: [],
        recentType: 0,
        recentValue: null,
        checkGroup: []
      },
      cardListData: [],
      com024: {},
      com025: {},
      expiration: '1',
      cardParams: {
        startTime: '',
        endTime: ''
      },
      cardRadioType: 1,
      loadSelector: false // 新版门店选择器加载标识
    };
  },
  watch: {
    tagId: {
      immediate: true,
      handler(newval) {
        this.id = newval;
      }
    }
  },
  computed: {
    pickerOptions() {
      return {
        disabledDate(time) {
          const getYear = new Date().getFullYear();
          const setYear = new Date().setYear(getYear - 2);
          return time.getTime() < (setYear);
        }
      }
    },
    openCardPickerOptions() {
      return {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 90 * 24 * 60 * 60 * 1000;
        }
      }
    }
  },
  methods: {
    // 设置门店选择器的场景
    storeTagScense(parent) {
      if (!parent.expandParams) return '';
      const controlJson = JSON.parse(parent.expandParams);
      const scense = controlJson.find(el => el.key === 'scenes');
      return scense.value;
    },
    tag020PickerOptions(parent) {
      return {
        disabledDate: time => {
          if (!parent.expandParams) return false;
          const controlJson = JSON.parse(parent.expandParams);
          const before = controlJson.find(el => el.key === 'before');
          const getYear = new Date().getFullYear();
          const setYear = new Date().setYear(getYear - before.value);
          return time.getTime() < setYear;
        }
      }
    },
    hasTemplate(code) {
      return this.templateData.find(el => el.templateCode === code);
    },
    changelist() {
      this.select.expends = true;
    },
    // 获取商品选择器的缩略信息
    async confirmSelector() {
      let flag = await this.$refs.selector[0].collectConditions();
      if (flag == false) {
        this.$message.warning('商品选择器条件不能为空！');
        return false;
      } else {
        // this.select.expends = !flag.filterAbbrInfo.length;
        this.com022.selectList = flag.conditions;
        this.com022.abbrInfo = flag.filterAbbrInfo;
        this.com022.conditionsList = flag.conditionList;
        this.com022.finalId = flag.id;
      }
      return true;
    },
    // 格式化输入的字符
    handleNumRangeStart(eve) {
      let value = eve.target.value;
      if (!RegTest.test(value)) {
        this.$message.warning({
          message: '只支持小数位精确到两位的数字！'
        })
        eve.target.value = '';
      }
    },
    handleNumRangeEnd(eve, controlJson) {
      let value = eve.target.value;
      if (controlJson) return value; // 有后端限制就不需要以下控制
      value.replace(RegNoC, (str, p1, offset) => {
        if (offset > -1) {
          this.$message.warning({
            message: '只支持小数位精确到两位的数字！'
          })
          eve.target.value = '';
        }
      });
      if (!RegTest.test(value)) {
        this.$message.warning({
          message: '只支持小数位精确到两位的数字！'
        })
        eve.target.value = '';
      }
    },
    handleCheckedCitiesChange(value) {
      this.templateData.forEach(item => {
        if (item.templateCode == 'tag001' || item.templateCode == 'tag013' || item.templateCode == 'tag021' || item.templateCode == 'tag022') {
          let checkedCount = value.length;
          item.checkAll = checkedCount === item.options.length;
          item.isIndeterminate = checkedCount > 0 && checkedCount < item.options.length;
        }
      });
    },
    // 卡券
    selectCard(val) {
      this.cardTags = val;
    },
    reciverCardList(list) {
      this.cardListData = list;
    },
    saveConfirm() {
      return new Promise((resolve, reject) => {
        this.confirmPost().then(res => {
          resolve(res);
        });
      });
    },
    /**
     * 获取 templateData
     */
    transformConfigvalue(item) {
      // 通过index来对应
      let index = templateCode.findIndex(el => el === item.templateCode);
      return item[templateCodeKeyWords[index]];
    },
    getTemplateData() {
      return this.templateData.map(el => ({
        ...el,
        templateValue: this.transformConfigvalue(el)
      }));
    },

    //查看标签的配置项
    async _getTagType(id) {
      const param = {
        tagId: id,
        requestProject: 'gic-member-tag-web'
      };
      getTagType(param)
        .then(res => {
          if (res.errorCode == 0) {
            const data = res.result;
            this.templateObj = {
              columnKey: data.columnKey,
              template: data.template
            };
            // syo 关键点 修改实时以及key
            this.tagData.tagId = data.tagId;
            this.tagData.tagType = data.tagType;
            this.tagData.tagName = data.tagName;
            this.currentKey = data.columnKey;
            this.tagData.isActive = data.isActive;
            this.tagData.isMultiple = data.isMultiple;
            if (!!this.templateObj.template) {
              // 检查模板code
              this.checkTemplageCode(this.templateObj.template.templateContent);
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    /**
     * 检查模板code
     */
    async checkTemplageCode(template) {
      this.templateData = [];
      let middleTemplate = JSON.parse(template);
      let ids= [];
      if (middleTemplate) {
        // 模板对象
        let templateVal = middleTemplate.val[0];
        let newTime = middleTemplate.time;

        this.currentComputeType = templateVal.compute.computeType >> 0;
        if (this.currentComputeType === 0 && !!templateVal.compute.computeWidgetId) {
          ids.push(templateVal.compute.computeWidgetId);
        }
        // 固定计算属性(最后保存用到)
        if (this.currentComputeType === 1) {
          this.postCompute = templateVal.compute.compute;
        }
        // 门店
        if (!!templateVal.valWidgetId) {
          ids.push(templateVal.valWidgetId);
        }
        if (newTime&&!!newTime.length) {
          // setTimeout(_ => {
          newTime.forEach((ele, index) => {
            if (!!ele.timeWidgetId) {
              ids.push(ele.timeWidgetId)
              // this.getTemplateCodeById([ele.timeWidgetId]);
            }
          });
          // }, 200);

        }
        if(ids.length){
          this.getTemplateCodeById(ids);
        }

      }
    },
    /**
     * 根据模板的id获取控件的模板code ---
     */
    getTemplateCodeById(ids) {
      Promise.all(ids.map(id=>findWidget({
        widgetId: id,
        requestProject: 'gic-member-tag-web'
      }))).then(resArr=>{
        if(!resArr||!resArr.length)return;
        resArr.forEach(res=>{
          if(res.errorCode != 0)return;
          try{
            this.handleFindWidgetData(res);
          }catch(err){
            console.log(err)
          }

        })
      }).finally(_=>{
        this.canSave = true;
      })
    },
    handleFindWidgetData(res){
      let data = res.result;
      for (let key in data) {
        if (data.templateCode == 'com023') {
          this[data.templateCode][key] = data[key];
        } else if (data.templateCode == 'com025') {
          this.com001[key] = data[key];
          this.com022[key] = data[key];
        } else {
          this[data.templateCode][key] = data[key];
        }
      }
      // 如果是城市
      if (data.templateCode === 'tag010') {
        this.getcityData();
      }
      // 隐私协议
      if (['tag025','tag026'].includes(data.templateCode)) {
        this.getPrivacyGgreement(data.templateCode);
      }
      // 如果是给了 计算属性值
      if (!!this.postCompute) {
        // this[data.templateCode] = Object.create(null);
        this[data.templateCode].postCompute = this.postCompute;
      }
      console.log(11111111111111111);
      // 如果直接给需要字段
      if (data.sourceFlag >> 0 === 0) {
        data.widgetValues = JSON.parse(data.widgetValues);
        // this[data.templateCode] = Object.create(null);
        this[data.templateCode].options = data.widgetValues;
        data.templateCode === 'com025' && (this.com001.options = data.widgetValues);
      }
      // 如果通过 url 获取
      if (data.sourceFlag >> 0 === 1) {
        console.log(data);
        data.widgetParam = JSON.parse(data.widgetParam);
        this.getAsyncList(data.widgetParam[0].value, this[data.templateCode]);
        if (data.templateCode === 'tag009' || data.templateCode === 'tag010') {
          this.searchFlag = true;
        }
        setTimeout(_ => {
          if (this.templateDataList.editCondition) {
            this.asyncTemplateList();
          }
        }, 800);
        return false;
      }
      console.log('22222222222222222');
      // 调整商品选择器顺序
      if (data.templateCode == 'com022') {
        setTimeout(_ => {
          this.templateData.push(this[data.templateCode]);
        }, 200);
      } else if (data.templateCode == 'com025') {
        this.templateData.push({ ...this.com001, ...this.com022 });
      } else {
        this.templateData.push(this[data.templateCode]);
      }
      /**
             * 会员分层
             */
      if (data.templateCode == 'tag021') {
        this.axios.get(`${this.baseUrl}/gic-member-tag-web/memberTagGrade/gradeGroupListV2?requestProject=gic-member-tag-web&type=1`).then(res => {
          if (res.data.errorCode == 0) {
            this.templateData[0].options = res.data.result.result || [];
          }
        });
      }
      if (data.templateCode == 'tag022') {
        this.axios.get(`${this.baseUrl}/gic-member-tag-web/memberTagGrade/coreLoss?requestProject=gic-member-tag-web`).then(res => {
          const { errorCode, result = {} } = res.data || {};
          if (errorCode == 0) {
            this.templateData[0].options = [{
              memberTagGradeId: result.memberTagGradeId,
              aliasName: '是'
            }];
          }
        });
      }
      if (data.templateCode == 'com024') { // 修改组件内参数
        // this.$nextTick(_ => {
        //   this.$refs.gicCard[0].sdate = this.cardParams.startTime
        //   this.$refs.gicCard[0].edate = this.cardParams.endTime
        //   this.$refs.gicCard[0].getCardList()
        // })
      }

      /**
             * 这里处理编辑回显数据
             * 这里拿到编辑的数据 然后把tagValue的value值传解析传给模板的v-model
             * 写一个方法 把模板code定位配置code来处理这么多的模板
             */
      console.log('12312312312');
      setTimeout(_ => {
        this.templateCode = this.templateData.map(el => el.templateCode);
        if (this.templateDataList.editCondition) {
          this.templateDataList.templateCode = this.templateCode;
          this.replaceTemplateValue();
        } else {
          this.loadSelector = true;
        }
      }, 800);

      // 获取已存数据
      // this.getExistData(this.tagData.tagId);
      if (data.templateCode === 'tag009' || data.templateCode === 'tag010') {
        this.searchFlag = true;
      }
    },

    asyncTemplateList() {
      let tagValue = JSON.parse(this.templateDataList.tagValue);
      let value = null;
      let checkedCount = null;
      for (let tem of this.templateData) {
        switch (tem.templateCode) {
          case 'tag013':
            value = tagValue.val[0].data.value.split(' ');
            tem.checkeditems = value;
            checkedCount = tem.checkeditems.length;
            tem.checkAll = checkedCount == tem.options.length;
            tem.isIndeterminate = checkedCount > 0 && checkedCount < tem.options.length;
            break;
        }
      }
    },

    /**
     * 城市
     */
    getcityData() {
      const para = { requestProject: 'member-tag' };
      return this.axios
        .post(`${this.baseUrl}/api-plug/dict-district-tree`, qs.stringify(para))
        .then(res => {
          if (res.data.errorCode === 0) {
            const data = res.data.result;
            data.forEach((el, index) => {
              el.check = false;
              el.showCity = false;
              el.children.forEach((item, ind) => {
                item.check = false;
              });
            });
            this.tag010.citySelectOptions = data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    /**
     * 隐私协议列表
     */
    getPrivacyGgreement(templateCode) {
      const para = { requestProject: 'member-tag',agreementType: 1 };
      this.axios
        .post(`${this.baseUrl}/api-admin/list-service-privacy-agreement`, qs.stringify(para))
        .then(res => {
          if (res.data.errorCode === 0) {
            this[templateCode].options =[].concat(res.data.result||[])
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    /**
     * 获取当前标签数据
     */
    getAsyncList(url, data) {
      const para = {
        key: [1,2].includes(this.tagData.tagType) ? this.tagData.tagId : this.currentKey,
        requestProject: 'gic-member-tag-web'
      };
      this.axios.post(`${this.baseUrl}${url}`, qs.stringify(para))
        .then(res => {
          let resData = res;
          if (this.tagData.tagType != 1 && this.currentKey != 'tag') {
            if (resData.data.errorCode == 0) {
              data.options = resData.data.result;
              this.templateData.push(data);
              // this.getExistData(this.tagData.tagId, data.options);
              return;
            }
          } else {
            if (resData.data.errorCode == 0) {
              data.options = resData.data.result;
              this.templateData.push(data);
              // this.getExistData(this.tagData.tagId, data.options);
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    isContained(a, b) {
      if (!(a instanceof Array) || !(b instanceof Array)) return false;
      if (!b.length) {
        return false;
      }
      if (a.length < b.length) return false;
      let aStr = a.toString();
      for (let i = 0, len = b.length; i < len; i++) {
        if (aStr.indexOf(b[i]) == -1) return false;
      }
      return true;
    },

    /**
     * 获取当前标签已存数据
     */
    getExistData(tagId, newOptions) {
      let that = this;
      const param = {
        tagId: tagId,
        requestProject: 'gic-member-tag-web'
      };
      findOndJson(param)
        .then(res => {
          if (res.errorCode == 0) {
            if (!res.result || res.tagParams == '[]') {
              this.addTempFlag = false;
              return false;
            }
            // 查看该标签是否在暂存架中
            this.addTempFlag = true;
            let items = JSON.parse(res.result.tagParams).template;
            if (!!newOptions) {
              items.forEach(function(ele, index) {
                if (ele.templateCode == 'tag013') {
                  ele.options = newOptions;
                  let idOptions = newOptions.map(el => el.key);
                  let checkFlag = true;
                  newOptions.forEach((el, index) => {
                    if (ele.checkeditems.indexOf(el.key) != -1) {
                      checkFlag = false; // 如果已选值中存在 options中
                    }
                  });
                  let checkedCount = ele.checkeditems.length;
                  if (that.isContained(ele.checkeditems, idOptions)) {
                    ele.checkAll = true;
                    ele.isIndeterminate = false;
                    return false;
                  }
                  if (checkFlag && newOptions.length < checkedCount) {
                    ele.checkAll = false;
                    ele.isIndeterminate = false;
                    return false;
                  }
                  if (!checkFlag && newOptions.length >= checkedCount) {
                    ele.checkAll = false;
                    ele.isIndeterminate = true;
                    return false;
                  }
                  if (checkFlag && newOptions.length >= checkedCount) {
                    ele.checkAll = false;
                    ele.isIndeterminate = false;
                    return false;
                  }
                }
              });
            }
            this.templateData = items;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    // this.templateData[i] = target
    calculateProvinceCount(target) {
      let arr = [];
      target.citySelectedOptions.forEach(el => {
        if (arr.findIndex(item => el.cityId == item.cityId) == -1) {
          arr.push(el);
        }
      });

      target.citySelectedOptions = arr;

      target.citySelectOptions = target.citySelectOptions.map((item, index) => {
        item.children = item.children.map((el , i) => {
          let city = target.citySelectedOptions.find(element => element.cityId == el.cityId);
          if (city) {
            el.check = true;
          }
          return el;
        });
        let isAllCheckitem = item.children.every(el => el.check);
        if (isAllCheckitem) {
          target.checkeditemsCity.push(item.provinceId);
        }
        return item;
      });
    },
    getCityId(city) {
      const [cName, pName] = city.split('-');
      const result = { cityId: '', pId: '' };
      this.tag010.citySelectOptions.some(province => {
        const { provinceName, provinceId, children } = province;
        if (pName == provinceName) {
          result.pId = provinceId;
          if (Array.isArray(children)) {
            children.some(city => {
              const { cityId, cityName } = city;
              if (cName == cityName) {
                result.cityId = cityId;
              }
              return cName == cityName;
            })
          }
        }
        return provinceName == province.provinceId;
      })
      return result;
    },

    /**
     * 将tagValue 替代模板数据的v-model
     */
    replaceTemplateValue() {
      // 回显数据
      let tagValue = JSON.parse(this.templateDataList.tagValue);
      let tagParams = JSON.parse(this.templateDataList.tagParams);
      let value = null;
      let selectVal = null;
      let checkedCount = null;
      // compute 是计算属性的区间值 value是选中的值
      for(let i = 0; i < this.templateDataList.templateCode.length; i++) {
        switch (this.templateDataList.templateCode[i]) {
          case 'tag003':
            value = tagValue.val[0].data.value.split(',');
            this.templateData[0].numRange = value;
            break;
          case 'tag007':
            value = tagValue.val[0].data.value.split(' ');
            this.templateData[0].addTags = value.map(el => ({ value: el }));
            break;


          // 城市选择
          case 'tag010':
            value = tagValue.val[0].data.value.split(' ');

            selectVal = tagParams.selectedVal[1].split(',');
            selectVal.forEach((item, index) => {
              const { cityId, pId } = this.getCityId(item);
              this.templateData[i].citySelectedOptions.push({
                selected: selectVal[index],
                cityName: selectVal[index],
                cityId,
                pId
              });
            });
            setTimeout(_ => {
              this.calculateProvinceCount(this.templateData[i]);
            }, 20);
            break;

          //  组合 属于和多选框
          case 'tag001':
            value = tagValue.val[0].data.value.split(' ');
            for (let i = 0; i < this.templateData.length; i++) {
              if (this.templateData[i].templateCode === 'tag001') {
                if (this.tagData.isMultiple) this.templateData[i].checkeditems = value;
                else {
                  this.templateData[i].checkeditems = value.toString();
                }
              }
            }
            checkedCount = this.templateData[i].checkeditems.length;
            this.templateData[i].checkAll = checkedCount == this.templateData[i].options.length;
            this.templateData[i].isIndeterminate = checkedCount > 0 && checkedCount < this.templateData[i].options.length;
            break;
          case 'tag013':
            value = tagValue.val[0].data.value.split(' ');
            for (let i = 0; i < this.templateData.length; i++) {
              if (this.templateData[i].templateCode === 'tag013') {
                this.templateData[i].checkeditems = value;
              }
            }
            checkedCount = this.templateData[i].checkeditems.length;
            this.templateData[i].checkAll = checkedCount == this.templateData[i].options.length;
            this.templateData[i].isIndeterminate = checkedCount > 0 && checkedCount < this.templateData[i].options.length;
            break;

          case 'tag021':
          case 'tag022':
            value = tagValue.val[0].data.value.split(' ');
            for (let i = 0; i < this.templateData.length; i++) {
              if (this.templateData[i].templateCode === 'tag021' || this.templateData[i].templateCode === 'tag022') {
                this.templateData[i].checkeditems = value;
              }
            }
            checkedCount = this.templateData[i].checkeditems.length;
            this.templateData[i].checkAll = checkedCount == this.templateData[i].options.length;
            this.templateData[i].isIndeterminate = checkedCount > 0 && checkedCount < this.templateData[i].options.length;
            break;

          // 属于不属于 从newTagVal里面比较
          case 'tag002':
            if (tagParams.template[0].selectTwo) {
              this.templateData[0].computeRadio = tagParams.template[0].selectTwo;
            } else {
              this.templateData[0].computeRadio = tagParams.template[0].computeRadio;
            }
            break;

          case 'tag015':
            for (let i = 0; i < this.templateData.length; i++) {
              if (this.templateData[i].templateCode === 'tag015') {
                let templateDate = tagParams.template[0];
                // 最近 之后
                this.templateData[i].radio = templateDate.radio; // 时段
                this.templateData[i].timeSelect = templateDate.timeSelect;
                if (this.templateData[i].radio == 1) {
                  if (templateDate.dateRangeValue && templateDate.dateRangeValue.length) {
                    this.templateData[i].dateRangeValue = templateDate.dateRangeValue;
                  } else {
                    this.templateData[i].dateRangeValue = tagValue.val[0].data.value.split(',');
                  }
                } else {
                  // 相对时段
                  this.templateData[i].timeRadio = templateDate.timeRadio; // 天 月 年
                  this.templateData[i].timeAfterChecked = templateDate.timeAfterChecked;
                  this.templateData[i].timeChecked = templateDate.timeChecked;
                  this.templateData[i].dateRangeValue = [];
                }
                // 如果有最近选项必有 timeInput
                if (this.templateData[i].timeAfterChecked) {
                  this.templateData[i].timeInput = tagValue.val[0].data.value;
                }
              }
            }
            break;


          case 'tag012':
            for (let i = 0; i < this.templateData.length; i++) {
              if (this.templateData[i].templateCode === 'tag012') {
                this.templateData[i].selectOne = tagParams.template[0].selectOne;
                this.templateData[i].selectTwo = tagParams.template[0].selectTwo;
              }
            }
            break;
          case 'tag008':

            for (let i = 0; i < this.templateData.length; i++) {
              if (this.templateData[i].templateCode === 'tag008') {
                // 这里有多个value
                let labels = tagValue.val[0].data.label.split(' ');
                value = tagValue.val[0].data.value.split(' ');
                selectVal = tagParams.selectedVal[1].split(',');
                this.templateData[i].searchModel = selectVal;
                this.templateData[i].addSelectTags = value.map((el, idx) => ({value: labels[idx], id: el, clerkId: el, clerkName: labels[idx]}));
                // console.log(this.templateData[i].searchModel);
                // console.log(this.templateData[i].addSelectTags);
                // selectVal.forEach((el, inx) => {
                //   let item = this.templateData[i].addSelectTags.find(val => val.value === el);
                //   if (!item) {
                //     this.templateData[i].addSelectTags.push({
                //       value: selectVal[inx],
                //       id: value[inx]
                //     });
                //   }
                //   this.templateData[i].searchModel.push(selectVal[inx]);
                //   this.templateData[i].addSelectTags = value.map(el => ({clerkId: el}));
                //   console.log(this.templateData[i].searchModel);
                //   console.log(this.templateData[i].addSelectTags);
                // });
              }
            }
            break;
          // 门店
          case 'tag011':
            for (let i = 0; i < this.templateData.length; i++) {
              if (this.templateData[i].templateCode === 'tag011') {
                value = tagValue.val[0].data.value;
                this.templateData[i].isAdd = false;
                this.templateData[i].uuid = value;
                this.loadSelector = true;
              }
            }
            break;

          case 'tag004':
            for (let i = 0; i < this.templateData.length; i++) {
              if (this.templateData[i].templateCode === 'tag004') {
                let type = tagValue.time[0].type;
                // 最近时间（lastday） 和 固定时段
                if (type == 'lastday') {
                  this.templateData[i].fixedRecentRadio = '2';
                  let recentlyDays = tagValue.time[0].value;
                  this.templateData[i].fixedRecentTimeRecent = recentlyDays;
                } else {
                  let time = tagValue.time[0].value.split(',');
                  this.templateData[i].fixedRecentRadio = '1';
                  this.templateData[i].fixedRecentRangeValue = time;
                }
              }
            }
            break;

          case 'tag017':
            for (let i = 0; i < this.templateData.length; i++) {
              if (this.templateData[i].templateCode === 'tag017') {
                let templateDate = tagParams.template[0];
                // 判断是那个时间段
                // 固定时段
                this.templateData[i].radio = templateDate.radio; // 时段
                if (this.templateData[i].radio == 1) {
                  if (templateDate.dateRangeValue && templateDate.dateRangeValue.length) {
                    this.templateData[i].dateRangeValue = templateDate.dateRangeValue;
                  } else {
                    this.templateData[i].dateRangeValue = tagValue.val[0].data.value.split(',');
                  }
                } else {
                  // 相对时段
                  this.templateData[i].timeRadio = templateDate.timeRadio; // 天 月 年
                  this.templateData[i].timeAfterChecked = templateDate.timeAfterChecked;
                  this.templateData[i].timeChecked = templateDate.timeChecked;
                  this.templateData[i].dateRangeValue = [];
                }
                // 如果有最近选项必有 timeInput
                if (this.templateData[i].timeAfterChecked) {
                  this.templateData[i].timeInput = tagValue.val[0].data.value;
                }
              }
            }
            break;

          case 'tag016':
            this.templateData[i].dateRangeValue = tagValue.val[0].data.value.split(',');
            break;

          case 'tag019':
            for (let i = 0; i < this.templateData.length; i++) {
              if (this.templateData[i].templateCode === 'tag019') {
                let templateDate = tagParams.template[0];
                // 判断是那个时间段
                // 固定时段
                this.templateData[i].radio = templateDate.radio; // 时段
                this.templateData[i].timeSelect = templateDate.timeSelect;
                if (this.templateData[i].radio == 1) {
                  if (templateDate.dateRangeValue && templateDate.dateRangeValue.length) {
                    this.templateData[i].dateRangeValue = templateDate.dateRangeValue;
                  } else {
                    this.templateData[i].dateRangeValue = tagValue.val[0].data.value.split(',');
                  }
                } else {
                  // 相对时段
                  this.templateData[i].timeRadio = templateDate.timeRadio; // 天 月 年
                  this.templateData[i].timeAfterChecked = templateDate.timeAfterChecked;
                  this.templateData[i].timeChecked = templateDate.timeChecked;
                  this.templateData[i].dateRangeValue = [];
                }
                // 如果有最近选项必有 timeInput
                if (this.templateData[i].timeAfterChecked) {
                  this.templateData[i].timeInput = tagValue.val[0].data.value;
                }
              }
            }
            break;

          case 'tag020':
            for (let i = 0; i < this.templateData.length; i++) {
              if (this.templateData[i].templateCode === 'tag020') {
                let templateDate = tagParams.template[0];
                // 判断是那个时间段
                // 固定时段
                this.templateData[i].radio = templateDate.radio; // 时段
                if (this.templateData[i].radio == 1) {
                  if (templateDate.dateRangeValue && templateDate.dateRangeValue.length) {
                    this.templateData[i].dateRangeValue = templateDate.dateRangeValue;
                  } else {
                    this.templateData[i].dateRangeValue = tagValue.val[0].data.value.split(',');
                  }
                } else {
                  // 相对时段
                  this.templateData[i].timeRadio = templateDate.timeRadio; // 天 月 年
                  this.templateData[i].timeAfterChecked = templateDate.timeAfterChecked;
                  this.templateData[i].timeChecked = templateDate.timeChecked;
                  this.templateData[i].dateRangeValue = [];
                }
                // 如果有最近选项必有 timeInput
                if (this.templateData[i].timeAfterChecked) {
                  this.templateData[i].timeInput = tagValue.val[0].data.value;
                }
              }
            }
            break;

          case 'tag014':
            for (let i = 0; i < this.templateData.length; i++) {
              if (this.templateData[i].templateCode === 'tag014') {
                let templateDate = tagParams.template[0];
                this.templateData[i].radio = templateDate.radio; // 时段
                if (this.templateData[i].radio == 1) {
                  if (templateDate.dateRangeValue && templateDate.dateRangeValue.length) {
                    this.templateData[i].dateRangeValue = templateDate.dateRangeValue;
                  } else {
                    this.templateData[i].dateRangeValue = tagValue.val[0].data.value.split(',');
                  }
                } else {
                  // 相对时段
                  this.templateData[i].timeRadio = templateDate.timeRadio; // 天 月 年
                  this.templateData[i].timeAfterChecked = templateDate.timeAfterChecked;
                  this.templateData[i].timeChecked = templateDate.timeChecked;
                  this.templateData[i].dateRangeValue = [];
                }
                // 如果有最近选项必有 timeInput
                if (this.templateData[i].timeAfterChecked) {
                  this.templateData[i].timeInput = tagValue.val[0].data.value;
                }
              }
            }
            break;

          // 之后的天数
          case 'tag006':
            for (let i = 0; i < this.templateData.length; i++) {
              if (this.templateData[i].templateCode === 'tag006') {
                let afterDays = tagValue.time[0].value;
                this.templateData[i].timeAfter = afterDays;
              }
            }
            break;
          case 'tag025':
            for (let i = 0; i < tagParams.template.length; i++) {
              if (tagParams.template[i].templateCode == 'tag025') {
                this.templateData[i].isAgree=[0,1].includes(tagValue.val[0].data.value)?tagValue.val[0].data.value:1;
                this.templateData[i].ids=[0,1].includes(tagValue.val[0].data.value)?[]: tagValue.val[0].data.value.split(' ')

              }
            }
            break;
          case 'tag026':
            for (let i = 0; i < tagParams.template.length; i++) {
              if (tagParams.template[i].templateCode == 'tag026') {
                this.templateData[i].channel=tagValue.val[0].data.key==='consentPrivacyProtocolTime'?0:1;
                if (this.templateData[i].channel) {
                  this.templateData[i].event=tagValue.val[0].data.key==='wemobVisitConsentProtocolTime'?0:1;
                }else{
                  this.templateData[i].isAgree=tagValue.val[0].data.compute==='!'?0:1;
                }
                this.templateData[i].date=timeFormat.timeToDateTime(tagValue.val[0].data.value)||null
              }
            }
            break;

          case 'com022':
            for (let i = 0; i < tagParams.template.length; i++) {
              if (tagParams.template[i].templateCode == 'com022') {
                this.$refs.selector[0].conditions = JSON.parse(JSON.stringify(tagParams.template[i].conditionsList));
              }
            }
            // this.confirmSelector();
            // this.select.expends = false;
            break;

          // 卡券
          case 'com023':
          case 'com024':
            for (let i = 0; i < this.templateData.length; i++) {
              if (this.templateData[i].templateCode === 'com023' || this.templateData[i].templateCode === 'com024') {
                this.cardRadioType = tagValue.val[0].data.compute == 'in' ? 1 : 0;
                if(this.cardRadioType) { // 全部商品不回显tag列表
                  value = tagValue.val[0].data.value.split(' ');
                  selectVal =value.length?(tagParams.selectedVal.includes('$^')? tagParams.selectedVal.split('$^'):tagParams.selectedVal.split(' ')):[];
                  selectVal.forEach((el, ix) => {
                    this.tagList.push({
                      cardName: el,
                      coupCardId: value[ix]
                    });
                  });
                }
              }
              this.templateData[i].templateCode === 'com024' && (this.expiration = tagValue.time[0].value)
            }
            break;

          case 'com001':
            for (let i = 0; i < this.templateData.length; i++) {
              if (this.templateData[i].templateCode === 'com001') {
                // 老数据是按照两个区间值来做的 所以强行当成老数据来做
                if (tagParams.selectedVal[0].indexOf('区间') != -1) {
                  // 存在区间
                  this.templateData[i].symbol = '区间';
                  this.templateData[i].numRange = tagValue.val[0].data.value.split(',');
                } else if (tagParams.template[0].symbol == void 0) {
                  this.templateData[i].symbol = '区间';
                  this.templateData[i].numRange = tagParams.template[0].numRange;
                } else {
                  this.templateData[i].symbol = tagParams.template[0].symbol;
                  this.templateData[i].num = tagValue.val[0].data.value;
                }
              }
            }
            break;

          case 'com025':
            if (tagParams.selectedVal[0].indexOf('区间') != -1) {
              // 存在区间
              this.templateData[0].symbol = '区间';
              this.templateData[0].numRange = tagValue.val[0].data.value.split(',');
            } else if (tagParams.template[0].symbol == void 0) {
              this.templateData[0].symbol = '区间';
              this.templateData[0].numRange = tagParams.template[0].numRange;
            } else {
              this.templateData[0].symbol = tagParams.template[0].symbol;
              this.templateData[0].num = tagValue.val[0].data.value;
            }

            this.$nextTick(() => {
              this.$refs.selector[0].conditions = JSON.parse(JSON.stringify(tagParams.conditionList));
            })
            break;

          case 'com009':
            const getCom009Data = this.hasTemplate('com009');
            if (getCom009Data) {
              getCom009Data.afterGradeId = tagValue.val.find(el => el.data.dealKey == 'afterGradeId').data.value;
              getCom009Data.beforeGradeId = tagValue.val.find(el => el.data.dealKey == 'beforeGradeId').data.value;
            }
            break;

          case 'tag030':
            const getTag030Data = this.hasTemplate('tag030');
            const params = tagParams.template[0];
            if (getTag030Data) {
              getTag030Data.fixedTimeRangeValue = params.fixedTimeRangeValue;
              getTag030Data.radioType = params.radioType;
              getTag030Data.recentType = params.recentType;
              getTag030Data.recentValue = params.recentValue;
              getTag030Data.checkGroup = params.checkGroup;
            }
            break;

          case 'tag024':
            const getTag024Data = this.hasTemplate('tag024');
            if (getTag024Data) {
              const tag024Data = tagParams.template.find(el => el.templateCode === 'tag024') || {};
              getTag024Data.dateRangeValue = tag024Data.dateRangeValue;
            }
            break;
          // case 'tag021':
          //   value = tagValue.val[0].data.value.split(' ');
          //   for (let i = 0; i < this.templateData.length; i++) {
          //     if (this.templateData[i].templateCode === 'tag021') {
          //       this.templateData[i].checkeditems = value;
          //     }
          //   }
          //   checkedCount = this.templateData[i].checkeditems.length;
          //   this.templateData[i].checkAll = checkedCount == this.templateData[i].options.length;
          //   this.templateData[i].isIndeterminate = checkedCount > 0 && checkedCount < this.templateData[i].options.length;
          //   break;
        }
      }
    },
    /**
     * 重置条件添加的时候是空的
     */
    resetOptions() {
      if (this.templateData.length) {
        for (let tem of this.templateData) {
          switch(tem.templateCode) {
            case 'tag003':
              tem.numRange = [];
              break;
            case 'tag007':
              tem.addTags = [];
              break;
          }
        }
      }
    },
    // 远程校验数字类型
    remoteControlNum(v, controlJson) {
      const { type, maxNum, minNum } = JSON.parse(controlJson).reduce((obj, cur) => {
        obj[cur.key] = cur.value;
        return obj;
      }, {});
      switch(type) {
        case 'int':
          v = parseInt(v);
          break;
        case 'double':
          v = Number.isNaN(parseFloat(v)) ? NaN : parseFloat(v).toFixed(2);
          break;
      }
      if (Number.isNaN(v)) return ''; // 是否为数字
      if (v > +maxNum || v < +minNum) { // 校验规则
        this.$message.error(`仅支持输入${minNum}-${maxNum}的值`);
        return '';
      }
      return v;
    },
    onInputNum(v, controlJson) {
      if (controlJson) return v;
      v = v + '';
      // flag true：是负数，最后结果需要加上负号
      const flag = v.indexOf('-') == 0;
      // 将输入内容转换为正数，并以小数点分割成数组
      v = v.replace('-', '').split('.');
      // 整数部分过滤掉非数字
      v[0] = v[0].replace(/\D/g, '');
      // 小数部分过滤掉非数字
      if (typeof v[1] == 'string') {
        v[1] = v[1].replace(/\D/g, '');
        // 如果小数部分超过2位，只取前2位，即精确到2位销售
        if (v[1].length > 2) {
          this.$message.warning('只支持小数位精确到两位的数字！');
          v[1] = v[1].slice(0, 2);
        }
      }
      // 将处理后的输入内容重新组合
      v = typeof v[1] == 'string' ? `${v[0]}.${v[1]}` : v[0];
      return flag ? `-${v}` : v;
    },
    onInputBlur(e, controlJson) {
      // controlJson字段存在时，使用后端配置的校验规则。否则用当前默认规则
      if (!controlJson) {
        // 输入框失焦后，校验用户是否只输入了一个负号或者小数点
        let v = e.target.value;
        v = v.indexOf('-') == v.length - 1 ? '' : v;
        v = v.indexOf('.') == v.length - 1 ? v.replace('.', '') : v;
        if(this.tagData.tagId == '6fb8ab4ce2d64fd19ac22fcba722bd61') {
          v = Math.floor(v);
          if(v < 0) {
            v = 0
          }
        }

        // 部分标签只允许输入整数
        const tags = ['次数', '天数', '时长'];
        if(tags.some((el) => this.tagData.tagName.indexOf(el) !== -1)) {
          v = Math.floor(v);
          if(v < 0) {
            v = 0
          }
        }
        return v + '';
      } else {
        return this.remoteControlNum(e.target.value, controlJson);
      }
    },
    onChangeTime(val) {
      if(isNaN(val)) {
        this.expiration = '1';
        return;
      }
      if(val < 1) this.expiration = '1';
      else if(val > 30) this.expiration = '30';
    },
    onChangeRadioGroup() {
      this.tag030.recentValue = '';
      this.tag030.checkGroup = [];
    },
    onValidateIpt(v) {
      if (this.tag030.recentType) {
        return v > 3 ? 3 : v < 1 ? 1 : v;
      } else {
        return v > 90 ? 90 : v < 1 ? 1 : v;
      }
    }
  },

  created() {
    this.templateObj = {};
    let host = window.location.origin;
    if (host.indexOf('localhost') != '-1') {
      this.baseUrl = 'http://gicdev.demogic.com';
    } else {
      this.baseUrl = host;
    }
    let date1 = new Date();
    let dateStr1 = date1.toLocaleDateString().replace(/\//g, '-').replace(/-(\d)(?!\d)/g, '-0$1');
    date1.setMonth(date1.getMonth() - 3);
    let dateStr2 = date1.toLocaleDateString().replace(/\//g, '-').replace(/-(\d)(?!\d)/g, '-0$1');
    this.cardParams = {
      startTime: dateStr2,
      endTime: dateStr1,
    }
  },
  mounted() {
    this.getcityData().finally(() => {
      // 存在id
      if (this.id) {
        this._getTagType(this.id);
      }
    });
  },
  filters: {
    aliasTips(name) {
      let item = aliasNames.find(el => el.name === name);
      if (item) {
        return item.title;
      }
      return '';
    },
    formatDate(date) {
      return moment(date).format('YYYY-MM-DD HH:mm:ss');
    },
    agreementTypeFilter(v) {
      switch (v) {
        case 1:return '隐私协议';break;
        case 2:return '服务协议';break;
        default:return '';break;
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.myTagDetail-wrap__btn {
  margin-top: 80px;
}

.relative-range {
  width: 526px;
  height: 191px;
  padding: 19px;
  background: #f3f6f9;
}

.label-unit {
  font-size: 14px;
  color: #606266;
}

.label-tip {
  display: inline-block;
  vertical-align: middle;
  padding-left: 14px;
  font-size: 13px;
  color: #909399;
}

.w-438 {
  width: 438px;
}

.w-526 {
  width: 526px;
}

.h-80 {
  height: 80px;
}

.border-t-e4e7ed {
  border-bottom: 1px solid #e4e7ed;
}

.el-select-dropdown__item.selected:hover {
  background-color: #f5f7fa;
}

.fixed-date-picker {
  padding: 20px;
}

.bg-f3f6f9 {
  background: #f3f6f9;
}

.add-tags-wrap {
  width: 380px;
  height: 110px;
  padding: 0 8px;
  overflow-y: auto;
  white-space: pre-wrap;
  border: 1px solid #dcdfe6;
  border-radius: 4px;

  .el-tag {
    margin-top: 8px;
    margin-right: 8px;
    /*background: none;
    background-color: none;
    border: none;
    font-size: 14px;
    color: #606266;

    .el-tag__close {
      width: 14px;
      height: 14px;
      line-height: 14px;
      font-size: 12px;
      color: #fff;
      background: #DCDFE6;
    }*/
  }
}

.add-search-select {
  .el-select {
    line-height: 32px;

    span {
      -webkit-transform: scale(0);
      -ms-transform: scale(0);
      -o-transform: scale(0);
      transform: scale(0);
    }
  }
}

.all-select-options {
  .el-checkbox {
    margin-right: 16px;
    line-height: 32px;
    & + .el-checkbox {
      margin-left: 0;
    }
  }

  &.all-select-options__city {
    .el-checkbox-group {
      max-height: 200px;
      overflow-y: auto;
    }
  }
}

.slected-opyions {
  .el-tag {
    margin-top: 8px;
    margin-right: 8px;
    /*background: none;
    background-color: none;
    border: none;
    font-size: 14px;
    color: #606266;

    .el-tag__close {
      width: 14px;
      height: 14px;
      line-height: 14px;
      font-size: 12px;
      color: #fff;
      background: #DCDFE6;
    }*/
  }

  &.city-slected-opyions {
    font-size: 0;
    .el-tag {
      margin: 0 10px 10px 0;
      /*background: #F4F4F5;
      border: 1px solid rgba(233,233,235,1);
      font-size: 12px;
      color: #909399;

      .el-tag__close {
        width: 14px;
        height: 14px;
        line-height: 14px;
        font-size: 12px;
        color: #fff;
        background: #DCDFE6;
      }*/
    }
  }
}

.city-checkbox {
  position: relative;
  height: 50px;
  line-height: 50px;
  padding: 0 8px;

  &.city-checkbox-all {
    background: #f1f3f7;
  }
}
.tag-mode {
  padding: 10px;
  background-color: #ebeef5;
  color: #909399;
}
.tag-options {
  padding: 20px 10px;
  border-bottom: 1px solid rgba(220, 223, 230, 1);
}
.grey {
  color: rgb(186,186,186);
}
/deep/.tag025-select.el-select {
  .el-select__tags-text{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
    display: inline-block;
  }
  .el-tag__close.el-icon-close{
    top: -7px;
  }
}
 .tag030 {
   padding: 20px 20px 5px 0;
    .tag030flex {
      display: flex;
    }
    .radio {
      margin-left: 10px;
      margin-bottom: 20px;
    }
    .flex-direction {
      display: flex;
      flex-direction: column;
      padding-left: 118px;
      box-shadow: border-box;
      /deep/ .el-checkbox {
        margin: 0;
        &:first-child {
          margin-bottom: 15px;
        }
      }
    }
    .ipt {
      margin: 0 10px;
      width: 160px;
    }
 }
 .tips {
   color: #909399;
   font-size: 14px;
 }
</style>
<style lang="scss">
.tag025-scrollbar{
  width: 260px;
}
.tag025-scrollbar .el-select-dropdown__wrap{
  max-height: 300px;
}
/* .tag025-scrollbar .el-select-dropdown__list{
  max-height: 300px;
  overflow-y: scroll;
 } */
.tag025-scrollbar .el-select-dropdown__item{
  height:56px;
  padding-top: 9px;
 }
.tag025-scrollbar .el-select-dropdown__item .agreement-name{
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
 }
.tag025-scrollbar .el-select-dropdown__item .create-time{
  font-size: 12px;
  font-weight: 300;
  line-height: 17px;
 }
  .el-select--small .el-input--suffix .el-input__icon::after {
   content: '\E619';
   transform: translateX(8px) rotate(180deg);
 }
 .el-select-dropdown__list .options.el-select-dropdown__item {
   height: 52px !important;
   padding: 8px 12px 7px;
   .active p{
     color: #2f54eb !important;
   }
   p{
     line-height: 20px;
     color: #303133;
     &:last-of-type {
       color: #909399;
       font-size: 12px;
       line-height: 17px;
     }
    }
 }
 .tag013check {
   width: 180px;
   margin-left: 0 !important;
   margin-right: 20px;
   .el-checkbox__label {
      overflow: hidden;
      width: 170px;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: bottom;
   }
   &:nth-of-type(4n) {
     margin-right: 0;
   }
   &:nth-of-type(n + 5) {
     margin-top: 20px;
   }
 }
</style>
