<template>
  <div class="u-page">
    <Remark>
      1.案例是同步过来的，所以这里没有加编辑，添加等处理标识
      <br />
      2.推荐记录是一个列表，一个案例可能推荐多个不同的受众，每次推荐都是有一记录，推荐时间，受众
    </Remark>
    <div style="padding-bottom: 10px;">
      <div style="display: flex;justify-content:flex-start;">
        <!-- <div style="padding: 0px 5px;"><el-cascader placeholder="资源归属" clearable v-model="params.type" :options="typeList"></el-cascader></div> -->
        <div style="padding: 0px 5px;">
          <el-select v-model="queryObj.isTop" style="width: 110px;" clearable placeholder="全部">
            <el-option label="已置顶" :value="true"></el-option>
            <el-option label="未置顶" :value="false"></el-option>
          </el-select>
        </div>
        <div style="padding: 0px 5px;">
          <el-select v-model="queryObj.excellent" style="width: 120px;" clearable placeholder="全部">
            <el-option label="最佳案例" :value="true"></el-option>
            <el-option label="非最佳案例" :value="false"></el-option>
          </el-select>
        </div>
        <div style="padding: 0px 5px;"><el-input placeholder="关键词搜索" v-model="queryObj.keyWord" @input="inputOn($event)"
            clearable></el-input></div>
        <div style="padding: 0px 5px;flex: 1;display: flex;align-items: center;">
          <el-button @click="getData(1)" icon="el-icon-search" type="primary">搜索</el-button>
          <!-- <el-button @click="showRecords()" icon="el-icon-tickets" type="info" >推荐记录</el-button> -->
          <el-button icon="el-icon-refresh-right" type="primary" @click="reset">重置</el-button>
          <!-- <el-checkbox style="margin-left:10px" v-model="queryObj.excellent" @change="getData()">优秀案例</el-checkbox> -->
          <div style="flex: 1; display: flex; justify-content: flex-end;align-items:baseline;">
            <el-button type="primary" icon="el-icon-document" @click="importList">导出</el-button>
          </div>
        </div>
      </div>
      <div style="margin: 5px 0 0 5px;">
        <el-button type="primary" @click="recoRanking">推荐榜单</el-button>
      </div>
    </div>
    <el-table style="100%" :data="caseList" border stripe>
      <el-table-column label="标题" prop="title" show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="previewStyle" @click="viewTopic(scope.row)">{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="摘要" show-overflow-tooltip prop="content">
      </el-table-column> -->
      <el-table-column label="作者" width="80px" prop="authorName"></el-table-column>
      <el-table-column label="密级" width="80px" prop="confidentialityLevel"></el-table-column>
      <el-table-column label="浏览次数" width="80px" prop="views"></el-table-column>
      <el-table-column label="导入时间" prop="sysCreateTime"></el-table-column>
      <el-table-column label="设置优秀时间" prop="excellentTime"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button-group>
            <el-button style="margin:0 5px" type="text" v-if="scope.row.recommendRank === ''" @click="suggest(scope.row)" icon="el-icon-medal">榜单推荐</el-button>
            <!-- <el-button type="text" @click="shareItem(scope.row)"  icon="el-icon-share" style="margin:0 5px">推荐</el-button> -->
            <el-button style="margin:0 5px" v-if="!scope.row.isTop && scope.row.confidentialityLevel == '内部'" type="text"
              @click="setTop(scope.row)" icon="el-icon-top">置顶</el-button>
            <el-button style="margin:0 5px" v-if="scope.row.isTop && scope.row.confidentialityLevel == '内部'" type="text"
              @click="setTop(scope.row)" icon="el-icon-bottom">取消置顶</el-button>
            <el-button type="text" icon="el-icon-medal"
              v-if="scope.row.filePath && scope.row.confidentialityLevel == '内部'"><span @click="cancal(scope.row)"
                v-if="scope.row.excellent">取消最佳</span>
                <!-- <span @click="open(scope.row)" v-else>最佳案例</span> -->
                <span @click="theBest(scope.row)" v-else>最佳</span>
              </el-button>
            <el-button style="margin:0 5px" type="text" @click="delItem(scope.row)" icon="el-icon-delete">删除</el-button>
            <!-- <el-button style="margin:0 5px" type="text" @click="theBest(scope.row)" icon="el-icon-delete">最佳</el-button> -->
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center;margin-top: 50px;">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryObj.pageIndex" :page-sizes="[10, 20, 30, 40]" :page-size="queryObj.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="count"></el-pagination>
    </div>
    <div style="height: 100px;"></div>

    <el-dialog title="推荐案例" :visible.sync="shareShow" :close-on-click-modal="false" width="500px" custom-class="g-dialog">
      <div style="padding-right: 30px;">
        <el-form label-width="100px" @submit.native.prevent>
          <el-form-item label="推荐案例">{{ shareItemData.title }}</el-form-item>
          <el-form-item label="姓名或工号">
            <el-input v-model="shareInfo.name" maxlength="10" placeholder="您要分享的人的姓名搜索" @keyup.enter.native="keyupEnter">
              <el-button @click="findUser" slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox-group v-model="shareUsers">
              <el-checkbox v-for="(u, uidx) in shareInfo.list" :key="uidx" :label="u.aid">{{ u.name + '(' + u.orgInfo +
                ')' }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <!-- <div style="padding: 0 20px 20px 20px;">

            </div> -->
          <el-form-item label="推荐说明"><el-input type="textarea" :rows="3" v-model="shareItemData.recommentThat"
              placeholder="备注说明"></el-input></el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="shareShow = false">取 消</el-button>
        <el-button @click="submitWork" type="primary">提交推荐任务</el-button>
      </span>
    </el-dialog>
    <el-dialog title="推荐记录" :visible.sync="recommend.dlgShow" :close-on-click-modal="false" width="900px"
      custom-class="g-dialog">
      <div>
        <el-table stripe style="width: 100%" :data="recommend.records">
          <el-table-column prop="caseName" label="案例名称"></el-table-column>
          <el-table-column prop="sysCreateTime" label="推送时间"></el-table-column>
          <el-table-column prop="toType" label="类型">
            <template slot-scope="scope">
              <span v-if="scope.row.type == 1">个人</span>
              <span v-if="scope.row.type == 2">受众群体</span>
            </template>
          </el-table-column>
          <el-table-column prop="acceptName" label="接收"></el-table-column>
          <el-table-column prop="recommendThat" label="说明"></el-table-column>
          <el-table-column prop="toType" label="状态" width="100px">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1" style="color: #008000;">执行中</span>
              <span v-if="scope.row.status == 2" style="color: red;">已通过</span>
              <span v-if="scope.row.status == 9" style="color: red;">未通过</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer"><el-button @click="recommend.dlgShow = false">关闭</el-button></span>
    </el-dialog>
    <el-dialog
      title="最佳案例"
      :visible.sync="bestValue"
      width="36%">
      <div class="best_card">
        <div class="card_item">
          <div class="card_title">
            <i class="icon"></i>
            <span class="text">年度</span>
          </div>
          <el-input style="width:190px" disabled v-model="bestYear" placeholder="请输入年度"></el-input>
        </div>
        <div class="card_item">
          <div class="card_title">
            <i class="icon"></i>
            <span class="text">组织领域</span>
          </div>
          <el-input disabled v-model="bestOrg" placeholder="请输入组织领域"></el-input>
        </div>
        <div class="card_item">
          <div class="card_title">
            <span class="text">最佳理由</span>
          </div>
          <el-input type="textarea"
            placeholder="请输入内容"
            v-model="bestTextarea"
            maxlength="200"
            show-word-limit></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="notBest">取 消</el-button>
        <el-button type="primary" @click="parameBest">确 定</el-button>
      </span>
    </el-dialog>
    <el-drawer
      title="推荐榜单"
      :visible.sync="RankingShow"
      size="80%">
      <div style="padding: 10px 20px 80px">
        <el-table :data="tableData" border stripe>
          <el-table-column
            type="index"
            width="50"
            label="排序">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="案例标题" prop="caseTitle"></el-table-column>
          <el-table-column width="150px" label="作者名称" prop="caseAuthor"></el-table-column>
          <el-table-column width="150px" label="上榜人" prop="caseAuthor"></el-table-column>
          <el-table-column width="250px" label="上榜时间" prop="recommendRankPusTime"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button-group>
                <el-button style="margin:0 5px" type="text" @click="handleNotRank(scope.row)" icon="el-icon-delete">取消推荐</el-button>
                <el-button style="margin:0 5px" type="text" @click="moveUp(scope.row,scope.$index)" icon="el-icon-top">上移排序</el-button>
                <el-button style="margin:0 5px" type="text" @click="moveDown(scope.row,scope.$index)" icon="el-icon-bottom">下移排序</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="rank_footer">
        <el-button @click="closeDrawer" style="width: 130px;height:40px;margin-right: 30px;" type="default">取消</el-button>
        <el-button @click="queryList" style="width: 130px;height:40px;margin-right: 15px;" type="primary">确定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import apiCase from '@/api/modules/cases.js';
import apiUser from '@/api/system/user.js'
import apiType from "@/api/modules/type.js";
export default {
  name: 'articleItems',
  data() {
    return {
      adminList: [],
      caseType: process.env.VUE_APP_CASE_TYPE,
      RankingShow: false,
      bestYear: '',
      bestOrg: '',
      bestId: '',
      bestTextarea: '',
      bestValue: false,
      excellent: false,
      queryObj: {
        pageIndex: 1,
        pageSize: 10,
        isTop: '',
        excellent: '',
      }, //查询对象
      caseList: [], //案例列表
      tableData: [],
      caseIds: '',
      count: 0,
      recommend: {
        dlgShow: false,
        records: []
      },
      shareInfo: {
        name: '',
        load: false,
        list: []
      },
      shareShow: false,
      shareUsers: [],
      shareItemData: {},
      timeout: null,
      params: { name: '', type: '' },
      typeList: [],
      findList: [
        {
          code: '001',
          name: '李玉冰',
          position: '技术部'
        },
        {
          code: '002',
          name: '程萌',
          position: '策划部'
        }
      ]
    };
  },
  mounted() {
    this.getData();
    this.getList();
    apiType.treeList(1,Number(this.caseType ?? 155),1).then(res=>{
      if(res.code == 200){
        this.adminList = res.data.records;
      }
    })
  },
  watch:{
    RankingShow(val){
      if(val){
        this.getList()
      }
    }
  },
  methods: {
    orgDomainTranslate(code) { // 组织领域翻译
      if (code == '') {
        return
      }
      let name = '';
      let data = this.adminList.find(item => {
        return item.code == code;
      });
      if (data) {
        name = data.name;
      }
      return name;
    },
    suggest(record){
      if(this.tableData.length == 10){
        this.$message.error('最多推荐10个')
        return
      }
      this.$confirm('你确认要推荐此案例吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        apiCase.riseIntoRank({caseId:record.id}).then(res=>{
          if(res.status == 200 ){
            this.$message.success('推荐成功')
            this.getData()
            this.getList()
          }
        })
      })
    },
    handleNotRank(record){
      this.$confirm('你确认要取消推荐吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        apiCase.cancelRiseIntoRank({caseId:record?.caseId}).then(res=>{
          if(res.status == 200){
            this.$message.success('取消推荐成功')
            this.getList()
            this.getData()
          }
        }).catch(()=>{
          this.$message.error('取消推荐失败')
        })
      })
    },
    moveUp(row,index){
      console.log(row,index,'index')
      if(index == 0){
        this.$message.error('已经排到第一位了')
        return
      }
      this.swapArray(this.tableData,index,index-1)
    },
    moveDown(row,index){
      if(index == this.tableData.length - 1){
        this.$message.error('已经排到最后一位了')
        return
      }
      this.swapArray(this.tableData,index,index+1)
    },
    swapArray(arr, index1, index2){
      const temp = arr[index1];
      arr.splice(index1, 1);
      arr.splice(index2, 0, temp);
    },
    getList(){
      apiCase.getQueryRecommendRank({pageSize:10}).then(res=>{
        console.log(res,'res')
        if(res.status == 200){
          this.tableData = res.result
          this.caseIds = res.result.map(item=>item.caseId).join(',')
        }
      })
    },
    notBest(){
      this.bestValue = false
      this.bestYear = ''
      this.bestOrg = ''
      this.bestId = ''
      this.bestTextarea = ''
    },
    parameBest(){
      this.excellent = true;
      let data = {
        id: this.bestId,
        excellent: this.excellent,
        excellentReason: this.bestTextarea
      }
      apiCase.excellent(data).then(res=>{
        if (res.status == 200) {
            this.$message({
              type: 'success',
              message: '设置最佳案例成功!'
            });
            this.getData()
          }else{
            this.$message({
              type: 'error',
              message: res.message
            });
          }
          this.notBest()
      })
    },
    recoRanking(){
      this.RankingShow = true
    },
    closeDrawer(){
      this.RankingShow = false
    },
    queryList(){
      if(this.caseIds != this.tableData.map(item=>item.caseId).join(',')){
        apiCase.adjustRank({caseIds:this.tableData.map(item=>item.caseId).join(',')}).then(res=>{
          if(res.status == 200){
            this.$message({
              message: '调整成功',
              type: 'success'
            })
          }
        }).catch(()=>{
          this.$message({
            message: '调整失败',
            type: 'error'
          })
        })
      }
      this.RankingShow = false
    },
    // 导出
    importList() {
      apiCase.exports(this.queryObj).then(res => {
        const link = document.createElement('a');// 创建a标签
        let blob = new Blob([res], { type: 'application/vnd.ms-excel;charset=UTF-8' }); // 设置文件类型
        link.style.display = "none";
        link.href = URL.createObjectURL(blob); // 创建URL
        console.log(link.href);
        link.setAttribute("download", "案例.xls");
        document.body.appendChild(link);
        link.click();
        URL.revokeObjectURL(link.href)
        document.body.removeChild(link);
      })
    },
    // getSearch(){
    //   this.queryObj.excellent = !this.queryObj.excellent;
    //   this.getData();
    // },
    cancal(item) {
      this.$confirm('确定要取消设置为最佳案例吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.excellent = false;
        let data = {
          id: item.id,
          excellent: this.excellent
        }
        console.log(data)
        apiCase.excellent(data).then(res => {
          if (res.status == 200) {
            this.$message({
              type: 'success',
              message: '取消成功!'
            });
            this.getData()
          }else{
            this.$message({
              type: 'error',
              message: res.message
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已撤回取消推荐'
        });
      });
    },
    open(item) {
      this.$confirm('你确认要设置为最佳案例吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.excellent = true;
        let data = {
          id: item.id,
          excellent: this.excellent
        }
        console.log(data)
        apiCase.excellent(data).then(res => {
          if (res.status == 200) {
            this.$message({
              type: 'success',
              message: '设置最佳案例成功!'
            });
            this.getData()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消优秀案例设置'
        });
      });
    },
    inputOn() {
      this.$forceUpdate();
    },
    reset() {
      this.queryObj.isTop = '';
      this.queryObj.keyWord = '';
      this.queryObj.pageIndex = 1;
      this.queryObj.excellent = '';
      this.getData()
    },
    //获取案例列表数据
    getData(num) {
      if (num === 1) {
        this.queryObj.pageIndex = 1;
      }
      // if (!this.queryObj.excellent) {
      //   this.queryObj.excellent = '';
      // }
      apiCase.isTopList(this.queryObj).then(res => {
        if (res.status == 200) {
          this.count = res.result.count
          this.caseList = res.result.list;
        } else {
          this.$message({ type: 'error', message: '查询数据失败' });
        }
      })
        .catch(err => {
          this.$message({
            type: 'error',
            message: '查询数据失败'
          });
        });
    },
    handleSizeChange(val) {
      this.queryObj.pageSize = val;
      this.getData(1);
    },
    handleCurrentChange(val) {
      this.queryObj.pageIndex = val;
      this.getData();
    },
    //暂时因为没数据，先做添加
    showRecords() {
      this.recommend.dlgShow = true;
      apiCase.query().then(res => {
        if (res.status == 200) {
          this.recommend.records = res.result
        }
      }).catch(err => {
        this.$message({
          type: 'error',
          message: '获取数据失败'
        })
      })
    },
    setTop(item) {
      let msg, isTop, btnMsg;
      if (item.isTop == 1) {
        msg = '确认要取消置顶此案例吗？';
        btnMsg = "取消成功"
        isTop = 0
      } else {
        msg = '你确认要置顶此案例吗？';
        btnMsg = "设置置顶成功"
        isTop = 1
      }
      this.$confirm(msg, '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          apiCase.updateTop(item.id, isTop).then(res => {
            if (res.status == 200) {
              this.$message({
                type: 'success',
                message: btnMsg
              });
              this.getData()
            } else {
              this.$message.error("操作失败")
            }
          })
        })
        .catch(() => {
          this.$message({ type: 'info', message: '取消操作', offset: 50 });
        });
    },
    delItem(item) {
      this.$confirm('您确定要删除这条案例吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          apiCase.del(item.id).then(res => {
            if (res.status == 200) {
              this.$message.success("删除成功");
              this.getData()
            }
          })
        })
        .catch(() => {
          this.$message({ type: 'info', message: '已取消删除', offset: 50 });
        });
    },
    theBest(item){
      this.bestValue = true
      this.bestId = item.id
      this.bestOrg = this.orgDomainTranslate(item.orgDomainParent)
      this.bestYear = item.sysCreateTime.split('-')[0]
    },
    //添加推荐
    shareItem(item) {
      this.shareItemData = { ...item }
      this.shareShow = true;
    },
    submitWork() {
      if (this.shareUsers.length == 0) {
        this.$message.error('请选择分享人');
        return;
      }
      let { title, recommentThat, id } = this.shareItemData
      let { aid: acceptAid } = this.shareInfo.list[0]
      let queryData = {
        title, recommentThat, acceptAid, id
      }
      //暂时只针对个人分享，所以暂时只传一条，没有传数组
      apiCase.savaRecommend(queryData).then(res => {
        if (res.status == 200) {
          this.$message.success("分享成功")
          this.shareShow = false;
        } else {
          this.$message.error("分享失败")
        }
      }).catch(err => {
        this.$message.error("分享失败")
      })
      // let {id,title,acceptAid,recommentThat}=item
      // apiCase.savaRecommend()
    },
    keyupEnter() {
      this.findUser();
      return false;
    },
    findUser() {
      this.shareInfo.load = false;
      this.shareInfo.list = [];
      this.shareUsers = [];
      var name = this.shareInfo.name;
      var regPos = /^\d+(\.\d+)?$/; //非负浮点数
      if (regPos.test(name)) {
        //console.log("数字");
        apiUser.getByLoginName(name).then(rs => {
          if (rs.status == 200) {
            //因为根据工号查询，只会是一个人，所有会有null情况，而json会返回空字符串
            if (rs.result != '') {
              this.shareInfo.list.push(rs.result);
            }
            this.shareInfo.load = true;
          } else {
            this.$message.error('查询用户失败');
          }
        })
      } else {
        // console.log("非数字");
        apiUser.findByName(name).then(rs => {
          if (rs.status == 200) {
            this.shareInfo.list = rs.result;
            this.shareInfo.load = true;
          } else {
            this.$message.error('查询用户失败');
          }
        })
      }
    },

    setEssence(item, idx) {
      //没有了
      let msg = '已设置精华';
      if (item.isEssence) {
        item.isEssence = false;
        msg = '已取消精华';
      } else {
        item.isEssence = true;
      }
      this.$message({ message: msg, type: 'success', offset: 50 });
    },
    handleSelect(item) {
      console.log(item);
    },
    querySearchAsync(queryString, cb) {
      let result = queryString ? this.findList.filter(this.createStateFilter(queryString)) : this.findList;
      result = result.map(item => {
        item.value = `工号:${item.code} 部门:${item.position} 姓名:${item.name}`;
        return item;
      });
      cb(result);
      // clearTimeout(this.timeout);
      //     this.timeout = setTimeout(() => {
      //       cb(result);
      //     }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return state => {
        return (
          state.name.toLowerCase().indexOf(queryString.toLowerCase()) != -1 ||
          state.code.toLowerCase().indexOf(queryString.toLowerCase()) != -1 ||
          state.position.toLowerCase().indexOf(queryString.toLowerCase()) != -1
        );
      };
    },
    viewTopic(data) {
      if (data.confidentialityLevel == '内部') {
        this.$router.push({ path: '/case/detail', query: { id: data.id } })
      } else {
        this.$message.warning("非内部密级案例不能查看");
      }

    }
  }
};
</script>

<style lang="scss" scoped>
.rank_footer{
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: #fff;
  padding-right: 20px;
}
::v-deep .el-dialog__header{
  border-bottom: 1px solid #f0f0f1;
}
::v-deep .el-textarea__inner{
  height: 100px !important;
}
.best_card{
  .card_item{
    display: flex;
    justify-content: start;
    margin-bottom: 20px;
    .card_title{
      width: 94px;
      min-width: 94px;
      display: flex;
      align-items: center;
      justify-content: end;
      margin-right: 14px;
      .icon{
        width:8px;
        height: 8px;
        background: url('../../assets/images/asterisk.png') no-repeat;
        background-size: 100%;
      }
      .text{

      }
    }
  }
}
.article-status1 {
  padding: 3px;
  border: 1px dotted #1ea0fa;
  color: #1ea0fa;
}

.article-status2 {
  padding: 3px;
  border: 1px dotted #00aa00;
  color: #00aa00;
}

.article-status3 {
  padding: 3px;
  border: 1px dotted #ff0000;
  color: #ff0000;
}

.article-list {
  margin: 5px 0;
  border: 1px solid #dddddd;
  padding: 10px;
}

.article-info {
  .article-info-title {
    font-size: 16px;
    font-weight: 400;
    height: 40px;
    line-height: 40px;

    .article-info-date {
      width: 150px;
      height: 40px;
      line-height: 40px;
      float: right;
      font-weight: 200;
      color: #999999;

      i {
        margin-right: 5px;
      }
    }
  }

  .article-info-summary {
    height: 65px;
    color: #999999;
  }

  .article-info-tools {
    height: 30px;

    .article-info-tools-auth {
      float: left;
      font-size: 13px;
      color: #999999;

      img {
        margin-right: 10px;
        width: 30px;
        border: 1px solid #eee;
        border-radius: 50%;
        vertical-align: middle;
      }
    }

    .article-info-tools-btns {
      float: right;

      .article-info-tools-btn {
        margin: 0 0 0 15px;
      }
    }
  }
}

.case-row-btn {
  line-height: 25px;

  button {
    height: 20px;
    padding: 3px 20px;
  }
}

.el-form {
  .el-form-item {
    margin-bottom: 10px;
  }
}
</style>
