<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 style="display: flex;font-size: 14px">
        <div style="margin-right: 4px" @click="chenge(1)" :class="leixing == 1?'chengeXia':''">线上</div>
        ({{xxNum}}个申请)
        <div style="margin-left: 20px;margin-right: 4px" @click="chenge(2)" :class="leixing == 1?'':'chengeXia'">实体
        </div>({{stNum}}个申请)
      </div>
      <!-- 主体 -->
      <div>
        <!-- 搜索 -->
        <div class="formSearch">
          <el-form :inline="true" :model="formSel">
            <!-- <el-form-item label="编号" prop="affiliation">
              <el-input v-model="formSel.contacts" placeholder="请输入" style="width: 168px;margin-right: 15px" />
            </el-form-item> -->
            <el-form-item label="所属端" prop="affiliation" v-if="leixing == 1">
              <el-select v-model="formSel.cereAdvertisingInformation.affiliation" placeholder="请选择" style="width: 168px;margin-right: 15px">
                <el-option label="游客小程序" value="游客小程序" />
                <el-option label="商家客户端" value="商家客户端" />
              </el-select>
            </el-form-item>
            <el-form-item label="服务类型" prop="businessScope" v-if="leixing == 1">
              <el-input v-model="formSel.businessScope" placeholder="请输入" style="width: 168px;margin-right: 15px" />

            </el-form-item>
            <el-form-item label="申请人" prop="applicant" >
              <el-input v-model="formSel.applicant" placeholder="请输入" style="width: 168px;margin-right: 15px" />
            </el-form-item>
            <el-form-item label="计划时间" prop="scheduleTime">
              <el-date-picker style="width:168px;margin-right:5px" v-model="formSel.scheduleTime"
                value-format="yyyy-MM-dd" type="date" range-separator="-" start-placeholder=""
                end-placeholder="" prefix-icon="none" >
              </el-date-picker>
            </el-form-item>

          </el-form>
          <div>
            <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff;padding:8px 15px;">查询
            </el-button>
            <el-button @click="resetting" class="buttonHover"
              style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;">重置
            </el-button>
          </div>
        </div>
        <!-- 表格 -->

        <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
          :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
          <el-table-column label="序号" min-width="80" prop="id">
            <template slot-scope="scope">
              {{scope.$index + 1 }}
            </template>
          </el-table-column>

          <el-table-column label="所属端" min-width="150"  v-if="leixing == 1">
            <template slot-scope="scope">
            {{scope.row.cereAdvertisingInformation.affiliation}}

            </template>


          </el-table-column>
          <el-table-column label="轮播顺序"  min-width="80" v-if="leixing == 1">
            <template slot-scope="scope">
              {{scope.row.cereAdvertisingInformation.rotationOrder}}

            </template>

          </el-table-column>
          <el-table-column label="服务类型" prop="businessScope" min-width="150">
            <template slot-scope="scope">
              {{scope.row.businessScope}}

            </template>
          </el-table-column>
          <el-table-column label="申请人" prop="applicant" min-width="200">


          </el-table-column>
          <el-table-column label="投放定价" prop="cpc" min-width="150">

          </el-table-column>


          <el-table-column label="计划时间" prop="scheduleTime" min-width="250">
          </el-table-column>
          <!-- <el-table-column label="审核提醒时间" prop="auditReminderTime" min-width="180">
          </el-table-column> -->
          <el-table-column prop="applicationTime" label="提交时间" min-width="250">

          </el-table-column>
          <el-table-column label="状态" prop="auditStatus" min-width="120">
            <template slot-scope="scope">
              {{scope.row.auditStatus =='1'?'待审核':scope.row.auditStatus =='2'?'待签约':scope.row.auditStatus =='3'?'已驳回':scope.row.auditStatus =='4'?'已签约':'已终止'}}
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="300" fixed="right">
            <template slot-scope="scope">
              <div @click="details(scope.row)" class="tableBtn greens">查看</div>
              <div @click="shenhe(scope.row)" class="tableBtn greens" v-if="scope.row.auditStatus =='1'">审核</div>
              <!-- <div @click="peizhi(scope.row)" class="tableBtn greens" v-if="scope.row.auditStatus =='1'">审核流程配置</div> -->
              <div @click="lookHetong(scope.row)" class="tableBtn greens" v-if="scope.row.auditStatus =='2'">录入合同</div>
              <!-- <div @click="fukuan(scope.row)" class="tableBtn greens" v-if="scope.row.auditStatus =='2'">付款提醒</div> -->
              <div @click="zhongzhi(scope.row)" class="tableBtn greens" v-if="scope.row.auditStatus !='1' && scope.row.auditStatus !='3' && scope.row.auditStatus !='5'">终止</div>

            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination :hide-on-single-page='flag' background small :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next,total" :total="total "
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

      </div>

      <!-- 详情框 -->
      <el-dialog :visible.sync="detbox" custom-class="tongyong_css" style="padding: 0" width="55%" center
        :close-on-click-modal="false" class="dialog_css_Xq" :show-close="false">
        <div style="
              background-color: #fafafa;
              border: 1px solid #eaeaea;
              height: 42px;
              width: 100%;
              padding: 0 20px;
              line-height: 42px;
            ">
          详情
        </div>
        <div style="padding: 0 20px">
          <div style="
                font-size: 14px;
                margin-bottom: 20px;
              ">
            <div>
              <div style="padding:10px 10px 10px 0;">审核信息</div>
              <div style="">
                 审核状态：<span style="">{{secondData.auditStatus =='1'?'待审核':secondData.auditStatus =='2'?'待签约':secondData.auditStatus =='3'?'已驳回':secondData.auditStatus =='4'?'已签约':'已终止'}}</span>
              </div>
              <!-- <el-table :data="
                  tableData.slice(
                    (currentPage - 1) * pageSize,
                    currentPage * pageSize
                  )
                " :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
                <el-table-column label="序号" min-width="5%">
                  <template slot-scope="scope">
                    {{scope.$index+1}}
                  </template>
                </el-table-column>
                <el-table-column label="审核人" prop="id" min-width="8%" />
                <el-table-column label="审核时间" prop="belongingRegion" min-width="10%" />
                <el-table-column label="审核结果" prop="temporaryPavingPlanName" min-width="10%" />
                <el-table-column label="意见" prop="temporaryPavingPlanName" min-width="20%" />
              </el-table> -->
            </div>
            <el-tabs v-model="card">
              <el-tab-pane label="租赁人信息" name="first">
                <el-form ref="form" label-width="140px">
                  <el-form-item label="承租人名称">
                    <el-input v-model="secondData.lesseeName" disabled ></el-input>
                  </el-form-item>
                  <!-- <el-form-item label="联系电话">
                    <el-input v-model="secondData.contactPhone" disabled ></el-input>
                  </el-form-item> -->
                  <el-form-item label="证件类型">
                    <el-input v-model="secondData.idCardType" disabled ></el-input>
                  </el-form-item>
                  <el-form-item label="身份证号码">
                    <el-input v-model="secondData.idCardNumber" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="身份证有效期">
                    <el-date-picker style="width: 100%;" v-model="idCardValidStart" value-format="yyyy-MM-dd"
                      type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                      align="right" disabled>
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="身份证照片(正面)">
                    <img :src="secondData.idCardPhotoFront" alt="" style="width:150px;height:150px;">
                    <!-- <upimg v-model="secondData.idCardPhotoFront" :limit="1" :fileSize="1" :isShowTip="false"></upimg> -->
                  </el-form-item>
                  <el-form-item label="身份证照片(反面)">
                    <img :src="secondData.idCardPhotoBack" alt="" style="width:150px;height:150px;">
                    <!-- <upimg v-model="secondData.idCardPhotoBack" :limit="1" :fileSize="1" :isShowTip="false"></upimg> -->
                  </el-form-item>
                  <el-form-item label="是否为法人">

                    <el-select v-model="secondData.isLegalPerson"  disabled>
                      <el-option label="是" value="1" />
                      <el-option label="否" value="0" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="企业授权书">
                    <img :src="secondData.enterpriseAuthorization" alt="" style="width:150px;height:150px;">
                    <!-- <upimg v-model="secondData.enterpriseAuthorization" :limit="1" :fileSize="1" :isShowTip="false"></upimg> -->
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="主体信息" name="three">
                <el-form ref="form" label-width="140px">
                  <el-form-item label="主体名称">
                    <el-input v-model="secondData.subjectName" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="统一社会信用代码">
                    <el-input v-model="secondData.unifiedSocialCreditCode" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="类型">
                    <el-select v-model="secondData.type" placeholder="请选择" disabled>
                      <el-option label="个人" value="个人" />
                      <el-option label="企业" value="企业" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="法定代表人">
                    <el-input v-model="secondData.legalRepresentative" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="经营范围">
                    <el-input type="textarea" v-model="secondData.businessScope" :rows="4" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="注册资本">
                    <el-input v-model="secondData.registeredCapital" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="成立日期">
                    <el-input v-model="secondData.establishmentDate" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="住所">
                    <el-input v-model="secondData.address" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱地址">
                    <el-input v-model="secondData.emailAddress" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="营业期限">
                    <el-date-picker style="width: 100%;" v-model="businessStartDate" value-format="yyyy-MM-dd"
                      type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                      align="right" disabled>
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="营业执照">
                    <img :src="secondData.businessLicense" alt="" style="width:150px;height:150px;">
                    <!-- <upimg v-model="secondData.businessLicense" :limit="1" :fileSize="1" :isShowTip="false"></upimg> -->
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="投放内容" name="second">
                <el-form ref="form" label-width="140px">
                  <el-form-item label="Banner图">
                    <img :src="secondData.coverImage" alt="" style="width:150px;height:150px;">
                    <!-- <upimg v-model="secondData.coverPoster" :limit="1" :fileSize="1" :isShowTip="false"></upimg> -->
                  </el-form-item>
                  <el-form-item label="投放内容">
                    <el-input v-model="secondData.advertisementContent" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="跳转链接">
                    <el-input v-model="secondData.redirectUrl" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="计划时间">
                    <el-input v-model="secondData.scheduleTime" disabled></el-input>
                    <!-- <el-date-picker style="width: 100%;" v-model="secondData.scheduleTime"
                      value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至"
                      start-placeholder="开始日期" end-placeholder="结束日期" align="right" disabled>
                    </el-date-picker> -->
                  </el-form-item>

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

          <div style="
                width: 99%;
                padding: 10px;
                display: flex;
                justify-content: flex-end;
              ">
            <el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
              @click="closeFn(2)">取消</el-button>
              <el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
                @click="delXiang">删除</el-button>
          </div>
        </div>
      </el-dialog>

      <!-- 审核 -->
      <el-dialog :visible.sync="actSpye" custom-class='actSpye_dialog' style="padding: 0;" width="70%" center
        :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false">
        <div style="padding:10px 20px;">
          <div
            style="display: flex;justify-content: space-between;border-bottom: 1px solid #E5E5E5;padding: 0 0 10px 0;">
            <div style="display: flex;align-items: center;">
              <div style="margin-right: 10px;">代办任务</div>
              <div
                style="background-color: #E8F6F3;padding: 5px;margin-right: 10px;font-size:12px;color:#56AC83;border-radius: 3px;">
                发起人：</div>
              <div
                style="background-color: #E8F6F3;padding: 5px;margin-right: 10px;font-size:12px;color:#56AC83;border-radius: 3px;">
                任务节点：部门领导审批</div>
            </div>
            <div style="margin-right:20px ">
              <el-button style="background-color: #3F9B6A;color: #fff;" @click="actSpye=false">关闭</el-button>
            </div>
          </div>
          <div style="padding:20px 15px 15px 15px;">
            <el-tabs v-model="actCard" >
              <el-tab-pane label="表单信息" name='1'>
                <div style="margin:0 0 10px 30%">方案文件 {{secondData.planName}}</div>
                <div style="margin:15px 0;padding:0 20%; padding-bottom:20px;border-bottom: 1px solid #E1EEEF;">
                  <el-button @click="MsgShen(1)" style="background-color: #3F9B6A;color: #fff;">租赁人信息查看</el-button>
                  <el-button @click="MsgShen(2)" style="background-color: #3F9B6A;color: #fff;">主体信息查看</el-button>
                  <el-button @click="MsgShen(3)" style="background-color: #3F9B6A;color: #fff;">投放内容信息查看</el-button>
                  <!-- <el-button @click="MsgShen(4)" style="background-color: #3F9B6A;color: #fff;">预估效果信息查看</el-button> -->
                </div>
                <div style="padding:20px 0;display:flex;justify-content:flex-end;" v-if="secondData.state != '5'">
                  <el-button icon="el-icon-edit" @click="LiuYes(1)"
                    style="background-color: #3F9B6A;color: #fff;">同意</el-button>
                  <!-- <el-button icon="el-icon-refresh-left"  @click="Liunie=true"
                                              style="background-color: #3F9B6A;color: #fff;">退回</el-button> -->
                  <el-button icon="el-icon-circle-close" @click="LiuYes(2)"
                    style="background-color: #3F9B6A;color: #fff;">驳回</el-button>
                </div>
                <el-dialog width="60%" :visible.sync="MsgSp" append-to-body :show-close="false" title="审批信息"
                  custom-class='liucheng_css' :close-on-press-escape="false" :close-on-click-modal="false">
                  <div style="padding:0px">
                    <div style="border: 1px solid #E5E5E5;padding: 1px" v-if="index == 1">
                      <div style="padding: 15px;">
                        <el-form ref="form" label-width="140px">
                          <el-form-item label="承租人名称">
                            <el-input v-model="secondData.lesseeName" disabled></el-input>
                          </el-form-item>
                          <!-- <el-form-item label="联系电话">
                            <el-input v-model="secondData.contactPhone" disabled></el-input>
                          </el-form-item> -->
                          <el-form-item label="证件类型">
                            <el-input v-model="secondData.idCardType" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="身份证号码">
                            <el-input v-model="secondData.idCardNumber" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="身份证有效期">
                            <el-date-picker style="width: 100%;" v-model="idCardValidStart"
                              value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至"
                              start-placeholder="开始日期" end-placeholder="结束日期" align="right" disabled>
                            </el-date-picker>
                          </el-form-item>
                          <el-form-item label="身份证照片(正面)">
                            <img :src="secondData.idCardPhotoFront" alt="" style="width:150px;height:150px;">

                          </el-form-item>
                          <el-form-item label="身份证照片(反面)">
                            <img :src="secondData.idCardPhotoBack" alt="" style="width:150px;height:150px;">

                          </el-form-item>
                          <el-form-item label="是否为法人">
                            <el-select v-model="secondData.isLegalPerson"  disabled>
                              <el-option label="是" value="1" />
                              <el-option label="否" value="0" />
                            </el-select>
                          </el-form-item>
                          <el-form-item label="企业授权书">
                            <img :src="secondData.enterpriseAuthorization" alt="" style="width:150px;height:150px;">

                          </el-form-item>
                        </el-form>
                      </div>
                    </div>
                    <div style="border: 1px solid #E5E5E5;padding: 1px" v-if="index == 2">
                      <div style="padding: 15px;">
                        <el-form ref="form" label-width="140px">
                          <el-form-item label="主体名称">
                            <el-input v-model="secondData.subjectName" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="统一社会信用代码">
                            <el-input v-model="secondData.unifiedSocialCreditCode" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="类型">
                            <el-select v-model="secondData.type" placeholder="请选择" disabled>
                              <el-option label="个人" value="个人" />
                              <el-option label="企业" value="企业" />
                            </el-select>
                          </el-form-item>
                          <el-form-item label="法定代表人">
                            <el-input v-model="secondData.legalRepresentative" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="经营范围">
                            <el-input type="textarea" v-model="secondData.businessScope" :rows="4" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="注册资本">
                            <el-input v-model="secondData.registeredCapital" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="成立日期">
                            <el-input v-model="secondData.establishmentDate" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="住所">
                            <el-input v-model="secondData.address" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="邮箱地址">
                            <el-input v-model="secondData.emailAddress" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="营业期限">
                            <el-date-picker style="width: 100%;" v-model="businessStartDate"
                              value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至"
                              start-placeholder="开始日期" end-placeholder="结束日期" align="right" disabled>
                            </el-date-picker>
                          </el-form-item>
                          <el-form-item label="营业执照">
                            <img :src="secondData.businessLicense" alt="" style="width:150px;height:150px;">

                          </el-form-item>
                        </el-form>
                      </div>
                </div>
                      <div style="border: 1px solid #E5E5E5;padding: 1px" v-if="index == 3">
                        <div style="padding: 15px;">
                          <el-form ref="form" label-width="140px">
                            <el-form-item label="Banner图">
                              <img :src="secondData.coverImage" alt="" style="width:150px;height:150px;">

                            </el-form-item>
                            <el-form-item label="投放内容">
                              <el-input v-model="secondData.advertisementContent" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="跳转链接">
                              <el-input v-model="secondData.redirectUrl" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="计划时间">
                              <el-input v-model="secondData.scheduleTime" disabled></el-input>
                            </el-form-item>
                          </el-form>
                        </div>
                      </div>

                    </div>
                    <div style="display:flex;justify-content: flex-end;padding:20px;">
                      <el-button @click="MsgSp=false" class="buttonHover"
                        style="background-color: #3F9B6A;color: #fff;">返回</el-button>
                    </div>
                </el-dialog>
                <el-dialog width="40%" :visible.sync="Liunie" :close-on-click-modal="false" title="流程审批"
                  custom-class='liucheng_css' :close-on-press-escape="false" :show-close='false' append-to-body>
                  <div style="padding:30px 20px 0 20px">
                    <el-form ref="ruleFormInfo" :model="secondData" label-width="120px" style="position: relative">
                      <el-form-item label="处理意见" class="grid-content bg-purple" prop="name">
                        <el-input type="textarea" v-model="secondData.yijian" placeholder="请输入处理意见" />
                      </el-form-item>

                    </el-form>
                  </div>
                  <div style="display:flex;justify-content: flex-end;padding:20px;">
                    <el-button @click="Liunie=false" style="background-color: #3F9B6A;color: #fff;">取消</el-button>
                    <el-button @click="OAshen" style="background-color: #3F9B6A;color: #fff;">确定</el-button>
                  </div>
                </el-dialog>
              </el-tab-pane>
              <el-tab-pane label="流转记录" name="2">
                <div style="">
                  <el-steps direction="vertical" :active="secondData.state!=5? secondData.state - 1: 1"
                    class="shen_steps1">
                    <el-step>
                      <template slot="title">
                        <div style="font-size: 14px;font-weight: 600;">部门领导审批</div>
                      </template>
                      <template slot="description">
                        <div style="margin-bottom:10px;padding:10px;border:1px solid #EBEEF5;width:50%">
                          <div>
                            <el-descriptions class="margin-top" :column="1" border :labelStyle="labelStyle" :contentStyle="contentStyle">
                              <el-descriptions-item>
                                <template slot="label">
                                  <i class="el-icon-user"></i>
                                  办理人
                                </template>

                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">
                                  <i class="el-icon-mobile-phone"></i>
                                  接收时间
                                </template>

                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">
                                  <i class="el-icon-mobile-phone"></i>
                                  处理时间
                                </template>

                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">
                                  <i class="el-icon-mobile-phone"></i>
                                  处理意见
                                </template>

                              </el-descriptions-item>
                            </el-descriptions>
                          </div>
                        </div>
                      </template>
                    </el-step>
                    <el-step>
                      <template slot="title">
                        <div style="font-size: 14px;font-weight: 600;">公司领导审批</div>
                      </template>
                      <template slot="description">
                        <div style="margin-bottom:10px;padding:10px;border:1px solid #EBEEF5;width:50%">
                          <div>
                            <el-descriptions class="margin-top" :column="1" border :labelStyle="labelStyle" :contentStyle="contentStyle">
                              <el-descriptions-item>
                                <template slot="label">
                                  <i class="el-icon-user"></i>
                                  办理人
                                </template>

                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">
                                  <i class="el-icon-mobile-phone"></i>
                                  接收时间
                                </template>

                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">
                                  <i class="el-icon-mobile-phone"></i>
                                  处理时间
                                </template>

                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">
                                  <i class="el-icon-mobile-phone"></i>
                                  处理意见
                                </template>

                              </el-descriptions-item>
                            </el-descriptions>
                          </div>
                        </div>
                      </template>
                    </el-step>
                    <el-step>
                      <template slot="title">
                        <div style="font-size: 14px;font-weight: 600;">其他审批</div>
                      </template>
                      <template slot="description">
                        <div style="margin-bottom:10px;padding:10px;border:1px solid #EBEEF5;width:50%">
                          <div>
                            <el-descriptions class="margin-top" :column="1" border :labelStyle="labelStyle" :contentStyle="contentStyle">
                              <el-descriptions-item>
                                <template slot="label">
                                  <i class="el-icon-user"></i>
                                  办理人
                                </template>

                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">
                                  <i class="el-icon-mobile-phone"></i>
                                  接收时间
                                </template>

                              </el-descriptions-item>
                            </el-descriptions>
                          </div>

                        </div>
                      </template>
                    </el-step>
                  </el-steps>
                </div>
              </el-tab-pane>
              <el-tab-pane label="流程图" name="3">
                <div style="height:120px;width:70%;margin-left:18%;margin-top: 78px;">
                  <el-steps :active="secondData.state!=5? secondData.state: 1" class="liu_steps">
                    <el-step class="step_start">
                      <template slot="icon">
                        <!--  <div style="background:green;width:150px;height:100px;">
                                                 </div> -->
                      </template>
                    </el-step>
                    <el-step class="step_buen">
                      <template slot="icon">
                        <div>
                          <div>部门领导审批</div>
                        </div>
                      </template>
                    </el-step>
                    <el-step class="step_buen">
                      <template slot="icon">
                        <div>
                          <div>公司领导审批</div>
                        </div>
                      </template>
                    </el-step>
                    <el-step class="step_buen">
                      <template slot="icon">
                        <div>
                          <div>其他审批</div>
                        </div>
                      </template>
                    </el-step>
                    <el-step class="step_start">
                      <template slot="icon">

                      </template>
                    </el-step>
                  </el-steps>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-dialog>
      <el-dialog title="合同录入" :visible.sync="hetong" custom-class='XDD_css' style="padding: 0;" width="70%" center :close-on-click-modal="false" :show-close="false">
                        <div style="padding:20px; ">
                              <div style="padding: 0px 20px 0 0;">
                                <el-descriptions class="margin-top" :column="3" title="合同信息"  border :labelStyle="labelStyle" :contentStyle="contentStyle">
                                    <el-descriptions-item>
                                      <template slot="label">
                                        合同编号
                                      </template>
                                      <el-input
                                        v-model="heForm.contractNumber"
                                        class="pass_input"
                                        placeholder="请输入"/>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                      <template slot="label">

                                        标段号
                                      </template>
                                      <el-input
                                        v-model="heForm.sectionNumber"
                                          class="pass_input"
                                          placeholder="请输入"/>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                      <template slot="label">
                                        合同名称
                                      </template>
                                    <el-input
                                         v-model="heForm.contractName"
                                        class="pass_input"
                                        placeholder="请输入"/>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                      <template slot="label">
                                        合同金额
                                      </template>
                                      <el-input
                                        v-model="heForm.contractAmount"
                                        class="pass_input"
                                        placeholder="请输入"/>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                      <template slot="label">
                                        保证金
                                      </template>
                                      <el-input
                                        v-model="heForm.earnestMoney"
                                        class="pass_input"
                                        placeholder="请输入"/>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                      <template slot="label">
                                        合同签订日期
                                      </template>

                                        <el-date-picker  v-model="heForm.contractSigningDate"
                                          value-format="yyyy-MM-dd"    type="date"   placeholder="请选择" prefix-icon="none" style="border:none">
                                        </el-date-picker>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                      <template slot="label">
                                        合同终止日期
                                      </template>

                                        <el-date-picker  v-model="heForm.contractTerminationDate"
                                          value-format="yyyy-MM-dd"    type="date"   placeholder="请选择" prefix-icon="none" style="border:none">
                                        </el-date-picker>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                      <template slot="label">
                                        起止日期
                                      </template>
                                        <el-date-picker  v-model="heForm.leaseStartDate"
                                          value-format="yyyy-MM-dd"    type="date"   placeholder="请选择" prefix-icon="none" style="border:none">
                                        </el-date-picker>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                      <template slot="label">
                                        出租人名称
                                      </template>
                                      <el-input
                                        v-model="heForm.lessorName"
                                        class="pass_input"
                                        placeholder="请输入"/>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                      <template slot="label">
                                        联系电话
                                      </template>
                                      <el-input
                                        v-model="heForm.telephone"
                                        class="pass_input"
                                        placeholder="请输入"/>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                      <template slot="label">
                                        银行账号
                                      </template>
                                      <el-input
                                        v-model="heForm.bankAccount"
                                        class="pass_input"
                                        placeholder="请输入"/>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                      <template slot="label">
                                        承担人名称
                                      </template>
                                      <el-input
                                        v-model="heForm.tenantName"
                                        class="pass_input"
                                        placeholder="请输入"/>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                      <template slot="label">
                                        承担人联系电话
                                      </template>
                                      <el-input
                                        v-model="heForm.tenantTelephone"
                                        class="pass_input"
                                        placeholder="请输入"/>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                      <template slot="label">
                                        承担人银行账号
                                      </template>
                                      <el-input
                                        v-model="heForm.tenantBankAccount"
                                        class="pass_input"
                                        placeholder="请输入"/>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                      <template slot="label">
                                        资源编号
                                      </template>
                                      {{heForm.shopNumber}}
                                      </el-descriptions-item>
                                    <el-descriptions-item>
                                      <template slot="label">
                                        合同附件
                                      </template>
                                      <el-upload
                                        class="upload-demo"
                                        :on-remove="hetongRemove"
                                        :action="uploadFileUrl"
                                        :on-success="hetongUploadSuccess"
                                        :file-list="hetongData"
                                        :auto-upload="true"
                                        >
                                        <div class="greens" v-if="hetongData.length==0"> + 点击上传</div>
                                      </el-upload>
                                    </el-descriptions-item>
                                  </el-descriptions>
                              </div>
                        </div>

                <span slot="footer" class="dialog-footer">
                  <el-button @click="heClose"  class="buttonHover"
                    style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;">返回</el-button>
                  <el-button @click="heCheck"
                    style="background-color: #3F9B6A;color: #fff;">确定</el-button>
                </span>
              </el-dialog>

    </div>
    <el-dialog :visible.sync="peiShow" custom-class='' style="padding: 0;" width="45%"
                                          :close-on-press-escape="false" center :close-on-click-modal="false" class="dialog_css_Xq" :show-close="false">
                                          <div style="padding:20px;">
                                            <div style="font-size: 14px;padding-bottom: 20px;color: #000;">审核流程配置</div>
                                              <el-form label-position="right" ref="jibenFrom" :model="peiForm"  label-width="140px"
                                                style="position: relative">
                                                <el-form-item label="审核提醒时间" class="grid-content bg-purple device-from" prop="planName">
                                                  <el-date-picker style="width:240px;margin-right:5px" v-model="peiForm.auditReminderTime"
                                                    value-format="yyyy-MM-dd HH:mm:ss"    type="datetime" prefix-icon="none" >
                                                  </el-date-picker>
                                                </el-form-item>
                                                </el-form>
                                            <div style="padding-top:20px;display:flex;justify-content: flex-end;">
                                              <el-button  style="background-color: #3F9B6A;color: #fff"
                                                @click="peiCheck">确定</el-button>
                                              <el-button @click="peiShow = false"  style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;" class="buttonHover">取消</el-button>

                                            </div>

                                          </div>

                                        </el-dialog>
  </div>




</template>

<script>
  import {
    async
  } from 'q'
  import axios from 'axios'
  import {
    contractGetAll,
    contractDel,
    addList,
    updateList,
    queryById,
    hetongById,
    hetongadd,
    hetongEdit,
    AdvertiserInfoGetAll,
    AdvertiserInfoEdit,
    AdvertiserInfoDel
  } from '../../../api/advertisement.js'
  import {
    uploadUrl
  } from '@/utils/request'
  export default {
    data() {
      return {
        uploadFileUrl: uploadUrl, // 请求地址
        fileList: [], //上传
        detbox: false, //详情
        leixing: 1, // 1是线上 2是实体
        currentPage: 1,
        total: 100,
        flag: false,
        pageSize: 10,
        ggXin: false,
        radio: '1',
        formInl: {
          leixing: '',
          pageview: '',
          highFrequencyTime: [],
          averageClickThroughPrice: ''
        },
        tableData: [],
        formSel: {
         cereAdvertisingInformation:{
           affiliation:'',
         },
         businessScope:'',
         applicant:'',
         scheduleTime:'',
          pageNumber: 1,
          pageSize: 10,
          advertisingSpaceType:'线上广告位',
          auditStatus:'已终止'
        },
        pageindex: {
          pageNumber: 1,
          pageSize: 10,
          advertisingSpaceType:'线上广告位',
          auditStatus:'已终止'
        },
        chengeTatle: 1,
        contractId: '',
        card: 'first', // 切换
        actSpye: false, //审核框
        actCard: '1',
        MsgSp: false,
        index: 0,
        MsgSp: false,
        liuYe: 1, //通过or驳回
        Liunie: false,
        secondData: {},
        detaiList: {},
        formInline: {

        },
        hetong: false,
        fukuanBox: false,
        idCardValidStart: [],
        businessStartDate: [],
        heForm: {
            contractNumber: '', //合同对应的ID
            sectionNumber: '',
            contractName: '',
            contractAmount: '',
            earnestMoney: '',
            contractSigningDate: '',
            contractTerminationDate: '',
            leaseStartDate: '',
            lessorName: '',
            telephone: '',
            bankAccount: '',
            tenantName: '',
            tenantTelephone: '',
            tenantBankAccount: '',
            relatedMerchants:'',
            shopNumber:'',
            appendicesContract:'',//附件
            contractStatus: '', //合同状态
            dataStatus: '1', //数据状态（1.使用中  2.往期合同 3.已终止）
        }, //合同字段
        contentStyle:{
          width:'20%',
          height:'42px',
        },
        labelStyle:{
          width:'150px',
          height:'42px',
          color:'#000',
        },
        hetongData:[],
        xxNum:0,
        stNum:0,
        peiForm:{
          auditReminderTime:'',
        },
        peiShow:false,
        peiId:'',
      }
    },
    created() {
      this.getAll(1)

    },
    computed: {

    },
    methods: {
      getTable(val) {

      },
      chenge(val) {
        this.formSel = {
         cereAdvertisingInformation:{
           affiliation:'',
         },
         businessScope:'',
         applicant:'',
         scheduleTime:'',
          pageNumber: 1,
          pageSize: 10,
          advertisingSpaceType:''
        }
        this.leixing = val
        this.chengeTatle = val
        if (val == 1) {
        this.pageindex.advertisingSpaceType ='线上广告位'
        this.formSel.advertisingSpaceType ='实体广告位'

        } else {
          this.formSel.advertisingSpaceType ='实体广告位'
this.pageindex.advertisingSpaceType ='实体广告位'
        }
        this.getAll(val)
      },
      async getAll(val) {
        if(val ==1){
          let pageindex={
                    pageNumber: 1,
                    pageSize: 10,
                    advertisingSpaceType:'实体广告位'
                  }
                  const res = await AdvertiserInfoGetAll(this.pageindex)
                  this.tableData = res.data.content
                  this.total = res.data.content.length
          this.xxNum = res.data.content.length

                  const stList = await AdvertiserInfoGetAll(pageindex)
                  this.stNum = stList.data.content.length

        }else{
          let pageindex={
                    pageNumber: 1,
                    pageSize: 10,
                    advertisingSpaceType:'线上广告位'
                  }
                  const res = await AdvertiserInfoGetAll(this.pageindex)
                  this.tableData = res.data.content
                  this.total = res.data.content.length
          this.stNum = res.data.content.length

                  const stList = await AdvertiserInfoGetAll(pageindex)
                  this.xxNum = stList.data.content.length
        }

      },

      //删除记录按钮
      async handleDelete(val) {
        const res = await contractDel({
          id: val.id
        })
        this.getTable(this.chengeTatle)
        this.getAll()
      },
      //详情
      details(val) {
        this.idCardValidStart = []
        this.businessStartDate = []
        this.secondData = val
        this.$set(this.idCardValidStart, 0, val.idCardValidStart)
            this.$set(this.idCardValidStart, 1, val.idCardValidEnd)
            this.$set(this.businessStartDate, 0, val.businessStartDate)
            this.$set(this.businessStartDate, 1, val.businessEndDate)
        this.detbox = true
      },
      handleSizeChange(val) {
        this.pageSize = val
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },
      closeFn(val) {
        if (val == 1) {
          this.ggXin = false
        } else if (val == 2) {
          this.detbox = false

        } else {
          this.hetongBox = false
          this.editHetong = false
        }
      },
      // 查询按钮
      async onSubmit() {
      if (this.leixing == 1) {
              this.formSel.advertisingSpaceType ='线上广告位'
                      const res = await AdvertiserInfoGetAll(this.formSel)
                      this.tableData = res.data.content
                      this.total = res.data.content.length
              this.xxNum = res.data.content.length

              let pageindex={
                        pageNumber: 1,
                        pageSize: 10,
                        advertisingSpaceType:'实体广告位'
                      }
                      const stList = await AdvertiserInfoGetAll(pageindex)
                      this.stNum = stList.data.content.length


              } else {
      this.formSel.advertisingSpaceType ='实体广告位'
      const res = await AdvertiserInfoGetAll(this.formSel)
              this.tableData = res.data.content
              this.total = res.data.content.length
      this.stNum = res.data.content.length

      let pageindex={
                pageNumber: 1,
                pageSize: 10,
                advertisingSpaceType:'线上广告位'
              }
              const stList = await AdvertiserInfoGetAll(pageindex)
              this.xxNum = stList.data.content.length
              }



      },
      //重置按钮
      resetting() {
        this.formSel = {
          cereAdvertisingInformation:{
            affiliation:'',
          },
         businessScope:'',
         applicant:'',
         scheduleTime:'',
          pageNumber: 1,
          pageSize: 10,
          advertisingSpaceType:'线上广告位'
        }

        this.chenge(this.leixing)
      },
      MsgShen(val) {
        this.index = val
        this.MsgSp = true
      },
      LiuYes(val) {
        this.liuYe = val
        this.Liunie = true
      },
      OAshen() {

        if (this.liuYe == 1) {
          AdvertiserInfoEdit({
            id: this.secondData.id,
            auditStatus: '2'
          }).then(res => {
            this.getAll()
          })
        } else {
          AdvertiserInfoEdit({
            id: this.secondData.id,
            auditStatus: '3'
          }).then(res => {
            this.getAll()
          })
        }
        this.Liunie = false
        this.actSpye = false

      },
      zhongzhi(item){
        AdvertiserInfoEdit({
          id: item.id,
          auditStatus: '5'
        }).then(res => {
          this.getAll()
        })
      },
      shenhe(item) {
        this.idCardValidStart = []
        this.businessStartDate = []
        this.secondData = item
        this.$set(this.idCardValidStart, 0, item.idCardValidStart)
            this.$set(this.idCardValidStart, 1, item.idCardValidEnd)
            this.$set(this.businessStartDate, 0, item.businessStartDate)
            this.$set(this.businessStartDate, 1, item.businessEndDate)
        this.actSpye = true
      },
      lookHetong(item) {
        this.secondData = item

        this.heForm ={
            contractNumber: '', //合同对应的ID
            sectionNumber: '',
            contractName: '',
            contractAmount: '',
            earnestMoney: '',
            contractSigningDate: '',
            contractTerminationDate: '',
            leaseStartDate: '',
            lessorName: '',
            telephone: '',
            bankAccount: '',
            tenantName: '',
            tenantTelephone: '',
            tenantBankAccount: '',
            relatedMerchants:'',
            shopNumber:'',
            contractStatus: '', //合同状态
            appendicesContract:'',//附件
            dataStatus: '1', //数据状态（1.使用中  2.往期合同 3.已终止）
        }
          this.heForm.relatedMerchants =  item.applicant
           this.heForm.shopNumber = item.rentalResourcesId
        this.hetong = true
      },
      fukuan() {
        this.secondData = item
        this.fukuanBox = true
      },
heClose(){
  this.heForm = {
            contractNumber: '', //合同对应的ID
            sectionNumber: '',
            contractName: '',
            contractAmount: '',
            earnestMoney: '',
            contractSigningDate: '',
            contractTerminationDate: '',
            leaseStartDate: '',
            lessorName: '',
            telephone: '',
            bankAccount: '',
            tenantName: '',
            tenantTelephone: '',
            tenantBankAccount: '',
            relatedMerchants:'',
            shopNumber:'',
            contractStatus: '', //合同状态
            appendicesContract:'',//附件
            dataStatus: '1', //数据状态（1.使用中  2.往期合同 3.已终止）
        } //合同字段
        this.hetong = false
},
heCheck(){
    if(this.hetongData.length !=0){
       this.heForm.appendicesContract = JSON.stringify(this.hetongData[0])
    }

  hetongadd(this.heForm).then(res=>{
    AdvertiserInfoEdit({
      id: this.secondData.id,
      contractId:res.data.id,
      auditStatus:'4',
    }).then(item => {
      this.getAll()
    })
  })
  this.hetong = false
},
   hetongRemove(){
        this.hetongData = []
      },
      hetongUploadSuccess(response, file, num){
        const fileMsg = {
          name:file.name,
           url: file.response.data.url,
        }
        // 将文件地址存储在 uploadedFiles 数组中
        this.hetongData.push(fileMsg);
      },

     async delXiang(){
        await AdvertiserInfoDel({id:this.secondData.id})
        this.detbox = false
        this.getAll()
      },
      peizhi(item){
        this.peiForm = {
          auditReminderTime:''
        }
        this.peiShow = true
        this.peiId = item.id
      },
      async peiCheck(){
         if(this.peiForm.auditReminderTime ==''){
           this.$message({
             message: '请填写审核提醒时间',
           })
           return;
         }
         await AdvertiserInfoEdit({id:this.peiId,auditReminderTime:this.peiForm.auditReminderTime})
          this.peiShow = false
          this.getAll()
       },
    }
  }
</script>

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

  .chengeXia {
    border-bottom: 6px solid #3F9B6A;
    padding-bottom: 4px;
    color: #3F9B6A;
  }

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

  .tableBtn {
    display: inline-block;
    margin-right: 10px;
    color: #ACACAC;
    cursor: pointer;
  }

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

  }

  .greens {
    color: #3F9B6A;
  }



  .fenye {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    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/ .bg-purple[data-v-3bebae82] {
    background: #fff;
    height: 50px;
  }

  ::v-deep .bg-purple {
    background: #fff;
    height: 50px;
  }

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


  /deep/.el-form-item__content label:nth-child(1) .is-checked+.el-radio__label {
    color: #757575 !important;
  }

  /deep/.el-form-item__content label:nth-child(1) .is-checked .el-radio__inner {
    border-color: #757575 !important;
    background: #757575 !important;
  }



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

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    border-top: solid rgba(209, 209, 209, 0.2) 2px;
    padding-top: 20px;
  }


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

  .el-select-dropdown__item.selected {
    color: #3F9B6A;
  }

  .el-pagination__sizes .el-input .el-input__inner:hover {
    border-color: #3F9B6A;
  }

  .hetong {
    color: #3F9B6A;
    text-decoration: underline;
    cursor: pointer;
  }

  .tfneirong {
    padding: 5px;
  }

  /deep/ .first-column-bg {
    background-color: #FAFAFA !important;
  }

  .el-table tr {
    height: 56px;
  }



  ::v-deep .pass_input {
    width: 100%;

    .el-input__inner {
      border: none;
      padding: 0;
    }
  }

  ::v-deep .pass_select {
    width: 100%;

    .el-input__inner {
      border: none;
      padding: 0;
    }

    .el-icon-arrow-up:before {
      content: ''
    }

  }

  ::v-deep .table3 {
    .el-table__empty-block {
      display: none;
    }
  }

  .radio-right-side {
    display: flex;
    justify-content: space-between;
  }

  /deep/ .radio-right-side .el-radio__label {
    display: flex;
    align-items: center;
  }

  /deep/ .radio-right-side .el-radio__inner {
    order: 1;
  }

  /deep/ .radio-right-side .el-radio__input {
    display: flex;
    order: 2;
  }

  /deep/ .radio-right-side {
    &:hover {
      color: #000;

    }

    .el-radio__input.is-checked {

      border-color: none;

    }

    .el-radio__input.is-checked .el-radio__inner {
      background: #3F9B6A;
      border-color: #3F9B6A;
    }

    .el-radio__input.is-checked .el-radio__inner {
      color: #000;

    }

    .el-radio__inner::after {
      border: 1px solid #3F9B6A !important;
    }
  }

  /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background: none;
  }

  /* /deep/ .el-input--mini .el-input__inner{
  color: #000;
  font-weight: 600;
} */
</style>
<style lang="scss" scoped>
  ::v-deep .bian_css {
    .el-dialog__header {
      padding: 0px;
    }

    .el-input__inner {
      height: 18px;
      border: 0px;
      margin-top: 0px;
    }

    .el-input__inner:hover {
      border: 0px;
    }

    .el-input__inner:focus {
      border: 0px;
    }
  }

  ::v-deep .buttonHover:hover {
    color: #3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }

  ::v-deep .el-pagination__total {
    position: absolute;
    left: 10px;
  }

  ::v-deep .shen_steps1 {
    .is-process {
      /* 待执行步骤颜色 */
      color: #3F9B6A;
      border: none;

      .el-step__icon {
        background-color: #3F9B6A;
      }

      .el-step__icon-inner {
        color: #fff;
      }

      .el-step__line {
        background-color: #3F9B6A;
      }

    }

    .is-finish {
      color: #3F9B6A;
      border: none;

      .el-step__icon {
        background-color: #3F9B6A;
      }

      .el-step__icon-inner {
        color: #fff;
      }

      .el-step__line {
        background-color: #3F9B6A;
      }
    }

  }

  ::v-deep .liu_steps {
    .step_start {
      flex-basis: 15% !important;

      .is-finish {
        border: none;
        color: #3F9B6A;

        .el-step__icon {
          background-color: #D3E6CC;
        }

        .el-step__icon .is-text {
          border: 2px solid #3F9B6A;
        }

        .el-step__icon-inner {
          display: none;
        }

        .el-step__line {
          border-color: #3F9B6A;
        }
      }

      .is-wait {

        border: none;
        color: #000;

        .el-step__icon {
          background-color: #fff;
        }

        .el-step__icon .is-text {
          border: 2px solid #000;
        }

        .el-step__icon-inner {
          display: none;
        }

        .el-step__line {
          background-color: #000;
        }

      }

      .is-process {
        border: none;
        color: #000;

        .el-step__icon {
          background-color: #fff;
        }

        .el-step__icon .is-text {
          border: 2px solid #000;
        }

        .el-step__icon-inner {
          display: none;
        }

        .el-step__line {
          background-color: #000;
        }
      }
    }

    .step_buen {
      flex-basis: 25% !important;

      .is-process {
        .el-step__icon {
          padding: 10px;
          border-radius: 10px;
          width: 120px;
          height: 70px;
          margin-top: -24px;
          position: relative;
          border: 2px solid #FABB41;
          font-size: 12px;
        }

        .el-step__icon .is-text {
          padding: 10px;
          border-radius: 10px;
          border: 2px solid #FABB41;
          font-size: 12px;
        }
      }

      .is-wait {
        .el-step__icon {
          padding: 10px;
          border-radius: 10px;
          width: 120px;
          height: 70px;
          margin-top: -24px;
          position: relative;
          border: 2px solid #C0C4CC;
          font-size: 12px;
        }

        .el-step__icon .is-text {
          padding: 10px;
          border-radius: 10px;
          border: 2px solid #C0C4CC;
          font-size: 12px;
        }
      }

      .is-finish {
        .el-step__icon {
          padding: 10px;
          border-radius: 10px;
          width: 120px;
          height: 70px;
          margin-top: -24px;
          position: relative;
          border: 2px solid #3F9B6A;
          background-color: #D3E6CC;
          font-size: 12px;
          color: #3F9B6A;
        }

        .el-step__icon .is-text {
          padding: 10px;
          border-radius: 10px;
          border: 2px solid #3F9B6A;
          font-size: 12px;
        }

        .el-step__line {
          background-color: #3F9B6A;
        }
      }
    }

    ::v-deep .xiang_steps {
      .is-process {
        /* 待执行步骤颜色 */
        color: #3F9B6A;
        border: none;

        .el-step__icon {
          background-color: #3F9B6A;
        }

        .el-step__icon-inner {
          color: #fff;
        }

        .el-step__line {
          background-color: #3F9B6A;
        }

      }

      .is-finish {
        color: #3F9B6A;
        border: none;

        .el-step__icon {
          background-color: #3F9B6A;
        }

        .el-step__icon-inner {
          color: #fff;
        }

        .el-step__line {
          border-color: #3F9B6A;
        }
      }


    }
  }

  ::v-deep .el-tabs__nav-wrap::after {
    background-color: #fff;
  }
  ::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell{
    padding:0 0 0 10px;
  }
  ::v-deep  .el-descriptions :not(.is-bordered) .el-descriptions-item__cell{
    padding-bottom: 0px;
  }
  ::v-deep .el-descriptions__title{
    font-weight:100;
    font-size:14px;
  }
</style>
