<template>
  <!-- 标准文件 -->
  <div id="dwsWrap">
    <ul class="topList">
      <li v-for="(item, index) in topData" :key="index" @click="clickStatistics(index,item)" :class="item.firstClick? '':'topList-hov'">
        <div class="boxbg"></div>
        <img :src="item.imgUrl" alt="">
        <div class="nums">
          <div>{{ item.fileTypeSize }}</div>
          <h2>{{ item.fileTypeName }}</h2>
        </div>
      </li>
    </ul>
    <div class="tableWrap">
      <h2 class="title">标准文件</h2>
      <div class="main">
        <div class="table-operations">
          <a-button type="add" :disabled="hasSelected" @click="addFun">新增</a-button>
          <a-button type="delete" :disabled="!hasSelected" @click="deleteFun(selectedRowsId)">删除</a-button>
          <a-button type="edit" :disabled="!oneHasSelected" @click="addFun">编辑</a-button>
          <a-button type="work" :disabled="selectedStateWork" @click="getUpdateStatus(selectedRowsId, '0')">启用</a-button>
          <a-button type="stop" :disabled="selectedStateStop" @click="getUpdateStatus(selectedRowsId, '1')">停用</a-button>
          <a-dropdown-button :disabled="!hasSelected" @click="handleButtonClick">
            更多操作
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="1">
                <a-icon type="download" />导出文件
              </a-menu-item>
            </a-menu>
          </a-dropdown-button>
        </div>
        <Table
          ref="tableModel"
          :columns="columns"
          :tableData="tableData"
          @getSelectedRowKeys="getSelectedRowKeys"
          :selectedRowKeys="selectedRowKeys"
          :selectedRows="selectedRows"
          @changeParams="changeParams" />

      </div>

    </div>
    <Add v-if="showState" :selectedRows="selectedRowsOne" @getShowState="getShowState" />

  </div>

</template>

<script type="text/ecmascript-6">
import Add from './components/Add'
import Table from './components/Table'

import { listFile, getStatistics, delFile, getFile, updateStatus } from '@/api/standard/standardFile'
export default {
  data() {
    return {
      topData: [],
      topImgData: [
        { imgUrl: require('../../assets/images/standard/icon1.png') },
        { imgUrl: require('../../assets/images/standard/icon2.png') },
        { imgUrl: require('../../assets/images/standard/icon3.png') },
        { imgUrl: require('../../assets/images/standard/icon4.png') }
      ],

      searchInput: null,
      columns: [
        {
          title: '序号',
          dataIndex: 'key',
          key: 'key'
        },
        {
          title: '文件名称',
          dataIndex: 'fileName',
          key: 'fileName',
          align: 'left',
          width: '15%',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'fileName'
          }
        },
        {
          title: '文件类型',
          dataIndex: 'fileType',
          key: 'fileType',
          width: '15%',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender'
          }
        },
        {
          title: '文件描述',
          dataIndex: 'fileDesc',
          key: 'fileDesc',
          align: 'left',
          width: '25%',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'fileDesc'
          }
        },
        {
          title: '创建人',
          dataIndex: 'nickName',
          key: 'nickName'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          key: 'createTime',
          width: '15%'
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          width: '8%',
          customRender: (text, record, index) => {
            if (text === '0') {
              return <span style="color:#2d60d6">启用</span>
            } else if (text === '1') {
              return <span style="color:red">停用</span>
            }
          }
        }
      ],

      tableData: [],
      firstClick: true,
      clickType: '',
      showState: false,
      selectedRowKeys: [],
      selectedRows: [],

      selectedStateWork: true,
      selectedStateStop: true,
      selectedRowsOne: {},
      selectedRowsId: [],
      params: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  components: {
    Add,
    Table
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
    oneHasSelected() {
      return this.selectedRowKeys.length === 1
    }
  },
  mounted() {
    this.getStatistics('') // 标准文件统计项及类型字典
  },

  methods: {
    // 选中行
    getSelectedRowKeys(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRowsId = []

      // console.log('选中行selectedRows.status: ', selectedRows[0].status)
      selectedRows.forEach((item) => {
        this.selectedRowsId.push(item.id)
      })
      if (selectedRows.length === 1) {
        this.selectedRowsOne = selectedRows[0]
        if (selectedRows[0].status === '1') {
          this.selectedStateWork = false
          this.selectedStateStop = true
        }
        if (selectedRows[0].status === '0') {
          this.selectedStateStop = false
          this.selectedStateWork = true
        }
      } else if (selectedRows.length > 1) {
        this.selectedStateWork = false
        this.selectedStateStop = false
      } else {
        this.selectedStateWork = true
        this.selectedStateStop = true
      }

      if (selectedRows.length === 0) {
        this.selectedRowsOne = {}
      }
    },
    // 弹框显示隐藏
    getShowState(showState) {
      this.showState = showState
      this.getStatistics('')
    },

    addFun() {
      this.showState = true
    },

    // 删除
    deleteFun(id) {
      var that = this
      this.$confirm({
        title: '确认删除所选中数据?',
        onOk() {
          return delFile(id).then(() => {
            that.clearSelectedRows()
            that.getStatistics('')
            that.$message.success('删除成功', 3)
          })
        },
        onCancel() {}
      })
    },
    // 查看
    getFile(id) {
      getFile(id).then((res) => {
        if (res.code === 200) {
          const fileUrl = res.data.fileUrl
          console.log('fileUrl: ', fileUrl)
        }
      })
    },
    // 标准文件批量更改状态
    getUpdateStatus(ids, status) {
      status === '0' ? (status = '0') : (status = '1')

      updateStatus({ ids: ids.join(','), status }).then((res) => {
        if (res.code === 200) {
          this.getlistFileChanges()
          if (ids.length === 1) {
            this.selectedStateWork = !this.selectedStateWork
            this.selectedStateStop = !this.selectedStateStop
          }
        }
      })
    },

    clearSelectedRows() {
      const selectedRowKeys = []
      const selectedRows = []
      this.getSelectedRowKeys(selectedRowKeys, selectedRows)
    },
    changeParams(key, value) {
      this.$set(this.params, key, value)
    },

    // 表页显示、以及查询筛选
    getlistFileChanges(clickType) {
      listFile(this.params).then((res) => {
        if (res.code === 200) {
          this.$refs.tableModel.onPageChange(1)

          const resData = res.rows
          const clickTypeData = []

          resData.forEach((item, index) => {
            item.key = index + 1
            switch (item.fileType) {
              case '0':
                item.fileType = '国家标准'
                break
              case '1':
                item.fileType = '行业标准'
                break
              case '2':
                item.fileType = '地方标准'
                break
              case '3':
                item.fileType = '企业标准'
                break
              case '4':
                item.fileType = '其他'
                break
            }
            this.tableData = clickTypeData

            if (item.fileType === clickType) {
              clickTypeData.push(item)
              clickTypeData.forEach((item, index) => {
                item.key = index + 1
              })
            }
          })
          if (clickType === '') {
            this.tableData = resData
          } else {
            this.tableData = clickTypeData
          }
        }
      })
    },
    clickStatistics(index, item) {
      this.clickType = item.fileTypeName
      var { topData } = this
      var firstClick = topData[index].firstClick
      if (!firstClick) {
        this.getlistFileChanges('')
        topData[index].firstClick = true
      } else {
        this.getlistFileChanges(this.clickType)

        topData.forEach((item, index) => {
          item.firstClick = true
        })
        topData[index].firstClick = false
      }
    },

    // 标准文件统计项及类型字典
    getStatistics(clickType) {
      this.clickType = clickType
      getStatistics().then((res) => {
        if (res.code === 200) {
          const resData = res.data.splice(0, 4)
          resData.forEach((item, index) => {
            Object.assign(item, this.topImgData[index])
            item.firstClick = true
          })
          this.topData = resData
        }
      })
    },
    handleButtonClick(e) {
      // console.log('click left button', e)
    },
    handleMenuClick(e) {
      // console.log('click', e)
    }
  },
  watch: {
    params: {
      deep: true,
      immediate: true,
      handler(val) {
        this.getlistFileChanges(this.clickType)
      }
    }
  }
}
</script>
<style lang="less">
#dwsWrap {
  .ant-spin-nested-loading {
    background: #fff;
  }
  .ant-table-pagination.ant-pagination {
    margin: 50px auto 20px;
    text-align: center;
    float: none;
  }
  .tableWrap td {
    max-width: 200px;
    min-width: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-all;
    &:hover {
      cursor: pointer;
    }
  }
  .tableWrap th {
    text-align: center !important;
  }
}
</style>
<style lang="less" scope>
#dwsWrap {
  width: 100%;
  box-sizing: border-box;
  padding: 25px 24px 0;
  position: relative;
  .topList {
    display: flex;
    padding: 0;
    justify-content: space-between;
    align-items: center;
    & > li {
      width: 24%;
      height: 160px;
      background: #ffffff;
      border-radius: 12px;
      box-sizing: border-box;
      padding: 25px 30px;
      box-shadow: 0 0 10px 0 rgba(17, 32, 65, 0.08);
      border-radius: 5px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      position: relative;
      cursor: pointer;
      &:hover,
      &.topList-hov {
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
      }
      .boxbg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: url('../../assets/images/standard/bg1.png') no-repeat center center;
        background-size: 100% 100%;
      }
      & > img {
        width: 70px;
      }
      & > .nums {
        text-align: center;
        & > h2 {
          font-size: 18px;
          color: #171d33;
        }
        & > div {
          font-size: 40px;
          color: #8791f4;
          font-weight: bold;
        }
      }
    }
    & > li:nth-child(2) {
      .boxbg {
        background: url('../../assets/images/standard/bg2.png') no-repeat center center;
        background-size: 100% 100%;
      }
      & > .nums {
        & > div {
          color: #37aef1;
        }
      }
    }
    & > li:nth-child(3) {
      .boxbg {
        background: url('../../assets/images/standard/bg3.png') no-repeat center center;
        background-size: 100% 100%;
      }
      & > .nums {
        & > div {
          color: #ff6a42;
        }
      }
    }
    & > li:nth-child(4) {
      .boxbg {
        background: url('../../assets/images/standard/bg3.png') no-repeat center center;
        background-size: 100% 100%;
      }
      & > .nums {
        & > div {
          color: #39cba7;
        }
      }
    }
  }
  .tableWrap {
    width: 100%;
    min-height: calc(100vh - 375px);
    margin-top: 20px;
    background: #ffffff;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 25px 0;
    box-shadow: 0 0 10px 0 rgba(17, 32, 65, 0.08);
    .title {
      font-family: SourceHanSansCN-Medium;
      font-size: 18px;
      color: #171d33;
      margin-bottom: 20px;
      border-left: 4px solid #3b75f5;
      padding-left: 20px;
    }
    .main {
      padding: 0 40px;
      .table-operations {
        margin: 30px 0 15px;
      }
    }
  }
}
</style>
