<template>
    <el-container class="default-body">
        <el-header>
            <div class="default-title" style="float: left;">
                {{ dataType == "1" ? '随堂问备题' : '即时测组卷' }}
            </div>
            <el-dropdown v-if="this.dataType == '2'" :hide-on-click="true" style="float: right;margin-right: 50px;">
                <el-button :size="'small'" :icon="'el-icon-plus'" class="green-el-button">添加试卷</el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="importQuestion(1)">导入试卷</el-dropdown-item>
                    <el-dropdown-item @click.native="createAnwseredCard()">创建答题卡</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-button style="float: right;margin-right: 50px;" :size="'small'" :icon="'el-icon-plus'"
                class="green-el-button" @click.native="importQuestion(2)" v-if="this.dataType == '1'">添加课件</el-button>
        </el-header>
        <div class="default-filter">
            <el-input v-model="query.paper" :placeholder="dataType == '1' ? '搜索课件' : '搜索试卷'"
                suffix-icon="el-icon-search" class="filter-input" clearable />
            <el-select @change="_changeClass" v-model="query.class" class="filter-select" placeholder="选择班级">
                <el-option v-for="item  in classList" :key="item.classId" :label="item.className"
                    :value="item.classId" />
            </el-select>
            <el-select v-model="query.subject" placeholder="选择科目" class="filter-select">
                <el-option v-for=" item  in  subjectList " :key="item" :label="item" :value="item" />
            </el-select>
            <el-select v-if="dataType == '2'" v-model="query.tagId" placeholder="选择测验类型" class="filter-select">
                <el-option v-for="item in typeList" :key="item.label" :label="item.label" :value="item.value" />
            </el-select>
            <el-date-picker value-format="yyyy-MM-dd" class="filter-datePicker" v-model="query.dateRange"
                type="daterange" range-separator="-">
            </el-date-picker>
            <el-button type="primary" @click="_serach">
                筛选
            </el-button>
            <el-radio-group v-model="query.dateStatus" class="default-date-radio-group">
                <el-radio-button label="onDay">今天</el-radio-button>
                <el-radio-button label="onWeek">本周</el-radio-button>
                <el-radio-button label="onMonth">本月</el-radio-button>
            </el-radio-group>
        </div>
        <el-main>
            <div class="paper-list">
                <el-tabs v-model="tabType" v-loading="queryLoading" type="card" class="default-tabs">
                    <el-tab-pane :name="'0'" :label="`我自编的(${createdCount})`">
                        <div class="card-content" :key="index" v-for="( item, index ) in defaultList ">
                            <el-row>
                                <el-col :span="6" class="left">
                                    <div class="left-icon">
                                        <div class="icon">
                                            <img src="../../../assets/images/shuben.png" />
                                        </div>
                                        <div class="text">
                                            {{ item.id }}
                                        </div>
                                        <div class="text-radius" v-if="item.tag && item.tag.length >= 1">
                                            <span> {{ item.tag }}&nbsp;</span>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="18" class="content">
                                    <div class="title-text">
                                        <el-tooltip effect="dark" :content="item.title" placement="left">
                                            <div class="title-label overflowText">
                                                {{ item.title }}
                                            </div>
                                        </el-tooltip>
                                        <el-dropdown class="dropdown-button" :hide-on-click="false">
                                            <el-button>操作</el-button>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item
                                                    @click.native="_detailQ(item.id)">查看</el-dropdown-item>
                                                <el-dropdown-item @click.native="_updateQ(item)">修改</el-dropdown-item>
                                                <el-dropdown-item @click.native="_copy(item)">复制</el-dropdown-item>
                                                <el-dropdown-item>
                                                    <el-popconfirm style="color:gray !important;"
                                                        @confirm="_deleteDetermineQ(item.id)"
                                                        :title="dataType == 1 ? '确认删除此课件' : '确认删除此试卷'">
                                                        <el-button class="small-button" :size="'small'"
                                                            style="color:#606266 !important;"
                                                            @click.native="_delete(item.id)" type="text"
                                                            slot="reference">删除</el-button>
                                                    </el-popconfirm>
                                                </el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </div>
                                    <div class="descption-tag-text" v-if="role != 'ROLE_PERSONAL'">
                                        <template>
                                            <span class="descption-label"> 授课端同步：</span>
                                            <div class="descption-box">
                                                <span class="descption-tag"
                                                    v-for="( clazzChild, indexs ) in  item.classList "
                                                    :key="clazzChild.classId"
                                                    :class="clazzChild.keepStatus == 1 ? 'active' : ''">
                                                    {{ clazzChild.className }}
                                                    <i v-if="clazzChild.keepStatus == 1" class="el-icon-success"></i>
                                                </span>
                                                <el-tooltip effect="dark" content="刷新同步状态">
                                                    <img @click="_serach" height="18px" width="18px"
                                                        src="../../../assets/images/shuaxin.png" />
                                                </el-tooltip>
                                            </div>
                                        </template>
                                    </div>
                                    <div class="descption-text">
                                        <span class="descption-text-block">
                                            <div class="blocks blocks-20">
                                                <div class="pic">
                                                    <img src="../../../assets/images/tishu.png" />
                                                </div>
                                                <div class="text"> 总题数：</div>
                                                <div class="value">{{ item.questionNum }}</div>
                                            </div>
                                            <div class="blocks" v-if="dataType == 2">
                                                <div class="pic">
                                                    <img src="../../../assets/images/tishu.png" />
                                                </div>
                                                <div class="text" v-if="dataType == 2"> 考试时长：</div>
                                                <div class="value" v-if="dataType == 2">{{ item.examsDuration }}
                                                    分钟
                                                </div>
                                            </div>
                                            <div class="blocks"
                                                :class="dataType == 1 ? 'ask-blocks-create' : 'test-blocks-create'">
                                                <div class="pic">
                                                    <img src="../../../assets/images/tishu.png" />
                                                </div>
                                                <div class="text"> 创建人：</div>
                                                <el-tooltip effect="dark" :content="item.realName" placement="left">
                                                    <div class="value">
                                                        {{ item.realName }}
                                                    </div>
                                                </el-tooltip>
                                            </div>
                                        </span>
                                    </div>
                                    <div class="descption-text">
                                        <span class="descption-text-block">
                                            <div class="pic"><img src="../../../assets/images/rili.png"></img>
                                            </div>
                                            <div class="text"> 更新时间：</div>
                                            <div class="value">{{ item.modifiedTime }}</div>
                                            <span class="sharing-descption"
                                                v-if="item.sharingType == 1">已分享到非任课班级</span>
                                        </span>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane :name="'1'" :label="`被共享的(${sharedCount})`">
                        <div class="card-content" :key="index" v-for="( item, index ) in sharedList ">
                            <el-row>
                                <el-col :span="6" class="left">
                                    <div class="left-icon">
                                        <div class="icon">
                                            <img src="../../../assets/images/shuben.png" />
                                        </div>
                                        <div class="text">
                                            {{ item.id }}
                                        </div>
                                        <div class="text-radius" v-if="item.tag && item.tag.length >= 1">
                                            <span> {{ item.tag }}&nbsp;</span>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="18" class="content">
                                    <div class="title-text">
                                        <el-tooltip effect="dark" :content="item.title" placement="left">
                                            <div class="title-label overflowText">
                                                {{ item.title }}
                                            </div>
                                        </el-tooltip>
                                        <el-dropdown class="dropdown-button" :hide-on-click="false">
                                            <el-button>操作</el-button>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item
                                                    @click.native="_detailQ(item.id)">查看</el-dropdown-item>
                                                <el-dropdown-item @click.native="_copy(item)">复制</el-dropdown-item>
                                                <el-dropdown-item>
                                                    <el-popconfirm style="color:gray !important;"
                                                        @confirm="_deleteDetermineQ(item.id)"
                                                        :title="dataType == 1 ? '确认删除此课件' : '确认删除此试卷'">
                                                        <el-button class="small-button" :size="'small'"
                                                            style="color:#606266 !important;"
                                                            @click.native="_delete(item.id)" type="text"
                                                            slot="reference">删除</el-button>
                                                    </el-popconfirm>
                                                </el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </div>
                                    <div class="descption-tag-text" v-if="role != 'ROLE_PERSONAL'">
                                        <template>
                                            <span class="descption-label"> 授课端同步：</span>
                                            <div class="descption-box">
                                                <span class="descption-tag"
                                                    v-for="( clazzChild, indexs ) in  item.classList "
                                                    :key="clazzChild.classId"
                                                    :class="clazzChild.keepStatus == 1 ? 'active' : ''">
                                                    {{ clazzChild.className }}
                                                    <i v-if="clazzChild.keepStatus == 1" class="el-icon-success"></i>
                                                </span>
                                                <el-tooltip effect="dark" content="刷新同步状态">
                                                    <img @click="_serach" height="18px" width="18px"
                                                        src="../../../assets/images/shuaxin.png" />
                                                </el-tooltip>
                                            </div>
                                        </template>
                                    </div>
                                    <div class="descption-text">
                                        <span class="descption-text-block">
                                            <div class="blocks blocks-20">
                                                <div class="pic">
                                                    <img src="../../../assets/images/tishu.png" />
                                                </div>
                                                <div class="text"> 总题数：</div>
                                                <div class="value">{{ item.questionNum }}</div>
                                            </div>
                                            <div class="blocks" v-if="dataType == 2">
                                                <div class="pic" v-if="dataType == 2">
                                                    <img src="../../../assets/images/tishu.png" />
                                                </div>
                                                <div class="text" v-if="dataType == 2"> 考试时长：</div>
                                                <div class="value" v-if="dataType == 2">{{ item.examsDuration }}
                                                    分钟
                                                </div>
                                            </div>
                                            <div class="blocks"
                                                :class="dataType == 1 ? 'ask-blocks-create' : 'test-blocks-create'">
                                                <div class="pic">
                                                    <img src="../../../assets/images/tishu.png" />
                                                </div>
                                                <div class="text"> 创建人：</div>
                                                <el-tooltip effect="dark" :content="item.realName" placement="left">
                                                    <div class="value">
                                                        {{ item.realName }}
                                                    </div>
                                                </el-tooltip>
                                            </div>
                                        </span>
                                    </div>
                                    <div class="descption-text">
                                        <span class="descption-text-block">
                                            <div class="pic"><img src="../../../assets/images/rili.png"></img>
                                            </div>
                                            <div class="text"> 更新时间：</div>
                                            <div class="value">{{ item.modifiedTime }}</div>
                                        </span>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-tab-pane>
                    <div slot="tab-bar">
                        <el-button type="primary" icon="el-icon-plus">新增</el-button>
                    </div>
                </el-tabs>
                <el-button size='mini' v-if="role == 'ROLE_PERSONAL' || role == 'ROLE_JIAOSHI'" @click="recycle"
                    style='position: absolute;right:40px;top:2.5px;'>查看回收站</el-button>
            </div>
        </el-main>
        <el-footer class="el-footer-pagination">
            <el-pagination @current-change="pageSizeChange" background layout="prev, pager, next"
                :page-size="listPage.size" :current-page="listPage.page" :total="listPage.total">
            </el-pagination>
        </el-footer>
        <el-dialog :append-to-body="true" :close-on-click-modal="false" title="上传word文档" :visible.sync="diaUp"
            width="600px">
            <upload :url="url" :params="{ type: importType }" @upSuccess="upSuccess" fileName="下载">
                <div class="down-box p0" slot="down" style="padding-left: 0px !important;">
                    <div class="down-head" v-if="importType == 1">
                        <span>第一步：
                            导出菁优网试卷/组卷网(学科网)试卷；为保证第三方试卷导入成功，请注意参考导出示例：
                        </span>
                        <p> 菁优网示例如下：</p>
                        <span class="img-box">
                            <el-image class="img" :src="examplePic" :preview-src-list="examplePicList">
                            </el-image>
                        </span>
                        <p> 组卷网(学科网)示例如下：</p>
                        <span class="img-box">
                            <el-image class="img" :src="examplePic2" :preview-src-list="examplePicList2">
                            </el-image>
                        </span>
                    </div>
                    <div class="down-head" v-if="importType == 2">
                        <span>
                            第一步：
                            <el-link type="primary" @click="downExcel">下载模板</el-link>，
                            或者导出菁优网试卷/组卷网(学科网)试卷；为保证第三方试卷导入成功，请注意参考导出示例：
                        </span>
                        <p> 菁优网示例如下：</p>
                        <span class="img-box">
                            <el-image class="img" :src="examplePic" :preview-src-list="examplePicList">
                            </el-image>

                        </span>
                        <p> 组卷网(学科网)示例如下：</p>
                        <span class="img-box">
                            <el-image class="img" :src="examplePic2" :preview-src-list="examplePicList2">
                            </el-image>

                        </span>
                    </div>
                    <p>第二步：上传完成编辑好的试卷。</p>
                </div>
            </upload>
            <div class="dialog-footer" slot="footer">
                <el-button @click="diaUp = false">取 消</el-button>
            </div>
        </el-dialog>
    </el-container>

</template>

<script>
import { setDateRules, downloadFile } from "@/utils";
import example from "@/assets/images/example.png";
import example2 from "@/assets/images/example2.png";
import axios from "axios";

export default {
    data() {
        return {
            diaUp: false,
            examplePic: example,
            examplePic2: example2,
            examplePicList: [example],
            examplePicList2: [example2],
            role: "",
            classList: [],
            subjectList: [],
            defaultList: [],
            typeList: [],
            sharedList: [],
            dataType: "1",
            importType: 0,
            tabType: "0",
            url: "/api_html/common/paper/upload", //上传文档地址
            listPage: {
                page: 1,
                size: 8,
                total: 0,
            },
            query: {
                dateStatus: "-1",
                title: "",
                class: null,
                subject: null,
                dateRange: [
                    "2022-03-01", "2023-05-01"
                ],
                tagId: null
            },
            queryLoading: false,
            createdCount: 0,
            sharedCount: 0
        };
    },
    watch: {
        '$route'() {
            this.query.paper = "";
            this.dataType = location.href.endsWith("askPreparationQuestions") ? "1" : "2";
            this._serach();
        },
        'tabType'() {
            this.listPage.page = 1;
            this._serach();
        },
        'query.dateStatus'(val) {
            var dateRange = setDateRules(val);
            this.query.dateRange = [dateRange.startDay, dateRange.endDay];
        }
    },
    async created() {
        this.dataType = location.href.endsWith("askPreparationQuestions") ? "1" : "2";
        this.code = this.$store.getters.csCode;
        this.role =
            this.$store.getters.info.showRole ||
            this.$store.getters.info.permissions[0].role;
        this.query.dateStatus = "onWeek";
        await this._loadQueryDatas();
    },
    methods: {
        async downExcel() {
            let url;
            let that = this;
            if (that.dataType == 1) {
                url = "static/课件模板.docx";
            } else {
                url = "static/试卷模板.docx";
            }
            axios(url, {
                responseType: "arraybuffer",
            }).then((res) => {
                let blob = new Blob([res.data], {
                    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                });
                downloadFile(
                    that.dataType == 1 ? "课件模板.docx" : "试卷模板.docx",
                    blob
                );
            });
        },
        async pageSizeChange(value) {
            this.listPage.page = value;
            await this._serach();
        },
        recycle() {
            let routerItem = {
                path: "/askPreparationQuestionsRecycle"
            };
            if (this.dataType == '2') {
                routerItem.path = "/testPaperRecycle";
            }
            this.$router.push(routerItem);
        },
        createAnwseredCard(params) {
            let routerItem = {
                path: "/testPaperAdd",
                query: {
                    listType: 2,
                    listShare: 0,
                    subjectName: this.query.subject,
                },
            };
            this.$router.push(routerItem);
        },
        importQuestion(type) {
            this.importType = type;
            this.diaUp = true;
        },
        //v1.5
        upSuccess(res) {
            if (res.status == 0) {
                //导入成功
                this.$message.closeAll();
                this.$message({
                    showClose: true,
                    message: `${res.info}`,
                    type: "success",
                    duration: 2000,
                });
                this.diaUp = false;
                let params = JSON.stringify(res.data);
                if (this.dataType == 1) {
                    this.toAdd({ params, isUpload: true });
                } else {
                    this.toAddQs({ params, isUpload: true });
                }
            }
        },
        toAdd(query) {
            if (!this.query.class) {
                this.$message.warning("没有任课班级，请先设置。");
                return;
            }
            let routerItem = {
                path: "/askPreparationQuestionsAdd",
                query: {
                    ...query,
                    classId: this.query.class,
                    listType: 2,
                    listShare: 0,
                    subjectName: this.query.subject,
                },
            };
            this.$router.push(routerItem);
        },
        //去备题
        toAddQs(query) {
            if (!this.query.class) {
                this.$message.warning("没有任课班级，请先设置。");
                return;
            }
            let routerItem = {
                path: "/testPaperAdd",
                query: {
                    ...query,
                    classId: this.query.class,
                    listType: 2,
                    listShare: 0,
                    subjectName: this.query.subject,
                },
            };
            this.$router.push(routerItem);
        },
        async _changeClass() {
            await this._loadSubjectData();
        },
        async _loadSubjectData() {
            const fetchSubject =
                this.role == "ROLE_BANZHUREN" ? this.$request.cTSubjectList :
                    this.role == "ROLE_PERSONAL" ? this.$request.pSubjectList : this.$request.tSubjectList;

            const { data, status, info } = await fetchSubject({
                classId: this.query.class,
            });

            if (status != 0) {
                this.$message.error(info);
                return;
            }
            this.subjectList = data?.subjectNames ?? [];
            this.query.subject = data?.subjectNames[0] ?? "";
        },
        async _loadTypes() {
            let fetchTypeNames =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pPaperTagList
                    : this.$request.fetchTypeNames;

            const { data, status, info } = await fetchTypeNames({
                classId: this.query.class,
                type: 0,
            });
            if (status != 0) {
                this.$message.error(info);
                return;
            }
            this.typeList =
                data.list.map((item) => {
                    return {
                        value: item.tagId,
                        label: item.tag,
                    };
                }) || [];
            this.typeList.unshift({
                value: "",
                label: "请选择标签",
            });
            this.query.tagId = "";
        },
        async _loadClassData() {
            const fetchClassList =
                this.role == "ROLE_BANZHUREN" ? this.$request.cTClassList :
                    this.role == "ROLE_PERSONAL" ? this.$request.pClassList : this.$request.tClassList;

            const { data, status, info } = await fetchClassList();

            if (status != 0) {
                this.$message.error(info);
                return;
            }

            this.classList = data?.list ?? [];

            this.query.class = this.classList[0]?.classId
        },
        async _loadQueryDatas() {
            this.$loading.open();
            await this._loadClassData();
            await this._loadSubjectData();
            if (this.dataType == "2") await this._loadTypes();
            this.$loading.close();
            await this._serach();
        },
        async _serach() {
            this.queryLoading = true;
            let fetchPaperList =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pPaperList
                    : this.$request.fetchPaperList;

            var queryParams = {
                classId: "",
                subjectName: "",
                tagId: "",
                title: "",
                start: null,
                end: null,
                type: this.dataType, //试卷类型
                share: this.tabType, //分享类型
            };

            queryParams.classId = this.query.class;
            queryParams.subjectName = this.query.subject;
            queryParams.tagId = this.query.tagId;
            queryParams.title = this.query.paper;
            if (this.query?.dateRange?.length >= 2) {
                queryParams.start = this.query.dateRange[0] ?? "";
                queryParams.end = this.query.dateRange[1] ?? "";
            }
            const { data, status, info } = await fetchPaperList({
                ...queryParams,
                status: 1,
                page: this.listPage.page,
                size: this.listPage.size
            });

            if (status != 0) {
                this.$message.error(info);
                return;
            }
            this.queryLoading = false;
            this.createdCount = data?.myCount || 0;
            this.sharedCount = data?.gradeCount || 0;
            this.listPage.total = data.total;
            console.log('page', this.listPage)
            if (this.tabType == "0") {
                this.defaultList = [];
                if (data?.list) this.defaultList = [...data?.list];
            }
            else if (this.tabType == "1") {
                this.sharedList = [];
                if (data?.list) this.sharedList = [...data?.list];
            }
        },
        _detailQ(id) {
            let routerItem = {
                path: "/askPreparationQuestionsDetail",
                query: { id: id },
            };
            if (this.dataType == '2') {
                var currentClass = this.classList.find(item => item.classId == this.query.class);
                routerItem.query.paperId = routerItem.query.id;
                routerItem.query.classId = currentClass.classId;
                routerItem.query.isViewer = true;
                routerItem.query.gradeName = currentClass.gradeName;
                routerItem.query.paperType = 2;
                routerItem.path = '/testPaperQuestionsUpdate';
                // routerItem.path = "/testPaperQuestionsDetail";
            }
            this.$router.push(routerItem);
        },
        _copy(currentRow) {
            let routerItem = {
                path: "/askPreparationQuestionsAdd",
                query: {
                    type: 2,
                    paperId: currentRow.id,
                    listType: 1,
                    listShare: 0,
                    subjectName: this.query.subjectName,
                },
            };

            if (this.dataType == '2') {
                routerItem.path = "/testPaperAdd";
            }

            this.$router.push(routerItem);
        },
        _delete() {

        },
        _updateQ(item) {

            var currentClass = this.classList.find(item => item.classId == this.query.class);

            let routerItem = {
                path: "/askPreparationQuestionsUpdate",
                query: {
                    paperId: item.id,
                    paperType: 1,
                    classId: currentClass.classId,
                    gradeName: currentClass.gradeName
                },
            };

            if (this.dataType == '2') {
                routerItem.query.paperType = 2;
                routerItem.path = "/testPaperQuestionsUpdate";
            }

            this.$router.push(routerItem);
        },
        async _deleteDetermineQ(id) {
            let modifyPaper =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pModifyPaper
                    : this.$request.modifyPaper;
            const { data, status, info } = await modifyPaper({
                paperId: id,
                status: 2,
            });
            if (status != 0) {
                this.$message.error(info);
            }
            this.page = 1;
            this._serach();
        }
    },
};
</script>
<style lang="scss">
.paper-list {
    position: relative;

    .down-box {
        .down-head {
            display: block;
            padding-left: 20px !important;

            span,
            a {
                vertical-align: middle;
            }
        }
    }

    .header-button {
        float: right;
        margin-right: 50px;
        background: rgba(65, 204, 149, 1);
        color: white;

        :hover {
            background: rgba(65, 204, 149, 1);
            color: white;
        }
    }

    .el-tabs__content {
        padding-left: 20px !important;
        padding-right: 0px !important;
        padding-top: 20px !important;
    }

    .el-tabs__header {
        margin: 0px !important;
    }

    .card-content {

        .descption-tag {
            display: inline-block;
            background: rgba(102, 127, 253, 0.1);
            border-radius: 4px 4px 4px 4px;
            color: #667FFD;
            line-height: 32px;
            padding: 0 10px;
            margin-right: 10px;
            height: 32px;
            margin-top: 3px;
        }

        width: 48.4%;
        display: inline-block;
        margin-bottom: 10px;
        min-height: 190px;
        border: 1px solid #E6E9F4;
        border-radius: 10px 10px 10px 10px;
        box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08);
        margin-right: 20px;
        // background: #FFFFFF;
        background-color: #41CC95;

        .content {
            background-color: white;
            border: 1px solid white;
            padding-top: 15px !important;
            padding-left: 10px !important;
            padding-bottom: 5px !important;
            font-size: 14px;
            font-weight: 400;

            .descption-label {
                min-width: 120px;
            }

            .descption-tag-text {
                margin-bottom: 20px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                width: calc(100% - 5px);
            }



            .descption-text {
                height: 30px;
                margin-top: 10px;

                .descption-text-block {
                    display: flex;
                    justify-content: flex-start;

                    .blocks {
                        width: 37%;
                        margin-right: 10px;
                        white-space: nowrap;
                        overflow: hidden;
                        display: flex;
                        text-align: left;

                        div {
                            display: inline;
                        }
                    }

                    .ask-blocks-create {
                        width: 72% !important;
                    }

                    .ask-blocks-create,
                    .test-blocks-create {
                        .value {
                            display: inline-block;
                            width: calc(100% - 90px);
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                    }

                    .blocks-20 {
                        width: 24%;
                    }

                    .sharing-descption {
                        flex: 1;
                        color: gray;
                        opacity: 0.8;
                        text-align: right;
                        padding-right: 5px;
                    }

                    img {
                        height: 20px;
                        width: 20px;
                        margin-right: 5px;
                    }
                }
            }

            .title-text {
                .title-label {
                    font-weight: bold;
                    font-size: 24px !important;
                    color: #303133;
                    line-height: 28px;
                    display: inline-block;
                    width: calc(100% - 100px);
                    height: 28px;
                    text-transform: none;
                    padding-bottom: 10px !important;
                }

                .dropdown-button {
                    .el-button {
                        background-color: #667FFD !important;
                        color: white;
                    }

                    float: right;
                    margin-right: 20px;
                }
            }
        }

        .left {
            min-height: 190px;
            background-color: #41CC95;
            vertical-align: middle;
            border-radius: 10px 0px 0px 10px;

            .left-icon {
                margin-top: 26px;
                height: 70px;

                .icon {
                    height: 100px;
                    width: 100px;
                    background: rgba(255, 255, 255, 0.1);
                    border-radius: 61px 61px 61px 61px;
                    margin: auto;
                    text-align: center;

                    img {
                        margin-top: 24px;
                        height: 52px;
                        width: 52px;
                    }
                }

                .text {
                    width: 100%;
                    text-align: center;
                    margin-top: 5px;
                    font-size: 20px;
                    color: #FFFFFF;
                }

                .text-radius {
                    width: 100%;
                    text-align: left;
                    margin-left: 1px;
                    white-space: nowrap;
                    width: calc(100% - 7.5px);
                    position: absolute;
                    bottom: -4px;

                    span {
                        overflow: hidden;
                        white-space: nowrap;
                        color: #209466;
                        text-overflow: ellipsis;
                        display: inline-block;
                        border-radius: 1px 15px 0px 10px;
                        padding-left: 8px;
                        padding-right: 4px;
                        padding-top: 2px;
                        padding-bottom: 2px;
                        max-width: calc(100% - 1px);
                        background: #E4F8F0;
                    }
                }
            }
        }

        .right {

            .el-button {
                background-color: #667FFD;
                line-height: 16px;
                color: #FFFFFF;
                margin-top: 15px;
                padding: 10px 20px !important;
            }
        }

    }

    .el-popconfirm__action {
        margin-top: 10px;
    }
}
</style>