<template>
  <div class="fingerpost">
    <el-card class="fingerpost-title">
      <h2>{{ indeterminacy }}账号操作指南</h2>
    </el-card>
    <div class="content">
      <div class="content-left">
        <div class="content-menu" @click="onContentMenu(1)">
          <div class="is-show">
            <i v-if="contentActive == 1"></i>
          </div>
          <span :class="contentActive == 1 ? 'active' : ''">客户检索</span>
        </div>
        <el-collapse v-model="contentActive" accordion @change="contentActiveChange">
          <el-collapse-item title="" name="2">
            <template slot="title">
              <i class="el-icon-arrow-right" v-if="contentActive == 1 || contentActive == 3 || contentActive == 4"></i>
              <i v-else class="el-icon-arrow-down"></i>
              客户列表
            </template>
            <div class="children-item" v-for="item in children" :key="item.son" @click="childrenIsItem(item, '客户列表')">
              <span :class="childrenActive == item.son ? 'is-active' : ''"></span>
              <p :class="childrenActive == item.son ? 'active' : ''">{{ item.name }}</p>
            </div>
          </el-collapse-item>
        </el-collapse>
        <div class="content-menu" @click="onContentMenu(3)">
          <div class="is-show">
            <i v-if="contentActive == 3"></i>
          </div>
          <span :class="contentActive == 3 ? 'active' : ''">客户审批</span>
        </div>
        <el-collapse v-model="contentActive" accordion @change="contentChangeseller" v-if="isShowTheContract">
          <el-collapse-item title="" name="4">
            <template slot="title">
              <i class="el-icon-arrow-right" v-if="contentActive == 1 || contentActive == 3 || contentActive == 2"></i>
              <i v-else class="el-icon-arrow-down"></i>
              合同管理
            </template>
            <div class="children-item" v-for="item in childrenSeller" :key="item.son" @click="childrenIsItem(item, '合同管理')">
              <span :class="childrenActiveSeller == item.son ? 'is-active' : ''"></span>
              <p :class="childrenActiveSeller == item.son ? 'active' : ''">{{ item.name }}</p>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="content-right" ref="listPage">
        <clientList v-if="contentActive == 1 && identity" :identity="identity" />
        <client-searching v-if="contentActive == 2 && identity" :childrenActive="childrenActive" :identity="identity" />
        <examine-list v-if="contentActive == 3 && identity" :identity="identity" />
        <ContractList v-if="contentActive == 4 && identity && isShowTheContract" :childrenActiveSeller.sync="childrenActiveSeller" />
      </div>
    </div>
  </div>
</template>

<script>
import ContractList from "./components/contractList.vue";
import clientList from "./components/clientList.vue";
import ClientSearching from "./components/clientSearching.vue";
import ExamineList from "./components/examineList.vue";
export default {
  name: "",
  components: { clientList, ClientSearching, ExamineList, ContractList },
  props: {},
  data() {
    return {
      children: [
        { name: "新增", son: 1 },
        { name: "搜索、筛选器", son: 2 },
        { name: "导出客户、导出联系人", son: 3 },
        { name: "列表操作按钮说明", son: 4 },
        { name: "客户详情页", son: 5 },
        { name: "联系人列表操作说明", son: 6 },
      ],
      childrenSeller: [
        { name: "业务场景说明", son: 1 },
        { name: "合同列表", son: 2 },
        { name: "添加业务合同", son: 3 },
        { name: "添加代付合同", son: 4 },
        { name: "合同状态分类", son: 5 },
        { name: "提交用印申请", son: 6 },
        { name: "申请转正、续约申请", son: 7 },
      ],
      contentActive: 1, //一级
      childrenActive: 1, //二级
      childrenActiveSeller: 1,
      identity: "",
    
    };
  },
  computed: {
    indeterminacy() {
      return this.identity == "rai_group"
        ? "销售组长"
        : this.identity == "ficc_group"
        ? "销售组长"
        : this.identity == "rai_admin"
        ? "部门管理员"
        : this.identity == "ficc_admin"
        ? "部门管理员"
        : this.identity == "rai_seller"
        ? "销售"
        : this.identity == "ficc_seller"
        ? "销售"
        : "超级管理员";
    },
    isShowTheContract() {//  isShowTheContract //合同管理 销售销售组长 syw ydlou  byhe  fcliu
      return (this.identity === "rai_group" ||this.identity === "ficc_group" || this.identity === "rai_seller" ||this.identity === "ficc_seller");
    },
  },
  watch: {},
  created() {
    this.identity = localStorage.getItem("RoleIdentity") || "";
  },
  mounted() {
  },
  methods: {
    onContentMenu(num) {
      this.contentActive = num;
      if (this.childrenActive !== 1) {
        this.childrenActive = 1;
      }
      if (this.childrenActiveSeller !== 1) {
        this.childrenActiveSeller = 1;
      }
    },
    childrenIsItem(val, type) {
      if (type == "合同管理") {
        this.childrenActiveSeller = Number(val.son);
      } else {
        this.childrenActive = Number(val.son);
      }
      this.scrollTopPage()
    },
    contentActiveChange(val) {
      if (!val) {
        this.contentActive = 2;
        this.childrenActiveSeller = this.childrenActiveSeller !== 1 ? 1 : this.childrenActiveSeller;
      }
    },
    //销售合同管理
    contentChangeseller(val) {
      if (!val) {
        this.contentActive = 4;
        this.childrenActive = this.childrenActive !== 1 ? 1 : this.childrenActive;
      }
    },
    scrollTopPage(){
      this.$nextTick(() => {
        this.$refs.listPage.scrollTop = 0;
      });
    }
  },
};
</script>
<style lang="scss">
.fingerpost {
  height: 100%;
  width: 100%;
  overflow: hidden;
  .fingerpost-title {
    text-align: center;
    h2 {
      font-size: 18px;
    }
  }
  .content {
    display: flex;
    .content-left {
      min-width: 260px;
      background: #f7f7f7;
      padding-left: 10px;
      .content-menu {
        display: flex;
        align-items: center;
        padding: 30px 30px 30px 40px;
        span {
          color: #333333;
          font-size: 16px;
        }
        .active {
          color: #409eff;
        }
        .is-show {
          width: 13px;
          height: 100%;
          display: flex;
          align-items: center;
          i {
            width: 5px;
            height: 5px;
            background-color: #409eff;
            border-radius: 50%;
            margin-right: 8px;
          }
        }
      }
      .children-item {
        display: flex;
        align-items: center;
        padding: 10px;
        font-size: 14px;
        color: #333333;
        span {
          width: 5px;
          height: 5px;
          border-radius: 50%;
          margin-right: 8px;
        }
        .is-active {
          background-color: #409eff;
        }
        .active {
          color: #409eff;
        }
      }
    }
  }
  .el-collapse {
    border: none !important;
  }
  .el-collapse-item__header {
    margin-bottom: 0;
    margin-left: 25px;
    border: none !important;
    font-size: 16px;
    color: #333333;
    font-weight: 400;
    background-color: #f7f7f7;
    .el-icon-arrow-right,
    .el-icon-arrow-down {
      margin-right: 10px;
    }
    .el-collapse-item__arrow {
      display: none;
    }
  }
  .el-collapse-item__content {
    background-color: #f7f7f7;
    padding-left: 30px;
    padding-bottom: 10px;
  }
  .content-right {
    width: 100%;
    height: calc(100vh - 110px);
    padding: 30px;
    overflow: auto;
  }
}
</style>
