<template>
  <view class="main">
    <p class="title">{{ item.name }}</p>
    <view v-if="item.value === 1" class="first">
      <view v-for="(item, index) in item.list" :key="index" @click="handleGoFirst(item)" class="useListItem">
        <image class="bg" :src="item.bgUrl"></image>
        <view class="iconStart">
          <image
            :class="index === 0 ? 'icon icon_first' : index === 1 ? 'icon icon_second' : index === 2 ? 'icon icon_third' : ''"
            src="https://ahyd.eshangtech.com/UploadImageDir/ahyd_DIB/index/start.svg"></image>
        </view>
        <p class="name">{{ item.name }}</p>
        <image class="img" :src="item.imagePath"></image>
      </view>
    </view>
    <view v-if="item.value === 2" class="second">
      <view v-for="(item, index) in item.list" :key="index" class="useListItem" @click="handleGoSecond(item)">
        <view class="img">
          <image :src="item.imagePath"></image>
        </view>
        <span class="name">{{ item.name }}</span>
      </view>
    </view>
    <view v-if="item.value === 3" class="third">
      <view v-for="(item, index) in item.list" :key="index" class="useListItem" @click="handleGo(item)">
        <view v-if="!item.isNotice" class="imgParent">
          <view class="img">
            <image style="width: 100%;height: 100%" :src="item.imagePath"></image>
          </view>
        </view>
        <image v-else class="img_normal" :src="item.imagePath"></image>
        <span class="name">{{ item.name }}</span>
        <span v-if="item.notice !== 0" class="notice" :style="{ background: colorList[index] }">{{ item.notice }}</span>
      </view>
    </view>
    <view v-if="item.value === 4" class="fourth">
      <view v-for="(item, index) in item.list" :key="index" class="useListItem" @click="handleGoFourth(item)">
        <view v-if="!item.isNotice" class="imgParent">
          <view class="img">
            <image style="width: 100%;height: 100%" :src="item.imagePath"></image>
          </view>
        </view>
        <image v-else class="img_normal" :src="item.imagePath"></image>
        <span class="name">{{ item.name }}</span>
        <span v-if="item.notice !== 0 && item.isNotice" class="notice" style="{ background: red }">{{ item.notice
        }}</span>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: "userList",
  props: {
    item: {
      type: Object,
      default: () => { }
    },
    lastDay: {
      type: String,
      default: ""
    },
    isReturn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      colorList: ['#3473FE', '#5B5BFB', '#B55FFB', '#0095FB', '#FB8922', '#EAAB00', '#1CB953', '#149FB3']
    }
  },
  computed: {
    ...mapGetters({ user: "getUser" }),
  },
  onLoad() {
    console.log(this.colorList, 'colorList')
  },
  methods: {
    // 第一行的跳转
    handleGoFirst(item) {
      if (item.isNotice) {
        this.$util.toNextRoute('navigateTo', item.homeUrl)
      } else {
        uni.showToast({ title: '栏目建设中', icon: 'none' })
      }
    },
    // 第二行的跳转
    handleGoSecond(item) {
      if (this.isReturn) {
        let _this = this
        uni.showModal({
          title: '温馨提示',
          content: '请您授权登录后再操作。',
          success(res) {
            if (res.confirm) {
              _this.$util.toNextRoute('redirectTo', '/pages/register/register')
            }
          }
        })
        return
      }

      let version = uni.getStorageSync('version')
      if (version === 1) {
        this.$util.toNextRoute('navigateTo', '/pages/summaryOfPortraits/index?index=' + item.type)
      } else {
        this.$util.toNextRoute('navigateTo', item.homeUrl)
      }
    },
    // 第四行的跳转
    handleGoFourth(item) {
      if (this.isReturn) {
        let userInfo = JSON.parse(JSON.stringify(this.user));
        if (userInfo && userInfo.WeChat_UserId && userInfo.AuthorityInfo["89a1f248-2113-4d57-84b1-c2e6edb9e8ee"] !== 1) {
          uni.showModal({
            title: '温馨提示',
            content: '抱歉，您没有权限查看数智化看板，请联系管理员进行授权',
            success(res) {
            }
          })
          return
        } else {
          let _this = this
          uni.showModal({
            title: '温馨提示',
            content: '请您授权登录后再操作。',
            success(res) {
              if (res.confirm) {
                _this.$util.toNextRoute('redirectTo', '/pages/register/register')
              }
            }
          })
          return
        }
      }


      //通过权限来判断是否可以点击跳转
      let userInfo = uni.getStorageSync("vuex");
      userInfo = userInfo ? JSON.parse(userInfo) : ""
      console.log('userInfouserInfouserInfo', userInfo);
      if (!userInfo.userData || !userInfo.userData.WeChat_UserId) {
        this.$util.toNextRoute('redirectTo', '/pages/register/register')
      } else if (userInfo.userData && userInfo.userData.WeChat_UserId && userInfo.userData.AuthorityInfo["89a1f248-2113-4d57-84b1-c2e6edb9e8ee"] !== 1) {
        uni.redirectTo({
          url: `/pages/commercialBI/noData?type=homeIndex`,
        });
        return
      }

      let version = uni.getStorageSync('version')
      if (version === 1) {
        if (item.summaryOfPortraits) {
          this.$util.toNextRoute('navigateTo', '/pages/summaryOfPortraits/index?index=' + item.type)
        } else {
          this.$util.toNextRoute('navigateTo', item.homeUrl)
        }
      } else {
        this.$util.toNextRoute('navigateTo', item.homeUrl)
      }
    },

    // 根据数组信息判断是否能跳转
    handleGo(item) {
      if (this.isReturn) {
        let _this = this
        uni.showModal({
          title: '温馨提示',
          content: '请您授权登录后再操作。',
          success(res) {
            if (res.confirm) {
              _this.$util.toNextRoute('redirectTo', '/pages/register/register')
            }
          }
        })
        return
      }

      if (item.value === 2) {
        if (item.value === 2) {
          let currentService = uni.getStorageSync('currentService')
          this.$util.toNextRoute('navigateTo', `${item.homeUrl}?time=${this.lastDay}&serviceInfo=${JSON.stringify(currentService)}&type=userCenter`)
        } else {
          this.$util.toNextRoute('navigateTo', item.homeUrl)
        }
      } else if (item.value === 3 && item.isNotice || item.value === 4 && item.isNotice) {
        if (item.name === '基础信息') {
          this.$util.toNextRoute('navigateTo', `${item.homeUrl}?isPicker=${true}`)
        } else {
          this.$util.toNextRoute('navigateTo', item.homeUrl)
        }
      } else if (item.value === 1) {
        if (item.isNotice) {
          this.$util.toNextRoute('navigateTo', item.homeUrl)
        } else {
          uni.showToast({ title: '栏目建设中', icon: 'none' })
        }

      } else {
        uni.showToast({ title: '暂无权限,请联系管理员', icon: 'none' })
      }
    }
  }

}
</script>

<style scoped lang="scss">
.main {
  .title {
    font-size: 30rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #160002;
    line-height: 48rpx;
    margin-bottom: 12px;
  }

  .first {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 28px;

    .useListItem {
      width: calc((100% - 16px)/3);
      height: 72px;
      position: relative;
      box-sizing: border-box;
      padding: 8px 11px;
      border-radius: 4px;
      overflow: hidden;

      .bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
      }

      .iconStart {
        width: 20px;
        height: 20px;
        overflow: hidden;
        position: absolute;
        left: 11px;
        top: 27px;
        z-index: 2;

        .icon {
          width: 14px;
          height: 14px;
          transform: translateX(30px);
          border-right: 30px solid transparent;
        }

        .icon_first {
          filter: drop-shadow(-30px 0px #9564F6);
        }

        .icon_second {
          filter: drop-shadow(-30px 0px #F5921D);
        }

        .icon_third {
          filter: drop-shadow(-30px 0px #28BAD3);
        }
      }

      .name {
        font-size: 24rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #55277d;
        line-height: 40rpx;
        position: absolute;
        top: 8px;
        left: 11px;
        z-index: 2;
      }

      .img {
        width: 32px;
        height: 32px;
        position: absolute;
        bottom: 9px;
        right: 14px;
      }
    }

    //.firstBg_1 {
    //  background: url('/static/images/user/firstBg_1.svg');
    //}
    //.firstBg_2 {
    //  background: url('/static/images/user/firstBg_2.svg');
    //}
    //.firstBg_3 {
    //  background: url('/static/images/user/firstBg_3.svg');
    //}
  }

  .second {
    width: 100%;
    display: flex;
    margin-bottom: 28px;

    .useListItem {
      width: 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;

      .img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(22, 0, 2, 0.05);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 8px;

        image {
          width: 32px;
          height: 32px;
        }
      }

      .name {
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #160002;
        line-height: 40rpx;
      }
    }
  }

  .third {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;

    .useListItem {
      width: 25%;
      position: relative;
      margin-bottom: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .imgParent {
        width: 30px;
        height: 30px;
        margin-bottom: 6px;
        overflow: hidden;

        .img {
          width: 30px;
          height: 30px;
          margin-bottom: 6px;
          transform: translateX(30px);
          border-right: 30px solid transparent;
          filter: drop-shadow(-30px 0px #ccc);
        }
      }

      .img_normal {
        width: 30px;
        height: 30px;
        margin-bottom: 6px;
      }

      .name {
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #160002;
        line-height: 40rpx;
      }

      .notice {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        position: absolute;
        right: 4px;
        top: 0;
        color: #fff;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 32rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .meng {
      //position: absolute;
      //top: 0;left: 0;
      //width: 100%;
      //height: 100%;
      //background: rgba(0,0,0,0.4);
    }
  }

  .fourth {
    width: 100%;
    display: flex;

    .useListItem {
      width: 20%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;

      .imgParent {
        width: 24px;
        height: 24px;
        margin-bottom: 6px;
        overflow: hidden;

        .img {
          width: 24px;
          height: 24px;
          margin-bottom: 6px;
          transform: translateX(30px);
          border-right: 30px solid transparent;
          filter: drop-shadow(-30px 0px #ccc);
        }
      }

      .img_normal {
        width: 24px;
        height: 24px;
        margin-bottom: 6px;
      }

      .name {
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #091732;
        line-height: 40rpx;
      }

      .notice {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: red;
        position: absolute;
        right: 20%;
        top: -4px;
        color: #fff;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
