<template>
  <div class="wrapper">
    <el-row>
      <el-col :span="8">
        <h3>{{ $t('trials:workbench:title:ClinicalDataEnter') }}</h3>
      </el-col>
      <el-col :span="16" style="text-align:right;">
        <h3>
          <Pagination class="page" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize" layout="total, sizes, prev, pager, next" :background="false" style="display: inline-block;" @pagination="getList" />
          <!-- 重置 -->
          <el-button icon="el-icon-refresh-left" size="small" circle :title="$t('common:button:reset')" @click="handleReset" />
        </h3>
      </el-col>
    </el-row>
    <el-table
      ref="needSignDocList"
      v-loading="listLoading"
      :data="list"
      :show-header="true"
      v-adaptive="{bottomOffset:45}"
      height="100"
      @sort-change="handleSortByColumn"
    >
      <el-table-column type="index" width="40" />
      <!-- 项目编号 -->
      <el-table-column
        :label="$t('trials:workbench:table:trialId')"
        prop="TrialCode"
        show-overflow-tooltip
        sortable="custom"
      />
      <!-- 试验名称 -->
      <el-table-column
        :label="$t('trials:workbench:table:experimentName')"
        prop="ExperimentName"
        show-overflow-tooltip
        sortable="custom"
      />
      <!-- 研究方案号 -->
      <el-table-column
        :label="$t('trials:workbench:table:researchNo')"
        prop="ResearchProgramNo"
        show-overflow-tooltip
        sortable="custom"
      />
      <!-- 加急量 -->
      <el-table-column
        :label="$t('trials:sysDocBeSigned:table:UrgentCount')"
        prop="UrgentCount"
        show-overflow-tooltip
        sortable="custom"
        width="100"
      />
      <!-- 待录入量 -->
      <el-table-column
        :label="$t('trials:sysDocBeSigned:table:ToBeDealedCount')"
        prop="ToBeDealedCount"
        show-overflow-tooltip
        sortable="custom"
        width="130"
      />
      <el-table-column
        :label="$t('common:action:action')"
        width="140"
      >
        <template slot-scope="scope">
          <el-button
            icon="el-icon-upload"
            v-if="scope.row.ToBeDealedCount !== 0 || scope.row.ReadModuleCount !== 0"
            circle
            :disabled="!!~trialIdList.indexOf(scope.row.TrialId) || isSignSystemDoc"
            :title="$t('trials:workbench:title:UploadClinicalData')"
            @click="handleUpload(scope.row)"
          />
          <el-button
            v-if="scope.row.ToBeVisitCount !== 0"
            icon="el-icon-link"
            circle
            :disabled="!!~trialIdList.indexOf(scope.row.TrialId) || isSignSystemDoc"
            :title="$t('trials:workbench:button:UploadImage')"
            @click="goVisit(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-if="configVisible"
      :visible.sync="configVisible"
      :close-on-click-modal="false"
      width="800px"
      :title="`${$t('trials:audit:tab:clinicalData')}(${subjectRowData.TrialCode})`"
      custom-class="base-dialog-wrapper"
      :fullscreen="true"
    >
      <BaseContainer>
        <!-- 搜索框 -->
        <template slot="search-container">
          <el-form :inline="true">
            <!-- Site -->
            <!-- Subject -->
            <el-form-item  :label="$t('trials:linkedRP:table:subjectCode')">
              <el-input v-model="searchData.SubjectCode" style="width:140px" />
            </el-form-item>
            <!-- Visit -->
            <el-form-item>
              <!-- 查询 -->
              <el-button type="primary" icon="el-icon-search" @click="handleUpload(subjectRowData)">
                {{ $t('common:button:search') }}
              </el-button>
              <!-- 重置 -->
              <el-button type="primary" icon="el-icon-refresh-left" @click="handleUploadReset">
                {{ $t('common:button:reset') }}
              </el-button>
            </el-form-item>
          </el-form>

        </template>
        <!-- 检查列表 -->
        <template slot="main-container">
          <el-table
            :data="clinicalData"
            border
            v-adaptive="{bottomOffset:75}"
            stripe
            height="100"
            v-loading="listLoading"
            style="width: 100%"
            size="small"
            :span-method="objectSpanMethod"
          >
            <!-- 受试者 -->
            <el-table-column
              prop="SubjectCode"
              :label="$t('trials:auditRecord:table:subject')"
              show-overflow-tooltip
              width="120"
            />
            <!-- 临床数据类型 -->
            <el-table-column
              prop="ClinicalDataSetName"
              :label="$t('trials:workbench:table:ClinicalNameList')"
              show-overflow-tooltip
            />
            <!-- 配置值 -->
            <el-table-column
              prop="ClinicalCount"
              :label="$t('trials:workbench:table:FormCount')"
              show-overflow-tooltip
            />
            <el-table-column
              :label="$t('common:action:action')"
              width="150"
            >
              <template slot-scope="scope">
                <el-button
                  icon="el-icon-plus"
                  :disabled="!(scope.row.UploadRole === 0 && [2, 3].includes(scope.row.ClinicalDataLevel)) && scope.row.ClinicalCount > 0"
                  circle
                  :title="$t('common:button:add')"
                  @click="handleAdd(scope.row)"
                />
                <el-button
                  icon="el-icon-view"
                  circle
                  :title="$t('trials:enrolledReviews:button:view')"
                  @click="handleView(scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination" style="text-align: right;margin-top: 5px;">
            <pagination :total="clinicalPageTotal" :page.sync="clinicalPage.PageIndex" :limit.sync="clinicalPage.PageSize" @pagination="() => {handleUpload(subjectRowData)
}" />
          </div>
        </template>
      </BaseContainer>

<!--        <el-tabs style="height: 100%" type="border-card" :before-leave="() => {handleUpload(subjectRowData)}">-->
<!--          <el-tab-pane label="待录入">-->
<!--          </el-tab-pane>-->
<!--        </el-tabs>-->
    </el-dialog>
    <el-dialog
      v-if="confirmVisible"
      :visible.sync="confirmVisible"
      :close-on-click-modal="false"
      width="80%"
      :title="`${confirmType === 'look' ? $t('trials:workbench:title:viewClinicalData') : confirmType === 'confirm' ? $t('trials:workbench:title:ConfirmClinicalData') : $t('trials:workbench:title:ConfirmedClinicalData')}(${subjectRowData.TrialCode}|${rowData.SubjectCode}|${TrialReadingCriterionName})`"
      custom-class="base-dialog-wrapper"
    >
      <div class="base-dialog-body">
        <div v-if="!IsHaveTableQuestion">
          <div v-for="item of beConfirmList" :key="item.ClinicalDataSetName">
            <el-divider content-position="left">{{ item.ClinicalDataSetName }}</el-divider>
            <el-table
              v-loading="listLoading"
              :data="item.AnswerList"
              :show-header="true"
              @sort-change="handleSortByColumn"
            >
              <el-table-column
                v-for="ite of item.QuestionList"
                :key="ite.Id"
                :prop="ite.Id"
                :label="ite.QuestionName"
                show-overflow-tooltip
                width="120"
              />
            </el-table>
          </div>
        </div>
        <div v-else class="preview-wrapper">
          <div class="left-wrapper">
            <div v-if="cdList.length>0" class="basic-content">
              <div v-for="item in cdList" :key="item.Id" class="cd-wrapper">
                <div class="cd-name-wrapper">{{ item.ClinicalDataSetName }}</div>
                  <div
                    v-for="date in item.DateList"
                    :key="date.Id"
                    class="cd-item"
                    :class="{activeBtn:date.ClinicalFormId === selected.ClinicalFormId}"
                    @click="selectCheckDate(date)"
                  >
                    {{ date.CheckDate.split(' ')[0] }}
                  </div>
              </div>
            </div>
          </div>
          <div class="right-wrapper">
            <clinicalDataQuestions
              v-if="isShow"
              :data="selected"
              :trial-clinical-id="selected.ClinicalDataTrialSetId"
              :is-viewer="false"
              :visit-id="selected.VisitId"
              :subject-id="selected.SubjectId"
              :trial-id="selected.TrialId"
              :reading-id="selected.ReadingId"
              :clinical-form-id="selected.ClinicalFormId"
              :open-type="'look'"
              @close=""
            />
          </div>
        </div>
      </div>
      <div class="base-dialog-footer" v-if="confirmType !== 'look'" style="text-align:right;margin-top:10px;">
        <!-- 取消 -->
        <el-button
          size="small"
          type="primary"
          @click="confirmVisible = false"
        >
          {{ $t('common:button:cancel') }}
        </el-button>
        <!-- 保存 -->
        <el-button size="small" type="primary" @click="signConfirmClinicalData">
          {{ confirmType === 'confirm' ? $t('common:button:confirm') : $t('trials:workbench:title:WithdrawalApplication') }}
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-if="preview.visible"
      :visible.sync="preview.visible"
      :close-on-click-modal="false"
      :title="preview.title"
      width="80%"
    >
      <clinicalDataQuestions
        :data="rowData"
        :trial-clinical-id="rowData.ClinicalDataTrialSetId"
        :clinical-data-level="rowData.ClinicalDataLevel"
        :is-viewer="false"
        :visit-id="rowData.VisitId"
        :subject-id="rowData.SubjectId"
        :trial-id="rowData.TrialId"
        :reading-id="rowData.ReadingId"
        :clinical-form-id="rowData.ClinicalFormId"
        :subject-visit-id="rowData.BaseLineVisitId"
        :reading-clinical-data-id="ReadingClinicalDataId"
        :open-type="openType"
        :clinical-upload-type="clinicalUploadType"
        @close="preview.visible = false;handleUpload(subjectRowData);handleView(formRow, true)"
      />
    </el-dialog>
    <el-dialog
      v-if="preview2.visible"
      :visible.sync="preview2.visible"
      :close-on-click-modal="false"
      :title="preview2.title"
      width="80%"
    >
      <el-table
        v-loading="listLoading"
        :data="AnswerList"
        :show-header="true"
        @sort-change="handleSortByColumn"
      >
        <el-table-column
          v-for="item of QuestionList"
          :key="item.Id"
          :prop="item.Id"
          :label="item.QuestionName"
          show-overflow-tooltip
          min-width="120"
        />
        <el-table-column
          :label="$t('common:action:action')"
          width="150"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              icon="el-icon-view"
              circle
              size="mini"
              :title="$t('trials:enrolledReviews:button:view')"
              @click="handleView2(scope.row)"
            />
            <el-button
              icon="el-icon-edit-outline"
              circle
              size="mini"
              :title="$t('common:button:edit')"
              @click="handleEdit2(scope.row)"
            />
            <el-button
              icon="el-icon-delete"
              circle
              size="mini"
              :title="$t('common:button:delete')"
              @click="handleDelete2(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      v-if="signVisible"
      :visible.sync="signVisible"
      :close-on-click-modal="false"
      width="600px"
      append-to-body
      custom-class="base-dialog-wrapper"
    >
      <div slot="title">
        <span style="font-size:18px;">{{ $t('common:dialogTitle:sign') }}</span>
        <span style="font-size:12px;margin-left:5px">{{ `(${$t('common:label:sign')}${ currentUser })` }}</span>
      </div>
      <SignForm ref="signForm" :sign-code-enum="signCode" @closeDialog="closeSignDialog" />
    </el-dialog>
  </div>
</template>
<script>
import { getImageClinicalDataToBeDoneList, getTrialCriterionList, getCRCSubjectClinicalList, deleteClinicalForm, getCRCConfirmList, getCRCBeConfirmList, cRCConfirmClinical, cRCCancelConfirmClinical, getClinicalTableList, getClinicalDateList } from '@/api/trials'
import { getClinicalQuestionFormList } from '@/api/dictionary'
import Pagination from '@/components/Pagination'
import clinicalDataQuestions from '@/components/clinicalDataQuestions'

import SignForm from '@/views/trials/components/newSignForm'
import const_ from '@/const/sign-code'
import BaseContainer from '@/components/BaseContainer'

const searchDataDefault = () => {
  return {
    pageIndex: 1,
    pageSize: 20,
    asc: true,
    sortField: ''
  }
}
const searchDataDefault2 = () => {
  return {
    SubjectCode: null
  }
}
export default {
  name: 'NeedSignDoc',
  components: { Pagination, clinicalDataQuestions, SignForm, BaseContainer },
  props: {
    trialIdList: {
      type: Array,
      default() { return [] }
    },
    isSignSystemDoc: {
      type: Boolean,
      default() { return false }
    }
  },
  data() {
    return {
      formRow: {},
      signVisible: false,
      signCode: null,
      currentUser: zzSessionStorage.getItem('userName'),
      ReadingClinicalDataId: null,
      clinicalUploadType: null,
      isShow: false,
      selected: {
      },
      listLoading: false,
      configVisible: false,
      list: [],
      searchData: searchDataDefault2(),
      listQuery: searchDataDefault(),
      total: 0,
      clinicalData: [],
      rowData: {},
      rowData2: {},
      spanArr: [],
      QuestionList: [],
      AnswerList: [],
      pos: 0,
      pos2: 0,
      spanArr2: 0,
      confirmData: [],
      preview: { visible: false, title: this.$t('trials:workbench:title:ClinicalDataCustomQuestions') },
      preview2: { visible: false, title: this.$t('trials:workbench:title:ClinicalDataUploaded') },
      openType: 'look',
      formListData: {},
      confirmVisible: false,
      subjectRowData: {},
      beConfirmList: [],
      cdList: [],
      trialCriterionList: [],
      TrialReadingCriterionId: '0',
      confirmType: 'look',
      confirmPageTotal: 0,
      clinicalPageTotal: 0,
      clinicalPage: {
        PageIndex: 1,
        PageSize: 20
      },
      confirmPage: {
        PageIndex: 1,
        PageSize: 20
      },
      TrialReadingCriterionName: null
    }
  },
  watch: {
    configVisible(v) {
      if (!v) {
        this.TrialReadingCriterionId = '0'
      }
    },
    TrialReadingCriterionId(v) {
      if (v === '0') return
      this.TrialReadingCriterionName = this.trialCriterionList.find(o => v === o.TrialReadingCriterionId).TrialReadingCriterionName
      this.handleUpload2(this.subjectRowData)
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleUploadReset() {
      this.searchData = searchDataDefault2()
      this.handleUpload(this.subjectRowData)
    },
    selectCheckDate(date) {
      this.isShow = false
      this.selected.ClinicalFormId = date.ClinicalFormId
      this.selected.ClinicalDataTrialSetId = date.ClinicalDataTrialSetId
      this.selected.TrialId = this.subjectRowData.TrialId
      this.selected.SubjectId = this.subjectRowData.SubjectId
      this.$nextTick(() => {
        this.isShow = true
      })
    },
    getTrialCriterionList(row) {
      this.TrialReadingCriterionId = '0'
      getTrialCriterionList(row.TrialId, false).then(async res => {
        this.trialCriterionList = res.Result
        this.TrialReadingCriterionId = this.trialCriterionList[0].TrialReadingCriterionId
        // this.handleUpload2(this.subjectRowData)
      }).catch(() => {
      })
    },
    closeSignDialog(isSign, signInfo) {
      if (isSign) {
        this.confirmClinicalData(signInfo)
      } else {
        this.signVisible = false
        this.$refs['signForm'].btnLoading = false
      }
    },
    signConfirmClinicalData () {
      const { CDQualityConfirmation } = const_.processSignature
      this.signCode = CDQualityConfirmation
      this.signVisible = true
    },
    confirmClinicalData(signInfo) {
      signInfo.TrialId = this.subjectRowData.TrialId
      if (this.confirmType === 'confirm') {
        cRCConfirmClinical({
          data: {
            TrialId: this.subjectRowData.TrialId,
            SubjectId: this.rowData.SubjectId,
            ReadModuleId: this.rowData.ReadModuleId,
          },
          signInfo: signInfo
        }).then(res => {
          this.$message.success(this.$t('trials:workbench:message:msg6'))
          this.handleUpload2(this.subjectRowData)
          this.confirmVisible = false
          this.signVisible = false
          this.$refs['signForm'].btnLoading = false
        }).catch(() => {
          this.$refs['signForm'].btnLoading = false
        })
      } else {
        cRCCancelConfirmClinical(
          {
            data: {
              TrialId: this.subjectRowData.TrialId,
              ReadModuleId: this.rowData.ReadModuleId,
            },
            signInfo: signInfo
        }).then(res => {
          this.$message.success(this.$t('trials:workbench:message:msg7'))
          this.handleUpload2(this.subjectRowData)
          this.confirmVisible = false
          this.signVisible = false
          this.$refs['signForm'].btnLoading = false
        }).catch(() => {
          this.$refs['signForm'].btnLoading = false
        })
      }
    },
    handleUnConfirm(row) {
      this.rowData = {...row}
      this.$confirm(this.$t('trials:workbench:message:msg3')).then(res => {
        cRCCancelConfirmClinical({
          TrialId: this.subjectRowData.TrialId,
          ReadModuleId: this.rowData.ReadModuleId,
        }).then(res => {
          this.$message.success(this.$t('trials:workbench:message:msg4'))
          this.handleUpload2(this.subjectRowData)
        })
      })
    },
    getCRCBeConfirmList(row, type) {
      this.rowData = {...row}
      this.confirmVisible = true
      this.confirmType = type
      this.IsHaveTableQuestion = this.rowData.IsHaveTableQuestion
      if (!this.rowData.IsHaveTableQuestion) {
        getClinicalTableList({
          TrialId: this.subjectRowData.TrialId,
          ReadModuleId: row.ReadModuleId
        }).then(res => {
          this.beConfirmList = res.Result
        })
      } else {
        getClinicalDateList({
          TrialId: this.subjectRowData.TrialId,
          ReadModuleId: row.ReadModuleId
        }).then(res => {
          this.cdList = res.Result
          this.selected.ClinicalFormId = this.cdList[0].DateList[0].ClinicalFormId
          this.selected.ClinicalDataTrialSetId = this.cdList[0].DateList[0].ClinicalDataTrialSetId
          this.selected.TrialId = this.subjectRowData.TrialId
          this.selected.SubjectId = this.subjectRowData.SubjectId
          this.isShow = true
          console.log(res)
        })
      }
    },
    handleView2(row) {
      console.log(row)
      this.rowData = {...row}
      this.openType = 'look'
      this.preview.visible = true
    },
    handleEdit2(row) {
      this.rowData = {...row}
      this.openType = 'edit'
      this.preview.visible = true
    },
    handleDelete2(row) {
      this.$confirm(this.$t('trials:workbench:message:msg5')).then(() => {
        this.listLoading = true
        deleteClinicalForm({
          ClinicalFormId: row.ClinicalFormId
        }).then(res => {
          this.$message.success(this.$t('common:message:deletedSuccessfully'))
          this.listLoading = false
          this.handleView(row)
        }).catch(() => {
          this.listLoading = false
        })
      })
    },
    handleAdd(row) {
      this.rowData = {...row}
      this.formRow = {...row}
      this.clinicalUploadType = this.rowData.ClinicalUploadType
      this.ReadingClinicalDataId = this.rowData.ReadingClinicalDataId
      this.preview.visible = true
      this.preview.title = `${this.$t('trials:workbench:title:EnterClinicalData')}(${this.subjectRowData.TrialCode}|${this.rowData.SubjectCode})`
      this.openType = 'add'
    },
    goVisit(row) {
      this.$router.push({path: `/trials/trials-panel/visit/crc-upload?trialId=${row.TrialId}&trialCode=${row.TrialCode}&researchProgramNo=${row.ResearchProgramNo}`})
    },
    handleView(row, isOpen) {
      this.rowData = {...row}
      this.formRow = {...row}
      this.clinicalUploadType = this.rowData.ClinicalUploadType
      this.listLoading = true
      getClinicalQuestionFormList({
        TrialId: row.TrialId,
        SubjectId: row.SubjectId,
        ClinicalDataTrialSetId: row.ClinicalDataTrialSetId
      }).then(res => {
        if (!isOpen) {
          this.preview2.visible = true
          this.preview2.title = `${this.$t('trials:workbench:title:ClinicalDataUploaded')}(${this.subjectRowData.TrialCode}|${this.rowData.SubjectCode})`
        }
        this.listLoading = false
        this.QuestionList = res.Result.QuestionList
        this.AnswerList = res.Result.AnswerList
      })
    },
    getSpanArr(data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].SubjectId === data[i - 1].SubjectId) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
    },
    getSpanArr2(data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr2.push(1)
          this.pos2 = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].SubjectId === data[i - 1].SubjectId) {
            this.spanArr2[this.pos2] += 1
            this.spanArr2.push(0)
          } else {
            this.spanArr2.push(1)
            this.pos2 = i
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    getList() {
      this.listLoading = true
      getImageClinicalDataToBeDoneList(this.listQuery).then(res => {
        this.listLoading = false
        this.total = res.Result.TotalCount
        this.list = res.Result.CurrentPageData
      }).catch(() => { this.listLoading = false })
    },
    handleUpload2(row) {
      this.listLoading = true
      this.rowData = {...row}
      getCRCConfirmList({
        TrialId: row.TrialId,
        IsPMConfirm: false,
        TrialReadingCriterionId: this.TrialReadingCriterionId,
        PageIndex: this.confirmPage.PageIndex,
        PageSize: this.confirmPage.PageSize
      }).then(res => {
        this.spanArr2 = []
        this.pos2 = 0
        this.configVisible = true
        this.confirmData = res.Result.CurrentPageData
        this.confirmPageTotal = res.Result.TotalCount
        this.getSpanArr2(this.confirmData)
        this.listLoading = false
      })
    },
    handleUpload(row) {
      this.listLoading = true
      this.rowData = {...row}
      this.subjectRowData = {...row}
      getCRCSubjectClinicalList({
        TrialId: row.TrialId,
        SubjectCode: this.searchData.SubjectCode,
        PageIndex: this.clinicalPage.PageIndex,
        PageSize: this.clinicalPage.PageSize
      }).then(res => {
        this.spanArr = []
        this.pos = 0
        this.configVisible = true
        this.clinicalData = res.Result.CurrentPageData
        this.clinicalPageTotal = res.Result.TotalCount
        this.getSpanArr(this.clinicalData)
        this.listLoading = false
        this.getTrialCriterionList(row)
      })
    },
    handleReset() {
      this.listQuery = searchDataDefault()
      this.getList()
      this.$nextTick(() => {
        this.$refs.needSignDocList.clearSort()
      })
    },
    // 排序
    handleSortByColumn(column) {
      if (column.order === 'ascending') {
        this.listQuery.asc = true
      } else {
        this.listQuery.asc = false
      }
      this.listQuery.sortField = column.prop
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper{
  height: 100%;
}
/deep/ .el-table__fixed-right{
  height: 100%!important;
}
</style>
<style lang="scss">
.preview-wrapper{
  display: flex;
  flex-direction: row !important;
  width: 100%;
  height: 100%;
  padding: 5px;
  overflow: hidden;
  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d0d0d0;
  }
  .left-wrapper{
    box-sizing: border-box;
    margin-right: 10px;
    height: 100%;
    width: 300px;
    border: 1px solid #ddd;

    .basic-info{
      height: 50px;
      line-height: 40px;
      padding: 5px 10px;
      font-size: 20px;
      font-weight: bold;
      background-color: #4e4e4e;
      color: #fbfbfb;
    }
    .activeBtn{
      color: #428bca;
      border-color: #428bca;
    }
    .basic-content{
      height: 100%;
      overflow: auto;
    }
    .basic-content-empty{
      padding: 5px;
      font-size: 16px;
    }
    .cd-wrapper{
      padding: 5px;

    }
    .cd-name-wrapper{
      height: 40px;
      line-height: 40px;
      padding-left: 5px;
      font-size: 15px;
      font-weight: bold;
      background-color: #eee;
    }
    .cd-item{
      box-sizing: border-box;
      border-bottom: 2px solid #f3f3f3;
      height: 50px;
      line-height: 50px;
      cursor: pointer;
      padding-left: 5px;
    }
  }
  .right-wrapper{
    flex: 1;
    height: 100%;
    border: 1px solid #ddd;
    padding: 10px;
  }
  .right-content{
    height:100%;
  }

}
</style>
