<template>
    <div class="flex-column">
        <!-- 查询模块 -->
        <div class="filter-container" style="margin:10px;">
            <!-- <span class="typeTitle">案件类型：</span> -->
            <el-select v-model="listQuery.is_reporter" placeholder="请选择是否上报人" style="margin-left: 5px;width: 180px">
                <el-option label="否" :value="0"></el-option>
                <el-option label="是" :value="1"></el-option>
            </el-select>
            <el-select v-model="listQuery.is_dealer" placeholder="请选择是否执法人" style="margin-left: 20px;width: 180px">
                <el-option value="0" label="否"></el-option>
                <el-option value="1" label="是"></el-option>
            </el-select>
            <el-select v-model="listQuery.handle_status_id" placeholder="请选择处理状态" style="margin-left: 20px;width: 180px">
                <el-option :value="0" label="待办"></el-option>
                <el-option :value="1" label="在办"></el-option>
                <el-option :value="2" label="办结"></el-option>
            </el-select>
            <el-date-picker style="margin-left: 20px;width:400px"
                v-model="caseDate"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                align="right">
            </el-date-picker>
            <el-input
              @keyup.enter.native="handleFilter"
              prefix-icon="el-icon-search"
              size="small"
              style="width: 240px; margin-bottom: 0;margin-left: 20px"
              class="filter-item"
              :placeholder="'通过案件名称进行查询'"
              v-model="listQuery.key"></el-input>
            <el-input
            @keyup.enter.native="handleFilter"
            prefix-icon="el-icon-search"
            size="small"
            style="width: 200px; margin-bottom: 0;margin-left: 20px"
            class="filter-item"
            :placeholder="'通过上报人名称进行查询'"
            v-model="listQuery.report_name"></el-input>
            <el-input
                @keyup.enter.native="handleFilter"
                prefix-icon="el-icon-search"
                size="small"
                style="width: 200px; margin-bottom: 0;margin-left: 20px"
                class="filter-item"
                :placeholder="'通过执行人姓名进行查询'"
                v-model="listQuery.deal_username">
          </el-input>
          <el-button size="small" type="primary" style="margin-left: 20px" @click="loadCaseList">查询</el-button>
          <el-button size="small" @click="resetSearchList">重置</el-button>
        </div>
        <!-- 数据列表模块 -->
        <div class="app-container flex-item">
            <div class="bg-white fh">
                <el-table :data="caseAllList" border fit highlight-current-row style="width: 100%;" height="calc(100% - 100px)">
                    <!-- <el-table-column type="selection" width="55"></el-table-column> -->
                    <el-table-column prop="drone_no" label="无人机编号" width="160"></el-table-column>
                    <el-table-column prop="case_name" label="案件名称"></el-table-column> 
                    <el-table-column prop="typename" label="案件类型"></el-table-column> 
                    <el-table-column prop="case_description" label="案件描述"></el-table-column>
                    <el-table-column prop="handle_status_name" label="处理状态"></el-table-column> 
                    <el-table-column prop="address" label="地址"></el-table-column> 
                    <el-table-column prop="createusername" label="上报人"></el-table-column> 
                    <el-table-column prop="createtime" label="上报时间"></el-table-column> 
                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                        </el-table-column>   
                </el-table>
                <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="handleCurrentChange"/>
            </div>
        </div>
        <el-dialog title="报表明细" :visible.sync="dialogFormVisible">
            <div class="tableClass">
                <table border="1px solid #bcd8f1" style="width:100%">
                    <tr>
                        <td>案件编号</td><td>{{ reportData.case_no }}</td>
                        <td>案件名称</td><td> {{reportData.case_name}}</td>
                        <td>案件描述</td><td>{{reportData.case_description}}</td>
                        <td>上报开始时间</td><td>{{reportData.start_time}}</td>
                    </tr>
                    <tr>
                        
                        <td>上报结束时间</td><td>{{reportData.end_time}}</td>
                        <td>地址</td><td>{{reportData.address}}</td>
                        <td>经度</td><td>{{reportData.lng}}</td>
                        <td>纬度</td><td>{{reportData.lat}}</td>
                    </tr>
                    <tr>
                        <td>案件类型</td><td>{{reportData.typename}}</td>
                        <td>案件类型</td><td>{{reportData.handle_status_name}}</td>
                        <td>处理状态</td><td>{{reportData.handle_status_name}}</td>
                        <td>案件状态</td><td>{{reportData.case_status_name}}</td>
                    </tr>
                    <tr>
                        <td>上报时间</td><td>{{reportData.createtime}}</td>
                        <td>上报人</td><td>{{reportData.createusername}}</td>
                        <td>无人机编号</td><td>{{reportData.drone_no}}</td>
                        <td>执行人姓名</td><td>{{reportData.deal_username}}</td>
                    </tr>
                </table>
            </div>
            
        </el-dialog>
    </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import {loadCaseInfoList,getCaseInfo} from "../../api/case"
export default {
    name:'reportPrint',
    components:{Pagination},
    data(){
        return{
            //案件类型
            typeList:[
                {
                    value:'1',
                    label:'民房改建'
                },
                {
                    value:'2',
                    label:'占用耕地',
                },
                {
                    value:'3',
                    label:'厂房新建',
                },
                {
                    value:'4',
                    label:'民房加盖'
                }
            ],
            //案件状态人
            statePeopleList:[
                {
                    value:'1',
                    label:'待办',
                },
                {
                    value:'2',
                    label:'在办',
                },
                {
                    value:'3',
                    label:'办结',
                }
            ],
            //案件状态物
            stateThingList:[
                {
                    value:'1',
                    label:'正常',
                },
                {
                    value:'2',
                    label:'重点',
                },
                {
                    value:'3',
                    label:'超期',
                },
            ],
            caseStateThing:'',
            //案件列表
            caseAllList:[{
                drone_no:'202102020001',//无人机编号
                case_name:'yw',//案件名称
                typename:'飞喽',//案件类型
                case_description:'此无人机是最贵的',//案件描述
                handle_status_name:'办结',//案件状态（人）
                case_status_name:'重点',//案件状态（事）
                address:'小柳汪',
                createusername:'YuWei',//上报人
                createtime:'20222-1-25',//上报时间
            }],
            listQuery:{
                key: "",
                page: 1,
                limit: 10,
                is_reporter:null,//是否上报人
                is_dealer:null,//是否执法人
                handle_status_id:null,//处理状态
                case_status_id:'',//案件状态
                report_start_time:'',//上报开始日期
                report_end_time:'',//上报终止日期
                report_name:'',//上报人姓名
                deal_username:'',//执行人姓名
            },
            total:0,
            //日期快捷一周一个月三个月
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            dialogFormVisible:false,
            caseDate:"",
            //报表详情
            reportData:{
                case_no:'',
                case_name:'',
                case_description:'',
                start_time:'',
                end_time:'',
                address:'',
                lng:'',
                lat:'',
                typename:'',
                handle_status_name:'',
                case_status_name:'',
                createtime:'',
                createusername:'',
                drone_no:'',
                deal_username:'',
            }
        }
    },
    watch:{
        caseDate: function (e) {
            if (e && e.length === 2) {
                this.listQuery.report_start_time = e[0].Format('yyyy-MM-dd')
                this.listQuery.report_end_time = e[1].Format('yyyy-MM-dd')
                this.listQuery.page = 1;
            } else {
                this.listQuery.report_start_time = ""
                this.listQuery.report_end_time = ""
                this.listQuery.page = 1;
            }
        }
    },
    mounted(){
        this.loadCaseList();
    },
    methods:{
        loadCaseList(){
            loadCaseInfoList(this.listQuery).then(res =>{
                console.log("res:",res);
                if(res.code === 200){
                    this.caseAllList = res.data
                    this.total = res.count
                }
            })
        },
        handleFilter() {

        },
        resetSearchList(){
            this.listQuery='';
            this.caseDate ="";
            this.loadCaseList();
        },
        handleClick(row){
            this.dialogFormVisible = true;
            this.getCaseinFoData(row.id);
        },
        getCaseinFoData(Id){
            getCaseInfo({id:Id}).then(res =>{
                if(res.code === 200){
                    this.reportData = res.result.info;
                }
                console.log(res);
            })
        },
        handleCurrentChange(val) {
            this.listQuery.page = val.page
            this.listQuery.limit = val.limit
            this.loadCaseList()
        },
    }
}
</script>
<style scoped>
.tableClass table tr{
    width:100%;
    height:40px;
}
.tableClass table tr td{
    padding-left: 10px ;
}
</style>