<template>
  <div>
    <div style="margin-top:2px; margin-bottom:15px;" class="inline-block-btn-list">
      <!-- <div class="download">批量下载</div> -->
      <el-date-picker
        class="first-element-btn"
        v-model="time_range"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="instantPickerOptions"
        @change="onFiltetime"
      ></el-date-picker>
      <span class="taskType">
        <!-- 超管显示 -->
      <el-select style="width:150px;" v-show="true" v-model="taskTypeNumber" @change="onChangeSlect" v-if="profile.manager_type > 0">
          <el-option
            v-for="item in taskType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <!-- 普通员工显示 -->
          <el-select style="width:150px;" v-show="true" v-model="taskTypeNumber" @change="onChangeSlect" v-else>
          <el-option
            v-for="item in taskperson"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>


        
      </span>


      <div class="gap-right-8" style="display:inline-block; width:310px;">
        <el-input v-show="false"
                  placeholder="输入关键词查找"
                  ref="search-bar"
                  v-model="filter.keyword"
                  class="input-with-select"
                  width="200px"
                  @keyup.enter.native="onFilterChanged"
        >
          <el-button slot="append" icon="el-icon-search" @click="onFilterChanged"></el-button>
        </el-input>
      </div>
    </div>

    <el-table  stripe
               ref="multipleTable" :data="tableData" tooltip-effect="dark"  header-row-class-name="center"  style="width: 100%">
      <!-- <el-table-column type="selection" width="50">
      </el-table-column> -->
      <el-table-column label="名称">
        <template  slot-scope="scope">

          <div>
            <a
              style="display: block; color:#409EFF; text-decoration: underline;"
              @click="fileProview(scope.row.file_info.url)"
            >{{scope.row.file_info.name}}</a>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="大小" width="300">
           <template slot-scope="scope"></template>
      </el-table-column> -->
      <el-table-column prop="address" label="创建者">
        <template slot-scope="scope">{{ scope.row.creator_name}}</template>
      </el-table-column>
      <el-table-column prop="address" label="上传时间" >
        <template slot-scope="scope">{{dateTimeFormatter('','',scope.row.create_time)}}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div>
            <el-button type="text" @click="downloadIamge(scope.row.file_info.url,scope.row.file_info.name)">下载</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total,sizes, prev, pager, next"
      @size-change="handleSizeChange"
      :page-size="pageLimit"
      :page-sizes="[10, 20, 50, 100]"
      :total="totalCount"
      :current-page.sync="currentPage"
      @current-change="changePage"
    ></el-pagination>
  </div>
</template>
<script>
  import Vue from 'vue'
  import qs from 'qs'
  import { getToken } from '@/utils/auth'
  import preview from 'vue-photo-preview'
  import 'vue-photo-preview/dist/skin.css'
  Vue.use(preview, {
    tapToClose: false
  })
  export default {
    components: {

    },
    data() {

      return {
        work: '1',
        taskTypeNumber: 0, //
        task_type: 0,
        taskType: [
          { value: 1, label: '我发布的文件' },
          { value: 2, label: '我参与的文件' },
          { value: 0, label: '我全部的文件' },
        ],

         taskperson: [
          { value: 2, label: '我参与的文件' },
         
        ],

        newname:[],
        Xtoken: { 'X-Token': getToken() },
        profile: this.$store.getters.user_info,
        newtime:'',
        time_range: [],
        filter: {
          // status: [],
          keyword: '',
          //follow_id: 0,
          //creator_id: 0
        },
        totalCount: 19,
        currentPage: 1, // 当前页数
        pageLimit: 10, // 请求条数
        tableData: null,
        isRequest: false,
        loading: false,
        proof_file_list: [],
        task: '普通任务',
        accessEnabled: {
          add: 0,
          delete: 0,
          edit: 0
        },

        instantPickerOptions: {
          shortcuts: [
            {
              text: '本周',
              onClick(picker) {
                const now = new Date(new Date().toLocaleDateString())
                const start =
                  now.getTime() - (now.getDay() - 1) * 24 * 60 * 60 * 1000
                const end = start + 7 * 24 * 60 * 60 * 1000 - 1000
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '上周',
              onClick(picker) {
                const now = new Date(new Date().toLocaleDateString())
                const start =
                  now.getTime() - (now.getDay() + 6) * 24 * 60 * 60 * 1000
                const end = start + 7 * 24 * 60 * 60 * 1000 - 1000
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '本月',
              onClick(picker) {
                const now = new Date()
                const startDate = new Date(now.getFullYear(), now.getMonth(), 1)
                const endDate = new Date(
                  now.getFullYear(),
                  now.getMonth() + 1,
                  0
                )
                picker.$emit('pick', [startDate.getTime(), endDate.getTime()])
              }
            },
            {
              text: '上月',
              onClick(picker) {
                const now = new Date()
                const startDate = new Date(
                  now.getFullYear() - (now.getMonth() > 0 ? 0 : 1),
                  (now.getMonth() + 11) % 12,
                  1
                )
                const endDate = new Date(now.getFullYear(), now.getMonth(), 0)
                picker.$emit('pick', [startDate.getTime(), endDate.getTime()])
              }
            }
          ]
        }
      }

    },
    watch: {
      work(val, old) {
        console.log(val);
      }
    },

    methods: {

    downloadIamge (imgsrc, name) { // 下载图片地址和图片名
      let image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous")
      image.onload = function() {
        let canvas = document.createElement("canvas")
        canvas.width = image.width
        canvas.height = image.height
        let context = canvas.getContext("2d")
        context.drawImage(image, 0, 0, image.width, image.height)
        let url = canvas.toDataURL("image/png") //得到图片的base64编码数据
        let a = document.createElement("a") // 生成一个a元素
        let event = new MouseEvent("click") // 创建一个单击事件
        a.download = name || "photo" // 设置图片名称
        a.href = url // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      }
      image.src = imgsrc
    },
      fileProview(url, list, key) {

        window.open(url)
      },
      dateTimeFormatter: function(row, column, cellValue) {
        return cellValue
          ? this.$moment(cellValue * 1000).format('YYYY-MM-DD HH:mm')
          : ''
      },
      changePage: function(current) {
        if (isNaN(current) || current < 1) {
          return false
        }
        this.loadTaskList()
      },
      onFiltetime() {
        this.filter.start_time = this.time_range[0];
        this.filter.end_time = this.time_range[1];
        this.loadTaskList()
      },
      onChangeSlect() {
        this.task_type = this.taskTypeNumber;
        this.loadTaskList();
      },
      onFilterChanged: function() {
        this.currentPage = 1
        this.loadTaskList()
      },
      loadTaskList() {
        // if(this.profile.manager_type > 0) {

        // }else {
        //   this.task_type = 2;
        // }
        // this.task_type = this.taskType;
        let that = this;
        var params = {
          // site_id: this.profile.site_id,
          page: this.currentPage,
          size: this.pageLimit,
          type: this.task_type
        }

        for (const item in this.filter) {
          const value = this.filter[item]
          if (item == 'status') {
            if (!value || value.length == 0) {
              continue
            }
            params[item] = value
          } else {
            if (value != null) {
              const valueStr = value.toString()
              if (valueStr && valueStr.length > 0) {
                params[item] = valueStr
              }
            }
          }
        }
        this.$http('get','/integral.php/task/new_get_file_list',params)
          .then(function(res) {

            if (res.data.code == 1) {
              that.tableData = res.data.data;
              that.totalCount = res.data.total;
            }
          })
          .catch(function(error) {
            console.log(error)
          })
      },
      handleSizeChange(val) {
        this.pageLimit = val
        this.onFilterChanged()
      },
      // xiazai http://test.g107.net
      dialogTaskOpen(val) {
        let url = val.url;
        console.log(
          'https://view.officeapps.live.com/op/view.aspx?src=' +
          url
        )
        window.open('https://view.officeapps.live.com/op/view.aspx?src=' + url)
      }
    },
    created() {
      this.loadTaskList();
      if (this.profile.manager_type == 4) {
        this.accessEnabled = {
          add: 1,
          delete: 1,
          excel_import: 1,
          edit: 1
        }
      } else if (this.profile.manager_type > 1) {
      }
      if (this.profile.manager_type >0) {
        
      }else {
        this.taskTypeNumber = 2;
      }
    }
  }
</script>
<style>
  .el-tabs--card .el-tabs__header {
    border-bottom: 2px solid #fff!important;
  }
  .inline-block-btn-list {
    padding-top: 26px;
  }
  .download {
    width:88px;
    height:40px;
    background:rgba(91,139,247,1);
    border-radius:4px;
    font-size:14px;
    font-family:PingFangSC;
    font-weight:400;
    color:#fff;
    line-height: 40px;
    text-align: center;
    float: left;
  }

</style>
