<template>
  <div class="mainBox">
    <div class="headers">
      <div class="lside">
        <div class="level">A</div>
      </div>
      <div class="rside">
        <div class="customer-name">
          <span class="names">先生</span>
          <span class="tag">初次到访</span>
        </div>
        <div class="adviser">
          <span>负责顾问</span>
          <span class="trans">转交</span>
        </div>
      </div>

      <div class="customer-bottom">
        <div class="item">
          <span class="tops">80%</span>
          <span class="btms">销讲执行</span>
        </div>
        <div class="item">
          <span class="tops">3次</span>
          <span class="btms">来访次数</span>
        </div>
        <div class="item">
          <span class="tops">155min</span>
          <span class="btms">到访时长</span>
        </div>
        <div class="item">
          <span class="tops">3</span>
          <span class="btms">画像标签</span>
        </div>
        <div class="item">
          <span class="tops">3</span>
          <span class="btms">违禁触达</span>
        </div>
      </div>
    </div>

    <div class="body-container">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">历史记录</el-menu-item>
        <el-menu-item index="2">客户资料</el-menu-item>
        <el-menu-item index="3">客户意向</el-menu-item>
        <el-menu-item index="4">销讲执行</el-menu-item>
        <el-menu-item index="5">违禁触达</el-menu-item>
      </el-menu>
      <!-- 历史记录 -->
      <template v-if="activeIndex == 1">
        <div class="activeIndex1">
          <div class="select">
            <div
              v-for="(data, index) in selectList"
              :key="index"
              @click="selectTap(data, index)"
              class="s-items"
              :class="{act: index == activeindex1act}"
            >{{ data.title }}</div>
          </div>
          <!-- 历史记录列表 -->
          <div class="activeList">
            <div class="a-items">
              <div class="a-lside">A</div>
              <div class="a-rside">
                <div class="a-top">
                  <span class="a-name">李佳佳</span>
                  <span class="tag">首次到访</span>
                  <span class="line">&nbsp;|&nbsp;</span>
                  <span class="tag">未标注</span>
                </div>
                <div class="a-time">2022-05-20 18:00:00</div>
                <div class="a-type">
                  <span class="time">录音时长：90分钟</span>
                  <span class="percent">执行率：86%</span>
                  <span class="getcent">质检得分：75</span>
                </div>
              </div>
              <div class="details-box">
                <div class="details">查看详情</div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-if="activeIndex == 2">
        <div class="activeIndex2">
          <div class="baseInfo">
            <img class="base-img" src="/img/base.png" alt />
            基本信息
          </div>

          <div class="base-items">
            <div class="b-lside">客户姓名</div>
            <div class="b-rside">刘佳</div>
          </div>

          <div class="base-items">
            <div class="b-lside">性别</div>
            <div class="b-rside">女</div>
          </div>

          <div class="base-items">
            <div class="b-lside">手机</div>
            <div class="b-rside">17551333886</div>
          </div>

          <div class="base-items">
            <div class="b-lside">微信账号</div>
            <div class="b-rside">-</div>
          </div>

          <div class="base-items">
            <div class="b-lside">客户等级</div>
            <div class="b-rside">A级</div>
          </div>

          <div class="base-items">
            <div class="b-lside">客户来源</div>
            <div class="b-rside">其他</div>
          </div>

          <div class="base-items">
            <div class="b-lside">资讯业务</div>
            <div class="b-rside">一期住宅 二期住宅</div>
          </div>

          <div class="base-items">
            <div class="b-lside">添加人</div>
            <div class="b-rside">访客登记</div>
          </div>

          <div class="base-items">
            <div class="b-lside">添加时间</div>
            <div class="b-rside">-</div>
          </div>

          <div class="base-items">
            <div class="b-lside">备注</div>
            <div class="b-rside">-</div>
          </div>
        </div>
      </template>
      <template v-if="activeIndex == 3">
        <div class="activeIndex2">
          <div style="height: 8px;"></div>
          <div class="base-items">
            <div class="b-lside">置业需求</div>
            <div class="b-rside">投资、养老</div>
          </div>

          <div class="base-items">
            <div class="b-lside">意向面积</div>
            <div class="b-rside">90～100、120～140</div>
          </div>

          <div class="base-items">
            <div class="b-lside">预算</div>
            <div class="b-rside">100～160万</div>
          </div>

          <div class="base-items">
            <div class="b-lside">关注点</div>
            <div class="b-rside">学校</div>
          </div>

          <div class="base-items">
            <div class="b-lside">认知途径</div>
            <div class="b-rside">广告</div>
          </div>
        </div>
      </template>
      <template v-if="activeIndex == 4">
        <!-- 执行总览 -->
        <div class="all-screen">
          <div class="tops">
            <div class="tops-title">执行总览</div>
            <div class="p-box">
              <div class="items" style="margin-left: 144px;">
                <span class="p-i-titles">3</span>
                <span style="margin-top: 6px;">到访次数</span>
              </div>
              <div class="items" style="margin-left: 200px;">
                <div class="circle">
                  <el-progress :width="56" color="#4FC78F" type="circle" :percentage="0"></el-progress>
                </div>
                <span style="margin-top: 6px;">销讲执行率</span>
              </div>
              <div class="items" style="margin-left: 200px;">
                <span class="p-i-titles">3155</span>
                <span style="margin-top: 6px;">接待时长(分)</span>
              </div>
            </div>
          </div>
          <!-- 指标内容 -->
          <div class="contents">
            <div class="head">
              <span style="margin-left: 96px;">指标</span>
              <span style="margin-left: 582px;">执行</span>
            </div>
            <el-collapse v-model="activeName" accordion>
              <el-collapse-item title="区位介绍" name="1">
                <template slot="title">
                  区位介绍
                  <el-progress
                    style="margin: 0 153px 0 80px;width: 363px;"
                    color="#4FC78F"
                    :stroke-width="16"
                    :percentage="70"
                  ></el-progress>
                </template>
                <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
                <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
              </el-collapse-item>
              <el-collapse-item title="品牌介绍" name="2">
                <template slot="title">
                  品牌介绍
                  <el-progress
                    style="margin: 0 153px 0 80px;width: 363px;"
                    color="#4FC78F"
                    :stroke-width="16"
                    :percentage="70"
                  ></el-progress>
                </template>
                <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
              </el-collapse-item>
            </el-collapse>
            <div style="height: 54px;"></div>
          </div>
        </div>
      </template>

      <template v-if="activeIndex == 5">
        <div class="all-screen">
          <div class="tops">
            <div class="tops-title">执行总览</div>
            <div class="p-box">
              <div class="items" style="margin-left: 144px;">
                <span class="p-i-titles">3</span>
                <span style="margin-top: 6px;">到访次数</span>
              </div>
              <div class="items" style="margin-left: 200px;">
                <div class="circle">
                  <el-progress :width="56" color="#E51B1B" type="circle" :percentage="50"></el-progress>
                </div>
                <span style="margin-top: 6px;">销讲执行率</span>
              </div>
              <div class="items" style="margin-left: 200px;">
                <span class="p-i-titles">3155</span>
                <span style="margin-top: 6px;">接待时长(分)</span>
              </div>
            </div>
          </div>
          <!-- 列表 -->
          <div class="p-content">
            <div class="p-items">
              <span class="p-i-lside">红包</span>
              
              <span class="p-i-rside">1次</span>
            </div>
            <div class="p-items">
              <span class="p-i-lside">收红包</span>
              <span class="p-i-rside">1次</span>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1", // 大的tab
      activeindex1act: 0, // 筛选条件下标
      selectList: [
        // 选中
        {
          title: "全部",
          id: ""
        },
        {
          title: "接待记录",
          id: "1"
        },
        {
          title: "通话记录",
          id: "2"
        },
        {
          title: "跟进记录",
          id: "3"
        }
      ],
      activeName: 1 // 折叠面板选中项
    };
  },
  methods: {
    // 历史记录筛选
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.activeIndex = key;
    },

    // 筛选历史记录类型
    selectTap(data, index) {
      this.activeindex1act = index;
    }
  }
};
</script>

<style lang="scss" scoped>
.mainBox {
  padding: 0 28px;
  width: 100%;
  min-width: 1200px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  // 顶端样式
  .headers {
    padding: 20px 20px 0 20px;
    width: 100%;
    height: 172px;
    background: #fff;
    display: flex;
    flex-wrap: wrap;

    .lside {
      width: 68px;
      flex-shrink: 0;
      display: flex;
      justify-items: flex-end;

      .level {
        width: 36px;
        height: 36px;
        border: 1px solid #e0e0e0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
      }
    }

    .rside {
      flex-grow: 1;

      .customer-name {
        height: 36px;
        display: flex;
        align-items: center;

        .names {
          margin-right: 8px;
          font-size: 16px;
        }

        .tag {
          padding: 1px 12px;
          text-align: center;
          font-size: 14px;
          background: rgba($color: #2671e2, $alpha: 0.2);
          color: #2671e2;
        }
      }

      .adviser {
        margin-top: 12px;
        font-size: 14px;
        color: #333333;

        .trans {
          margin-left: 24px;
          color: #2671e2;
          cursor: pointer;
        }
      }
    }

    .customer-bottom {
      margin-left: 8px;
      width: 100%;
      height: 84px;
      display: flex;
      align-content: center;

      .item {
        padding: 0 60px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .tops {
          font-size: 16px;
          color: #333;
          font-weight: 500;
          text-align: center;
        }

        .btms {
          margin-top: 4px;
          font-size: 14px;
        }
      }
    }
  }

  .body-container {
    margin-top: 20px;
    padding: 0 20px;
    background: #fff;
    flex-grow: 1;

    .activeIndex1 {
      .select {
        width: 100%;
        height: 56px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #e0e0e0;

        .s-items {
          padding: 2px 8px;
          margin-right: 40px;
          font-size: 14px;
          cursor: pointer;
          border: 1px solid #fff;
        }

        .act {
          border-color: #2671e2;
          color: #2671e2;
        }
      }

      .activeList {
        .a-items {
          padding: 16px 0;
          width: 100%;
          height: 118px;
          display: flex;
          border-bottom: 1px solid #e0e0e0;

          .a-lside {
            margin-right: 12px;
            flex-shrink: 0;
            width: 36px;
            height: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            border: 1px solid #e0e0e0;
          }

          .a-rside {
            flex-grow: 1;

            .a-top {
              height: 36px;
              display: flex;
              align-items: center;

              .a-name {
                margin-right: 24px;
                font-size: 16px;
              }

              .tag {
                font-size: 14px;
              }
            }

            .a-time {
              margin-top: 4px;
              font-size: 14px;
            }

            .a-type {
              margin-top: 6px;
              display: flex;
              align-items: center;
              font-size: 14px;

              .time {
                margin-right: 32px;
              }

              .percent {
                margin-right: 27px;
              }
            }
          }

          .details-box {
            margin-right: 80px;
            height: 100%;
            display: flex;
            align-items: center;

            .details {
              width: 82px;
              height: 30px;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #fff;
              background: #2671e2;
              border-radius: 2px;
              font-size: 14px;
              cursor: pointer;
            }
          }
        }
      }
    }

    .activeIndex2 {
      width: 100%;
      display: flex;
      flex-direction: column;

      .baseInfo {
        padding: 16px 0 8px 0;
        display: flex;
        align-items: center;

        .base-img {
          margin-right: 2px;
          width: 14px;
          height: 16px;
        }
      }

      .base-items {
        padding: 8px 0;
        width: 100%;
        display: flex;
        align-items: center;

        .b-lside {
          width: 96px;
          flex-shrink: 0;
          color: #585858;
        }

        .b-rside {
          flex-grow: 1;
        }
      }
    }

    .all-screen {
      width: 100%;
      display: flex;
      flex-direction: column;

      .tops {
        margin: 16px 0;
        padding: 16px 20px 0;
        width: 100%;
        height: 154px;
        border: 1px solid #e0e0e0;

        .tops-title {
          font-size: 16px;
        }

        .p-box {
          margin-top: 16px;
          display: flex;
          align-items: flex-end;

          .items {
            display: flex;
            flex-direction: column;
            .circle {
              display: flex;
              justify-content: center;
            }
            .p-i-titles {
              text-align: center;
            }
          }
        }
      }

      .p-content {
        margin-top: -16px;
        border: 1px solid #E0E0E0;
        border-top: none;

        .p-items {
          padding: 0 0 0 80px;
          width: 100%;
          height: 58px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #e0e0e0;

          .p-i-lside {
            width: 43%;
            flex-shrink: 0;
            font-size: 16px;
          }
          .p-i-rside {
            padding: 2px 23px;
            color: #E51B1B;
            background: rgba($color: #E51B1B, $alpha: .1);
          }
        }
      }

      .contents {
        border: 1px solid #e0e0e0;

        .head {
          height: 54px;
          display: flex;
          align-items: center;
        }
      }
    }
  }
}

.el-menu-demo {
  border-bottom: 1px solid #e0e0e0 !important;
}
</style>

<style lang="scss">
.el-collapse-item__header {
  padding: 0 0 0 80px;
  background-color: #f8f8f8;
  border-bottom-color: #e0e0e0;
}
.el-collapse-item__arrow {
  margin: 0;
}
.el-progress__text {
  font-size: 14px;
}
</style>