<template>
  <div style="padding: 20px;background-color:#F2F3F5">
    <div class="zhuti">
      <div style="font-weight: bold;font-size: 14px">
          氛围方案管理
      </div>
      <div>

        <!-- 搜索 -->
        <div class="formSearch">
          <div class="demo-input-suffix">
            <div style="width: 100px;line-height:26px;font-weight: bold ">方案名称</div>
            <el-input
              placeholder="请输入"
              size="mini"
              v-model="planName">
            </el-input>
          </div>
          <div class="demo-input-suffix">
            <div style="width: 100px;line-height:26px;font-weight: bold  ">方案主題</div>
            <el-input
              placeholder="请输入"
              size="mini"
              v-model="planTheme">
            </el-input>
          </div>
          </el-form-item>
          </el-form>
         <div style="position: absolute;top:0;right: 5px">
           <el-button
             plain
             @click="onSubmit"
             size="mini"
             style="background-color: #3F9B6A;color: #fff"
           >查询
           </el-button>
           <el-button
             plain
             @click=""
             size="mini"
           >重置
           </el-button>
         </div>
        </div>

        <div style="padding: 20px 20px 20px 0">
          <el-button
            plain
            @click=""
            size="mini"
            style="background-color: #3F9B6A;color: #fff;padding-left: 7px;padding-right: 7px"
          > + 创建氛围方案
          </el-button>
          <el-button
            plain
            @click=""
            size="mini"
            style="background-color: #fff;color: #000;padding-left: 20px;padding-right: 20px"
          > 导入
          </el-button>
        </div>
        <!-- 表格 -->
        <el-table
          :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
          :header-cell-style="{fontSize: '12px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
          :border="true"
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            width="auto"
            min-width="4%"
            prop="id"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="方案编号"
            prop="planNumber"
            width="auto"
            min-width="12%"
          >
          </el-table-column>
          <el-table-column
            label="方案名称"
            prop="planName"
            width="auto"
            min-width="12%"
          >

          </el-table-column>
          <el-table-column
            label="类型"
            prop="planType"
            width="auto"
            min-width="5%"
          >

          </el-table-column>
          <el-table-column
            label="开始时间"
            prop="startTime"
            width="auto"
            min-width="10%"
            sortable
          >
          </el-table-column>
          <el-table-column
            prop="endTime"
            label="结束时间"
            width="auto"
            min-width="10%"
            sortable
          >

          </el-table-column>
          <el-table-column
            label="方案主题"
            prop="planTheme"
            width="auto"
            min-width="10%"
          >
          </el-table-column>
          <el-table-column
            prop="planstate"
            label="状态"
            width="auto"
            min-width="8%"
            sortable
          >
          </el-table-column>
          <el-table-column
            prop="createUser"
            label="创建人"
            width="auto"
            min-width="5%"
          >
          </el-table-column>
          <el-table-column
            prop="createDate"
            label="创建时间"
            width="auto"
            min-width="9%"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            width="auto"
            min-width="17%">
            <template slot-scope="scope">
              <div @click="handleEditForm(scope.$index, scope.row)" class="tableBtn greens">详情</div>
              <div @click="handleEdit(scope.$index, scope.row)" class="tableBtn greens">编辑</div>
              <div @click="handleDelete(scope.$index, scope.row)" class="tableBtn greens">提交审批</div>
              <div @click="handleDelete(scope.$index, scope.row)" class="tableBtn greens">删除</div>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <div style="line-height: 34px">显示第1到第10条记录</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="total,sizes,prev, pager,next"
            :total="total "
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>

        <!-- 新建商家弹框 -->
        <el-dialog title="活动方案详情" :visible.sync="ggXin" custom-class='dialog_css' style="padding: 0;margin:0" width="90%"
                center:close-on-click-modal="false">
                <div>
                  <div style="height: 120px;width: 100%;">
                    <div style="display: flex;padding: 20px;">
                      <div style="width: 150px;height: 80px;border: 1px solid black;"></div>
                      <div style="display: flex;flex-direction: column;justify-content: space-around;padding: 0 10px;font-size: 14px;">
                        <span style="font-weight: 600;margin-bottom: 10px;">绿色出行、低碳生活</span>
                        <span>活动时间：2023-10-23 10:30:00至2023-10-23 10:30:00</span>
                        <span>活动地点:四川省成体市锦江区锦江绿通</span>
                      </div>
                    </div>
                  </div>
                  <div style="height: 80px;width: 100%;border-bottom: 10px solid #B9B9BA;border-top: 10px solid #B9B9BA;
        background-color: #fff;">
                    <el-tabs v-model="activeName"  @tab-click="handleClick" style="padding-left:20px;">
                      <el-tab-pane label="方案概况" name="first"></el-tab-pane>
                      <el-tab-pane label="执行效果" name="second"></el-tab-pane>
                    </el-tabs>
                  </div>
                  <div v-if="activeName=='first'" style="display: flex;">
                    <div style="width: 70%;">
                      <div style="width: 100%;">
                        <div style="font-size: 14px;font-weight: 600;padding: 20px;">基本信息</div>
                            <div style="padding: 20px;">
                              <el-table :data="tableData1"
                              :header-cell-style="{fontSize: '12px', backgroundColor: '#fff',color:'#000',fontWeight: 'normal'}"
                                :border="true" style="width: 100%;margin: auto;">
                                <el-table-column class-name="first-column-bg" label="方案编号" prop="name" min-width="15%">
                                </el-table-column>
                                <el-table-column label="20231206023" prop="code" min-width="35%" >

                                </el-table-column>
                                <el-table-column class-name="first-column-bg" label="方案名称" prop="text" min-width="15%">

                                </el-table-column>
                                <el-table-column label="绿色出行、低碳生活" prop="address" min-width="35%">

                                </el-table-column>
                              </el-table>
                            </div>
                      </div>
                      <div style="width: 100%;">
                         <div style="font-size: 14px;font-weight: 600;padding: 20px;">活动明细信息</div>
                         <div style="padding: 20px;">
                           <el-table :data="tableData2"
                             :header-cell-style="{fontSize: '12px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
                             :border="true" style="width: 100%;margin: auto;">
                             <el-table-column label="序号" min-width="5%" align='center'>
                               <template slot-scope="scope">
                                 <span style="">{{ scope.row.date }}</span>
                               </template>
                             </el-table-column>
                             <el-table-column label="明细项名称" prop="name" min-width="28%">
                             </el-table-column>
                             <el-table-column label="预估数量" prop="name" min-width="20%">

                             </el-table-column>
                             <el-table-column label="预估费用" prop="name" min-width="20%">

                             </el-table-column>
                             <el-table-column label="备注" prop="name" min-width="20%">
                             </el-table-column>
                           </el-table>
                         </div>
                      </div>
                      <div style="width: 100%;">
                        <div style="font-size: 14px;font-weight: 600;padding: 20px;">活动成本信息</div>
                        <div style="padding: 20px;">
                          <el-table :data="tableData1"
                            :header-cell-style="{fontSize: '12px', backgroundColor: '#fff',color:'#000',fontWeight: 'normal'}"
                            :border="true" style="width: 100%;margin: auto;">
                           <el-table-column class-name="first-column-bg" label="方案编号" prop="name" min-width="15%">
                           </el-table-column>
                           <el-table-column label="20231206023" prop="code" min-width="35%" >

                           </el-table-column>
                           <el-table-column class-name="first-column-bg" label="方案名称" prop="text" min-width="15%">

                           </el-table-column>
                           <el-table-column label="绿色出行、低碳生活" prop="address" min-width="35%">

                           </el-table-column>
                          </el-table>
                        </div>
                      </div>
                      <div style="width: 100%;">
                        <div style="font-size: 14px;font-weight: 600;padding: 20px;">预估效果</div>
                        <div style="padding: 20px;">
                          <el-table :data="tableData1"
                            :header-cell-style="{fontSize: '12px', backgroundColor: '#fff',color:'#000',fontWeight: 'normal'}"
                            :border="true" style="width: 100%;margin: auto;">
                           <el-table-column class-name="first-column-bg" label="方案编号" prop="name" min-width="15%">
                           </el-table-column>
                           <el-table-column label="20231206023" prop="code" min-width="35%" >

                           </el-table-column>
                           <el-table-column class-name="first-column-bg" label="方案名称" prop="text" min-width="15%">

                           </el-table-column>
                           <el-table-column label="绿色出行、低碳生活" prop="address" min-width="35%">

                           </el-table-column>
                          </el-table>
                        </div>
                      </div>
                      <div style="width: 100%;">
                        <div style="font-size: 14px;font-weight: 600;padding: 20px;">相关附件信息</div>
                        <div style="padding: 20px;">
                          <el-table :data="tableData2"
                            :header-cell-style="{fontSize: '12px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
                            :border="true" style="width: 100%;margin: auto;">
                            <el-table-column label="序号" min-width="5%" align='center'>
                              <template slot-scope="scope">
                                <span style="">{{ scope.row.date }}</span>
                              </template>
                            </el-table-column>
                            <el-table-column label="附件名称" prop="name" min-width="75%">

                            </el-table-column>
                            <el-table-column label="操作" prop="text" min-width="20%">

                            </el-table-column>

                          </el-table>
                        </div>
                      </div>
                      <div style="width: 100%;">
                       <div style="font-size: 14px;font-weight: 600;padding: 20px;">系统信息</div>
                        <div style="padding: 20px;">
                          <el-table :data="tableData1"
                            :header-cell-style="{fontSize: '12px', backgroundColor: '#fff',color:'#000',fontWeight: 'normal'}"
                            :border="true" style="width: 100%;margin: auto;">
                           <el-table-column class-name="first-column-bg" label="方案编号" prop="name" min-width="15%">
                           </el-table-column>
                           <el-table-column label="20231206023" prop="code" min-width="35%" >

                           </el-table-column>
                           <el-table-column class-name="first-column-bg" label="方案名称" prop="text" min-width="15%">

                           </el-table-column>
                           <el-table-column label="绿色出行、低碳生活" prop="address" min-width="35%">

                           </el-table-column>
                          </el-table>
                        </div>
                      </div>
                    </div>
                    <div style="width: 28%; border-left: 20px solid rgba(0, 0, 0, 0.3);">
                      <div style="padding: 10px;height: 500px;">
                      <div style="font-size: 17px;font-weight: 600;padding: 10px;">流程轨迹</div>
                      <el-steps style="height: 400px;padding: 10px;" direction="vertical" finish-status="wait"  :active="0">
                          <el-step title="审核节点">
                              <template slot="description">
                                      <div class="custom-step-description">
                                        <div>
                                          当前处理人:王伟明
                                        </div>
                                      </div>
                                    </template>
                          </el-step>
                          <el-step title="品牌部门审批" style="position: relative;">
                            <template slot="description">
                                    <div class="custom-step-description">
                                      <div>
                                        操作:通过
                                        <span style="position: absolute;top: 0px;right: 0px;">2023-11-02 11:26:48</span>
                                      </div>
                                      <div>
                                        操作人:王伟明
                                      </div>
                                    </div>
                                  </template>
                          </el-step>
                          <el-step title="业务部门经理审核" description="当前处理人:王伟明" style="position: relative;">
                            <template slot="description">
                                    <div class="custom-step-description">
                                      <div>
                                        操作:通过
                                       <span style="position: absolute;top: 0px;right: 0px;">2023-11-02 11:26:48</span>
                                      </div>
                                      <div>
                                        操作人:王伟明
                                      </div>
                                    </div>
                                  </template>
                          </el-step>
                          <el-step title="开始" description="这是一段很长很长很长的描述性文字" style="position: relative;">
                            <template slot="description">
                                    <div class="custom-step-description">
                                      <div>
                                        操作:通过
                                        <span style="position: absolute;top: 0px;right: 0px;">2023-11-02 11:26:48</span>
                                      </div>
                                      <div>
                                        操作人:王伟明
                                      </div>
                                      <div>
                                        补充说明:发起流程事项审批
                                      </div>
                                    </div>
                                  </template>
                          </el-step>
                      </el-steps>
                      </div>
                    </div>
                  </div>
                  <div v-if="activeName=='second'">
                    <div style="border-bottom: 1px solid grey;">
                      <div style="padding: 20px 0 0 20px;">
                      <el-button plain @click="bianji" size="mini" style="background-color: #409B6A;color: #fff">编辑
                       </el-button>
                       </div>
                      <div style="font-weight: bold;font-size: 14px;padding: 20px;padding-bottom: 20px">
                        活动方案编制
                      </div>
                    </div>
                    <div style="padding: 20px">
                      <div style="border: solid 1px #E5E5E5;border-radius: 5px">
                        <div style="border-bottom: 1px solid #E5E5E5;padding: 1px">
                          <div style="padding: 10px 20px;font-weight: bold;background-color: #FAFAFA">
                            基本信息
                          </div>
                        </div>
                        <div style="padding: 20px 40px 0px 20px">
                          <el-form
                            size="mini"
                            label-position="top"
                            ref="ruleFormInfo"
                            :model="ruleForm"
                            :rules="rulesInfo"
                            label-width="120px"
                            style="position: relative"
                          >
                            <el-row :gutter="20">
                              <el-col :span="8">
                                <el-form-item
                                  label="广告位名称"
                                  class="grid-content bg-purple device-from"
                                  prop="name"
                                >
                                  <el-input
                                    v-model="shan"
                                    placeholder="请输入"
                                  />
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item
                                  label="广告位类型"
                                  class="grid-content bg-purple"
                                  prop="name"
                                >
                                  <el-input
                                    v-model="shan"
                                    placeholder="请输入"
                                  />
                                </el-form-item>
                              </el-col>

                              <el-col :span="8">
                                <el-form-item
                                  label="所属端"
                                  class="grid-content bg-purple"
                                  prop="name"
                                >
                                  <el-input
                                    v-model="shan"
                                    placeholder="请输入"
                                  />
                                </el-form-item>
                              </el-col>
                            </el-row>

                            <el-row :gutter="20">
                              <el-col :span="8">
                                <el-form-item
                                  label="位置"
                                  class="grid-content bg-purple"
                                  prop="name"
                                >
                                  <el-input
                                    v-model="shan"
                                    placeholder="请输入"
                                  />
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item
                                  label="轮播顺序"
                                  class="grid-content bg-purple"
                                  prop="name"
                                >
                                  <el-input
                                    v-model="shan"
                                    placeholder="请输入"
                                  />
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item
                                  label="计费方式"
                                  class="grid-content bg-purple"
                                  prop="name"
                                >
                                  <el-input
                                    v-model="shan"
                                    placeholder="请输入"
                                  />
                                </el-form-item>
                              </el-col>
                            </el-row>

                            <el-row :gutter="20">
                              <el-col :span="8">
                                <el-form-item
                                  label="单价"
                                  prop="name"
                                  class="grid-content bg-purple"
                                >
                                  <el-input
                                    v-model="shan"
                                    placeholder="请输入"
                                  />
                                </el-form-item>
                              </el-col>
                              <el-col :span="16">
                                <el-form-item
                                  label="单次可租赁时间"
                                  prop="name"
                                  class="grid-content bg-purple"
                                >
                                  <el-input
                                    v-model="shan"
                                    placeholder="请输入"
                                  />
                                </el-form-item>
                              </el-col>
                            </el-row>
                            <div style="padding: 10px">
                              <el-row :gutter="20">
                                <el-form-item
                                  label="单次可租赁时间"
                                  prop="name"
                                  class="grid-content bg-purple"
                                >
                                  <el-upload
                                    class="avatar-uploader"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                  </el-upload>

                                </el-form-item>
                              </el-row>
                            </div>
                          </el-form>
                        </div>
                      </div>
                    </div>
                    <div style="padding: 0px 20px 20px 20px">
                      <div style="border: solid 1px #E5E5E5;border-radius: 5px">
                        <div style="border-bottom: 1px solid #E5E5E5;padding: 1px;display: flex">
                          <div style="padding: 10px 20px;font-weight: bold;background-color: #FAFAFA">
                            活动明细信息
                          </div>
                          <div style="padding: 10px 0;font-weight: bold;color: #2d8a58">
                            添加明细
                          </div>
                        </div>
                        <!--          表格-->
                        <div style="padding: 20px 20px 20px 20px">
                          <el-table
                            :data="tableDa"
                            :header-cell-style="{fontSize: '12px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
                            :border="true"
                            style="width: 100%"
                          >
                            <el-table-column
                              label="序号"
                              width="auto"
                              min-width="5%"
                              prop="date"
                              align="center"
                            >
                            </el-table-column>
                            <el-table-column
                              label="明细项名称"
                              prop="coDe"
                              width="auto"
                              min-width="22%"
                            >

                            </el-table-column>
                            <el-table-column
                              label="预估数量"
                              prop="coDe"
                              width="auto"
                              min-width="15%"
                            >

                            </el-table-column>
                            <el-table-column
                              label="预估费用"
                              prop="coDe"
                              width="auto"
                              min-width="15%"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="coDe"
                              label="备注"
                              width="auto"
                              min-width="15%"
                            >
                            </el-table-column>
                            <el-table-column
                              label="操作"
                              width="auto"
                              min-width="18%">
                              <template slot-scope="scope">
                                <div @click="handleEdit(scope.$index, scope.row)" class="tableBtn greens">详情</div>
                                <div @click="handleDelete(scope.$index, scope.row)" class="tableBtn greens">删除</div>
                              </template>
                            </el-table-column>
                          </el-table>





                          <!--            结束-->
                        </div>
                      </div>
                    </div>
                    <div style="padding: 20px">
                      <div style="border: solid 1px #E5E5E5;border-radius: 5px;padding-bottom: 20px;">
                        <div style="border-bottom: 1px solid #E5E5E5;padding: 1px">
                          <div style="padding: 10px 20px;font-weight: bold;background-color: #FAFAFA">
                            活动成本信息
                          </div>
                        </div>
                        <div style="padding: 20px 40px 0px 20px">
                          <el-form
                            size="mini"
                            label-position="top"
                            ref="ruleFormInfo"
                            :model="ruleForm"
                            :rules="rulesInfo"
                            label-width="120px"
                            style="position: relative"
                          >
                            <el-row :gutter="20">
                              <el-col :span="8">
                                <el-form-item
                                  label="内部人力成本预估"
                                  class="grid-content bg-purple device-from"
                                  prop="name"
                                >
                                  <el-input
                                    v-model="shan"
                                    placeholder="请输入"
                                  />
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item
                                  label="外部人力成本预估"
                                  class="grid-content bg-purple"
                                  prop="name"
                                >
                                  <el-input
                                    v-model="shan"
                                    placeholder="请输入"
                                  />
                                </el-form-item>
                              </el-col>

                              <el-col :span="8">
                                <el-form-item
                                  label="商品成本预估"
                                  class="grid-content bg-purple"
                                  prop="name"
                                >
                                  <el-input
                                    v-model="shan"
                                    placeholder="请输入"
                                  />
                                </el-form-item>
                              </el-col>
                            </el-row>

                            <el-row :gutter="20">
                              <el-col :span="8">
                                <el-form-item
                                  label="宣告费用预估"
                                  class="grid-content bg-purple"
                                  prop="name"
                                >
                                  <el-input
                                    v-model="shan"
                                    placeholder="请输入"
                                  />
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item
                                  label="其他必要成本预估"
                                  class="grid-content bg-purple"
                                  prop="name"
                                >
                                  <el-input
                                    v-model="shan"
                                    placeholder="请输入"
                                  />
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item
                                  label="总成本预估"
                                  class="grid-content bg-purple"
                                  prop="name"
                                >
                                  <el-input
                                    v-model="shan"
                                    placeholder="请输入"
                                  />
                                </el-form-item>
                              </el-col>
                            </el-row>

                            <el-row :gutter="20">
                              <el-col :span="8">
                                <el-form-item
                                  label="备注"
                                  prop="name"
                                  class="grid-content bg-purple"
                                >
                                  <el-input
                                    v-model="shan"
                                    placeholder="请输入"
                                  />
                                </el-form-item>
                              </el-col>
                              <el-col :span="16">
                                <el-form-item
                                  label="单次可租赁时间"
                                  prop="name"
                                  class="grid-content bg-purple"
                                >
                                  <el-input
                                    v-model="shan"
                                    placeholder="请输入"
                                  />
                                </el-form-item>
                              </el-col>
                            </el-row>
                          </el-form>
                        </div>
                      </div>
                    </div>

                    <div style="padding: 20px">
                      <div style="border: solid 1px #E5E5E5;border-radius: 5px;padding-bottom: 20px;">
                        <div style="border-bottom: 1px solid #E5E5E5;padding: 1px">
                          <div style="padding: 10px 20px;font-weight: bold;background-color: #FAFAFA">
                            预估效果
                          </div>
                        </div>
                        <div style="padding: 20px 40px 0px 20px">
                          <el-form
                            size="mini"
                            label-position="top"
                            ref="ruleFormInfo"
                            :model="ruleForm"
                            :rules="rulesInfo"
                            label-width="120px"
                            style="position: relative"
                          >
                            <el-row :gutter="20">
                              <el-col :span="8">
                                <el-form-item
                                  label="预计吸引流量"
                                  class="grid-content bg-purple device-from"
                                  prop="name"
                                >
                                  <el-input
                                    v-model="shan"
                                    placeholder="请输入"
                                  />
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item
                                  label="预计参与人数"
                                  class="grid-content bg-purple"
                                  prop="name"
                                >
                                  <el-input
                                    v-model="shan"
                                    placeholder="请输入"
                                  />
                                </el-form-item>
                              </el-col>

                              <el-col :span="8">
                                <el-form-item
                                  label="预计直接收益"
                                  class="grid-content bg-purple"
                                  prop="name"
                                >
                                  <el-input
                                    v-model="shan"
                                    placeholder="请输入"
                                  />
                                </el-form-item>
                              </el-col>
                            </el-row>
                            <el-row :gutter="20">
                              <el-col :span="8">
                                <el-form-item
                                  label="预计间接收益"
                                  class="grid-content bg-purple"
                                  prop="name"
                                >
                                  <el-input
                                    v-model="shan"
                                    placeholder="请输入"
                                  />
                                </el-form-item>
                              </el-col>

                            </el-row>
                          </el-form>
                        </div>
                      </div>
                    </div>

                    <div style="padding: 0px 20px 20px 20px">
                      <div style="border: solid 1px #E5E5E5;border-radius: 5px">
                        <div style="border-bottom: 1px solid #E5E5E5;padding: 1px;display: flex">
                          <div style="padding: 10px 20px;font-weight: bold;background-color: #FAFAFA">
                            相关附件信息
                          </div>
                          <div style="padding: 10px 0;font-weight: bold;color: #2d8a58">
                            上传附件
                          </div>
                        </div>
                        <!--          表格-->
                        <div style="padding: 20px 20px 20px 20px">
                          <el-table
                            :data="tableData"
                            :header-cell-style="{fontSize: '12px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
                            :border="true"
                            style="width: 100%"
                          >
                            <el-table-column
                              label="序号"
                              width="auto"
                              min-width="5%"
                              prop="date"
                              align="center"
                            >
                            </el-table-column>
                            <el-table-column
                              label="附件名称"
                              prop="coDe"
                              width="auto"
                              min-width="77%"
                            >
                            </el-table-column>
                            <el-table-column
                              label="操作"
                              width="auto"
                              min-width="18%">
                              <template slot-scope="scope">
                                <div @click="handleEdit(scope.$index, scope.row)" class="tableBtn greens">详情</div>
                                <div @click="handleDelete(scope.$index, scope.row)" class="tableBtn greens">删除</div>
                              </template>
                            </el-table-column>
                          </el-table>
                        </div>
                      </div>
                    </div>
                    <div style="display: flex;justify-content: flex-end;padding: 10px 20px 10px 0">
                    </div>
                  </div>
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="closeFn">取 消</el-button>
                  <el-button type="primary" @click="addCheck('ruleForm')">确 定</el-button>
                </span>
              </el-dialog>
      </div>
    </div>

  </div>
</template>

<script>
import {
    queryByPage,
  deleteById
  } from '../../api/activityBz'
export default {
  name: 'atmosphereGl',

  data () {
    return {
      rules: {
        coDe: [{
          required: true,
          message: '请输入活动名称',
          trigger: 'blur'
        },

        ],
      },
      planName:'',
      planType:'',
      currentPage: 1,
      total: 100,
      flag: false,
      pageSize: 10,
      ggXin: false,
      radio: '1',
      activeName: 'first',
      formInline: {
        merchantName: '', // 商家名称
        storeId: '', // 编码
        contacts: '', // 联系人
        businessEntity: '',//经营主体
        page: 1, // 当前页
        pageSize: 10 // 每页记录数
      },
      tableData: [],
      pageindex: {
        pageNumber: 1,
        pageSize: 10,
        data0wnership:2
      }
    }
  },
  created() {
    this.getAll()
  },
  computed: {},
  methods: {
    //查询全数据
         async getAll() {
           const res = await queryByPage((this.pageindex))
           console.log(res)
           this.tableData = res.data.content
           this.total = res.data.content.length
         },
    //删除记录按钮
        async handleDelete(val) {
           // const res = await deleteById({id:val.id})
           //  this.getAll()
         },
    //查询
    onSubmit(){
  // if(this.planName!='' || this.planTheme!=''){
  //                 likeGet({planName:this.planName,planTheme:this.planTheme}).then(res=>{
  //                     this.tableData = res.data.content
  //                     this.total = res.data.content.length
  //                   })
  //           }else{
  //             this.getAll()
  //           }
    },
    handleCurrentChange(val){
      this.currentPage = val
    },
    handleSizeChange(val){
      this.pageSize = val
    },
    addbuss () {
      this.ggXin = true
      this.ruleForm = {
        shopName: '', // 店铺名称
        chargePersonName: '', // 店铺负责人
        chargePersonPhone: '', // 负责人电话
        shopAdress: '', // 地址
        effectiveDate: '', // 生效日期
        effectiveYear: '', // 生效年限
        contractState: 1, // 合同状态 1-有效 0-无效
        auditLive: 1,
        auditLiveProduct: 1,
        shopPhone: '', // 账号
        shopPassword: '',// 密码
        sTime: 0,
        houseType: '',
        affiliation: ''
      }
    },
    closeFn () {
      this.ggXin = false
    },
    handleEditForm(item) {
      if (!item) {
        this.formItem = {}
      } else {
        this.formItem = item
      }
      this.ggXin = true
    },
  }
}
</script>

<style scoped>

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

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



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

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


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



  .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;
  }



  .pagination{
    text-align:right;
    line-height: 20px;
  }
  /deep/ .el-pagination__total{
    margin-top:4px;
  }
  /deep/ .btn-prev{
    position:absolute ;
    top: 4px;
    right: 266px;
   }
  /deep/ .el-pager{
    position:absolute ;
    top: 4px;
    right: 40px;
  }
  /deep/ .btn-next{
    position:absolute;
    top: 4px;
    right: 10px;
  }
  .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: #389865;
    opacity: 1;
  }

      /deep/ .el-tabs__nav-wrap::after{
          background-color: #fff;
      }
  ::v-deep .el-tabs__item:hover {
    color: #389865;
    cursor: pointer;
    opacity: 1;
  }
   /deep/ .el-tabs__active-bar {
          background-color: #389865;
      }
      /deep/ .el-table_2_column_13{
            font-weight: 100;
      }

.zhuti {
  padding: 20px;
  background-color: #Fff;
}
  /deep/ .first-column-bg {
    background-color: #f4f4f5 !important;
  }



.formSearch {
  position: relative;
  margin-top: 30px;
  display: flex;
  width: 100%;
  height: 30px;
  font-size: 12px;
}

.greens {
  color: #89C1A3;
}

/deep/ .el-table__row {
  font-size: 12px;
}

.fenye {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  position: relative;
}

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

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



/deep/ .el-form--label-top .el-form-item__label {
  padding: 0;
}
.demo-input-suffix{
  display: flex;
  margin-right: 20px;
}
.pagination{
  text-align:right;
  line-height: 20px;
}
/deep/ .el-pagination__total{
  margin-top:4px;
}
/deep/ .btn-prev{
  position:absolute ;
  top: 4px;
  right: 266px;
 }
/deep/ .el-pager{
  position:absolute ;
  top: 4px;
  right: 40px;
}
/deep/ .btn-next{
  position:absolute;
  top: 4px;
  right: 10px;
}
.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;
    }
  }
</style>
