<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>媒体推广</span>   <span style="padding:0 5px;">></span>  <span style="color:#000000e6">内容管理</span></div>
      </div>
    <!-- 搜索 -->
    <div class="formSearch">
      <el-form
        :model="formSel"
        :inline="true"
      >
        <el-form-item label="内容分类"  prop="contentCategory">
          <el-select v-model="formSel.contentCategory" placeholder="请选择" style="width: 168px;">
            <el-option label="宣传资料" value="宣传资料" />
            <el-option label="宣传文案" value="宣传文案" />
            <el-option label="宣传软文" value="宣传软文" />
          </el-select>
        </el-form-item>
        <el-form-item label="渠道类型" prop="channelType">
          <el-select v-model="formSel.channelType" placeholder="请选择" style="width: 168px;">
            <el-option label="APP" value="APP" />
            <el-option label="电视" value="电视" />
            <el-option label="广播" value="广播" />
            <el-option label="网站" value="网站" />
          </el-select>
        </el-form-item>
        <el-form-item label="主题分类" prop="channelCategory">
                      <el-select v-model="formSel.channelCategory" placeholder="请选择" style="width: 168px;">
                        <el-option :label="item.channelName" :value="item.channelName
        " v-for="(item,index) in qudaoData" :key="item.id"/>
                      </el-select>
                    </el-form-item>
        <el-form-item label="发布时间">
          <el-date-picker style="width:168px;" v-model="formSel.createDate" value-format="yyyy-MM-dd HH:mm:ss"
      type="datetime"
           placeholder="选择日期时间"
  >
          </el-date-picker>
        </el-form-item>
      </el-form>


      <div style="width: 16%;">
        <el-button @click="onSubmit"  style="background-color: #3F9B6A;color: #fff">查询
        </el-button>
        <el-button @click="chong"
        class="buttonHover"
           style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置
        </el-button>
      </div>
    </div>
    <div style="margin:0 0 20px 0; display: flex;">
      <el-button icon="el-icon-circle-plus-outline"  @click="addbuss(1)"
        style="background-color: #3F9B6A;color: #fff;">新增</el-button>
        <el-button  @click="caogao"
          style="background-color: #3F9B6A;color: #fff;">草稿箱</el-button>
          <el-button  style="background-color: #fff;color: #000;border: 1px solid #B1B1B1;"
            icon="el-icon-folder-add" class="buttonHover" @click="xinFenlei">资料分类管理</el-button>
    </div>
    <div class="fenlan">
        <div class="souLei">
          <div style="line-height:42px;height:42px;background-color:#f2f3f5;border-bottom:1px solid #d7d7d7;padding-left:12px;color:#0009">
            标签分类
          </div>
          <div calss="souList">
            <div class="souTabs">
                 <div style="padding: 5px 0 0 10px;color:#000000e6;line-height:40px;cursor: pointer;" >
                   <span @click="getFenAll">全部分类</span>
                 <span style="font-size: 15px !important;color:#606266">
                   <i class="el-icon-circle-plus" @click="xinFenlei()" style="padding: 5px;"></i>
                 </span>
                 </div>
                 <el-tree :data="xianFenlei" :props="defaultProps" @node-click="handleNodeClick" :expand-on-click-node="false">
                   <div class="custom-tree-node" slot-scope="{ node, data }">
                     <span>{{ node.label }}</span>
                     <span style="font-size: 15px !important;">
                       <i class="el-icon-circle-plus" @click="xinFenlei(node,data)" style="padding-right: 5px;"></i>
                       <i class="el-icon-delete-solid" @click="() => fenDelete(node, data)"></i>
                     </span>
                   </div>
                 </el-tree>
            </div>
          </div>
        </div>
      <!-- 搜索分类 -->

      <div class="tableList">
          <div>
          <!-- 表格 -->

          <el-table :data="tableData"
             :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
             align="left">
            <el-table-column label="序号"  min-width="100" prop="id" >
              <template slot-scope="scope">
                {{scope.$index +1 }}
                </template>
            </el-table-column>
            <el-table-column label="渠道分类" prop="channelCategory"  min-width="150">
            </el-table-column>
            <el-table-column label="内容分类" prop="contentCategory"  min-width="120">

            </el-table-column>
            <el-table-column label="渠道类型" prop="channelType"  min-width="200">

            </el-table-column>
            <el-table-column label="备注" prop="remarks"  min-width="150" >
            </el-table-column>
            <el-table-column prop="createDate" label="创建时间"  min-width="200" >

            </el-table-column>

            <el-table-column label="操作"  min-width="250">
              <template slot-scope="scope">
                <div @click="addbuss(2,scope.row)" class="tableBtn greens">查看</div>
                <div @click="addbuss(3,scope.row)" class="tableBtn greens">编辑</div>
                <div @click="handleDelete(scope.row)" class="tableBtn greens">删除</div>
              </template>
            </el-table-column>
          </el-table>
          <div class="fenye">
            <el-pagination class="pagination" :hide-on-single-page="flag" background small :current-page="currentPage" :page-size="pageSize" layout="total,->,prev, pager,next" :total="total "
              @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </div>
      </div>
          </div>


     </div>

    <!-- 新建弹框 -->
    <el-dialog :title="index == 1?'新增':index == 2?'详情':'编辑'" :visible.sync="ggXin" custom-class="dialog_css_Xq"
      style="padding: 0;" width="50%" center :close-on-click-modal="false" :show-close="false">
      <div>
        <div style="margin-bottom: 20px;">
          <el-form ref="jibenFrom" :model="formInline" :rules="rules" label-width="80px">
            <el-form-item label="资料分类" prop="channelClassification">
              <el-cascader
                      v-model="formInline.channelClassification"
                       :options="cascaderList"
                        @change="ADDChange"
                        :props="{ checkStrictly: true }"
                         :show-all-levels="false"
                       clearable
                        :disabled="index == 1?false:index == 2?true:false"
                       style="width: 100%;"
                   ></el-cascader>

            </el-form-item>
            <el-form-item label="渠道分类" prop="channelCategory">

              <el-select v-model="formInline.channelCategory" placeholder="请选择"
                :disabled="index == 1?false:index == 2?true:false" style="width:100%">
                <el-option :label="item.channelName" :value="item.channelName
" v-for="(item,index) in qudaoData" :key="item.id"/>
              </el-select>
            </el-form-item>
            <el-form-item label="内容分类"  prop="contentCategory">
              <el-select v-model="formInline.contentCategory" placeholder="请选择"
                :disabled="index == 1?false:index == 2?true:false" style="width:100%">
                <el-option label="宣传资料" value="宣传资料" />
                <el-option label="宣传文案" value="宣传文案" />
                <el-option label="宣传软文" value="宣传软文" />
              </el-select>
            </el-form-item>
            <el-form-item label="内容编制"  prop="contentCompilation">
            <wang-editor v-model="formInline.contentCompilation" ref="editor" :height="200"  v-if="index == 3 || index ==1"></wang-editor>
            <div style="padding:20px;" v-if="index == 2" v-html="formInline.contentCompilation"></div>
            </el-form-item>
            <el-form-item label="附件上传"  prop="accountNumber">
            <el-upload class="upload-demo" ref="upload"  :on-remove="handleRemove"
                              :action="uploadFileUrl" :on-success="handleUploadSuccess" :file-list="fileData"
                               :auto-upload="true" v-if="index ==3 || index ==1">
                              <el-button style="background-color: #fff;color: #3F9B6A;border: 1px solid #dcdfe6;"  class="buttonHover" v-if="fileData.length==0">+点击上传</el-button>
                            </el-upload>
                            <div  style="padding:20px;"  v-if="index == 2">
                                    {{formInline.attachmentUpload[0]&&formInline.attachmentUpload[0].name?formInline.attachmentUpload[0].name:''}}
                            </div>
            </el-form-item>
            <el-form-item label="渠道类型" prop="channelType">
              <el-select v-model="formInline.channelType" placeholder="请选择"
                :disabled="index == 1?false:index == 2?true:false" style="width:100%">
                <el-option label="APP" value="APP" />
                <el-option label="电视" value="电视" />
                <el-option label="广播" value="广播" />
                <el-option label="网站" value="网站" />
              </el-select>
            </el-form-item>
            <el-form-item label="APPKEY" v-if="index==1?true:false" prop="appKey">
              <el-input v-model="formInline.appKey"  placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="APP图片" v-if="index==1?true:false" prop="appImage" style="margin-bottom:20px;">
              <upimg v-model="formInline.appImage" :limit="1" :fileSize="1" :isShowTip="false"></upimg>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="formInline.remarks" :rows="4"
                :disabled="index == 1?false:index == 2?true:false"></el-input>
            </el-form-item>

          </el-form>

        </div>
        <div style="display: flex;justify-content: flex-end;">
          <el-button plain @click="closeFn(1)"
          class="buttonHover"
            style="background-color: #fff;color: #000;border: 1px solid #dcdfe6;">返回</el-button>
          <el-button plain @click="bianji()" v-if="index == 2"
            style="background-color: #3F9B6A;color: #fff;border-color: #3F9B6A;">编辑</el-button>
            <el-button plain @click="addCheck(index,0)" v-if="index!= 2"
              style="background-color: #3F9B6A;color: #fff;border-color: #3F9B6A;">暂存</el-button>
          <el-button plain @click="addCheck(index,1)" v-if="index!= 2"
            style="background-color: #3F9B6A;color: #fff;border-color: #3F9B6A;">确定</el-button>
        </div>
      </div>

    </el-dialog>
<el-dialog title="草稿箱" :visible.sync="caogaoshow" custom-class="dialog_css_Xq"
      style="padding: 0;" width="70%" center :close-on-click-modal="false" :show-close="false">
      <div>
        <div style="margin-bottom: 20px;">
          <el-table :data="caoList"
             :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
             align="left">
            <el-table-column label="序号"  min-width="100" prop="id" >
              <template slot-scope="scope">
                {{scope.$index +1 }}
                </template>
            </el-table-column>
            <el-table-column label="渠道分类" prop="channelCategory"  min-width="150">
            </el-table-column>
            <el-table-column label="内容分类" prop="contentCategory"  min-width="120">

            </el-table-column>
            <el-table-column label="渠道类型" prop="channelType"  min-width="200">

            </el-table-column>
            <el-table-column label="备注" prop="remarks"  min-width="150" >
            </el-table-column>
            <el-table-column prop="createDate" label="创建时间"  min-width="200" >

            </el-table-column>

            <el-table-column label="操作"  min-width="250">
              <template slot-scope="scope">
                <div @click="shiyong(1,scope.row)" class="tableBtn greens">使用</div>
                <div @click="addbuss(2,scope.row)" class="tableBtn greens">查看</div>
                <div @click="addbuss(3,scope.row)" class="tableBtn greens">编辑</div>
                <div @click="handleDelete(scope.row)" class="tableBtn greens">删除</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="display: flex;justify-content: flex-end;">
          <el-button  @click="caogaoshow=false"
          class="buttonHover"
            style="background-color: #fff;color: #000;border: 1px solid #dcdfe6;">返回</el-button>
        </div>
      </div>

    </el-dialog>
    <el-dialog  :visible.sync="xinlei" custom-class='xiaoguo_css' style="padding: 0;" width="50%"
                      center :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
                      <div style="padding:15px;background-color:#F9F9F9;font-size:14px;border:1px solid #ECECEC;margin-bottom:20px;display: flex;justify-content: space-between;">
                            <div>新增</div>
                      </div>
                       <div style="padding:0 36px;">
                         <el-form label-position="right" ref="jibenFrom" :model="xinADD"  label-width="120px"
                                style="position: relative">
                                    <el-form-item label="上级分类" class="grid-content bg-purple device-from" prop="fenleis">
                                      <el-cascader
                                                v-model="xinADD.parentId"
                                               :options="cascaderList"
                                                @change="fenleiChange"
                                                :props="{ checkStrictly: true }"
                                                 :show-all-levels="false"
                                               clearable
                                               style="width: 100%;"
                                           ></el-cascader>
                                    </el-form-item>
                                    <el-form-item label="分类名称" class="grid-content bg-purple device-from" prop="planName">
                                      <el-input v-model="xinADD.classificationName" placeholder="请输入" />
                                        </el-form-item>
                         </el-form>
                       </div>

    <div style="display: flex;justify-content: flex-end;padding: 10px 20px 10px 0">
    <el-button  class="buttonHover"
                  style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
          @click="fenqing" >返回</el-button>
        <el-button plain @click="sevLei"  style="background-color: #3F9B6A;color: #fff;" >保存
        </el-button>
      </div>
                    </el-dialog>
  </div>

</template>

<script>

  import {
    quGetAll,
    quGetOne,
    quAdd,
    quEdit,
    quDel,
  } from '@/api/account.js'
  import {
    contentAll,
    contentAdd,
    contentEdit,
    contentDel,
  } from '@/api/contentMant.js'
  import {
    cereGet,
    cereAdd,
    cereEdit,
    cereDel
  } from '../../api/activityBz'
  import upimg from "@/components/ImageUpload/index"
  import wangEditor from "@/components/editor/index"
  import {
    uploadUrl
  } from '@/utils/request'
  export default {
    components: { upimg,wangEditor},
    data() {
      return {
        uploadFileUrl: uploadUrl, // 请求地址
        currentPage: 1,
        total: 100,
        flag: false,
        pageSize: 10,
        ggXin: false,
        index: 1,
        pageNum: 1, // 当前页
        fenlei: [],
        fenleiInex:0,
        formInline: {
          channelCategory:'',
          contentCategory:'',
          contentCompilation:'',
          channelType:'',
          appKey:'',
          appImage:'',
          remarks:'',
          channelClassification:''
        },
        planName: '',
        chaName: '', //查询
        formSel:{
          contentCategory:'',
          channelType:'',
          channelCategory:'',
          createDate:'',
          pageNumber: 1,
          pageSize: 10,
              draftStatus:1,
        },

        tableData: [],
        pageindex: {
          pageNumber: 1,
          pageSize: 10,
          draftStatus:1,
        },
       xinlei:false,//分类管理框
       fentcont:true,//分类管理控制
       cascaderList:[],
       xianFenlei:[],
       xinADD:{
         classificationName:'',
         classificationCode:'',
         parentId:'',
         classificationType:'4'
       },
       defaultProps:{
            children: 'children',
            label: 'classificationName'
       },
        qudaoData:[],
        fileData:[],
        caogaoshow:false,
        caoList:[]
      }
    },
    computed: {},
    mounted() {
      this.getAll()
    },
    methods: {
      async getAll() {

         const tad= await contentAll(this.pageindex)
 this.tableData = tad.data.content
        this.total = tad.data.content.length
        let page = {
          pageNumber: 1,
          pageSize: 10,
          classificationType:'4'
        }
        const fenleis =  await cereGet(page)
        this.fenlei = fenleis.data
        this.cascaderList =this.transformData(fenleis.data)
          this.xianFenlei = this.trsData(fenleis.data)
      },
      async getFenAll(){
         this.pageindex={
         pageNumber: 1,
         pageSize: 10
       }
 const tad= await contentAll(this.pageindex)
 this.tableData = tad.data.content
        this.total = tad.data.content.length
       },
      async getcaogao() {
        let pageindex =  {
          pageNumber: 1,
          pageSize: 10,
          draftStatus:0,
        }
        const tad= await contentAll(pageindex)
      this.caoList = tad.data.content
           },
           transformData(data) {
               return data.map(item => ({
                 value: item.cereClassification.id,
                 label: item.cereClassification.classificationName,
                 children: item.childClassifications.map(child => ({
                   value: child.id,
                   label: child.classificationName,
                 })),
               }));
             },
             trsData(data){
               return data.map(item => ({
                 ...item.cereClassification,
                    children: item.childClassifications || []
                   }));
             },
      //获取当前时间
       updateCurrentTime() {
            const now = new Date();
            const year = now.getFullYear();
            const month = (now.getMonth() + 1).toString().padStart(2, '0');
            const day = now.getDate().toString().padStart(2, '0');
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            const seconds = now.getSeconds().toString().padStart(2, '0');

            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
          },
      addbuss(val, item) {
        if (val == 1) {
          this.formInline = {
          channelCategory:'',
          contentCategory:'',
          contentCompilation:'',
          channelType:'',
          channelClassification:'',
          appKey:'',
          appImage:'',
          remarks:'',
        }
     quGetAll(this.pageindex).then(res=>{
          this.qudaoData = res.data.content
        })

        } else if (val === 2 || val === 3) {
          this.formInline.id = item.id
          this.formInline = item
          if(typeof item.attachmentUpload == 'string' && item.attachmentUpload !=''){
           this.formInline.attachmentUpload =  JSON.parse(this.formInline.attachmentUpload)
           this.fileData = this.formInline.attachmentUpload
          }
        }
        this.index = val
        this.ggXin = true
      },
      bianji() {
        this.index = 3
      },
      // 确定
      addCheck(index,val) {
        this.$refs.jibenFrom.validate((valid) => {
            if (valid) {
              if(index == 1){
                if(this.fileData.length !='0'){
                   this.formInline.attachmentUpload = JSON.stringify(this.fileData)
                }
                this.formInline.draftStatus = val
                this.formInline.createDate = this.updateCurrentTime()
                contentAdd(this.formInline).then(res => {
                  this.getAll()
                  this.ggXin = false
                })
              }else{
                if(this.fileData.length !='0'){
                   this.formInline.attachmentUpload = JSON.stringify(this.fileData)

                }

                contentEdit(this.formInline).then(res => {
                  this.getAll()
                  this.ggXin = false
                })
              }
            }else{
                       this.$message({
                           message: '请填写数据',
                           customClass: 'custom-message',
                           offset: 100
                         })
                         return false;
                       }
          }

        )

      },
      async onSubmit() {
        let res = await contentAll(this.formSel)
        this.tableData = res.data.content
        this.total = res.data.content.length
      },
      handleSizeChange() {

      },
      handleCurrentChange() {

      },
      closeFn() {
        this.ggXin = false
        this.index = 1
      },
      handleDelete(item) {
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '是否删除 '),
          ]),
          showCancelButton: true,
          showClose: false,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'oe-dialog-btn',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              contentDel({
                id: item.id
              }).then(res => {
                this.getAll()
                this.getcaogao()
                done();
              })
            } else {
              done();
            }
          }
        })
      },
      chong() {
      this.formSel = {
          contentCategory:'',
          channelType:'',
          channelCategory:'',
          createDate:'',
          pageNumber: 1,
          pageSize: 10
        }
        this.getAll()
      },
      handleClick(tab, event){
        this.fenleiInex = Number(tab.index)
        this.pageindex = {
          pageNumber: 1,
          pageSize: 10
        }
        if(tab.index == '0'){
          this.getAll()
        }else{
        let num = Number(tab.index)
           this.pageindex.channelClassification = this.fenlei[num - 1]
           this.getAll()
        }
      },
      async sevLei(){
             if(this.xinADD.classificationName ==''){
               this.$message({
                 message: '请填写数据',
                 customClass: 'custom-message',
                 offset: 100
               })
               return;
             }
this.xinADD.classificationCode = this.xinADD.classificationName

                  await cereAdd(this.xinADD)
                  this.xinADD={
                  classificationName:'',
                  classificationCode:'',
                  parentId:'',
                  classificationType:'4'
                      }

                  this.xinlei = false
              this.getAll()
            },
       fenleiChange(value){
             this.xinADD.parentId = value[value.length - 1]
       },
       ADDChange(value){
             this.formInline.channelClassification = value[value.length - 1]
       },
       fenleiMenu(item){
           if(item.cereClassification){
              this.pageindex.channelClassification = item.cereClassification.classificationName
           }else{
              this.pageindex.channelClassification = item.classificationName
           }
           this.getAll()
       },
       handleUploadSuccess(response, file, fileList) {
         const fileMsg = {
           name:file.name,
            url: file.response.data.url,
         }
         // 将文件地址存储在 uploadedFiles 数组中
         this.fileData.push(fileMsg);
       },
       handleRemove(file, fileList) {
         this.fileData = []
       },
       caogao(){
       let pageindex =  {
         draftStatus:0,
         pageNumber: 1,
         pageSize: 10
       }
       contentAll(pageindex).then(res=>{
         this.caoList = res.data.content
       })
         this.caogaoshow =true

       },
       shiyong(val,item){

           const h = this.$createElement;
           this.$msgbox({
             title: '消息',
             message: h('p', null, [
               h('span', null, '是否使用 '),
             ]),
             showCancelButton: true,
             showClose: false,
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             customClass: 'oe-dialog-btn',
             beforeClose: (action, instance, done) => {
               if (action === 'confirm') {
                 contentEdit({
                   id: item.id,
                    draftStatus:1
                 }).then(res => {
                   this.getAll()
                   this.getcaogao()
                   done();
                 })
               } else {
                 done();
               }
             }
           })


       },
       async handleNodeClick(data){
           this.pageindex.channelClassification = data.id
           const res = await quGetAll(this.pageindex)
           this.tableData = res.data.content
           this.total = res.data.content.length
        },
       fenqing(){
             this.xinADD={
        classificationName:'',
        classificationCode:'',
        parentId:'',
        classificationType:'4'
            }
             this.xinlei = false
       },
       xinFenlei(node,data){
               if(data){
                 this.xinADD.parentId = data.id
               }
              this.xinlei = true
             },
             fenDelete(node,data){
                     const h = this.$createElement;
                       this.$msgbox({
                                   title: '消息',
                                   message: h('p', null, [
                                     h('span', null, '是否当前分类和子分类删除 '),
                                   ]),
                                   showCancelButton: true,
                                   showClose:false,
                                   confirmButtonText: '确定',
                                   cancelButtonText: '取消',
                                   customClass:'oe-dialog-btn',
                                   beforeClose: (action, instance, done) => {
                                     if (action === 'confirm') {
                                       cereDel({id:data.id}).then(res=>{
                                        this.xinlei = false
                                        this.getAll()
                                         done();
                                       })
                                     } else {
                                       done();
                                     }
                       }
                       })
              },
              fenleiChange(value){
                    this.xinADD.parentId = value[value.length - 1]
              },
              ADDChange(value){
                    this.formInline.channelClassification = value[value.length - 1]
              },
    }
  }
</script>

<style scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .zhuti {
  padding: 0  20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;

  }

  /deep/ .el-form-item__content {
    line-height: 0;
  }

  .tableBtn {
    display: inline-block;
    margin-right: 10px;
  }

  .formSearch {
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: space-between;
  }

  .greens {
    color: #3F9B6A;
  }

  /deep/ .el-table__row {
    font-size: 14px;
    color:#000000e6;
  }

  .fenye {
    margin-top: 20px;
    position: relative;
  }

  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #3F9B6A;
  }

  .el-row {
    margin-bottom: 20px;
  }

  :last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }


  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  /deep/ .el-form--label-top .el-form-item__label {
    padding: 0;
  }


  .pagination {
    text-align: right;
    line-height: 20px;
  }

  /deep/ .el-pagination__total {
    float:left;
  }

/deep/ .bg-purple{
  background: #fff;
  height: 50px;
}
  /deep/ .el-tabs__active-bar {
    background-color: #389865;
  }
  ::v-deep .el-input__inner{
    height:32px;
    line-height:32px;
  }
  ::v-deep .el-select .el-input.is-focus .el-input__inner {
    border-color: #3F9B6A
  }

  ::v-deep .dialog_css_Xq {
    margin-top: 8vh !important;
    margin-left: 25% !important;
    .el-dialog__title {
     font-size: 14px;
     color: #000000e6;
    }
   .el-dialog__header {
      background-color: #fff;
      padding:10px 20px;
    }
  }
  .fenlan {
    display: flex;
  }
::v-deep .el-form-item{
   margin-bottom:16px;
}
  .souLei {
    border: 1px solid #d7d7d7;
    background-color: #fff;
    width:300px;
     margin-right:20px;

  }
  ::v-deep .el-menu{
    border-right:0px;
  }
  ::v-deep .el-menu-item{
    height:36px;
    line-height: 36px;
  }

  ::v-deep .el-submenu__title{
    height:36px;
    line-height: 36px;
    font-weight:600;
    border-radius:4px;
    margin:4px 0;
  }
  ::v-deep .el-menu-item-group__title{
    padding:0px
  }
   ::v-deep .fudan{
        font-weight:600;
       border-radius:4px;
       margin:4px 0;
    }
    ::v-deep .chinddan{
      margin:5px 0;
    }
    ::v-deep .el-tabs__item.is-active {
      color: #3F9B6A;
      opacity: 1;
    }
</style>
<style lang="scss" scoped>
  ::v-deep .souTabs {
    padding:0 15px 0 12px;
    .el-submenu{
      padding:0px;
    }
    .el-menu-item:focus, .el-menu-item:hover{
      background-color: #3F9B6A !important;
    }
    .el-menu-item:hover{
      background-color:#3f9b6a1a !important;
      color:#000 !important;
    }
    .el-tabs--left .el-tabs__header.is-left {
      width: 100%;
      margin-right: 0px;
    }

    .el-tabs--left .el-tabs__item.is-left {
      text-align: center;
    }

    .el-tabs__item.is-active {
      background-color: #DEEBE2;
    }
  }

  ::v-deep .tableList {
  width: 74%;

    .el-button:hover {
      border: none
    }
  }
  ::v-deep .demo-input-suffix {
    display: flex;
    margin-right: 20px;
    width: 75%;
    .el-input__inner{
       height:32px;
    }
  }
  ::v-deep .buttonHover:hover{
    color:#3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }

   ::v-deep label{
     font-weight:100
   }
   ::v-deep .xiaoguo_css{
     .el-dialog__body{
       padding:0px !important;
     }
   }
</style>
