<template>
  <div class="normal-panel follow__panel">
    <div class="container flex-align-center flex-between">
      <div>
        <slot name="collapse"></slot>
        <p class="inline-16">跟进动态</p>
      </div>
      <addLog :ownertable="ownertable" @onSuccess="queryLogs"></addLog>
    </div>
    <div  class="container">
      <div v-if="logList.length === 0">
        <el-empty description="暂无记录" :image-size="40"></el-empty>
      </div>
      <div>
        <el-timeline>
          <el-timeline-item
            v-for="i in logList" :key="i.index"
            :timestamp="i.createdate">
              <div slot="dot" class="dot"></div>
              <div class="step__panel normal-margin">
                <div class="flex-align-center flex-between" style="margin-bottom:10px">
                  <!-- <p><small>跟进人:</small>{{i.changeby}}</p> -->
                  <img height="30" width="30" :src="i.headpic" alt="">
                  <small style="color:#999">{{i.createdate}}</small>
                </div>
                <div class="follow-progress">
                  <p>{{i.content}}</p>
                  <div>
                    <!-- <previewImage v-show="checkFileType(img.postfix) === 'img'" style="width:60px;height:60px;margin-left:5px" v-for="img in i.attinfos" :key="img.index" :image="img" :deletebtn="true" @onSuccess="queryLogs"></previewImage> -->
                    <div class="flex-align-center flex-between pionter" v-for="img in i.attinfos" :key="img.index" style="padding:10px;margin-bottom:5px">
                      <div class="flex-align-center" style="flex:1;width:100%">
                        <img width="30" :src="checkFileType(img.postfix) === 'file'?require('@/assets/file_icons/file.svg'):img.url" class="inline-16" alt="">
                        <div class="file__link">
                          <a :href="img.url">{{img.document}}</a>
                          <p>{{(img.contentlength / 1024).toFixed(2)}}kb</p>
                        </div>
                      </div>
                      <i style="color:red;" class="el-icon-delete" v-if="nowUserid === i.createuserid" @click="deleteFile(img)"></i>
                    </div>
                  </div>
                  <!-- <div v-show="checkFileType(file.postfix) === 'file'"  class="flex-align-center pionter" style="margin-bottom:10px;" v-for="file in i.attinfos" :key="file.index">
                    <a class="file__link" :href="file.url">{{file.document}}</a>
                    <i style="color:red;" class="el-icon-delete" @click="deleteFile(file)"></i>
                  </div> -->
                  <div style="text-align:right" v-if="nowUserid === i.createuserid">
                    <upload class="inline-16" slot="upload" 
                      :folderid="folderid"
                      btntype="icon"
                      :bindData="{ ownertable: 'sys_datafollowup', ownerid: i.sys_datafollowupid,usetype: 'default' }"
                      @onSuccess="queryLogs">
                    </upload>
                    <editLog :data="i" :ownertable="ownertable" @onSuccess="queryLogs"></editLog>
                    <el-button icon="el-icon-delete" size="mini" type="text" @click="deleteLogs(i)">删 除</el-button>
                  </div>
                </div>
              </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script>
import upload from '@/components/upload/hw_obs_upload.vue'
import previewImage from '@/components/previewImage/index.vue'

import addLog from './addLog.vue'
import editLog from './editLog.vue'
export default {
  props:['ownertable'],
  components:{
    addLog,
    editLog,
    upload,
    previewImage
  },
  data () {
    return {
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
      logList:[],
      nowUserid:''
    }
  },
  methods:{
    async queryLogs() {
      const res = await this.$api.requested({
        "id": 20220930121501,
        "content": {
            "ownertable":this.ownertable,
            "ownerid":this.$route.query.id
        }
      })
      this.logList = res.data
    },
    async deleteLogs (val) {
      const res = await this.$api.requested({
        "id": 20220930121701,
        "content": {
          "sys_datafollowupid":val.sys_datafollowupid
        }
      })
      this.tool.showMessage(res,()=>{
        this.queryLogs()
      })
    },
    checkFileType (type) {
      let arr = ['JPG','JPEG','PNG']
      if (arr.includes(type.toUpperCase())) {
        return 'img'
      } else {
        return 'file'
      }
    },
    async deleteFile (row) {
      const res = await this.$api.requested({
        "classname": "system.attachment.Attachment",
        "method": "deleteFileLink",
        "content": {
          "linksids":[row.linksid]
        }
      })
      this.tool.showMessage(res,()=>{
        this.queryLogs()
      })
    }
  },
  mounted () {
    this.queryLogs()
    this.nowUserid = JSON.parse(sessionStorage.getItem('active_account')).userid
  },
  watch: {
    $route () {
      this.queryLogs()
    }
  }
}

</script>
<style>
.el-step__description{
  padding-right:0px !important;
}
</style>
<style scoped>
.step__panel{
  background-color: #eff4ff;
  padding: 10px;
  border-radius: 5px;
  color:#666
}
.follow-progress p{
  width:100%;
  margin-bottom:5px;
  font-size:14px;
  word-wrap: break-word;
}
.file__link{
  color:#999;
  font-size: 12px;
  padding: 0 5px;
  display:block;
  width: 100%;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}
.pionter{
  margin:6px 0;
  padding: 10px;
  transition: .2s linear;
  cursor: pointer;
  border-radius: 5px;
  background: #ffff;
}
.pionter:hover{
  box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
}
.sticky{
  position: sticky;
  top:0px;
  /* background: #fff; */
  z-index: 9999;
}
.dot{
  background:#fff;height:10px;width:10px;border-radius:100%;border:2px solid #3874F6;
}
.normal-panel{
  border-radius: 5px;
}
.flex-wrap{
  flex-wrap: wrap
};
</style>