<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>
        <!-- 搜索 -->
        <div class="formSearch">
          <div class="demo-input-suffix">
            <div style="width: 68px;height:36px;line-height:32px;">方案名称</div>
            <el-input placeholder="请输入" v-model="planName" style="width:168px;">
            </el-input>
          </div>
          <div>
            <el-button @click="onSubmit"  style="background-color: #3F9B6A;color: #fff">查询
            </el-button>
            <el-button @click="resetting"
            class="buttonHover"
               style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置
            </el-button>
          </div>
        </div>
        <div style="margin:20px 0;">
          <div>
            <el-button icon="el-icon-circle-plus-outline"  @click="create"
              style="background-color: #3F9B6A;color: #fff;">新增</el-button>
         <el-button  style="background-color: #E24E5A;color: #fff;" icon="el-icon-delete" @click="handleDelete" class="DelBtnHover">删除</el-button>
            <!-- <el-button  style="background-color: #3F9B6A;color: #fff;" @click="duibi">效果对比</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>
        <!-- 分栏 -->
        <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" v-if="node.level!=2" @click="xinFenlei(node,data)" style="padding-right: 7px;"></i>
						 <i class="el-icon-edit" @click="editFenlei(node, data)"
						 	style="padding-right: 7px;"></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.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                @selection-change="handleSelectionChange"  tooltip-effect="dark" align="left"
                 :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
                ref="mulTable">
                <el-table-column type="selection" min-width="5%">
                </el-table-column>
                <el-table-column label="文件名称" min-width="30%"  prop="schemeTitle" >
                </el-table-column>
                <el-table-column label="类型" prop="promotionContent" min-width="15%" >
                </el-table-column>

                <el-table-column label="审批状态" prop="state" min-width="15%" >
<template slot-scope="scope">
                   {{scope.row.state == ''?'待提交':scope.row.state == '1'?'待审批':scope.row.state == '2'?'部门领导审批':scope.row.state == '3'?'公司领导审批':scope.row.state == '4'?'其他审批':scope.row.state == '5'?'审核通过':'已驳回'}}
                   </template>
                </el-table-column>
                <el-table-column label="修改时间" prop="createDate" min-width="20%"  >
                </el-table-column>
                <!-- <el-table-column prop="eventEndTime" label="上传人员" min-width="80" >

                </el-table-column> -->
                <el-table-column label="操作" min-width="20%" fixed="right">
                  <template slot-scope="scope">
                    <div @click="handleEditForm(scope.row,1)" class="tableBtn greens">查看</div>
                    <div @click="handleEditForm(scope.row,2)" class="tableBtn greens" v-if="scope.row.state == ''">修改</div>

                    <div @click="OAshen(scope.row)" class="tableBtn greens" v-if="scope.row.state == ''">提交审核</div>
                    <!-- <div class="tableBtn greens" @click="xiaoguo(scope.row)">执行情况及效果评估</div> -->
                    <!-- <div class="tableBtn greens" >策略调整</div> -->
                  </template>
                </el-table-column>
              </el-table>
              <div class="fenye">
                <div>
                  <el-button @click="tableAll"
                  class="buttonHover"
                    style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;">选择全部
                  </el-button>
                  <el-button @click="toggleSelection(tableData)"
                  class="buttonHover"
                    style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;">反向选择
                  </el-button>
                </div>
                <el-pagination class="pagination" :hide-on-single-page="flag" background small
                  :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
                  layout="prev,pager,next" :total="total" @size-change="handleSizeChange"
                  @current-change="handleCurrentChange" />
              </div>

            </div>
          </div>
        </div>

        <!-- 详情 -->
        <el-dialog :title="wangShow==false?'修改页 ':'详情页'" :visible.sync="ggXin"  style="padding: 0;" width="65%"
          center :close-on-click-modal="false" :close-on-press-escape="false" :show-close='false' top="5%">
              <div style="padding: 10px 20px;">
                    <el-form   ref="ruleFormInfo" :model="secondData" label-width="120px"
                      style="position: relative">
                      <el-form-item label="方案标题" class="grid-content bg-purple device-from" prop="name">
						  <div v-if="wangShow">{{secondData.schemeTitle}}</div>
                        <el-input v-else v-model="secondData.schemeTitle" placeholder="请输入"/>
                      </el-form-item>
                      <el-form-item label="封面海报" class="grid-content bg-purple" prop="name">
                        <div style="margin:0 10px;">
     <upimg filePath="tuiguang" :value="secondData.coverImage" inputtype="coverImage" :limit="1" v-if="wangShow==false" @changimg="e=>changimg(e,'coverImage')"></upimg>
                          <img :src="$baseURL+secondData.coverImage" alt="" style="width:150px;height: 150px;" v-if="wangShow"/>
                          </div>
                      </el-form-item>
                      <el-form-item label="宣传内容" class="grid-content bg-purple" prop="name">
                        <div  v-if="wangShow" v-html="secondData.updateUser"></div>
                        <wang-editor v-model="secondData.updateUser" ref="editor" :read="false" v-if="!wangShow"></wang-editor>
                      </el-form-item>
                      <!-- <el-form-item label="跳转链接" class="grid-content bg-purple" prop="name">
						  <div v-if="wangShow">{{secondData.eventAddrs}}</div>
                        <el-input v-model="secondData.eventAddrs" placeholder="请输入" v-else/>
                      </el-form-item> -->
                    </el-form>
                </div>
              <div style="display:flex;padding-right:20px;justify-content: flex-end;padding-bottom:20px;">
                <el-button @click="ggXin=false"
                  style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;" class="buttonHover">返回
                </el-button>
                <el-button @click="TuiEdit"  v-if="!wangShow"
                  style="color: #fff;background-color: #3F9B6A;">确定
                </el-button>
              </div>
        </el-dialog>

        <!-- 活动效果分析 -->
        <el-dialog  :visible.sync="xiaoguoBox" custom-class='fenxi_css' style="padding: 0;" width="75%"
                  center :close-on-click-modal="false" :close-on-press-escape="false">
                  <div style="padding:15px;background-color:#F9F9F9;font-size:14px;border:1px solid #ECECEC;margin-bottom:20px">
                      渠道效果分析
                  </div>
                  <div style="padding:0 20px;">
                    <div style="font-size:12px;margin-bottom:10px;">成本分析</div>
                        <div style="display:flex;padding:10px 0;">
                            <div style="margin-right:40px;width:17%">
                              <div style="color:#BBBBBB;font-size:10px;">吸引游客流量</div>
                              <div style="font-size:14px;padding:10px 0"><span style="font-size:20px;font-weight:600;">4289</span>人</div>
                              <div style="color:#BBBBBB;font-size:10px;margin-bottom:10px">+45%</div>
                              <div style="height:5px;background-color:#FEC03D;"></div>
                            </div>
                            <div style="margin-right:40px;width:17%">
                              <div style="color:#BBBBBB;font-size:10px;">参与人数</div>
                              <div style="font-size:14px;padding:10px 0"><span style="font-size:20px;font-weight:600;">4289</span>人</div>
                              <div style="color:#BBBBBB;font-size:10px;margin-bottom:10px">+45%</div>
                              <div style="height:5px;background-color:#58A3F7;"></div>
                            </div>
                            <div style="margin-right:40px;width:17%">
                              <div style="color:#BBBBBB;font-size:10px;">直接收益</div>
                              <div style="font-size:14px;padding:10px 0"><span style="font-size:20px;font-weight:600;">4289</span>人</div>
                              <div style="color:#BBBBBB;font-size:10px;margin-bottom:10px">+45%</div>
                              <div style="height:5px;background-color:#4BCED0;"></div>
                            </div>
                            <div style="margin-right:40px;width:17%">
                              <div style="color:#BBBBBB;font-size:10px;">间接收益</div>
                              <div style="font-size:14px;padding:10px 0"><span style="font-size:20px;font-weight:600;">4289</span>人</div>
                              <div style="color:#BBBBBB;font-size:10px;margin-bottom:10px">+45%</div>
                              <div style="height:5px;background-color:#3F9B6A;"></div>
                            </div>
                            <div style="margin-right:40px;width:17%">
                              <div style="color:#BBBBBB;font-size:10px;">投入生产比</div>
                              <div style="font-size:14px;padding:10px 0"><span style="font-size:20px;font-weight:600;">4289</span>人</div>
                              <div style="color:#BBBBBB;font-size:10px;margin-bottom:10px">+45%</div>
                              <div style="height:5px;background-color:#8167F5;"></div>
                            </div>
                        </div>
                  </div>
                  <div style="padding:15px;background-color:#F9F9F9;font-size:12px;border:1px solid #ECECEC;margin-bottom:20px">
                      策划主题占比
                  </div>
                  <div style="padding:0 20px;display:flex;justify-content: space-around;color:#999999">
                      <div style="display:flex;width:24%;align-items: center">
                        <el-progress type="circle" :percentage="100"></el-progress>
                        <div style="margin-left:30px;">
                          <div style="margin-bottom: 15px;">主题1</div>
                          <div><span style="font-size:26px;">53.2</span>万流量</div>
                        </div>
                      </div>
                      <div style="display:flex;width:24%;align-items: center">
                        <el-progress type="circle" :percentage="25"></el-progress>
                        <div style="margin-left:30px;">
                          <div style="margin-bottom: 15px;">主题2</div>
                          <div><span style="font-size:26px;">53.2</span>万流量</div>
                        </div>
                      </div>
                      <div style="display:flex;width:24%;align-items: center">
                        <el-progress type="circle" :percentage="50"></el-progress>
                        <div style="margin-left:30px;">
                          <div style="margin-bottom: 15px;">主题3</div>
                          <div><span style="font-size:26px;">53.2</span>万流量</div>
                        </div>
                      </div>
                      <div style="display:flex;width:24%;align-items: center">
                        <el-progress type="circle" :percentage="75"></el-progress>
                        <div style="margin-left:30px;">
                          <div style="margin-bottom: 15px;">主题4</div>
                          <div><span style="font-size:26px;">53.2</span>万流量</div>
                        </div>
                      </div>
                  </div>
                    <div style="padding:0 20px;margin-top:20px;">
                      <div style="padding:55px 10px 10px 10px;background-color:#fff;position:relative">
                        <div style="position: absolute;top: 60px;right: 10px; z-index: 10;">
                           <el-radio-group v-model="radio1"  style="margin-right:10px">
                                <el-radio-button label="本周"></el-radio-button>
                                <el-radio-button label="本月"></el-radio-button>
                                <el-radio-button label="今年 "></el-radio-button>
                                <el-radio-button label="自定义"></el-radio-button>
                              </el-radio-group>
                              <el-date-picker
                                  v-if="radio1=='自定义'"

                                    style="width:250px"
                                    v-model="radio1_time"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                  </el-date-picker>
                        </div>
                              <el-tabs type="border-card"  @tab-click="xiaoguoTab">
                                <el-tab-pane label="整体效果分析">
                                  <el-table :data="dataList"
                                    :header-cell-style="{fontSize: '12px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
                                    :border="true" style="width: 100%">
                                    <el-table-column label="渠道" width="auto" min-width="12%"  align="center">
                                      <template slot-scope="scope">
                                        {{scope.$index + 1}}
                                            </template>
                                    </el-table-column>
                                    <el-table-column label="阅读量" width="auto" min-width="15%"  align="center">
                                      <template slot-scope="scope">
                                        {{scope.$index + 1}}
                                            </template>
                                    </el-table-column>
                                    <el-table-column label="点赞量" width="auto" min-width="15%"  align="center">
                                      <template slot-scope="scope">
                                        {{scope.$index + 1}}
                                            </template>
                                    </el-table-column>
                                    <el-table-column label="评论量" prop="name" width="auto" min-width="15%">
                                      <template slot-scope="scope">
                                        {{scope.row.name}}
                                            </template>
                                    </el-table-column>
                                    <el-table-column label="播放量" prop="name" width="auto" min-width="15%">
                                      <template slot-scope="scope">
                                        {{scope.row.name}}
                                            </template>
                                    </el-table-column>
                                    <el-table-column label="回访人数" prop="name" width="auto" min-width="15%">
                                      <template slot-scope="scope">
                                        {{scope.row.name}}
                                            </template>
                                    </el-table-column>
                                  </el-table>
                                  </el-tab-pane>
                                <el-tab-pane label="纵向分析">

                                </el-tab-pane>
                                <el-tab-pane label="横向分析">

                                </el-tab-pane>
                              </el-tabs>
                        </div>

                  </div>
                </el-dialog>
      </div>
    </div>
    <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>{{editFen == 0 ?'新增':'编辑'}}</div>
                      </div>
                       <div style="padding:0 36px;">
                         <el-form label-position="right" ref="fenFrom" :model="xinADD" :rules="rules" label-width="120px"
                                style="position: relative">
                                    <el-form-item label="上级分类" class="grid-content bg-purple device-from" prop="parentId">
                                      <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="classificationName">
                                      <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>
                    <!-- 效果对比 -->
                    <el-dialog :visible.sync="xiaoDui" custom-class='dialog_css' style="padding: 0;" width="60%" center
                      :close-on-click-modal="false" :close-on-press-escape="false">
                      <div style="padding: 0 50px;display:flex;justify-content: space-evenly;">
                        <div style="width:30%">
                          <div style="display: flex;">
                            <div style="margin-right: 10px;padding: 10px 0;">
                              <div>调整前方案</div>
                              <div style="font-size: 22px;color: #3F9B6A;font-weight: 600;margin: 10px 0;">{{xiaoduiObj.bili}}</div>
                              <div style="font-size: 16px;color: #3F9B6A;font-weight: 600;">总流量</div>
                            </div>
                            <el-progress type="circle" :percentage="25" :show-text="false" :width="100">
                            </el-progress>
                          </div>
                          <div style="padding:30px 0">计划任务（完成度）</div>
                          <div  class="jindutiao">
                            <div style="margin-right:10px;width:56px">微信</div>
                            <!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
                            <el-progress
                                style="width: 150px;"
                                :text-inside="true"
                                :stroke-width="24"
                                :percentage="70"
                                status="success"
                                :format="customFormat"
                            ></el-progress>
                          </div>
                          <div  class="jindutiao">
                            <div style="margin-right:10px;width:56px">抖音</div>
                            <!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
                            <el-progress
                                style="width: 150px;"
                                :text-inside="true"
                                :stroke-width="24"
                                :percentage="70"
                                status="success"
                                :format="customFormat"
                            ></el-progress>
                          </div>
                          <div  class="jindutiao">
                            <div style="margin-right:10px;width:56px">小红书</div>
                            <!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
                            <el-progress
                                style="width: 150px;"
                                :text-inside="true"
                                :stroke-width="24"
                                :percentage="70"
                                status="success"
                                :format="customFormat"
                            ></el-progress>
                          </div>
                          <div  class="jindutiao">
                            <div style="margin-right:10px;width:56px">百度</div>
                            <!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
                            <el-progress
                                style="width: 150px;"
                                :text-inside="true"
                                :stroke-width="24"
                                :percentage="70"
                                status="success"
                                :format="customFormat"
                            ></el-progress>
                          </div>
                          <div  class="jindutiao">
                            <div style="margin-right:10px;width:56px">新浪</div>
                            <!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
                            <el-progress
                                style="width: 150px;"
                                :text-inside="true"
                                :stroke-width="24"
                                :percentage="70"
                                status="success"
                                :format="customFormat"
                            ></el-progress>
                          </div>
                          <div  class="jindutiao">
                            <div style="margin-right:10px;width:56px">CCTV1</div>
                            <!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
                            <el-progress
                                style="width: 150px;"
                                :text-inside="true"
                                :stroke-width="24"
                                :percentage="70"
                                status="success"
                                :format="customFormat"
                            ></el-progress>
                          </div>
                        </div>
                        <div style="width:30%">
                          <div style="display: flex;">
                            <div style="margin-right: 10px;padding: 10px 0;">
                              <div>调整后方案</div>
                              <div style="font-size: 22px;color: #3F9B6A;font-weight: 600;margin: 10px 0;">{{xiaoduiObj.bili}}</div>
                              <div style="font-size: 16px;color: #3F9B6A;font-weight: 600;">总流量</div>
                            </div>
                            <el-progress type="circle" :percentage="25" :show-text="false" :width="100">
                            </el-progress>
                          </div>
                          <div style="padding:30px 0">计划任务（完成度）</div>
                          <div  class="jindutiao">
                            <div style="margin-right:10px;width:56px">微信</div>
                            <!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
                            <el-progress
                                style="width: 150px;"
                                :text-inside="true"
                                :stroke-width="24"
                                :percentage="70"
                                status="success"
                                :format="customFormat"
                            ></el-progress>
                          </div>
                          <div  class="jindutiao">
                            <div style="margin-right:10px;width:56px">抖音</div>
                            <!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
                            <el-progress
                                style="width: 150px;"
                                :text-inside="true"
                                :stroke-width="24"
                                :percentage="70"
                                status="success"
                                :format="customFormat"
                            ></el-progress>
                          </div>
                          <div  class="jindutiao">
                            <div style="margin-right:10px;width:56px">小红书</div>
                            <!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
                            <el-progress
                                style="width: 150px;"
                                :text-inside="true"
                                :stroke-width="24"
                                :percentage="70"
                                status="success"
                                :format="customFormat"
                            ></el-progress>
                          </div>
                          <div  class="jindutiao">
                            <div style="margin-right:10px;width:56px">百度</div>
                            <!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
                            <el-progress
                                style="width: 150px;"
                                :text-inside="true"
                                :stroke-width="24"
                                :percentage="70"
                                status="success"
                                :format="customFormat"
                            ></el-progress>
                          </div>
                          <div  class="jindutiao">
                            <div style="margin-right:10px;width:56px">新浪</div>
                            <!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
                            <el-progress
                                style="width: 150px;"
                                :text-inside="true"
                                :stroke-width="24"
                                :percentage="70"
                                status="success"
                                :format="customFormat"
                            ></el-progress>
                          </div>
                          <div  class="jindutiao">
                            <div style="margin-right:10px;width:56px">CCTV1</div>
                            <!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
                            <el-progress
                                style="width: 150px;"
                                :text-inside="true"
                                :stroke-width="24"
                                :percentage="70"
                                status="success"
                                :format="customFormat"
                            ></el-progress>
                          </div>
                        </div>
                      </div>
                    </el-dialog>
   <addAct  :showAdd="addAct" @childClose='childClose' :fenleiName="cascaderList"></addAct>

  </div>
</template>

<script>
  import {
    tuiGetAll,
    deletTui,
    editTui
  } from '@/api/tuiguancehuguanli.js'

  import {
    cereGet,
    cereAdd,
    cereEdit,
    cereDel
  } from '../../api/activityBz'
  import addAct from "./mediaMannaAdd"
  import wangEditor from "@/components/editor/index";
  import upimg from "@/components/ImageUpload/index"
  export default {
components: { addAct,wangEditor,upimg},
    data() {
      return {
        addAct:false,//新增页
        wangShow:false,//详情编辑切换
        secondData: {},
        planName: '',
        planFen:'',
        currentPage: 1,
        total: 0,
        flag: false,
        pageSize: 10,
        ggXin: false,
        fenlei:[],
        formInline: {
          merchantName: '', // 商家名称
          storeId: '', // 编码
          contacts: '', // 联系人
          businessEntity: '', //经营主体
          page: 1, // 当前页
          pageSize: 10 // 每页记录数
        },
        tableData: [],
        multipleSelection:[],
        pageindex: {
          pageNumber: 1,
          pageSize: 10,
        },
		rules:{
			classificationName: [{
					required: true,
					message: '请输入分类名称',
					trigger: 'blur'
				},
			
			],
		},
        options: [{
                  value: 1,
                  label: '类型1'
                }],
                xiaoguoBox:false,
                chart: null, //饼图
                chart1: null, //漏斗图
                radio1:'',
                radio1_time:'',
                dataList:[],
                submenuId:'',
                cascaderList:[],
                xinlei:false,//分类管理框
                fenleiDelId:null,//删除的分类ID
                fentcont:true,//分类管理控制
                xinADD:{
                  classificationName:'',
                  classificationCode:'',
                  parentId:'',
                  classificationType:'3'
                },
                xiaoDui: false, //效果对比
                xiaoduiObj:{
                    bili:'30%',
                    shou:'24300/30000',
                    shouBi:243300 / 30000 * 100,
                    jianjie:'24300/30000',
                    jianjieBi:243300 / 30000 * 100,
                    renli:'24/29',
                    renliBi:24 / 29 * 100,
                    shebei:'33/72',
                    shebeiBi:33 / 72 * 100,
                    xuan:'141/167',
                    xuanBi:141 / 167 * 100,
                    qita:'64/80',
                    qita:64 / 80 * 100
                },//效果对比数据
                defaultProps:{
                     children: 'children',
                     label: 'classificationName'
                },
                xianFenlei:[],
				editFen:0
    }
  },
    created() {
      this.getAll()

    },
    computed: {

    },
    methods: {
      changimg(e,type) {
        this.secondData[type] = e

      },
      //查询全数据
      async getAll() {
        const res = await tuiGetAll(this.pageindex)
        this.tableData = res.data.content
        this.total = res.data.content.length
        let page = {
           pageNumber: 1,
           pageSize: 10,
           classificationType:'3'
         }
        const fenleis =  await cereGet(page)
        this.fenlei = fenleis.data
        this.cascaderList =this.transformData(fenleis.data)
        this.xianFenlei = this.trsData(fenleis.data)
      },
      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 || []
              }));
        },
       async handleNodeClick(data){
           console.log('Node clicked:', data);
           let pageindex= {
             pageNumber: 1,
             pageSize: 10,
             classificationCode:data.id
           }
           const res = await tuiGetAll(pageindex)
           this.tableData = res.data.content
           this.total = res.data.content.length
        },
        async getFenAll(){
           this.pageindex={
           pageNumber: 1,
           pageSize: 10
         }
         const res = await tuiGetAll(this.pageindex)
         this.tableData = res.data.content
         this.total = res.data.content.length
         },
      //删除记录按钮
      async handleDelete() {
            if( this.multipleSelection.length == 1){
                  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') {
                        deletTui({
                         id: this.multipleSelection[0].id
                        }).then(res => {
                          this.getAll()
                          done();
                        })
                      } else {
                        done();
                      }
                    }
                  })
            }else{
               this.$message({
                         message: '请选择一个文件删除',
                         customClass: 'custom-message',
                         offset:100
                       })
            }
      },
      //查询
      async onSubmit() {
        if (this.planName != '') {
          const res = await tuiGetAll({
            schemeTitle: this.planName,
            pageNumber: 1,
            pageSize: 10,
          })
          this.tableData = res.data.content
		  this.total = res.data.content.length
        }
      },
      //详情点击
      handleEditForm(item,val) {
        //1详情  2编辑
        if(val == 1){
          this.wangShow =true
        }else{
          this.wangShow = false
        }
        if (!item) {
          this.formItem = {}
        } else {
          this.formItem = item
        }
        this.ggXin = true
        this.secondData = item
      },
      removeEmptyValues(obj) {
        if (typeof obj !== 'object' || obj === null) {
          return obj;
        }

        const newObj = Array.isArray(obj) ? [] : {};

        for (const key in obj) {
          if (Object.prototype.hasOwnProperty.call(obj, key)) {
            const value = obj[key];
            if (value !== null && value !== undefined && value !== '' && !this.isEmptyObject(value)) {
              if (Array.isArray(newObj)) {
                newObj.push(this.removeEmptyValues(value));
              } else {
                newObj[key] = this.removeEmptyValues(value);
              }
            }
          }
        }

        return newObj;
      },
      isEmptyObject(obj) {
        return Object.keys(obj).length === 0 && obj.constructor === Object;
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },
      handleSizeChange(val) {
        this.pageSize = val
      },
      closeFn() {
        this.ggXin = false
      },
   
      //新增方案
      create() {
         this.addAct = true
      },
      childClose(msg){
        this.addAct = msg
        this.getAll()
      },
      //编辑页
      BianchildClose(msg){
        this.getAll()
      },
      //重置按钮
      resetting() {
        this.planName = ''
        this.eventTheme = ''
        this.getAll()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(val)
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.mulTable.toggleRowSelection(row);
          });
        }
      },
      tableAll() {
this.$refs.mulTable.clearSelection(); // 清除所有选项
         const allRows = this.$refs.mulTable.data; // 获取所有行数据
          allRows.forEach(row => {
            this.$refs.mulTable.toggleRowSelection(row, true); // 全选所有项
          });
      },
      //修改
     async TuiEdit(){
       this.secondData.updateDate = ''
       await editTui(this.secondData)
       this.ggXin = false
       this.getAll()
      },
      TabClick(tab, event){
        console.log(tab, event)
        if(tab.index == '0'){
          this.getAll()
        }else{
          this.tableData = []
        }
      },
      xiaoguo(item) {
        this.xiaoguoBox = true
        this.$nextTick(() => {
          this.shopLiu(this.$refs.shopL);
          this.jiaoLiu(this.$refs.jiaoL);
          this.resizeChart = () => {
            try {
              this.chart.resize();
              this.chart1.resize();
            } catch (error) {
              console.log(error);
            }
          };
          window.addEventListener('resize', this.resizeChart, false); // false代表事件句柄在冒泡阶段执行
        })
      },
      shopLiu(Dom){
                  this.chart = echarts.init(Dom)
                  let option = {
                      tooltip: {
                        trigger: 'item'
                      },

                      legend: {
                         textStyle:{
                                        fontSize: 14
                                    },
                                    icon:'circle',
                        top: '40%',
                        left: '65%'
                      },
                      color:['#50B5FF','#FFC542','#8167F5','#FF7474','#58A3F7'],
                      series: [
                        {
                          type: 'pie',
                          radius: ['40%', '70%'],
                           center:['35%','60%'],
                          avoidLabelOverlap: false,
                          padAngle: 5,
                          itemStyle: {
                            borderRadius: 10
                          },
                          label: {
                            show: false,
                            position: 'center',
                            formatter: '{c}'
                          },
                          emphasis: {
                            label: {
                              show: true,
                              fontSize: 16,
                            }
                          },
                          labelLine: {
                            show: false
                          },
                          data: [
                         { value: 1048, name: '0-20' },
                         { value: 735, name: '20-30' },
                         { value: 580, name: '30-40' },
                         { value: 484, name: '40-50' },
                         { value: 300, name: '50-60' }
                          ]
                        }
                      ]
                  }
                  this.chart.setOption(option)
            },
            jiaoLiu(Dom){
              this.chart1 = echarts.init(Dom)
              let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}%'
        },
        series: [
          {
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 30,
            width: '70%',
            min: 0,
            max: 100,
            minSize: '45%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            color:['#50B5FF','#5AD8A6','#5D7092','#F6BD16'],
            data: [
              { value: 60, name: '访问人数' },
              { value: 40, name: '提交订单' },
              { value: 20, name: '支付成功' },
              { value: 80, name: '到店消费' },
            ]
          }
        ]
      }
              this.chart1.setOption(option)
            },
      xinFenlei(node,data){
        if(data){
          this.xinADD.parentId = data.id
        }
       this.xinlei = true
      },
	  editFenlei(node, data) {
	  	this.editFen = 1
	  	if (data) {
	  		this.xinADD.parentId = data.id
	  		this.xinADD.classificationName = data.classificationName
	  	}
	  	this.xinlei = true
	  },
             sevLei(){
				this.$refs.fenFrom.validate((valid) => {
				  if (valid) {
					  if (this.editFen == 0) {
					  	this.xinADD.classificationCode = this.xinADD.classificationName
					  
					  	 cereAdd(this.xinADD).then(()=>{
							 this.xinlei = false
							 this.xinADD = {
							 	classificationName: '',
							 	classificationCode: '',
							 	parentId: '',
							 	classificationType: '3'
							 }
							 this.$message({
							   message: '保存成功',
							   type: 'success',
							   offset: 100
							 })
							 this.getAll()
						 })
					  } else {
					  	 cereEdit({
					  		id: this.xinADD.parentId,
					  		classificationName: this.xinADD.classificationName
					  	}).then(()=>{
							 this.xinlei = false
							 this.xinADD = {
							 	classificationName: '',
							 	classificationCode: '',
							 	parentId: '',
							 	classificationType: '3'
							 }
							 this.$message({
							   message: '保存成功',
							   type: 'success',
							   offset: 100
							 })
							 this.getAll()
						 })
					  }
				
					  }else{
						this.$message({
						  message: '请填写数据',
						  type: 'error',
						  offset: 100
						})
						return false;  
					  }
				
				})

				
			},
             fenleiChange(value){
                this.xinADD.parentId = value[value.length - 1]
            },
           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();
                                  }
                    }
                    })

            },
             fenqing(){
                   this.xinADD={
              classificationName:'',
              classificationCode:'',
              parentId:'',
              classificationType:'3'
                  }
                  this.xinlei = false
             },
             xiaoguoTab(){

             },
            fenleiMenu(item){
                if(item.cereClassification){
                   this.pageindex.fnelie = item.cereClassification.classificationName
                }else{
                   this.pageindex.fnelie = item.classificationName
                }
                this.getAll()
            },
            duibi(){
                if (this.multipleSelection.length ==2 ) {
                    this.xiaoDui = true
                 }else{
                   this.$message({
                     message: '请选择两个文件对比',
                     customClass: 'custom-message',
                     offset: 100
                   })
                 }
            },
            customFormat(percentage) {
              return `${Math.round(percentage * 10000 / 100)} / 10000`;
            },
            OAshen(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') {
                    editTui({
                      id: item.id,
                      state: '1'
                    }).then(res => {
                      this.getAll()
                    })
                    done();
                  } else {
                    done();
                  }
                }
              })

            },
    }
  }
</script>

<style scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  /deep/ .first-column-bg {
    background-color: #f4f4f5 !important;
  }

  .zhuti {
    padding: 0  20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;

  }




 .formSearch {
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: space-between;
    padding-bottom: 10px;
    align-items: center;
  }

  .greens {
    color: #3F9B6A;
  }

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

  .fenye {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    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;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    /* background: #d3dce6; */
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

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

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

  /deep/ .bg-purple[data-v-0e3fe4ec] {
    background: #fff;
    height: 50px;
  }

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


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

  /deep/ .el-pagination__total {
    margin-top: 4px;
  }

  .dialog_css {
    padding: 0px;
  }

  /deep/.el-dialog__body {
    padding: 0px;
  }

  /deep/ .el-dialog__header {
    background-color: #fff;
  }

  /deep/.el-dialog__title {
    color: #000;
  }

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

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

  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 108px;
    height: 108px;
    line-height: 108px;
    /*text-align: center;*/
  }

  .avatar {
    width: 108px;
    height: 108px;
    display: block;
  }

  ::v-deep .el-tabs__item.is-active {
    color: #3F9B6A;
    opacity: 1;
  }

  /deep/ .el-tabs__nav-wrap::after {
    background-color: #fff;
  }

  ::v-deep .el-tabs__item:hover {
    color: #3F9B6A;
    cursor: pointer;
    opacity: 1;
  }

  /deep/ .el-tabs__active-bar {
    background-color: #389865;
  }

  /deep/ .el-table_2_column_13 {
    font-weight: 100;
  }

  ::v-deep .el-input__inner:focus {
    border: #3F9B6A 1px solid;
  }
::v-deep .el-input__inner{
  height:32px;
  line-height:32px;
}
  ::v-deep .el-input__inner:hover {
    border: #3F9B6A 1px solid;
  }

  ::v-deep .el-select .el-input.is-focus .el-input__inner {
    border-color: #3F9B6A
  }

  ::v-deep .el-form-item__label {
   font-weight: 100;
   font-size: 14px;
   color:#000000e6;
  }

  /* ::v-deep .el-steps .el-step__head.is-wait {
  background-color: red; /* 修改为你想要的颜色 */

  /* 修改未进行步骤的描述文字颜色 */
  ::v-deep .el-steps .el-step__description.is-wait {
    color: #999;
    /* 修改为你想要的颜色 */
  }

  /* 修改未进行步骤的图标颜色 */
  ::v-deep .el-steps .el-step__icon.is-text.is-wait {
    color: #999;
    /* 修改为你想要的颜色 */
  }

  /* 修改未进行步骤的边框色 */
  ::v-deep .el-steps .el-step__line.is-wait {
    border-color: #eee;
    /* 修改为你想要的颜色 */
  }

  ::v-deep .el-steps .is-process .el-step__line {
    background-color: #3F9B6A;
    /* 修改线的颜色 */
  }

  ::v-deep .el-steps .is-process .el-step__title {
    color: #fe7b6a;
    /* 修改进行中步骤的标题颜色 */
  }

  ::v-deep .el-steps .is-process .el-step__icon {
    color: #fff;
    /* 修改进行中步骤的图标颜色 */
    background: #3F9B6A;
    /* 修改进行中步骤图标的边框颜色 */
    border: 0px;
  }

  ::v-deep .el-step__icon-inner {
    line-height: 0
  }

  /* 线条长度 */
  ::v-deep .el-step.is-vertical .el-step__line {
    top: 30px;
    height: 60px;
  }

  .fenlan {
  display: flex;
  }

  .souLei {  border: 1px solid #d7d7d7;
    background-color: #fff;
    width:18%;
     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;
  }
</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: 81%;

    .el-button:hover {
      border: none
    }
  }
  ::v-deep .xiaoguo_css{
    margin-left: 25%;
      .el-dialog__header{
        padding:0;
      }
  .el-tabs--border-card {
            border: none;
            -webkit-box-shadow:none;
            box-shadow:none;
        .el-tabs__content{
          border:  1px solid #E4E7ED;
          padding:0;
        }
        .el-tabs__header{
          background-color: #fff;
            border-bottom:none;
        }
        .el-tabs__content{
            border: none;
         }
        .el-tabs__header .el-tabs__item{
          border: none;
          margin-right: 10px;
          background-color: #F2F2F2;
          font-size:12px;
           border-top-left-radius: 8px;
            border-top-right-radius: 8px;
          padding:0 15px;
        }
        .el-tabs__header .el-tabs__item.is-active{
          color:#fff;
          background-color: #3F9B6A;
        }
        .el-tabs__header .el-tabs__item:not(.is-disabled):hover{
           color:#3F9B6A;
        }
      }
   }
   ::v-deep .demo-input-suffix {
     display: flex;
     margin-right: 20px;
     width: 83%;
     .el-input__inner{
        height:32px;
     }
   }
   ::v-deep .buttonHover:hover{
     color:#3f9b6a !important;
     border-color: #c5e1d2 !important;
     background-color: #ecf5f0 !important;
     outline: none;
   }
   ::v-deep .DelBtnHover:hover{
     color:#fff !important;
     border-color: rgb(226, 78, 90) !important;
     background-color: rgb(226, 78, 90) !important;
     outline: none;
   }
   ::v-deep .el-menu-item.is-active {
       background-color: #3F9B6A !important;
   }
   ::v-deep .fenlei{
     margin-top: 11vh;
     margin-left: 13%;
       .el-dialog__header{
         padding:0;
       }
   .el-tabs--border-card {
             border: none;
             -webkit-box-shadow:none;
             box-shadow:none;
         .el-tabs__content{
           border:  1px solid #E4E7ED;
           padding:0;
         }
         .el-tabs__header{
           background-color: #fff;
             border-bottom:none;
         }
         .el-tabs__content{
             border: none;
          }
         .el-tabs__header .el-tabs__item{
           border: none;
           margin-right: 10px;
           background-color: #F2F2F2;
           font-size:12px;
            border-top-left-radius: 8px;
             border-top-right-radius: 8px;
           padding:0 15px;
         }
         .el-tabs__header .el-tabs__item.is-active{
           color:#fff;
           background-color: #3F9B6A;
         }
         .el-tabs__header .el-tabs__item:not(.is-disabled):hover{
            color:#3F9B6A;
         }
       }
    }
    ::v-deep .jindutiao{
      display:flex;
      align-items:center;
      margin-bottom:15px;
      .el-progress-bar__outer{
        border-radius:0px;
      }
      .el-progress-bar__inner{
        border-radius:0px;
      }
    }
    ::v-deep .el-input__icon{
       line-height:32px;
     }
</style>
