<template>
  <el-collapse-item :name="nameKey">
    <template slot="title">
      <p class="common-title">客户接触记录</p>
    </template>
    <div class="message-box">
      <el-table
        :data="tableData"
        style="widht: 100%"
        ighlight-current-row
      >
        <el-table-column label="客户名称" prop="custName" min-width="120" show-overflow-tooltip />
        <el-table-column label="客户内码" prop="custIdn" min-width="120" show-overflow-tooltip />
        <el-table-column label="柜员名称" prop="nickName" min-width="120" show-overflow-tooltip />
        <el-table-column label="手机号" prop="mobile" min-width="120" show-overflow-tooltip />
        <el-table-column label="计划电访日期" prop="telPlanDate" min-width="120" show-overflow-tooltip />
        <el-table-column label="计划电访内容" prop="telPlanRemark" min-width="120" show-overflow-tooltip />
        <el-table-column label="电访总结日期" prop="telSummaryDate" min-width="120" show-overflow-tooltip />
        <el-table-column label="电访总结内容" prop="telSummaryRemark" min-width="120" show-overflow-tooltip />
        <el-table-column label="计划面访日期" prop="visitPlanDate" min-width="120" show-overflow-tooltip />
        <el-table-column label="计划面访内容" prop="visitPlanRemark" min-width="120" show-overflow-tooltip />
        <el-table-column label="面访总结日期" prop="visitSummaryDate" min-width="120" show-overflow-tooltip />
        <el-table-column label="面访总结内容" prop="visitSummaryRemark" min-width="120" show-overflow-tooltip />
        <el-table-column label="更新时间" prop="updateTime" min-width="160" show-overflow-tooltip />
      </el-table>
    </div>
  </el-collapse-item>
</template>
<script>
import { custContactHis } from '@/api/task/custContactRecord.js'
import { cloneDeep } from "lodash";
import _ from "lodash";
let _node = {};
export default {
  props: {
    nameKey: {
      type: String,
      default: 12,
    },
    custId: {
      type: String,
      default: '',
    }
  },
  watch: {
    custId: {
      handler(newVal) {
        console.log('newVal', newVal)
        this.getInit()
      },
      deep: true,
      immediate: true
    },
  },
  data() {
    return {
      tableData: []
    };
  },
  methods: {
    getInit() {
        console.log('custId', this.custId)
        if (!this.custId) return
        custContactHis({ custId: this.custId}).then(res => {
            if (res.code === 200) {
                this.tableData = res.data
            }
        })
    }
  },
  mounted() {
    this.getInit()
  }
};
</script>
<style lang="scss" scoped>
.common-wrap-cnt {
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: 0 3px 8px 0 #00000017;
  border-radius: 16px 16px 0 0;
  height: calc(100vh - 135px);
  overflow-y: auto;
}

.tree-border {
  max-height: 300px;
  width: 100%;
  overflow-y: auto;
}
.create-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ebebeb;
  padding: 0 30px;
  .form-title {
    font-weight: 600;
    font-size: 18px;
    color: #222222;
    letter-spacing: 0.5px;
    line-height: 25px;
  }
  .form-operate {
  }
}
.common-title {
  position: relative;
  color: #222222;
  line-height: 16px;
  font-weight: 600;
  font-size: 16px;
  padding-left: 10px;
  margin: 0;
  &::before {
    position: absolute;
    top: 50%;
    transform: translatey(-50%);
    left: 0;
    content: '';
    width: 3px;
    background-color: #4886f8;
    height: 16px;
    border-radius: 2px;
  }
}
.common-create-main {
  padding: 24px 30px;
  ::v-deep .el-form {
    width: 70%;
    margin: 24px auto 0 auto;
    .el-form-item {
      margin-bottom: 16px;
      .el-input__inner {
        border: 1px solid #ebebeb;
        color: #3d3d3d;
      }
    }
    .el-form-item__label {
      font-weight: 400;
      line-height: 38px;
      font-size: 14px;
      color: #3d3d3d;
      padding-right: 24px;
    }
    .is-required .el-form-item__label {
      &::after {
        content: '*';
        left: 5px;
        color: #ff4d42;
        position: relative;
        top: 2px;
      }
      &::before {
        content: '';
      }
    }
  }
}

.message-box {
  display: flex;
  margin: 20px;
}

::v-deep .el-input {
  width: 600px;
}
</style>
