<template>
  <div class="dashboard-editor-container">
    <template >
      <div class="top-box">
        <div class="t_box">
          <div>待取车</div>
          <div>{{dataMap.dqcNum}}</div>
        </div>
        <div class="t_box">
          <div>待支付</div>
          <div>{{dataMap.dzfNum}}</div>
        </div>
        <div class="t_box">
          <div>救援中</div>
          <div>{{dataMap.jyzNum}}</div>
        </div>
        <div class="t_box">
          <div>已完成</div>
          <div>{{dataMap.ywcNum}}</div>
        </div>
        <div class="t_box">
          <div>未读消息</div>
          <div style="color: red;font-size: 38px;margin-right: 15px">{{noReadMsgNum}}</div>
        </div>
      </div>
      <div class="cent-box">
        <el-table  :data="messageList.list">

          <el-table-column label="标题" align="center" prop="title" />
          <el-table-column label="消息内容" align="center" prop="content" />
          <el-table-column label="已读/未读" align="center" prop="isSuccess" >
            <template slot-scope="scope">
<!--              <span>{{ scope.row.isRead==='1'?'已读':'未读' }}</span>-->
              <el-tag type="success" v-if="scope.row.isRead=='1'">已读</el-tag>
              <el-tag type="danger" v-if="scope.row.isRead!='1'">未读</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {hh}:{mm}:{ss}') }}</span>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="messageList.total>0"
          :total="messageList.total"
          :page.sync="messageList.pageNum"
          :limit.sync="messageList.pageSize"
          @pagination="getMsgList()"
        />
      </div>

      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="8">
          <div style="display: flex;align-items: center;margin-bottom: 10px">
            <el-input v-model="kcList.searchValue" placeholder="请输入车牌号"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="getkcList()">搜索</el-button>

          </div>
         <div class="bot-list">
           <div style="font-weight: bold">
             扣车中:
           </div>
           <el-empty v-if=" kcList.list.length ==0" description="暂无数据"></el-empty>
           <div class="boxa" v-for="(item,index) in kcList.list" :key="index">
             <div class="hei-title">{{item.licenseNum || ''}}</div>
             <div class="box-bs">
               <div class="zc">车主：{{item.connectionName || ''}}</div>
               <div class="zc">联系电话：{{item.connectionPhone || ''}}</div>
             </div>
             <div class="yihang">扣车时间：{{item.createTime || ''}}</div>
             <div class="yihang">扣车地点：{{item.rescuePosition || ''}}</div>

             <div class="yihang">取车地点：{{item.kcPosition || ''}}</div>
             <div class="right-box">

             </div>
           </div>

         </div>
          <div class="bd-bot">
            <pagination
              :pageSizes="[3]"
              v-show="kcList.total>0"
              :total="kcList.total"
              :page.sync="kcList.pageNum"
              :limit.sync="kcList.pageSize"
              @pagination="getkcList()"
            />
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="8">
          <div style="display: flex;align-items: center;margin-bottom: 10px">
            <el-input v-model="jkList.searchValue" placeholder="请输入车牌号"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="getjkList()">搜索</el-button>

          </div>
          <div class="bot-list">
            <div style="font-weight: bold">
              已解扣:
            </div>
            <el-empty v-if=" jkList.list.length ==0" description="暂无数据"></el-empty>
            <div class="boxa" v-for="(item,index) in jkList.list" :key="index">
              <div class="hei-title">{{item.licenseNum || ''}}</div>
              <div class="box-bs">
                <div class="zc">车主：{{item.connectionName || ''}}</div>
                <div class="zc">联系电话：{{item.connectionPhone || ''}}</div>
              </div>
              <div class="yihang">扣车时间：{{item.createTime || ''}}</div>
              <div class="yihang">扣车地点：{{item.rescuePosition || ''}}</div>

              <div class="yihang">取车地点：{{item.kcPosition || ''}}</div>
              <div class="right-box">
                <div class="janniu" @click="hcOpen(item.id)">
                  <span>还车</span>
                </div>
              </div>
            </div>
          </div>
          <div class="bd-bot">
            <pagination
              :pageSizes="[3]"
              v-show="jkList.total>0"
              :total="jkList.total"
              :page.sync="jkList.pageNum"
              :limit.sync="jkList.pageSize"
              @pagination="getjkList()"
            />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div style="display: flex;align-items: center;margin-bottom: 10px">
            <el-input v-model="hcList.searchValue" placeholder="请输入车牌号"></el-input>
            <el-button type="primary" icon="el-icon-search"  @click="gethcList()">搜索</el-button>

          </div>
          <div class="bot-list">
            <div style="font-weight: bold">
              已还车:
            </div>
            <el-empty v-if=" hcList.list.length ==0" description="暂无数据"></el-empty>
            <div class="boxa" v-for="(item,index) in hcList.list" :key="index">
              <div class="hei-title">{{item.licenseNum || ''}}</div>
              <div class="box-bs">
                <div class="zc">车主：{{item.connectionName || ''}}</div>
                <div class="zc">联系电话：{{item.connectionPhone || ''}}</div>
              </div>
              <div class="yihang">扣车时间：{{item.createTime || ''}}</div>
              <div class="yihang">扣车地点：{{item.rescuePosition || ''}}</div>

              <div class="yihang">取车地点：{{item.kcPosition || ''}}</div>
              <div class="right-box">

              </div>
            </div>

          </div>
          <div class="bd-bot">
            <pagination
              :pageSizes="[3]"
              v-show="hcList.total>0"
              :total="hcList.total"
              :page.sync="hcList.pageNum"
              :limit.sync="hcList.pageSize"
              @pagination="gethcList()"
            />
          </div>
        </el-col>
      </el-row>
    </template>
  </div>
</template>

<script>
// import PanelGroup from './dashboard/PanelGroup'
// import LineChart from './dashboard/LineChart'
// import LineChart2 from './dashboard/LineChart2'
// import PieChart from './dashboard/PieChart'
// import BarChart from './dashboard/BarChart'
import partnerIdx from '@/views/partner/index'
import request from '@/utils/request'
export default {
  name: 'Index',
  components: {
    // PanelGroup,
    // LineChart,
    // LineChart2,
    // PieChart,
    // BarChart,
    partnerIdx
  },
  data() {
    return {
      rolseStr:'none',
      //扣车中list
      kcList:{
        list:[],
        total:0,
        pageSize:3,
        pageNum:1,
        searchValue:""
      },
      //已解扣list
      jkList:{
        list:[],
        total:0,
        pageSize:3,
        pageNum:1,
        searchValue:""
      },
      //已还车list
      hcList:{
        list:[],
        total:0,
        pageSize:3,
        pageNum:1,
        searchValue:""
      },
      //消息通知list
      messageList:{
        list:[],
        total:0,
        pageSize:10,
        pageNum:1,
        searchValue:""
      },
      //未读消息list
      noReadMsgNum:0,
      dataMap:{}

    }
  },
  created() {
    this.setAllRead()
      setInterval(() => {
        // 在这里执行你的方法
        this.getData()
        // 例如：

      }, 3000) // 每2秒执行一次

  },
  mounted() {
        // this.getData()
  },
  methods: {
    getData(){
      this.getKcList()
      this.getjkList()
      this.gethcList()
      this.getMsgList()
      this.getOwnNoRead()
      this.getRescueStatistics()
    },
    hcOpen(rescueId){
        request({
            url: '/app/rescueInfo/hcOpen',
            method: 'post',
            params:{
              rescueId:rescueId
            }
        }).then(res=>{
           this.$message.success("操作成功")
          this.getjkList()
        })
    },
    getRescueStatistics(){
      request({
        url: '/app/rescueInfo/getRescueStatistics',
        method: 'get',
      }).then(res=>{
        this.dataMap = res.data
      })
    },
    getKcList(){
      request({
        url: '/app/rescueInfo/getRescueList',
        method: 'get',
        params:{
          licenseNum:this.kcList.searchValue,
          rescueStatus:'9',
          pageNum:this.kcList.pageNum,
          pageSize:this.kcList.pageSize
        }
      }).then(res=>{
        this.kcList.list = res.rows;
        this.kcList.total = res.total;
      })
    },
    getjkList(){
      request({
        url: '/app/rescueInfo/getRescueList',
        method: 'get',
        params:{
          licenseNum:this.jkList.searchValue,
          rescueStatus:'3',
          pageNum:this.jkList.pageNum,
          pageSize:this.jkList.pageSize
        }
      }).then(res=>{
        this.jkList.list = res.rows;
        this.jkList.total = res.total;
      })
    },
    gethcList(){
      request({
        url: '/app/rescueInfo/getRescueList',
        method: 'get',
        params:{
          licenseNum:this.hcList.searchValue,
          rescueStatus:'8',
          pageNum:this.hcList.pageNum,
          pageSize:this.hcList.pageSize
        }
      }).then(res=>{
        this.hcList.list = res.rows;
        this.hcList.total = res.total;
      })
    },
    getMsgList(){
      request({
        url: '/announcement/announcement/getOwnMsg',
        method: 'get',
        params:{
          pageNum:this.messageList.pageNum,
          pageSize:this.messageList.pageSize
        }
      }).then(res=>{
        this.messageList.list = res.rows;
        this.messageList.total = res.total;
      })
    },
    getOwnNoRead(){
      request({
        url: '/announcement/announcement/getOwnNoRead',
        method: 'get',
      }).then(res=>{
        this.noReadMsgNum =  res.data||0;
        // this.setAllRead()

      })
    },
    setAllRead(){
      request({
        url: '/announcement/announcement/setAllRead',
        method: 'get',
      }).then(res=>{

      })
    },
  }
}
</script>

<style lang="scss" scoped>
.top-box{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;

}
.cent-box{
  width: 100%;
  margin-bottom: 15px;
  box-sizing: border-box;
  padding: 15px;
  background: #FFFFFF;
}
.box_mess{
  width: 100%;
  display: flex;
  align-items: center;
}
.t_box{
  width: 19%;
  box-sizing: border-box;
  padding: 15px;
  font-size: 24px;
  background: #FFFFFF;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bot-list{
  box-sizing: border-box;
  padding: 15px;
  background: #FFFFFF;
  height: 550px;
  //overflow: scroll;
  //position: relative;
}

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.chart-title{
  padding:10px;
  width: 100%;
  text-align: center;
  margin:0 auto;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
  font-weight: bold;
}
.boxa{
  background: #FFFFFF;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 15px;
  width: 95%;
  border-radius: 10px;
  margin: 10px auto;
}
.box-bs{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px auto;
}
.zc{
  font-size: 14px;
  font-weight: 400;
  color: #363636
}
.hei-title{
  font-size: 16px;
  font-weight: 600;
  color: #363636;
}
.yihang{
  font-size: 14px;
  font-weight: 400;
  color: #363636;
  margin-top: 10px;
}
.right-box{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10px;
}
.janniu{
  width: 120px;
  height: 30px;
  background: #FF4D4F;
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  cursor: pointer;
}
.ques{
  width: 90%;
  margin: 100px auto;

}
.bd-bot{
  width: 100%;
  height: 50px;
  background: #FFFFFF;
  //display: flex;
  //align-items: center;
  //justify-content: center;

  bottom: 0px;
}
</style>
