<template>
  <div>
    <!-- 头部标签 -->
    <van-sticky>
      <header class="header-wrap">
        首开集团安全隐患排查治理体系
      </header>
    </van-sticky>

    <!-- 搜索 -->
    <!-- <div class="search-wrap">
      <van-search v-model="searchVal" placeholder="搜索" @search="onSearch" />
    </div> -->

    <!-- 滚动通知 -->
    <van-notice-bar left-icon="volume-o" :scrollable="false" mode="link">
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :show-indicators="false"
      >
        <van-swipe-item>提示：您有1条待办事项需要处理</van-swipe-item>
        <van-swipe-item>提示：您有2条待办事项需要处理</van-swipe-item>
      </van-swipe>
    </van-notice-bar>

    <!-- 内容 -->
    <div class="con">
      <!-- 消息中心 -->
      <!-- <van-cell-group inset v-if="finalNewsCenterList.length > 0">
        <van-cell value="消息中心" />
        <van-grid :column-num="5">
          <van-grid-item
            v-for="item in finalNewsCenterList"
            :key="item.key"
            :icon="item.imgUrl"
            :text="item.text"
            @click="myClick(item.text)"
          />
        </van-grid>
      </van-cell-group> -->

      <!-- 风控分级管控 -->
      <van-cell-group inset v-if="finalRiskList.length > 0">
        <van-cell value="风控分级管控" />
        <van-grid :column-num="5">
          <van-grid-item
            v-for="item in finalRiskList"
            :key="item.key"
            :icon="item.imgUrl"
            :text="item.text"
          />
        </van-grid>
      </van-cell-group>

      <!-- 隐患排查治理 -->
      <van-cell-group inset v-if="finalDangerList.length > 0">
        <van-cell value="隐患排查治理" />
        <van-grid :column-num="5">
          <van-grid-item
           @click="dangerJump(item.path)"
            v-for="item in finalDangerList"
            :key="item.key"
            :icon="item.imgUrl"
            :text="item.text"
          />
        </van-grid>
      </van-cell-group>

      <!-- 安全监督检查 -->
      <van-cell-group inset v-if="finalSafetyCheckList.length > 0">
        <van-cell value="安全监督检查" />
        <van-grid :column-num="5">
          <van-grid-item
            @click="jump(item.path)"
            v-for="item in finalSafetyCheckList"
            :key="item.key"
            :icon="item.imgUrl"
            :text="item.text"
          />
        </van-grid>
      </van-cell-group>
    </div>

    <!-- tanBar -->
    <tab-bar :index="1"></tab-bar>
  </div>
</template>

<script>
import tabBar from "@/components/TabBar";
import { postWork } from "@/service/workbench";
export default {
  components: {
    tabBar
  },
  data() {
    return {
      searchVal: "",
      newsCenterList: [
        // 消息中心的图标
        {
          key: "1",
          imgUrl: require("@/assets/workbench/notice.png"),
          text: "通知公告"
        },
        {
          key: "2",
          imgUrl: require("@/assets/workbench/wait-do.png"),
          text: "待办事项"
        },
        {
          key: "3",
          imgUrl: require("@/assets/workbench/news.png"),
          text: "消息提醒"
        },
        {
          key: "4",
          imgUrl: require("@/assets/workbench/set-up.png"),
          text: "我的设置"
        }
      ],
      riskList: [
        // 风控分级管控
        {
          key: "1",
          imgUrl: require("@/assets/workbench/risk-report.png"),
          text: "风险上报"
        },
        {
          key: "2",
          imgUrl: require("@/assets/workbench/risk-confirm.png"),
          text: "风险确认"
        },
        {
          key: "3",
          imgUrl: require("@/assets/workbench/risk-account.png"),
          text: "风险台账"
        }
      ],
      dangerList: [
        // 隐患排查治理
        {
          key: "1",
          path: "/danger",
          imgUrl: require("@/assets/workbench/danger-report.png"),
          text: "隐患上报"
        },
        {
          key: "2", 
          path: "/confirm-danger",
          imgUrl: require("@/assets/workbench/danger-confirm.png"),
          text: "隐患确认"
        },
        {
          key: "3",
          path: "/change-danger",
          imgUrl: require("@/assets/workbench/danger-rectification.png"),
          text: "隐患整改"
        },
        {
          key: "4",
          path: "/review-danger",
          imgUrl: require("@/assets/workbench/danger-acceptance.png"),
          text: "隐患复查"
        },
        {
          key: "5",
          imgUrl: require("@/assets/workbench/danger-account.png"),
          text: "隐患台账"
        }
      ],
      safetyCheckList: [
        // 安全监督检查
        {
          key: "1",
          path: "",
          imgUrl: require("@/assets/workbench/inspect-plane.png"),
          text: "检查计划"
        },
        {
          key: "2",
          path: "",
          imgUrl: require("@/assets/workbench/plane-approval.png"),
          text: "计划审批"
        },
        {
          key: "3",
          path: "/checked",
          imgUrl: require("@/assets/workbench/check-implement.png"),
          text: "检查执行"
        },
        {
          key: "4",
          path: "/notice",
          imgUrl: require("@/assets/workbench/rectification-notice.png"),
          text: "整改通知"
        },
        {
          key: "5",
          path: "",
          imgUrl: require("@/assets/workbench/issue-rectification.png"),
          text: "问题整改"
        },
        {
          key: "6",
          path: "/correct",
          imgUrl: require("@/assets/workbench/retification-acceptance.png"),
          text: "整改验收"
        },
        {
          key: "7",
          path: "",
          imgUrl: require("@/assets/workbench/ehcek-record.png"),
          text: "检查记录"
        }
      ],

      // 后台给的数据权限对象
      powerObj: {},

      finalNewsCenterList: [],
      finalRiskList: [],
      finalDangerList: [],
      finalSafetyCheckList: []
    };
  },
  created() {
    //  根据权限显示对应的图标
    this.getWorkList();
  },
  methods: {
    myClick(data) {
      console.log(data);
    },
    jump(path) {
      if (path) {
        this.$router.push(path);
      }
    },
    dangerJump(path){
      if (path) {
        this.$router.push(path);
      }
    },
    // 搜索事件
    onSearch(val) {
      console.log(val);
    },
    // 请求工作台列表
    getWorkList() {
      postWork("/mobile/menu").then(res => {
        if (res.code == 0) {
          this.powerObj = res.data;
          if (this.powerObj.风险分级管控) {
            // 对两个数组进行比较 拿到需要的数据 赋值给新数组 （赋值给新数组是为了解决页面闪屏问题）
            this.finalRiskList = [...this.riskList].filter(x =>
              [...this.powerObj.风险分级管控].some(y => y.menuName === x.text)
            );
          } else {
            this.finalRiskList = [];
          }
          // 隐患排查治理
          if (this.powerObj.隐患排查治理) {
            this.finalDangerList = [...this.dangerList].filter(x =>
              [...this.powerObj.隐患排查治理].some(y => y.menuName === x.text)
            );
          } else {
            this.finalDangerList = [];
          }
          // 安全监督检查
          if (this.powerObj.安全监督检查) {
            this.finalSafetyCheckList = [...this.safetyCheckList].filter(x =>
              [...this.powerObj.安全监督检查].some(y => y.menuName === x.text)
            );
          } else {
            this.finalSafetyCheckList = [];
          }
          // 消息
          this.finalNewsCenterList = this.newsCenterList;
        } else {
          this.powerObj = [];
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.header-wrap {
  width: 100%;
  height: 50px;
  background-color: #2980f7;
  font-size: 17px;
  line-height: 50px;
  color: white;
  font-weight: 600;
  text-align: center;
}
.con {
  // height: calc(100% - 110px);
  // height: 100%;
  padding: 10px 0 50px 0;
  background-color: #f0f1f5;
  /deep/ .van-grid-item__content--center {
    // padding-left: 0px;
    // padding-right: 0px;
    padding: 0.22667rem 0px;
  }
  /deep/ .van-icon__image {
    width: auto;
    height: 1rem;
  }
}
.van-cell-group--inset {
  margin: 0 10px 10px;
}
/deep/ .van-cell::after {
  border: none;
}
/deep/ [class*="van-hairline"]::after {
  border: none;
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
</style>
