<!-- 跟进 -->
<template>
  <div class="context">
    <div style="text-align: right;margin-bottom: 20px;">
      <el-button type="primary" @click="open_add">
        新增跟进
      </el-button> 
    </div>
    <el-divider></el-divider>
    <div v-for="item in list">
      <div class="top_border">
        <div style="flex: 1;">
          <el-avatar :size="50" :src="circleUrl"></el-avatar>
        </div>
        <div style="flex: 12;">
          <span>马文强</span><br/>
          <span>{{getTime(item.time)}}</span><br/>
          <span v-html="item.desc"></span>
        </div>
        <div style="flex: 1;">
          <el-button type="text" @click="opendele(item)">删除</el-button>
        </div>
      </div>
      <el-divider></el-divider>
    </div>
    <!-- <div>
      <div class="top_border">
        <div style="flex: 1;">
          <el-avatar :size="50" :src="circleUrl"></el-avatar>
        </div>
        <div style="flex: 12;">
          <span>马文强</span><br/>
          <span>2023-12-09  12：20：22</span><br/>
          <span>打电话沟通续费事情，对方老板已经同意，准备合同和打款，</span>
        </div>
        <div style="flex: 1;">
          <el-button type="text">删除</el-button>
        </div>
      </div>
      <el-divider></el-divider>
    </div> -->

     <!-- 弹窗 -->
     <div>
      <!-- 新增 -->
      <el-dialog
        title="新增跟进"
        :visible.sync="newfollow"
        :modal-append-to-body="false"
        width="60%"
        >
        <div style="height: 50vh;overflow: overlay;">
          <keep-alive>
            <editor ref="editor"
                    id="editor"
                    style="width: 100%"
                    v-bind:r_content="content">
            </editor>
          </keep-alive>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="newfollow = false">取 消</el-button>
          <el-button type="primary" @click="add_click">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除 -->
      <el-dialog
        title="提示"
        :visible.sync="dele_dialogVisible"
        width="30%">
        <span>是否删除该数据</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dele_dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dele_click">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Editor from '@/components/Editor'
import{getfollowcreate,getfollowlist,getfollowdelete} from '../../../api/index'
import { uParseTime } from "@/utils/tools"
// const content=``
export default{
  props:{
    Message:Object
  },
  data(){
    return{
      circleUrl:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      newfollow:false,
      content:'',
      list:[],
      dele_id:0,
      dele_dialogVisible:false,
    }
  },
  components:{
    Editor
  },
  created(){
    this.getlist()
  },
  methods:{
    // 新增弹窗
    open_add(){
      this.newfollow = true
    },
    // 确认
    add_click(){
      this.newfollow = false
      const data = {
        custom_id:this.Message.id,
        desc:this.$refs.editor.content
      }
      getfollowcreate(data).then(res =>{
        console.log('vvvvvvvv',res);
        this.getlist()
      })
      
    },
    // 列表数据
    getlist(){
      getfollowlist().then(res =>{
        console.log('list',res);
        const list = res.data.list
        const table =[]
        list.forEach((item,index) => {
          const arr = {
            id:item.id,
            desc:item.desc,
            time:item.ctime,
          }
          table.unshift(arr)
        });
        this.list = table
      })
    },
     // 转换时间
    getTime(val) {
      if(val < 0){
        return ""
      }
      if(val == ""){
        return ""
      }else {
        return uParseTime(val, '{y}-{m}-{d} {h}:{i}:{s}')
      }
    },
    // 删除弹窗
    opendele(row){
      this.dele_id = row.id
      this.dele_dialogVisible = true
    },
    dele_click(){
      getfollowdelete(this.dele_id).then(res =>{
        this.$message({message:res.data.msg,type:'success'})
        this.getlist()
        // console.log('delete');
      })
      this.dele_dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.context{
  padding: 20px;
  .top_border{
    display: flex;
    /* border: 1px solid gray;*/
  }
}

</style>