<template>
  <view class="container">
    <view class="banner">
      <image
        src="../../static/index/banner.png"
        style="width: 100%; height: 370upx"
      />
    </view>
    <view class="menuer">
      <view class="wraper">
        <view
          v-for="(item, index) in menus"
          :key="index"
          class="wrap"
          @click="$u.route({ url: item.url, type: item.type })"
        >
          <image :src="item.icon" style="width: 60upx; height: 55upx" />
          <view>{{ item.title }}</view>
        </view>
      </view>
    </view>

    <view v-if="messageList.length > 0" class="notice">
      <view class="wrap">
        <view class="images">
          <image
            src="../../static/index/ico7.png"
            style="width: 68upx; height: 61upx"
          />
        </view>
        <view class="main">
          <view class="info">
            <view
              v-for="item in messageList.slice(0, 3)"
              :key="item.MESSAGE_ID"
            >
              <view
                text="温馨提示"
                color="linear-gradient(to right, #27a0ff, #2a56f7)"
                custom-style="width:150upx; height:60upx; margin-left: 20upx;margin-right: 0;"
                class="title u-line-1"
                @click="
                  $u.route({
                    url: '/pages/message/detail',
                    params: {
                      MESSAGE_ID: item.MESSAGE_ID,
                      SYNOPSIS: item.SYNOPSIS,
                      CONTENT: item.CONTENT,
                      CREATOR: item.CREATOR,
                      CREATTIME: item.CREATTIME,
                    },
                  })
                "
              >
                您有一条温馨提示待查看，点击查看详情
              </view>
              <view class="time">提醒时间:{{ item.CREATTIME }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="troubleshooting">
      <view class="mainer">
        <view class="title">企业排查情况</view>
        <view class="main">
          <view class="wrap">
            <view>各单位的管辖企业数</view>
            <view class="fcb fw">
              {{ troubleshootingSituation.allCorpNum }}
            </view>
          </view>
          <view class="wrap">
            <view>已排查</view>
            <view class="fcg fw">
              {{ troubleshootingSituation.checkCorpNum }}
            </view>
          </view>
          <view class="wrap">
            <view>未排查</view>
            <view class="fcc fw">
              {{
                troubleshootingSituation.allCorpNum -
                troubleshootingSituation.checkCorpNum
              }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="safe_container">
      <view class="mainer">
        <view class="title">
          <view>安全作业情况</view>
        </view>
        <view class="main">
          <view
            v-for="item in safeOperationSituationList"
            :key="item.SAFEOPERATIONMANAGEMENT_ID"
            class="wrap"
          >
            <view class="tit">{{ item.CORP_NAME }}</view>
            <view class="type"> 作业类型: {{ item.OPERATION_TYPE }}</view>
            <view class="time fc9"> 作业时间:{{ item.OPERATION_TIME }}</view>
          </view>
        </view>
      </view>
    </view>
    <update-version />
  </view>
</template>

<script>
import updateVersion from "@/components/update_version/index.vue";
import {
  getSafeOperationSituationList,
  getTroubleshootingSituation,
} from "@/api";
import { getMessageData } from "../../api";
export default {
  components: {
    updateVersion,
  },
  data() {
    return {
      menus: [
        {
          title: "企业信息",
          icon: require("../../static/index/ico1.png"),
          url: "/pages/information/index",
          type: "navigateTo",
        },
        {
          title: "双重预防",
          icon: require("../../static/index/ico2.png"),
          url: "/pages/dual_prevention/index",
          type: "navigateTo",
        },
        {
          title: "重点安全",
          icon: require("../../static/index/ico4.png"),
          url: "/pages/key_safety/index",
          type: "navigateTo",
        },
        {
          title: "监管帮扶",
          icon: require("../../static/index/ico9.png"),
          url: "/pages/supervision_inspection/index",
          type: "navigateTo",
        },
        // {
        //   title: "专项检查",
        //   icon: require("../../static/index/ico8.png"),
        //   url: "/pages/special_rectification/index",
        //   type: "navigateTo",
        // },
        // {
        //   title: "防灾减灾",
        //   icon: require("../../static/index/ico10.png"),
        //   url: "/pages/disaster_prevention/index",
        //   type: "navigateTo",
        // },

        // {
        //   title: "公告通知",
        //   icon: require("../../static/index/ico3.png"),
        //   url: "/pages/notice/list",
        //   type: "switchTab",
        // },
      ],
      troubleshootingSituation: {
        allCorpNum: 0,
        checkCorpNum: 0,
      },
      safeOperationSituationList: [],
      messageList: [],
    };
  },
  onLoad() {
    this.fnGetData();
    this.fnGetMessageData();
  },
  onShow() {
    this.fnGetData();
    this.fnGetMessageData();
  },
  methods: {
    async fnGetData() {
      const {
        pd: { allCorpNum, checkCorpNum },
      } = await getTroubleshootingSituation({
        REGULATORY_DEPARTMENT_TREE:
          this.$store.getters.getUserInfo.DEPARTMENT_ID,
      });
      this.troubleshootingSituation.allCorpNum = allCorpNum;
      this.troubleshootingSituation.checkCorpNum = checkCorpNum;
      const resData = await getSafeOperationSituationList({
        showCount: 50,
        currentPage: 1,
      });
      this.safeOperationSituationList = resData.varList;
    },
    async fnGetMessageData() {
      const resData = await getMessageData({
        USER_ID: this.$store.getters.getUserInfo.USER_ID,
        ISREPLY: 0,
      });
      this.messageList = resData.varList;
    },
  },
};
</script>

<style lang="scss" scoped>
.fc9 {
  color: #999999;
}
.container {
  background-color: #fafafa;

  .menuer {
    width: 100%;
    padding: 0 20upx;
    box-sizing: border-box;

    .wraper {
      width: 100%;
      padding: 20upx;
      background: #ffffff;
      border-radius: 50upx 50upx 0 0;
      box-sizing: border-box;
      display: flex;
      margin-top: -80upx;
      position: relative;
      flex-wrap: wrap;

      .wrap {
        width: 25%;
        text-align: center;
        font-size: 30upx;
        margin-bottom: 20px;
      }
    }
  }

  .notice {
    width: 100%;
    padding: 0 20upx;
    box-sizing: border-box;
    margin-top: 20upx;

    .wrap {
      background: #ffffff;
      width: 100%;
      padding: 20upx;
      display: flex;
      border-radius: 8upx;
      box-sizing: border-box;
      align-items: center;

      .images {
        width: 68upx;
        margin-top: 5upx;
      }

      .main {
        flex: 1;
        display: flex;
        justify-content: space-between;
        padding-left: 20upx;
        align-items: center;

        .info {
          flex-basis: 90%;

          .title {
            color: #222;
            font-weight: normal;
            font-size: 30upx;
          }

          .time {
            color: #999999;
            font-size: 24upx;
          }
        }
      }
    }
  }

  .troubleshooting {
    width: 100%;
    padding: 0 20upx;
    box-sizing: border-box;
    margin-top: 20upx;

    .mainer {
      width: 100%;
      background: #ffffff;
      padding: 20upx;
      box-sizing: border-box;
      border-radius: 8upx;

      .title {
        font-size: 32upx;
        font-weight: bold;
        border-bottom: 1px solid #eeeeee;
        line-height: 2.5;
      }

      .main {
        width: 100%;
        display: flex;
        justify-content: space-around;
        margin-top: 20upx;

        .wrap {
          text-align: center;

          .fw {
            font-weight: bold;
            font-size: 32upx;
          }

          .fcb {
            color: #3387fc;
          }

          .fcg {
            color: #179d20;
          }

          .fcc {
            color: #fb830f;
          }
        }
      }
    }
  }

  .safe_container {
    width: 100%;
    padding: 20upx;
    box-sizing: border-box;
    margin-top: 20upx;

    .mainer {
      width: 100%;
      background: #ffffff;
      box-sizing: border-box;
      border-radius: 8upx;

      .title {
        font-size: 32upx;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eeeeee;
        padding: 0 20upx;
        line-height: 2.5;
      }

      .main {
        padding: 0 20upx 20upx;
        box-sizing: border-box;

        .wrap {
          line-height: 1.6;
          border-bottom: 1px solid #eeeeee;
          padding: 10upx;
          .tit {
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>
