<template>
  <div class="normal-card">
    <p class="title">跟进记录<i class="el-icon-sort" @click="sortFun"></i></p>
    <div class="select">
      <span class="demonstration">日期范围:</span>
      <time-select @clearSelect="clearSelect" @timeChange="timeChange"></time-select>
    </div>
    <div class="detail" v-if="follow">
      <div class="item" v-for="(item,index) in follow" :key="index">
        <p>{{index + 1}}.{{item.createdate}},由经销商端<span style="font-weight:bold;margin:0 6px;font-size:13px">{{item.createby}}</span>开始跟进,跟进方式:<span style="font-weight:bold;margin:0 5px">{{item.followupmode}}</span>,{{handleTxt[item.logtype]}}</p>
        <div class="content">
          <p v-if="item.competitor">已购买品牌:{{item.competitor}}</p>
          {{item.content}}
        </div>
      </div>
    </div>
    <div style="margin-top: 16px; text-align: right">
      <!-- <el-pagination
        background
        small
        @current-change="handleCurrentChange"
        :current-page="param.content.pageNumber"
        :page-size="param.content.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination> -->
    </div>
  </div>
</template>

<script>
import { log } from '@antv/g2plot/lib/utils';
import TimeSelect from '@/SManagement/submitedit_one/components/TimeSelect'
export default {
  name: 'followDetail',
  data() {
    return {
      param: {
        "classname": "saletool.orderclue.web.orderclue",
        "method": "getFollowList",
        "content": {
            "sat_orderclueid": this.$route.query.id,
            "isdesc": 1,
            "where": {
                "start": "",
                "end": ""
            }
        }
      },
      handleTxt:{
        '跟进中':'跟进内容',
        '成交':'成交操作，添加备注',
        '丢单':'丢单操作，具体原因如下',
        '无效':'无效操作，具体原因如下',
      },
      follow:[],
      timeArr:[],
      total:0
    };
  },
  components:{ TimeSelect },
  computed:{
  },
  watch:{
  },
  created() {
    this.getFollowDetail()
  },
  methods: {
    async getFollowDetail() {
      let res = await this.$api.requested(this.param)
      this.follow = res.data
      this.total = res.total
    },
    handleCurrentChange(n) {
      this.param.content.pageNumber = n
      this.getFollowDetail()
    },
    clearSelect() {
      this.param.content.where.start = ''      
      this.param.content.where.end = ''
    },
    timeChange(result) {
      this.param.content.where.start = result[0]      
      this.param.content.where.end = result[1]    
      this.getFollowDetail()  
    },
    sortFun() {
      this.param.content.isdesc = this.param.content.isdesc == 1 ? this.param.content.isdesc = 0 : this.param.content.isdesc = 1
      this.getFollowDetail()
    }
  },
};
</script>

<style scoped>
*{
  box-sizing: border-box;
}
  .normal-card .title {
    font-size: 16px;
    color: #000000;
    font-weight: bold;
  }
  .normal-card .select {
    margin: 25px 10px 15px 0;
    display: flex;
    align-items: center;
  }
  .normal-card .select .demonstration {
    font-size: 14px;
    margin-right: 10px;
  }
  .normal-card .detail {
    font-size: 14px;
  }
  .normal-card .detail .content {
    margin: 10px 0 16px 0;
    background: #F2F2F2;
    padding: 16px;
    border-radius: 5px;
    font-size: 14px;
  }
</style>
