<template>
  <div class="detail">
    <Header>
      <edit position="detail" @getDetail="getDetail" :arealist="arealist" :detailInfo="{data:detail}"></edit>
      <follow :detailInfo="{data:detail}" @getDetail="getDetail" position="detail"></follow>
    </Header>
    <div class="normal-card">
      <el-descriptions :column="5" title="线索信息">
        <el-descriptions-item label="序号">{{detail.rowindex}}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{detail.phonenumber}}</el-descriptions-item>
        <el-descriptions-item label="地址">{{detail.addres}}</el-descriptions-item>
        <el-descriptions-item label="来源">{{detail.cluesource}}</el-descriptions-item>
        <el-descriptions-item label="状态"><span :style="{'color':statusStyle[detail.status]}">{{detail.status}}</span></el-descriptions-item>
        <el-descriptions-item label="客户名称">{{detail.name}}</el-descriptions-item>
        <el-descriptions-item label="省市县">{{detail.province}}、{{detail.city}}、{{detail.county}}</el-descriptions-item>
        <el-descriptions-item label="备注">{{detail.notes}}</el-descriptions-item>
        <el-descriptions-item label="负责人">{{detail.leadername}}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="normal-card">
      <el-descriptions :column="5" title="系统信息">
        <el-descriptions-item label="创建人">{{detail.createBy}}</el-descriptions-item>
        <el-descriptions-item label="分配人">{{detail.assignedBy}}</el-descriptions-item>
        <el-descriptions-item label="最近跟进人">{{detail.followBy}}</el-descriptions-item>
        <el-descriptions-item label="转移人">{{detail.changeBy}}</el-descriptions-item>
        <el-descriptions-item label="最近编辑人">{{detail.editBy}}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{detail.createDate}}</el-descriptions-item>
        <el-descriptions-item label="分配时间">{{detail.assignedDate}}</el-descriptions-item>
        <el-descriptions-item label="最近跟进时间">{{detail.followDate}}</el-descriptions-item>
        <el-descriptions-item label="最近转移时间">{{detail.changeDate}}</el-descriptions-item>
        <el-descriptions-item label="最近编辑时间">{{detail.editDate}}</el-descriptions-item>
      </el-descriptions>
    </div>
    <follow-detail ref="followDetatil"></follow-detail>
  </div>
</template>

<script>
import Header from '@/SManagement/archives_upload/components/Header'
import followDetail from '@/SManagement/orderclue_detail/components/followDetail'
import edit from '@/SManagement/orderclue/components/edit'
import follow from '@/SManagement/orderclue/components/follow'
export default {
  name: 'index',
  data() {
    return {
      param: {
        "classname": "saletool.orderclue.web.orderclue",
        "method": "selectDetail",
        "content": {
          "nocache":true,
          "sat_orderclueid": 0
        }
      },
      statusStyle: {
        '待跟进':'#FA8C16',
        '跟进中':'#52C41A',
        '丢单':'#FF3B30',
        '无效':'#999999',
        '已成交':'#333333',
        '已过期':'#999999'
      },
      detail: '',
      arealist:[]
    };
  },
  components:{ Header , followDetail , edit , follow },
  computed:{
  },
  watch:{
  },
  created() {
    this.getDetail()
    this.query_arealist()
  },
  methods: {
    async getDetail() {
      this.$nextTick(() => {
        this.$refs.followDetatil.getFollowDetail()
      })
      this.param.content.sat_orderclueid = this.$route.query.id
      let res = await this.$api.requested(this.param)
      this.detail = res.data
    },
    async query_arealist() {
      const res = await this.$api.requested({
        "classname": "system.tools",
        "method": "query_arealist",
        "content": {
        }
      })
      this.arealist = this.tool.createMenu(res.data)
    }
  },
};
</script>

<style scoped>
*{
  box-sizing: border-box;
}
  .normal-card {
    margin-bottom: 10px;
    padding: 16px;
  }
  .normal-card .title {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 25px;
  }
  .normal-card .info {
    color: #000000;
    display: flex;
    flex-wrap: wrap;
  }
  .normal-card .info p {
    margin-right: 50px;
    margin-bottom: 15px;
    font-size: 14px;
  }
  .normal-card .info p span {
    margin-right: 15px;
  }
</style>
