<template>
  <div class="assets-manage">
    <!-- <div class="arrows" v-if="arrowShow">
      <div class="arrow-l" @mouseover="scroll('l')"><img src="@/assets/images/left.png"></div>
      <div class="arrow-r" @mouseover="scroll('r')"><img src="@/assets/images/right.png"></div>
    </div> -->
    <div class="assets-manage-search">
      <div class="assets-manage-searchFile">
        <span style="font-size:16px;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:rgba(35,35,42,1);margin:0 42px 0 30px;">{{$t('docunments')}}</span>
        <Input class="assets-manage-inputN" v-model="fileName" :placeholder="$t('doc_name')"/>
        <Input class="assets-manage-inputT" v-model="fileType" :placeholder="$t('doc_type')"/>
          <div class="dropdown">
            <Tooltip :content="$t('asc_order')" placement="top" style="height:16px;" >
              <Icon type="md-arrow-dropup" @click="arrowDropup" :style="{'color':dropupStyle}" />
            </Tooltip>
            <Tooltip :content="$t('desc_order')" placement="bottom">
              <Icon type="md-arrow-dropdown"  @click="arrowDropdown" :style="{'color':dropdownStyle}" />
            </Tooltip>
            <!-- <Icon type="md-arrow-dropup" /> -->
            <!-- <Icon type="md-arrow-dropdown" /> -->
            <!-- <Dropdown trigger="click" @on-click="handle_select">
              <Button class="dropdown-btn">{{orderType}}<Icon type="ios-arrow-down"></Icon></Button>
              <DropdownMenu slot="list">
                   <DropdownItem v-for="(item, index) in seqList" :name="index" :key="item.order_type">{{item.name}}</DropdownItem>
              </DropdownMenu>
           </Dropdown> -->
        </div>
        <Button type="primary" @click="search">{{$t('search')}}</Button>
      </div>
    </div>

    <div class="demo-spin-col" v-if="!fileList">
      <Spin fix>
        <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
        <div>{{$t('loading')}}</div>
      </Spin>
    </div>
    <div class="assets-container" ref="assetsContainer">
      <div class="assets-collection">
        <item-card class="assets-collection-item" v-for="(item, index) in fileList" :key="index" :fileData="item" @refresh="search"></item-card>
      </div>
    </div>
    <div class="pagination">
      <Page :total="total" show-elevator show-sizer :page-size="perpage" :page-size-opts="pageOpts" @on-page-size-change='changeSize' @on-change='changePage'/>
    </div>

  </div>
</template>

<script>
import ItemCard from './item-card.vue'
import { GetListFile } from '@/api/data'
import { getToken, scrollTo } from '@/libs/util'
export default {
  components: {
    ItemCard
  },
  data () {
    return {
      fileList: null,
      token: getToken(),
      total: 0,
      fileName: '', // 查询名字
      fileType: '', // 文件类型
      currentOrder: 'desc', // 升序降序
      page: 1, // 分页
      perpage: 12,
      pageOpts: [12, 24, 48, 72, 96, 144],
      dropupStyle: '#F7B500',
      dropdownStyle: '#C2C2C2',
      // orderType: '降序', // 下拉框默认
      // seqList: [ // 选项卡选项
      //   {
      //     name: '降序',
      //     order_type: 'desc'
      //   },
      //   {
      //     name: '升序',
      //     order_type: 'asc'
      //   }
      // ],
      arrowShow: false,
      containerEle: {}
    }
  },
  methods: {
    arrowDropup () {
      this.dropdownStyle = '#C2C2C2'
      this.currentOrder = 'desc'
      this.dropupStyle = '#F7B500'
    },
    arrowDropdown () {
      this.dropupStyle = '#C2C2C2'
      this.currentOrder = 'asc'
      this.dropdownStyle = '#F7B500'
    },
    _initOption () { // 筛选条件初始化
      let file_name = this.fileName
      let file_type = this.fileType
      let order_type = this.currentOrder
      let page = this.page
      let perpage = this.perpage

      // post 参数为空的时候不加入
      let data = { order_type, page, perpage }
      if (file_name) {
        data.file_name = file_name
      }
      if (file_type) {
        data.file_name = file_type
      }
      /* data.file_name ? data.file_name = file_name : null
      data.file_type ? data.file_type = file_type : null */
      return data
    },
    handle_select (index) {
      this.orderType = this.seqList[index].name
      this.currentOrder = this.seqList[index].order_type
    },
    changeSize (size) {
      this.perpage = size
      this.search()
    },
    changePage (page) {
      this.page = page
      this.search()
    },
    search () {
      let data = this._initOption()
      const formdata = new FormData()
      formdata.append('access_token', this.token)
      if (data.file_name) {
        formdata.append('file_name', data.file_name)
      }
      if (data.file_type) {
        formdata.append('sort', data.orderType)
      }
      formdata.append('by', data.order_type)
      formdata.append('page', this.page)
      formdata.append('perpage', this.perpage)
      GetListFile(formdata).then(res => {
        if (res.ret === 200) {
          this.total = res.data.total
          this.fileList = res.data.files
        } else {
          this.$Message.error(res.msg)
        }
      })
    },
    checkWidth () {
      let containerWidth = this.$refs.assetsContainer.clientWidth
      if (containerWidth < 1560) {
        this.arrowShow = true
      }
    },
    scroll (direct) {
      let ele = this.containerEle
      let eleWidth = this.$refs.assetsContainer.clientWidth
      let sLeft = ele.scrollLeft
      if (direct === 'l') {
        scrollTo(ele, sLeft, 0, 1000)
      } else if (direct === 'r') {
        scrollTo(ele, sLeft, eleWidth, 2000)
      }
    }
  },
  created () {
    this.search()
  },
  mounted () {
    this.checkWidth()
    this.containerEle = document.querySelector('.assets-container')
  }

}
</script>

<style lang="less" scpoe>
.assets-manage {
  &-search{
    margin-bottom: 20px;
  }
  // background-color: #fff;
  &-searchFile{
    height:72px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 30px 0px rgba(0,0,0,0.05);
    border-radius:10px;
    display: flex;
    align-items: center;
  }
  &-inputN,&-inputT{
    width: 224px;
  }
  &-inputT{
    margin: 0 20px;
  }
  /* .arrow-l{
      position: fixed;
      top: 400px;
      height: 70px;
      width: 40px;
      background: #112858;
      opacity: 0.6;
      border-radius:  4px;
      z-index: 1999;
      padding-top: 14px;
      img {
        width: 100%
      }

    }

    .arrow-r{
      position: fixed;
      right: 50px;
      top: 400px;
      height: 70px;
      width: 40px;
      background: #112858;
      opacity: 0.6;
      border-radius:  4px;
      z-index: 1999;
      padding-top: 14px;
      img {
        width: 100%
      }
    } */

    /* .arrow-l:hover,.arrow-r:hover {
      opacity: 1;
    } */

  &-input {
    width: 200px;
    margin-right: 10px;
  }
  .dropdown {
    margin-right: 10px;
    font-size: 16px;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .assets-container{
    width: 100%;
    /* overflow-y: hidden;
    overflow-x: scroll; */

    .assets-collection {

       width: inherit;
       display: flex;
       flex-wrap: wrap;
      //  justify-content: space-between;
      margin-left: -1%;
       &-item:nth-child(5n+0) {
         margin-right: 0;
       }
  }

  }

  .pagination {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
  }

  .demo-spin-icon-load{
        margin-bottom: 5px;
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
    }
}

</style>
