<template>
  <div class="resident-list">
    <bread-crumb
      :curmbFirst="curmbFirst"
      :curmbSecond="curmbSecond"
      :curmbThird="curmbThird"
      :jumPathThird="jumPathThird">
    </bread-crumb>
    <div class="f-main-content screenSet patient-detail-wrap">
      <div v-if="active == 0">
        <el-tabs v-model="activeName" @tab-click="tabChangeHandler">
          <el-tab-pane label="成员管理" name="first">

          </el-tab-pane>
          <el-tab-pane label="分组管理" name="second">

          </el-tab-pane>
          <el-tab-pane label="直播管理" name="third">
           <live-manage  @setActive="setActive" :circleName="name"></live-manage>
          </el-tab-pane>
          <el-tab-pane label="应用配置" name="fourth">
           <range-setting></range-setting>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div v-if="active == 4">
        <create-live :curmbSecond="curmbSecond" :jumPathFouth="jumPathFouth"></create-live>
      </div>

    </div>
  </div>


</template>
<script>
  import { openLoading, closeLoading } from "../../utils/utils";
import BreadCrumb from "@/components/yqrange/breadcrumb-range.vue";
import { getRangeList,updateRangeStatus, getCircleSettingList, saveCircleSetting} from "../../utils/yqrange/yqrangeApi";
  import LiveManage from "./live-manage";
  import RangeSetting from "./range-setting";
  import CreateLive from "./create-live";
export default {
  components: {
    CreateLive,
    RangeSetting,
    LiveManage,
    BreadCrumb
  },
  data(){
    return{
      curmbFirst: '云鹊小圈',
      curmbSecond: '圈子管理',
      curmbThird: '',
      jumPathFouth: "",
      jumPathThird: '/yq-range',
      activeName: 'first',
      showAllFlag: false,
      showNewFlag: false,
      searchForm: {
        name: '',
        createdTime: '',
        // endTime: '',
        userType: "", // 用户标识 1：内部用户 2：外部用户,
        status: "",
        pageNo: 1,
        pageSize: 10,
      },
      totalRows: 0,
      tableData: [],
      dialogSettingVisible: false,
      circleId: null,
      name: "",
      active: 0
    }
  },
  created() {
    const {id, name, activeName} = this.$route.query;
    this.circleId = id;
    this.name = name;
    this.activeName = activeName;
    this.curmbSecond = "圈子管理-" + name;
    this.curmbThird = this.curmbSecond;
    this.active = 0;
    this.jumPathFouth = "/range-manage?id=" + this.circleId + "&name=" + this.name;
    // this.jumPathFouth = "/yq-range";
  },
  methods: {
    tabChangeHandler(tab) {},

    setActive(active){
      this.active = active;
    }



  },
}
</script>
<style lang="scss">
  .yqrange-index-wrapper{
    .yqrange-index-content{
      background: #fff;
      padding: 10px;
      .header-title{
        padding: 10px 12px;
        font-size: 12px;
        color: #449284;
        border-bottom: 1px solid #efefef;
      }
    }
    .el-button--text{
      color: #449284;
      font-size: 14px;
      &::after{
        content: '';
        position: relative;
        height: 14px;
        /*border-right: 1px solid #EBEEF5;*/
        border-right: 1px solid #aaaaaa;
        padding-right: 10px;
      }
      &:last-of-type{
        &::after{
          content: '';
          position: relative;
          width: 1px;
          height: 14px;
          border-right: none;
        }
      }
    }
  }
  /*.range-make-box{*/
    /*.el-message-box__btns{*/
      /*margin-top: 30px;*/
    /*}*/
  /*}*/
</style>
<style lang="scss" scoped>
  @import '../../style/patients-style/element-reset.css';

  .f-main-content{
    background: #ffffff;
    padding: 30px;
    .right-btn-group{
      position: absolute;
      right: 60px;
      z-index: 1800;
    }
    .section{
      .item{
        display: flex;
        font-size: 14px;
        div{
          display: flex;
          flex: 1;
          line-height: 36px;
          .title{
            width: 150px;
            text-align: right;
          }
          .info{
            color: #999;
            padding-left: 15px;
            width: 100%;
          }
        }
        &.wrap-p{
          div{
            line-height: 28px;
          }
        }
        .btn-right{
          width: 35%;
          padding-left:10px;
        }
      }
      .has-header{
        display: flex;
        justify-content: space-between;
        padding: 15px 0;
        margin-bottom: 15px;
        border-bottom: 1px dashed #888;
        .right-p{
          display: inline-block;
          text-align: right;
          color: #999;
          font-size: 14px;
          span:last-child{
            margin-left: 15px;
          }
        }
      }
    }
    .health-record-wrap{
      /*height: 300px;*/
      overflow-y: auto;
      @media screen and (min-width:1240px) and (max-width:1545px){
        height: 350px;
      }
      @media screen and (min-width:1545px) and (max-width:1600px){
        height: 580px;
      }
      @media screen and (min-width:1600px){
        height: 670px;
      }
      &::-webkit-scrollbar{
        width:5px;
      }
      &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.1);
      }
    }
    .health-record-list{
      .item{
        width: 100%;
        margin-bottom: 15px;
        .record-date{
          color: #999;
          padding-bottom: 10px;
        }
        .record-content{
          width: 100%;
          border: 1px solid #E4E7ED;
          border-radius: 5px;
          padding: 10px 15px 13px;
          .record-title{
            display: flex;
            justify-content: space-between;
            padding: 5px 0;
            span{
              color: #999;
              font-size: 14px;
            }
          }
          .list-visit{
            line-height: 28px;
            padding: 6px 0 2px;
            display: flex;
            display: -webkit-flex;
            align-items: flex-start;
            font-size: 14px;
            color: #999;
            .left-label{
              line-height: 28px;
            }
            .right-item{
              flex: 1;
              line-height: 28px;
              p{
                line-height: 28px;
                .check-btn{
                  color: #449284;
                  cursor: pointer;
                  margin-left: 15px;
                }
              }
            }
          }
        }
      }
    }
    .no-record-content{
      @media screen and (min-width:1240px) and (max-width:1545px){
        height: 300px;
      }
      @media screen and (min-width:1545px) and (max-width:1600px){
        height: 500px;
      }
      @media screen and (min-width:1600px){
        height: 600px;
      }
      text-align: center;
      padding: 50px 0 60px;
      .no-record-info{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -60%);
      }
      img{
        width: 120px;
      }
      p{
        color: #B9B9C6;
        font-size: 20px;
      }
    }
    .ml10{
      margin-left: 10px;
    }
  }
</style>
