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

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

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

      <!-- 隐患排查治理 -->
      <van-cell-group inset>
        <van-cell value="隐患排查治理" />
        <van-grid :column-num="5">
          <van-grid-item
            v-for="item in dangerList"
            :key="item.key"
            :icon="item.imgUrl"
            :text="item.text"
          />
        </van-grid>
      </van-cell-group>

      <!-- 安全监督检查 -->
      <van-cell-group inset>
        <van-cell value="安全监督检查" />
        <van-grid :column-num="5">
          <van-grid-item @click="jump(item.path)"
            v-for="item in safetyCheckList"
            :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";
export default {
  components: {
    tabBar
  },
  data() {
    return {
      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",
          imgUrl: require("@/assets/workbench/danger-report.png"),
          text: "隐患上报"
        },
        {
          key: "2",
          imgUrl: require("@/assets/workbench/danger-confirm.png"),
          text: "隐患确认"
        },
        {
          key: "3",
          imgUrl: require("@/assets/workbench/danger-rectification.png"),
          text: "隐患整改"
        },
        {
          key: "4",
          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: "检查记录"
        }
      ]
    };
  },
  mounted() {},
  methods: {
    myClick(data) {
      console.log(data);
    },
    jump(path){
        if(path){
            this.$router.push(path)
        }
    }
  }
};
</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;
  }
}
.van-cell-group--inset {
  margin: 0 10px 10px;
}
/deep/ .van-cell::after {
  border: none;
}
/deep/ [class*="van-hairline"]::after {
  border: none;
}
</style>
