<template>
  <div class="apply-app-outer">
    <div class="apply-app-container">
      <div class="apply-toolbar">
        <Row span="24">
          <SearchInput
            :value.sync="searchText"
            @on-clear="clearSearch"
            @on-click="searchByKeyword"
            :width="260"
          />
        </Row>
      </div>
      <div>
        <!-- LiuKexin 20210318 调整高度 -->
        <Table
          border
          tooltip="true"
          :columns="columns"
          :data="list"
          :loading="loading"
          :height="tableheight-70"
          @on-selection-change="onSelect"
        >
          <template slot-scope="{ row, index }" slot="operate">
            <ButtonGroup>
              <Button
                class="operate-button"
                @click.stop="download(row, index)"
              >
                <span class="fa fa-download" title="下载文件"></span>
              </Button>
            </ButtonGroup>
          </template>
        </Table>
        <Page
          style="float:left;padding:10px;width:100%;background-color:#fff"
          :total="total"
          :current="page_sum"
          :page-size="page_size"
          :page-size-opts="[10, 20, 50, 100]"
          @on-change="handlePage"
          @on-page-size-change="handelPageSizeChange"
          size="small"
          show-elevator
          show-total
          show-sizer
          prev-text="上一页"
          next-text="下一页"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getList } from '@/api/helper'
import SearchInput from '_c/search-input/searchInput'
export default {
  components: {
    SearchInput
  },
  data() {
    return {
      paraData: {},
      showSide: false,  
      sideComponentTitle: '',
      sideComponentIcon: '',
      sideComponentWidth: 0,
      sideComponent: null,
      columns: [
        {
          title: '序号',
          width: 50,
          key: 'index',
          type: 'index',
          align: 'center',
          className: 'compact-cell'
        },
        {
          title: "操作",
          width: 70,
          align: "center",
          slot: "operate",
          className: "compact-cell",
        },
        {
          title: "名称",
          minWidth: 150,
          key: "name",
        },
        {
          title: "文档类型",
          width: 150,
          key: "type_cn",
        },
        {
          title: "描述",
          width: 300,
          key: "description",
        },
      ],
      tableheight: 0,
      title: '',
      loading: false,
      selection: [],
      searchText: null,
      list:[],
      page_size: 20,
      page_sum: 1,
      total:0,
      isIE:false
    }
  },
  methods: {
    getTableData(pageSize) {
      this.page_size = pageSize
      this.getList();
    },
    handelPageSizeChange(value) {
      this.page_size = value;
      this.page_sum = 1
      this.getList();
    },
    handlePage(value) {
      this.page_sum = value;
      this.getList();
    },
    getList() {
      let params = {
        searchText:this.searchText,
        pageSize:this.page_size,
        pageNumber:this.page_sum
      }
      getList(params).then(res => {
        if (res.data && res.data.state === 'ok') {
          let list = res.data.list.list
          list.forEach(help => {
            if (help.type == 0){
              help["type_cn"] = "标准规范"
            } else if (help.type == 1) {
              help["type_cn"] = "使用手册"
            } else if (help.type == 2) {
              help["type_cn"] = "操作视频"
            }
          });
          this.list = list
          this.total = res.data.list.totalRow
          this.selection = []
        }
      })
    },
    /**
     * Liukexin 20201120 下载操作手册
     */
    download(row,index){
      location.href = '/aserver/helper/downloadOperation?id=' + row.id
    },
    clearSearch() {
      this.getList()
    },
    searchByKeyword() {
      this.getList()
    },
  },
  mounted() {
    this.tableheight = document.body.clientHeight - 160
    this.getList()
  }
}
</script>
<style>
.ivu-card-body {
  padding: 0px;
}
.operate-button {
  padding: 2px 7px;
}
.compact-cell .ivu-table-cell {
  padding-left: 5px;
  padding-right: 5px;
}
.apply-app-outer {
  height: 100%;
  padding: 24px;
}
.apply-app-container {
  height: 100%;
  text-align: left;
  background: #e9e9e9;
}
.apply-toolbar {
  padding: 5px 10px;
  background-color: #fff;
  border: 1px solid #d7dde4;
}
.form-editor {
  position: relative;
  padding: 16px;
}
.apply-server-search-icon {
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 16px;
  text-align: center;
  color: #808695;
  position: absolute;
  right: 13%;
  z-index: 3;
}
</style>
