<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti" v-if="xiang == false&&actSpye==false">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>客服服务管理</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">活动审核</span></div>
      </div>
      <div>
        <!-- 搜索 -->
        <div class="formSearch">
          <div class="demo-input-suffix">
            <div style="width: 68px;height:36px;line-height:32px;">活动时间</div>
            <el-date-picker style="width:200px;margin-right:15px;" v-model="plan_Time"
              value-format="yyyy-MM-dd HH:mm:ss" prefix-icon="none" type="datetimerange" range-separator="-"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
            <div style="width: 68px;height:36px;line-height:32px;">举办区域</div>
            <el-input v-model="formSel.region" placeholder="请输入" style="width:168px;" />
          </div>
          <div>
            <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">查询
            </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="序号" width="100">
            <template slot-scope="scope">
              {{scope.$index + 1}}
            </template>
          </el-table-column>
          <el-table-column label="活动名称" prop="activityName" min-width="200">

          </el-table-column>
          <el-table-column label="活动时间" prop="implementationTime" min-width="350">
            <template slot-scope="scope">
              {{scope.row.startTime}}至{{scope.row.endTime}}
            </template>
          </el-table-column>
          <el-table-column label="活动类型" prop="activityType" min-width="120">
          </el-table-column>
          <el-table-column prop="region" label="举办区域" min-width="150">
          </el-table-column>
          <el-table-column prop="maxParticipants" label="可参与人数" min-width="150">
          </el-table-column>
          <el-table-column prop="createDate" label="创建时间" min-width="250">
          </el-table-column>
          <el-table-column prop="auditStatus" label="状态" min-width="150">
            <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="200" fixed="right">
            <template slot-scope="scope">
              <div @click="handleEditForm(scope.row,1)" class="tableBtn greens">查看</div>
              <div @click="shenhe(scope.row)" class="tableBtn greens" v-if="scope.row.auditStatus =='2'">审核</div>
              <div @click="getMing(scope.row.id)" class="tableBtn greens" v-if="scope.row.auditStatus =='3'">报名名单</div>
              <div @click="Qcode(scope.row)" class="tableBtn greens">活动二维码</div>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <div style="line-height: 200%;">共{{total}}条</div>
          <el-pagination class="pagination" :hide-on-single-page="flag" background small :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]" layout="prev, pager,next" :total="total " @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>

    <div class="zhuti" v-if='xiang'>
      <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="margin-top: 30px;" class="editcss">
        <TitleWithCircle title="活动信息"></TitleWithCircle>
        <div style="padding: 20px;">
          <el-form :model="secondData" ref="ruleForm" label-width="150px" class="demo-ruleForm">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="活动名称" prop="activityName">
                  <div class="duiqi">{{secondData.activityName}}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="活动类型" prop="activityType">
                  <div class="duiqi">{{secondData.activityType}}</div>

                </el-form-item>

              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="活动开始时间" prop="startTime">
                  <div class="duiqi">{{secondData.startTime}}</div>
                </el-form-item>

              </el-col>
              <el-col :span="12">
                <el-form-item label="活动结束时间" prop="endTime">
                  <div class="duiqi">{{secondData.endTime}}</div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="可参与人数" prop="maxParticipants">
                  <div class="duiqi">{{secondData.maxParticipants}}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="举办区域" prop="region">
                  <div class="duiqi">{{secondData.region}}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">

              <el-col :span="12">
                <el-form-item label="活动内容" prop="content">
                  <div class="duiqi">{{secondData.content}}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="审核状态" prop="businessScope">

                  <div class="duiqi">
                    {{secondData.auditStatus =='1'?'待提交':secondData.auditStatus =='2'?'待审核':secondData.auditStatus =='3'?'审核通过':secondData.auditStatus =='4'?'审核驳回':''}}
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="活动照片" prop="coverImage">
                  <!-- {{idCardPhotoFront}} -->
                  <!-- <el-image :src="$baseURL +secondData.coverImage"></el-image> -->
                  <div style="display: flex;">
                    <allimg v-if="item" :src="item" fit="contain" v-for="item in secondData.coverImage.split(',')"
                      style="width: 112px;height: 112px;border: 1px dotted #dcdfe6;border-radius: 2px;overflow: hidden;margin: 0 10px 10px 0;" />
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <div style="padding-left:160px;">
            <el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
              @click="xiang = false">取消</el-button>
          </div>

        </el-col>
      </el-row>
    </div>
    <div class="zhuti" v-if='actSpye'>
      <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="margin-top: 30px;" class="editcss">
        <TitleWithCircle title="活动信息"></TitleWithCircle>
        <div style="padding: 20px;">
          <el-form :model="secondData" ref="ruleForm" label-width="150px" class="demo-ruleForm">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="活动名称" prop="activityName">
                  <div class="duiqi">{{secondData.activityName}}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="活动类型" prop="activityType">
                  <div class="duiqi">{{secondData.activityType}}</div>

                </el-form-item>

              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="活动开始时间" prop="startTime">
                  <div class="duiqi">{{secondData.startTime}}</div>
                </el-form-item>

              </el-col>
              <el-col :span="12">
                <el-form-item label="活动结束时间" prop="endTime">
                  <div class="duiqi">{{secondData.endTime}}</div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="可参与人数" prop="maxParticipants">
                  <div class="duiqi">{{secondData.maxParticipants}}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="举办区域" prop="region">
                  <div class="duiqi">{{secondData.region}}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">

              <el-col :span="12">
                <el-form-item label="活动内容" prop="content">
                  <div class="duiqi">{{secondData.content}}</div>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="活动照片" prop="coverImage">
                  <!-- {{idCardPhotoFront}} -->
                  <!-- <el-image :src="$baseURL +secondData.coverImage"></el-image> -->
                  <div style="display: flex;">
                    <allimg v-if="item" :src="item" fit="contain" v-for="item in secondData.coverImage.split(',')"
                      style="width: 112px;height: 112px;border: 1px dotted #dcdfe6;border-radius: 2px;overflow: hidden;margin: 0 10px 10px 0;" />
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="审核状态" prop="businessScope">
                  <el-radio-group v-model="liuYe" style="line-height:40px">
                    <el-radio :label="3">通过</el-radio>
                    <el-radio :label="4">不通过</el-radio>
                  </el-radio-group>

                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </div>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <div style="padding-left:160px;">
            <el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
              @click="actSpye = false">取消</el-button>
            <el-button @click="OAshen" style="background-color: #3F9B6A;color: #fff;">确定</el-button>
          </div>

        </el-col>
      </el-row>
    </div>

    <el-dialog :visible.sync="showQF" title="活动二维码" style="padding: 0;" width="25%" center :close-on-click-modal="false"
      :show-close="false">
      <div style="padding:20px;">

        <div style="padding:20px;">
          <!-- <img :src="qfUrl" alt="" style="height:330px;width:80%"> -->
          <!-- <el-image
                                      style="width:200px; height: 200px"
                                      :src="$baseURL+qfUrl"
                                      fit="fill"></el-image> -->
          <div style="display: flex;">
            <allimg v-if="item" :src="item" fit="contain" v-for="item in qfUrl.split(',')"
              style="width: 112px;height: 112px;border: 1px dotted #dcdfe6;border-radius: 2px;overflow: hidden;margin: 0 10px 10px 0;" />
          </div>
        </div>
        <div style="padding-top:20px;display:flex;justify-content: flex-end;">
          <el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
            @click="showQF =false">返回</el-button>
        </div>
      </div>

    </el-dialog>
    <!-- 报名名单 -->
    <el-dialog :visible.sync="baoming" title="报名名单" style="padding: 0;" width="55%" center :close-on-click-modal="false"
      :show-close="false">
      <div style="padding:20px;">
        <div style="padding:20px;">
          <el-table :data="mingList"
            :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
            <el-table-column label="序号" min-width="150">
              <template slot-scope="scope">
                {{scope.$index +1 }}
              </template>
            </el-table-column>
            <el-table-column label="联系人" prop="signUpName" min-width="150">

            </el-table-column>
            <el-table-column label="联系电话" prop="signUpPhone" min-width="150">

            </el-table-column>
            <el-table-column label="报名时间" prop="signUpTime" min-width="150">

            </el-table-column>
          </el-table>
          <div class="fenye">
            <div style="line-height: 200%;">共{{mingtotal}}条</div>
            <el-pagination :hide-on-single-page='flag' background :current-page="actPage.pageNumber"
              layout="prev, pager, next" :total="mingtotal" @current-change="mingChange" />
          </div>
        </div>
        <div style="padding-top:20px;display:flex;justify-content: flex-end;">
          <el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
            @click="baoming =false">返回</el-button>
        </div>
      </div>

    </el-dialog>

  </div>
</template>

<script>
  import {
    actSpAll,
    actSpAdd,
    actSpEdit,
    actSpDel,
    QRcode,
    Registration
  } from '../../api/actSp.js'
  import wangEditor from "@/components/editor/index"
  import upimg from "@/components/ImageUpload/index"
  import TitleWithCircle from '@/components/top/index';
  import {
    uploadUrl
  } from '@/utils/request'
  import allimg from '@/components/chakan/allimg.vue';
  export default {
    components: {
      wangEditor,
      upimg,
      TitleWithCircle,
      allimg
    },
    data() {
      return {
        upload: uploadUrl,
        plan_Time: [],
        formSel: {
          region: '',
          pageNumber: 0,
          pageSize: 10,
          orderingRule: 3
        },
        secondData: {},
        xiangqing: 0,
        xiang: false,
        currentPage: 1,
        total: 0,
        flag: false,
        pageSize: 10,
        tableData: [

        ],
        pageindex: {
          pageNumber: 0,
          pageSize: 10,
          orderingRule: 3
        },
        fileList: [],
        actSpye: false, // 审核
        actCard: '1',
        MsgSp: false,
        index: 0,
        liuYe: 3, //3通过or4驳回
        Liunie: false,
        showQF: false,
        qfUrl: '',
        mingList: [],
        mingtotal: 0,
        baoming: false,
        actPage: {
          activityApplicationId: '',
          pageNumber: 0,
          pageSize: 10,
        }

      }
    },

    created() {
      this.getAll()

    },
    mounted() {

    },

    methods: {
      //查询全数据
      async getAll() {
        const res = await actSpAll(this.pageindex)
        this.tableData = res.data.content
        this.total = res.data.content.length
      },

      //查询
      async onSubmit() {

        if (this.plan_Time.length != 0) {
          this.formSel.startTime = this.plan_Time[0]
          this.formSel.endTime = this.plan_Time[1]
        }

        const res = await actSpAll(this.formSel)
        this.tableData = res.data.content
        this.total = res.data.content.length
      },
      //详情点击
      handleEditForm(item, val) {
        this.secondData = item
        this.xiang = true
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },
      handleSizeChange(val) {
        this.pageSize = val
      },
      closexaing(val) {
        this.xiang = false
      },
      handleClick() {

      },
      //重置按钮
      resetting() {
        this.formSel = {
          region: '',
          pageNumber: 1,
          pageSize: 10,
        }
        this.plan_Time = []
        this.getAll()
      },
      shenhe(item) {
        this.actSpye = true
        this.secondData = item
      },
      MsgShen(val) {
        this.index = val
        this.MsgSp = true
      },
      LiuYes(val) {
        this.liuYe = val
        this.Liunie = true
      },
      async OAshen() {
        await actSpEdit({
          id: this.secondData.id,
          auditStatus: this.liuYe
        })
        this.actSpye = false
        this.getAll()
      },
      Qcode(items) {
        this.showQF = true
        let pgs = {
          scene: `item='${items.id}'`,
          page: "pages/activityDetail/activityDetail"
        }
        QRcode(pgs).then(res => {
          this.qfUrl = res.data
        })
      },
      async getMing(ids) {
        this.actPage.activityApplicationId = ids
        this.actPage.pageNumber = 0
        const res = await Registration(this.actPage)
        this.mingList = res.data.content
        this.mingtotal = res.data.totalElements

        this.baoming = true

      },
      async mingChange(val) {
        this.actPage.pageNumber = val
        const res = await Registration(this.actPage)
        this.mingList = res.data.content
        this.mingtotal = res.data.totalElements

      }
    }
  }
</script>
<style scoped>
  /deep/ .first-column-bg {
    background-color: #f4f4f5 !important;
  }

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

  }

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

  ::v-deep .xinForm .el-form-item__content {
    line-height: 3;
  }

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



  .greens {
    color: #3F9B6A;
  }


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

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

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

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

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

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

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

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

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

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

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

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

  .demo-input-suffix {
    display: flex;
    margin-right: 20px;
    width: 83%;
  }

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

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


  /deep/ .dialog_css {
    margin-top: 11vh;
    margin-left: 13%;
    padding: 0px;

    .el-dialog__title {
      font-size: 12px;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



  ::v-deep .el-date-editor .el-range-separator {
    line-height: 24px;
  }
</style>
<style lang="scss" scoped>
  ::v-deep .bian_css {
    .el-dialog__header {
      padding: 10px 20px 20px 20px;
    }

    .el-dialog__body {
      padding: 5px;
    }
  }

  ::v-deep .xinFrom {
    .el-input--mini .el-input__inner {
      height: 36px;
      line-height: 36px;
    }

    .el-range-editor--mini.el-input__inner {
      height: 36px;
      width: 100%;
    }
  }

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

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

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


    }
  }
</style>
