<template>
  <div class="main-content market search-result content m20">
    <div class="search-box">
    <el-row>
      <el-col :span="8">
        <div class="search-field">
          <p>选择日期：</p>
          <el-date-picker
            v-model="searchDate"
            size="mini"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width:100%"
          />
        </div>
      </el-col>
      <el-col :span="8">
        <div style="float:right;margin-bottom:15px;">
          <el-button size="medium" type="primary" @click="search()">查询<i class="el-icon" style="margin-left:5px" /></el-button>
          <el-button size="medium" type="primary" @click="exportFile()">导出Excel<i class="el-icon" style="margin-left:5px" /></el-button>
        </div>
      </el-col>
    </el-row>
  </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      :fit="true"
      :row-class-name="tableRowClassName"
      :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
    >
      <el-table-column label="单位" prop="orgName" min-width="50" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="自动认领数" prop="aiClaimNum" min-width="50" align="center" show-overflow-tooltip />
      <el-table-column label="手动认领数" prop="claimNum" min-width="50" align="center" show-overflow-tooltip />
      <el-table-column label="指派数" prop="assignNum" min-width="50" align="center" show-overflow-tooltip />
      <el-table-column label="退还数" prop="remNum" min-width="50" align="center" show-overflow-tooltip />
    </el-table>
  </div>
</template>

<script>
import { countAssign, assignExcel} from '@/api/marketAssign'

export default{
  data() {
    return {
      searchDate: [],
      loading: true,
      tableData: []
    }
  },
  mounted() {
    let param = {
      customParamMap:{
        searchDate: this.searchDate
      }
    }
    countAssign(param).then(res => {
      this.loading = true
      if (res.code === 0) {
        const data = res.data
        const list = []
        data.forEach(each => {
            list.push(each)
        })
        this.tableData = list
        this.loading = false
      }
    })
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
    },
    search(){
      this.loading = true
      let param = {
        customParamMap:{
          searchDate: this.searchDate
        }
      }
      countAssign(param).then(res => {
        if (res.code === 0) {
          const data = res.data
          const list = []
          data.forEach(each => {
              list.push(each)
          })
          this.tableData = list
          this.loading = false
        }
      })
    },
    exportFile() {
      assignExcel(this.tableData).then(res => {
        const url = window.URL.createObjectURL(res, { type: 'application/vnd.ms-excel;charset=utf-8' })
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '认领情况统计.xlsx')
        link.click()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  background: #fff;
  .el-table .warning-row {
    background: #eaf4fe!important;
  }
}
/* 搜索条件 */
  .main-content{
    >div:not(:first-child){
      margin-top:16px;
    }
    
    .search-box{
      padding:10px 0;
      .search-field{
        display:flex;
        width:100%;
        >p{
          margin:3px 16px 10px 0;
          font-family: Microsoft YaHei, Microsoft YaHei-Bold;
          color: #666;
          font-size:16PX;
          width:200px;
          text-align: right;
        }
      }
      .el-col{
        margin-bottom:15px;
      }
    }
    .btn-box{
      text-align:right;
    }
    .main-body{
      padding:16px 0;
      border-top: 1px dashed #70AEFF;
      .header{
        .header-label{
          font-size: 20PX;
          font-family: Microsoft YaHei, Microsoft YaHei-Bold;
          font-weight: bold;
          color: #243668;
          line-height: 32px;
        }
      }
    }
  }
  /deep/.el-input__inner{
    height: 28px;
  }
  /deep/.el-input__icon{
    line-height: 28px;
  }
  .arrow{
    color: #3296FA;
    cursor: pointer;
    margin-right: 16px;
  }
</style>
<style lang="scss">
  .market.search-result{
    .el-table__row{
      cursor: pointer;
    }
  }
</style>