<template>
  <div id="todoList">
    <van-button type="primary" @click="submit" class="submit">主要按钮</van-button>
    <!-- <van-search
      v-model="keywords"
      placeholder="请输入编码或名称"
      show-action
      @search="onSearch"
      class="hightSearch"
    >
      <i slot="left-icon" class="fa fa-search"></i>
      <template slot="action">
        <div class="font14 float-l common" @click="onSearch">搜索</div>
        <div class="font14 float-l common" @click="onSearch2">高级</div>
      </template>
    </van-search>

    <van-search
      v-model="keywords"
      placeholder="请输入编码或名称"
      show-action
      @search="onSearch"
    >
      <i slot="left-icon" class="fa fa-search"></i>
      <template slot="action">
      <div class="font14 float-l common" @click="onSearch">搜索</div>
      </template>
    </van-search>
    <search-post v-model="showRightDialog"></search-post> -->

    <!-- tab部分 -->
    <!-- <van-tabs v-model="activeName" :line-width="40" :line-height="2" :swipeable="true">
      <van-tab title="标签比" name="a">内容 1</van-tab>
      <van-tab title="标签 2" name="b">内容 2</van-tab>
      <van-tab title="标签 3" name="c">内容 3</van-tab>
    </van-tabs>

    <time-choose @confirm="confirm"></time-choose>

    <div>开始时间 {{time.start}}</div>
    <div>结束时间 {{time.end}}</div> -->

   <!-- <div style="display: flex;
    flex-direction: row;
    flex-wrap: wrap;">
      <div v-for="item in (1,10)" style="display:inline-block;width:25%;text-align:center;">
      <div style="background-color:red;width:45px;height: 45px;
    border-radius: 45px;margin:0 auto;">img</div>
      <div>title</div>
    </div>
   </div> -->
   <div class="listContent">
      <van-row>
        <van-col style="text-align: right;word-break: break-all;" span="24">
          <span>{{value}}</span>
        </van-col>
      </van-row>
   </div>
   <div class="maMapView">
<!--     <map-view/>-->
     <CanvasTestItem />
   </div>
  </div>
</template>

<script>

import SearchPost from '@/components/SearchPost.vue'
import TimeChoose from '@/components/TimeChoose.vue'
import MapView from '@/components/MapView.vue'
import { GetQueryStringCookie } from '@/utils/common'
import CanvasTestItem from './components/CanvasTestItem'
export default {
  name: 'TodoList',
  components: {
    CanvasTestItem,
    SearchPost,
    TimeChoose,
    MapView
  },
  data() {
    return {
      showRightDialog: false,
      time: {
        start: '',
        end: ''
      },
      value: ''
    }
  },
  mounted() {
    // 设置标题栏关闭返回按钮
    // 设置标题栏关闭返回按钮
    this.$store.commit('setNavBar', {
      title: '列表',
      show: true,
      leftArrow: true
    })
    if (this.$route.query.leftShow === 'show') {
      this.leftShow = true
    } else {
      this.leftShow = false
    }
    // 给window添加一个popstate事件，拦截返回键，执行this.onBrowserBack事件，addEventListener需要指向一个方法
    window.addEventListener('popstate', this.onBrowserBack, false)
    this.testAction()
  },
  destroyed() {
    // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
    window.removeEventListener('popstate', this.onBrowserBack, false)
  },
  methods: {
    testAction() {
      // let str1 = 'DfCdS8vV9wZD5AT+nIElSnfH/C3i0trk56GxaClzOyUnf7GcbwsEn3ED98R4nq/qbP+5w6FThKC2Sv1EUl9f6BDWjY3J6Qsi+mF709Msdg0WuHtBnFePLWKAVlDT9HrzcHzk7PBAphSoBn4NDkqyg8P7RGQ9O5efYDRp25DgB8tR/9ktQkM5+EiHyQEYoN4r3Wkyrli0fq7dqSjR705DkQSSZaRbCrtf9CMwAF6lfRt+d4NUCa8k/f1bb8VNgUIMUchxNiD6uMBj/12UDCXT9+jKAKb+aofy4vCSMiawRDlR2Qq1GfKeclfW62+rqa+wm+k/dVbAen3xeHUduj7vf3qQWZUc6SCt6YjE2uvB1jIQqWEx3gl6KudbP4j/yw2lzDh1RKvBJ917/R+ZJcU8feiily0xaJVyT/yybbnhrDIB9XWzFm/Kx+nTViMCqPKTxqW6B0hVcbKazeZMkxZhfg2dDOoC8QBeY0btsURvqI4PCeDXqOG9SesceEmn+tq9TDKruOyOptP+SXl4Nf5iCIhXQ6aYXMz5sy/fIm8jqUAbolqoWxywU0hbhLOyCmpA+HnKZ+nV871ak2CMRGMKjuqNU0QZHUAKs1BHNKl520Boi7cc879xTidBkBGOiUTMMncI6USuIrfiD+WzKjr6NUNSoAGbAHMgwpC5ztb/O/dyJ1YVmJD7Yg/ZYjglxqQoNsNxQlNzaVnhTrSit8IUITgvIseN4wBsGMEg8fw4ni93yqt/oAe7AECuOR7Plg8rdZ33DmQcB/l/K90+C+Sx4OJpd3lfcu5ruPNOBJ3kE+AKHPqelv69WO0pAbV8rdWUJ2q4rZ2006Y+5xLkI25Uxe+DBJ6e0h5hE/hB+BUr3yONrsg1iMGIayJqLBD3EILO0cVP8rIyQXeKyDRgHWa1lzI0Ssel9cz3FvNCnFSFQ1m/WHTpwP1G0ESOHKfWYb9D/MosXTqmHaK6p+Kvlic289G1KiKmTsDxQlfMpwdnt1AXVYAdavHItMpFWSVQbTaur2xHoLR8wOsJBeGCQMFHSVk6SP6P7CHgC6UoG4kvO6Nh7qbra9UEvzdPYPaQ0JoOdt8UXU8gzJZ6WeAvHhCqhUMfdO5plHcQnhUmLkDZNO1UHfJLJzFBVWDTPYh5hdR6NLDsrKC1vWPqQTuptbLUZ4bwrdg3F3Bna5M1eMjMpXki5zAS084+h/9x1PssLNb0AQrmUb6++V7wKyOC8xuauUEpXBbA9+s7KEmkTM77W6BL79QQBoeyt5/5uldeNzkrSZlA9PEpN+59dfPqWtp4h9XPJ4LWskkHX5o4+UsNUozwbetcXWEmw60h3UHxVytc'
      // localStorage.setItem('info', str1)
      // console.log(localStorage.getItem('info'))
      // this.value = localStorage.getItem('info')
      // this.setCookie('info','1',1)

      // this.value = GetQueryStringCookie('sysOrgName')
    },

    submit () {
      console.log('提交菜单')
      this.showRightDialog = true
    },
    confirm (data) {
      this.time = data
    },
    onSearch2 () {
      console.log(2222)
    },
    onSearch () {
      console.log(1111)
    }
  }
}
</script>

<style lang="scss" scoped>
  #todoList{
    background: #19c2fa;
    .listContent {
      background: white;
      margin:0px 13px;
      padding: 2px 14px 2px 14px;
      /deep/ .van-row {
        padding-top: 6px;
        padding-bottom: 6px;
      }
    }
  }
</style>
