<template>
  <div class="chat-item">
    <div class="time" v-if="showTime">{{ showTime | getTimeStr }}</div>
    <div
      :class="
        itemData.isSelf
          ? ['content', 'flex-default', 'is-self']
          : ['content', 'flex-default']
      "
    >
      <div
        class="avatar m-icon"
        :style="{ 'background-image': 'url(' + getavatar + ')' }"
      />
      <div
        class="txt"
        v-if="itemData.type == ChatMsgType.TEXT"
        :class="{ isUrl: isUrl }"
        @click="openURL"
      >
        {{ itemData.content }}
      </div>
      <div class="thumb-con" v-else-if="itemData.type == ChatMsgType.IMAGE">
        <img class="thumb" :src="itemData.content" @click="previewItem" />
        <progress
          :percent="itemData.progress"
          stroke-width="2"
          v-show="itemData.progress > 0 && itemData.progress < 100"
        />
      </div>
      <div v-else class="thumb-con">
        <div class="video-con">
          <video :src="itemData.content" style="width: 100%" :poster="itemData.content+'?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0,m_fast'"></video>
          <div class="video-mask" @click="previewItem" />
        </div>
        <progress
          :percent="itemData.progress"
          stroke-width="2"
          v-show="itemData.progress > 0 && itemData.progress < 100"
        />
      </div>
      <div class="status-icon flex-default">
        <div class="icon loading" v-show="itemData.status == 1"></div>
        <div class="icon warn" v-show="itemData.status == 3"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { ChatMsgStatus, ChatMsgType } from "@/enums";
import { formatTime } from "@/utils";
export default {
  props: {
    itemData: Object,
    postData: Object,
    index: Number,
    previous: Object,
  },
  computed: {
    showTime() {
      let hideTime = 0;
      if (this.index === 0) {
        hideTime = this.itemData.sendTime;
      } else {
        const difference = this.itemData.sendTime - this.previous.sendTime;
        if (difference > this.difference) {
          hideTime = this.itemData.sendTime;
        }
      }
      return hideTime;
    },
    getavatar() {
      if (this.itemData.isSelf) {
        return this.postData.userImage;
      } else {
        return this.postData.customerImage;
      }
    },
    isUrl() {
      let flag = false;
      if (this.itemData.type == this.ChatMsgType.TEXT) {
        const strRegex =
          "^((https|http|ftp)://)?" + //(https或http或ftp):// 可有可无
          "(([\\w_!~*'()\\.&=+$%-]+: )?[\\w_!~*'()\\.&=+$%-]+@)?" + //ftp的user@  可有可无
          "(([0-9]{1,3}\\.){3}[0-9]{1,3}" + // IP形式的URL- 3位数字.3位数字.3位数字.3位数字
          "|" + // 允许IP和DOMAIN（域名）
          "(localhost)|" + //匹配localhost
          "([\\w_!~*'()-]+\\.)*" + // 域名- 至少一个[英文或数字_!~*\'()-]加上.
          "\\w+\\." + // 一级域名 -英文或数字  加上.
          "[a-zA-Z]{1,6})" + // 顶级域名- 1-6位英文
          "(:[0-9]{1,5})?" + // 端口- :80 ,1-5位数字
          "((/?)|" + // url无参数结尾 - 斜杆或这没有
          "(/[\\w_!~*'()\\.;?:@&=+$,%#-]+)+/?)$";
        const re = new RegExp(strRegex);
        flag = re.test(this.itemData.content);
      }
      return flag;
    },
  },
  data() {
    return {
      ChatMsgStatus,
      ChatMsgType,
      dateTime: formatTime(new Date(), "yyyy-MM-dd hh:mm:ss"),
      difference: 1000 * 60 * 2,
    };
  },
  filters: {
    getTimeStr(val) {
      if (val) {
        return formatTime(new Date(val), "yyyy-MM-dd hh:mm:ss");
      }
      return "";
    },
  },
  methods: {
    previewItem() {
      this.$emit("previewItem",{obj:this.itemData,index:this.index})
    },
    openURL() {
      if (this.isUrl) {
        // #ifdef APP-PLUS
        plus.runtime.openURL(this.itemData.content); //这里默认使用外部浏览器打开而不是内部web-view组件打开
        // #endif
        // #ifdef H5
        window.open(this.itemData.content);
        // #endif
      }
    },
  },
};
</script>

<style lang="less">
.chat-item {
  margin-bottom: 10px;

  > .time {
    text-align: center;
    color: #afafaf;
    font-size: 11px;
    line-height: 13px;
    margin-bottom: 10px;
  }

  > .content {
    align-items: flex-start;
    padding: 0 16px;

    .status-icon {
      height: 100%;
      align-items: center;
      justify-content: center;
      width: 16px;

      .icon {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        margin-top: 11px;
        background-repeat: no-repeat;
        background-size: contain;

        &.loading {
          background-size: 100%;
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAFjElEQVRYR7VXXWhTZxh+35Ofs7ZitxRqDG1TJAEhLNEiLdQhCNNqnRfb8Dit1dCZ9sI20oLTi7ll6IW2oJjaC2P8KW4OUqZIayjuQhjiluL8K8GLZBiSUmJh3U1iyc857/iOSWhcmphsO1ch53uf7/nen+d7DkKFTyAQ4EVR/I2Fi6LYZjKZkpVAYSVBLMbv9xs4jguw35IkGU0mU7ASrKIEnj9//h0ANCgUimMmk2lx+QbBYNCQSqVkAiqVymgwGPIIvHjxoq6qqmoYEef0ev23K5FbkQADSCaTC0TEIeIti8XyeTkEQqHQLQD4lCVIqVTWNzQ0/FmIRKkMOCVJGmCBHMcdMJvNP2RBimUgFAp1AcD3bC0ijur1envZGWABjx49qlYqlU8BwIiIi6IoftjS0jLP3q1EIBwO64holog0RBTgeX6DTqd7/U4EfD5fXVtbW16qZmdn20VR/AUAFIjotVgsu4o1YSgUugsAnYgoEtGW5ubmh8s3n5ubq1tejlwJZmZmWMN9TURjCoXixKZNm3Ksnz17NkxExzKl6DKbzTcLjWEoFNoPANkyjTQ3N3+V3Xx+fr4aEc8AwBEAOL127Vq5MXMEfD7fFQDoyQQEENHa2toqs2ebxePxh4i4ERF7zGbz9UIpDYfDViK6SkRP9Hp9OyIm2LpXr161E9F1IjJm+uKqVqv9Mo+A3+/XxGIxd6ZzZX0BgHMajeak0WhM3L9/X6nRaDQWi2Wh2LwHg8H6SCSyuHXr1jQR8dFo9BQADLESZja/nU6nbdky/GMKZmZmuojICQCaTMDjeDzexgDLERpGeP369T4AaMnELXIcZ1+zZk1ukvIysBz8wYMHOpVKdTnTTJRKpbSbN28uevK3yUWj0XoAiBIRO6Q3lUrZmpqa5Ala/hTVAZ/Ptx8R1a2trQVrXiojCwsLVkmSklqt9uY7jWEpwP/jPfr9fnUkEmnigc/DT0ACGhsbw5Xeclkwh8Oh5nm+IH4ikQjjz/fuPQGCDQVPh/B02/btG//NyYfPni2KX5QAIj75ePu2bBdXxKMkAa/Xy3Mc11ioBJIkRTo7O2UxqfRxDjj5uC5eEF8uQaXA/1VcUQLTd+/uJ+DUO3ftrGgMx86ft0oclxw4erS8Mbxz545OrWBCROxWI1QqtB0dHWUJ0cjISH2VUiULEQJ6KZWwDRw/XlqIvJPeLuTACUSyFAPQ4/dqasqWYofDoaxbXZsvxQj2I4ODhaV4amrqAyUq3ETSZ5n6ioBwjhBPskZkgOvWrdMcPHiwaCbGx8frXr58+ZfD4ZCcTifPpaVTBJS7jADhVhWR7fDQkOwxcz0wPeV1EZAt82cAQWnt+KRDvo7ZpMRiMfk6JqIeQRAK9oTb5eoGwHEi+H0psfSR3W6XJ2jswoV2SZRYTOY6hqv9g4P51/H0lPckATkAcCxN4ondu3fnDInH4xkGANmQAECXIAg32elqV63+lYCwelVNmyAISbfL9QUR/PhmGY7Y+mw5Q3LJ4ahO1daeIYIjBHTaPjSUb0hYyPT0tGbHjh159ntiYoKZCdmSEZF37969siVzu90GJaeQbTlwaLBarX/I/19yTREAWyMqELb09PbmWbKLFy/W9ff352xf0TGcnJysXlpakk0pAMimdN++fXIn37hxwyCm0jIBhUpp7O7ulr8LroyO6iQ1P8v8BAIERKANfX1972ZK3xaXiYkJJxHJthwRD+zZsyfXwSsRYGtdLlcX0htbDgijtt7e8m35tWvX3q+pqWGp4gDgtiAI2emQcYsReFOKyz8REIuR1Cm+/lD/ofI/TDwezzdE1IiIxwVByOuNkgTcbg2I0gggzB3u7S3/06yU1q/UhKXi3n5f8WXk8XjUr2NxpnSQHcNyN2fr/wafA5ghuxikSgAAAABJRU5ErkJggg==);
          animation: rotateloading 2s linear infinite;
        }

        &.warn {
          background-size: 100%;
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAC3UlEQVRYR8WXS2xMYRTHf6fTzgjSnaQktZAuSCPSO14rxI4uUAQLjwUNqYjInTY2Fd1I2yEi6lEWHgsSz0iKlWBVj7kNUiwaCyWEXaPSqU6P3Me009HqvZdmZjv3/z+/7/vOOd/5BJ8/baucyUCsGmU1yiKUeQiljlzpQ/iA8ArhEdPSHVLX/cOPtUz2kR4zKijRBlS2ATMm+977vx/Ra/ySZjls9fxNMyGAnqqIMVjahHIQiPoMnP/ZIMJJon2NcqAnPZ7HuADasqSMoswdlOUhA4+VCZ0MRzZI/Yuv+X5/AOiJ+EIy2gGU/5fgoya9RKRaDqXe5PqOAXBWLpnnUxA8G7MXjSzN3YkRAO/MH/vedmGjmNZtpwiSRg3KLV87Zh9HtG9VNidGAZJGM0q9LxP7I9EdYnZddQGqtqNyxb+WFjGtBsfGMbBLrZjuQNkuuk/MrnMewF5UzvoGgEGGqLRL1AVIVl1AZXcAA1BJSH0q6ehb4iairYH0ohfF7NojTof7GbPLw2+TceOIHBEz1eQuIN6I6tFAANDP9HSZ6HFjC8NcDyi2D2/kHDVo/mSDFbFVNGmcR6kNAdAmprXfq4LTKHUhPNpFW41OYFlgMXpZEl27HIDWqksgO4N78Ey0xfiGMCu4WG5KIrXZBYjfAN0U2EP5bu/AABALLIYHkrDWugDGfWBNCI/0vwA8lYS10gN4AqwIBxD6CEhJwlrsAbwE4oEBvCMIl4TCezGtBV4VvEOZHxgAOwnDl2GvmNZcD+AjGuL6FtrDNyI0jchdZ9Wq60GCJ7LTiMK24hD7nSdxW7G7hSEuI+EexSW1dktnKHoGpSYQU/YycgDc6/gtUOLbRCOzs5ONN0l98a3Nv469RAo2kAwPlUvD60+OtrlqDkXy2TdAzkUWfiSDh0Qy7gyRKW4DXecLYKKRzFlJIYfSLH1Bx/IRiEI+TEYgCvk0y02mgj1O8zN6qp7nvwGrGFpWPLPlKgAAAABJRU5ErkJggg==);
        }
      }
    }

    .avatar {
      border-radius: 50%;
      width: 35px;
      height: 35px;
      background-color: #ffffff;
    }
    .txt {
      margin: 0 12px;
      width: fit-content;
      max-width: 250px;
      background: #ffffff;
      border-radius: 5px;
      padding: 10px 11px;
      color: #140603;
      font-size: 14px;
      line-height: 18px;
      word-wrap: break-word;
      &.isUrl {
        color: #0000ee !important;
      }
    }

    .thumb-con {
      margin: 0 12px;
      width: 120px;
      border-radius: 5px;
      height: fit-content;
      position: relative;
      line-height: 0;
      // text-align: right;
    }
    .thumb-con .uni-progress {
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .thumb-con .thumb {
      width: 100%;
      border-radius: 5px;
    }

    .thumb-con .loading {
      position: absolute;
      background: lightgray;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: 5px;
    }
    .thumb-con .video-con {
      width: 100%;
      position: relative;
      .video-mask {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 100;
        left: 0;
        top: 0;
      }
    }
  }

  > .content.is-self {
    flex-direction: row-reverse;

    .txt {
      color: #ffffff;
      background: #488FF7;
    }

    .thumb-con {
      // background: linear-gradient(93deg, #dd2e41 0%, #dd2e41 100%);
    }
  }

  @keyframes rotateloading {
    0% {
      -webkit-transform: rotate(0deg);
    }

    25% {
      -webkit-transform: rotate(90deg);
    }

    50% {
      -webkit-transform: rotate(180deg);
    }

    75% {
      -webkit-transform: rotate(270deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
    }
  }
}
</style>
