
<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import {Search} from '@element-plus/icons-vue'

import { getBeingPushedReportType , getBeingPushedReportList,setPushingTime} from '@/api/api.js';
import mPage from '@/components/mPage.vue';

const searchParams=reactive({
  CreateTimeStart:"",
  CreateTimeEnd:"",
  PushTimeStart:"",
  PushTimeEnd:"",
  ReportType:"",
  Title:"",
  CurrentIndex:1,
  PageSize:10
})
const total=ref(0)
// 创建时间范围
const createTimeRange=ref([])
// 待推送时间范围
const pushTimeRange=ref([])
const dataList=ref([])
// 显示设置推送时间的时间选择器 -- 数组
const showPushingTime=ref(false)
const pushingTimeSet=reactive({
  PushTime:'',
  SendId:''
})
// 储存临时的推送时间，用于判断推送时间是否改变
const pushTimeTemp=ref("") 
const reportTypeArray=ref([])
// 计算序号
const pageCounts=ref(0)
const levelOptions={
  1:'紧急',
  2:'优先',
  3:'普通'
}

const PushingTimeFormRef=ref(null)

// 获取待推送报告类型
const getReportType=()=>{
  getBeingPushedReportType().then(res=>{
    if(res.Ret==200){
      reportTypeArray.value = res.Data.List || []
    }
  })
}
const getList=(type='')=>{
  // 是否是搜索
  if(type == 'search'){
    searchParams.CurrentIndex=1
  }
  getBeingPushedReportList(searchParams).then(res=>{
    if(res.Ret==200){
      dataList.value = res.Data.List || []
      total.value = res.Data.Paging.Totals
      pageCounts.value = (searchParams.CurrentIndex-1)*searchParams.PageSize
    }
  })
}
// 查询日期范围改变 type- create:创建 push:待推送
const dateRangeChange=(value,type)=>{
  // console.log(value,type);
  if(type == "create"){
    searchParams.CreateTimeStart = value?value[0]:''
    searchParams.CreateTimeEnd = value?value[1]:''
  }else{
    searchParams.PushTimeStart = value?value[0]:''
    searchParams.PushTimeEnd = value?value[1]:''
  }
  getList('search')
}
//切换页码
const pageChange=(page_no)=>{
  searchParams.CurrentIndex=page_no
  getList()
}
// 打开设置推送时间弹窗
const openSetTimeDia=(row)=>{
  pushingTimeSet.SendId = row.SendId
  pushTimeTemp.value = pushingTimeSet.PushTime = row.PushTime
  showPushingTime.value=true
}
// 设置推送时间 - 提交
const submitPushTime=()=>{
  if(pushTimeTemp.value == pushingTimeSet.PushTime){
    // 没有改变
    setCancel()
    return 
  }
  PushingTimeFormRef.value.validate(valid=>{
    if(valid){
      // 秒数重置为零
      pushingTimeSet.PushTime = pushingTimeSet.PushTime.substring(0,17)+'00'
      setPushingTime(pushingTimeSet).then(res=>{
        if(res.Ret == 200){
          // console.log(res.Ret);
          ElMessage.success(res.Msg)
          getList('search')
          setCancel()
        }
      })
    }
  })
}
// 取消推送
const setCancel=()=>{
  pushingTimeSet.PushTime=''
  PushingTimeFormRef.value.clearValidate()
  showPushingTime.value=false
}

getReportType()
getList()
</script>

<template>
  <div>
    <!-- 搜索区域 -->
    <div class="search-zone">
      <div class="search-item" style="margin: 0 30px 10px 0">
        创建时间：
        <el-date-picker
          v-model="createTimeRange"
          type="daterange"
          style="width: 320px"
          range-separator="至"
          value-format="YYYY-MM-DD"
          @change="(e) => dateRangeChange(e, 'create')"
          start-placeholder="活动开始日期"
          end-placeholder="活动结束日期"
        ></el-date-picker>
      </div>
      <div class="search-item" style="margin: 0 30px 10px 0">
        待推送时间：
        <el-date-picker
          v-model="pushTimeRange"
          type="daterange"
          style="width: 320px"
          range-separator="至"
          value-format="YYYY-MM-DD"
          @change="(e) => dateRangeChange(e, 'push')"
          start-placeholder="活动开始日期"
          end-placeholder="活动结束日期"
        ></el-date-picker>
      </div>
      <el-select
        v-model="searchParams.ReportType"
        style="margin: 0 30px 10px 0; width: 240px"
        placeholder="请选择产品类型"
        @change="getList('search')"
        clearable
        filterable 
      >
        <el-option
          v-for="(item, index) in reportTypeArray"
          :key="index"
          :label="item.ReportType"
          :value="item.ReportType"
        ></el-option>
      </el-select>
      <el-input
        v-model="searchParams.Title"
        placeholder="请输入推送标题"
        style="width: 432px; margin-bottom: 10px"
        :prefix-icon="Search"
        clearable
        @input="getList('search')"
      ></el-input>
    </div>
    <!-- 表格区域 -->
    <div class="table-zone">
      <el-table :data="dataList" border>
        <el-table-column label="序号" align="center" width="100px">
          <template #default="scope">
            {{ scope.$index + pageCounts + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          label="推送标题"
          align="center"
          prop="Title"
        ></el-table-column>
        <el-table-column
          label="产品类型"
          align="center"
          prop="ReportType"
          width="160px"
        ></el-table-column>
        <el-table-column
          label="优先类型"
          align="center"
          prop="Level"
          width="160px"
        >
          <template #default="{row}">
            <span>
              {{levelOptions[row['Level']]||''}}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="推送标签"
          align="center"
          prop="LabelStr"
        ></el-table-column>
        <el-table-column
          label="待推送时间"
          align="center"
          width="160px"
          prop="PushTime"
        ></el-table-column>
        <el-table-column
          label="创建时间"
          align="center"
          show-overflow-tooltip
          prop="CreateTime"
          width="160px"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="150px">
          <template #default="{ row }">
            <span
              style="cursor: pointer; font-size: 14px; color: #409eff"
              @click="openSetTimeDia(row)"
              >设置待推送时间</span
            >
          </template>
        </el-table-column>
        <template #empty >
          <div class="table-noData">
            <img src="~@/assets/img/cus_m/nodata.png" />
            <span>暂无数据</span>
          </div>
        </template>
      </el-table>
    </div>
    <!-- 页数 -->
    <m-page
      :page_no="searchParams.CurrentIndex"
      :pageSize="searchParams.PageSize"
      :total="total"
      style="position: absolute; right: 50px; bottom: 50px"
      @handleCurrentChange="pageChange"
    />
    <!-- 设置推送时间弹窗 -->
    <el-dialog
      title="设置待推送时间"
      v-model="showPushingTime"
      :close-on-click-modal="false"
      append-to-body
      width="592px"
      @closed="setCancel"
    >
      <el-form :model="pushingTimeSet" ref="PushingTimeFormRef">
        <el-form-item
          prop="PushTime"
          style="margin-left: 80px"
          :rules="{
            required: true,
            message: '请选择待推送时间',
            trigger: 'change',
          }"
        >
          <el-date-picker
            v-model="pushingTimeSet.PushTime"
            placeholder="请选择日期"
            type="datetime"
            format="YYYY-MM-DD HH:mm"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 256px"
            :clearable="false"
          ></el-date-picker>
        </el-form-item>
        <el-form-item style="text-align: center; padding-top: 20px">
          <el-button @click="setCancel" style="width: 112px">取消</el-button>
          <el-button
            type="primary"
            @click="submitPushTime"
            style="margin-left: 40px; width: 112px"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
    .search-zone{
      display: flex;
      flex-wrap: wrap;
      .search-item{
        font-weight: 400;
        font-size: 16px;
        color:#666666 ;
      }
    }
    .table-zone{
      overflow: auto;
      flex-grow: 1;
      margin-top: 10px;
      margin-bottom: 50px;
      .table-noData{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 18vh 0;
        img{
          height: 110px;
          width: 136px;
        }
        span{
          font-weight: 400;
          font-size: 16px;
          color: #999999;
        }
      }
    }
</style>
