<template>
  <div style="width: 88vw">
    <b-row class="toolbar" style="margin-bottom: 15px">
      <b-button
        class="btn_back"
        style="margin-left: 20px"
        @click="goBack"
      >
        <b-icon icon="arrow-left-circle" scale="0.9" />&nbsp;返回
      </b-button>
    </b-row>
    <b-row style="padding-bottom: 20px; color: black">
      <!--人員資料 -->
      <b-col cols="4">
        <div class="container" style="padding-left: 20px">
          <b-form-group style="margin-top: 15px; margin-bottom: 15px">
            <b-row>
              <b-col cols="3">
                <span style="font-size: 20px; font-weight: bold">人員資料</span>
              </b-col>
              <b-col cols="9">
                <div v-if="this.$route.query.sid === undefined">
                  <b-button
                    class="btn_post"
                    style="margin-left: 10px"
                    @click="addNewStaff"
                  >
                    <b-icon icon="check2-circle" scale="0.9" />&nbsp;新增
                  </b-button>
                </div>
                <div v-if="this.isPermissionFix === true && this.$route.query.sid !== undefined">
                  <b-button
                    @click="isStaffInformationSaved"
                    :disabled="isCreate"
                    class="btn_function_bar"
                    style="margin-left: 10px"
                  >
                    <b-icon icon="save" scale="0.9" />&nbsp;儲存
                  </b-button>
                  <b-button
                    @click="isStaffInformationEditing"
                    :disabled="isSave"
                    class="btn_function_bar"
                    style="margin-left: 10px"
                  >
                    <b-icon icon="pencil" scale="0.9" />&nbsp;編輯
                  </b-button>
                </div>
              </b-col>
            </b-row>
          </b-form-group>
          <b-row style="color: black">
            <b-col cols="12">
              <b-form-group
                label-cols-sm="3"
                label-align-sm="left"
                style="padding-left: 20px; margin-bottom: 12px"
                label="姓名："
                label-for="input-lg"
              >
                <b-form-input
                  id="input-lg"
                  v-model="selected.name"
                  style="width: 100%"
                  :disabled="isFix"
                ></b-form-input>
              </b-form-group>
              <b-form-group
                label-cols-sm="3"
                label-align-sm="left"
                style="padding-left: 20px; margin-bottom: 12px"
                label="人員編號："
                label-for="input-lg"
              >
                <b-form-input
                  id="input-lg"
                  v-model="selected.staffID"
                  style="width: 100%"
                  :disabled="isFix"
                ></b-form-input>
              </b-form-group>
              <b-form-group
                label-cols-sm="3"
                label-align-sm="left"
                style="padding-left: 20px; margin-bottom: 12px"
                label="單位："
                label-for="input-lg"
              >
                <b-form-input
                  id="input-lg"
                  v-model="selected.unit"
                  style="width: 100%"
                  :disabled="isFix"
                ></b-form-input>
              </b-form-group>
              <!-- SuperUser可看到，156 -->
              <!-- v-show="
                selected._id === undefined ||
                currentUser.projectTitle == 'superuser'
              " -->
              <b-form-group
                label-cols-sm="3"
                label-align-sm="left"
                style="padding-left: 20px; margin-bottom: 12px"
                label="帳號："
                label-for="input-lg"
              >
                <b-form-input
                  id="input-lg"
                  v-model="selected.account"
                  style="width: 100%"
                  :disabled="isFix"
                ></b-form-input>
              </b-form-group>
              <!-- SuperUser可看到，156 -->
              <b-form-group
                label-cols-sm="3"
                label-align-sm="left"
                style="padding-left: 20px; margin-bottom: 12px"
                label="密碼："
                label-for="input-lg"
              >
                <b-form-input
                  id="input-lg"
                  v-model="selected.password"
                  style="width: 100%"
                  :disabled="isFix"
                ></b-form-input>
              </b-form-group>
              <b-form-group
                label-cols-sm="3"
                label-align-sm="left"
                style="padding-left: 20px; margin-bottom: 12px"
                label="所屬標別："
                label-for="input-lg"
              >
                <div v-if="isFix" style="margin-top:8px; margin-left:10px;">
                  <span style="font-size: 14px;">{{ tenderName }}</span>
                </div>
                <div v-else style="margin-top:2px; height:35px;">
                  <multiselect
                    v-model="selected.tender"
                    placeholder="請分派標別"
                    :multiple="true"
                    :taggable="true"
                    :searchable="false"
                    :options="tendersList"
                    :close-on-select="false"
                    :clear-on-select="false"
                    selectLabel="請選擇"
                    selectedLabel="已選擇"
                    deselectLabel="取消選擇"
                    label="tender"
                    track-by="_id"
                  >
                  </multiselect>
                </div>
              </b-form-group>
              <b-form-group
                label-cols-sm="3"
                label-align-sm="left"
                style="padding-left: 20px; margin-bottom: 12px"
                label="電子郵件："
                label-for="input-lg"
              >
                <b-form-input
                  id="input-lg"
                  v-model="selected.email"
                  style="width: 100%"
                  :disabled="isFix"
                ></b-form-input>
              </b-form-group>
              <b-form-group
                label-cols-sm="3"
                label-align-sm="left"
                style="padding-left: 20px; margin-bottom: 12px"
                label="SMTP密碼"
                label-for="input-lg"
              >
                <b-form-input
                  id="input-lg"
                  v-model="selected.emailPass"
                  style="width: 100%"
                  :disabled="isFix"
                ></b-form-input>
              </b-form-group>
              <b-form-group
                label-cols-sm="3"
                label-align-sm="left"
                style="padding-left: 20px; margin-bottom: 12px"
                label="聯絡電話："
                label-for="input-lg"
              >
                <b-form-input
                  id="input-lg"
                  v-model="selected.contactNumber"
                  style="width: 100%"
                  :disabled="isFix"
                ></b-form-input>
              </b-form-group>
              <b-form-group
                label-cols-sm="3"
                label-align-sm="left"
                style="padding-left: 20px; margin-bottom: 12px"
                label="職務代理："
                label-for="input-lg"
              >
                <b-form-select
                  id="input-lg"
                  v-model="selected.substitute"
                  style="padding-left: 10px"
                  :disabled="isFix"
                  :options="
                    staffs.map((staff) => {
                      return { text: staff.name, value: staff._id };
                    })
                  "
                />
              </b-form-group>
              <b-form-group
                label-cols-sm="3"
                label-align-sm="left"
                style="padding-left: 20px; margin-bottom: 12px"
                label="群組:"
                label-for="input-lg"
              >
                <b-form-select
                  style="width: 100%"
                  v-model="selected.group"
                  :options="groupOptions"
                  :disabled="isFix"
                />
              </b-form-group>
              <b-form-group
                label-cols-sm="3"
                label-align-sm="left"
                style="padding-left: 20px; margin-bottom: 3px"
                label="計畫職稱："
                label-for="input-lg"
              >
                <b-form-select
                  id="input-lg"
                  v-model="selected.projectTitle"
                  style="padding-left: 12px; margin-bottom: 12px"
                  :disabled="isFix"
                  :options="projectTitleOptions"
                />
              </b-form-group>
            </b-col>
          </b-row>
        </div>
      </b-col>
      <!-- 標案權限設定 | 權限列表 -->
      <b-col cols="8">
        <div class="container">
          <b-row style="padding:0 20px 20px 20px;">
            <b-col cols="4">
              <b-row>
                <b-form-group
                  style="margin-top: 15px; margin-bottom: 15px; float: left"
                >
                  <span style="font-size: 20px; font-weight: bold">標案權限設定</span>
                </b-form-group>
              </b-row>
              <div>
                <b-row v-if="$route.query.sid === undefined">
                  <b-col cols="12">
                    <div style="height: 65vh; overflow: auto">
                    <b-list-group>
                      <b-list-group-item
                        v-for="(item, index) in tendersList"
                        :key="index"
                        :disabled="isClick"
                        style="font-size: 17px; font-weight: bold; cursor: pointer"
                        class="btn_before_click"
                        size="lg"
                      >
                        <div style="float:left;max-width:100%;word-wrap: break-word">
                          {{ item.tender }}
                        </div>
                      </b-list-group-item>
                    </b-list-group>
                    </div>
                  </b-col>
                </b-row>
                <b-row v-else>
                  <b-col cols="12">
                    <div style="height: 65vh; overflow: auto">
                    <b-list-group>
                      <b-list-group-item
                        v-for="(item, index) in selected.tenderPermissions"
                        :key="index"
                        :disabled="isClick"
                        @click="setSelectedTender(item)"
                        style="font-size: 17px; font-weight: bold; cursor: pointer"
                        class="btn_before_click"
                        :class="{
                          active: selectedTenderId === item.tenderId._id,
                          moduleClick: selectedTenderId === item.tenderId._id,
                        }"
                        size="lg"
                      >
                        <div style="float:left;max-width:100%;word-wrap: break-word">
                          {{ item.tenderId.tender }}
                        </div>
                        <b-form-checkbox
                          v-model="item.isOpen"
                          switch
                          name="check-button"
                          style="float: right"
                          :disabled="isPermissionFix"
                        />
                      </b-list-group-item>
                    </b-list-group>
                    </div>
                  </b-col>
                </b-row>
              </div>
            </b-col>
            <b-col cols="8">
              <b-row>
                <b-col cols="12">
                  <b-form-group
                    style="margin-top: 15px; margin-bottom: 15px; float: left"
                  >
                    <b-row>
                      <span style="font-size: 20px; font-weight: bold">權限列表</span>
                      <span class="mt-1" style="font-size: 16px; font-weight: bold; color: red">
                        *針對人員在各標案之權限設定
                      </span>
                      <div v-if="isFix === true">
                        <b-button
                          @click="isPermissionSaved"
                          :disabled="isPermissionCreate"
                          class="btn_function_bar"
                          style="margin-left: 10px"
                        >
                          <b-icon icon="save" scale="0.9" />&nbsp;儲存
                        </b-button>
                        <b-button
                          @click="isPermissionEditing"
                          :disabled="isPermissionSave"
                          class="btn_function_bar"
                          style="margin-left: 10px"
                        >
                          <b-icon icon="pencil" scale="0.9" />&nbsp;編輯
                        </b-button>
                      </div>
                    </b-row>
                  </b-form-group>
                </b-col>
              </b-row>
              <div
                style="height: 65vh; overflow: auto"
                v-for="(item,index) in permissionsTemplate"
                :key="index"
              >
                <b-card v-for="(header,i) in item.modules" :key="i" class="mb-1">
                  <b-card-header header-tag="header" class="p-1" role="tab">
                    <b-button
                      v-b-toggle="`${i}`"
                      block
                      class="btn_module"
                    >
                      {{ header.title }}
                    </b-button>
                  </b-card-header>
                  <b-collapse :id="`${i}`" role="tabpanel" visible>
                    <b-card-body style="padding-top: 5px; padding-bottom: 0px">
                      <b-table
                        class="select-permission-table"
                        small
                        sticky-header
                        head-variant="light"
                        borderless
                        responsive="sm"
                        ref="permissionSelectableTable"
                        :fields="permissionTableTitle"
                        style="background-color: white"
                        :items="header.functionItem"
                      >
                        <template #head()="{ label }">
                          <span
                            style="
                              font-weight: bold;
                              color: black;
                              font-size: 15px;
                            "
                          >
                            {{ label }}
                          </span>
                        </template>
                        <template #cell(name)="data">
                          <span
                            style="
                              font-weight: normal;
                              color: black;
                              font-size: 15px;
                            "
                          >
                            {{ data.value }}
                          </span>
                        </template>
                        <template #cell(selectPermission)="data">
                          <b-form-radio-group
                            v-if="data.item.permissionType === 0"
                            :options="permissionSelection"
                            style="
                              font-weight: normal;
                              color: black;
                              font-size: 15px;
                            "
                            v-model="data.item.permission"
                            :disabled="isPermissionFix"
                          />
                          <b-form-radio-group
                            v-else-if="data.item.permissionType === 1"
                            :options="permissionSelection2"
                            style="
                              font-weight: normal;
                              color: black;
                              font-size: 15px;
                            "
                            v-model="data.item.permission"
                            :disabled="isPermissionFix"
                          />
                        </template>
                      </b-table>
                    </b-card-body>
                  </b-collapse>
                </b-card>
              </div>
            </b-col>
          </b-row>
        </div>
      </b-col>
    </b-row>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from 'vuex'
import Multiselect from 'vue-multiselect'
import 'vue-multiselect/dist/vue-multiselect.min.css'

export default {
  data () {
    return {
      staffs: [],
      select: [],
      selectedTenderId: '',
      // 人員
      isSave: false,
      isCreate: true,
      isFix: true,
      // 權限
      isPermissionSave: false,
      isPermissionCreate: true,
      isPermissionFix: true,
      // 選擇權限按鈕
      isClick: false,
      group: '',
      projectTitle: '',
      groupOptions: [ // 群組
        { value: '專管單位', text: '專管單位' },
        { value: '監造單位', text: '監造單位' },
        { value: '實施者', text: '實施者' }
      ],
      projectTitleOptions: [ // 計畫職稱
      { value: '專案經理人', text: '專案經理人' },
        { value: '計畫管理員', text: '計畫管理員' },
        { value: '系統管理員', text: '系統管理員' },
        { value: '一般成員', text: '一般成員' },
        { value: '中華郵政', text: '中華郵政' }
      ],
      permissionSelection: [ // 選擇權限 | 編輯檢視
        { text: '編輯', value: 2 },
        { text: '檢視', value: 1 }
      ],
      permissionSelection2: [ // 選擇權限 | 開啟關閉
        { text: '開啟', value: 2 },
        { text: '關閉', value: 1 }
      ],
      permissionTableTitle: [ // 權限列表表格
        {
          key: 'name',
          label: '功能項目',
          thStyle: { width: '30%' }
        },
        {
          key: 'selectPermission',
          label: '選擇權限',
          thStyle: { width: '70%' }
        }
      ],
      permissionsTemplate: [
        {
          empty: [ // 新增人員空資料用
            {
              name: 'basicSetting',
              functionItem: [
                { name: '通訊錄', permissionType: 0 },
                { name: '工程現況', permissionType: 0 }
              ],
              title: '基本設定'
            },
            {
              name: 'officialDocumentManagement',
              functionItem: [
                { name: '收發文', permissionType: 0 },
                { name: '結案', permissionType: 1 },
                { name: '參數設置', permissionType: 1 },
                { name: '收發文資料管理', permissionType: 0 }
              ],
              title: '公文管理'
            },
            {
              name: 'workCollaboration',
              functionItem: [
                { name: '會議管理', permissionType: 0 },
                { name: '解除列管', permissionType: 1 },
                { name: '文件提審', permissionType: 0 },
                { name: '結束提審', permissionType: 1 },
                { name: '刪除文件', permissionType: 1 }
              ],
              title: '工作協同'
            },
            {
              name: 'documentCollaboration',
              functionItem: [
                { name: '刪除契約', permissionType: 1 },
                { name: '品保文件', permissionType: 0 },
                { name: '變更契約', permissionType: 0 },
                { name: '展延紀錄', permissionType: 0 }
              ],
              title: '文件管理'
            },
            {
              name: 'calendar',
              functionItem: [
                { name: '事件管理', permissionType: 0 },
                { name: '參數設置', permissionType: 1 }
              ],
              title: '行事曆'
            }
          ],
          modules: []
        }
      ]
    }
  },
  components: {
    Multiselect,
    modal: () => import('@/views/Modal/index.vue')
  },
  computed: {
    ...mapState({
      selected: (state) => state.staff.selected,
      staffList: (state) => state.staff.list,
      permission: (state) => state.staff.permission,
      project: (state) => state.project.current,
      currentUser: (state) => state.user.current,
      tender: (state) => state.project.tenders,
      tendersList: (state) => state.tenders.tenderList,
      userPermission: (state) => state.staff.userPermission
    }),
    ...mapGetters('staff', ['permissions', 'tenderName'])
    // groupprojectTitle () { // 選擇人員群組或計劃職稱時預設其權限 (等亞新需要在做)
    //   return `${this.selected.group}|${this.selected.projectTitle}`
    // }
  },
  async created () {
    await this.$store.dispatch('tenders/getTenderList')
  },
  async mounted () {
    if (this.selected._id === undefined) { this.$store.dispatch('staff/initStaff') }
    this.staffs = await this.$store.dispatch('project/lookupStaffs', {
      selects: ['_id', 'name']
    })
    await this.reloadPage()
  },
  methods: {
    ...mapActions('staff', ['initStaff', 'patchStaff', 'addStaff', 'lookUp', 'selectTenderToLook', 'patchPermission']),
    async reloadPage () {
      if (this.$route.query.sid !== undefined) {
        await this.lookUp(this.$route.query.sid)
      } else {
        await this.initStaff()
        this.isFix = false
        this.permissionsTemplate[0].modules = this.permissionsTemplate[0].empty
      }

      this.selectedTenderId = this.tendersList[0]._id // 預設檢視第一個標案 (適用單或多標案)

      if (this.selected.tenderPermissions !== undefined) { // 人員已開啟之權限
        if (this.selected.tenderPermissions.length === 0) { // 系統人員無開啟權限 | 顯示
          this.permissionsTemplate[0].modules = this.permissionsTemplate[0].empty
        } else {
          await this.selectTenderToLook(this.selectedTenderId)
          this.permissionsTemplate[0].modules = this.permission[0].permission
        }
      } else { // 新增人員 | 顯示
        this.permissionsTemplate[0].modules = this.permissionsTemplate[0].empty
      }
    },
    async setSelectedTender (index) { // 檢視標案權限內容
      if (this.isPermissionFix === true) {
        this.selectedTenderId = index.tenderId._id
        this.permissionsTemplate[0].modules = this.permissionsTemplate[0].empty
        // 未開啟編輯
        await this.selectTenderToLook(index.tenderId._id)
        this.permissionsTemplate[0].modules = this.permission[0].permission
      }
    },
    goBack () { // 返回使用者管理頁面
      this.$router.push({ name: 'UserList' })
    },
    async addNewStaff () { // 新增
      const h = this.$createElement
      if (
        this.selected.name === '' ||
        this.selected.staffID === '' ||
        this.selected.unit === '' ||
        this.selected.account === '' ||
        this.selected.password === '' ||
        this.selected.tender === '' ||
        this.selected.email === '' ||
        this.selected.emailPass === '' ||
        this.selected.contactNumber === '' ||
        this.selected.group === '' ||
        this.selected.projectTitle === ''
      ) {
        this.$message({
          message: h('span', { style: 'color: red' }, '尚有內容未填'),
          type: 'error',
          duration: '1500'
        })
      } else {
        let yes = confirm('確定新增人員資料?')
        if (yes) {
          await this.addStaff()
          await this.$store.dispatch('staff/getAllStaff')
          let a = {}
          Object.values(this.staffList).forEach(val => {
            if (
              val.name === this.selected.name &&
              val.staffID === this.selected.staffID
            ) a = val
          })
          await this.$router.push({ name: 'EditUser', query: { sid: a._id } })
          document.location.reload()
        } else {
          this.$message({
            message: h('span', { style: 'color: red' }, '取消新增'),
            type: 'error',
            duration: '1500'
          })
        }
      }
    },
    async isStaffInformationSaved () { // 儲存人員資料
      const h = this.$createElement
      if (
        this.selected.name === '' ||
        this.selected.staffID === '' ||
        this.selected.unit === '' ||
        this.selected.account === '' ||
        this.selected.password === '' ||
        this.selected.tender === '' ||
        this.selected.email === '' ||
        this.selected.emailPass === '' ||
        this.selected.contactNumber === '' ||
        this.selected.group === '' ||
        this.selected.projectTitle === ''
      ) {
        this.$message({
          message: h('span', { style: 'color: red' }, '尚有內容為空'),
          type: 'error',
          duration: '1500'
        })
      } else {
        let yes = confirm('確定儲存?')
        if (yes) {
          await this.patchStaff(this.$route.query.sid)
          this.isSave = false
          this.isCreate = true
          this.isFix = true
          this.$message({
            message: h('span', { style: 'color: teal' }, '成功修改人員資料'),
            type: 'success',
            duration: '1500'
          })
        } else {
          await this.lookUp(this.$route.query.sid)
          this.isSave = false
          this.isCreate = true
          this.isFix = true
          this.$message({
            message: h('span', { style: 'color: black' }, '所有操作將不儲存'),
            type: 'warning',
            duration: '1500'
          })
        }
      }
    },
    async isStaffInformationEditing () { // 編輯人員資料
      this.isSave = true
      this.isCreate = false
      this.isFix = false
      this.isPermissionFix = true
    },
    async isPermissionSaved () { // 儲存權限
      const h = this.$createElement
      let yes = confirm('確定儲存?')
      if (yes) {
        await this.patchPermission({
          staff: this.$route.query.sid,
          tender: this.selectedTenderId
        })
        this.isPermissionSave = false
        this.isPermissionCreate = true
        this.isPermissionFix = true
        this.$message({
          message: h('span', { style: 'color: teal' }, '成功修改該人員標案權限'),
          type: 'success',
          duration: '1500'
        })
      } else {
        this.isPermissionSave = false
        this.isPermissionCreate = true
        this.isPermissionFix = true
        this.$message({
          message: h('span', { style: 'color: black' }, '所有操作將不儲存'),
          type: 'warning',
          duration: '1500'
        })
      }
      this.isClick = false
      await this.lookUp(this.$route.query.sid)
      await this.selectTenderToLook(this.selectedTenderId)
      this.permissionsTemplate[0].modules = this.permission[0].permission
    },
    async isPermissionEditing () { // 編輯權限
      this.isPermissionSave = true
      this.isPermissionCreate = false
      this.isFix = true
      this.isPermissionFix = false
      this.isClick = true
    }
  },
  watch: {
    selected: {
      handler (newVal, old) {
        if (newVal._id === undefined) {
          this.isFix = false
        } else {
          this.isFix = true
        }
      }
    }
  }
}
</script>

<style>
.module {
  background-color: rgb(75, 102, 255);
  font-size: 16px;
  color: #ffffff;
}
</style>
<style lang="scss" scoped>
.container {
  height: calc(90vh - 145px);
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  overflow: auto;
}
::-webkit-scrollbar {
  width: 3px;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background: #888;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.select-staff-table {
  width: 100%;
  max-height: 70vh !important;
  overflow-y: scroll;
  margin-top: 5px;
  text-align: center;
  border-top: 1px solid;
  border-left: 1px solid;
  border-bottom: 1px solid;
  border-color: rgb(236, 236, 236);
}
.select-permission-table {
  width: 100%;
  overflow-y: scroll;
  margin-top: 5px;
  text-align: center;
  border-top: 1px solid;
  border-left: 1px solid;
  border-bottom: 1px solid;
  border-color: rgb(236, 236, 236);
}
.form-control {
  color: black;
}
.custom-select {
  color: black !important;
  box-shadow: none;
  -webkit-box-shadow: none;
}
.form-control:disabled {
  background-color: #ffffff;
  border: 0;
  color: black;
}
.custom-select:disabled {
  background-color: #ffffff;
  border: 0;
  color: black !important;
}
/deep/.btn_module {
  background-color: rgb(75, 102, 255);
  font-size: 16px;
  color: #ffffff;
}
/deep/.btn_module:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(49, 68, 175);
  transform: translateY(1);
}
/deep/.btn_before_click {
  background-color: rgb(255, 255, 255);
  font-size: 16px;
  color: #000000;
  margin-bottom: 5px;
  border-radius: 5px;
}
/deep/.btn_before_click:hover {
  color: rgb(0, 0, 0);
  background-color: rgb(236, 236, 236);
}
.btn_function_bar {
  background-color: rgb(75, 102, 255);
  font-size: 13px;
  padding: 5px 7px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
}
.btn_function_bar:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(49, 68, 175);
  transform: translateY(1);
}
.btn_back {
  background-color: white;
  font-size: 15px;
  padding: 5px 7px;
  color: #383838;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
}
.btn_back:hover {
  color: black;
  background-color: rgb(228, 228, 228);
  transform: translateY(1);
}
.btn_post {
  background-color: #04aa6d;
  font-size: 13px;
  padding: 5px 7px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
}
.btn_post:hover {
  background-color: #02633f;
  transform: translateY(1);
}
.btn.btn-secondary[disabled] {
  background-color: rgb(224, 224, 224);
  color: rgb(150, 150, 150);
}
// /deep/.table-hover .table-row-disabled:hover {
//   background-color: var(--gray-2);
//   cursor: not-allowed !important;
// }
// .permissionSelection_on_off_class {
//   font-weight: normal;
//   color: black;
//   font-size: 15px;
// }
// .permissionSelection_visible_editable_class {
//   font-weight: normal;
//   color: black;
//   font-size: 15px;
// }
// .custom-control.custom-control-inline.custom-radio {
//   // min-width: 50px !important;
//   padding-left: 50px;
// }
.moduleClick {
  color: white;
  background-color: rgb(75, 102, 255);
}
.moduleClick:hover {
  color: white;
  background-color: rgb(49, 68, 175);
}
</style>
