<template>
  <div>
    <el-card class="box-card noborder">
      <div class="cardtitles">跟进记录</div>
      <div class="records">
        <div class="writeIn">
          <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">
            <div class="wri_top">
              <img src="@/assets/images/project/add_3.png">
              <el-input v-model="addParam.content" placeholder="新建一条跟进记录，如:周五上午预约客户上门拜访"></el-input>
            </div>
            <div class="wr_bot">
              <el-select v-model="addParam.visitMode" class="w128" placeholder="拜访方式">
                <i slot="prefix" class="el-input__icon"><img src="@/assets/images/project/ico_1.png"></i>
                  <el-option v-for="(item,index) in bffslist" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
              </el-select>
              <el-select v-if="showtype == 'gjdt'" v-model="addParam.customerId" class="w128" placeholder="关联企业">
                <i slot="prefix" class="el-input__icon"><img src="@/assets/images/project/ico_1.png"></i>
                  <el-option v-for="(item,index) in glqylist" :key="index" :label="item.companyName" :value="item.customerId"></el-option>
              </el-select>
              <el-input v-model="addParam.name" placeholder="拜访对象" style="width: 100px;">
                <i slot="prefix" class="el-input__icon"><img src="@/assets/images/project/ico_2.png"></i>
              </el-input>
              <el-input v-model="addParam.position" placeholder="客户职位" style="width: 100px;">
                <i slot="prefix" class="el-input__icon"><img src="@/assets/images/project/ico_3.png"></i>
              </el-input>
              <div class="times"><img src="@/assets/images/project/ico_4.png">
                <el-date-picker class="w128"
                    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>
        <div class="recordlist" v-if="showtype=='gjdt'">
          <div class="rec_detail" v-for="(item,index) in recordlist.rows">

            <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' && companyName != ''">关联企业：{{item.companyName}}</span>
                <span v-if="item.position">职位：{{item.position}}</span>
                <span v-if="item.createTime">拜访时间：{{item.createTime.slice(0, 10)}}</span>
                <span v-if="item.nextVisitTime">下次拜访时间：{{item.createTime.slice(0, 10)}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="recordlist" v-if="showtype=='gjjl' && recordlist.total>0">
          <div class="rec_detail" v-for="(item,index) in recordlist.rows">

            <div class="rec_time">
              <i class="el-icon-time"></i>
              <div>{{item.creatTime}}</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.visitWay">({{item.visitWay}})</span></div>
              <div><span>{{item.recordInfo}}</span></div>
              <div class="rec_text">
                <span v-if="item.visitPerson">拜访对象：{{item.visitPerson||'--'}}</span>
                <span v-if="item.position">职位：{{item.position||'--'}}</span>
                <span v-if="item.creatTime">拜访时间：{{item.creatTime}}</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 class="delform" v-if="isdel">
        <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>
    </el-card>
  </div>
</template>

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

        recordlist:[],//列表数据源
        isdel:false,
        delID:'',//删除记录的ID
        projectId:parseInt(this.$route.query.id),//项目详情id
      }
    },
    computed: {
    },
    created(){
      //获取拜访方式
      getDictType('visit_mode_type').then(result=>{
        this.bffslist = result.code == 200 ? result.data:[]
      })
      this.showtype = this.types
      //客户管理跟进动态
      if(this.showtype == 'gjdt'){
        getUserList().then(result=>{
          this.glqylist = result.data
        })
        this.getGJDTlist()
      }
      //项目详情跟进记录
      if(this.showtype == 'gjjl'){
        this.getGJJL()
      }
      console.log(this.types)
    },
    methods:{
      //添加跟进动态
      addFollow(){
        if(this.types == 'gjdt'){
          addFollowRecord(this.addParam).then(result=>{
            if(result.code == 200){
              this.$message.success(result.msg)
              this.handleCurrentChange(1)
              this.isEdit = false
            }else{
              this.$message.error(result.msg)
            }
          })
        }
        if(this.types == 'gjjl'){
          let param = {
            businessId:this.projectId,
            userId:this.$store.state.user.userId,
            visitPerson:this.addParam.name,
            position:this.addParam.position,
            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
            }else{
              this.$message.error(result.msg)
            }
          })
        }
      },
      //删除跟进动态
      delRecord(id){
        this.isdel = true
        this.delID = id
      },
      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') {
          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,
        }
        getFollowList(param).then(result=>{
          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.recordlist = result.code == 200?result:[]
        })
      },
      handleCurrentChange(val){
        this.pageNum = val
        if(this.showtype == 'gjdt'){
          this.getGJDTlist()
        }
        if(this.showtype == 'gjjl'){
          this.getGJJL()
        }
      },
      getEdit(){
        this.isEdit = true;
        this.value = ""
        this.addParam={
          customerId:'', //客户id
            visitMode:'',//拜访方式
            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()
        let minute = times.getMinutes()
        let second = times.getSeconds()
        return year+'-'+month+'-'+day+' '+hour+":"+minute+":"+second
      }
    }
  }
</script>

<style lang="scss" scoped>
.wc{
  position: absolute;
  right: 0;
  bottom: 0;
}
.delform{
  position: fixed; left:50%; top:50%; transform:translate(-50%,-50%)
}
.tables{
  margin-top: -26px;
  padding-right: 0;
}
</style>
