<template>
  <div class="myTagDetail-wrap common-wrap">
    <nav-crumb :navpath="navpath"></nav-crumb>
    <div class="right-content">
      <div class="right-box">
        <div class="checkboxOption-wrap">
          <div class="checkboxOption-wrap__head">
            <div class="checkboxOption-wrap__head__title">{{ tagData.name }} <span class="realtime-span border-box">实时</span></div>
            <div class="checkboxOption-wrap__head__describe">{{ tagData.des }}</div>
          </div>
          <div class="checkboxOption-wrap__body">
            <div class="checkboxOption-wrap__body__title">标签值设置</div>
            <!-- 选项控件 -->
            <template v-if="true">
              <div class="checkboxOption-wrap__body__checkAll border-box">
                <el-checkbox :indeterminate="tagData.isIndeterminate" v-model="tagData.checkAll" @change="handleCheckAllChange">全选</el-checkbox>
              </div>
              <div class="checkboxOption-wrap__body__options border-box">
                <el-checkbox-group v-model="tagData.checkeditems" @change="handleCheckedChange">
                  <el-checkbox v-for="(item,index) in tagData.options" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </template>

            <!-- 数字范围 -->
            <template v-if="false">
              <div class="m-b-20">
                <el-input v-model="tagData.numRange[0]" class="select-wrap-input" style="width: 100px;margin-right: 0;" placeholder="请输入数字" @blur="blurFrom"></el-input><!-- @keyup.native="(value) => toInputFrom(value)" -->
                <label> - </label>
                <el-input v-model="tagData.numRange[1]" class="select-wrap-input" style="width: 100px;margin-right: 0;" placeholder="请输入数字" @blur="blurTo"></el-input>
                <label class="label-tip">注：如果起始值为空则视为小于等于最大输入值；如果最大值为空则视为大于等于最小输入值！</label>
              </div>
            </template>

            <!-- 时间属性-固定时段/相对时段 -->
            <template v-if="false">
              <el-radio v-model="tagData.radio" label="1">固定时段</el-radio>
              <el-radio v-model="tagData.radio" label="2">相对时段</el-radio>
              <!-- 固定时段 -->
              <div class="m-t-18 w-438 p-20 border-box bg-f3f6f9" v-if="tagData.radio == 1">
                <el-date-picker
                  v-model="tagData.daterangeValue"

                  type="daterange"
                  :editable="false"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  format="yyyyMMdd"
                  value-format="yyyyMMdd"
                  :default-time="['000000', '235959']"

                  ><!-- :picker-options="pickerOptions"  -->
                </el-date-picker>
              </div>
              <!-- 相对时段 -->
              <div class="relative-range m-t-18 border-box" v-if="tagData.radio != 1">
                <div>
                  <div>
                    <label class="inline-block w-98 label-unit">时间精度</label>
                    <el-radio-group v-model="tagData.timeRadio" @change="timeRadioChange">
                      <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="tagData.timeChecked"><label class="inline-block middle">当{{tagData.timeRadio==1?'天':tagData.timeRadio==2?'月':'年'}}</label></el-checkbox>
                  </div>
                  <div class="m-t-20">
                    <label class="inline-block w-98"></label>
                    <el-checkbox v-model="tagData.timeCheckedTwo"> </el-checkbox>
                    <el-select v-model="tagData.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="tagData.timeInput" placeholder="请输入" class="w-90" @blur="(value) => toEditDateInput(value,tagData.timeRadio)"></el-input>
                    <template v-if="tagData.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="tagData.timeRadio==2">
                      <label class="inline-block middle label-unit m-l-8">月</label>
                      <label class="inline-block middle label-tip">正整数，最大12</label>
                    </template>
                    <template v-if="tagData.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>
            </template>

            <!-- 最近 天 -->
            <template v-if="false">
              <div>
                <label class="inline-block middle label-unit">最近</label><el-input v-model="tagData.timeRecent" placeholder="请输入" class="w-90 m-r-20 m-l-20" @blur="(value) => toEditInput(value,'timeRecent')"></el-input><label class="inline-block middle label-unit">天</label>
              </div>
            </template>

            <!-- 之后 天 -->
            <template v-if="false">
              <div>
                <label class="inline-block middle label-unit">之后</label><el-input v-model="tagData.timeAfter" placeholder="请输入" class="w-90 m-r-20 m-l-20" @blur="(value) => toEditInput(value,'timeAfter')"></el-input><label class="inline-block middle label-unit">天</label>
              </div>
            </template>

            <!-- 属于/不属于 -->
            <template v-if="false">
              <div>
                <el-radio v-model="tagData.computeRadio" label="1">属于</el-radio>
                <el-radio v-model="tagData.computeRadio" label="2">不属于</el-radio>
              </div>
            </template>

            <!-- 固定时段/最近 -->
            <template v-if="false">
              <div>
                <el-radio v-model="tagData.fixedRecentRadio" label="1">固定时段</el-radio>
                <el-radio v-model="tagData.fixedRecentRadio" label="2">最近时段</el-radio>
              </div>
              <!-- 固定时段 -->
              <div class="m-t-18 w-526 h-80 fixed-date-picker border-box bg-f3f6f9" >
                <label class="inline-block middle label-unit m-r-8" v-if="tagData.fixedRecentRadio == 1">时间范围</label><el-date-picker
                  v-model="tagData.fixedRecentRangeValue"
                  v-if="tagData.fixedRecentRadio == 1"
                  type="daterange"
                  :editable="false"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  format="yyyyMMdd"
                  value-format="yyyyMMdd"
                  :default-time="['000000', '235959']"

                  ><!-- :picker-options="pickerOptions"  -->
                </el-date-picker>
                <div v-if="tagData.fixedRecentRadio == 2">
                  <label class="inline-block middle label-unit m-r-8" >最近</label><el-input v-model="tagData.fixedRecentTimeRecent" placeholder="请输入" class="w-90 m-r-8" @blur="(value) => toEditInput(value,'fixedRecentTimeRecent')"></el-input><label class="inline-block middle label-unit">天</label>
                </div>
              </div>
            </template>

            <!-- 输入添加值 -->
            <template v-if="false">
              <div>
                <el-input v-model="tagData.addInputValue" placeholder="请输入" class="w-184 m-t-20 m-r-20"></el-input><el-button class="m-t-20 middle" type="text" @click.stop="addInputVal">添加</el-button>
              </div>
              <div class="m-t-18 add-tags-wrap">
                <template v-for="(item,index) in tagData.addTags">
                  <span class="el-tag">{{ item.value }}<i class="el-tag__close el-icon-close" @click="delInputVal(index)"></i></span>
                </template>
              </div>
            </template>

            <!-- 输入搜索下拉多选 添加值 -->
            <template v-if="false">
              <div class="m-t-18 add-search-select">
                <el-select
                  size="small"
                  v-model="tagData.searchModel"
                  multiple
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入关键词"
                  :reserve-keyword="false"
                  :remote-method="remoteMethod"
                  class="el-select--small">
                  <el-option
                    v-for="item in tagData.searchOptions"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key">
                  </el-option>
                </el-select><el-button class="m-l-8 middle" type="text" @click.stop="addSearchSelectVal">添加</el-button>
              </div>
              <div class="m-t-18 add-tags-wrap">
                <template v-for="(item,index) in tagData.addSelectTags">
                  <span class="el-tag">{{ item.value }}<i class="el-tag__close el-icon-close" @click="delSearchSelectVal(index)"></i></span>
                </template>
              </div>
            </template>

            <!-- 存在其一/所有,/属于不属于 -->
            <template v-if="false">
              <div>
                <el-select v-model="tagData.selectOne" placeholder="请选择" class="w-98 m-l-8">
                  <el-option label="所有" value="1"></el-option>
                  <el-option label="存在其一" value="2"></el-option>
                </el-select><label
                class="inline-block middle label-unit m-l-8"
                >{{tagData.selectLabel}}</label><el-select
                  v-model="tagData.selectTwo"
                  placeholder="请选择"
                  class="w-98 m-l-8">
                  <el-option label="属于" value="1"></el-option>
                  <el-option label="不属于" value="2"></el-option>
                </el-select><label
                class="inline-block middle label-tip m-l-8"
                >{{tagData.selectLabelTip}}</label>
              </div>
            </template>

            <!-- 多选项( 全部选项/已选选项 ) -->
            <template v-if="false">
              <div class="multiple-select-wrap">
                <div class="multiple-select-wrap__search w-184">
                  <el-input
                    placeholder="请输入关键字搜索"
                    prefix-icon="el-icon-search"
                    v-model="tagData.inputSearch"
                    @keyup.native="(value) => toSearchInput(value)">
                  </el-input>
                </div>
                <div class="multiple-select-wrap__body m-t-18">
                  <div class="multiple-select-wrap__tab">
                    <el-tabs v-model="tagData.allSelectActive">
                      <el-tab-pane label="全部选项" name="first">
                        <div class="all-select-options">
                          <template v-for="(item,index) in tagData.allSelectOptions">
                            <el-checkbox v-model="item.check" @change="allSelectChange($event,index,item)">{{item.name}}</el-checkbox>
                          </template>
                        </div>
                      </el-tab-pane>
                      <el-tab-pane :label="'已选选项(' +tagData.selectedOptions.length+ ')'" name="second">
                        <div class="slected-opyions">
                          <template v-for="(item,index) in tagData.selectedOptions">
                            <span class="el-tag">{{ item.name }}<i class="el-tag__close el-icon-close" @click="delallSelectVal(index,item)"></i></span>
                          </template>
                        </div>
                      </el-tab-pane>
                    </el-tabs>
                  </div>
                </div>
              </div>
            </template>

            <!-- 多选项 城市选择( 全部选项/已选选项 ) -->
            <template v-if="true">
              <div class="multiple-select-wrap city-select-wrap">
                <div class="multiple-select-wrap__search w-184">
                  <el-input
                    placeholder="请输入关键字搜索"
                    prefix-icon="el-icon-search"
                    v-model="tagData.inputSearch"
                    @keyup.native="(value) => toSearchInput(value,'city')">
                  </el-input>
                </div>
                <div class="multiple-select-wrap__body m-t-18">
                  <div class="multiple-select-wrap__tab">
                    <el-tabs v-model="tagData.citySelectActive">
                      <el-tab-pane label="全部选项" name="first">
                        <div class="all-select-options">
                          <div class="city-checkbox city-checkbox-all border-box">
                            <el-checkbox :indeterminate="tagData.isIndeterminateCity" v-model="tagData.checkAllCity" @change="cityCheckAllChange">全选</el-checkbox>
                          </div>
                          <el-checkbox-group v-model="tagData.checkeditemsCity" @change="citySelectChange($event)">
                            <template v-for="(item,index) in tagData.citySelectOptions">
                              <div class="city-checkbox border-box border-t-e4e7ed">
                                <el-checkbox :label="item.id" :key="item.id">{{ }}</el-checkbox><label class="inline-block middle font-14 pointer city-name" @click.stop="toggleCity(item.id,item)">{{item.name}}</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 :class="['el-select-dropdown__item', 'city-name',!!itemCity.check?'selected':'']" @click.stop="toggleClickCity(itemCity,item)"><span class="city-name">{{itemCity.name}}</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="'已选选项(' +tagData.citySelectedOptions.length+ ')'" name="second">
                        <div class="slected-opyions city-slected-opyions">
                          <template v-for="(item,index) in tagData.citySelectedOptions">
                            <span class="el-tag">{{ item.selected }}<i class="el-tag__close el-icon-close" @click="delcitySelectVal(index,item)"></i></span>
                          </template>
                        </div>
                      </el-tab-pane>
                    </el-tabs>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
        <!-- <checkboxOption ></checkboxOption> -->
        <!-- <checkbox-option-async ></checkbox-option-async> -->

        <div class="myTagDetail-wrap__btn">
          <el-button type="primary" v-if="tagFlag" @click="addTemporary">添加到暂存架</el-button>
          <el-button type="primary" v-if="!tagFlag" @click="addMytag">添加至我的标签库</el-button>
        </div>
      </div>
    </div>
    <vue-gic-footer></vue-gic-footer>
  </div>
</template>
<script>
  import navCrumb from '@/components/nav/nav.vue';
  import checkboxOption from '@/components/tags/checkboxOption.vue';
  import checkboxOptionAsync from '@/components/tags/checkboxOptionAsync.vue';
  import strLength from '@/common/js/strlen';
  import showMsg from '@/common/js/showmsg';
  import errMsg  from '@/common/js/error';
  import { _debounce } from "@/common/js/public";
  import { getRequest, postRequest, postJson, postForm } from '@/api/api';
  export default {
      name: "myTagDetail",
      data() {
        return {
          // 面包屑参数
          navpath: [
            {
              name: '首页',
              path: ''
            },
            {
              name: '会员标签',
              path: ''
            }
          ],

          tagId: '', // 获取当前标签的 id
          tagFlag: false, //判断是否添加暂存架还是添加我的标签库的标志,true: 暂存库,false: 我的标签

          tagData: {
            name: '性别',
            des: '根据描述根据描述根据描述根据描述根据描述根据描述根据描述根',
            // 选项控件
            checkeditems: [],
            isIndeterminate: false,
            checkAll: false,
            options: [
              {
                id: 1,
                name: '男'
              },
              {
                id: 2,
                name: '女'
              }
            ],
            // 数字区间
            numRange: ['',''],
            // <!-- 时间属性-固定时段/相对时段 -->
            radio: "1",
            daterangeValue: [],

            // 相对时间
            timeRadio: "1",
            timeChecked: false,
            timeCheckedTwo: false,
            timeSelect: '1',
            timeInput: '',

            // 最近 天
            timeRecent: '',
            // 之后 天
            timeAfter: '',

            // 属于/不属于
            computeRadio: '1',

            // 时间属性-固定时段/最近
            fixedRecentRadio: '1',
            fixedRecentRangeValue: [],
            fixedRecentTimeRecent: '',


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

            // 搜索下拉多选添加值
            searchModel: [],
            searchOptions: [
              {
                key: 1,
                value: '测试去1'
              },
              {
                key: 2,
                value: '测试去2'
              },
              {
                key: 3,
                value: '测试去3'
              },
              {
                key: 4,
                value: '测试去4'
              }
            ],
            addSelectTags: [],

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

            // 多选项( 全部选项/已选选项 )
            allSelectActive: 'first',
            inputSearch: '',
            allSelectOptions: [
              {
                id: 1,
                check: false,
                name: '欧时力'
              },
              {
                id: 2,
                check: false,
                name: '伊芙丽'
              }
            ],
            selectedOptions:[],

            // 多选项(城市选择) ( 全部选项/已选选项 )
            citySelectActive: 'first',
            isIndeterminateCity: false,
            checkAllCity: false,
            citySelectOptions: [
              {
                id: 1,
                check: false,
                name: '北京',
                showCity: false,
                children: [
                  {
                    id: 11,
                    name: '北京',
                    check: false
                  }
                ]
              },
              {
                id: 2,
                check: false,
                name: '浙江',
                showCity: false,
                children: [
                  {
                    id: 21,
                    name: '杭州',
                    check: false
                  },
                  {
                    id: 22,
                    name: '温州',
                    check: false
                  }
                ]
              }
            ],
            checkeditemsCity: [], // 已选省
            citySelectedOptions: [],

          }
        }
      },
      methods: {
        /**
         * 添加到暂存架
         */
        addTemporary() {
          const that = this
        },

        /**
         * 添加至我的标签库
         */
        addMytag() {
          const that = this
          const para = {
            tagId: that.tagId
          }

          getRequest('/enterpriseMemberTag/addByTagId',para)
          .then((res) => {
            // console.log(res,res.data,res.data.errorCode)
            var resData = res.data
            if (resData.errorCode == 0) {
              showMsg.showmsg('添加成功','success')
              return;
            }

            errMsg.errorMsg(resData)

          })
          .catch(function (error) {
            console.log(error);

            that.$message.error({
              duration: 1000,
              message: error.message
            })
          });
        },

        /**
         * 全选
         */
        handleCheckAllChange(val) {
          const that = this
          if (val) {
            that.tagData.checkeditems = [];
            that.tagData.options.forEach(function(el,index) {
              that.tagData.checkeditems.push(el.id)
            })
          }else {
            that.tagData.checkeditems = []
          }

          that.tagData.isIndeterminate = false;
        },

        /**
         * 单选
         */
        handleCheckedChange(value) {
          const that = this
          let checkedCount = value.length;
          that.tagData.checkAll = checkedCount === that.tagData.options.length;
          that.tagData.isIndeterminate = checkedCount > 0 && checkedCount < that.tagData.options.length;
        },

        /**
         * 数字区间
         */
        blurFrom(e){
          const that = this

          let value = !Number(e.target.value.replace(/[^\d]/g,''))? Number(0): Number(e.target.value.replace(/[^\d]/g,''))

          // 判断输入
          let v1 = that.tagData.numRange[0];
          let v2 = that.tagData.numRange[1]
          if (!Number(v2) || Number(v1) >= Number(v2)) {
            that.tagData.numRange[0] = value
            that.tagData.numRange[1] = Number((!!Number(v1)? Number(v1):0) + 1)
            that.$forceUpdate();

            return;
          }
          that.tagData.numRange[0] = value
          that.$forceUpdate();
        },
        blurTo(e){
          const that = this

          let value = !Number(e.target.value.replace(/[^\d]/g,''))? Number(0): Number(e.target.value.replace(/[^\d]/g,''))

          let t1 = that.tagData.numRange[0];
          let t2 = that.tagData.numRange[1]
          if ((!Number(t1) && Number(t1)!=0) || (Number(t1) >= Number(t2))) {
            that.tagData.numRange[0] = Number(t2) - 1 >=0? (Number(Number(t2) - 1)): !!Number(t1)? Number(t1): Number(0);
            var newValue = null;
            newValue = !!Number(t1)? (Number(t1)+1) : 1;
            that.tagData.numRange[1] = value || newValue

            if (Number(t1) > Number(t2)&& !Number(t2)) {
              that.tagData.numRange[1] = Number(t1) +1
            }
            if (Number(t1) > Number(t2)&& !!Number(t1) && !!Number(t2)) {
              that.tagData.numRange[0] = Number(t2) -1
            }
            that.$forceUpdate();
            return
          }

          that.tagData.numRange[1] = value
          that.$forceUpdate();
        },

        /**
         * 最近,之后 天输入
         */
        toEditInput(e,tag) {
          console.log(e,tag)
          const that = this
          let newNum;
          newNum = !!parseInt(String(e.target.value).replace(/[^\d]/g,''))? parseInt(String(e.target.value).replace(/[^\d]/g,'')): 1
          if (newNum <= 0) {
            newNum = 1
          }
          if (newNum > 365) {
            newNum = 365
          }
          that.tagData[tag]  = newNum;
        },

        /**
         * 天/月/年 RadioChange
         */
        timeRadioChange(e) {
          const that = this
          console.log(e)
          // 每次改变选择,清空原有的值
          that.tagData.timeInput = '';
        },

        /**
         * 天/月/年输入
         */
        toEditDateInput(e,radio) {
          console.log(e,radio)
          const that = this
          let newNum;
          newNum = !!parseInt(String(e.target.value).replace(/[^\d]/g,''))? parseInt(String(e.target.value).replace(/[^\d]/g,'')): 1
          if (newNum <= 0) {
            newNum = 1
          }
          // 天
          if (newNum > 365 && radio == 1) {
            newNum = 365
          }

          // 月
          if (newNum > 12 && radio == 2) {
            newNum = 12
          }

          // 年
          if (newNum > 3 && radio == 3) {
            newNum = 2
          }

          that.tagData.timeInput  = newNum;
        },

        /**
         * 添加输入值
         */
        addInputVal() {
          const that = this
          if (!that.tagData.addInputValue.trim()) {
            that.$message.error({
              duration: 1000,
              message: "请输入值"
            })
            return false;
          }
          let tagsMap = null;
          if (!!that.tagData.addTags.length) {
            tagsMap = that.tagData.addTags.map(item=>item.value)
          }
          if (!!tagsMap&&tagsMap.indexOf(that.tagData.addInputValue) !== -1) {
            that.$message.error({
              duration: 1000,
              message: "输入值已存在"
            })

            return false;
          }
          that.tagData.addTags.push(
            {
              value: that.tagData.addInputValue
            }
          )

          that.tagData.addInputValue = ''
        },

        /**
         * 删除输入值
         */
        delInputVal(index) {
          const that = this
          that.tagData.addTags.splice(index,1)
        },

        /**
         * 输入搜索值
         */
        remoteMethod: _debounce(function (query) {

          const that = this;
          console.log("query:",query)
          that.tagData.searchOptions.push()
        },500),

        /**
         * 添加已选的搜索值
         */
        addSearchSelectVal() {
          const that = this
          if (!that.tagData.searchModel.length) {
            that.$message.error({
              duration: 1000,
              message: "请选择值"
            })
            return false;
          }

          let tagsMap = null;
          if (!!that.tagData.addSelectTags.length) {
            tagsMap = that.tagData.addSelectTags.map(item=>item.value)
          }
          console.log(tagsMap)

          that.tagData.searchOptions.forEach(function(ele,index){
            if (!!tagsMap&&tagsMap.indexOf(ele.value) != -1) {
              // that.$message.error({
              //   duration: 1000,
              //   message: "输入值已存在"
              // })
              // that.tagData.searchModel = [];
              return false;
            }
            if (that.tagData.searchModel.indexOf(ele.key) != -1) {
              that.tagData.addSelectTags.push(ele)

            }
          })

          that.tagData.searchModel = []
          console.log(that.tagData.addSelectTags)
        },

        /**
         * 删除已添加的搜索值
         */
        delSearchSelectVal(index){
          const that = this
          that.tagData.addSelectTags.splice(index,1)
        },

        /**
         *  多选项( 全部选项/已选选项 )
         */
        allSelectChange(e,index,item) {
          const that = this
          console.log(e,index,item,that.tagData.allSelectOptions)
          if (!!e) {
            that.tagData.selectedOptions.push(item)
          }else {
            if (!!that.tagData.selectedOptions.length) {
              that.tagData.selectedOptions.forEach(function(ele,index){
                if (ele.id == item.id) {
                  that.tagData.selectedOptions.splice(index,1)
                }
              })
            }
          }
        },

        /**
         * 删除已选择的值
         */
        delallSelectVal(index,item) {
          const that = this
          that.tagData.selectedOptions.splice(index,1)
          that.tagData.allSelectOptions.forEach(function(ele,index){
            if (ele.id == item.id) {
              ele.check = false;
            }
          })
        },

        /**
         * 搜索选项值
         */
        toSearchInput: _debounce(function (e,flag) {
          const that = this
          console.log(e.target.value,flag)
        },500),

        getSearchSelectOptions() {
          const that = this
        },

        /**
         * 多选项 城市选择( 全部选项/已选选项 )
         */
        cityCheckAllChange(val) {
          const that = this
          if (val) {
            that.tagData.checkeditemsCity = []; // 避免追加重复 id
            that.tagData.citySelectedOptions = []; // 避免已选数据中追加重复
            that.tagData.citySelectOptions.forEach(function(el,index) {
              el.check = true; // 全选后需要统一设置 check 字段,后面选择 市 会用到
              that.tagData.checkeditemsCity.push(el.id)
              el.children.forEach(function(child,key){
                child.check = true;
                child.selected = child.name +'-'+ el.name;
                child.pId = el.id
                that.tagData.citySelectedOptions.push(child);
              })
            })
          }else {
            that.tagData.checkeditemsCity = [];
            that.tagData.citySelectedOptions = [];
            that.tagData.citySelectOptions.forEach(function(el,index) {
              el.check = false; // 全选后需要统一设置 check 字段,后面选择 市 会用到
              el.children.forEach(function(child,key){
                child.check = false;
              })
            })
          }

          that.tagData.isIndeterminateCity = false;
          console.log(that.tagData.checkeditemsCity)
        },

        /**
         * 多选项 城市选择( 全部选项/已选选项 )- 单个选择
         */
        citySelectChange(value) {

          const that = this
          console.log(value,"是等于",that.tagData.checkeditemsCity)
          let cityCount = value.length;
          that.tagData.checkAllCity = cityCount === that.tagData.citySelectOptions.length;
          that.tagData.isIndeterminateCity = cityCount > 0 && cityCount < that.tagData.citySelectOptions.length;

          // 重新根据已选的 id 来添加已选的数据
          that.tagData.citySelectedOptions = [];

          that.tagData.citySelectOptions.forEach(function(ele,index){
            if (value.indexOf(ele.id) != -1) {
              ele.check = true;
              ele.children.forEach(function(child,key){
                child.check = true;
                child.selected = child.name +'-'+ ele.name;
                child.pId = ele.id;

                that.tagData.citySelectedOptions.push(child);
              })
            }else {
              ele.check = false;
              ele.children.forEach(function(child,key){
                child.check = false;
              })
            }
          })
        },

        /**
         * 多选项 城市选择( 全部选项/已选选项 )-显示/隐藏 市 列表
         */
        toggleCity(id,item) {
          const that = this
          // console.log(id,item)
          item.showCity = item.showCity === true? false : true;
          that.tagData.citySelectOptions.forEach(function(ele,index){
            if (ele.id != id) {
              ele.showCity = false;
            }
          })

          document.addEventListener('mousedown', that.hideCity, false)
          // 请求当前省下的所有市
          // that.getCityList(id,item)
        },

        /**
         * 多选项 城市选择( 全部选项/已选选项 )-点击市
         */
        toggleClickCity(item,pItem) {
          console.log(item.check)
          const that = this
          item.check = !!item.check? false: true;
          console.log(pItem.check,that.tagData.checkeditemsCity.indexOf(pItem.id))
          pItem.children.forEach(function(ele,index){
            // 如果有未选的,当前省就不是全选,全选也不是全选了,要从全选的 model中删除
            if (!ele.check && !!pItem.check) {
              pItem.check = false;
              that.tagData.checkeditemsCity.splice(that.tagData.checkeditemsCity.indexOf(pItem.id),1)
              that.tagData.checkAllCity = false;
              that.tagData.isIndeterminateCity = !!that.tagData.checkeditemsCity.length ? true:false;
            }
            console.log("已选的 id 集合:",that.tagData.checkeditemsCity)
          })
          console.log("总的省集合:",that.tagData.citySelectOptions)
          let arrValues = pItem.children.map(el=>el.check)
          console.log(arrValues)

          // 如果当前省的所有市都选了
          if (arrValues.indexOf(false) == -1) {
            pItem.check = true;
            that.tagData.checkeditemsCity.push(pItem.id)
          }else {
            console.log(that.tagData.checkeditemsCity.indexOf(pItem.id))
            if (that.tagData.checkeditemsCity.indexOf(pItem.id) != -1) {
              that.tagData.checkeditemsCity.splice(that.tagData.checkeditemsCity.indexOf(pItem.id),1)
            }

          }
          console.log("已选的 id 集合:",that.tagData.checkeditemsCity)

          // 再去判断全选
          let selectedCount = that.tagData.checkeditemsCity.length;
          that.tagData.checkAllCity = selectedCount === that.tagData.citySelectOptions.length;
          that.tagData.isIndeterminateCity = selectedCount > 0 && selectedCount < that.tagData.citySelectOptions.length;

          // 重新设置 已选数据
          that.tagData.citySelectedOptions = [];
          that.tagData.citySelectOptions.forEach(function(ele,index){
            ele.children.forEach(function(child,ind){
              if (!!child.check) {
                child.selected = child.name +'-'+ ele.name;
                child.pId = ele.id;

                that.tagData.citySelectedOptions.push(child);
              }
            })
          })
          that.$forceUpdate()
        },

        /**
         * 多选项 城市选择 - 删除已选择的值
         */
        delcitySelectVal(index,item) {
          const that = this

          console.log(item,item.pId)
          that.tagData.citySelectedOptions.splice(index,1)
          that.tagData.citySelectOptions.forEach(function(ele,index){
            if (item.pId == ele.id) {
              ele.check = false
            }
            ele.children.forEach(function(el,ind){
              if (el.id == item.id) {
                el.check = false
                // ele.check = false
              }
            })
          })

          console.log(that.tagData.checkeditemsCity.indexOf(item.pId),item.pId,that.tagData.checkeditemsCity)
          if (that.tagData.checkeditemsCity.indexOf(item.pId) != -1) {
            that.tagData.checkeditemsCity.splice(that.tagData.checkeditemsCity.indexOf(item.pId),1)
          }

          // 再去判断全选
          let selectedCount = that.tagData.checkeditemsCity.length;
          that.tagData.checkAllCity = selectedCount === that.tagData.citySelectOptions.length;
          that.tagData.isIndeterminateCity = selectedCount > 0 && selectedCount < that.tagData.citySelectOptions.length;
        },

        /**
         * 多选项 城市选择 - 获取省下所有市
         */
        getCityList(id,item){
          const that = this
          item.children = [];
          let childCheck = false;
          if (!!item.check) {
            childCheck = true;
          }
          console.log(childCheck)
          item.children.push({
            id: 11,
            name: '杭州',
            check: childCheck,
          })
          that.$forceUpdate()
        },

        /**
         * 多选项 城市选择 - 获取省下所有市
         */
        hideCity(e) {
          const that = this
          // console.log(e,e.target.className)
          if (e.target.className.indexOf('city-name') == -1) {
            that.tagData.citySelectOptions.forEach(function(ele,index){
              ele.showCity = false;
            })
          }
        }




      },
      mounted() {
        const that = this
        // 获取标签的 id 和一个判断是否添加暂存架还是添加我的标签库的标志
        console.log(that.$route.query);
        if (!!that.$route.query.tagId) {
          that.tagId = that.$route.query.tagId
        }
      },
      components: {
        navCrumb,
        checkboxOption,
        checkboxOptionAsync
      }
  }
</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;
  overflow-y: auto;
  white-space: pre-wrap;
  border: 1px solid #DCDFE6;
  border-radius: 4px;

  .el-tag {
    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;
    }
  }
}

.slected-opyions {
  .el-tag {
    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;
  }
}



</style>
