<template>
  <div>
    <el-card class="box-card noborder">
      <div class="cardtitles">{{indexname}}</div>
      <!--<div style="height: 24px" v-if="showtype == 'projectgjdt'"></div>-->
      <div class="records">
        <div class="writeIn" v-if="isDisableds == false">
          <div class="default" v-if="isEdit == false" @click="getEdit">
            <img src="@/assets/images/project/add_3.png">
            <div>新建一条跟进记录，如:周五上午预约客户上门拜访</div>
          </div>
          <div class="writting" v-if="isEdit == true" :class="{'w836':showtype!='gjjl'}">
            <div class="wri_top">
              <img src="@/assets/images/project/add_3.png">
              <el-input type="textarea" autosize resize="none" v-model="addParam.content" placeholder="新建一条跟进记录，如:周五上午预约客户上门拜访"></el-input>
            </div>
            <div class="wr_bot">
              <div class="sels">
                <img src="@/assets/images/project/ico_1.png">
                <el-select class="w128" placeholder="拜访方式" v-model="addParam.visitMode">
                  <el-option v-for="(item,index) in bffslist" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
                </el-select>
              </div>
              <div class="sels" v-if="!customerIds && showtype == 'gjdt'">
                <img src="@/assets/images/project/ico_1.png">
                <el-select v-model="addParam.customerId" class="w128" placeholder="关联企业">
                  <el-option v-for="(item,index) in glqylist" :key="index" :label="item.companyName" :value="item.customerId"></el-option>
                </el-select>
              </div>
              <div class="sels" v-if="showtype == 'projectgjdt'">
                <img src="@/assets/images/project/ico_1.png">
                <el-select v-model="projectId" class="w128" placeholder="关联项目">
                  <el-option v-for="(item,index) in projectList" :key="index" :label="item.projectName" :value="item.id"></el-option>
                </el-select>
              </div>
              <div class="sels">
                <img src="@/assets/images/project/ico_2.png">
                <el-input v-model="addParam.name" placeholder="拜访对象" style="width: 100px;">
                </el-input>
              </div>
              <div class="sels">
                <img src="@/assets/images/project/ico_3.png">
                <el-input v-model="addParam.position" placeholder="客户职位" style="width: 100px;">
                </el-input>
              </div>
              <div class="sels times" style="width: 132px"><img src="@/assets/images/project/ico_4.png">
                <el-date-picker class="w120"  value-format="yyyy-MM-dd"
                    v-model="addParam.visitTime"
                    type="date"
                    placeholder="拜访时间">
                  </el-date-picker>
              </div>
              <div class="times"><img src="@/assets/images/project/ico_4.png">
                <el-date-picker class="w128"  value-format="yyyy-MM-dd"
                    v-model="addParam.nextVisitTime"
                    type="date"
                    placeholder="下次拜访时间">
                  </el-date-picker>
              </div>
              <div class="btn btn_primary h32 wc" @click="addFollow" :class="{'btn_disabled':addParam.content == ''}">完成</div>
            </div>
          </div>
        </div>
        <skeleton v-if="isSkeleton" style="padding-top: 16px"></skeleton>
        <div v-else>
          <div class="recordlist" v-if="showtype=='gjdt'">
            <div class="rec_detail" v-for="(item,index) in recordlist.rows">
              <div class="delform" v-if="isdel && delID == item.id">
                <div class="words">是否删除该条记录</div>
                <div>
                  <div class="btnsmall btn_primary h28" @click="delele">确定</div>
                  <div class="btnsmall btn_cancel h28" @click="isdel=false">取消</div>
                </div>
              </div>

              <div class="rec_time">
                <i class="el-icon-time"></i>
                <div>{{item.createTime && item.createTime.slice(0, 16)}}</div>
                <div class="operate">
                  <!--<img src="@/assets/images/edit.png">第一期不做编辑-->
                  <img @click="delRecord(item.id)" src="@/assets/images/delete.png">
                </div>
              </div>
              <div class="rec_con">
                <div><strong>{{item.nickName}}</strong> <span v-if="item.visitMode">({{item.visitMode}})</span></div>
                <div><span>{{item.content}}</span></div>
                <div class="rec_text">
                  <span v-if="item.name">拜访对象：{{item.name||'--'}}</span>
                  <span v-if="showtype == 'gjdt' && item.companyName != ''">关联企业：{{item.companyName}}</span>
                  <span v-if="item.position">职位：{{item.position}}</span>
                  <span v-if="item.visitTime">拜访时间：{{item.visitTime.slice(0, 10)}}</span>
                  <span v-if="item.nextVisitTime">下次拜访时间：{{item.nextVisitTime.slice(0, 10)}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="recordlist" v-if="showtype=='gjjl' || showtype == 'projectgjdt' && recordlist.total>0">
            <div class="rec_detail" v-for="(item,index) in recordlist.rows">
              <div class="delform" v-if="isdel && delID == item.id">
                <div class="words">是否删除该条记录</div>
                <div>
                  <div class="btnsmall btn_primary h28" @click="delele">确定</div>
                  <div class="btnsmall btn_cancel h28" @click="isdel=false">取消</div>
                </div>
              </div>

              <div class="rec_time">
                <i class="el-icon-time"></i>
                <div>{{item.creatTime}}</div>
                <div class="operate" v-if="isDisableds == false">
                  <!--<img src="@/assets/images/edit.png">第一期不做编辑-->
                  <img @click="delRecord(item.id)" src="@/assets/images/delete.png">
                </div>
              </div>
              <div class="rec_con">
                <div><strong>{{item.nickName}}</strong> <span v-if="item.visitWay">({{item.visitWay}})</span></div>
                <div><span>{{item.recordInfo}}</span></div>
                <div class="rec_text">
                  <span v-if="item.projectName && showtype == 'projectgjdt'">关联项目：{{item.projectName||'--'}}</span>
                  <span v-if="item.visitPerson">拜访对象：{{item.visitPerson||'--'}}</span>
                  <span v-if="item.position">职位：{{item.position||'--'}}</span>
                  <span v-if="item.visitTime">拜访时间：{{item.visitTime}}</span>
                  <span v-if="item.nextVisitTime">下次拜访时间：{{item.nextVisitTime || '--'}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="tables" v-if="recordlist.total>pageSize">
          <div class="bottems">
            <el-pagination
              background
              :page-size="pageSize"
              :current-page="pageNum"
              @current-change="handleCurrentChange"
              layout="prev, pager, next"
              :total="recordlist.total">
            </el-pagination>
          </div>
        </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import "@/assets/styles/project.scss"
  import {getFollowList,addFollowRecord,getUserList,delFollowRecord} from '@/api/custom/custom'
  import {getGJJL,addGJJL,delGJJL,relateProject,allRecord} from '@/api/project/project'
  import {getEnterprise,getDictType,} from '@/api/main'
  import skeleton from './skeleton'
  export default {
    components:{skeleton},
    props:{
      types: { //当前组件展示类型
        type: String,
        default: ""
      },
      customerIds: { //客户id
        type: String,
        default: ""
      },
      detailId: { //从企业详情跳转过来ID
        type: Number,
        default: 0
      },
      datas:[],//数据源
      isDisabled:true,
    },
    name: 'gjjl',
    data(){
      return{
        indexname:'跟进记录',
        showtype:'',
        isEdit:false,
        value:'',
        pageNum:1,//页码
        pageSize:20,
        bffslist:[],//拜访方式
        glqylist:[],//关联企业
        addParam:{
          customerId:'', //客户id
          visitMode:'',//拜访方式
          visitTime:'',//拜访时间
          nextVisitTime:'',//下次拜访时间
          name:'',//拜访对象姓名
          position:'',//拜访对象职务
          content:'',//拜访内容
        },

        recordlist:[],//列表数据源
        isdel:false,
        delID:'',//删除记录的ID
        projectId:this.detailId ? this.detailId : parseInt(this.$route.query.id),//项目详情id
        userId:this.$store.state.user.userId,//当前用户id
        projectList:[],//关联项目
        isDisableds:this.isDisabled,
        keys:1,
        isSkeleton:true,
      }
    },
    computed: {
    },
    created(){
      //获取拜访方式
      getDictType('visit_mode_type').then(result=>{
        this.bffslist = result.code == 200 ? result.data:[]
      })
      this.showtype = this.types
      //客户管理跟进动态
      if(this.showtype == 'gjdt'){
        this.indexname = '跟进动态'
        this.isDisableds = false
        getUserList().then(result=>{
          this.glqylist = result.data
        })
        this.getGJDTlist()
      }
      //项目详情跟进记录
      if(this.showtype == 'gjjl'){
        this.getGJJL()
      }
      //项目管理跟进动态
      if(this.showtype == 'projectgjdt'){
        this.indexname = '跟进动态'
        this.isDisableds = false
        this.projectId = null//项目id暂时清空，必须手选id
        relateProject(this.userId).then(res=>{
          this.isSkeleton = false
          this.projectList = res.data
        })
        this.getGJDT()
      }
      console.log(this.types)
    },
    methods:{
      //添加跟进动态
      addFollow(){
        if(this.addParam.content == '')
          return false
        if(this.types == 'projectgjdt'){
          if(this.projectId == "" || this.projectId == null){
            this.$message.error('请选择关联项目！')
            return false
          }
        }
        if(this.types == 'gjdt'){
          if(this.customerIds){
            this.addParam.customerId = this.customerIds
          }
          addFollowRecord(this.addParam).then(result=>{
            if(result.code == 200){
              this.$message.success(result.msg)
              this.handleCurrentChange(1)
              this.isEdit = false
              this.resetForm()
            }else{
              this.$message.error(result.msg)
            }
          })
        }
        if(this.types == 'gjjl' || this.types == 'projectgjdt'){
          let param = {
            businessId:this.projectId,
            userId:this.$store.state.user.userId,
            visitPerson:this.addParam.name,
            position:this.addParam.position,
            visitTime: this.addParam.visitTime,
            nextVisitTime: this.addParam.nextVisitTime,
            recordInfo:this.addParam.content,
            visitWay:this.addParam.visitMode,
          }
          addGJJL(param).then(result=>{
            if(result.code == 200){
              this.$message.success(result.msg)
              this.handleCurrentChange(1)
              this.isEdit = false
              this.resetForm()
            }else{
              this.$message.error(result.msg)
            }
          })
        }
      },
      resetForm(){
        this.projectId = null
        this.addParam={
          customerId:'', //客户id
          visitMode:'',//拜访方式
          nextVisitTime:'',//下次拜访时间
          name:'',//拜访对象姓名
          position:'',//拜访对象职务
          content:'',//拜访内容
        }
      },
      //删除跟进动态
      delRecord(id){
        this.isdel = true
        this.delID = id
        this.keys++;
      },
      delele(){
        if(this.types == 'gjdt') {
          delFollowRecord(this.delID).then(result => {
            if (result.code == 200) {
              this.handleCurrentChange(1)
              this.$message.success('删除成功')
              this.isdel = false
            }
          })
        }
        if(this.types == 'gjjl' || this.types == 'projectgjdt') {
          delGJJL(this.delID).then(result => {
            if (result.code == 200) {
              this.handleCurrentChange(1)
              this.$message.success('删除成功')
              this.isdel = false
            }
          })
        }
      },
      //跟进动态列表
      //客户管理跟进动态
      getGJDTlist(){
        let param = {
          pageNum:this.pageNum,//页码
          pageSize:this.pageSize,
        }
        if(this.customerIds){
          param.customerId = this.customerIds
        }
        getFollowList(param).then(result=>{
          this.isSkeleton = false
          this.recordlist = result.code == 200?result:[]
          this.recordlist.rows.forEach(item=>{
            item.createTime = this.gettime(item.createTime)
            item.visitTime = this.gettime(item.visitTime)
            item.nextVisitTime = this.gettime(item.nextVisitTime)
          })
        })
      },
      //项目管理跟进动态
      getGJDT(){
        let param = {
          pageNum:this.pageNum,//页码
          pageSize:this.pageSize,
          userId: this.userId
        }
        allRecord(param).then(result=>{
          this.isSkeleton = false
          this.recordlist = result.code == 200?result:[]
          // this.recordlist.rows.forEach(item=>{
          //   item.createTime = this.gettime(item.createTime)
          //   item.nextVisitTime = this.gettime(item.nextVisitTime)
          // })
        })
      },
      //项目管理项目详情跟进记录
      getGJJL(){
        let param = {
          pageNum:this.pageNum,//页码
          pageSize:this.pageSize,
          businessId:this.projectId
        }
        getGJJL(param).then(result=>{
          this.isSkeleton = false
          this.recordlist = result.code == 200?result:[]
        })
      },
      handleCurrentChange(val){
        this.isSkeleton = true
        this.pageNum = val
        if(this.showtype == 'gjdt'){
          this.getGJDTlist()
        }
        if(this.showtype == 'gjjl'){
          this.getGJJL()
        }
        if(this.showtype == 'projectgjdt'){
          this.getGJDT()
        }
      },
      getEdit(){
        this.isEdit = true;
        this.value = ""
        this.addParam={
            customerId:'', //客户id
            visitMode:'',//拜访方式
            visitTime:'',//拜访时间
            nextVisitTime:'',//下次拜访时间
            name:'',//拜访对象姓名
            position:'',//拜访对象职务
            content:'',//拜访内容
        }
      },
      gettime(time){
        if(time == null || time == "")
          return null
        let times = new Date(time)
        let year = times.getFullYear()
        let month = times.getMonth()+1
        month = month<10?"0"+month:month
        let day = times.getDate()
        day = day<10?"0"+day:day
        let hour = times.getHours()
        hour = hour<10?"0"+hour:hour
        let minute = times.getMinutes()
        minute = minute<10?"0"+minute:minute
        let second = times.getSeconds()
        second = second<10?"0"+second:second
        return year+'-'+month+'-'+day+' '+hour+":"+minute+":"+second
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app-main{
    overflow: initial !important;
  }
  .el-card{
    overflow: initial;
  }
  .rec_detail{
    position: relative;
  }
.wc{
  position: absolute;
  right: 0;
  bottom: 0;
}
.delform{
  right: 0;
  top: -122px;
  position: absolute;
}
.tables{
  margin-top: -26px;
  padding-right: 0;
}
</style>
