<style>
.activity {
  overflow: auto;
  height: 100%;
  position: relative;
  padding: 0 15px;
}
.activity .btn-list {
  height: 30px;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
}
.activity .btn-list .btn-list-item {
  padding: 5px 10px;
  font-size: 12px;
  color: #666666;
  background: rgba(13, 36, 129, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all linear 0.3s;
  margin-right: 10px;
}
.activity .btn-list .btn-list-item.active,
.activity .btn-list .btn-list-item:hover {
  color: #ffffff;
  background: #409efe;
}
.activity .btn-list .btn-list-item i {
  padding-right: 5px;
}
.activity .genjin {
  background-color: #ffffff;
  padding: 20px 30px;
}
.activity .genjin .MyEditForm-item {
  padding: 0;
  margin-bottom: 10px;
}
.activity .genjin .el-col-6 {
  padding-top: 10px;
  box-shadow: 0px 6px 14px 0px rgba(176, 176, 176, 0.2);
}
.activity .el-input__prefix {
  right: 5px;
  top: -17px;
  left: inherit;
}
.activity .el-date-editor.el-input {
  width: 100%;
}
.activity .genjin-ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.activity .genjin-ctrl .genjin-ctrl-left {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999999;
}
.activity .genjin-ctrl .genjin-ctrl-left .ctrl-btn {
  display: flex;
  margin-right: 30px;
  line-height: 17px;
  cursor: pointer;
}
.activity .genjin-ctrl .genjin-ctrl-left div:hover {
  color: #111111;
}
.activity .genjin-ctrl .genjin-ctrl-left div i {
  padding-right: 10px;
}
.activity .genjin-ctrl .fabu-btn {
  padding: 5px 10px;
  border: 1px solid #409efe;
  color: #409efe;
  font-size: 12px;
  cursor: pointer;
}
.activity .line-item .time {
  display: flex;
  margin-bottom: 15px;
}
.activity .line-item .time > span {
  display: flex;
  align-items: center;
  color: #666666;
  font-size: 12px;
  background: rgba(243, 246, 253, 1);
  padding: 5px 10px;
}
.activity .line-item .time .raduis {
  width: 6px;
  height: 6px;
  background: rgba(98, 98, 98, 1);
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}
.activity .img-box {
  display: flex;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
}
.activity .img-box .img-item {
  width: 98px;
  height: 98px;
  border: 1px solid #ccc;
  display: inline-block;
  margin: 0 4px 4px 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%;
  position: relative;
  overflow: hidden;
}
.activity .img-box .img-item:hover .img-item-del {
  opacity: 1;
}
.activity .img-box .img-item .img-item-del {
  width: 15px;
  height: 15px;
  line-height: 10px;
  text-align: center;
  background-color: rgba(98, 98, 98, 0.5);
  color: white;
  font-size: 12px;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  opacity: 0;
  transition: all linear 0.5s;
}
.activity .img-box .img-item-add > div {
  width: 98px;
  height: 98px;
  line-height: 98px;
  font-size: 60px;
  color: #ccc;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  border: 1px dashed #ddd;
  position: relative;
  font-weight: 100;
  transition: all linear 0.5s;
}
.activity .img-box .img-item-add > div::before,
.activity .img-box .img-item-add > div::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #2362fb;
  width: 2px;
  height: 39.5px;
}
.activity .img-box .img-item-add > div:hover {
  border-color: #111111;
}
.activity .img-box .img-item-add > div::after {
  width: 39.5px;
  height: 2px;
}
.activity .file-box {
  padding: 5px 10px;
  border: 1px dashed #dfdfdf;
}
.activity .file-box .tit {
  margin-bottom: 10px;
}
.activity .file-box .tit i {
  padding-right: 5px;
}
.activity .file-item {
  margin-bottom: 10px;
}
.activity .file-item .del {
  padding-left: 10px;
  font-size: 14px;
  line-height: 20px;
  color: #ccc;
}
.activity .file-item .del:hover {
  color: #2362fb !important;
}
.activity .line-item .content-item {
  margin-left: 30px;
  padding: 8px 8px 20px 30px;
  position: relative;
}
.activity .line-item .content-item:nth-child(1):before {
  top: 24px;
}
.activity .line-item .content-item::before {
  position: absolute;
  content: " ";
  width: 1px;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #e6e6e6;
}
.content-item .iconfont {
  padding: 5px;
  background-color: #409efe;
  color: white;
  position: absolute;
  left: -13px;
  top: 4px;
}
.content .content-fz .cfz-top {
  display: flex;
  align-items: top;
}
.content .content-fz .cfz-top > div {
  margin-right: 10px;
}
.content .content-fz .cfz-top .tag {
  margin-left: 30px;
}
.content .content-fz .cfz-top .tag span {
  padding: 7px 17px;
  color: #666666;
  background: rgba(243, 246, 253, 1);
  margin-top: 3px;
  display: inline-block;
}
.cfz-bot {
  padding-left: 37px;
}
.cfz-bot > div {
  margin-top: 10px;
  padding: 12px 20px;
  background: rgba(243, 246, 253, 1);
}
.cfz-bot .mb-10 {
  margin-bottom: 10px;
}
.img-box .img-box-item {
  width: 98px;
  height: 98px;
  display: inline-block;
  margin: 0 4px 4px 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%;
  position: relative;
  cursor: pointer;
}
.xg-lxr {
  margin-bottom: 10px;
}
</style>
<template>
    <div class="activity" id="activity">
      <div class="btn-list" v-show="false">
        <div class="btn-list-item" v-for="(item, index) in btnList" :key="index" :class="{'active': type === item.id}" @click="ChangeType(item)"><i class="iconfont icontianjia"></i>{{item.name}}</div>
      </div>
      <!-- 写跟进 -->
      <template>
        <div class="genjin" v-show="false">
          <el-form :model="FollowUpMsg" ref="form" class="MyEditForm" >
            <el-row :gutter="40" style="margin-bottom: 10px;">
              <el-col :span="6">
                <div class="MyEditForm-item">
                  <el-form-item label="选择联系人" class="label-pad-left">
                    <el-select
                      filterable
                      v-model="FollowUpMsg.ContactId" @change="changeContact" placeholder="请选择">
                      <el-option
                        v-for="item in ContactList"
                        :label='item.ContactName'
                        :value='item.ID'
                        :key='item.ID'>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="MyEditForm-item">
                  <el-form-item label="跟进方式" class="label-pad-left">
                    <el-select
                      filterable
                      v-model="FollowUpMsg.FollowUpType" placeholder="请选择">
                      <el-option
                        v-for="item in GetFollowUpTypeEnumList"
                        :label='item.Name'
                        :value='item.ID'
                        :key='item.ID'>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="MyEditForm-item MyEditForm-item-time">
                  <el-form-item label="下次联系时间" class="label-pad-left">
                    <el-date-picker
                      value-format="yyyy-MM-dd HH:mm:ss"
                      v-model="FollowUpMsg.NextContactDate"
                      :clearable="false"
                      type="datetime"
                      placeholder="选择日期时间">
                    </el-date-picker>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="MyEditForm-item">
                  <el-form-item>
                    <el-input :autosize="autosize" type="textarea" placeholder="请输入内容" v-model="FollowUpMsg.ContactContent"></el-input>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </el-form>
          <div v-if="gjImgList.length" style="margin-bottom: 15px;">
            <div class="img-box">
              <div v-for="(item, index) in gjImgList" :key="index" class="img-item" :style="{'background-image': `url(${item.url})`}" @click="previewFile(item.url)">
                <div class="img-item-del" @click="deleteImg(index)">×</div>
              </div>
              <el-upload
                class="img-item-add"
                :file-list="fileList" :limit="9" :http-request="uploadImg" :multiple="true"
                accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
                <div></div>
              </el-upload>
            </div>
            <p class="font-color-link font-size-12 cp" @click="deleteImg(-1)">全部删除</p>
          </div>
          <div v-if="fjList.length" style="margin-bottom: 15px;">
            <div class="file-box">
              <p class="font-size-12 tit"><i class="iconfont iconfujian"></i><span>附件</span></p>
              <div class="font-size-12">
                <p v-for="(item, index) in fjList" :key="index" class="file-item">{{item.name}} <span class="font-color-info">（{{item.size}}）</span> <span class="del cp" @click="deleteFile(index)">×</span></p>
              </div>
              <p class="font-color-link font-size-12 cp" @click="deleteFile(-1)">全部删除</p>
            </div>
          </div>
          <div class="genjin-ctrl">
            <div class="genjin-ctrl-left">
              <el-upload
                  class="upload-demo"
                  :file-list="fileList" :limit="9" :http-request="uploadImg" :multiple="true"
                  accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
                  <div class="ctrl-btn">
                    <i class="iconfont icontupian"></i>
                    <span>图片</span>
                  </div>
              </el-upload>
              <el-upload
                class="upload-demo"
                  :file-list="fileList" :limit="9" :http-request="uploadImg2" :multiple="true"
                  :show-file-list="false" action="">
                <div class="ctrl-btn">
                  <i class="iconfont iconfujian"></i>
                  <span>附件</span>
                </div>
              </el-upload>
              <!-- <div class="ctrl-btn">
                <i class="iconfont iconguanlianbg"></i>
                <span>关联商机</span>
              </div> -->
              <!-- <div>
                <i class="iconfont iconkehu"></i>
                <span>关联联系人</span>
              </div> -->
            </div>
            <div class="fabu-btn" @click="CreateContactFollowUp">发布</div>
          </div>
        </div>
        <div class="genjin" style="margin-top: 20px">
          <div class="line-item" v-for="(item, index) in logList" :key="index">
            <div class="time">
              <span>
                <span class="raduis"></span>
                <span>{{item.DateTimeStr}}</span>
              </span>
            </div>
            <div class="content font-size-12">
              <template v-for="(subItem, subIndex) in item.LogList">
                <div class="content-item font-color-info" :key="subIndex" v-if="!subItem.CustomerFollowUpModel">
                  <i class="iconfont iconcompany"></i>
                  <div class="content">
                    <p class="content-ea"><span>{{subItem.UpdateDate}}</span> <span> {{subItem.LogInfo}}</span></p>
                  </div>
                </div>
                <div class="content-item" v-else :key="subIndex" >
                  <i class="iconfont iconcompany"></i>
                  <div class="content-fz">
                    <div class="cfz-top">
                      <div>
                        <img src="../../assets/img/cust/kehu2.png" alt="">
                      </div>
                      <div>
                        <p>{{subItem.CustomerFollowUpModel.CreateByStr}}</p>
                        <p class="font-color-info">{{subItem.UpdateDate}}</p>
                      </div>
                      <div class="tag">
                        <span>{{subItem.CustomerFollowUpModel.FollowUpTypeStr}}</span>
                      </div>
                    </div>
                    <div class="cfz-bot">
                      <div>
                        <p class="mb-10">{{subItem.LogInfo}}</p>
                        <p class="xg-lxr"><span class="font-color-info">相关联系人：</span> <span>{{subItem.CustomerFollowUpModel.ContactName}}</span></p>
                        <div class="img-box mb-10" v-if="subItem.CustomerFollowUpModel.FollowUpImgList">
                          <div v-for="(img, imgIndex) in subItem.CustomerFollowUpModel.FollowUpImgList" :key="imgIndex" class="img-box-item" :style="`background-image:url(${img.FileUrl})`" @click="previewFile(img.FileUrl)"></div>
                        </div>
                        <div class="mb-10" v-if="subItem.CustomerFollowUpModel.FollowUpFileList"  style="display: flex;">
                          <div class="font-color-info">附件：</div>
                          <div>
                            <p v-for="(file, fileIndex) in subItem.CustomerFollowUpModel.FollowUpFileList" :key="fileIndex">
                              <span >&nbsp;&nbsp;{{file.FileName}} </span>&nbsp;&nbsp;&nbsp;&nbsp;
                              <span class="font-color-link cp" @click="previewFile(file.FileUrl)"> 预览</span>
                            </p>
                          </div>
                        </div>
                        <p> <span class="font-color-info">下次联系时间：</span> <span>{{subItem.CustomerFollowUpModel.NextContactDate}}</span></p>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <p v-if="logList.length < 1" class="nodata font-color-info">暂无数据</p>
        </div>
      </template>
      <div v-if="addContactsShow">
        <addContacts :ID="CustomerId" @addContactsOk="addContactsOk"/>
      </div>
      
    </div>
</template>
<script>
import addContacts from "../dialogModel/addContacts";
export default {
  components: {
    addContacts,
  },
  props: {
    CustomerId: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      activities: [
        {
          content: "支持使用图标",
          timestamp: "2018-04-12 20:46",
          size: "large",
          type: "primary",
          icon: "el-icon-more",
        },
        {
          content: "支持自定义颜色",
          timestamp: "2018-04-03 20:46",
          color: "#0bbd87",
        },
        {
          content: "支持自定义尺寸",
          timestamp: "2018-04-03 20:46",
          size: "large",
        },
        {
          content: "默认样式的节点",
          timestamp: "2018-04-03 20:46",
        },
      ],
      addContactsShow: false,
      fileList: [],
      autosize: {
        minRows: 4,
      },
      ContactList: [],
      type: 1,
      FollowUpMsg: {
        ID: 0,
        CustomerId: "",
        ContactId: "",
        ContactName: "",
        BusinessId: 0,
        BusinessName: "",
        FollowUpType: "",
        FollowUpImgList: [],
        FollowUpFileList: [],
        NextContactDate: "",
        ContactContent: "",
      },
      GetFollowUpTypeEnumList: [],
      btnList: [
        {
          id: 1,
          name: "写跟进",
        },
        // {
        //   id: 2,
        //   name: '创建任务',
        // },
        {
          id: 3,
          name: "创建联系人",
        },
        {
          id: 4,
          name: "创建商机",
        },
        {
          id: 5,
          name: "创建合同",
        },
        {
          id: 6,
          name: "创建回款",
        },
      ],
      gjImgList: [],
      fjList: [],
      logList: [],
      logMsg: {
        Type: 1,
        pageIndex: 1,
        pageSize: 3,
        CustomerId: 0,
      },
    };
  },
  watch: {
    CustomerId: {
      handler(val, oldVal) {
        this.GetContactByCustomerID();
        this.GetLogPageList();
      },
      deep: true,
    },
  },
  mounted() {
    let $this = this;
    this.MsgBus.$on("closeaddContacts", function() {
      $this.addContactsShow = false;
    });
    document.getElementById("activity").addEventListener("scroll", function() {
      //全部动态
      if (this.scrollHeight - this.scrollTop === this.clientHeight) {
        $this.logMsg.pageIndex = $this.logMsg.pageIndex + 1;
        $this.GetLogPageList(1);
      }
    });
    this.GetContactByCustomerID();
    this.GetFollowUpTypeEnum();
    this.GetLogPageList();
  },
  methods: {
    addBusiness() {
      let $this = this;
      this.MsgBus.$emit("addBusinessBoxOpen", $this.CustomerId, 0);
    },
    previewFile(file) {
      if (file.IsPicture()) {
        this.MsgBus.$emit("showImg", file);
        return;
      }
      window.open(file, "_blank");
    },
    GetLogPageList(t) {
      this.logMsg.CustomerId = this.CustomerId;
      this.apipost(
        "/api/Customer/GetLogPageByCustomerId",
        this.logMsg,
        (res) => {
          if (res.data.resultCode == 1) {
            let data = res.data.data;
            if (t) {
              this.logList = this.logList.concat(data.pageData);
            } else {
              this.logList = data.pageData;
            }
          }
        }
      );
    },
    GetFollowUpTypeEnum() {
      this.apipost("/api/Customer/GetFollowUpTypeEnum", {}, (res) => {
        if (res.data.resultCode == 1) {
          let data = res.data.data;
          this.GetFollowUpTypeEnumList = data;
        }
      });
    },
    CreateContactFollowUp() {
      this.FollowUpMsg.CustomerId = this.CustomerId;
      if (this.gjImgList.length) {
        this.gjImgList.map((x) => {
          this.FollowUpMsg.FollowUpImgList.push({
            FileName: x.name,
            FileUrl: x.url,
          });
        });
      }
      if (this.fjList.length) {
        this.fjList.map((x) => {
          this.FollowUpMsg.FollowUpFileList.push({
            FileName: x.name,
            FileUrl: x.url,
          });
        });
      }
      this.apipost(
        "/api/Customer/CreateContactFollowUp",
        this.FollowUpMsg,
        (res) => {
          if (res.data.resultCode == 1) {
            this.$message.success(res.data.message);
            this.fjList = [];
            this.gjImgList = [];
            this.FollowUpMsg = {
              ID: 0,
              CustomerId: "",
              ContactId: "",
              ContactName: "",
              BusinessId: 0,
              BusinessName: "",
              FollowUpType: "",
              FollowUpImgList: [],
              FollowUpFileList: [],
              NextContactDate: "",
              ContactContent: "",
            };
            this.logMsg.pageIndex = 1;
            this.GetLogPageList();
          }
        }
      );
    },
    changeContact(id) {
      this.ContactList.map((x) => {
        if (x.ID === id) {
          this.FollowUpMsg.ContactId = x.ID;
          this.FollowUpMsg.ContactName = x.ContactName;
        }
      });
    },
    addContactsOk() {
      this.GetContactByCustomerID();
    },
    //删除附件
    deleteFile(index) {
      let str = index === -1 ? "是否全部删除？" : "是否删除";
      this.$confirm(str, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (index === -1) {
            this.fjList = [];
          } else {
            this.fjList.splice(index, 1);
          }
          this.$message.success("操作成功");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //上传附件
    uploadImg2(file) {
      let newArr = [];
      newArr.push(file.file);
      let path = "/Upload/Temporary/";
      this.UploadSelfFileT(path, newArr, (x) => {
        let url = this.domainManager().ViittoFileUrl + x.data.FilePath;
        this.fjList.push({
          name: file.file.name,
          url: url,
          size: (file.file.size / 1024).toFixed(2) + "kb",
        });
      });
    },
    //删除图片
    deleteImg(index) {
      let str = index === -1 ? "是否全部删除？" : "是否删除";
      this.$confirm(str, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (index === -1) {
            this.gjImgList = [];
          } else {
            this.gjImgList.splice(index, 1);
          }
          this.$message.success("操作成功");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //上传图片
    uploadImg(file) {
      let newArr = [];
      newArr.push(file.file);
      let path = "/Upload/Temporary/";
      this.UploadSelfFileT(path, newArr, (x) => {
        let url = this.domainManager().ViittoFileUrl + x.data.FilePath;
        this.gjImgList.push({
          name: file.file.name,
          url: url,
          size: (file.file.size / 1024).toFixed(2) + "kb",
        });
      });
    },
    GetContactByCustomerID() {
      if (this.CustomerId === 0) return;
      this.apipost(
        "/api/Customer/GetContactByCustomerID",
        { CustomerId: this.CustomerId },
        (res) => {
          if (res.data.resultCode == 1) {
            let data = res.data.data;
            this.ContactList = data;
          }
        }
      );
    },
    ChangeType(param) {
      if (param.id === 3) {
        this.addContactsShow = true;
      } else if (param.id < 3) {
        this.type = param.id;
      } else if (param.id === 4) {
        this.addBusiness();
      }
    },
  },
};
</script>
