<template>
    <div>
        <el-card style="margin-bottom: 5px">
            <el-row>
                <el-col :span="10">
                <span>接收时间 : </span>
                <el-date-picker
                    v-model="search.time"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
                </el-col>
                <el-col :span="6">
                <span>接收状态 : </span>
                <el-radio-group v-model="search.status">
                    <el-radio :label="2">已接收</el-radio>
                    <el-radio :label="1">未接收</el-radio>
                </el-radio-group>
                </el-col>
                <el-col :span="6">
                <el-button size="small" type="primary" icon="el-icon-search" @click="searchClick(1)">搜索</el-button>
                <el-button size="small" type="info" icon="el-icon-refresh" @click="searchClick(2)">重置</el-button>
                </el-col>
            </el-row>
        </el-card>
        <el-table
      v-loading="tableLoading"
      tooltip-effect="dark"
      :data="tableData"
      :max-height="tableHeigt"
      border
    >
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
      <el-table-column align="center" prop="operatorChn" label="操作" width="150" fixed>
        <template slot-scope="scope">
            <el-button type="text" @click="handleClickBtn('detail',scope.row)">查看详情</el-button>
            <el-button type="text"  @click="handleClickBtn('receive',scope.row)">接收</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="operator" label="接收人" width="100" />
      <el-table-column align="center" prop="receptiontime" label="接收时间" width="100" />
      <el-table-column align="center" prop="handedover" label="原单位"  />
      <el-table-column   align="center" prop="classname" label="门类名称" />
      <el-table-column align="center" prop="receivingunit" label="接收单位"  />
      <!-- <el-table-column  align="center" prop="receivingtype" label="接收类型" width="100">
        <template slot-scope="scope">
          <el-tag type="info">{{scope.row.receivingtype==1?'在线接收':'离线接收'}}</el-tag>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination
        layout="total, prev, pager, next, sizes"
        :page-size="pagination.pageSize"
        :page-sizes="[10, 50, 100, 500,1000]"
        :current-page="pagination.pageNum"
        :total="pagination.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
      <!-- 查看详情 -->
      <receive-detail ref="receiveDetailRef" :visible="isShowReceiveDetail" :tableObj="tableObj" @clickCancel="cancel"></receive-detail>
    </div>
</template>

<script>
import { clearObjValue,message} from '@/utils/common';
import {selectReceiveInformation,updateInformation} from '@/api/archives-management/ungroupedManagement/receive.js';
import receiveDetail from "./components/detail.vue";
export default{
    data(){
        return {
            isShowReceiveDetail:false, // 查看详情
            search: {
                time: '',
                status:''
            },
            tableLoading:false,
            tableData:[],
            tableHeigt: window.innerHeight - 250,
            pagination: {
                pageNum: 1,
                pageSize: 10,
                total: 0
            },
            tableObj:{}, // 行对象
        }
        
    },
    components:{
        receiveDetail,
    },
    mounted() {
        this.getData();
    },
    methods:{
        tableCellStyle() {
            return "border-color:#396183";
        },
        tableHeaderCellStyle() {
            return "border-color:#ccc";
        },
        searchClick(val) {
            switch (val) {
                case 1:
                this.pagination.pageNum = 1;
                this.getData();
                break
                case 2:
                clearObjValue(this.search)
                break
            }
        },
        handleClickBtn(type,rowData){
            this.tableObj = rowData;
            if(type == 'detail'){
                this.isShowReceiveDetail = true;
                this.$refs.receiveDetailRef.handleNodeClick(this.tableObj);
            }else if(type == 'receive'){
                this.handleStartReceive()
            }
        },
        // 点击接收按钮
        handleStartReceive(){
            let params = {
                id:this.tableObj.id
            }
            updateInformation(params).then((res)=>{
                if(res.code == 100){
                    message('success',res.msg,3000);
                    this.searchClick(1);
                }
            }).catch(error=>{
                message('error',error,3000);
            })
        },
        getData() {
            this.tableLoading = true
            this.params = {
                // 其他参数
                startTime:this.search.time ? this.search.time[0]:'',
                endTime:this.search.time ? this.search.time[1]:'',
                status:this.search.status,
                receivingtype:0, // 接收记录 类型
                page: this.pagination.pageNum,
                limit: this.pagination.pageSize,
            }
            selectReceiveInformation(this.params).then((res)=>{
                if(res.code == 100){
                this.tableLoading = false;
                let resultData = res.body.list;
                this.tableData = resultData;
                this.pagination.total = res.body.total;
                }else{
                this.tableLoading = false;
                message('warning',res.msg,3000);
                }
            }).catch((error)=>{
                this.tableLoading = false;
            })
        },
        handleCurrentChange(val) {
            this.pagination.pageNum = val
            this.getData()
        },
        handleSizeChange(val) {
            this.pagination.pageSize = val
            this.getData()
        },
        cancel(){
            this.isShowReceiveDetail = false;
        }
    }
}
</script>