<template>
      <div style="height:100%;" id ="test">
        <div style="height:100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
          <Row  style="width:100%">
            <div v-if="taskItems.customTitle.isShow" :style="customStyles">
              {{taskItems.customTitle.title}}
            </div>
          </Row>
          <Row style="width:100%; height: 50px;" :style="titleStyles" v-if="!taskItems.menu.hideDropdown || !taskItems.menu.hideSearch || !taskItems.menu.hideCreateBtn" >
            <Col span="4" style=' width:110px; height: 100%;'>
              <Dropdown  trigger="custom" :visible="menuLinkageData" :active-name="activeName" @on-click = "upadteTaskArr" @on-clickoutside="menuLinkageClickoutside"
                          style="width:100px"  placement="bottom-start" 
                          v-if="!taskItems.menu.hideDropdown">
                <p style="height: 50px;line-height: 50px;cursor: pointer;text-indent: 0px;" @click="menuLinkage">
                  <span style="font-size: 14px;height: 14px;margin: 0px 8px 0 0;line-height: 14px;display: inline-block;position: relative;top: -3px;white-space: nowrap;">{{curTagContent}}</span>
                  <i class="iconfont icon-gg_xialaxia" ></i>
                </p>
                <DropdownMenu slot="list" class = "mFont13">
                  <DropdownItem name = "1" v-if="!creat_row && creat_ROW">            
                    <Icon type="ios-create" />
                    我创建的
                  </DropdownItem>
                  <DropdownItem name = "2" v-if="!participate_row && participate_ROW">            
                    <Icon type="ios-contacts" />
                    我参与的
                  </DropdownItem>
                  <DropdownItem name = "6" v-if="!hide_row && hide_ROW">            
                    <Icon type="md-eye-off" />
                    我隐藏的
                  </DropdownItem>
                  <DropdownItem name = "4" v-if="!collect_row && collect_ROW">            
                    <Icon type="md-heart-outline" />
                    我收藏的
                  </DropdownItem>
                  <DropdownItem name = "3" v-if="!near_row && near_ROW">            
                  <Icon type="md-alarm" />
                    最近使用
                  </DropdownItem>
                  <DropdownItem name = "0" disabled v-if="kong_item || kong_ITEM"> 
                  <Icon type="ios-alert-outline" />
                    暂无更多
                  </DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </Col>

            <Col span="12" :style="menu_width">
                <Menu mode="horizontal" :theme="theme1" :active-name="activeName" @on-select = "upadteTaskArr" style=" background: #FAFBFD; height:100%" :style="menu_width">
                    <MenuItem name="1" style="height:47px;line-height: 47px; float: left;" v-if="creat_row">
                        <Icon type="ios-create"  style="width: 0px; margin-right: 0px; position: relative;left: -32px;"/>
                        我创建的
                    </MenuItem>
                    <MenuItem name="2" style="float: left; height:47px;line-height: 47px;" v-if="participate_row">
                        <Icon type="ios-contacts" style="width: 0px; margin-right: 0px; position: relative;left: -32px;"/>
                        我参与的
                    </MenuItem>
                    <MenuItem name="6" style="float: left; height:47px;line-height: 47px;" v-if="hide_row">
                        <Icon type="md-eye-off" style="width: 0px; margin-right: 0px; position: relative;left: -32px;"/>
                        我隐藏的
                    </MenuItem>
                    <MenuItem name="4" style="float: left; height:47px;line-height: 47px;" v-if="collect_row">
                        <Icon type="md-heart-outline" style="width: 0px; margin-right: 0px; position: relative;left: -32px;"/>
                        我收藏的
                    </MenuItem>
                    <MenuItem name="3" style="float: left; height:47px;line-height: 47px;" v-if="near_row">
                        <Icon type="md-alarm" style="width: 0px; margin-right: 0px; position: relative;left: -32px;"/>
                        最近使用
                    </MenuItem>
                </Menu>
            </Col>
            <Col :style="searchStyles" class="searchColDiv" :class="{'searchCol' : find_col}">
                <div class="searchDiv" v-if="find_div" @click = "find_icon">
                  <Icon type="ios-search" style=" position: relative; left: -50%; padding-bottom:4px;" />
                </div>
                  <Input  
                  icon="ios-search"
                  v-if = "find_sea"
                  placeholder="按名称或创建人搜索" 
                  :disabled = "loading"
                  ref="find_Input"
                  clearable 
                  @on-click = "find_icon"
                  @on-change = "remoteMethod"
                  v-model = "searchContent"
                  />                      
            </Col>
            <Col span="18" style=" height: 100%; padding: 10px 0px; float: right;" :style="new_width">
                  <div v-if="new_menu" style=" display:inline-block; float:right; height:28px; overflow: hidden;" >
                    <Button type="default" icon = "md-add" size="small" @click = "newTask('template')" style="float:right;margin-right: 10px">从模板库创建</Button>
                    <Button type="default" icon = "md-add" size="small" @click = "newTask('survey')" class="headerbtn">新建问卷</Button>
                    <Button type="default" icon = "md-add" size="small" @click = "newTask('task')" class="headerbtn">新建表格</Button>
                                   
                  </div>
                  <Dropdown trigger="click" style=" height:100%; position: relative;left:-5px;" placement="bottom-end" v-if="!new_menu">              
                      <a href="javascript:void(0)" style="color: black;display: inline-block; height:40px;text-align: center; font-size: 14px;">
                          常用功能
                          <Icon type="ios-arrow-down"></Icon>
                      </a>
                      <DropdownMenu slot="list" class = "mFont13">
                          <DropdownItem>
                            <div type="default" size="small" @click = "newTask('task')" style="text-align: center;">
                              <Icon type="md-add" />
                              &nbsp;&nbsp;&nbsp;&nbsp;新建表格
                            </div>
                          </DropdownItem>
                          <DropdownItem>
                            <div type="default" size="small" @click = "newTask('survey')" style="text-align: center;">
                              <Icon type="md-add" />
                              &nbsp;&nbsp;&nbsp;&nbsp;新建问卷
                            </div>
                          </DropdownItem>
                          <DropdownItem>
                             <div type="default" size="small" @click = "newTask('template')" style="text-align: center;">
                              <Icon type="md-add" />
                              &nbsp;&nbsp;&nbsp;&nbsp;从模板库创建
                            </div>
                          </DropdownItem>
                      </DropdownMenu>
                  </Dropdown>
            </Col>
          </Row>
          <vue-scrollbar classes="my-scrollbar" ref="Scrollbar" style="height:100%" :style="contentStyles" @mouseleave.native="onMouseout" @mouseenter.native="onMouseover">
            <Row :style="contentHeightStyle">
              <div v-if = "taskArr.length > 0">              
                  <div style="height:auto;">
                    <TaskCard :mess="taskArr" :itemid = "itemId" :userId = "userId" :taskType = "taskType"></TaskCard>
                  </div>              
              </div>
              <div v-if = "searchContent !='' && options.length == 0" class="verticalCenter">
                <div :style="lineHeightStyle">
                  没有找到<span style="color:red;">{{searchContent}}</span>相关的结果. 
                </div>      
              </div>
            </Row>
          </vue-scrollbar>
        </div> 
        <Spin size="large" fix v-if="spinShow && (loading || taskArr.length == 0)"  class = "verticalCenter">加载中...</Spin>
       </div>
</template>
<script>
import taskApi from "../../api/task.js";
import TaskCard from "./TaskCard.vue";
import { mapMutations } from "vuex";
import hanziFirstChar from "@libs/search/hanziFirstChar";
import polyphonicWord from "@libs/search/polyphonicWord";
import VueScrollbar from 'vue2-scrollbar';

export default {
  
  props: ["itemId"],
  data: () => ({
    editTaskPage: false,
    isNewTask: false,
    currTaskKey: "",
    taskArrCache: [],
    taskArr: [],
    spinShow: false,
    userId: "",
    taskList: [],
    searchResult: "",
    loading: true,
    options: [],
    searchContent: "",
    isAdmin: false,
    designModel: false,
    curTagContent: "最近使用",
    taskType: null,
    
    //此项是自定义控制下拉菜单的折叠缩放
    menuLinkageData:false,

    //控制相关按钮的显示和缩放
    collect_ROW:true,
    hide_ROW:true,
    participate_ROW:true,
    creat_ROW:true,
    near_ROW:true,
    kong_ITEM:true,//此值是为了一直显示“暂无更多”按钮，不改变下面监听的控制的参数结构

    collect_row:true,
    hide_row:true,
    participate_row:true,
    creat_row:true,
    near_row:true,
    kong_item:true,
    row_col:0,
    theme1:'light',

    find_div:true,
    find_sea:false,
    find_flag:true,
    new_template:3,
    new_menu:true,

    //此值是控制搜索框的宽度大小
    find_col:false,
    //菜单活跃项
    activeName:'',
    dropDownData:true
  }),
  watch: {
      //监听屏幕尺寸变化后，相关按钮的展示与缩放
      firstWidth (val) {
        
        let self=this;
        if (val>1210) {
          self.near_row=true;
          self.collect_row=true;
          self.hide_row=true;
          self.participate_row=true;
          self.creat_row=true;

          self.row_col=5;
          self.kong_item=true;

          self.new_menu=true;

          self.find_flag=true;
        }else if(val<=1210&&val>1095) {
          self.near_row=false;
          self.collect_row=true;
          self.hide_row=true;
          self.participate_row=true;
          self.creat_row=true;

          self.row_col=4;
          self.kong_item=false;

          self.new_menu=true;

          self.find_flag=true;
        }else if(val<=1095&&val>927) {
          self.near_row=false;
          self.collect_row=false;
          self.hide_row=true;
          self.participate_row=true;
          self.creat_row=true;

          self.row_col=3;
          self.kong_item=false;

          self.new_menu=true;

          self.find_flag=true;
        }else if(val<=927&&val>862) {
          self.near_row=false;
          self.collect_row=false;
          self.hide_row=false;
          self.participate_row=true;
          self.creat_row=true;

          self.row_col=2;
          self.kong_item=false;

          self.new_menu=true;

          self.find_flag=true;
        }else if(val<=862&&val>630) {
          self.near_row=false;
          self.collect_row=false;
          self.hide_row=false;
          self.participate_row=true;
          self.creat_row=true;

          self.row_col=2;
          self.kong_item=false;

          self.new_menu=false;

          self.find_flag=true;
        }else if(val<=630&&val>513) {
          self.near_row=false;
          self.collect_row=false;
          self.hide_row=false;
          self.participate_row=false;
          self.creat_row=true;

          self.row_col=1;
          self.kong_item=false;

          self.new_menu=false;

          self.find_flag=true;

          if(self.find_sea==true){
            self.find_div=true;
            self.find_sea=false;
          }
        }else if(val<=513&&val>397) {
          self.near_row=false;
          self.collect_row=false;
          self.hide_row=false;
          self.participate_row=false;
          self.creat_row=false;

          self.row_col=0;
          self.kong_item=false;

          self.new_menu=false;

          self.find_flag=true;

        }else if(val<=397&&val>324) {
          self.near_row=false;
          self.collect_row=false;
          self.hide_row=false;
          self.participate_row=false;
          self.creat_row=false;

          self.row_col=0;
          self.kong_item=false;

          self.new_menu=false;

          self.find_flag=false;
          self.find_div=true;
          self.find_sea=false;
        }else if(val<=324) {
          alert("继续操作可能会无法正常显示某些功能！")
        }
      },
      curTagContent (val) {
        let self=this;
        switch (val) {
          case '最近使用':
            self.collect_ROW=true;
            self.hide_ROW=true;
            self.participate_ROW=true;
            self.creat_ROW=true;
            self.near_ROW=false;
            break;
          case '我收藏的':
            self.collect_ROW=false;
            self.hide_ROW=true;
            self.participate_ROW=true;
            self.creat_ROW=true;
            self.near_ROW=true;
            break;
          case '我隐藏的':
            self.collect_ROW=true;
            self.hide_ROW=false;
            self.participate_ROW=true;
            self.creat_ROW=true;
            self.near_ROW=true;
            break;
          case '我参与的':
            self.collect_ROW=true;
            self.hide_ROW=true;
            self.participate_ROW=false;
            self.creat_ROW=true;
            self.near_ROW=true;
            break;
          case '我创建的':
            self.collect_ROW=true;
            self.hide_ROW=true;
            self.participate_ROW=true;
            self.creat_ROW=false;
            self.near_ROW=true;
            break;
          default:
            break;
        }
      }
  },
  computed: {
    menu_width() {
      return {
        width:116*this.row_col+'px'
      }
    },
    new_width() {
      let self=this;
      if (self.new_menu) {
        return {
          width:130*this.new_template+'px'
        }
      }
      else{
        return {
          width:144+'px'
        }
      }
      
    },
    titleStyles() {
      return {
        'color': this.moduleStyleSettings.TitleColor,
        'font-size': this.moduleStyleSettings.TitleFontSize + "px",
        'border-bottom':this.moduleStyleSettings.TitleBorderWidth + "px solid " + this.moduleStyleSettings.TitleBorderColor,
        'background-color': this.moduleStyleSettings.TitleBg,
        'text-align':this.moduleStyleSettings.TitleAlign == 'center' ? 'center': 'left',
        'text-indent':this.moduleStyleSettings.TitleAlign == 'center'? '0px': '15px'
      };
    },
    customStyles(){
      return {
        'width': "100%",
        'height': this.hasMenu ? "30px" : "50px",
        'color': this.moduleStyleSettings.TitleColor,
        'font-size': this.moduleStyleSettings.TitleFontSize + "px",
        'border-bottom': this.hasMenu ? "none !important" : this.moduleStyleSettings.TitleBorderWidth + "px solid " + this.moduleStyleSettings.TitleBorderColor,
        'background-color': this.moduleStyleSettings.TitleBg,
        'text-align': this.moduleStyleSettings.TitleAlign == 'center' ? 'center': 'left',
        'text-indent': this.moduleStyleSettings.TitleAlign == 'center'? '0px': '15px',
        'line-height': this.hasMenu ? "30px" : "50px",
      }
    },
    hasMenu(){
      return  !this.taskItems.menu.hideDropdown || !this.taskItems.menu.hideSearch || !this.taskItems.menu.hideCreateBtn;
    },
    contentStyles() {
      return {
        backgroundColor: this.moduleStyleSettings.ContentBg,
        opacity: this.moduleStyleSettings.Opacity
      };
    },
    moduleStyleSettings() {
      return this.$store.getters.getItemById(this.itemId).contentSetting;
    },
    taskItems() {
      let id = this.itemId,
        taskItems = this.$store.getters.getTaskPro(id);
      if (!taskItems || taskItems.length == 0) {
        this.initTaskProById(id);
      }
      let taskPro = this.$store.getters.getNodeProp(id);
      if (!taskPro || taskPro.length == 0) {
        let newTaskPro = this.$store.getters.getTaskPro(id).taskPro;
        this.setNodeProp({ id: id, taskPro: newTaskPro });
      }
      return this.$store.getters.getNodeProp(id).taskPro;
    },
    contentHeightStyle() {
      return {
        //height: parseInt(this.$store.getters.getHeight(this.itemId)) - 70 + "px",
        backgroundColor: this.moduleStyleSettings.ContentBg,
        opacity: this.moduleStyleSettings.Opacity
      };
    },
    lineHeightStyle() {
      return {
        "line-height":
          parseInt(this.$store.getters.getHeight(this.itemId)) - 70 + "px"
      };
    },
    searchStyles() {
      let itemWidth = this.$store.getters.getWidth(this.itemId);
      let returnStyle = 'disabled: true';
      if(itemWidth< 397){
        returnStyle = "disabled:disabled;"      
      }
      return returnStyle;
    },
    firstWidth() {
      let wid = this.$store.getters.getWidth(this.itemId);
      return wid;
    }
  },
  created() {
    this.designModel = this.$store.getters.getDesignModel;
    this.isAdmin = this.$store.getters.getIsAdmin;
    this.taskType = this.$store.getters.getTaskShareType;
    
  },

  mounted() {
    let self = this;
    self.spinShow = true;
    taskApi.getTaskPro(
      {
        tag: 3,
        newVersion: true,
        showCount: 9
      },
      function(result) {
        if (!result || result.length == 0) return;
        self.setTag({
          curTag: 3,
          id: self.itemId
        });
        self.setTagContent(3);
        self.spinShow = false;
        self.userId = result.UserId;
        self.taskArr = self.taskArrFilter(result.TaskList);
        self.taskArrCache = JSON.parse(JSON.stringify(self.taskArr));
      }
    );
    self.initTaskList();
    
    
    function shouye(val){
      if (val>1210) {
          self.near_row=true;
          self.collect_row=true;
          self.hide_row=true;
          self.participate_row=true;
          self.creat_row=true;

          self.row_col=5;
          self.kong_item=true;

          self.new_menu=true;

          self.find_flag=true;
        }else if(val<=1210&&val>1095) {
          self.near_row=false;
          self.collect_row=true;
          self.hide_row=true;
          self.participate_row=true;
          self.creat_row=true;

          self.row_col=4;
          self.kong_item=false;

          self.new_menu=true;

          self.find_flag=true;
        }else if(val<=1095&&val>927) {
          self.near_row=false;
          self.collect_row=false;
          self.hide_row=true;
          self.participate_row=true;
          self.creat_row=true;

          self.row_col=3;
          self.kong_item=false;

          self.new_menu=true;

          self.find_flag=true;
        }else if(val<=927&&val>862) {
          self.near_row=false;
          self.collect_row=false;
          self.hide_row=false;
          self.participate_row=true;
          self.creat_row=true;

          self.row_col=2;
          self.kong_item=false;

          self.new_menu=true;

          self.find_flag=true;
        }

        else if(val<=862&&val>630) {
          self.near_row=false;
          self.collect_row=false;
          self.hide_row=false;
          self.participate_row=true;
          self.creat_row=true;

          self.row_col=2;
          self.kong_item=false;

          self.new_menu=false;

          self.find_flag=true;
        }else if(val<=630&&val>513) {
          self.near_row=false;
          self.collect_row=false;
          self.hide_row=false;
          self.participate_row=false;
          self.creat_row=true;

          self.row_col=1;
          self.kong_item=false;

          self.new_menu=false;

          self.find_flag=true;
        }else if(val<=513&&val>397) {
          self.near_row=false;
          self.collect_row=false;
          self.hide_row=false;
          self.participate_row=false;
          self.creat_row=false;

          self.row_col=0;
          self.kong_item=false;

          self.new_menu=false;

          self.find_flag=true;
        }else if(val<=397) {
          self.near_row=false;
          self.collect_row=false;
          self.hide_row=false;
          self.participate_row=false;
          self.creat_row=false;

          self.row_col=0;
          self.kong_item=false;

          self.new_menu=false;

          self.find_flag=false;
          self.find_div=true;
          self.find_sea=false;
        }
     
    }
    shouye(self.firstWidth)
    switch (self.curTagContent) {
          case '最近使用':
            self.collect_ROW=true;
            self.hide_ROW=true;
            self.participate_ROW=true;
            self.creat_ROW=true;
            self.near_ROW=false;
            break;
          case '我收藏的':
            self.collect_ROW=false;
            self.hide_ROW=true;
            self.participate_ROW=true;
            self.creat_ROW=true;
            self.near_ROW=true;
            break;
          case '我隐藏的':
            self.collect_ROW=true;
            self.hide_ROW=false;
            self.participate_ROW=true;
            self.creat_ROW=true;
            self.near_ROW=true;
            break;
          case '我参与的':
            self.collect_ROW=true;
            self.hide_ROW=true;
            self.participate_ROW=false;
            self.creat_ROW=true;
            self.near_ROW=true;
            break;
          case '我创建的':
            self.collect_ROW=true;
            self.hide_ROW=true;
            self.participate_ROW=true;
            self.creat_ROW=false;
            self.near_ROW=true;
            break;
          default:
            break;
        }
  },
  methods: {
    ...mapMutations(["initTaskProById", "setTag", "setNodeProp"]),
    find_icon() {
      this.find_div=!this.find_div;
      this.find_sea=!this.find_sea;
      this.find_col=!this.find_col;
      let that=this;
      this.$nextTick(function () {
        if (that.$refs.find_Input) {
          that.$refs.find_Input.focus();
        }
      })
    },
    
    newTask(type) {
      taskApi.doTaskUrl(type);
    },
    searchIconClicked:function(e){

    },
    menuLinkage(){
      let self = this;
      self.menuLinkageData=!self.menuLinkageData;
    },
    menuLinkageClickoutside(val){
      let self = this;
      self.menuLinkageData=false;
    },
    upadteTaskArr(name) {
      if (name == 0) {
        return ;
      }
      let self = this;
      self.menuLinkageData=false;
      self.activeName=name;
      self.spinShow = true;
      self.taskArr = [];
      self.dropDownData = !self.dropDownData;
      taskApi.getTaskPro(
        {
          tag: name,
          newVersion: true,
          showCount: 9
        },
        function(result) {
          self.spinShow = false;
          self.setTag({
            curTag: name,
            id: self.itemId
          });
          self.setTagContent(name);
          if (!result || result.length == 0) return;
          self.taskArr = self.taskArrFilter(result.TaskList);
          self.taskArrCache = JSON.parse(JSON.stringify(self.taskArr));
        }
      );
    },
    initTaskList() {
      let self = this;
      if (!self.taskList || self.taskList.length > 0) return;
      taskApi.getTaskListAll({}, function(result) {
        if (result) {
          self.taskList = result.TaskList;
          for (var i = 0, len = self.taskList.length; i < len; i++) {
            self.addToTaskMaps(self.taskList[i]);
          }
        }
        self.loading = false;
      });
    },
    //搜索
    goToBlank(obj) {
      let url = obj.TaskUrl != "" ? obj.TaskUrl : obj.TemplateUrl;
      if (url == "") return;
      taskApi.toblankUrl(url);
    },
    remoteMethod(e) {
      let self = this,
        query = e.target.value;
      if (query !== "") {
        if (self.containsReservedChars(query) == true) {
          self.$Message.warning({
            top: "50%",
            content: "搜索内容不能包含特殊字符！'/,？,<,>,〈,〉'"
          });
          return;
        }
        if (self.taskList.length == 0) {
          self.$Message.info({
            top: "50%",
            content: "正在努力加载数据中...请稍候搜索"
          });
          return;
        }
        self.options = [];
        self.matchTasks(query);
      } else {
        self.taskArr = JSON.parse(JSON.stringify(self.taskArrCache));
      }
    },
    matchTasks(query) {
      let self = this;
      query = query
        .replace(/^[\s]+/g, "")
        .replace(/[\s]+$/g, "")
        .toUpperCase();
      for (let key in self.taskList) {
        if (!self.taskList.hasOwnProperty(key)) continue;
        let item = self.taskList[key];
        if (self.checkIsMatched(query, item)) self.options.push(item);
      }
      self.taskArr = self.taskArrFilter(self.options);
    },
    checkIsMatched(query, item) {
      if (!query || !item) return false;
      if (
        item.GlobalTask.Title.toUpperCase().indexOf(query) >= 0 ||
        item.GlobalTask.TitlePY.indexOf(query) >= 0 ||
        item.GlobalTask.CreaterName.toUpperCase().indexOf(query) >= 0 ||
        item.GlobalTask.CreatorPY.indexOf(query) >= 0
      )
        return true;
      return false;
    },
    addToTaskMaps(platTask) {
      let self = this;
      if (!platTask || !platTask.GlobalTask) return;
      let task = platTask.GlobalTask;
      if (!task || self.taskList[task.Id]) return;
      let titlePY = self.toPinyin(task.Title);
      task.TitlePY = titlePY && titlePY.length > 0 ? titlePY[0] : "";
      let creatorPY = self.toPinyin(task.CreaterName);
      task.CreatorPY = creatorPY && creatorPY.length > 0 ? creatorPY[0] : "";
      platTask.value = task.Id;
    },
    toPinyin(str) {
      var self = this,
        arr = [];
      for (var i = 0, len = str.length; i < len; i++) {
        var ch = str.charAt(i);
        arr.push(self.checkChar(ch));
      }
      return self.makePY(arr);
    },
    checkChar: function(ch) {
      var code = ch.charCodeAt(0);
      if (code > 40869 || code < 19968) return ch;
      return polyphonicWord[code]
        ? polyphonicWord[code]
        : hanziFirstChar.charAt(code - 19968);
    },
    makePY(arr) {
      var result = [""],
        str,
        strLen,
        k,
        kLen,
        j;
      for (var i = 0, len = arr.length; i < len; i++) {
        (str = arr[i]), (strLen = str.length);
        if (strLen === 1) {
          for (k = 0, kLen = result.length; k < kLen; k++) {
            result[k] += str;
          }
        } else {
          var tmpStr = result.slice(0);
          result = [];
          for (k = 0; k < strLen; k++) {
            var tmp = tmpStr.slice(0);
            for (j = 0; j < tmp.length; j++) {
              tmp[j] += str.charAt(k);
            }
            result = result.concat(tmp);
          }
        }
      }
      return result;
    },
    containsReservedChars(str) {
      let reservedChar = "/|？|<|>|〈|〉|*|]|[|:|\\",
        reservedChars = reservedChar.split("|");
      let result = false;
      for (let i = 0; i < reservedChars.length; i++) {
        let index = str.indexOf(reservedChars[i]);
        if (index >= 0) {
          result = true;
          break;
        }
      }
      return result;
    },
    taskArrFilter(arrs) {
      let newArrs = [];
      for (let index = 0; index < arrs.length; index++) {
        const tar = {
          key: arrs[index].GlobalTask.Id,
          creater: arrs[index].GlobalTask.Creater,
          creator: arrs[index].GlobalTask.CreaterName,
          title: arrs[index].GlobalTask.Title,
          visible: arrs[index].GlobalTask.Visible,
          groupIds: arrs[index].GroupIds,
          globalTask: arrs[index].GlobalTask,
          IsReleased: arrs[index].IsReleased,
          templateUrl: arrs[index].TemplateUrl
        };
        newArrs.push(tar);
      }
      return newArrs;
    },
    setTagContent(val) {
      switch (val) {
        case '1':
          this.curTagContent = "我创建的";
          break;
        case '2':
          this.curTagContent = "我参与的";
          break;
        case '3':
          this.curTagContent = "最近使用";
          break;
        case '4':
          this.curTagContent = "我收藏的";
          break;
        case '6':
          this.curTagContent = "我隐藏的";
          break;
        default:
          this.curTagContent = "最近使用";
          break;
      }
    },

    onMouseout: function(){
        $(this.$el).find('.vue-scrollbar__scrollbar-vertical').hide();
    },
    onMouseover: function(){
        $(this.$el).find('.vue-scrollbar__scrollbar-vertical').show();
    }
  },
  components: {
    TaskCard,
    VueScrollbar
  }
};
</script>
<style scoped>
.verticalCenter {
  position: absolute;
  margin: 0 auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.mFont13 li.ivu-dropdown-item {
  font-size: 13px !important;
  text-indent: 0px;
}
.taskTitle {
  width: 100%;
  height: 30px;
  font-size: 16px;
  color: #444;
  line-height: 32px;
  border-bottom: none !important;
}
.headerbtn{
  float:right;
  margin-right: 10px;
  text-indent: 0px;
}
/*.-ms-input-placeholder .ivu-input{
  padding:0 8px 8px 8px;
  line-height:30px;
}*/
.-ms-input-placeholder{
   padding:0 8px 8px 8px;
}
</style>
<style>
    .-ms-input-placeholder{
        padding:0 8px 8px 8px;
    }
    .mFont13 li.ivu-dropdown-item {
        font-size: 13px !important;
        text-indent: 0px;
    }
    .taskTitle {
        width: 100%;
        height: 30px;
        font-size: 16px;
        color: #444;
        line-height: 32px;
        border-bottom: none !important;
    }
    .ivu-btn.ivu-btn-small {
        padding: 3px 11px 3px 11px!important;
        font-size: 12px;
        line-height: 16px;
    }
    .searchDiv {
        margin-right: 10px; 
        padding:2px 0px; 
        width: 39px; 
        float:right; 
        height:28px; 
        background:rgba(255,255,255,1);
        border-radius:2px;
        border:1px solid rgba(225,225,225,1); 
        display: inline-block;
    }
    .searchColDiv {
        width:50px; 
        text-align: right; 
        height: 100%; 
        position: relative; 
        padding: 10px 0px;
        float: left;
        flex: 0 0 auto;
    }
    .searchCol{
        width:160px;
    }
</style>

