<style>
  .googleMap {
    width: 800px;
    height: 350px;
    margin-top: 10px;
  }
</style>
<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="$t('objFill.v101.dmc.gerenphp')" name="first">{{$t('objFill.v101.dmc.gerenphp')}}</el-tab-pane>
            <el-tab-pane :label="$t('objFill.v101.dmc.bumenphb')" name="second">{{$t('objFill.v101.dmc.bumenphb')}}</el-tab-pane>
            <el-tab-pane :label="$t('objFill.v101.dmc.gongsiphb')" name="third">{{$t('objFill.v101.dmc.gongsiphb')}}</el-tab-pane>
        </el-tabs>
        <v-table
            is-horizontal-resize
            column-width-drag
            style="width:100%"
            :columns="columns"
            :table-data="tableData"
            :filter-method="filterMethod"
            :total='total'
            :pageSize='pageSize'
            :pageIndex='pageIndex'
            :handleCurrentChange='handleCurrentChanges'
            @sort-change="sortChange"
            multiple-sort>&lt;!&ndash; {{$t('objFill.v101.dmc.duogepaix')}} &ndash;&gt;
        </v-table>
        <el-button size='mini' @click="exportExcelCurrentPage">{{$t('visa.v_daochu')}}</el-button>
      <!-- <div class="googleMap" id="MapContent">
      </div>
      <div>
        <strong>开始: </strong>
        <select id="start" @change="calcRoute()" v-model="startCity">
          <option value="30.647379,104.09179900000004">东方广场</option>
          <option value="30.6185055,104.0661053">成都凯宾斯基饭店</option>
          <option value="30.6742031,103.99873279999997">金沙万瑞中心</option>
          <option value="30.6988101,104.05426569999997">西南交大</option>
          <option value="30.67416759999999,104.04721970000003">成都永陵博物馆</option>
          <option value="30.6623041,104.09450620000007">四川电视塔</option>
          <option value="30.6303279,104.09371220000003">望江楼</option>
          <option value="30.5226477,104.05806469999993">维也纳森林公园</option>
        </select>
        <strong>{{$t('system.query_dest')}}: </strong>
        <select id="end" @change="calcRoute()" v-model="endCity">
          <option value="30.647379,104.09179900000004">东方广场</option>
          <option value="30.6185055,104.0661053">成都凯宾斯基饭店</option>
          <option value="30.6742031,103.99873279999997">金沙万瑞中心</option>
          <option value="30.6988101,104.05426569999997">西南交大</option>
          <option value="30.67416759999999,104.04721970000003">成都永陵博物馆</option>
          <option value="30.6623041,104.09450620000007">四川电视塔</option>
          <option value="30.6303279,104.09371220000003">望江楼</option>
          <option value="30.5226477,104.05806469999993">维也纳森林公园</option>
        </select>
      </div> -->
    </div>
</template>


<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default{
    name: 'filters',
    data(){
        return {
            tableData: [],
            columns: [
                {field: 'name', title: this.$t('system.query_name'), width: 80, titleAlign: 'left',columnAlign:'left',orderBy:'',isResize:true,  //orderBy排序 asc 升序  desc降序
                    filterMultiple: false,  // 筛选项是否多选
                    filters: [//筛选项  无筛选项 传[{}]
                    {
                        label: this.$t('objFill.v101.dmc.shaixxmx')[0],
                        value: '0',
                    },{
                        label: this.$t('objFill.v101.dmc.shaixxmx')[1],
                        value: '1',
                    },{
                        label: this.$t('objFill.v101.dmc.shaixxmx')[2],
                        value: '2',
                    },
                    {
                        label: this.$t('objFill.v101.dmc.shaixxmx')[3],
                        value: '3',
                    },
                    {
                        label: this.$t('objFill.v101.dmc.shaixxmx')[4],
                        value: '4',
                    }],
                    result:'',  //筛选项默认值  单选传字符串'1'  多选数组 [1,2,2]
                    type:'select',// 筛选项方式 select 下拉 check 单选、多选 text搜索 datetime时间
                    isFrozen:true
                },
                {field: 'gender', title: this.$t('system.table_sex'), width: 50, titleAlign: 'left',columnAlign:'left',orderBy:'',isResize:true,
                    filterMultiple: true,
                    result:[],
                    filters: [{
                        label: this.$t('pub.man'),
                        value: this.$t('pub.man'),
                    }, {
                        label: this.$t('pub.woman'),
                        value: this.$t('pub.woman'),
                    }],
                    type:'check'
                },
                {field: 'hobby', title: this.$t('objFill.v101.dmc.aihao'), width: 150, titleAlign: 'left',columnAlign:'left',isResize:true,result:'',filterMultiple:false,filters: [{}],type:'text'},
                {field: 'dateRange', title: this.$t('pub.date'), width: 150, titleAlign: 'left',columnAlign:'left',isResize:true,result:{},filterMultiple:false,filters: [{}],type:'datetime'},
                {field: 'address', title: this.$t('admin.admin_address'),width: 280, titleAlign: 'left',columnAlign:'left',isResize:true}
            ],
            pageSize:1,
            pageIndex:1,
            total:5,
          map:{},
          directionsService: new google.maps.DirectionsService(),
          directionsDisplay: new google.maps.DirectionsRenderer(),
          startCity:'',
          endCity: ''
        }
    },
    methods: {

        exportExcelCurrentPage(){
                    //待实现
                    let xlsxName='测试下载'
                    let dataSource=this.getTableData()
                    let wscols={}
                    wscols=[{wpx: 40}, {wpx: 100}, {wpx: 120},{wpx: 100}, {wpx: 150},{wpx: 250}]
                    let data=[]
                    data.push(['编号','姓名','性别','爱好','日期','地址'])
                    dataSource.forEach(x=>{
                        let obj=[]
                        obj.push(x.id+" ")
                        obj.push(x.name)
                        obj.push(x.gender)
                        obj.push(x.hobby)
                        obj.push(x.dateRange)
                        obj.push(x.address)
                        data.push(obj)
                    })
                    const ws = XLSX.utils.aoa_to_sheet(data)
                    ws['!cols'] = wscols
                    ws['!rows'] =[{ hpx:20 },{ hpx:20 },{ hpx:20 },{ hpx:20 },{ hpx:20 },{ hpx:20 }]
                    const wb = XLSX.utils.book_new()
                    XLSX.utils.book_append_sheet(wb, ws, xlsxName)
                    var dataInfo = wb.Sheets[wb.SheetNames[0]];

                    // dataInfo["A1"].v = district + '广播电视安全播出监管中心'; //设置表格标题
                    // dataInfo["A2"] = {v: titleName}; //设置表格标题
                    // dataInfo["A3"] = {v: '日期：' + time}; //设置表格日期
                    // dataInfo["B4"] = {v: condition}; //设置筛选条件
                    let colName=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']
                    data[0].forEach((x,i)=>{
                        dataInfo[colName[i]+'1'].s={
                             font: {
                                name: '微软雅黑',
                                sz: 14,
                                color: "#fe0035",
                                bold: true,
                                italic: true,
                                underline: true
                            },
                            alignment: {
                                horizontal: "center",
                                vertical: "center"
                            }
                        }
                    })
                    XLSX.writeFile(wb, xlsxName + ".xlsx")
        },
        sortChange(param){
            //自己写实现
            //{gender:"",name:"asc"}
        },
        // 数据筛选
        filterMethod(filters){
            let tableData = this.getTableData();
            if (filters.gender && filters.gender.length>0){

                tableData = tableData.filter(item =>  filters.gender.indexOf(item.gender)!=-1)
            }
            if (filters.name!='' && filters.name!='-1'){
                if(!Array.isArray(filters.name))
                    tableData = tableData.filter(item => filters.name==item.id);
                else
                    tableData = tableData.filter(item => filters.name==item.id);
            }
            if (filters.hobby!=''){
                tableData = tableData.filter(item => item.hobby.indexOf(filters.hobby)!=-1);
            }
            if(filters.dateRange.beginDate){
                tableData = tableData.filter(item => new Date(filters.dateRange.beginDate).getTime()<=new Date(item.dateRange).getTime());
            }
            if(filters.dateRange.endDate){
                tableData = tableData.filter(item => new Date(filters.dateRange.endDate).getTime()>=new Date(item.dateRange).getTime());
            }
            this.pageIndex = 1
            this.total=tableData.length
            this.tableData = tableData.filter((item,index)=>index==0);
        },
        handleCurrentChanges(val){
            this.pageIndex=val
            this.tableData = this.getTableData().filter((item,index)=>index==val-1);
        },
        getTableData(){
            return [
                {"id":0,"name":"赵伟","gender":"女","hobby":"钢琴、书法、唱歌","dateRange":"2018-11-22","address":"上海市黄浦区金陵东路569号17楼"},
                {"id":1,"name":"李伟","gender":"女","hobby":"钢琴、书法、唱歌","dateRange":"2018-11-23","address":"上海市奉贤区南桥镇立新路12号2楼"},
                {"id":2,"name":"孙伟","gender":"男","hobby":"钢琴、书法、唱歌","dateRange":"2018-11-24","address":"上海市崇明县城桥镇八一路739号"},
                {"id":3,"name":"周伟","gender":"女","hobby":"钢琴、书法、唱歌","dateRange":"2018-11-25","address":"上海市青浦区青浦镇章浜路24号"},
                {"id":4,"name":"吴伟","gender":"男","hobby":"钢琴、书法、唱歌、造作","dateRange":"2018-11-26","address":"上海市松江区乐都西路867-871号"}
            ]
        },
        calcRoute: function() {
          let _this = this;
          var start = _this.startCity;
          var end = _this.endCity;
          var request = {
            origin:start,
            destination:end,
            travelMode: google.maps.TravelMode.DRIVING,
            waypoints: [{location:"30.5226477,104.05806469999993"},{location:"30.67416759999999,104.04721970000003"}]
          };
          _this.directionsService.route(request, function(result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              _this.directionsDisplay.setDirections(result);
            }
          });
        },
        initialize: function() {
          let _this = this;
          let directionsDisplay;
          let map;
          _this.directionsDisplay = new google.maps.DirectionsRenderer();
          let chengdu = new google.maps.LatLng(30.6574389,104.06592380000006);
          let geocoder = new google.maps.Geocoder();
          let mapOptions = {
            zoom:14,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: chengdu
          };
          _this.map = new google.maps.Map(document.getElementById("MapContent"), mapOptions);
          _this.directionsDisplay.setMap(_this.map);
          google.maps.event.addListener(_this.map, 'click', function (event) {  // 地图点击事件 获取经纬度
            geocoder.geocode({ 'location': event.latLng }, function (results, status) {
              if (status == google.maps.GeocoderStatus.OK) {
              } else {
              }
            });
          });
        }
    },

    created(){
        this.tableData = this.getTableData().filter((item,index)=>index==0);
    },

    mounted () {
      let items = [];
      let item = {};
      item['lat'] = parseFloat("30.6574389");
      item['lng'] = parseFloat("104.06592380000006");
      items[0] = item;
      let listData = items;
      let LatLng = new google.maps.LatLng(listData[0].lat, listData[0].lng);
      let map_id = document.getElementById("MapContent");
      this.initialize()
    }
}
</script>
