<template>
  <div>
    <div class="scriptRecordNew" :style="{bottom:(offsetBottom-15)+'px'}">
      <div v-show="isShow" class="scriptRecordNewIn">
        <el-tabs type="card">
          <el-tab-pane :label="$t('scriptRecord.scriptRecordTitle')+'('+language+')'">
            <div style="padding:0px 10px;height: 240px;" />
          </el-tab-pane>
          <el-tab-pane label="选择剧本角色">
            <div style="padding:0px 10px;height: 240px;">
              <add-role ref="addRole" :group="group" @refresh="refresh" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="scriptRecordNewTitle" @click="minisize">
        <span class="titleStyle">{{ $t('scriptRecord.scriptRecordTitle') }}</span>
        <!-- <span class="titleStyle">( {{ $t('scriptRecord.language') }}: {{ $route.query.lang=="en"?$t('scriptRecord.english'):$t('scriptRecord.chinese') }} )</span> -->
      </div>
    </div>
    <!-- <div class="selectRoles">
      <div class="selectRolesTitle">选择成员角色</div>
      <add-role ref="addRole" :group="group" @refresh="refresh" />
    </div> -->
  </div>
</template>
<script>
import AddRole from '../scriptRecord/addRole';
export default {
    name:'TipScriptRecordNew',
    components: {
        AddRole
    },
    props: {
        group: {
            type: String,
            required: true
        },
        offsetBottom:{
            type: Number,
            required: true
        }
    },
    data() {
        return {
            isShow:true,
            language:''
        };
    },
    mounted() {
        this.language = this.$route.query.lang == 'en' ? this.$t('scriptRecord.english') : this.$t('scriptRecord.chinese');
    },
    methods:{
        refresh() {
        },
        minisize() {
            if (this.isShow) {
                this.isShow = false;
            } else {
                this.isShow = true;
            }
        }
    }
};
</script>
<style lang="scss" scoped>
// .selectRoles{
//     position: absolute;
//     width: 700px;
//     left: 5px;
//     bottom: 424px;
//     z-index: 10;
//     background: #fff;
//     height: 200px;
//     border-radius: 5px;
// }
.selectRolesTitle{

}
.scriptRecordNew{
    position: absolute;
    width: 700px;
    max-height: 400px;
    z-index: 10;
    padding-top: 28px;
    left: 50%;
    bottom: 0px;
    transform: translateX(-50%) translateY(0);
}
.scriptRecordNewTitle{
    position: absolute;
    background: #fff;
    border-radius: 5px 5px 0px 0px ;
    padding: 5px 0px;
    width: 100px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    top:0;
}
.scriptRecordNewIn{
    padding: 10px;
    background: #fff;
    border-radius: 5px 5px 0px 0px ;
    box-shadow: -1px -1px 3px #656565;
}
</style>
