<template>
  <div class="contmin">
    <div class='topbox'>
      <div class="title">个人中心-任务列表</div>

      <!-- <section class="tabs">
        <article v-for="(item, index) in czztlit" :key="index" :class="{ 'active': actives == item.value }"
          @click="handleTabs(item)">{{ item.label }}</article>
      </section> -->

    </div>
    <div class="tab-container">
      <el-tabs v-model="activeTab" type="card" @tab-click="handleTabs">
        <el-tab-pane :label="item.label" :name="item.value" v-for="(item, i) in czztlit" :key="i" />
      </el-tabs>
    </div>

    <div class="tabBox">
      <el-table ref="multipleTableRef" :tooltip-effect="'tooltipStyle'" v-loading="tableloading" stripe
        height="calc(100% - 46px)" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
        border>
        <el-table-column label="消息标题" show-overflow-tooltip property="title"></el-table-column>
        <el-table-column label="消息内容" show-overflow-tooltip prop="info">
          <template #default="{ row }">
            <el-link v-if="row.clzt == '01'" type="primary" @click="examine(row)">{{
              row.info
            }}</el-link>
            <span v-else> {{ row.info }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发送时间" show-overflow-tooltip prop="addtime"></el-table-column>
        <el-table-column label="接收者" show-overflow-tooltip property="username"></el-table-column>
        <el-table-column label="阅读状态" show-overflow-tooltip property="sfyd">
          <template #default="{ row }">
            <span v-if="row.sfyd == '0'" style='color:red !important;'>未读</span>
            <span v-if="row.sfyd == '1'" style='color:rgb(38, 15, 250) !important;'>已读</span>
          </template>
        </el-table-column>
        <el-table-column label="处置状态" show-overflow-tooltip property="clzt">
          <template #default="{ row }">
            <span v-if="row.clzt == '01'" style='color:red !important;'>待处理</span>
            <span v-if="row.clzt == '02'" style='color:rgb(38, 15, 250) !important;'>已处理</span>
            <span v-if="row.clzt == '03'">无需处理</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="250">
          <template #default="{ row }">
            <span class="operesee" @click="handleSee(row, 'see')"> <el-icon>
                <Compass />
              </el-icon>查看</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="fenye">
        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
          layout="total, prev, pager, next, sizes, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="消息提醒查看" @close="closeDialog">
      <el-form :model="editObj.formData" ref="elform" :rules="rules" label-width="130px" class="demo-ruleForm.value"
        :inline="true">
        <div>
          <el-form-item label="消息发送时间" style="width: 45%;">
            <el-input v-model="editObj.formData.addtime" readonly></el-input>
          </el-form-item>
          <el-form-item label="接收人" style="width: 45%;">
            <el-input v-model="editObj.formData.username" readonly></el-input>
          </el-form-item>
          <el-form-item label="消息标题" style="width: 90%">
            {{ editObj.formData.title }}
          </el-form-item>
          <el-form-item v-if="editObj.formData.p3 == '0' || editObj.formData.clzt == '03'" label="消息内容"
            style="width: 90%">
            <span>{{
              editObj.formData.info
            }}</span>
          </el-form-item>
          <el-form-item v-if="editObj.formData.p3 != '0' && editObj.formData.clzt != '03'" label="消息内容"
            style="width: 90%">
            <el-link v-if="editObj.formData.clzt == '01'" type="primary" @click="examine(editObj.formData)">{{
              editObj.formData.info
            }}</el-link>
            <span v-else> {{ editObj.formData.info }}</span>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button v-if="editObj.formData.p3 != '0' && editObj.formData.clzt == '01'"
            @click="examine(editObj.formData)">立即处理</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisibleStudy" title="法律法规制度学习" @close="closeDialogStudy">
      <lawStoreinfo @close="closeDialogStudy" :isShow="true" :studyShowId="studyShowId" :orgData="orgData"
        :saveBtnShow="saveBtnShow" :editObj="editObjs" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { getUserInfoToId } from "@/api/user-manage";
import lawStoreinfo from "@/views/law/lawRules/commponents/lawStoreinfo.vue";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import {
  ref,
  onMounted,
  defineProps,
  defineEmits,
  reactive,
  watch,
  watchEffect,
  getCurrentInstance
} from "vue";
import { useRouter } from "vue-router";
import { getItem } from "@/utils/storage";
import { getPageList, sendMsg } from "@/api/editPassword.js";
const router = useRouter();
const active = ref("INFO");
const clzt = ref()
const total = ref(0);
const params = ref({});
/** 已处置，未处置状态 */
const actives = ref('01')
const rules = ref({});
const activeTab = ref('01')
const czztlit = ref([
  {
    value: '01',
    label: '未处置-任务列表',
  },
  {
    value: '02',
    label: '已处置-任务列表',
  }
])
// 分页
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  zdlx: "02",
  clzt: '01'
});
onMounted(() => {
  // getUserInfo();
  getListData();
});
watch(
  () => listQuery.clzt,
  (val) => {
    getListData();
  }
);

function handleSelectionChange() {

}

const handleTabs = row => {
  let index = row.index
  let item = czztlit.value[index]
  actives.value = item.value
  listQuery.clzt = item.value
}
const tableloading = ref(false);
function getListData() {
  tableloading.value = true;
  getApi(listQuery, `/mosty-jcgl/rw/getRwPage`).then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      total.value = res.total;
    } else {
      tableData.value = [];
      tableloading.value = false;
    }
  });
}
const editObj = reactive({
  formData: {}
})
const dialogVisible = ref(false)
const dialogVisibleStudy = ref(false)
const handleSee = (row) => {
  editObj.formData = row
  dialogVisible.value = true;
  let params = {
    id: row.id,
    sfyd: "1", // 是否已读
    // clzt: "01"
  };
  postApi(params, "/mosty-jcgl/rw/updateRw")
}
const tableData = ref([]);
/** 更新为已读 */
const updateRw = (row) => {
  let params = {
    id: row.id,
    sfyd: "1",// 是否已读
    // clzt: "01"
  };
  postApi(params, "/mosty-jcgl/rw/updateRw")
}
const examine = (row) => {
  if (row.clzt == '01') {
    updateRw(row)
    console.log(row.rwlx, 'row.rwlx')
    switch (row.rwlx) {
      // 文化手册
      case '05':
        router.push({
          path: "/dutyBook/whjs/index",
          query: {
            id: row.ywid,
            rwid: row.id
          }
        });
        break;
      // 危险作业详情
      case '07':
        router.push({
          path: "/yxkzgl/wxzysq",
          query: {
            p1: row.p1,
            id: row.ywid,
            rwid: row.id
          }
        });
        break;
      case '19':
        // 上岗证申办详情
        router.push({
          path: "/yxkzgl/jsygl/sgzsbxq",
          query: {
            id: row.ywid,
            rwid: row.id,
            title: '任务处理',
            p2: row.p2
          }
        });
        break;
      case '22':
        // 安全投入（新）
        router.push({
          path: "/dutyBook/anQuantrNew",
          query: {
            tab: '3',// tab 1.统计报表 2.预算填报 3.预算审核/批复 4.费用使用 5.费用使用情况分析
          }
        });
        break;
      case '46':
        //工作计划要点审核
        router.push({
          path: "/dutyBook/goalWay/workPlan",
          query: {
            p1: row.p1,
            rwlx: row.rwlx,
            ywid: row.ywid,
            rwid: row.id
          }
        });
        break;
      case '47':
        //工作计划要点审核
        router.push({
          path: "/dutyBook/goalWay/workPlan",
          query: {
            p1: row.p1,
            rwlx: row.rwlx,
            ywid: row.ywid,
            rwid: row.id
          }
        });
        break;
      case '51':
        // 课件库-学习
        router.push({
          path: "/safety/pxzyk/zxaqxxk",
          query: {
            rwlx: row.rwlx,
            rwid: row.id,
            ywid: row.ywid,
            id: row.ywid
          }
        });
        break;
      case '52':
        //值班记录
        router.push({
          path: "/yjzb/yjgl/zbgl/zbjl",
          query: {
            rwlx: row.rwlx,
            rwid: row.id,
          }
        });
        break;
      case '53':
        //值班记录
        router.push({
          path: "/yjzb/yjgl/zbgl/zbjl",
          query: {
            rwlx: row.rwlx,
            rwid: row.id,
          }
        });
        break;
      // 安全动态
      case '57':
        router.push({
          path: "/dutyBook/aqdt/index",
          query: {
            p1: row.p1,
            id: row.ywid,
            ywid: row.ywid,
            rwid: row.id
          }
        });
        break;
      // 督办任务
      case '60':
        router.push({
          path: "/supervision/tasks",
          query: {
          }
        });
        break;

      // 61-考题库
      case '61':
        router.push({
          path: "/safety/pxzyk/ktk",
          query: {
            id: row.ywid,
            ywid: row.ywid,
            rwid: row.id,
            p1: row.p1,
          }
        });
        break;
      // 62-试卷库
      case '62':
        router.push({
          path: "/safety/pxzyk/ktjmbgl",
          query: {
            id: row.ywid,
            ywid: row.ywid,
            rwid: row.id,
            p1: row.p1,
          }
        });
        break;
      // 63—课件库
      case '63':
        router.push({
          path: "/safety/pxzyk/zxaqxxk",
          query: {
            id: row.ywid,
            ywid: row.ywid,
            rwid: row.id,
            rwlx: row.rwlx,
            p1: row.p1,
          }
        });
        break;
      // // 64-师资库
      // case '64':
      //   router.push({
      //     path: "/safety/pxzyk/szk",
      //     query: {
      //       p1: row.p1,
      //       id: row.ywid,
      //       ywid: row.ywid,
      //       rwid: row.id
      //     }
      //   });
      //   break;
      // 65 — 典型案例
      case '65':
        router.push({
          path: "/dutyBook/dianXal/index",
          query: {
            id: row.ywid,
            ywid: row.ywid,
            rwid: row.id,
            p1: row.p1,
          }
        });
        break;
      case '66':
        router.push({
          path: "/dutyBook/tzgg/index",
          query: {
            id: row.ywid,
            ywid: row.ywid,
            rwid: row.id,
            p1: row.p1,
            file: row.file,
          }
        });
        break;
      // 法律法规学习
      case '71':
        let params = {
          id: row.ywid
        };
        studyShowId.value = row.id
        getApi(params, `/mosty-jcgl/lawRegulations/getLawRegulaById`).then((res) => {
          editObjs.value = res;
          dialogVisibleStudy.value = true
          dialogVisible.value = false
          saveBtnShow.value = false;
        });
        break;
      /** 事故月报 */
      case '70':
        router.push({
          path: "/sggl/sgbg/sgyb",
          query: {
            rwlx: row.rwlx,
            id: row.ywid,
            ywid: row.ywid,
            rwid: row.id,
            p1: row.p1,
          }
        });
        break;

      default: // 默认事件无 ==============================================================
        break;
    }
  }

};
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getListData();
};
const studyShowId = ref('')
const editObjs = ref([])
const saveBtnShow = ref(false)
const orgData = ref({
  orgId: '',
  orgName: ''
})
const closeDialogStudy = () => {
  dialogVisibleStudy.value = false
  if (editObj.formData.sfyd != '1') {
    getListData()
  }
}
const closeDialog = () => {
  dialogVisible.value = false
  // 非已读 刷新列表
  if (editObj.formData.sfyd != '1') {
    getListData()
  }
}

</script>

<style lang='scss' scoped>
.contmin {
  height: 100%;
  padding: 0 0.5%;
  // border: 2px solid rgb(32, 197, 76);
  border-radius: 10px;
  background-size: 100% 100%;
}

.head-tab {
  text-align: center;
  padding: 2% 0;

  span {
    display: inline-block;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 4px;
    background: rgba(0, 128, 0, 0.5);
    margin-right: 12px;
  }

  span.active {
    background: green;
  }
}

.userinfo {
  width: 100%;
  display: flex;
  justify-content: center;

  >div {
    width: 40%;
    height: 40%;

    .toux {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-left: 100px;

      img {
        border: 1px solid var(--el-color-primary);
        width: 80px;
        height: 80px;
        margin-bottom: 8px;
        border-radius: 50%;
        overflow: hidden;
      }
    }

    ul li {
      display: flex;
      align-items: center;
      margin: 24px 0;

      >span {
        width: 150px;
        text-align: right;
      }
    }
  }
}

.tabBox {
  height: calc(100vh - 242px);
  border-left: 0 !important;
  padding: 0 10px 10px;
  background-color: #fff;

  .el-table {
    height: 91%;
  }

  .fenye {
    top: 95%;
  }
}

.xiaoxi {
  ul {
    height: calc(100vh - 300px);
    // overflow-y: scroll;
  }

  li {
    border: 1px solid rgb(32, 197, 76);
    padding: 12px 12px 12px 36px;
    margin: 12px 12px 0 0;
    position: relative;

    .icon {
      position: absolute;
      left: 10px;
      top: 12px;
    }

    .xxx {
      position: absolute;
      left: 5px;
      top: 5px;
    }

    .item-head {
      display: flex;
      justify-content: space-between;
      align-items: center;

      div {
        position: relative;

        .icon {
          position: absolute;
          top: 0;
          left: -12px;
        }
      }
    }

    p {
      color: #aeaeae;
    }

    .btn {
      display: flex;
      justify-content: flex-end;

      >span {
        cursor: pointer;
        position: relative;
        margin-left: 32px;

        .icon {
          position: absolute;
          top: 1px;
          left: -10px;
        }
      }

      >span:hover {
        color: green;
      }
    }
  }
}

.topbox {
  height: 60px;
  line-height: 60px;
  // align-items: center;
  // display: flex;
  background-color: #fff;
  // justify-content: space-between;

  .title {
    margin-left: 15px;
    font-size: 18px;
    color: #0f3916;
  }

  .tabs {
    display: flex;
    align-items: center;
    margin-left: 30px;
    font-size: 14px;
    color: #666666;

    >article {
      margin-right: 23px;
      cursor: pointer;

      &:hover {
        color: var(--el-color-primary);
      }
    }

    .active {
      color: #000000;
      font-size: 16px;
    }
  }
}

.tab-container {
  padding: 0 20px 0;
  background-color: #fff;
}

.tab-container ::v-deep .el-tabs .el-tabs__header {
  margin-bottom: 0;
  border-bottom: 0;
}

.tab-container ::v-deep .el-tabs .el-tabs__header .el-tabs__nav {
  border: none;
}

.tab-container ::v-deep .el-tabs .el-tabs__header .el-tabs__item {
  background: var(--el-table-cell-bmx-backgroundcolor);
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  line-height: 38px;
  margin: 0 1px;
}

.tab-container ::v-deep .el-tabs .el-tabs__header .el-tabs__item.is-active {
  background: var(--el-color-primary);
  color: #fff;
  border-top: 2px solid var(--el-color-primary);
  border-bottom: 2px solid var(--el-color-primary);
}
</style>
