<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>
        ({{xsNum}}个广告位)
        <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="tenant">
              <el-input v-model="formSel.tenant" placeholder="请输入"
                style="width: 168px;margin-right: 15px"/>
            </el-form-item>
            <el-form-item label="投放时间" prop="createDate" >
              <el-date-picker style="width:168px;margin-right:5px" v-model="formSel.marketTime"
                value-format="yyyy-MM-dd"  type="date"  prefix-icon="none">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="状态" prop="auditStatus"  >
              <el-select v-model="formSel.auditStatus" placeholder="请选择"
                style="width: 168px;margin-right: 15px">
                <el-option label="待审核" value="1" />
                <el-option label="待投放" value="2" />
                <el-option label="已驳回" value="3" />
                <el-option label="已投放" value="4" />
                <el-option label="已终止" value="5" />
              </el-select>
            </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>
        <div style="margin-bottom:20px;">
          <el-button plain @click="addbuss(1)" style="background-color: #3F9B6A;color: #fff;padding:8px 15px;" icon="el-icon-circle-plus-outline">新增
          </el-button>
        </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="150" prop="id" v-if="leixing == 1">
          </el-table-column>
          <el-table-column label="广告位编号" min-width="150" prop="advertisingId" v-if="leixing == 2">
          </el-table-column>
          <el-table-column label="投放位置" prop="placementLocation" min-width="120" v-if="leixing == 2">

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

          </el-table-column>
          <el-table-column label="承租人" prop="tenant" min-width="200">
            <template slot-scope="scope">
            {{scope.row.cereContractInformation.tenantName}}
             </template>
          </el-table-column>
          <el-table-column prop="contactInformation" label="联系方式" min-width="150">
            <template slot-scope="scope">
            {{scope.row.cereContractInformation.tenantTelephone}}
             </template>
          </el-table-column>
          <el-table-column prop="applicationTime" label="申请时间" min-width="250">
          </el-table-column>
          <el-table-column label="投放时间" min-width="250">
              <template slot-scope="scope">
              {{scope.row.marketTime||'2024-11-1'}}
               </template>
          </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="350">
            <template slot-scope="scope">
              <div @click="details(scope.row)" class="tableBtn greens">查看</div>
              <div @click="lookHetong(scope.row)" class="tableBtn greens" v-if="scope.row.auditStatus !='5'">合同编辑</div>
            <!--  <div @click="toufang(scope.row)" class="tableBtn greens" v-if="leixing == 1 && scope.row.auditStatus =='2'">投放</div>
              <div @click="xiajia(scope.row)" class="tableBtn greens" v-if="leixing ==1 && scope.row.auditStatus =='4'">下架</div> -->
              <div @click="toufang(scope.row)" class="tableBtn greens" v-if="leixing == 1 && scope.row.auditStatus =='2'">投放</div>
              <div @click="xiajia(scope.row)" class="tableBtn greens" v-if="leixing ==1 && scope.row.auditStatus =='4'">下架</div>
              <div @click="gengGai(scope.row)" class="tableBtn greens" v-if="leixing == 1&& scope.row.auditStatus !='5'">更改状态</div>
              <div @click="handleDelete(scope.row)" class="tableBtn greens" v-if="scope.row.auditStatus =='1'">删除</div>
              <!-- <div @click="handleDelete(scope.row)" class="tableBtn greens" >删除</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>

        <!-- 新建-->
        <el-dialog title="新增" :visible.sync="ggXin" custom-class='XDD_css' style="padding: 0;" width="70%"
                    center :close-on-click-modal="false" :show-close="false">

                    <div style="margin:20px;border:1px solid #EAEAEA">
                          <div style="display: flex;flex-wrap: wrap;justify-content: space-between;padding: 5px 10px;background-color: #FAFAFA;align-items: center;">
                            <div style="line-height: 28px;">广告位选择</div>
                            <div  class="greens"  @click="addziyuan = true">
                             添加
                            </div>
                          </div>
                          <div style="padding: 20px 10px 10px 20px;">
                            <el-table :data="AddziyuanData"
                              :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
                             >
                              <el-table-column label="序号" min-width="80">
                              <template slot-scope="scope">
                                  {{scope.$index + 1}}
                              </template>
                              </el-table-column>
                              <el-table-column label="广告位编号" prop="id" min-width="120">
                              </el-table-column>
                              <el-table-column label="广告位名称" prop="advertisingName" min-width="150">

                              </el-table-column>
                              <el-table-column label="广告位类型" prop="advertisingType" min-width="200">
                              </el-table-column>
                              <el-table-column prop="affiliation" label="所属端" min-width="150">
                              </el-table-column>
                              <el-table-column prop="dimensions" label="广告尺寸" min-width="250">
                              </el-table-column>

                            </el-table>
                          </div>
                    </div>
                  <div style="padding: 0 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-select v-model="formInl.scopeDeployment" placeholder="请选择"  class="pass_select"
                                 >
                                  <el-option label="线上广告位" value="线上广告位"  v-if="leixing == 1"/>
                                  <el-option label="实体广告位" value="实体广告位"  v-else/>
                                </el-select>
                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">

                                  投放内容
                                </template>
                                <el-upload
                                  class="upload-demo"
                                  :on-remove="handleRemove"
                                  :action="uploadFileUrl"
                                  :on-success="handleUploadSuccess"
                                  :file-list="fileData"
                                  :auto-upload="true"
                                  :listData="1"
                                  >
                                  <div class="greens" v-if="fileData.length==0"> + 点击上传</div>
                                </el-upload>
                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">
                                  跳转链接
                                </template>
                                <el-input
                                    v-model="formInl.jumpLink"
                                    class="pass_input"
                                    placeholder="请输入"/>
                              </el-descriptions-item>
                              <el-descriptions-item v-if="leixing == 2">
                                <template slot="label">
                                  投放位置
                                </template>
                                <el-input
                                    v-model="formInl.placementLocation"
                                    class="pass_input"
                                    placeholder="请输入" />
                              </el-descriptions-item>
                              <!-- <el-descriptions-item >
                                <template slot="label">
                                  投放时间
                                </template>
                                <el-date-picker style="width:168px;margin-right:5px" v-model="formInl.marketTime"
                                  value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder=""
                                  end-placeholder="" prefix-icon="none">
                                </el-date-picker>
                              </el-descriptions-item> -->
                            </el-descriptions>
                        </div>
                  </div>

                  <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-input
                                  v-model="heForm.contractSigningDate"
                                  class="pass_input"
                                  placeholder="请输入"/>
                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">
                                  合同终止日期
                                </template>
                                <el-input
                                  v-model="heForm.contractTerminationDate"
                                  class="pass_input"
                                  placeholder="请输入"/>
                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">
                                  起止日期
                                </template>
                                <el-input
                                  v-model="heForm.leaseStartDate"
                                  class="pass_input"
                                  placeholder="请输入"/>
                              </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>
                                <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="closeFn(1)"  class="buttonHover"
              style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;">返回</el-button>
            <el-button @click="addCheck('formInline')"
              style="background-color: #3F9B6A;color: #fff;">确定</el-button>
          </span>

          <!-- 资源选择 -->
          <el-dialog :visible.sync="addziyuan" custom-class='XDD_css' style="padding: 0;" width="50%"
            append-to-body center :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
            <div style="padding: 10px 13px;font-size: 14px;border-bottom: 1px solid #E5E5E5;display: flex;justify-content: space-between;">
              <div>添加</div>
            </div>
            <div style="padding: 15px;width:100%">
              <div style="border: 1px solid #E5E5E5;padding: 1px" id="huodong">
                <div style="padding: 10px 13px;font-size: 14px;border-bottom: 1px solid #E5E5E5;display: flex;justify-content: space-between;">
                  <div>选择资源</div>
                </div>
                <div style="padding: 15px;">
                  <div style="padding: 0px 20px 0px 0px">
                    <el-table :data="ziyuanData"
                    @current-change="handleSelectionChange" highlight-current-row
                      :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
                      >

                      <el-table-column label="序号"  min-width="8%" >
                        <template slot-scope="scope">
                          {{scope.$index + 1}}
                        </template>
                      </el-table-column>
                      <el-table-column label="编号" prop="id" min-width="22%">

                      </el-table-column>
                      <el-table-column label="资源名称"  min-width="15%">
                      <template slot-scope="scope">
                        {{scope.row.shopName ? scope.row.shopName :  scope.row.advertisingName}}
                      </template>
                      </el-table-column>
                      <el-table-column label="资源类型" min-width="15%">
                        <template slot-scope="scope">
                          {{scope.row.advertisingType ?scope.row.advertisingType:'商铺'}}
                        </template>
                      </el-table-column>
                      <el-table-column prop="notes" label="对应策略" min-width="15%">
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
            </div>
            <div style="display: flex;justify-content: flex-end;padding: 10px 20px 10px 0">
              <el-button  @click="mingClose" class="buttonHover"
                    style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消
              </el-button>
              <el-button  @click="minSev" style="background-color: #3F9B6A;color: #fff;">确定
              </el-button>

            </div>
          </el-dialog>
        </el-dialog>
      </div>

        <!-- 详情框 -->
            <el-dialog :visible.sync="detbox" custom-class='bian_css' style="padding: 0;" width="70%"
                    center :close-on-click-modal="false" :show-close="false">
                    <div style="padding:15px;">详情</div>
                    <div style="padding: 0 20px;">
                      <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.tenantName" 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-select v-model="hetongList.createUser"  disabled>
                                <el-option label="企业" value="企业" />
                                <el-option label="个人" value="个人" />
                              </el-select>
                            </el-form-item>
                            <el-form-item label="证件类型">
                              <el-input v-model="secondData.idCardType" disabled placeholder="身份证"></el-input>
                            </el-form-item>
                            <el-form-item label="身份证号码">
                              <el-input v-model="secondData.idCardNumber" disabled placeholder="511191561"></el-input>
                            </el-form-item>
                            <el-form-item label="身份证有效期">
                              <el-input v-model="secondData.idCardNumber" disabled placeholder="2001-3-4至2021-3-4"></el-input>
                              <!-- <el-date-picker style="width: 100%;" v-model="hetongList.plan_Time"
                                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="身份证照片(正面)">
                              <upimg v-model="secondData.coverPoster" :limit="1" :fileSize="1" :isShowTip="false"></upimg>
                            </el-form-item>
                            <el-form-item label="身份证照片(反面)">
                              <upimg v-model="secondData.coverPoster" :limit="1" :fileSize="1" :isShowTip="false"></upimg>
                            </el-form-item>
                            <el-form-item label="是否为法人">
                              <el-input v-model="secondData.founder" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="企业授权书">
                              <upimg v-model="secondData.coverPoster" :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.founder" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="统一社会信用代码">
                              <el-input v-model="secondData.founder" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="类型">
                              <el-select v-model="secondData.createUser" placeholder="请选择" disabled>
                                <el-option label="有限责任公司" value="有限责任公司" />
                              </el-select>
                            </el-form-item>
                            <el-form-item label="法定代表人">
                              <el-input v-model="secondData.founder" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="经营范围">
                              <el-input type="textarea" v-model="secondData.founder" :rows="4" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="注册资本">
                              <el-input v-model="secondData.founder" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="成立日期">
                              <el-input v-model="secondData.founder" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="住所">
                              <el-input v-model="secondData.founder" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱地址">
                              <el-input v-model="secondData.founder" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="营业期限">
                              <el-date-picker style="width: 100%;" v-model="secondData.plan_Time"
                                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="营业执照">
                              <upimg v-model="secondData.coverPoster" :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图">
                              <upimg v-model="secondData.coverPoster" :limit="1" :fileSize="1" :isShowTip="false"></upimg>
                            </el-form-item>
                            <el-form-item label="投放内容">
                              <el-input v-model="secondData.advertisingContent" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="跳转链接">
                              <el-input v-model="secondData.jumpLink" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="计划时间">
                              <el-date-picker style="width: 100%;" v-model="secondData.plan_Time"
                                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-tab-pane label="投放效果" name="four">
                          <el-descriptions class="margin-top" :column="3" title="投放信息"  border :labelStyle="labelStyle" :contentStyle="contentStyle">
                              <el-descriptions-item>
                                <template slot="label">
                                  点击量
                                </template>
                                  {{secondData.pageview}}
                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">

                                  高频时段
                                </template>
                                {{secondData.highFrequencyTime}}
                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">
                                  评价点击价格
                                </template>
{{secondData.averageClickThroughPrice}}
                              </el-descriptions-item>
                            </el-descriptions>

                            <!-- <div>点击量统计表</div> -->
                        </el-tab-pane>
                      </el-tabs>
                      <div style="margin-top: 50px;width: 99%;padding:10px;display:flex;justify-content: flex-end;">
 <el-button   class="buttonHover"
              style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;" @click="closeFn(2)">返回</el-button>
                             <!-- <el-button   style="background-color: #3F9B6A;color: #fff;">确定</el-button> -->

                      </div>
                    </div>


        </el-dialog>

        <!-- 合同 -->
                <el-dialog  :visible.sync="hetongBox" custom-class='bian_css' style="padding: 0;" width="70%"
                            center :close-on-click-modal="false" :show-close="false">

                  <div style="padding:20px">
<el-descriptions class="margin-top" :column="3" title="合同信息"  border :labelStyle="labelStyle" :contentStyle="contentStyle">
                              <el-descriptions-item>
                                <template slot="label">
                                  合同编号
                                </template>
                                <el-input
                                  v-model="hetong.contractNumber"
                                  class="pass_input"
                                  placeholder="请输入"/>
                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">
                                  标段号
                                </template>
                                <el-input
                                  v-model="hetong.sectionNumber"
                                    class="pass_input"
                                    placeholder="请输入"/>
                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">
                                  合同名称
                                </template>
                              <el-input
                                   v-model="hetong.contractName"
                                  class="pass_input"
                                  placeholder="请输入"/>
                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">
                                  合同金额
                                </template>
                                <el-input
                                  v-model="hetong.contractAmount"
                                  class="pass_input"
                                  placeholder="请输入"/>
                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">
                                  保证金
                                </template>
                                <el-input
                                  v-model="hetong.earnestMoney"
                                  class="pass_input"
                                  placeholder="请输入"/>
                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">
                                  合同终止日期
                                </template>
                                <el-input
                                  v-model="hetong.contractTerminationDate"
                                  class="pass_input"
                                  placeholder="请输入"/>
                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">
                                  起止日期
                                </template>
                                <el-input
                                  v-model="hetong.leaseStartDate"
                                  class="pass_input"
                                  placeholder="请输入"/>
                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">
                                  出租人名称
                                </template>
                                <el-input
                                  v-model="hetong.lessorName"
                                  class="pass_input"
                                  placeholder="请输入"/>
                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">
                                  联系电话
                                </template>
                                <el-input
                                  v-model="hetong.telephone"
                                  class="pass_input"
                                  placeholder="请输入"/>
                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">
                                  银行账号
                                </template>
                                <el-input
                                  v-model="hetong.bankAccount"
                                  class="pass_input"
                                  placeholder="请输入"/>
                              </el-descriptions-item>

                              <el-descriptions-item>
                                <template slot="label">
                                  承租人联系电话
                                </template>
                                <el-input
                                  v-model="hetong.tenantTelephone"
                                  class="pass_input"
                                  placeholder="请输入"/>
               </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">
                                  承租人银行账号
                                </template>
                                <el-input
                                  v-model="hetong.tenantBankAccount"
                                  class="pass_input"
                                  placeholder="请输入"/>
                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label">
                                  广告位编号
                                </template>
                                <el-input
                                  v-model="secondData.advertisingId"
                                  class="pass_input"
                                  placeholder="请输入"/>
                              </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 style="margin-top: 50px;width: 99%;padding:10px;display:flex;justify-content: flex-end;">
                            <el-button   class="buttonHover"
              style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;"  @click="closeFn(3)">返回</el-button>
                                   <el-button @click="EditHetong()"   style="background-color: #3F9B6A;color: #fff;">确定</el-button>
                                    <!-- <el-button    style="background-color: #3F9B6A;color: #fff;">下载</el-button> -->


                            </div>
                </el-dialog>
                <el-dialog  :visible.sync="steatShow" custom-class='bian_css' style="padding: 0;" width="55%"
                                            center :close-on-click-modal="false" :show-close="false">
                                            <div style="padding:15px;">更改状态</div>
                                            <div style="padding: 0 20px 20px 20px;">
                                              <el-form ref="form" label-width="140px">
                                                <el-form-item label="广告位名称">
                                                  <el-input v-model="secondData.founder" disabled placeholder="绿道广告位"></el-input>
                                                </el-form-item>
                                                <el-form-item label="编号">
                                                  <el-input v-model="secondData.id" disabled placeholder="ggw1105"></el-input>
                                                </el-form-item>
                                                <el-form-item label="投放时间">

                                                  <el-input v-model="secondData.founder" disabled placeholder="2001-3-4至2021-3-4"></el-input>
                                                 <!-- <el-date-picker style="width: 100%;" v-model="secondData.plan_Time"
                                                    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="状态">
                                                  <el-input v-model="secondData.founder" disabled placeholder="待投放"></el-input>
                                                </el-form-item>
                                                <el-form-item label="状态更改">
                                                  <el-select v-model="auditStatusNum" placeholder="请选择" >
                                                    <el-option label="终止" value="2" />

                                                  </el-select>
                                                </el-form-item>
                                              </el-form>
                                            </div>
                                            <div style="margin-top: 50px;width: 99%;padding:10px;display:flex;justify-content: flex-end;">
                                            <el-button   class="buttonHover"
                              style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;"  @click="steatShow=false">返回</el-button>
                                                   <el-button @click="status"   style="background-color: #3F9B6A;color: #fff;">确定</el-button>

                                            </div>
                                </el-dialog>
      </div>

      </div>
    </div>

  </div>
</template>

<script>
  import {
    async
  } from 'q'
  import axios from 'axios'
 import {
   contractGetAll,
   contractDel,
   addList,
   updateList,
   queryById,
   hetongById,
   hetongadd,
   hetongEdit,
   hetongDel,
   hetongBy
 } from '../../api/advertisement.js'
 import {
   getAlls as map1
 } from '../../api/map1'
 import {
   uploadUrl
 } from '@/utils/request'

  export default {

    data() {
      return {
        uploadFileUrl: uploadUrl, // 请求地址
        fileData:[],//上传附件
        hetongBox:false,//合同
        detbox:false,//详情
        leixing:1,// 1是线上 2是实体
        currentPage: 1,
        total: 100,
        flag: false,
        pageSize: 10,
        ggXin: false,
        radio: '1',
        ggwSel:[],
        formInl: {
         scopeDeployment:'',
         jumpLink:'',
         auditStatus:'2',
         placementLocation:'',
         marketTime:'',
        },
        tableData: [],
        formSel: {
        tenant:'',
        marketTime:'',
        auditStatus:'',
         pageNumber: 1,
         pageSize: 10,
        },
        pageindex: {
          pageNumber: 1,
          pageSize: 10,
          scopeDeployment:'线上广告位'
        },
        chengeTatle:1,
        contractId:'',
        secondData:{},
        hetong:{},
         card: 'first', // 切换
         steatShow:false,
        addziyuan:false,//资源列表选择
        AddziyuanData:[],
        multipleSelection:[],
        ziyuanData:[],
        hetongData:[],
        heForm: {
          contractNumber: '', //合同对应的ID
          sectionNumber: '',
          contractName: '',
          contractAmount: '',
          earnestMoney: '',
          contractSigningDate: '',
          contractTerminationDate: '',
          leaseStartDate: '',
          lessorName: '',
          telephone: '',
          bankAccount: '',
          tenantName: '',
          tenantTelephone: '',
          tenantBankAccount: '',
          contractStatus: '', //合同状态
          dataStatus: '1', //数据状态（1.使用中  2.往期合同 3.已终止）
        }, //合同字段
        contentStyle:{
          width:'20%',
          height:'42px',
        },
        labelStyle:{
          width:'150px',
          height:'42px',
          color:'#000',
        },

        xsNum:0,
        stNum:0,
        hetongList:{},
        auditStatusNum:''
      }
    },
    created() {
      this.getAll()
        let obj={
          pageNumber: 1,
          pageSize: 10,
          scopeDeployment:'实体广告位'
        }
        contractGetAll(obj).then(res=>{
              this.stNum = res.data.content.length
          })
    },
    computed: {

    },
    methods: {
       getTable(val){

       },
      chenge(val){
        this.formSel={
        tenant:'',
        marketTime:'',
        auditStatus:'',
         pageNumber: 1,
         pageSize: 10,
        }
        console.log(val)
        this.leixing  = val
         this.chengeTatle = val
         if(val == 1){
             this.ggwSel.map(res=>{
               res.ggwLei = '线上广告位'
             })
             this.pageindex.scopeDeployment ='线上广告位'
            this.getAll((this.pageindex))
         }else{
           this.ggwSel.map(res=>{
             res.ggwLei = '实体广告位'
           })
          this.pageindex.scopeDeployment ='实体广告位'
           this.getAll(this.pageindex)
         }
      },
      async getAll(val) {
        const res = await contractGetAll(this.pageindex)
        if(this.pageindex.scopeDeployment == '线上广告位'){
          this.xsNum = res.data.content.length
        }else{
          this.stNum = res.data.content.length
        }
        this.tableData = res.data.content
        this.total = res.data.content.length
      },
  // 获取时间
      currentTime() {
          let date = new Date();
          let year = date.getFullYear();
          let month = date.getMonth() + 1; // 月份从0~11，所以加一
          let day = date.getDate();
          let hours = date.getHours();
          let minutes = date.getMinutes();
          let seconds = date.getSeconds();

          // 为月、日、时、分、秒添加前导零（如果需要）
          month = month < 10 ? '0' + month : month;
          day = day < 10 ? '0' + day : day;
          hours = hours < 10 ? '0' + hours : hours;
          minutes = minutes < 10 ? '0' + minutes : minutes;
          seconds = seconds < 10 ? '0' + seconds : seconds;

          // 拼接日期和时间字符串
          let strDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
          return strDate;
      },
      // 新增确定按钮
       addCheck(formInline) {
        // this.ggwSel[this.radio]
         if(this.AddziyuanData.length != 0){
            this.formInl.advertisingId  = this.AddziyuanData[0].id
         }
         if(this.fileData.length !=0){
             this.formInl.advertisingContent  =  JSON.stringify(this.fileData)
         }
         if(this.hetongData.length !=0){
             this.heForm.appendicesContract  =  JSON.stringify(this.hetongData)
         }
        this.heForm.createDate = this.currentTime()
        hetongadd(this.heForm).then(res => {
          this.formInl.contractId = res.data.id
          this.formInl.applicationTime = this.currentTime()
          addList(this.formInl).then(res => {
            this.getAll()
          })
        })
        this.ggXin = false

      },
      //删除记录按钮
      handleDelete(val) {
             const h = this.$createElement;
                     this.$msgbox({
                       title: '消息',
                       message: h('p', null, [
                         h('span', null, '是否删除当前记录 '),
                       ]),
                       showCancelButton: true,
                       showClose:false,
                       confirmButtonText: '确定',
                       cancelButtonText: '取消',
                       customClass:'oe-dialog-btn',
                       beforeClose: (action, instance, done) => {
                         if (action === 'confirm') {
                           contractDel({id:val.id}).then(res=>{
                             this.getTable(this.chengeTatle)
                              this.getAll()
                             done();
                           })
                         } else {
                           done();
                         }
           }
           })

      },
      //详情
      details(val){
        this.secondData = val
        this.hetongList = val.cereContractInformation
          this.detbox = true

      },
      handleSizeChange(val) {
        this.pageSize = val
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },
     async addbuss(val) {
       const listGGW = {
         pageNumber: 1,
         pageSize: 10,
       }
       if(this.leixing == '1'){
         listGGW.advertisingType = '线上广告位'
       const res =  await map1(listGGW)
       this.ziyuanData = res.data.content
       }else{
         listGGW.advertisingType = '实体广告位'
         const res =  await map1(listGGW)
         this.ziyuanData = res.data.content
       }
      this.hetongData =[]
        this.ggXin = true
      },
      closeFn(val) {
       if(val == 1){
          this.ggXin = false
       }else if(val ==2){
         this.detbox = false

       }else{
         this.hetongBox = false
       }
      },
      //查看合同
     async lookHetong(val){
       this.hetongData =[]
         let obj ={
           contractNumber:val.contractNumber,
           pageNumber: 1,
           pageSize: 10,
         }
     const res =  await hetongById(obj)
     this.secondData  = val
     const contentLength = res.data.content.length
     // 检查数组是否为空
     if (contentLength > 0) {
       // 获取最后一个元素并赋值给 this.hetong
       this.hetong = res.data.content[contentLength - 1]
     }
       this.hetongBox = true
      },
      //编辑合同
     async EditHetong(val){
       this.hetong.updateDate  = ''
       await hetongEdit(this.hetong)
       this.hetongBox = false
      this.getTable(this.chengeTatle)
      },
      // 查询按钮
      onSubmit() {

          if(this.leixing == 1){
            this.formSel.online = '线上广告位'
            this.pageindex.scopeDeployment= '线上广告位'
          }else{
             this.formSel.online = '实体广告位'
             this.pageindex.scopeDeployment= '实体广告位'
          }
          contractGetAll(this.formSel).then(res=>{
            if(this.pageindex.scopeDeployment == '线上广告位'){
              this.xsNum = res.data.content.length
            }else{
              this.stNum = res.data.content.length
            }
            this.tableData = res.data.content
            this.total = res.data.content.length
          })
          // const res = await contractGetAll(this.pageindex)

        // let res  =  await queryById(cha)
        // this.tableData = res.data

      },
      //重置按钮
      resetting(){
        this.formSel={
        tenant:'',
        marketTime:'',
        auditStatus:'',
         pageNumber: 1,
         pageSize: 10,
        }
       if(this.leixing == 1){

         this.pageindex.scopeDeployment= '线上广告位'
       }else{

          this.pageindex.scopeDeployment= '实体广告位'
       }
        this.getAll(this.pageindex)
        // this.getTable(this.chengeTatle)
      },
      gengGai(item){
        this.secondData = item
        this.steatShow = true
      },
      minSev() {
        this.AddziyuanData = []
        this.AddziyuanData.push(this.multipleSelection)
        this.addziyuan = false
        this.multipleSelection =[]
        console.log(this.AddziyuanData)

      },
      mingClose(){
        this.multipleSelection =[]
        this.AddziyuanData = []
        this.addziyuan = false

      },
    handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleRemove(file, fileList) {
        this.fileData = []
      },
      handleUploadSuccess(response, file, num) {
        console.log(response, file, num)
        const fileMsg = {
          name:file.name,
           url: file.response.data.url,
        }
        // 将文件地址存储在 uploadedFiles 数组中
        this.fileData.push(fileMsg);
      },
      hetongRemove(){
        this.hetongData = []
      },
      hetongUploadSuccess(response, file, num){
        const fileMsg = {
          name:file.name,
           url: file.response.data.url,
        }
        // 将文件地址存储在 uploadedFiles 数组中
        this.hetongData.push(fileMsg);
      },
      childFujian(msg){
          this.fileData = msg
      },
     async toufang(item){
         await updateList({id:item.id,auditStatus:'4'})
         this.getAll()
      },
     async xiajia(item){
        await updateList({id:item.id,auditStatus:'2'})
        this.getAll()
      },
     async status(){
        await updateList({id:this.secondData.id,auditStatus:'5'})
        this.steatShow = 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-input__inner:focus {
      border: #3F9B6A 1px solid;
   }
   ::v-deep .el-input__inner:hover {
        border: #3F9B6A 1px solid;
     }
     ::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:#7DBB9A;
   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;

} */
</style>
<style lang="scss" scoped>
  ::v-deep .bian_css {
    .el-dialog__header {
      padding: 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 .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>
