<template>
  <div class="order_detail">
    <el-row :gutter="20">
      <el-col :md="24" class="order_detail_body">
        <el-card shadow="hover">
          <el-col :md="24">
            <h1 class="title">
            <svg-icon class="title_icon" icon-class="hongqi" />单位名称：{{ companyame }}</h1>
            <p class="title_sub">客户部门：{{ customerdept }}</p>
            <p class="title_sub">客户类型：{{ customertype }}</p>
            <p class="title_sub">手机号码：{{ mobilephone }}</p>
            <p class="title_sub">联系人：{{ name }}</p>
            <p class="title_sub">邮箱：{{ customeremail }}</p>
            <p class="title_sub">项目负责人：{{ project_cusname }}</p>
          </el-col>
        </el-card>
      </el-col>
      <el-col v-if="followItems.length" :md="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>跟进动态</span>
          </div>
          <div class="order_steps">
            <el-steps :active="0" :space="100" direction="vertical" process-status="success">
              <el-step
                v-for="(activity, index) in followItems"
                :key="index"
                :description="`${activity.timestamp} ${activity.content}`"
                :title="activity.title"/>
            </el-steps>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import { getCusUserR, getFollowList } from '@/api/customer/customerInfoHY'
import { mapGetters } from 'vuex'
import { filterContent } from '@/utils'

export default {
  name: 'Detail',
  filters: {

  },
  props: {
    rowid: {
      type: String,
      default: ''
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      followItems: [], // 跟进信息
      companyame: '', // 单位名称
      customerdept: '', // 客户部门
      customertype: '', // 客户类型
      name: '', // 联系人
      mobilephone: '', // 手机号码
      customeremail: '', // 邮箱
      project_cusname: '' // 项目负责人

    }
  },
  computed: {
    ...mapGetters(['avatar'])
  },
  created() {
    if (this.rowid) {
      this.getDetail(this.rowid)
      this.getFlolow(this.rowid)
    }
  },

  methods: {
    // 详情
    getDetail(rid) {
      // getCusUserR(rid).then(response => {
      //   if (response.state.toLowerCase() === 'success') {
      //     const res = response.data
      //     this.companyame = res.companyame // 单位名称
      //     this.customerdept = res.customerdept // 客户部门
      //     this.customertype = res.customertype // 客户类型
      //     this.mobilephone = res.mobilephone // 手机号码
      //     this.name = res.name // 姓名
      //     this.customeremail = res.customeremail // 邮箱
      //     this.project_cusname = res.project_cusname // 项目负责人姓名
      //   }
      // })
    },
    // 获取跟进信息
    getFlolow(rid) {
      // getFollowList(rid).then(response => {
      //   if (response.state.toLowerCase() === 'success') {
      //     const res = response.data
      //     this.followItems = []
      //     res.forEach(element => {
      //       this.followItems.unshift({
      //         content: element.content,
      //         timestamp: element.createTime,
      //         title: element.createName
      //       })
      //     })
      //   }
      // })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.order_detail {
  .el-col {
    margin-bottom: 20px;
  }
  .el-icon-time {
    color: #d81e06;
  }
  .el-card__header {
    padding-top: 14px;
    padding-bottom: 14px;
    background-color: #f5f5f6;
  }
  .order_file {
    .el-card__body {
      padding: 22px 0 0 0;
      text-align: center;
    }
  }
  .order_steps {
    .el-step__icon-inner {
      display: none;
    }
  }
  .order_record {
    .el-card__body {
      padding: 0;
    }
    .el-tabs__header {
      padding: 0px 20px;
      background-color: #f5f5f6;
      .el-tabs__item {
        font-size: 16px;
        height: 47px;
        line-height: 47px;
      }
    }
  }
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.order_detail {
  .order_detail_body {
    margin-bottom: 20px;
    .round_img {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      overflow: hidden;
      margin: 14px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .title {
      font-size: 20px;
      .title_icon {
        color: #d81e06;
        font-size: 16px;
        margin-right: 20px;
      }
    }
    .title_sub {
      font-size: 14px;
      color: #666666;
      width: 24.5%;
      display: inline-block;
    }
    .order_detail_content {
      background-color: #f5f5f6;
      padding-top: 20px;
      color: #4c4c4c;
      font-size: 14px;
      .order_detail_item {
        margin-bottom: 10px;
        .order_content {
          margin-top: 10px;
        }
        .order_file {
          position: relative;
          cursor: pointer;
          .img_mask {
            display: none;
            position: absolute;
            left: 0px;
            top: 0px;
            background-color: rgba(0, 0, 0, 0.3);
            width: 100%;
            height: 22px;
            text-align: right;
            z-index: 1;
            i {
              font-size: 20px;
              line-height: 22px;
              display: inline-block;
              margin-right: 15px;
              color: #fff;
            }
          }
          p {
            margin-top: 5px;
            padding-left: 14px;
            padding-right: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .file_icon {
            height: 68px;
            line-height: 68px;
            font-size: 68px;
            color: #409eff;
          }
        }
        .order_file:hover .img_mask {
          display: block;
        }
      }
    }
  }
  .green {
    color: #00c1de;
  }
  .done {
    color: #198120;
  }
  .red {
    color: #d81e06;
  }
  .yellow {
    color: #e6a23c;
  }
  .order_steps {
    // height: 240px;
    .el-step__icon-inner {
      display: none;
    }
  }

  .tab_body {
    padding: 0 20px 20px 20px;
  }
}
</style>
