<template>
  <div class="message">
    <div class="message-item" v-for="(item, index) in list" :key="index">
      <h2>{{ item.createTime }}</h2>
      <div v-if="item.channel !== '0'">{{ item.msg }}</div>
      <div v-else>
        <i v-for="(item, index) in item.msg" :key="index">
          <i v-if="item.type === 0">{{ item.value }}</i>
          <AiOpenData style="display: inline" v-else type="userName" :openid="item.value"></AiOpenData>
        </i>
      </div>
    </div>
    <AiEmpty v-if="!list.length && isMore"></AiEmpty>
  </div>
</template>

<script>
  export default {
    name: 'Message',
    appName: '工作相册',

    data () {
      return {
        size: 15,
        current: 1,
        isMore: false,
        list: []
      }
    },

    onLoad () {
      this.getList()
    },

    methods: {
      mapType (type) {
        return {
          '0': '照片查看',
          '1': '照片上传',
          '2': '打卡统计'
        }[type]
      },

      getList () {
        if (this.isMore) return

        this.$loading()
        this.$http.post(`/api/sysmessage/list`, null, {
          params: {
            size: 10,
            current: this.current
          }
        }).then(res => {
          if (res.code === 0) {
            if (this.current > 1) {
              this.list = [...this.list, ...res.data.records].map(v => {
                let msg = v.content
                if (v.channel === '0') {
                  if (v.content.split('$').length === 3) {
                    msg = v.content.split('$').map((v, index) => {
                      if (index === 1) {
                        return {
                          type: 1,
                          value: v.split('=')[1]
                        }
                      }

                      return {
                        type: 0,
                        value: v
                      }
                    })
                  }
                }
                return {
                  ...v,
                  msg,
                  typeName: this.mapType(v.channel)
                }
              })
            } else {
              this.list = res.data.records.map(v => {
                let msg = v.content
                if (v.channel === '0') {
                  if (v.content.split('$').length === 3) {
                    msg = v.content.split('$').map((v, index) => {
                      if (index === 1) {
                        return {
                          type: 1,
                          value: v.split('=')[1]
                        }
                      }

                      return {
                        type: 0,
                        value: v
                      }
                    })
                  }
                }
                return {
                  ...v,
                  msg,
                  typeName: this.mapType(v.channel)
                }
              })
            }

            if (res.data.records.length < 10) {
              this.isMore = true

              return false
            }

            this.current = this.current + 1
          }
        })
      }
    },

    onReachBottom () {
      this.getList()
    }
  }
</script>

<style lang="scss" scoped>
  .message {
    padding-bottom: 60px;

    .message-item {
      h2 {
        padding: 48px 0 32px;
        color: #666666;
        font-size: 32px;
        font-weight: normal;
        text-align: center;
      }

      i {
        font-style: normal;
      }

      & > div {
        margin: 0 32px;
        padding: 32px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.02);
        font-size: 32px;
        color: #333333;
        line-height: 44px;
        text-align: justify;
        border-radius: 16px;
        background: #fff;
      }
    }
  }
</style>
