<template>
    <div>
      <div class="app-container" style="margin-bottom: 12px;padding-bottom: 5px;border-radius: 10px;">
        <el-form
          ref="querform" 
          :model="queryParams" 
          :inline="true" 
        >
            <el-form-item label="换电站" prop="stationCode">
                <el-select v-model="queryParams.stationCode" placeholder="请选择换电站" style="width: 200px;">
                    <el-option v-for="n in yunList" :label="n.name" :value="n.code" />
                </el-select>
            </el-form-item>
            <el-form-item label="传送方向" prop="direction">
              <el-select v-model="queryParams.direction" placeholder="请选择传送方向" style="width: 200px;">
                  <el-option 
                    v-for="n in direction" 
                    :value="n.dictValue" 
                    :label="n.dictName" 
                  />
              </el-select>
            </el-form-item>
            <el-form-item label="消息类型" prop="type">
              <el-select v-model="queryParams.type" placeholder="请选择信息类型" style="width: 200px;">
                  <el-option 
                    v-for="n in msgtype" 
                    :value="n.dictValue" 
                    :label="n.dictName" 
                  />
              </el-select>
            </el-form-item>
            <el-form-item label="方法" prop="messageFunction">
              <el-input v-model="queryParams.messageFunction" placeholder="请输入方法" clearable style="width: 160px" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handBtnqu">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
      </div>
      <div class="app-container" style="margin-bottom: 12px;border-radius: 10px;">

        <!-- <el-tooltip class="item" effect="dark" :content="search? '隐藏搜索' : '显示搜索'" placement="top">
          <el-button size="mini" circle icon="Search" @click="search = !search" />
        </el-tooltip> -->
        <el-table 
          style="width:100%;margin-top: 10px;"
          :data="yysList"
          border
          stripe
          max-height="620px"
        >

        <!-- {{ (queryParams.pageNo - 1) * queryParams.pageSize + index + 1 }} -->
            <el-table-column type="index" min-width="50" align="center">
              <template  #default="{ $index }">
                <div>{{(queryParams.pageNo - 1) * queryParams.pageSize+ $index + 1}}</div>
              </template>
            </el-table-column>
            <el-table-column label="换电站" min-width="100" align="center" prop="stationCode" :show-overflow-tooltip="true" />
            <el-table-column label="传送方向" min-width="100" align="center" prop="direction" :show-overflow-tooltip="true" /> 
            <el-table-column label="消息类型" min-width="100" align="center" prop="type" :show-overflow-tooltip="true" />
            <el-table-column label="方法" min-width="120" align="center" prop="messageFunction" :show-overflow-tooltip="true" />
            <el-table-column label="内容" min-width="500" prop="content">
              <template #default="scope">
                <div style="word-wrap: break-word;">{{scope.row.content}}</div>
              </template>
            </el-table-column> 
          </el-table>
          <div v-if="total > 10" style="display: flex;justify-content: right;padding-top:20px;">
            <el-pagination
              v-model:current-page="queryParams.pageNo"
              v-model:page-size="queryParams.pageSize"
              :page-sizes="[10, 20, 30, 40]"
              background
              size="small"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="getyys"
            />
          </div>
          
      </div>
    </div>
  </template>
  <script setup lang="ts">
    import { 
      gethdzlist
    } from '@/api/swapstation/hdz'

    import { 
      mqttlist
    } from '@/api/swapstation/mqtt'

    import { 
      getdict
    } from '@/api/systemSet/dict'

    import { ref,reactive} from 'vue'

      let search = ref(true)

      let queryParams = reactive({
        pageSize:20,	      //每页条数
        pageNo:1,	          //页数
        stationCode:'',     //换电站编码
        direction:'',	      //传送方向
        type:'',	          //消息类型
        messageFunction:''	//方法 stationInfo
      })
      
      //查询
      let total = ref(0)
      let yysList = ref<any>([])
      function handBtnqu(){
        queryParams.pageNo = 1
        total.value = 0
        getyys()
      }
      
      //获取传送方向字典
      let direction = ref<any>([])
      getdict({
        typeCode:'mqttcsfx'
      }).then(rps => {
        direction.value = rps.data
      })  

      //获取消息类型字典
      let msgtype = ref<any>([])
      getdict({
        typeCode:'mqttxxtype'
      }).then(rps => {
        msgtype.value = rps.data
      })
      


      //初始查询换电站
      let yunList = ref<any>([])

      gethdzlist({
          pageSize:100,	      //每页条数
          pageNo:1,	          //页数
          proxyId:'',	          //归属运营商ID
          name:'',	          //站点名称
          code:'',	          //站点编码
          status:'',	          //状态：1-正常营业，2-正常停运，3-故障停运，4-指令停运，9-其它
          type:'',	          //站点类型ID
        }).then(rps => {
            if(rps.data){
                let list = (rps.data as any).records
                yunList.value = list?list:[]
                //queryParams.stationCode = list[0].code
                //getyys()
            }
        })
        getyys()
      


      function getyys() {
        yysList.value.splice(0)
        mqttlist(queryParams).then(rps => {
            if(rps.data){
              yysList.value = (rps.data as any).records
              total.value = (rps.data as any).total
            }
        })
      }

      function handleSizeChange(val:number) {
        queryParams.pageSize = val
        getyys()
      }
      
      //重置
      let querform = ref()
      function resetQuery() {
        querform.value?.resetFields()
      }
  
  </script>
  <style scoped>
  .el-divider--horizontal{
    border-color:#5b98cd;
  }
  </style>