<template>
  <div>
    <el-card :body-style="{ padding: '5px' }" style="margin-bottom:5px">
      <header-box :search="search" @searchClick="searchClick">
      </header-box>
    </el-card>
    <div class="detailsBox">
      <div class="detail" v-for="(item,index) in statiList" :key="index" @click="detialClick(item,index)"
        :style="{background:(index===clickDetial?'#D8E8F5':'')}">
        <div>
          <span style="margin-right:20px">利用方式 : <span
              :style="{color:(item.purpose==='view'?'#E50000':'#55E027')}">{{item.purpose==="view"?"查看":"打印"}}</span>
          </span>
          <span>浏览量 :<span style="color:#D6AA0A">{{item.num}}</span></span>
        </div>
        <span style="color:#004BFF">详情</span>
      </div>
    </div>
    <el-card :body-style="{ padding: '0px' }">
      <content-table :loading="loading" :tableData="tableData" @dataBackFillGoods="dataBackFillGoods" />
      <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
        layout="total, prev, pager, next, sizes" :page-size="pagination.pageSize" :page-sizes="[10, 20, 30, 50]"
        :current-page="pagination.pageNum" :total="pagination.total">
      </el-pagination>
    </el-card>
    <el-dialog v-dialogDrag ref="diaFrom" title="详情" :close-on-click-modal="false" :visible.sync="diaStatus" width="70%"
      top="10px" :before-close="cancel">
      <el-table size="mini" highlight-current-row :data="diaTable" max-height="550px" border tooltip-effect="dark">
        <el-table-column align="center" prop="department" show-overflow-tooltip label="利用部门"></el-table-column>
        <el-table-column align="center" prop="userChnName" show-overflow-tooltip label="利用人"></el-table-column>
        <el-table-column align="center" width="170" prop="authorizeDate" label="利用时间"></el-table-column>
        <el-table-column align="center" prop="borrowPurpose" show-overflow-tooltip label="申请理由"></el-table-column>
        <el-table-column align="center" prop="flag" show-overflow-tooltip label="是否满意">
          <template slot-scope="scope">
            <el-tag :type="statusMap(scope.row.flag).type">{{ statusMap(scope.row.flag).text }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="note" show-overflow-tooltip label="评价备注"></el-table-column>
      </el-table>
    </el-dialog>
  </div>

</template>
<script>
  import {
    statistics,
    detailsList,
    details
  } from "@/api/archiveUtilize/archivesRetrieval/electronicArchivesUtilize"
  import headerBox from "./components/search.vue"
  import contentTable from "./components/content.vue"
  import {
    clearObjValue
  } from '@/utils/common'
  export default {
    data() {
      return {
        search: {
          archiveNo: "",
          maintitle: "",
          purpose: "",
          department: "",
          userChnName: "",
          expiryDate: [],
        },
        diaTable: [],
        diaStatus: false,
        statiList: [],
        clickDetial: null,
        clickItem: {},
        tableData: [],
        loading: false,
        pagination: {
          pageSize: 10,
          pageNum: 1,
          total: 0,
        },
      }
    },
    components: {
      headerBox,
      contentTable
    },
    methods: {
      statusMap(status) {
        const map = {
          0: {
            text: '满意',
            type: 'success'
          },
          1: {
            text: '不满意',
            type: 'danger'
          },
        }
        return map[status] || {
          text: '未评价',
          type: 'info'
        }
      },
      cancel() {
        this.diaStatus = false
      },
      searchClick(val) {
        if (val === 1) {
          this.getData()
        } else {
          clearObjValue(this.search)
        }
      },
      handleCurrentChange(val) {
        this.pagination.pageNum = val;
        this.detialClick(this.clickItem, this.clickDetial)
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val;
        this.pagination.pageNum = 1;
        this.detialClick(this.clickItem, this.clickDetial)
      },
      dataBackFillGoods(row, column, event) {
        let data = {
          archiveNo: row.archiveNo,
          // id: row.id,
          purpose: this.clickItem.purpose,
        }
        detailsList(data).then(res => {
          this.diaStatus = true
          this.diaTable = res.body.list
        })

      },
      detialClick(item, key) {
        this.clickItem = item
        this.clickDetial = key
        this.loading = true
        let params = {
          limit: this.pagination.pageSize,
          page: this.pagination.pageNum,
          purpose: item.purpose,
          archiveNo: this.search.archiveNo,
          maintitle: this.search.maintitle,
          department: this.search.department,
          userChnName: this.search.userChnName,
          authorizeDateStart: this.search.expiryDate.length ? this.search.expiryDate[0] : "",
          authorizeDateEnd: this.search.expiryDate.length ? this.search.expiryDate[1] : "",
        }
        details(params).then(res => {
          this.tableData = res.body.list
          this.pagination.total = res.body.total
          this.loading = false
        }).catch(err => {
          this.loading = false
        })
      },
      getData() {
        let params = {
          archiveNo: this.search.archiveNo,
          maintitle: this.search.maintitle,
          purpose: this.search.purpose,
          department: this.search.department,
          userChnName: this.search.userChnName,
          authorizeDateStart: this.search.expiryDate.length ? this.search.expiryDate[0] : "",
          authorizeDateEnd: this.search.expiryDate.length ? this.search.expiryDate[1] : "",
        }
        statistics(params).then(res => {
          this.statiList = res.body.data
          this.tableData = []
          this.pagination.total = 0
          this.pagination.pageSize = 10
          this.pagination.pageNum = 1
        })
      }
    },
    created() {
      this.getData()
    }
  }

</script>
<style lang="scss" scoped>
  .detailsBox {
    padding: 10px;
    display: flex;

    // justify-content: space-around;
    .detail {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      background: rgb(248, 248, 248);
      // background: rgb(47, 255, 57);
      font-size: 13px;
      padding: 0 20px;
      width: 30%;
      height: 40px;
      line-height: 40px;
      border: 1px solid rgb(224, 224, 224);
      border-radius: 5px;
      margin-right: 10px;
    }
  }

</style>
