<template>
  <div class="apply-app-outer">
    <div class="apply-app-container">
      <div class="apply-toolbar">
        <Row span="24">
          <Button @click.stop="addSystem" type="primary" style="padding:0 8px;">
            <Icon custom="fa fa-fw fa-plus"></Icon>添加
          </Button>
          <Button @click="remove" type="text" style="margin-left:8px;padding:0px;">
            <Icon custom="fa fa-trash fa-fw" aria-hidden="true" style="color: red"></Icon>删除
          </Button>
          <Divider type="vertical" />
          <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="edit(row, index)"
              >
                <Icon custom="fa fa-fw fa-edit" title="编辑"></Icon>
              </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>
      <template>
        <!-- LiuKexin 20210318 调整间距和高度 -->
        <Side :width="sideComponentWidth" v-model="showSide" style="margin-top:120px;margin-right:25px;background-color:#fff;height:auto;">
          <Card :style="'height:' + (tableheight+20) + 'px'">
            <span slot="title">
              <Icon :custom="'fa fa-' + sideComponentIcon"></Icon>
              {{sideComponentTitle}}
            </span>
            <component
              :is="sideComponent"
              :paraData="paraData"
              @reload="reload"
            ></component>
          </Card>
        </Side>
      </template>
    </div>
  </div>
</template>

<script>
import SearchInput from '_c/search-input/searchInput'
import { getList,remove } from '@/api/helper'
import Side from '@/views/components/side/side'
export default {
  components: {
    Side,
    SearchInput
  },
  data() {
    return {
      paraData: {},
      showSide: false,  
      sideComponentTitle: '',
      sideComponentIcon: '',
      sideComponentWidth: 0,
      sideComponent: null,
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          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: '',
      list: [],
      loading: false,
      modal: false,
      selection: [],
      searchText: '',
      page_size: 20,
      page_sum: 1,
      total:0,
      isIE:false
    }
  },
  methods: {
    getTableData(pageSize) {
      this.page_size = pageSize
      this.getList();
    },
    reload(){
      this.getList()
    },
    handelPageSizeChange(value) {
      this.page_size = value;
      this.page_sum = 1
      this.getList();
    },
    handlePage(value) {
      this.page_sum = value;
      this.getList();
    },
    /**
     * LiuKexin 20201123 修改删除，（1）添加警告框，（2）没有选择数据时给予提示
     */
    remove(){
      if(this.selection.length == 0){
        this.$Notice.warning({title:'警告',desc:'请先选择数据'})
        return
      }
      let content ="删除的数据不可恢复，确定要删除吗？"
      this.showConfirmModal(this.selection, content).then(ids => {
        remove(ids.join(",")).then(res => {
          if (res.data && res.data.state === 'ok') {
            this.$Notice.success({ title: '提示', desc: '删除成功!' })
            /** LiuKexin 20201123 当前页全部删除后，页码停留在上一页  start*/
            if(this.selection.length == this.list.length && this.page_sum > 1){
              this.page_sum = this.page_sum - 1
            }
            if(this.selection.length == this.list.length && this.page_sum == 1){
              this.page_sum =  1
            }
            /** LiuKexin 20201123 当前页全部删除后，页码停留在上一页 end*/
            this.getList()
          } else {
            this.$Notice.error({
              title: '提示',
              desc:
                res.data.msg != null
                  ? res.data.msg
                  : '未知错误，请联系管理员解决',
            })
          }
          this.$Modal.remove()
        })
      })
    },
    /**
     * LiuKexin 20201123 删除添加弹出框
     */
    showConfirmModal(selection, content) {
      return new Promise(resolve => {
        this.$Modal.confirm({
          title: '警告',
          content: content,
          loading: true,
          onOk: () => {
            let ids = selection.map(item => {
              return item.id
            })
            event.stopPropagation()
            resolve(ids)
          },
          onCancel: () => {
            event.stopPropagation()
          }
        })
      })
    },
    clearSearch() {
      this.getList()
    },
    searchByKeyword() {
      this.page_sum = 1
      this.getList()
    },
    addSystem(row) {
      // this.paraData = {
      //   tableheight: this.tableheight-43,
      //   id: row.id
      // }
      this.sideComponentTitle = '添加帮助'
      this.sideComponentIcon = 'pencil-square-o'
      this.sideComponentWidth = 1000
      this.showSide = true
      this.paraData = null
      import('./help-edit').then(comp => {
        this.sideComponent = comp.default
      })
    },
    edit(row) {
      this.sideComponentTitle = '编辑帮助' //LiuKexn 20210315 名称
      this.sideComponentIcon = 'edit'
      this.sideComponentWidth = 1000
      this.showSide = true
      this.paraData = Object.assign({}, row)
      import('./help-edit').then(comp => {
        this.sideComponent = comp.default
      })
    },

    onSelect(selection) {
      this.selection = selection
    },
    getList() {
      //LiuKexin 20201123 修改传递参数的格式
      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 = []
        }
      })
    }
  },
  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: 4px;
  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;
}
.side-card{
  height:800px;
}
</style>
