<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 type="ghost">
            <Upload
              :action="action"
              :on-success="_handelsuccess"
              :before-upload="_beupload"
              :on-progress="_handelprogress"
              :data="dataObj"
              :with-credentials="true"
              :show-upload-list="false"
            >&nbsp;上传
            </Upload>
          </Button>

          <!--一系列操作-->
          <RadioGroup @on-change="_radioChange" v-if="viewStyle === 2 || viewStyle === 3" type="button"
                      class="radio-display">

            <Radio :label="item.value" v-for="item in menusList" :key="item.name">&nbsp;{{item.name}}
            </Radio>
          </RadioGroup>
          <RadioGroup @on-change="_tableChange" v-if="viewStyle === 1" type="button" class="radio-display">
            <Radio :label="item.value" v-for="item in menusList" :key="item.name">&nbsp;{{item.name}}
            </Radio>
          </RadioGroup>
        </div>
      </Col>

      <Col span="24" style="margin-bottom: 10px">
        <!-- 默认是详细模式 -->
        <div v-if="viewStyle === 1">
          <el-table
            ref="moveTable"
            :data="getPage.records"
            :height="tableHeight"
            v-loading="loading"
            @select-all="_selectAll"
            @selection-change="_selectRowChange"
            @cell-click="_cellClick"
            :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"
              v-for="item in pageColumns"
              :key="item.id"
              show-overflow-tooltip sortable>
            </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>
    <!--上传loading-->
    <div v-show="isLoad">
      <Spin fix>
        <Icon type="load-c" size=18 class="file-spin-icon-load"></Icon>
        <div>正在上传,请稍后...</div>
      </Spin>
    </div>
    <!--图片预览-->
    <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'

export default {
  components: { ElementTable, IconList, VueGallerySlideshow },
  data() {
    return {
      imgViewList: [],
      imgViewIndex: null,
      loading: false,
      iconMsg: [
        { type: 'trash-a', id: '', name: '删除' },
        { type: 'ios-download', id: '', name: '下载' },
        { type: 'images', id: '', name: '预览' }
      ],
      iconMsgDis: [
        { type: 'trash-a', id: '', name: '删除' },
        { type: 'ios-download', id: '', name: '下载' },
        { type: 'images', id: '', name: '预览', disabled: true }
      ],
      heightSearch: '',
      selectIds: [],
      getPage: {},
      pageParams: {
        rows: 20
      },
      pageColumns: [
        { title: '文件名', key: 'fileName' },
        { title: '类型', key: 'type', width: 120 }
      ],
      viewVal: 1,
      viewStyle: 1,
      menusList: [
        { name: '下载', value: 'down' },
        { name: '删除', value: 'delete' }
      ],
      checkList: [
        { name: '详细模式', value: 1 },
        { name: '缩略图模式', value: 2 },
        { name: '列表模式', value: 3 }
      ],
      Ids: [],
      smallUrl: global.staticURL + '/img/smallfile/',
      bigUrl: global.staticURL + '/img/bigfile/',

      action: '',
      dataObj: {
        file: '',
        contractId: ''
      },
      isLoad: false, // 是否显示loading...
      contractId: '', // 合同id
      checkData: []
    }
  },
  computed: {
    tableHeight: function() {
      return this.$tableHeight('tableModal')
    }
  },
  methods: {
    // 整行变色
    _tableRowClassName({ row, rowIndex }) {
      if (this.checkData.length !== 0) {
        /* 选中的进行高亮显示 */
        const index = this.checkData.indexOf(row)
        if (index !== -1) {
          return 'high-light-row'
        }
      } else {
        /* 没选中的根据页面逻辑变色 */
      }
    },
    // 点击单元格触发
    _cellClick(row, event, column) {
      if (event.label !== '操作') {
        this.checkData = [row]
        this.$refs.moveTable.toggleRowSelection(row)
      }
    },
    _iconClick(res, data) {
      switch (res) {
        case '下载':
          this._download(data.id)
          break
        case '删除':
          this._deleteById(data.id)
          break
        case '预览':
          this._viewImg(data)
          break
      }
    },
    // 预览图片（该合同下所有的）
    _viewImg(data) {
      this.$store
        .dispatch('EnvContractAttachment/getByContractId', this.contractId)
        .then(() => {
          const result = this.$store.state.EnvContractAttachment.list
          const imgViewList = []
          for (let i = 0; i < result.length; i++) {
            imgViewList.push(
              global.baseURL +
                '/env/v1/env_contract_attachment/view?id=' +
                result[i].id +
                '&objectKey=' +
                result[i].objectKey
            )
          }
          this.imgViewList = imgViewList
          // 打开的是当前第几张图片
          const salesUri =
            global.baseURL +
            '/env/v1/env_contract_attachment/view?id=' +
            data.id +
            '&objectKey=' +
            data.objectKey
          const index = this.imgViewList.findIndex(item => item === salesUri)
          if (index === -1) {
            this.imgViewIndex = 0
          } else {
            this.imgViewIndex = index
          }
        })
    },
    _open(data, height) {
      this.getPage = data
      this.tableHeight = height
      this.selectIds = []
      this.imgViewIndex = null
    },
    _setUploadData(data) {
      this.isLoad = false
      this.contractId = data.id
      this.action = global.baseURL + data.uploadFileUrl + data.id
    },
    _pageChange(page) {
      this.$emit('on-result-change', 'page', page)
    },
    _selectRowChange(data) {
      this.checkData = data
      const idList = []
      for (let i = 0; i < data.length; i++) {
        idList.push(data[i].id)
      }
      this.Ids = idList
    },
    _selectAll: function(data) {
      this._selectRowChange(data)
    },
    _pageSizeChange(rows) {
      this.$emit('on-result-change', 'rows', rows)
    },
    // 删除
    _deleteById(id) {
      this.$emit('on-result-change', 'delete', id)
    },
    // 下载
    _download(id) {
      this.$emit('on-result-change', 'down', id)
    },
    // 查看方式改变
    _view(val) {
      this.viewStyle = val
      this.selectIds = []
    },
    _chkVal(val) {
      this.selectIds = val
    },
    // 一系列操作返回的值
    _radioChange(val) {
      if (val == 'down') {
        if (this.selectIds.length === 0) {
          this.$Message.warning('请选择一条数据!')
        } else if (this.selectIds.length > 1) {
          this.$Message.warning('只能选择一条数据下载!')
        } else {
          this._download(this.selectIds[0])
        }
      }
      if (val == 'delete') {
        if (this.selectIds.length === 0) {
          this.$Message.warning('请选择一条数据!')
        } else {
          this._deleteById(this.selectIds)
        }
      }
    },
    _tableChange(val) {
      if (val == 'down') {
        if (this.Ids.length === 0) {
          this.$Message.warning('请选择一条数据!')
        } else if (this.Ids.length > 1) {
          this.$Message.warning('只能选择一条数据下载!')
        } else {
          this._download(this.Ids[0])
        }
      }
      if (val == 'delete') {
        if (this.Ids.length === 0) {
          this.$Message.warning('请选择一条数据!')
        } else {
          this._deleteById(this.Ids)
        }
      }
    },

    _beupload(file) {
      this.dataObj.file = file.name
    },
    _handelprogress(event, file, fileList) {
      this.isLoad = true
    },
    _handelsuccess(response, file, fileList) {
      // 上传成功
      if (response.success) {
        this.isLoad = false
        this.$Message.success('上传成功！')
        this.$emit('on-result-change', 'refresh')
      } else {
        this.isLoad = true
        this.$Message.error(response.msg)
      }
    }
  }
}
</script>
<style>
.radio-display.ivu-radio-group-button .ivu-radio-wrapper:first-child {
  border-radius: 4px !important;
  margin-right: 5px !important;
}

.radio-display.ivu-radio-group-button .ivu-radio-wrapper:last-child {
  border-radius: 4px !important;
  border-left: 1px solid #dddee1 !important;
}
</style>
