<template>
   <div style="display: flex">
    <el-card style="width: 18%; margin-right: 18px; border-radius: 6px">
      <el-tabs v-model="activeNametree" type="card" @tab-click="tabClick" stretch>
        <!-- <el-tab-pane label="按分类" name="grp"></el-tab-pane> -->
        <el-tab-pane label="按机构" name="org"></el-tab-pane>
      </el-tabs>
      <el-tree
        :data="hosdata"
        :props="defaultProps"
        node-key="spdId"
        @node-click="handleNodeClick"
        default-expand-all="true"
        style="margin-top: 10px"
      >
      </el-tree>
    </el-card>
  <div class="right-common-box">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      
      <el-form
        :model="listQuery"
        ref="queryForm"
        :inline="true"
        style="display: flex; height: 33px;"
      >
      <!-- <div style="margin-left:10px"> -->
        <div>
        <!-- <div style="position: absolute;left: 30%;z-index:1;top: 133px;"> -->
          <el-radio-group v-model="msgClass" @input="clickMsg">
            <el-radio-button label="0">资质管理</el-radio-button>
            <el-radio-button label="1">业务</el-radio-button>
            <el-radio-button label="2">审核</el-radio-button>
            <el-radio-button label="3">对账</el-radio-button>
            <el-radio-button label="4">库存管理</el-radio-button>
          </el-radio-group>
        </div>
        
        <div style="margin-left: 20px">
          <el-form-item>
            <el-input v-model="listQuery.msgTitle" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-button type="primary" @click="getMess('search')">查询</el-button>
          <el-button  @click="reset()">重置</el-button>
        </div>
      </el-form>
      <div style="margin-top:10px">
      <el-button type="primary" @click="handleRead('search')">标为已读</el-button>
        <el-button @click="handleDel('search')" type="danger" plain>全部删除</el-button>
      </div>
      <el-tab-pane label="全部" name="first">
        <el-table
          v-loading="listLoading"
          element-loading-text="加载中"
          :data="list"
          fit
          stripe
          border
          height="480px"
          style="margin-top: 20px"
          @selection-change="handleSelectionChange"
          row-key="id"
          ref="multipleTable1"
        >
          <template slot="empty">
            <img src="@/assets/nopage.png" alt />
            <p>暂无数据</p>
          </template>
          <el-table-column
            type="selection"
            width="60"
            :reserve-selection="true"
            :selectable="selected"
          />
          <el-table-column label="" prop="status">
            <template slot-scope="scope">
              <early-warning :info="scope.row"></early-warning>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <yl-pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.current"
          :limit.sync="listQuery.size"
          @pagination="getMess"
        />
      </el-tab-pane>
      <el-tab-pane label="预警消息" name="warning">
        <el-table
          v-loading="listLoading"
          element-loading-text="加载中"
          :data="list"
          fit
          stripe
          border
          height="500px"
          style="margin-top: 20px"
          @selection-change="handleSelectionChange"
          row-key="id"
          ref="multipleTable2"
        >
          <template slot="empty">
            <img src="@/assets/nopage.png" alt />
            <p>暂无数据</p>
          </template>
          <el-table-column
            type="selection"
            width="60"
            :reserve-selection="true"
            :selectable="selected"
          />
          <el-table-column label="" prop="status">
            <template slot-scope="scope">
              <early-warning :info="scope.row"></early-warning>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <yl-pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.current"
          :limit.sync="listQuery.size"
          @pagination="getMess"
        />
      </el-tab-pane>
      <el-tab-pane label="通知消息" name="notice"> 
        <el-table
          v-loading="listLoading"
          element-loading-text="加载中"
          :data="list"
          fit
          stripe
          border
          height="500px"
          style="margin-top: 20px"
          @selection-change="handleSelectionChange"
          row-key="id"
          ref="multipleTable3"
        >
          <template slot="empty">
            <img src="@/assets/nopage.png" alt />
            <p>暂无数据</p>
          </template>
          <el-table-column
            type="selection"
            width="60"
            :reserve-selection="true"
            :selectable="selected"
          />
          <el-table-column label="" prop="status">
            <template slot-scope="scope">
              <early-warning :info="scope.row"></early-warning>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <yl-pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.current"
          :limit.sync="listQuery.size"
          @pagination="getMess"
        />
      </el-tab-pane>
      <el-tab-pane label="通告消息" name="inform">
        <el-table
          v-loading="listLoading"
          element-loading-text="加载中"
          :data="list"
          fit
          stripe
          border
          height="500px"
          style="margin-top: 20px"
          @selection-change="handleSelectionChange"
          row-key="id"
          ref="multipleTable4"
        >
          <template slot="empty">
            <img src="@/assets/nopage.png" alt />
            <p>暂无数据</p>
          </template>
          <el-table-column
            type="selection"
            width="60"
            :reserve-selection="true"
            :selectable="selected"
          />
          <el-table-column label="" prop="status">
            <template slot-scope="scope">
              <early-warning :info="scope.row"></early-warning>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <yl-pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.current"
          :limit.sync="listQuery.size"
          @pagination="getMess"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
   </div>
</template>

<script>
import earlyWarning from "@/views/components/early-warning.vue";
import ylPagination from "@/components/yl-pagination";
import {queryMsgPage,updateMsgStas,deleteMsg} from "@/api/messageCenter/index"
import { selectSpdList} from "@/api/orderManage-sup/index";
export default {
  components: {
    ylPagination,
    earlyWarning,
  },
  data() {
    return {
      activeNametree: "org",
      hosdata: [],
      spdId: null,
      defaultProps: {
        children: "children",
        label: "spdName",
      },
      listQuery: {
        spdId: "",
        msgTitle: "",
        msgType: "",
        msgClass: this.msgClass,
        msgStas: "",
        current:1,
        size:10,
      },
      activeName: "first",
      msgClass: "",
      list: [
        // { status: "A", id: "1",title:"业务提醒-退回" ,date:"2024-2-19 23:34:00",text:"您提交的申领单单msg_1被msg_2退回，请注意及时查看处理。",list:[{name:"danhaoaoao",color:"red"},{name:"shenheren",color:"yellow",}]},
        // { status: "B", id: "2" ,title:"资质到期提醒",date:"2024-2-19 23:34:00",text:"您提交的申领单单1被2退回，请注意及时查看处理。",list:[{name:"danhaoaoao",color:"red",label:"shenheren"}]},
        // { status: "C", id: "3" ,title:"目录审核提醒",date:"2024-2-19 23:34:00",text:"您提交的申领单单1被2退回，请注意及时查看处理。",list:[{name:"danhaoaoao",color:"red",label:"shenheren"}]},
      ],
      total:0,
      dataSelect:[],
    };
  },
  methods:{
    reset(){
      this.msgClass= "",
      this.listQuery.msgClass = "";
      this.listQuery.msgTitle = ""
      this.getMess()
    },
    // 标记已读
    handleRead(){
      if(this.dataSelect.length==0){
        this.$message.warning("请选择你要已读的数据")
      }else{
        this.$confirm("确认已读", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const list = []
        this.dataSelect.forEach((v)=>{
          list.push({
            id:v.id,msgStas:"1"
          })
        })
        updateMsgStas(list).then((res)=>{
          if(res.success==true){
            this.$message.success("标记已读成功");
            this.getMess()
            this.dataSelect = [];
            this.$refs.multipleTable1.clearSelection()
            this.$refs.multipleTable2.clearSelection()
            this.$refs.multipleTable3.clearSelection()
            this.$refs.multipleTable4.clearSelection()
          }else{
            this.$message.error("已读失败")
            this.getMess()
            this.dataSelect =[]
            this.$refs.multipleTable1.clearSelection()
            this.$refs.multipleTable2.clearSelection()
            this.$refs.multipleTable3.clearSelection()
            this.$refs.multipleTable4.clearSelection()
          }
        })
      })
      }
      
      
    },
    // 多选
    handleSelectionChange(row){
      this.dataSelect = row;
    },
    // 删除
    handleDel(){
      if(this.dataSelect.length==0){
        this.$message.warning("请选择你要删除的数据")
      }else{
        this.$confirm("确认删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const list = []
        this.dataSelect.forEach((v)=>{
          list.push({
            id:v.id,invdFlag:"1"
          })
        })
        deleteMsg(list).then((res)=>{
          if(res.success==true){
            this.$message.success("删除成功");
            this.getMess()
            this.dataSelect = [];
            this.$refs.multipleTable1.clearSelection()
            this.$refs.multipleTable2.clearSelection()
            this.$refs.multipleTable3.clearSelection()
            this.$refs.multipleTable4.clearSelection()
          }else{
            this.$message.error("删除失败")
            this.getMess()
            this.dataSelect =[]
            this.$refs.multipleTable1.clearSelection()
            this.$refs.multipleTable2.clearSelection()
            this.$refs.multipleTable3.clearSelection()
            this.$refs.multipleTable4.clearSelection()
          }
        })
      })
      }
    },
    // 获取医院列表
    getData(type) {
      this.hosdata = [];
      selectSpdList()
        .then((res) => {
          this.listQuery.spdId = res.data[0].spdId;
          this.hosdata = res.data;
        })
        .catch((err) => {});
    },
    tabClick(tab) {
      if (tab.label == "按机构") {
        this.defaultProps.label = "spdName";
      }
      // else if(tab.label == "按分类"){
      //     // this.getData4();
      //     // this.defaultProps.label = 'orgGrpName'
      //     // this.listQuery.type = 'grp';
      // }
    },
    handleClick(tab) {
      if (tab.name =="first") {
        this.listQuery.msgType = "";
        this.getMess();
      } else {
        this.listQuery.msgType = tab.name
        this.getMess();
      }
    },
    // 点击获取耗材列表
    handleNodeClick(data) {
      // this.listLoading = true;
      this.spdId = data.spdId;
      this.listQuery.spdId = this.spdId;
      this.getMess()
    },
    clickMsg(e){
      this.listQuery.msgClass=e;
      this.getMess()
      // console.log(e);
    },
    getMess(){
      this.listLoading = true;
      queryMsgPage(this.listQuery).then((res)=>{
        if(res.success==true){
          this.listLoading = false;
          this.list = res.data.records
          this.total = res.data.total;
        }else{
          this.listLoading = false
          this.$message.error("获取失败")
        }
      }).catch((err)=>{
        this.listLoading = false;
      })
    },
    

  },
  mounted(){
    this.getData();
    if (this.$route.query.spdId) {
      this.listQuery.spdId = this.$route.query.spdId;
      // selectRetnOrdD(this.listQuery)
      //   .then((res) => {
      //     this.list = res.data.records;
      //     this.total = res.data.total;
      //     this.listLoading = false;
      //   })
      //   .catch((err) => {
      //     this.listLoading = false;
      //   });
    };
  },
};
</script>

<style lang="scss" scoped>
.common-box ::v-deep .el-input__inner {
  width: 150px;
}
.common-box ::v-deep .checkInput {
  position: absolute;
  left: 70%;
}
</style>
