<template>
  <div>
    <div class="container normal-panel normal-margin">
      <el-descriptions :column="5" title="线索详情">
        <el-descriptions-item label="客户名称">{{mainData.name}}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{mainData.phonenumber}}</el-descriptions-item>
        <el-descriptions-item label="省市县">{{mainData.province}}-{{mainData.city}}-{{mainData.county}}</el-descriptions-item>
        <el-descriptions-item label="地址">{{mainData.address}}</el-descriptions-item>
        <el-descriptions-item label="来源">{{mainData.cluesource}}</el-descriptions-item>
        <el-descriptions-item label="负责人">{{mainData.leadername}}</el-descriptions-item>
        <el-descriptions-item label="备注">{{mainData.notes}}</el-descriptions-item>
        <el-descriptions-item label="所属经销商">{{mainData.agentname}}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <span v-if="mainData.status === '待分配'" style="color:#3874F6">{{mainData.status}}</span>
          <span v-if="mainData.status === '待跟进'" style="color:#FA8C16">{{mainData.status}}</span>
          <span v-if="mainData.status === '跟进中'" style="color:#52C41A">{{mainData.status}}</span>
          <span v-if="mainData.status === '已过期'" style="color:#999999">{{mainData.status}}</span>
          <span v-if="mainData.status === '丢单'" style="color:#FF3B30">{{mainData.status}}</span>
          <span v-if="mainData.status === '已成交'" style="color:#333333">{{mainData.status}}</span>
          <span v-if="mainData.status === '无效'" style="color:#333333">{{mainData.status}}</span>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="container normal-panel normal-margin">
      <el-descriptions :column="5" title="系统信息">
        <el-descriptions-item label="创建人">{{mainData.createBy}}</el-descriptions-item>
        <el-descriptions-item label="分配人">{{mainData.assignedBy}}</el-descriptions-item>
        <el-descriptions-item label="最近跟进人">{{mainData.followBy}}</el-descriptions-item>
        <el-descriptions-item label="转移人">{{mainData.changeBy}}</el-descriptions-item>
        <el-descriptions-item label="最近编辑人">{{mainData.editBy}}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{mainData.createDate}}</el-descriptions-item>
        <el-descriptions-item label="分配时间">{{mainData.assignedDate}}</el-descriptions-item>
        <el-descriptions-item label="最近跟进时间">{{mainData.followDate}}</el-descriptions-item>
        <el-descriptions-item label="最近转移时间">{{mainData.changeDate}}</el-descriptions-item>
        <el-descriptions-item label="最近编辑时间">{{mainData.editDate}}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="container normal-panel">
      <el-descriptions>
        <div slot="title">跟进记录<i @click="followRecord(isdesc === 1?isdesc = 0:isdesc =1)" :class="isdesc === 1?'fa fa-sort-amount-asc':'fa fa-sort-amount-desc'"></i></div>
      </el-descriptions>
      <div class="flex-align-center normal-margin">
        <p>日期:&nbsp;</p>
        <el-date-picker
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          size="small"
          @change="dateChange"
          clearable>
        </el-date-picker>
      </div>
      <div v-for="(item,index) in recordlist" :key="item.index" class="follow-item">
        <p>{{index + 1}}.&nbsp;{{item.createdate}},由经销商端<b>{{item.createby}}</b>{{item.logtype}},跟进方式:<b>{{item.followupmode}}</b>,跟进内容:</p>
        <div class="content-panel">
         <p>{{item.content}}</p>
         <p>{{item.competitor}}</p> 
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      mainData:{},
      recordlist:[],
      value2:'',
      dateParam:{
        "start": "",
        "end": ""
      }
    }
  },
  methods:{
    async clueDetail () {
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.orderclue.publicclue.PublicClue",
        "method": "selectDetail",
        "content": {
          "sat_orderclueid": this.$route.query.id
        }
      })
      this.mainData  = res.data
    },
    async followRecord () {
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.orderclue.publicclue.PublicClue",
        "method": "getFollowList",
        "content": {
          "sat_orderclueid": this.$route.query.id,
          "isdesc": 1,
          "where": this.dateParam
        }
      })
      this.recordlist = res.data
    },
    dateChange (val) {
      console.log(val)
      if (!val) {val = []}
      this.dateParam.start = val[0]
      this.dateParam.end = val[1]
      this.followRecord()
    },
  },
  mounted () {
    this.clueDetail()
    this.followRecord()
  }
}

</script>
<style>
</style>
<style scoped>
.follow-item{
  font-size: 14px;
}
.content-panel{
  background: #f1f2f3;
  padding: 16px;
  margin: 10px 0 16px 15px;
  line-height: 25px;
}
</style>