<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
      >
        <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: 442px; margin-bottom: 10px"
        prefix-icon="el-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 slot-scope="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 slot-scope="{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 slot-scope="{ row }">
            <span
              style="cursor: pointer; font-size: 14px; color: #409eff"
              @click="openSetTimeDia(row)"
              >设置待推送时间</span
            >
          </template>
        </el-table-column>
        <div slot="empty" class="table-noData">
           <tableNoData text="暂无数据" size="mini"/>
        </div>
      </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="设置待推送时间"
      :visible.sync="showPushingTime"
      :close-on-click-modal="false"
      append-to-body
      width="592px"
      @closed="setCancel"
    >
      <el-form :model="pushingTimeSet" ref="PushingTimeForm">
        <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>

<script>
import { getBeingPushedReportType , getBeingPushedReportList,setPushingTime} from 'api/api.js';
import mPage from '@/components/mPage.vue';
  export default {
    name:"pushSetting",
    components:{mPage},
    data() {
      return {
        searchParams:{
          CreateTimeStart:"",
          CreateTimeEnd:"",
          PushTimeStart:"",
          PushTimeEnd:"",
          ReportType:"",
          Title:"",
          CurrentIndex:1,
          PageSize:10
        },
        total:0,
        // 创建时间范围
        createTimeRange:[],
        // 待推送时间范围
        pushTimeRange:[],
        dataList:[],
        // 显示设置推送时间的时间选择器 -- 数组
        showPushingTime:false,
        pushingTimeSet:{
          PushTime:'',
          SendId:''
        },
        // 储存临时的推送时间，用于判断推送时间是否改变
        pushTimeTemp:"", 
        reportTypeArray:[],
        // 计算序号
        pageCounts:0,
        levelOptions:{
          1:'紧急',
          2:'优先',
          3:'普通'
        },
      }
    },
    created(){
      this.getReportType()
      this.getList()
    },
    methods: {
      // 获取待推送报告类型
      getReportType(){
        getBeingPushedReportType().then(res=>{
          if(res.Ret==200){
            this.reportTypeArray = res.Data.List || []
          }
        })
      },
      getList(type=''){
        // 是否是搜索
        if(type == 'search'){
          this.searchParams.CurrentIndex=1
        }
        getBeingPushedReportList(this.searchParams).then(res=>{
          if(res.Ret==200){
            this.dataList = res.Data.List || []
            this.total = res.Data.Paging.Totals
            this.pageCounts = (this.searchParams.CurrentIndex-1)*this.searchParams.PageSize
          }
        })
      },
      // 查询日期范围改变 type- create:创建 push:待推送
      dateRangeChange(value,type){
        // console.log(value,type);
        if(type == "create"){
          this.searchParams.CreateTimeStart = value?value[0]:''
          this.searchParams.CreateTimeEnd = value?value[1]:''
        }else{
          this.searchParams.PushTimeStart = value?value[0]:''
          this.searchParams.PushTimeEnd = value?value[1]:''
        }
        this.getList('search')
      },
      //切换页码
      pageChange(page_no){
        this.searchParams.CurrentIndex=page_no
        this.getList()
      },
      // 打开设置推送时间弹窗
      openSetTimeDia(row){
        this.pushingTimeSet.SendId = row.SendId
        this.pushTimeTemp = this.pushingTimeSet.PushTime = row.PushTime
        this.showPushingTime=true
      },
      // 设置推送时间 - 提交
      submitPushTime(){
        if(this.pushTimeTemp == this.pushingTimeSet.PushTime){
          // 没有改变
          this.setCancel()
          return 
        }
        this.$refs.PushingTimeForm.validate(valid=>{
          if(valid){
            // 秒数重置为零
            this.pushingTimeSet.PushTime = this.pushingTimeSet.PushTime.substring(0,17)+'00'
            setPushingTime(this.pushingTimeSet).then(res=>{
              if(res.Ret == 200){
                // console.log(res.Ret);
                this.$message.success(res.Msg)
                this.getList('search')
                this.setCancel()
              }
            })
          }
        })
      },
      // 取消推送
      setCancel(){
        this.pushingTimeSet.PushTime=''
        this.$refs.PushingTimeForm.clearValidate()
        this.showPushingTime=false
      },
    },
  }
</script>

<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>
