<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;
  }
</style>
<template>
  <div class="activity" id="activity">
    <div class="btn-list">
      <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-if="type === 1">
        <el-form :model="FollowUpMsg" ref="form" class="MyEditForm">
          <el-row :gutter="40" style="margin-bottom: 10px;">
            <el-col :span="6" v-show="false">
              <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" v-show="false">
                <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>
                      <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>
      </div>
    </template>
    <div v-if="addContactsShow">
      <addContacts :ID="BusinessIdCustomerId" @addContactsOk="addContactsOk" />
    </div>
  </div>
</template>
<script>
  import addContacts from "../dialogModel/addContacts";
  export default {
    components: {
      addContacts,
    },
    props: {
      BusinessId: {
        type: Number,
        default: 0,
      },
      BusinessIdCustomerId: {
        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: [],
        GetFollowUpTypeEnumList: [],
        type: 1,
        FollowUpMsg: {
          ID: 0,
          BusinessId: "",
          CustomerId: "",
          BusinessName: "",
          FollowUpType: "",
          FollowUpImgList: [],
          FollowUpFileList: [],
          NextContactDate: "",
          ContactContent: "",
        },
        btnList: [{
            id: 1,
            name: "写跟进",
          },
          // {
          //   id: 2,
          //   name: '创建任务',
          // },
          {
            id: 3,
            name: "创建联系人",
          },
          // {
          //   id: 5,
          //   name: '创建合同',
          // },{
          //   id: 6,
          //   name: '创建回款',
          // },
        ],
        gjImgList: [],
        fjList: [],
        logList: [],
        logMsg: {
          Type: 3,
          pageIndex: 1,
          pageSize: 3,
          CustomerId: this.BusinessIdCustomerId,
        },
      };
    },
    watch: {
      BusinessId: {
        handler(val, oldVal) {
          this.GetLogPageList();
        },
        deep: true,
      },
    },
    mounted() {
      let $this = this;
      document.getElementById("activity").addEventListener("scroll", function () {
        //全部动态
        if (this.scrollHeight - this.scrollTop === this.clientHeight) {
          $this.logMsg.pageIndex = $this.logMsg.pageIndex + 1;
          $this.GetLogPageList(1);
        }
      });
      this.MsgBus.$on("closeaddContacts", function () {
        $this.addContactsShow = false;
      });
      // this.GetContactByBusinessID()
      this.GetFollowUpTypeEnum();
      this.GetLogPageList();
    },
    methods: {
      previewFile(file) {
        if (file.IsPicture()) {
          this.MsgBus.$emit("showImg", file);
          return;
        }
        window.open(file, "_blank");
      },
      GetLogPageList(t) {
        this.logMsg.CustomerId = this.BusinessIdCustomerId;
        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.BusinessIdCustomerId;
        this.FollowUpMsg.BusinessId = this.BusinessId;
        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/CreateNewBusinessFollowUp",
          this.FollowUpMsg,
          (res) => {
            if (res.data.resultCode == 1) {
              this.$message.success(res.data.message);
              this.fjList = [];
              this.gjImgList = [];
              this.FollowUpMsg = {
                ID: 0,
                BusinessId: 0,
                BusinessName: "",
                FollowUpType: "",
                FollowUpImgList: [],
                FollowUpFileList: [],
                NextContactDate: "",
                ContactContent: "",
              };
              this.GetLogPageList();
            }
          }
        );
      },
      changeContact(id) {
        this.ContactList.map((x) => {
          if (x.ID === id) {
            this.FollowUpMsg.ContactId = x.ID;
            this.FollowUpMsg.ContactName = x.ContactName;
          }
        });
      },
      addContactsOk() {
        this.GetContactByBusinessID();
      },
      //删除附件
      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",
          });
        });
      },
      GetContactByBusinessID() {
        this.apipost(
          "/api/Customer/GetContactByBusinessID", {
            BusinessID: this.BusinessId
          },
          (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;
        }
      },
    },
  };
</script>