<template>
  <div>
    <el-row>
      <!--操作-->
      <el-col :span="24" style="margin-bottom: 10px">
        <div class="btns-menu">
          <!--查看方式-->
          <Select v-model="viewVal" style="width:150px" placeholder="请选择查看方式" @on-change="_view">
            <Option v-for="item in checkList" :key="item.value" :value="item.value">
              {{ item.name }}
            </Option>
          </Select>
          <!--一系列操作-->
          <span v-if="viewStyle === 2 || viewStyle === 3">
            <Button v-for="item in menusList" :key="item.name" @click="_radioChange">
              <Icon :type="item.type" />&nbsp;{{ item.name }}
            </Button>
          </span>

          <span v-if="viewStyle === 1">
            <Button v-for="item in menusList" :key="item.name" @click="_tableChange">
              <Icon :type="item.type" />&nbsp;{{ item.name }}
            </Button>
          </span>
        </div>
      </el-col>

      <el-col :span="24" style="margin-bottom: 10px">
        <!-- 默认是详细模式 -->
        <div v-if="viewStyle === 1">
          <element-table
            ref="pageTable"
            :table-height="300"
            :get-page="getPage"
            :icon-msg="iconMsg"
            show-check-box
            opt-col-width="100"
            @on-result-change="_tableResultChange"
          >
            <el-table-column
              v-for="item in pageColumns"
              :key="item.key"
              show-overflow-tooltip
              sortable
              :prop="item.key"
              :label="item.title"
              :min-width="item.width"
              :fixed="item.fixed?item.fixed:undefined"
            >
              <template slot-scope="scope">
                {{ scope.row[item.key] }}
              </template>
            </el-table-column>
          </element-table>
        </div>
        <!--/-->
        <!--缩略图 模式-->
        <div v-else-if="viewStyle === 2">
          <ul class="thumbnailStyle" :style="{ 'height': tableHeight + 'px' }">
            <CheckboxGroup v-model="selectIds" @on-change="_chkVal">
              <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>
          <ul class="listStyle" :style="{ 'height': tableHeight + 'px' }">
            <CheckboxGroup v-model="selectIds" @on-change="_chkVal">
              <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>
      <!--/-->
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { qcSubPlanAttachment } from '../../../../api'
import global from '../../../../api/config'
export default {
  components: {},
  data() {
    return {
      selectIds: [],
      getPage: {},
      pageColumns: [{ title: '文件名', key: 'fileName' }],
      viewVal: 1,
      viewStyle: 1,
      menusList: [{ name: '下载', value: 'down', type: 'md-download' }],
      Ids: [],
      formObj: {},
      checkList: [
        { name: '详细模式', value: 1 },
        { name: '缩略图模式', value: 2 },
        { name: '列表模式', value: 3 }
      ],
      smallUrl: global.staticURL + '/img/smallfile/',
      bigUrl: global.staticURL + '/img/bigfile/',
      tableHeight: '300',
      iconMsg: [{ type: 'pt-download', id: '', name: '下载' }]
    }
  },
  methods: {
    _open(formObj) {
      this.formObj = formObj
      this._formSearch()
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _page: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await qcSubPlanAttachment.page(
        this.$serializeForm(this.formObj)
      )
      if (result) {
        this.getPage = result
        this.$refs.pageTable._initTable()
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this._page()
          break
        case 'selectIds':
          this.selectIds = data
          this.Ids = data
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData)
          break
      }
    },
    _iconClick(res, data) {
      switch (res) {
        case '下载':
          this._download(data.id)
          break
      }
    },
    _download(id) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定要下载？',
        onOk: () => {
          window.open(
            global.baseURL + '/res/v1/qc_sub_plan_attachment/download/' + id,
            '_blank'
          )
        }
      })
    },
    // 查看方式改变
    _view(val) {
      this.viewStyle = val
      this.selectIds = []
    },
    _chkVal(val) {
      this.selectIds = val
    },
    // 一系列操作返回的值
    _radioChange(val) {
      if (this.selectIds.length === 0) {
        this.$message.warning('请至少选择一条数据!')
      } else {
        this._downloadBatch(this.selectIds)
      }
    },
    _tableChange(val) {
      if (this.Ids.length === 0) {
        this.$message.warning('请至少选择一条数据!')
      } else {
        this._downloadBatch(this.Ids)
      }
    },
    _downloadBatch(ids) {
      window.open(
        global.baseURL +
          '/res/v1/qc_sub_plan_attachment/download_batch?attachmentIds=' +
          ids
      )
    }
  }
}
</script>
