<template>
  <el-row :gutter="20" class="app-container">
    <el-col :span="10">
      <!--患者信息卡片-->
      <el-card style="margin-bottom: 20px">
        <div slot="header">
          <span>患者信息</span>
        </div>
        <el-row class="userInfo">
          <el-row :gutter="20" style="margin-bottom: 10px">
            <el-col :span="8">
              <span class="userInfo-tag">患者姓名:</span>{{ patientInfo.patientName }}
            </el-col>
            <el-col :span="8">
              <span class="userInfo-tag">性别:</span>{{ getDictLabel(genderOptions, patientInfo.gender) }}
            </el-col>
            <el-col :span="8">
              <span class="userInfo-tag">年龄:</span>{{ patientInfo.age }}
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <span class="userInfo-tag">病人类型:</span>{{ patientInfo.visitName }}病人
            </el-col>
            <el-col :span="8">
              <span class="userInfo-tag">病人标识:</span>{{ patientInfo.patientId }}
            </el-col>
            <el-col :span="8">
              <span class="userInfo-tag">电话号码:</span>{{ patientInfo.phone }}
            </el-col>
          </el-row>
          <!--<el-row :gutter="20">
            <el-col :span="18">
              <span class="userInfo-tag">是否加急:</span>
              <el-radio-group :value="patientInfo.isUrgent">
                <el-radio disabled :label="0">普通</el-radio>
                <el-radio disabled :label="1">急诊</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>-->
        </el-row>
      </el-card>
      <!--申请单表格卡片-->
      <el-card style="margin-bottom: 20px">
        <div slot="header">
          <span>检查项目信息</span>
        </div>
        <el-table ref="examTable" v-loading="examLoading" :cell-class-name="cellClassName"
                  :data="examList"
                  height="340px" highlight-current-row @current-change="currentChange"
        >
          <el-table-column :label="''" align="center" prop="index" width="40"/>
          <el-table-column align="center" label="预约序号" prop="reservationNum"/>
          <el-table-column align="center" label="项目名称" prop="outExamItemName"/>
          <el-table-column align="center" label="预约院区" prop="yardName"/>
          <el-table-column :formatter="isPayFormat" align="center" label="缴费状态" prop="isPay"/>
          <el-table-column :formatter="applyStateFormat" align="center" label="预约状态" prop="applyState"/>
          <el-table-column :formatter="reservationDateFormat" align="center" label="预约时间段" prop="reservationDate"/>
          <el-table-column align="center" label="申请单号" prop="applyNum"/>
        </el-table>
      </el-card>
      <!--当前选中项目栏-->
      <el-card v-loading="examLoading">
        <el-tabs :value="checkExamItem.id" type="border-card" @tab-click="tabClick">
          <el-tab-pane v-for="item in examList" :key="item.id" :label="'项目'+item.index" :name="item.id+''">
            <el-row class="userInfo">
              <el-row style="margin-bottom: 10px">
                <el-col :span="8">
                  <span class="userInfo-tag">申请单号:</span>{{ item.applyNum }}
                </el-col>
                <el-col :span="8">
                  <span class="userInfo-tag">预约序号:</span>{{ item.reservationNum }}
                </el-col>
              </el-row>
              <el-row style="margin-bottom: 10px">
                <el-col :span="8">
                  <span class="userInfo-tag">申请科室:</span>{{ item.applyDeptName }}
                </el-col>
                <el-col :span="16">
                  <span class="userInfo-tag">申请院区:</span>{{ item.yardName }}
                </el-col>
              </el-row>
              <el-row style="margin-bottom: 10px">
                <el-col :span="8">
                  <span class="userInfo-tag">检查科室:</span>{{ item.examDeptName }}
                </el-col>
                <el-col :span="8">
                  <span class="userInfo-tag">检查类别:</span>{{ item.examName }}
                </el-col>
                <el-col :span="8">
                  <span class="userInfo-tag">申请状态:</span>{{ applyStateFormat(item) }}
                </el-col>
              </el-row>
              <el-row style="margin-bottom: 10px">
                <el-col :span="8">
                  <span class="userInfo-tag">预约日期:</span>{{ item.reservationDate }}
                </el-col>
                <el-col :span="8">
                  <span class="userInfo-tag">预约时段:</span>{{ item.reservationTimeSlot }}
                </el-col>
              </el-row>
              <el-row style="margin-bottom: 10px">
                <el-col>
                  <span class="userInfo-tag">外部项目:</span>{{ item.outExamItemName }}
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <span class="userInfo-tag">内部项目:</span>{{ item.inExamItemName }}
                </el-col>
              </el-row>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
    <el-col :span="14">
      <el-row>
        <!--日历选号-->
        <el-calendar class="calendar">
          <template slot="dateCell" slot-scope="{date, data}">
            <div :class="hasInnerSevenDay(data.day)?'':'calendarBox-disabled'"
                 :style="{backgroundColor:checkCalendar === data.day?'#F2F8FE':''}"
                 class="calendarBox" @click="calendarClick(data,date)"
            >
              <el-row>
                <span :style="{color: checkCalendar === data.day ? '#1890ff':'#000000'}">
                    {{ formatDate(new Date) === data.day ? '今' : data.day.substring(8, 10) }}
                </span>
                <span v-if="checkExamItem.reservationDate === data.day && [1,2,6].includes(checkExamItem.applyState)"
                      style="color: #f39f04"
                >
                  已约
                </span>
              </el-row>
              <el-row>
                <div style="display: flex">
                  <span v-for="item in getSourceTag(data.day)" :key="item.examTypeId"
                        :class="item.hasSource?'':'has-source-tag'" class="source-tag"
                  >
                   {{ item.examName.substring(0, 2) }}
                  </span>
                </div>
              </el-row>
              <div v-if="data.day === checkSource.examDate" class="checkTag">✔</div>
              <div v-if="data.day === checkSource.examDate" class="checkTagColor"></div>
            </div>
          </template>
        </el-calendar>
      </el-row>
      <el-row>
        <el-row v-for="item in activeSource.source" :key="item.examTypeId" style="margin: 10px 0" type="flex">
          <el-col :span="2" style="display: flex;align-items: center;justify-content: center">
            <span>{{ item.examName }}</span>
          </el-col>
          <el-col :span="22">
            <el-row :gutter="10">
              <el-col v-for="i in item.list" :key="i.id" :span="6">
                <div :class="[isCheckedSource(i)?'':'source-item-disabled',i.id === checkSource.id? 'source-check':'']"
                     class="source-item"
                     @click="clickSource(i,isCheckedSource(i))"
                >
                  {{ i.timeSlot + '  ' }}({{ i.use + '/' + i.total }})
                  <div v-if="i.id+'' === checkExamItem.sourceId+''" class="checkTag" style="color: chocolate"> 已约</div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="buttons">
          <el-button :disabled="buttonDisabled('取消预约')" plain
                     type="success"
                     @click="handleCancel"
          >取消预约
          </el-button>
          <div class="inner-buttons">
            <el-button :disabled="buttonDisabled('预约')" type="success" @click="handleReservation">预约</el-button>
            <el-button :disabled="buttonDisabled('改约')" type="success" @click="handleModify">改约</el-button>
          </div>
        </el-row>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
/*手动预约*/
import { cancelApply, changeApply, getApply, listByManual, stopReservation, updateApply } from '@/api/resource/apply'
import { sourceListByExamType } from '@/api/resource/sourcePool'

export default {
  name: 'manualReservation',
  data() {
    return {
      patientInfo: {      // 患者信息
        patientId: '',    // 患者标识
        visitName: '',    // 患者类型
        patientName: '',  // 患者姓名
        gender: '',       // 患者性别
        age: '',          // 年龄
        phone: ''        // 电话类型
      },
      examList: [], // 检查项目列表
      checkExamItem: {}, // 选中的项目
      examLoading: false, // 项目加载loading,
      checkCalendar: null, // 选中的日历
      sourceList: [], // 今天包括后面七天的号源信息
      applyStateOptions: [], // 申请单状态字典
      genderOptions: [], // 性别字典
      payStateOptions: [], // 支付状态字典
      innerDate: [], // 七天后的日期
      examTypes: [], // 查询出来的所有检查类型
      activeSource: {}, // 当前展示的号源列表
      checkSource: {}, // 当前选中的号源
      handleLoading: false // 操作loading
    }
  },
  methods: {
    // 获取字典label
    getDictLabel(dict = [], value) {
      let obj = dict.find(item => item.dictValue === value + '')
      if (obj) {
        return obj.dictLabel
      }
      return value
    },
    // 是否交费字典翻译
    isPayFormat(row) {
      return this.getDictLabel(this.payStateOptions, row.isPay)
    },
    // 申请单状态字典翻译
    applyStateFormat(row, column) {
      return this.getDictLabel(this.applyStateOptions, row.applyState)
    },
    // 时间段合并
    reservationDateFormat(row) {
      return row.reservationDate + ' ' + row.reservationTimeSlot
    },
    tabClick(tab) {
      let item = this.examList.find(item => item.id + '' === tab.name + '')
      if (item) {
        this.checkExamItem = item
        this.$refs.examTable.setCurrentRow(item)
        this.checkSource = {}
      }
    },
    // 表格行选中切换
    currentChange(currentRow) {
      this.checkExamItem = currentRow
      this.checkSource = {}
    },
    // 给行列加索引
    cellClassName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex + 1
      column.index = columnIndex
    },
    // 按钮disabled判断
    buttonDisabled(type) {
      if (!this.checkExamItem || !this.checkExamItem.id) {
        return true
      }
      if (type === '取消预约') {
        return ![1, 6].includes(this.checkExamItem.applyState)
      } else if (type === '预约') {
        if ([0,4].includes(this.checkExamItem.applyState) && this.checkSource && this.checkSource.id
          && this.checkSource.examTypeId === this.checkExamItem.examTypeId) {
          return false
        }
      } else if (type === '改约') {
        if ([1, 6].includes(this.checkExamItem.applyState) && this.checkSource && this.checkSource.id
          && this.checkSource.examTypeId === this.checkExamItem.examTypeId) {
          return false
        }
      }
      return true
    },
    // 选中项目同步
    examItemSync() {
      if (this.checkExamItem.applyState === 0) {
        // 没有预约就选中今天
        this.checkCalendar = this.innerDate[0]
      } else if (this.checkExamItem.applyState === 1 || this.checkExamItem.applyState === 6) {
        // 已经预约就选中预约日期
        // 如果预约日期在当前日期区间中的话
        if (this.innerDate.includes(this.checkExamItem.reservationDate)) {
          this.calendarClick({ day: this.checkExamItem.reservationDate })
        }
      }
    },
    // 日历点击事件
    calendarClick(data, date) {
      if (this.hasInnerSevenDay(data.day)) {
        this.checkCalendar = data.day
        let source = this.sourceList.find(item => item.day === data.day)
        if (source) {
          source.source.forEach(item => {
            item.list = item.list.map(i => this.sourceFormat(i))
          })
        } else {
          source = {}
        }
        this.activeSource = source
      }
    },
    // 取消预约
    handleCancel() {
      const _this = this
      this.$confirm(`确认是否取消预约?`, '取消预约', {
        beforeClose: function(action, instance, done) {
          if (action === 'confirm') {
            cancelApply({
              id: _this.checkExamItem.id,
              applyNum: _this.checkExamItem.applyNum,
              outExamItemName: _this.checkExamItem.outExamItemName,
              reservationDate: _this.checkExamItem.reservationDate,
              reservationTimeSlot: _this.checkExamItem.reservationTimeSlot
            })
              .then(res => {
                if (res.code === 200) {
                  this.$message.success('取消预约成功')
                  // 修改原来的数据
                  _this.checkExamItem.applyState = 4
                  _this.checkSource = {}
                  // 刷新号源
                  _this.initSourceList(_this.examTypes)
                }
              }).finally(_ => {
              done()
            })
          } else {
            done()
          }
        }
      })
    },
    // 改约
    handleModify() {
      const _this = this
      this.$confirm(`确认是否改约?`, '改约', {
        beforeClose: function(action, instance, done) {
          if (action === 'confirm') {
            let updateModel = {
              useReservationDate: _this.checkExamItem.reservationDate, // 已预约的号源日期
              useReservationTime: _this.checkExamItem.reservationTimeSlot, // 已使用的号源时间段
              isEmpty: _this.checkExamItem.isEmpty, // 是否空腹
              visitTypeId: _this.checkExamItem.visitTypeId, // 就诊类型
              queueId: _this.checkSource.queueId,  // 队列ID
              positionCount: _this.checkExamItem.positionCount, // 部位数
              reservationDate: _this.checkSource.examDate, // 改约日期
              reservationTimeSlot: _this.checkSource.timeSlot,  // 改约日期时间段
              id: _this.checkExamItem.id,  // 申请单ID
              sourceId: _this.checkSource.id,  // 号源ID,
              timeFrame: _this.checkSource.timeFrame
            }
            instance.confirmButtonLoading = true
            changeApply({
              ...updateModel,
              applyNum: _this.checkExamItem.applyNum,
              outExamItemName: _this.checkExamItem.outExamItemName,
              primaryDate: _this.checkExamItem.reservationDate + ' ' + _this.checkExamItem.reservationTimeSlot
            }).then(res => {
              if (res.code === 200) {
                this.$message.success('改约成功')
                // 修改原来的数据
                getApply(_this.checkExamItem.id).then(res => {
                  _this.checkExamItem = { ..._this.checkExamItem, ...updateModel }
                  _this.examList[_this.checkExamItem.index - 1].sourceId = _this.checkSource.id
                  _this.examList[_this.checkExamItem.index - 1].reservationDate = _this.checkSource.examDate
                  _this.examList[_this.checkExamItem.index - 1].reservationTimeSlot = _this.checkSource.timeSlot
                  _this.examList[_this.checkExamItem.index - 1].reservationNum = res.data.reservationNum
                  _this.checkSource = {}
                  // 刷新号源
                  _this.initSourceList(_this.examTypes)
                })
              }
            }).finally(_ => {
              instance.confirmButtonLoading = false
              done()
            })
          } else {
            done()
          }
        }
      })
    },
    // 预约
    handleReservation() {
      const _this = this
      this.$confirm(`确认是否预约?`, '预约', {
        beforeClose: function(action, instance, done) {
          if (action === 'confirm') {
            let updateModel = {
              isEmpty: _this.checkExamItem.isEmpty, // 是否空腹
              visitTypeId: _this.checkExamItem.visitTypeId, // 就诊类型
              queueId: _this.checkSource.queueId,  // 队列ID
              positionCount: _this.checkExamItem.positionCount, // 部位数
              reservationDate: _this.checkSource.examDate, // 改约日期
              reservationTimeSlot: _this.checkSource.timeSlot,  // 改约日期时间段
              id: _this.checkExamItem.id,  // 申请单ID
              sourceId: _this.checkSource.id,  // 号源ID,
              timeFrame: _this.checkSource.timeFrame
            }
            instance.confirmButtonLoading = true
            updateApply({
              ...updateModel,
              applyNum: _this.checkExamItem.applyNum,
              outExamItemName: _this.checkExamItem.outExamItemName
            }).then(res => {
              if (res.code === 200) {
                this.$message.success('预约成功')
                // 修改原来的数据
                getApply(_this.checkExamItem.id).then(res => {
                  _this.checkExamItem = {
                    ..._this.checkExamItem, ...updateModel,
                    reservationNum: res.data.reservationNum,
                    applyState: 1
                  }
                  _this.examList[_this.checkExamItem.index - 1].sourceId = _this.checkSource.id
                  _this.examList[_this.checkExamItem.index - 1].reservationDate = _this.checkSource.examDate
                  _this.examList[_this.checkExamItem.index - 1].reservationTimeSlot = _this.checkSource.timeSlot
                  _this.examList[_this.checkExamItem.index - 1].reservationNum = res.data.reservationNum
                  _this.examList[_this.checkExamItem.index - 1].applyState = 1
                  _this.checkSource = {}
                  // 刷新号源
                  _this.initSourceList(_this.examTypes)
                })
              }
            }).finally(_ => {
              instance.confirmButtonLoading = false
              done()
            })
          } else {
            done()
          }
        }
      })
    },
    // 号源是否可选择
    isCheckedSource(source) {
      if (source.use >= source.total) {
        return false
      }
      const now = new Date()
      const nowFormat = this.formatDate(now)
      if (nowFormat !== source.examDate) {
        return true
      }
      return new Date(`${nowFormat} ${source.timeSlot.split('-')[1]}`).getTime() - now.getTime() > 0
    },
    // 号源选中
    clickSource(source, flag) {
      if (flag) {
        this.checkSource = source
      }
    },
    // 是否是七天内的日期
    hasInnerSevenDay(day) {
      return this.innerDate.includes(day)
    },
    // 生成七天内的日期
    generatorSevenDays() {
      let now = new Date()
      let tempList = []
      tempList.push(this.formatDate(now))
      for (let i = 1; i <= 7; i++) {
        now.setDate(now.getDate() + 1)
        tempList.push(this.formatDate(now))
      }
      this.innerDate = tempList
    },
    formatDate(date) {
      let month = '' + (date.getMonth() + 1)
      let day = '' + date.getDate()
      let year = date.getFullYear()
      if (month.length < 2) month = '0' + month
      if (day.length < 2) day = '0' + day
      return [year, month, day].join('-')
    },
    // 初始化查询申请单
    initApplyInfo(applyNum, checkId) {
      this.examLoading = true
      setTimeout(() => {
        this.examLoading = false
      }, 5000)
      listByManual({
        patientId: this.patientInfo.patientId,
        applyNum
      }).then(res => {
        if (res.data && res.data.length > 0) {
          let checkList = []
          let otherList = []
          // 所有包含的检查类型
          let examTypes = []
          // 先将需要选中的拿出来
          res.data.forEach(item => {
            // 获取检查类型list
            if (examTypes.findIndex(i => i.examTypeId === item.examTypeId) === -1) {
              examTypes.push({ examTypeId: item.examTypeId, examName: item.examName })
            }
            // 默认选中项
            if (item.id === checkId) {
              this.checkExamItem = item
              this.$refs.examTable.setCurrentRow(item)
            }
            item.id = item.id + ''
            // 分隔要操作的申请单
            if (item.applyNum === applyNum) {
              checkList.push(item)
            } else {
              otherList.push(item)
            }
          })
          otherList = this.groupBy(otherList, 'applyNum')
          this.examList = [...checkList, ...otherList]
          this.examTypes = examTypes
          this.$nextTick(() => {
            this.initSourceList(examTypes)
          })
        }
      }).finally(_ => {
        this.examLoading = false
      })
    },
    // 初始化号源列表,只保存需要的队列号源信息
    // sourceList:[ { day: yyyy-MM-dd , source:[{ examTypeId,examName,queueId,list:[] } ]} ]
    initSourceList(examTypes = []) {
      sourceListByExamType({
        examTypes: examTypes.map(item => item.examTypeId).join(','),
        startExamDate: this.innerDate[0],
        endExamDate: this.innerDate[7]
      }).then(res => {
        let sourceList = []
        if (res.data && res.data.length > 0) {
          res.data.forEach(item => {
            let temp = sourceList.find(i => i.day === item.examDate)
            if (!temp) {
              temp = { day: item.examDate, source: [] }
              sourceList.push(temp)
            }
            let tempSource = temp.source.find(s => s.examTypeId === item.examTypeId)
            if (!tempSource) {
              tempSource = {
                examTypeId: item.examTypeId,
                examName: examTypes.find(e => e.examTypeId === item.examTypeId).examName,
                queueId: item.queueId, list: []
              }
              temp.source.push(tempSource)
            }
            tempSource.list.push(item)
          })
          sourceList.forEach(item => {
            // 排序
            item.source.forEach(i => {
              i.list.sort((x, y) => {
                return new Date(`2022-01-01 ${x.timeSlot.split('-')[0]}`).getTime() - new Date(`2022-01-01 ${y.timeSlot.split('-')[0]}`).getTime()
              })
            })
          })
          this.sourceList = sourceList

          this.$nextTick(() => {
            this.examItemSync()
          })
        }
      })
    },
    // 号源format
    sourceFormat(item) {
      const source = { ...item }
      if (this.checkExamItem.visitName === '住院') {
        source.use = item.inSourceCount
        source.total = item.inNumSourceCount
      } else if (this.checkExamItem.visitName === '门诊') {
        source.use = item.outSourceCount
        source.total = item.outNumSourceCount
      } else {
        source.use = item.phySourceCount
        source.total = item.phyNumSourceCount
      }
      return source
    },
    // 返回某天拥有的号源
    getSourceTag(day) {
      const source = this.sourceList.find(item => item.day === day)
      const list = []
      if (source) {
        source.source.forEach(item => {
          let temp = {
            examTypeId: item.examTypeId,
            examName: item.examName,
            queueId: item.queueId,
            hasSource: false
          }
          for (let i = 0; i < item.list.length; i++) {
            if (this.checkExamItem.visitName === '住院') {
              if (parseInt(item.list[i].inNumSourceCount) > parseInt(item.list[i].inSourceCount)) {
                temp.hasSource = true
                break
              }
            } else if (this.checkExamItem.visitName === '门诊') {
              if (parseInt(item.list[i].outNumSourceCount) > parseInt(item.list[i].outSourceCount)) {
                temp.hasSource = true
                break
              }
            } else {
              if (parseInt(item.list[i].phyNumSourceCount) > parseInt(item.list[i].phySourceCount)) {
                temp.hasSource = true
                break
              }
            }
          }
          list.push(temp)
        })
      }
      return list
    },
    // 数组分组
    groupBy(arr = [], field) {
      let tempList = []
      arr.forEach(item => {
        const temp = tempList.find(f => f.key === item[field])
        if (temp) {
          temp.data.push(item)
        } else {
          tempList.push({
            key: item[field],
            data: [item]
          })
        }
      })
      let list = []
      tempList.forEach(item => {
        item.data.forEach(item => {
          list.push(item)
        })
      })
      return list
    }
  },
  created() {
    this.generatorSevenDays()
    this.getDicts('apply_status').then((response) => {
      this.applyStateOptions = response.data
    })
    this.getDicts('sys_user_sex').then((response) => {
      this.genderOptions = response.data
    })
    this.getDicts('pay_status').then((response) => {
      this.payStateOptions = response.data
    })
    const sourceType = this.$store.getters.fromRouter
    const patientInfo = this.$store.getters.patientInfo
    const applyInfo = this.$store.getters.applyInfo
    if (sourceType === 1) { // 预约管理跳转过来的
      this.patientInfo = {
        patientId: applyInfo.patientId, visitName: applyInfo.visitName, patientName: applyInfo.patientName,
        gender: applyInfo.gender, age: applyInfo.age, phone: applyInfo.phone
      }
      this.$nextTick(() => {
        this.initApplyInfo(applyInfo.applyNum, applyInfo.id)
      })
    } else {
      this.$router.replace('/tranDetail/apply')
    }
  }
}
</script>

<style lang="scss" scoped>
.userInfo {
  font-size: 14px;
  font-weight: bold;

  .userInfo-tag {
    color: silver;
    margin-right: 10px;
    font-weight: 400;
    width: 60px;
    display: inline-block;
    text-align: right;
  }
}

.calendar {

  ::v-deep .el-calendar-day {
    cursor: default;
  }

  ::v-deep .is-selected {
    background-color: #ffffff;
  }

  ::v-deep .el-calendar-day {
    padding: 0px;
    height: 50px;
  }

  ::v-deep .el-calendar-day:hover {
    background-color: #ffffff;
  }

  .checkTagColor {
    width: 0;
    height: 0;
    border-bottom: 30px solid rgb(243, 159, 4);
    border-left: 30px solid transparent;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 9;
  }

  .checkTag {
    position: absolute;
    bottom: 2px;
    right: 2px;
    color: #fff;
    font-size: 14px;
    z-index: 100;
  }

  .calendarBox {
    cursor: pointer;
    width: 100%;
    height: 100%;
    padding: 0 5px 0 5px;
    position: relative;
  }

  .calendarBox:hover {
    background-color: #F2F8FE;
  }

  .calendarBox-disabled {
    cursor: not-allowed;
    //pointer-events: none;
    background-color: #ededed;
  }

  .calendarBox-disabled:hover {
    background-color: #ededed;
  }

  .source-tag {
    font-size: 15px;
    height: 30px;
    width: 30px;
    background: #10ddb1;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2px;
  }

  .has-source-tag {
    background-color: #b1a7a7;
  }

}

.source-item {
  border: 1px #10ddb1 solid;
  color: #10ddb1;
  border-radius: 10px;
  margin: 4px 0;
  height: 30px;
  display: flex;
  align-items: center;
  font-size: 20px;
  justify-content: center;
  cursor: pointer;
}

.source-item:hover {
  background-color: #10ddb1;
  color: #ffffff;
}

.source-check {
  background-color: #ecab00 !important;
  color: #ffffff !important;
  border: none !important;
}

.source-item-disabled:hover {
  background-color: #ededed;
  color: #b1a7a7;
}

.source-item-disabled {
  background-color: #ededed;
  border: none;
  cursor: not-allowed;
  color: #b1a7a7;
}

.buttons {
  height: 70px;
  display: flex;
  align-items: center;
  padding: 0 30px;

  .inner-buttons {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
  }
}

</style>
