<template>
  <section class="AppConsole">
    <div class="top">
      <div class="left">
        <!-- <img :src="user.info.avatar"> -->
        <div class="user">
          <h2 class="mar-b10">您好，{{ user.info.name }}，欢迎回来！</h2>
          <p v-if="user.financeUser" v-text="financeInfo"/>
          <span>上次登录时间：{{ user.info.lastLoginTime }}</span>
        </div>
      </div>
      <div class="right">
        <div class="right-item" v-for="row in info" :key="row.name" @click="$router.push({name:row.menuId,query:{status:row.dictValue}})">
          <div class="top">
            <i v-if="row.countNumber>0"/>
            <span v-text="row.name"/>
          </div>
          <h2 v-text="row.countNumber"/>
        </div>
      </div>
    </div>
    <div class="middle" v-if="!isFinanceUser">
      <div class="left">
        <div class="title">
          <h2>群众留言</h2>
          <div @click="$router.push({name:routeNames.AppMassMessage})">
            <span>全部留言</span>
            <img src="./assets/right.png">
          </div>
        </div>
        <div class="list">
          <div class="comment-item" v-for="(item, index) in comments" :key="index"
               @click="$router.push({name:routeNames.AppMassMessage,query:{id:item.id}})">
            <h3>{{ item.title }}</h3>
            <div class="comment-item__bottom">
              <span>{{ dict.getLabel('leaveMessageType', item.type) }}</span>
              <i>{{ item.createTime }}</i>
            </div>
          </div>
          <ai-empty class="w100" v-if="!comments.length"/>
        </div>
      </div>
      <div class="right">
        <div class="title">
          <h2>政策动态</h2>
          <div @click="$router.push({name:routeNames.AppNewsCenter})">
            <span>全部动态</span>
            <img src="./assets/right.png">
          </div>
        </div>
        <div class="list">
          <div class="dynamic-item" v-for="(item, index) in news" :key="index" @click="$router.push({
            name: routeNames.AppNewsCenter,
            query: {
              id: item.id
            },
            hash: '#' + (item.type === '0' ? 'news' : 'video')
          })">
            <i></i>
            <div class="dynamic-item__right">
              <h3>{{ item.title }}</h3>
              <p>{{ item.createTime }}</p>
            </div>
          </div>
          <ai-empty class="w100" v-if="!news.length"></ai-empty>
        </div>
      </div>
    </div>
    <div class="bottom" v-else>
      <div class="title">
        <h2>需求抢单</h2>
        <div @click="$router.push({name:routeNames.AppFinancingNeeds})">
          <span>查看全部</span>
          <img src="./assets/right.png">
        </div>
      </div>
      <div class="list">
        <div class="item" v-for="(item, index) in list" :key="index">
          <div class="item-top">
            <div class="item-top__left fill">
              <h2 class="nowrap">{{ item.enterpriseName || item.name }}</h2>
              <p>{{ item.areaName }}</p>
            </div>
            <img @click="$router.push({name:routeNames.AppFinancingNeeds,query:{id:item.id}})"
                 src="./assets/qd.png">
          </div>
          <div class="item-bottom">
            <div class="item-bottom__item">
              <span>需求金额</span>
              <h3>{{ item.loanAmount }}万</h3>
            </div>
            <div class="item-bottom__item">
              <span>使用时长</span>
              <h3 v-text="dict.getLabel('productRepaymentTimeline',item.hopeLifespan)"/>
            </div>
          </div>
        </div>
        <ai-empty class="pad-b48 w100" v-if="!list.length"/>
      </div>
    </div>
  </section>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "AppConsole",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    ...mapState(['user']),
    isFinanceUser() {
      return !!this.user?.financeUser?.id
    },
    financeInfo() {
      let {organizationName, userRole} = this.user.financeUser
      return [organizationName, this.dict.getLabel("financialOrganizationUserRole", userRole)].join(" | ")
    },
    routeNames() {
      return {
        AppMassMessage: "c66857ca597f49aab9c1aeb8a8e3e7c0",
        AppNewsCenter: '6a56c8fdb09a437098f837a03a5fccb0',
        AppFinancingNeeds: "27338cb83e77461dbd44356a6760df85",
      }
    }
  },
  data() {
    return {
      comments: [],
      news: [],
      list: [],
      info: {}
    }
  },
  created() {
    this.dict.load('leaveMessageType', 'financialOrganizationUserRole', 'productRepaymentTimeline').then(() => {
      this.getComments()
      this.getNewsList()
      this.getList()
      this.getInfo()
    })
  },

  methods: {
    getComments() {
      this.instance.post('/appleavemessage/list?current=1&size=10').then(res => {
        if (res.code === 0) {
          this.comments = res.data.records
        }
      })
    },

    getInfo() {
      this.instance.post("/todo/queryToDoList").then(res => {
        if (res?.data) {
          this.info = res.data
        }
      })
    },

    getNewsList() {
      this.instance.post('/appnews/list?current=1&size=10').then(res => {
        if (res.code === 0) {
          this.news = res.data.records
        }
      })
    },

    getList() {
      this.instance.post('/appfinancingdemand/list?current=1&size=8', null, {
        params: {status: 0}
      }).then(res => {
        if (res?.data) {
          this.list = res.data.records
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.AppConsole {
  height: 100%;
  margin-bottom: 20px;
  padding: 0 20px;
  overflow-y: auto;

  .w100 {
    width: 100%;
  }

  .item-top__left {
    width: 100%;
  }

  .nowrap {
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;

    h2 {
      color: #222222;
      font-size: 16px;
      font-weight: 600;
    }

    div {
      display: flex;
      align-items: center;
      cursor: pointer;

      &:hover {
        opacity: 0.6;
      }

      span {
        margin-right: 4px;
        color: #999999;
        font-size: 14px;
      }

      img {
        width: 16px;
      }
    }
  }

  * {
    box-sizing: border-box;
  }

  & > .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 152px;
    margin: 20px 0;
    padding: 0 40px 0 16px;
    background: #FFFFFF;
    box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
    border-radius: 2px;

    .left {
      display: flex;

      img {
        width: 64px;
        height: 64px;
        margin-right: 16px;
        border-radius: 50%;
      }

      h2 {
        font-size: 22px;
        font-weight: 600;
        color: #333333;
        line-height: 30px;
      }

      span {
        color: #666666;
        font-size: 14px;
      }

      p {
        margin: 0 0 8px;
        color: #46669D;
        font-size: 14px;
      }
    }

    .right {
      display: flex;
      align-items: center;

      .right-item {
        margin-right: 64px;
        text-align: right;
        cursor: pointer;

        &:last-child {
          margin-right: 0;
        }

        h2 {
          font-size: 32px;
          color: #222;
        }

        .top {
          display: flex;
          align-items: center;
          margin-bottom: 12px;

          i {
            width: 6px;
            height: 6px;
            margin-right: 8px;
            border-radius: 50%;
            background: #FA9D50;
          }

          span {
            color: #666666;
            font-size: 16px;
          }
        }
      }
    }
  }

  .middle {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .left {
      width: 480px;
      height: 360px;
      padding: 0 16px 16px;
      overflow: hidden;
      background: #FFFFFF;
      box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
      border-radius: 4px;

      .comment-item {
        padding: 16px 0;
        border-bottom: 1px solid #EEEEEE;

        &:first-child {
          padding-top: 0;
        }

        &:last-child {
          border: none;
        }

        h3 {
          line-height: 1.2;
          margin-bottom: 8px;
          color: #333333;
          font-size: 16px;
          font-weight: normal;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;

          &:hover {
            color: #2266FF;
            text-decoration: underline;
          }
        }

        div {
          display: flex;
          align-items: center;

          i {
            color: #999999;
            font-size: 14px;
            font-style: normal;
          }

          span {
            height: 20px;
            margin-right: 8px;
            padding: 0 8px;
            color: #2266FF;
            font-size: 12px;
            background: #E8EFFF;
            border-radius: 4px;
          }
        }
      }
    }

    .list {
      height: calc(100% - 56px);
      overflow-y: auto;
    }

    .right {
      flex: 1;
      height: 360px;
      margin-left: 20px;
      padding: 0 16px 16px;
      overflow: hidden;
      background: #FFFFFF;
      box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
      border-radius: 4px;

      .dynamic-item {
        display: flex;
        padding: 16px 0;
        border-bottom: 1px solid #EEEEEE;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        &:first-child {
          padding-top: 0;
        }

        &:last-child {
          border: none;
        }

        i {
          position: relative;
          top: 8px;
          width: 8px;
          height: 8px;
          margin-right: 8px;
          border-radius: 50%;
          border: 2px solid #2266FF;
        }

        .dynamic-item__right {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          h3 {
            color: #333;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            &:hover {
              color: #2266FF;
              text-decoration: underline;
            }
          }

          p {
            color: #999999;
            font-size: 14px;
          }
        }
      }
    }
  }

  .bottom {
    margin-bottom: 20px;
    padding: 0 16px 20px;
    background: #FFFFFF;
    box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
    border-radius: 4px;

    .list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    .item {
      width: 372px;
      height: 132px;
      margin-bottom: 16px;
      margin-right: 16px;
      background: #FFFFFF;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.02);
      border-radius: 12px;
      border: 1px solid #EEEEEE;

      // &:nth-of-type(3n) {
      //   margin-right: 0;
      // }

      .item-bottom {
        display: flex;
        align-items: center;
        height: 56px;

        .item-bottom__item {
          display: flex;
          position: relative;
          align-items: center;
          justify-content: center;
          flex: 1;

          &:first-child::after {
            position: absolute;
            right: 0;
            top: 50%;
            z-index: 1;
            width: 1px;
            height: 24px;
            background: #EEEEEE;
            transform: translateY(-50%);
            content: ' ';
          }

          span {
            margin-right: 12px;
            color: #999999;
            font-size: 14px;
          }

          h3 {
            color: #333333;
            font-size: 16px;
            font-weight: 600;
          }
        }
      }

      .item-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 76px;
        padding: 0 16px;
        border-bottom: 1px solid #EEEEEE;

        h2 {
          margin-bottom: 8px;
          color: #333333;
          font-size: 17px;
          font-weight: normal;
        }

        p {
          color: #999999;
          font-size: 14px;
        }

        img {
          width: 60px;
          height: 60px;
          cursor: pointer;

          &:hover {
            opacity: 0.6;
          }
        }
      }
    }
  }
}
</style>
