<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">
            <mebman
              :circleId="circleId"
              :roleType="roleType"
              :circleName="name"
              v-if="circleId"
            ></mebman>
          </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-tab-pane label="广告位管理" name="five" v-if="idType == 1">
            <ads-manage></ads-manage>
          </el-tab-pane>
          <el-tab-pane label="排行榜管理" name="six" v-if="idType == 1">
            <gp-ranking></gp-ranking>
          </el-tab-pane>
          <el-tab-pane label="KOL管理" name="seven">
            <kol-manage :circleId="circleId" />
          </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 Mebman from '../../components/yqrange/mebman'
import AdsManage from '../../components/yqrange/ads-manage'
import GpRanking from '../../components/yqrange/gp-ranking'
import KolManage from '../../components/yqrange/kol-manage'
export default {
  components: {
    GpRanking,
    AdsManage,
    Mebman,
    RangeSetting,
    LiveManage,
    BreadCrumb,
    KolManage,
  },
  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,
      roleType: '',
      idType: '',
    }
  },
  created() {
    const { id, name, activeName, roleType } = this.$route.query
    this.idType = localStorage.getItem('storageIdType')
    // this.idType = 1;// TODO
    this.circleId = id
    this.name = name
    this.activeName = activeName
    this.roleType = roleType
    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;
      }
    }
  }
}
</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>
