<template>
  <div>
    <Row>
      <!--操作-->
      <Col span="24" style="margin-bottom: 10px">
        <div class="btns-menu">
          <!--查看方式-->
          <Select v-model="viewVal" @on-change="_view" style="width:150px" placeholder="请选择查看方式">
            <Option v-for="item in checkList" :key="item.value" :value="item.value">{{ item.name }}</Option>
          </Select>
          <!--表格-->
          <Button v-for="item in menusList" :key="item.name" @click="_tableChange(item.value)"
                  v-if="viewStyle === 1" type="ghost" style="margin-right: 5px">&nbsp;{{item.name}}
          </Button>
        </div>
      </Col>

      <Col span="24">
        <!-- 默认是详细模式 -->
        <div v-if="viewStyle === 1">
          <el-table
            :data="getPage.records"
            :height="tableHeight"
            v-loading="loading"
            @select-all="_selectAll"
            @selection-change="_selectRowChange"
            :row-class-name="_tableRowClassName"
            stripe
            border
            size="small"
            style="width: 100%"
          >
            <el-table-column
              type="selection"
              width="55"
              fixed="left"
              align="center">
            </el-table-column>
            <el-table-column
              :prop="item.key"
              :label="item.title"
              :width="item.width"
              :min-width="200"
              v-for="item in pageColumns"
              :key="item.key" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="item.dateTime">{{scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd HH:MM:ss'):''}}</span>
                <span v-else>{{scope.row[item.key]}}</span>
              </template>
            </el-table-column>
            <el-table-column
              title="操作"
              align="center"
              width="100"
              fixed="right">
              <template slot-scope="scope">
                <IconList :msg="(scope.row['type'] === 'jpg' || scope.row['type'] === 'png')?iconMsg:iconMsgDis"
                          @on-result-change="_iconClick" :rowData="scope.row"></IconList>
              </template>
            </el-table-column>
          </el-table>
          <Page :total="getPage.total" :page-size="getPage.size" :current="getPage.current" @on-change="_pageChange"
                @on-page-size-change='_pageSizeChange'
                placement="top" show-elevator show-total show-sizer style="margin-top: 10px;"></Page>
        </div>
        <!--/-->
        <!--缩略图 模式-->
        <div v-else-if="viewStyle === 2">
          <ul :style="{ 'height': tableHeight + 'px' }" class="thumbnailStyle">
            <CheckboxGroup @on-change="_chkVal" v-model="selectIds">
              <li v-for="item in getPage.records" :key="item.id">
                <div class="thumbnailStyleImg">
                  <Tooltip placement="top">
                    <img :src=" bigUrl+item.type+'.png' "/>
                    <div slot="content" style="white-space: normal">
                      <p>名称：{{item.fileName}}</p>
                    </div>
                  </Tooltip>
                </div>
                <div class="thumbnailStyleCheck clearCheck">
                  <Checkbox :label="item.id"><span class="inline-span" style="display: inline">{{item.fileName}}</span>
                  </Checkbox>
                </div>
              </li>
            </CheckboxGroup>
          </ul>
          <div style="margin-top: 10px">共 {{getPage.total}} 条</div>
        </div>
        <!--/-->
        <!--列表 模式-->
        <div v-else="viewStyle === 3">
          <ul :style="{ 'height': tableHeight + 'px' }" class="listStyle">
            <CheckboxGroup @on-change="_chkVal" v-model="selectIds">
              <li v-for="item in getPage.records" :key="item.id">
                <div class="listStyleCheck clearCheck">
                  <Tooltip placement="top">
                  <span class="spanImg">
                    <img :src=" smallUrl+item.type+'.png' "/>
                  </span>
                    <span>
                    <Checkbox :label="item.id"><span>{{item.fileName}}</span></Checkbox>
                  </span>
                    <div slot="content" style="white-space: normal">
                      <p>名称：{{item.fileName}}</p>
                    </div>
                  </Tooltip>
                </div>
              </li>
            </CheckboxGroup>
          </ul>
          <div style="margin-top: 10px">共 {{getPage.total}} 条</div>
        </div>
        <!--/-->
      </Col>
    </Row>
    <!--图片预览-->
    <div>
      <vue-gallery-slideshow :images="imgViewList" :index="imgViewIndex"
                             @close="imgViewIndex = null"></vue-gallery-slideshow>
    </div>
  </div>
</template>
<script>
import VueGallerySlideshow from 'vue-gallery-slideshow'
import ElementTable from '../../table/ElementTable'
import IconList from '../../base/IconList'
import global from '../../../api/config'
import { http } from '../../../api/http'

export default {
  components: { ElementTable, IconList, VueGallerySlideshow },
  data() {
    return {
      loading: false,
      iconMsg: [
        { type: 'ios-download', id: '', name: '下载' },
        { type: 'images', id: '', name: '预览' }
      ],
      iconMsgDis: [
        { type: 'ios-download', id: '', name: '下载' },
        { type: 'images', id: '', name: '预览', disabled: true }
      ],
      selectIds: [],
      getPage: {},
      pageParams: {
        rows: 20
      },
      pageColumns: [
        { title: '文件名', key: 'fileName' },
        { title: '类型', key: 'type', width: 120 },
        { title: '上传时间', key: 'ctime', width: 140, dateTime: true }
        // {title: '上传人', key: 'cname', width: 120},
      ],
      viewVal: 1,
      viewStyle: 1,
      menusList: [{ name: '下载', value: 'down' }],
      checkList: [
        { name: '详细模式', value: 1 },
        { name: '缩略图模式', value: 2 },
        { name: '列表模式', value: 3 }
      ],
      Ids: [],
      smallUrl: global.staticURL + '/img/smallfile/',
      bigUrl: global.staticURL + '/img/bigfile/',
      imgViewList: [],
      imgViewIndex: null,
      id: '',
      objectKey: [],
      idKey: '', // 判断是哪种附件（合同、委托、样品）
      checkData: []
    }
  },
  computed: {
    tableHeight: function() {
      return this.$tableHeight('tableModal')
    }
  },
  methods: {
    _iconClick(res, data) {
      switch (res) {
        case '下载':
          this._download(data.id)
          break
        case '预览':
          this._viewImg(data)
          break
      }
    },
    // 预览图片（该合同下所有的）
    _viewImg(data) {
      let uri = ''
      let viewUri = ''
      switch (this.idKey) {
        case 'contractId':
          uri = 'FoodContractAttachment/getByContractId'
          viewUri = 'contract_attachment/view'
          break
        case 'sampleId':
          uri = 'FoodSampleAttachment/getBySampleId'
          viewUri = 'sample_attachment/view'
          break
      }
      this.$store.dispatch(uri, this.id).then(() => {
        let result = ''
        if (this.idKey === 'contractId') {
          // 委托
          result = this.$store.state.FoodContractAttachment.list
        } else if (this.idKey === 'sampleId') {
          // 样品
          result = this.$store.state.FoodSampleAttachment.list
        } else {
        }
        const imgViewList = []
        for (let i = 0; i < result.length; i++) {
          imgViewList.push(
            global.baseURL +
              '/food/v1/' +
              viewUri +
              '?id=' +
              result[i].id +
              '&objectKey=' +
              result[i].objectKey
          )
        }
        this.imgViewList = imgViewList
        // 打开的是当前第几张图片
        const salesUri =
          global.baseURL +
          '/food/v1/' +
          viewUri +
          '?id=' +
          data.id +
          '&objectKey=' +
          data.objectKey
        const index = this.imgViewList.findIndex(item => item === salesUri)
        if (index === -1) {
          this.imgViewIndex = 0
        } else {
          this.imgViewIndex = index
        }
      })
    },
    _fileViewData(data, idKey) {
      this.idKey = idKey
      this.id = data.id
    },
    _open(data, height) {
      this.getPage = data
      this.tableHeight = height
      this.selectIds = []
      this.imgViewIndex = null
    },
    _pageChange(page) {
      this.$emit('on-result-change', 'page', page)
    },
    _selectRowChange(data) {
      this.checkData = data
      const idList = []
      const objectKey = []
      for (let i = 0; i < data.length; i++) {
        idList.push(data[i].id)
        objectKey.push(data[i].objectKey)
      }
      this.Ids = idList
      this.objectKey = objectKey
    },
    _selectAll: function(data) {
      this._selectRowChange(data)
    },
    _pageSizeChange(rows) {
      this.$emit('on-result-change', 'rows', rows)
    },
    // 下载
    _download(id) {
      this.$emit('on-result-change', 'down', id)
    },
    // 查看方式改变
    _view(val) {
      this.viewStyle = val
      this.selectIds = []
    },
    _chkVal(val) {
      this.selectIds = val
    },
    // 一系列操作返回的值
    _tableChange(val) {
      if (val == 'down') {
        if (this.objectKey.length === 0) {
          this.$Message.warning('请选择一条数据!')
        } else {
          this._downloadAll(this.objectKey)
        }
      }
    },
    // 批量打包下载
    _downloadAll(ids) {
      let uri = ''
      switch (this.idKey) {
        case 'contractId':
          uri = '/food/v1/contract_attachment/download_batch'
          break
        case 'sampleId':
          uri = '/food/v1/sample_attachment/download_batch'
          break
      }
      window.open(global.baseURL + uri + '?objectKeys=' + ids)
    }
  }
}
</script>
