<template>
  <div class="max-big-box">
    <div class="big-max-box" v-if="pageType==0">
      <!--操作按钮-->
      <div class="top-box">
        <div class="input-box">
          <input class="search-input" type="text" v-model="inputData" placeholder="请输入消息内容/接收人姓名/接收人电话关键字进行查询">
          <div class="dropdown-box" v-for="(item,index) in downList" :key="index">
            <p class="dropdown-left-title">{{item.name}}：</p>
            <div class="dropdown-right-box cursor_pointer"
                 @mouseenter="dropdownClickOpen(index,'1')" @mouseleave="dropdownClickOpen(index,'2')">
              <p class="dropdown-text">{{downList[index].downText}}</p>
              <div class="dropdown-for-max" v-if="downList[index].downType">
                <p v-for="(item,indexTwo) in downList[index].list" :key="indexTwo"
                   :class="{'color-A':downList[index].mouseColor == item}"
                   @mouseenter="colorTypeEnter(index,item)" @mouseleave="colorTypeLeave(index)"
                   @click="dropdownClick(index,item)">{{item}}</p>
              </div>
            </div>
          </div>
          <div class="time-box">
            <p>消息发送日期：</p>
            <p class="cursor_pointer" @click="openTimeBox('1')">{{playTime}}</p>
            <p>-</p>
            <p class="cursor_pointer" @click="openTimeBox('2')">{{endTime}}</p>
          </div>
          <div class="button-box cursor_pointer" @click="clickQuery">
            <img src="~@/assets/images/icon_27.png">
            <p class="cursor_pointer">查询</p>
          </div>
        </div>
        <p class="add-button cursor_pointer" @click="clickPageType" v-if="userPermsData.indexOf('business:messageRemind:add')!=-1">新增</p>
        <p class="del-button cursor_pointer" @click="allDel" v-if="userPermsData.indexOf('business:messageRemind:remove')!=-1">批量删除</p>
        <p class="text-p">已选择{{tableNum}}条</p>
      </div>
      <!--表格-->
      <div class="table-box">
        <el-table
          ref="multipleTable"
          :row-key="getRowKey"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @select-all="handleSelectionChange"
          @select="handleSelectionChange">
          <el-table-column
            :reserve-selection="true"
            type="selection"
            width="40">
          </el-table-column>
          <el-table-column
            type="index"
            :index="indexMethod"
            label="序号"
            width="61">
          </el-table-column>
          <el-table-column
            prop="msgContent"
            label="消息内容"
            width="317">
          </el-table-column>
          <el-table-column
            label="消息类型"
            width="121">
            <template slot-scope="scope">
              {{scope.row.msgType==1?"任务提醒":(scope.row.msgType==2?"首长决策":"")}}
            </template>
          </el-table-column>
          <el-table-column
            prop="relevanceCode"
            label="关联任务单号"
            width="146">
          </el-table-column>
          <el-table-column
            prop="relevanceTask"
            label="关联任务名称"
            width="143">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="发送时间"
            width="111">
          </el-table-column>
          <el-table-column
            prop="receiverName"
            label="消息接受人姓名"
            width="151">
          </el-table-column>
          <el-table-column
            prop="receiverPhone"
            label="消息接受人手机号"
            width="137">
          </el-table-column>
          <el-table-column
            label="状态"
            width="112">
            <template slot-scope="scope">
              <p :class="{'colorA':scope.row.msgStatus == 1,'colorB':scope.row.msgStatus == 2,'colorC':scope.row.msgStatus == 3}"
              >{{scope.row.msgStatus == 1?"未阅":(scope.row.msgStatus == 2?"已阅读未反馈":(scope.row.msgStatus == 3?"已阅读已反馈":""))}}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="lookTime"
            label="查阅时间"
            width="95">
          </el-table-column>
          <el-table-column
            prop="backTime"
            label="反馈时间"
            width="95">
          </el-table-column>
          <el-table-column
            label="操作"
            width="180">
            <template slot-scope="scope">
              <div class="table-min-button">
                <div class="cursor_pointer" @click="handleEdit(scope.$index, scope.row)">
                  <img src="~@/assets/images/icon_36.png">
                  <p>详情</p>
                </div>
                <div v-if="scope.row.msgStatus==1||scope.row.msgStatus==2&&(userPermsData.indexOf('business:planFormulation:dispose')!=-1)" class="cursor_pointer" @click="feedbackClick(scope.$index, scope.row)">
                  <img src="~@/assets/images/icon_38_01.png">
                  <p>去处理</p>
                </div>
                <div v-if="scope.row.msgStatus==3&&userPermsData.indexOf('business:messageRemind:remove')!=-1" class="cursor_pointer" @click="handleDelete(scope.$index, scope.row)">
                  <img src="~@/assets/images/icon_38.png">
                  <p>删除</p>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-size="pagesize"
        :total="total">
      </el-pagination>
      <!--时间日历-->
      <div class="time-max-big-box" v-if="timeType!=0">
        <div class="time-big-box">
          <el-calendar class="time-min-box" v-model="timeValue">
          </el-calendar>
          <div class="button-box">
            <p class="cursor_pointer" @click="openTimeBox('0')">返回</p>
            <p class="cursor_pointer" @click="clearTimeData">清除</p>
            <p class="cursor_pointer" @click="setTimeData">确定</p>
          </div>
        </div>
      </div>
    </div>
    <details-page :dataInfo="dataInfo" v-if="pageType==1"></details-page>
    <new-modify v-if="!newModifyPageType"
      :newModifyData="newModifyData"
      @newModifyLeftClick="newModifyLeftClick"
      @newModifyRightClick="newModifyRightClick"
    ></new-modify>
    <interactive-window
      v-if="windowType"
      :windowData="windowData"
      @windowLeftClick="windowLeftClick"
      @windowRightClick="windowRightClick"
    ></interactive-window>
  </div>
</template>

<script>
  import { messageRemindList,messageRemindDel,messageRemindInfo } from '@/api/userApi'
  export default {
    name: "warehouseMonitoring",//消息提醒
    components:{
      detailsPage: resolve => {require(['@/components/detailsPage'], resolve)},//详情组件
      newModify: resolve => {require(['@/components/newModify'], resolve)},//新建-修改组件
      interactiveWindow: resolve => {require(['@/components/interactiveWindow'], resolve)},//提示弹窗
    },
    data () {
      return {
        userPermsData:localStorage.getItem('userPerms'),
        inputData:"",
        // 弹窗状态
        windowType:false,
        //弹窗组件数据
        windowData:{},
        // 详情页状态
        pageType:0,
        //给组件传参数据
        dataInfo:[],
        //日历时间
        timeValue: new Date(),
        timeType:0,
        //下拉框
        downList:[
          {
            name:"状态",
            downType:false,
            downText:"全部",
            mouseColor:"",
            list:["全部","未阅","已阅未反馈","已阅已反馈"],
            idType:["0","1","2","3"]
          },
        ],
        //搜索时间
        playTime:"请选择时间",
        endTime:"请选择时间",
        //表格限制
        pagesize: 8,
        currentPage:1,
        //列表总数
        total:0,
        /*数据*/
        tableData:[],
        //勾选
        multipleSelection:[],
        tableNum:0,
        // 新增-修改页面状态
        newModifyPageType:true,
        //新增-修改页面数据
        newModifyData:{}
      }
    },

    created(){

    },
    mounted() {
      if(localStorage.getItem("taskProcessingHome")&&localStorage.getItem("taskProcessingHome")!="undefined"){
        this.inputData = localStorage.getItem("taskProcessingHome");
        localStorage.removeItem("taskProcessingHome")
      }
      this.getListData();
    },
    methods: {
      //点击查询
      clickQuery(){
        this.currentPage = 1;
        this.getListData();
      },
      // 单独删除
      async clickDel(id){
        let ids = [];
        ids.push(id)
        const { data } = await messageRemindDel(ids);
        if(data.code==200){
          this.windowData = {
            type:"2",
            title:"提示",
            text:"操作成功",
          };
          this.windowType = !this.windowType;
          this.$refs.multipleTable.clearSelection();
          this.getListData();
        }
      },
      //批量删除
      async clickAllDel () {
        let self = this;
        let ids = [];
        let num = 0;
        for(let i=0;i<self.multipleSelection.length;i++){
          ids.push(self.multipleSelection[i].id)
        }
        const { data } = await messageRemindDel(ids);
        if(data.code==200){
          this.windowData = {
            type:"2",
            title:"提示",
            text:"操作成功",
          };
          this.windowType = !this.windowType;
          this.$refs.multipleTable.clearSelection();
          this.getListData();
        }
      },
      //数据列表
      async getListData () {
        let self = this;
        let obj={
          searchValue:self.inputData,
          msgType:"",
          pageSize:self.pagesize,
          pageNum:self.currentPage,
          "params[beginTime]":self.playTime=="请选择时间"?"":self.playTime,
          "params[endTime]":self.endTime=="请选择时间"?"":self.endTime,
        };
        for(let i=0;i<self.downList[0].list.length;i++){
          if(self.downList[0].downText==self.downList[0].list[i]){
            obj.msgType = self.downList[0].idType[i];
          }
        }
        const { data } = await messageRemindList(obj);
        if(data.code==200){
          this.tableData = data.rows;
          this.total = data.total;
          this.tableNum = 0;
          this.$forceUpdate();
        }
      },
      //新建组件状态切换
      clickPageType(){
        let newData = {
          title:"新增消息",
          list:[
            {
              name:"消息内容",
              value:"",
              textArea:true
            },
            {
              name:"消息类型",
              value:"",
              list:["系统消息","推送消息"]
            },
            {
              name:"关联任务单号",
              value:"",
              list:["RWDH20201010091422","RWDH20211010091122","RWDH20211011091122"]
            },
            {
              name:"关联任务名称",
              value:"",
              list:["支援型任务","防护型任务","震灾任务"]
            },
            {
              name:"消息接受人姓名",
              value:"",
            },
            {
              name:"消息接受人手机号",
              value:"",
            },
          ]
        };
        this.newModifyData = {...newData};
        this.pageType=2;
        this.newModifyPageType = !this.newModifyPageType;
      },
      // 批量删除
      allDel(){
        let self = this;
        if(this.multipleSelection[0]){
          for(let i=0;i<self.multipleSelection.length;i++){
            if (self.multipleSelection[i].msgType!=3){
              this.windowData = {
                type:"3",
                title:"提示",
                text:"选中消息中有未处理的消息",
              };
              this.windowType = !this.windowType;
              return
            }
          }
          this.windowData = {
            type:"1",
            title:"提示",
            text:"确定要批量删除这些信息吗?",
            leftButton:"取消",
            rightButton:"确定",
            cType:"1",
          };
          this.windowType = !this.windowType;
        }else{
          this.windowData = {
            type:"3",
            title:"提示",
            text:"您没有勾选任何数据!",
          };
          this.windowType = !this.windowType;
        }
      },
      //新增-修改组件内左侧按钮事件
      newModifyLeftClick(){
        this.pageType=0;
        this.newModifyPageType = !this.newModifyPageType;
      },
      //新增-修改组件内左侧按钮事件
      newModifyRightClick(data){
        this.newModifyPageType = !this.newModifyPageType;
        console.log("右键传值",data);
        this.windowData = {
          type:"2",
          title:"提示",
          text:"操作成功",
          leftButton:"取消",
          rightButton:"确定",
        };
        this.pageType=0;
        this.windowType = !this.windowType;
      },
      //表格绑定ID
      getRowKey (row) {
        return row.id
      },
      indexMethod(index) {
        return (this.currentPage-1)*this.pagesize+index+1;
      },
      //时间选择事件
      openTimeBox(type){
        this.timeType=type
      },
      setTimeData(){
        let year = this.timeValue.getFullYear();
        let month = this.timeValue.getMonth()+1;
        let day = this.timeValue.getDate();
        if(this.timeType==1){
          this.playTime = year+'-'+month+'-'+day;
        }else if(this.timeType==2){
          this.endTime = year+'-'+month+'-'+day;
        }
        this.timeType = 0;
      },
      clearTimeData(){
        if(this.timeType==1){
          this.playTime = "请选择时间";
        }else if(this.timeType==2){
          this.endTime = "请选择时间";
        }
        this.timeType = 0;
      },
      //下拉菜单进入悬浮状态
      colorTypeEnter(type,item){
        this.downList[type].mouseColor=item;
      },
      //下拉菜单离开悬浮状态
      colorTypeLeave(type){
        this.downList[type].mouseColor = "";
      },
      // 下拉菜单选项悬浮事件
      dropdownClickOpen(type,state){
        if(state==1){
          this.downList[type].downType = true
        }else if(state==2){
          this.downList[type].downType = false
        }
      },
      // 下拉菜单点击事件
      dropdownClick(type,item){
        this.downList[type].downText = item;
        this.downList[type].downType = false;
      },
      // 状态开关点击
      imgClick(data){
        if(data.state==1){
          data.state=2
        }else{
          data.state=1
        }
      },
      //翻页
      handleCurrentChange(val) {
        console.log(`当前页: `,val);
        this.currentPage = val;
        this.getListData();
      },
      // 查看
      async handleEdit(index, row) {
        const { data } = await messageRemindInfo(row.id);
        if(data.code==200){
          console.log("data",data);
          console.log("查看",index, row);
          this.dataInfo =[
            {
              name:"消息内容",
              value:data.data.msgContent,
            },
            {
              name:"消息类型",
            },
            {
              name:"关联任务单号",
              value:data.data.relevanceCode,
            },
            {
              name:"关联任务名称",
              value:data.data.relevanceTask,
            },
            {
              name:"发送时间",
              value:data.data.createTime,
            },
            {
              name:"消息接受人姓名",
              value:data.data.receiverName,
            },
            {
              name:"消息接受人手机号",
              value:data.data.receiverPhone,
            },
            {
              name:"状态",
            },
            {
              name:"查阅时间",
              value:data.data.lookTime,
            },
            {
              name:"反馈时间",
              value:data.data.backTime,
            },
          ];
          if(data.data.msgType==1){
            this.dataInfo[1].value = "任务提醒";
          }else if(data.data.msgType==2){
            this.dataInfo[1].value = "首长决策";
          }
          if(data.data.msgStatus==1){
            this.dataInfo[7].value = "未阅";
            this.dataInfo[7].color = "#ff6b6a"
          }else if(data.data.msgStatus==2){
            this.dataInfo[7].value = "已阅读未反馈";
            this.dataInfo[7].color = "#f99a00"
          }else if(data.data.msgStatus==3){
            this.dataInfo[7].value = "已阅读已反馈";
            this.dataInfo[7].color = "#2fda26"
          }
          this.pageType = 1;
        }
      },
      // 处理/反馈
      feedbackClick(index, row){
        let obj = {
          pathName:"taskProcessing",
          name:row.relevanceTask,
        };
        this.$parent.childComponentMethods(obj);
      },
      //删除
      handleDelete(index, row) {
        this.windowData = {
          type:"1",
          title:"提示",
          text:"确定要删除这条信息吗?",
          leftButton:"取消",
          rightButton:"确定",
          cType:"2",
          newId:row.id
        };
        this.windowType = !this.windowType;
      },
      //勾选
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.tableNum = this.multipleSelection.length
      },
      //供子组件调用方法
      outPage(){
        this.pageType = 0;
        this.getListData();
      },
      //弹窗组件左侧按钮方法-对应取消方法
      windowLeftClick(){
        this.windowType = !this.windowType;
      },
      //弹窗组件右侧按钮方法
      windowRightClick(data){
        this.windowType = false;
        if(data.cType==1){
          this.clickAllDel();
        }else if(data.cType==2){
          this.clickDel(data.newId);
        }
      },
    }
  }
</script>

<style scoped lang="stylus">
.max-big-box
  display flex
  flex-direction column
  flex:1;
  .big-max-box
    display flex
    flex-direction column
    flex:1;
    //搜索与操作按钮
    .top-box
      height:30px;
      display flex
      .input-box
        width:1370px;
        display flex
        margin-left:105px;
        .search-input
          height:28px;
          width:290px;
          border:1px solid $theme;
          padding-left:10px;
        .dropdown-box
          display flex
          color:$color_ff;
          z-index:1;
          margin-left:30px;
          .dropdown-left-title
            line-height:30px;
            font-size:$font_14;
          .dropdown-right-box
            font-size:$font_12;
            .dropdown-text
              width:160px;
              height:30px;
              line-height:30px;
              background:url("~@/assets/images/button_15.png");
              background-size:100% 100%;
            .dropdown-for-max
              background:$backColor1;
              border-bottom-right-radius 4px
              border-bottom-left-radius 4px
              p
                width:160px;
                height:30px;
                line-height:30px;
              .color-A
                /*
                background:$backColor2 !important;
                color:$color_ff !important;
                */
                color:$theme !important;
                border-bottom-right-radius 4px
                border-bottom-left-radius 4px
        .time-box
          width:400px;
          display flex
          margin-left:20px;
          p
            color:$color_ff;
          p:nth-child(1)
            width:120px;
            line-height:30px;
            font-size:$font_14;
          p:nth-child(2)
            width:120px;
            height:30px;
            background url("~@/assets/images/button_08.png")
            background-size 100% 100%
            font-size:$font_12;
            line-height:30px;
          p:nth-child(3)
            width:27px;
            line-height:30px;
          p:nth-child(4)
            width:120px;
            height:30px;
            background url("~@/assets/images/button_08.png")
            background-size 100% 100%
            line-height:30px;
            font-size:$font_12;
        .button-box
          margin-left:32px;
          display flex
          height:30px;
          width:80px;
          background:url("~@/assets/images/button_03.png");
          background-size:100% 100%;
          img
            display block
            height:20px;
            width:20px;
            margin:5px 6px 0 13px;
          p
            line-height:30px;
            font-size:$font_12;
            color:$color_ff;
      .add-button
        width:110px;
        height:30px;
        background:url("~@/assets/images/button_06_1.png");
        background-size:100% 100%;
        line-height:30px
        color:$color_ff;
        font-size:$font_12;
        padding-left:44px;
        text-align left
      .del-button
        margin-left:30px;
        width:110px;
        height:30px;
        background:url("~@/assets/images/button_05_1.png");
        background-size:100% 100%;
        line-height:30px
        color:$color_ff;
        font-size:$font_12;
        padding-left:41px;
        text-align left
      .text-p
        width:90px;
        color:$color_ff;
        line-height:30px
        font-size:$font_12;
    //表格
    .table-box
      width:1710px !important;
      margin:20px 105px;
      text-align center !important
      .colorA
        color:$theme3;
      .colorB
        color:$theme2;
      .colorC
        color:$theme1;
      .table-min-button
        width:140px;
        margin:0 auto;
        display flex
        div:nth-child(1)
          height:20px;
          width:60px;
          font-size:$font_14;
          color:$theme;
          display flex
          margin-right:11px;
          img
            display block
            height:20px;
            width:20px;
            margin-right:4px;
        div:nth-child(2)
          height:20px;
          width:70px;
          font-size:$font_14;
          color:$theme3;
          display flex
          img
            display block
            height:20px;
            width:20px;
            margin-right:4px;
    //时间日历
    .time-max-big-box
      z-index 6
      height:100%;
      width:100%;
      position: absolute
      top:0;
      left:0;
      background:rgba(0,0,0,0.3);
      .time-big-box
        z-index 6
        height:750px;
        width:660px;
        position: absolute
        top:50%;
        left:50%;
        transform :translate3d(-50%,-50%,0)
        margin:auto;
        background $color_ff
        border-radius:8px;
        border:4px solid $theme;
        .button-box
          display flex
          color:$color_ff;
          width:390px;
          margin:20px auto;
          p:nth-child(1)
            height:30px;
            line-height:30px;
            width:120px;
            background:url("~@/assets/images/button_10.png");
            background-size 100% 100%
          p:nth-child(2)
            margin-left:20px;
            height:30px;
            line-height:30px;
            width:120px;
            background:url("~@/assets/images/button_05.png");
            background-size 100% 100%
          p:nth-child(3)
            margin-left:20px;
            height:30px;
            line-height:30px;
            width:120px;
            background:url("~@/assets/images/button_02.png");
            background-size 100% 100%
  //修改日期选择样式
  /*
  .el-calendar
    background $color_ff
  */
  //修改table表格样式
  .el-table
    background rgba(6,177,240,0.2)
  .el-table /deep/ tr
  .el-table /deep/ th
    background rgba(6,177,240,0)
  .el-table::before
    height:0;
  .el-table /deep/ .cell
    max-height:46px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  .el-table /deep/ td
  .el-table /deep/ th.is-leaf
    border-bottom:0!important;
  .el-table /deep/ .el-checkbox__inner
    //background rgba(6,177,240,0.2)
    border 1px solid #216f93 !important
  .el-table /deep/ thead
    color:$color_ff;
  .el-table
    color:$color_a1
  .el-table /deep/ th
    text-align-last: center;
  .el-table /deep/ td
    text-align-last: center;
  .el-table /deep/ tbody tr:hover > td
    background rgba(6,177,240,0.2)
    color:$theme;
  .el-table /deep/ .el-checkbox
    width:14px;
    margin:0 auto;
    display block
  //修改动作条样式
  .el-pagination.is-background /deep/ .btn-next
  .el-pagination.is-background /deep/ .btn-prev
  .el-pagination.is-background /deep/ .el-pager li
    background:url("~@/assets/images/button_13.png");
    color:$color_ff;
  .el-pagination.is-background /deep/ .el-pager li:not(.disabled).active
    background:url("~@/assets/images/button_14.png");
    color:$color_ff;
  .colorA
    color :$theme;
  ::-webkit-input-placeholder
    color: $border_1;
  ::-moz-placeholder
    color: $border_1;
  ::-ms-input-placeholder
    color: $border_1;
</style>
