<template>
  <div>
    <!-- 头部标签 -->
    <van-sticky>
      <header class="header-wrap">
        工作台
      </header>
    </van-sticky>
    <!-- <van-notice-bar left-icon="volume-o" :scrollable="true" color="#a09c9c" background="#D5EAFF">
      <van-swipe class="notice-swipe" :show-indicators="false" width="100vw">
        <van-swipe-item>危险源系统正式上线</van-swipe-item>
        <van-swipe-item>汛期安全防护会议计划本周日召开</van-swipe-item>
      </van-swipe>
    </van-notice-bar> -->
    <!-- <van-swipe :autoplay="6000">
      <van-swipe-item v-for="(item, index) in images" :key="index">
        <img style="width:100%;height:200px" :src="item.url" />
      </van-swipe-item>
    </van-swipe> -->
    <div class="con">
      <van-cell-group inset v-if="finalRiskList.length > 0">
        <van-cell value="风险评估管理" />
        <van-grid class="grid-grid">
          <van-grid-item class="grid-item" :style="{
        'background-image': `url(${require(`@/assets/workbench/workbench${index % 5 + 1}.png`)})`,
      }" @click="dangerJump(item.path)" v-for="(item, index) in finalRiskList" :key="item.key" :text="item.text" />
        </van-grid>
      </van-cell-group>
      <van-cell-group style="margin-top: 20px;" inset v-if="finalRiskPatrol.length > 0">
        <van-cell value="风险巡查管理" />
        <!-- <van-grid :column-num="4">
          <van-grid-item @click="dangerJump(item.path)" v-for="      item       in       finalRiskPatrol      "
            :key="item.key" :icon="item.imgUrl" :text="item.text" />
        </van-grid> -->
        <van-grid class="grid-grid">
          <van-grid-item class="grid-item" :style="{
        'background-image': `url(${require(`@/assets/workbench/workbench${index % 5 + 1}.png`)})`,
      }" @click="dangerJump(item.path)" v-for="(item, index) in finalRiskPatrol" :key="item.key" :text="item.text" />
        </van-grid>
      </van-cell-group>
      <!-- <van-cell-group inset v-for="(item, index) in riskList" :key="index">
                  <van-cell :value="item.menuName" />
                  <van-grid :column-num="5">
                  <van-grid-item
                      @click="dangerJump(it.path)"
                      v-for="it in item.children"
                      :key="it.key"
                      :icon="it.icon"
                      :text="it.menuName"
                  />
                  </van-grid>
          </van-cell-group> -->
    </div>
    <!-- tanBar -->
    <tab-bar :index="1"></tab-bar>
  </div>
</template>

<script>
import tabBar from "@/components/TabBar";
import { getFun, postFun } from "@/service/table";
export default {
  components: {
    tabBar
  },
  data() {
    return {
      value: "",
      /**
       *  总公司：任务台账；
       *  区域负责人：任务管理，任务审批，任务台账
       *  评估负责人： 执行管理，风险评估，任务审批，任务台账
       *  组员： 风险评估，任务台账
       */
      riskList2: [
        {
          path: "/taskLedger",
          imgUrl: require("@/assets/workbench/work-approval.png"),
          text: "任务台账"
        },
        {
          path: "/riskManage",
          imgUrl: require("@/assets/workbench/risk-report.png"),
          text: "任务管理"
        },
        {
          path: "/taskManage",
          imgUrl: require("@/assets/workbench/plane-approval.png"),
          text: "任务审批"
        },
        {
          path: "/riskExecution",
          imgUrl: require("@/assets/workbench/rectification-notice.png"),
          text: "执行管理"
        },
        {
          path: "/riskAssess",
          imgUrl: require("@/assets/workbench/risk-confirm.png"),
          text: "风险评估"
        },

        {
          path: "/riskApprove",
          imgUrl: require("@/assets/workbench/risk-account.png"),
          text: "风险审批"
        },
        {
          path: "/riskLedger",
          imgUrl: require("@/assets/workbench/danger-account.png"),
          text: "风险台账"
        }
        // {
        //     path: "/riskView",
        //     imgUrl: require("@/assets/workbench/quarter_record.png"),
        //     text: "四色图",
        // },
      ],
      riskList: [
        {
          key: "1",
          path: "/taskLedger",
          imgUrl: require("@/assets/workbench/work-approval.png"),
          text: "任务台账"
        },
        {
          key: "2",
          path: "/riskManage",
          imgUrl: require("@/assets/workbench/risk-report.png"),
          text: "任务管理"
        },
        {
          key: "3",
          path: "/taskManage",
          imgUrl: require("@/assets/workbench/plane-approval.png"),
          text: "任务审批"
        },
        {
          key: "4",
          path: "/riskExecution",
          imgUrl: require("@/assets/workbench/rectification-notice.png"),
          text: "执行管理"
        },
        {
          key: "5",
          path: "/riskAssess",
          imgUrl: require("@/assets/workbench/risk-confirm.png"),
          text: "风险评估"
        },

        {
          key: "6",
          path: "/riskApprove",
          imgUrl: require("@/assets/workbench/risk-account.png"),
          text: "风险审批"
        },
        {
          key: "7",
          path: "/riskLedger",
          imgUrl: require("@/assets/workbench/danger-account.png"),
          text: "风险台账"
        }
      ],
      riskPatrol: [
        {
          key: "1",
          path: "/patrolExecute",
          imgUrl: require("@/assets/workbench/risk-account.png"),
          text: "巡查执行"
        },
        {
          key: "2",
          path: "/patrolCancle",
          imgUrl: require("@/assets/workbench/u9177.png"),
          text: "巡查取消"
        },
        {
          key: "3",
          path: "/patrolLog",
          imgUrl: require("@/assets/workbench/plane-approval.png"),
          text: "巡查记录"
        },
        {
          key: "4",
          path: "/patrolApprove",
          imgUrl: require("@/assets/workbench/inspect-plane.png"),
          text: "巡查审批"
        },
        {
          key: "5",
          path: "/abnormalDeal",
          imgUrl: require("@/assets/workbench/danger-report.png"),
          text: "异常处置"
        },

        {
          key: "6",
          path: "/patrolStatistics",
          imgUrl: require("@/assets/workbench/danger-account.png"),
          text: "巡查统计"
        },
      ],
      finalRiskList: [],
      finalRiskPatrol: [],
      images: [
        {
          url: require("@/assets/workbench/u47.png")
        },
        {
          url: require("@/assets/workbench/u51.png")
        },
        {
          url: require("@/assets/workbench/u55.png")
        }
      ]
    };
  },
  created() { },
  mounted() {
    // this.getMenuList();
    this.workBenchList();
  },
  methods: {
    //查询角色菜单列表
    getMenuList() {
      getFun("/menu/roleMenuTreeselect")
        .then(res => {
          this.riskList = res.list;
          this.riskList.forEach((item, index) => {
            item.children.forEach((i, k) => {
              let data = this.riskList2.find(y => y.text == i.menuName);
              if (data) {
                i.icon = data.imgUrl;
              }
            });
          });
        })
        .catch(err => {
        });
    },
    workBenchList() {
      getFun(`/menu/getMenu`).then(res => {
        if (res.code == 200) {
          this.powerObj = res.data;
          if (this.powerObj.风险评估管理) {
            this.finalRiskList = [...this.riskList].filter(x =>
              [...this.powerObj.风险评估管理].some(y => `/${y.path}` == x.path)
            );
          } else {
            this.finalRiskList = [];
          }
          if (this.powerObj.风险巡查管理) {
            this.finalRiskPatrol = [...this.riskPatrol].filter(x =>
              [...this.powerObj.风险巡查管理].some(y => `/${y.path}` == x.path)
            );
          } else {
            this.finalRiskPatrol = [];
          }
        } else {
          this.powerObj = {};
        }
      });
    },
    onSearch() { },
    createdClick() {
      this.$router.push("/create-task");
    },
    dangerJump(path) {
      if (path) {
        if (path == "/add-danger") {
          sessionStorage.removeItem("obj");
          this.$router.push({
            name: "add-danger",
            params: { isWorkbenchTo: 1 }
          });
        } else {
          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;
  text-align: center;
}

.con {
  // height: calc(100% - 110px);
  // height: 100%;
  padding: 10px 0 50px 0;
  background-color: #f0f1f5;

  /deep/ .van-icon__image {
    width: auto;
    height: 1rem;
  }
}

.notice-swipe {
  height: 40px;
  line-height: 40px;
  color: #a09c9c;
}

.van-swipe-item {
  width: 100%;
}

.my-swipe .van-swipe-item {
  width: 100%;
  height: 300px;

  img {
    width: 100%;
    height: 100%;
  }
}

.van-cell-group {
  .grid-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
  }

  .grid-item {
    height: 80px;
    background-size: 100% 100%;
  }

  .van-cell::after {
    border: none;
  }

  .van-cell {
    padding-bottom: 0;

    .van-cell__value {
      display: flex;
      align-items: center;

      &::before {
        display: inline-block;
        box-sizing: border-box;
        content: ' ';
        pointer-events: none;
        width: 5px;
        height: 16px;
        background: #2980f7;
        margin-right: 10px;
      }
    }
  }

  /deep/ .van-grid-item__content {
    background: transparent;
    width: 60%;
    display: block;
    padding: 0;
    text-align: center;

    .van-grid-item__text {
      color: #000;
      font-weight: 500;
      font-size: 14px;
      line-height: 80px;
    }
  }
}

[class*=van-hairline]::after {
  border: none;
}
</style>
