<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>问卷调查</span> <span style="padding:0 5px;">></span> <span
          style="color:#000000e6"
        >问卷审核</span></div>
      </div>
      <!-- 线上 -->
      <div>
        <!-- 搜索 -->
        <div class="formSearch">
          <el-form :inline="true" :model="formSel">
            <el-form-item label="问卷标题">
              <el-input v-model="formSel.title" placeholder="请输入" style="width:168px;" />
            </el-form-item>
            <el-form-item label="问卷类型">
              <el-select v-model="formSel.questionnaireType" placeholder="请选择" style="width:168px;margin-right: 15px">
                <el-option label="物业问卷" value="物业问卷" />
                <el-option label="招商问卷" value="招商问卷" />
                <el-option label="满意度问卷" value="满意度问卷" />
                <el-option label="社会调查问卷" value="社会调查问卷" />
              </el-select>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="formSel.reviewStatus" placeholder="请选择" style="width:168px;margin-right: 15px">
                <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 :disabled="isbutton" style="background-color: #3F9B6A;color: #fff" @click="onSubmit">查询
            </el-button>
            <el-button
              class="buttonHover"
              style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
              @click="resetting"
            >重置
            </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'}"
          tooltip-effect="dark custom-tooltip-effect"
        >
          <el-table-column label="序号" min-width="80">
            <template slot-scope="scope">
              {{ scope.$index +1 }}
            </template>
          </el-table-column>

          <el-table-column label="问卷类型" min-width="120" prop="questionnaireType" />
          <el-table-column label="问卷标题" prop="title" min-width="300" :show-overflow-tooltip="true" />
          <el-table-column label="开始时间" prop="startDate" min-width="150" />
          <el-table-column label="结束时间" prop="endDate" min-width="150" />
          <el-table-column label="已作答人数" prop="countNumber" min-width="100" />
          <el-table-column prop="createTime" label="创建时间" min-width="180" />
          <el-table-column prop="reviewStatus" label="状态" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.reviewStatus == '1'?'待提交':scope.row.reviewStatus == '2'?'待审核':scope.row.reviewStatus == '3'?'审核通过':scope.row.reviewStatus == '4'?'不通过':'已禁用' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="280">
            <template slot-scope="scope">
              <div class="tableBtn greens" @click="details(0,scope.row)">查看</div>
              <!-- <div @click="bianls(scope.row)" class="tableBtn greens" v-if="scope.row.reviewStatus =='2'">审核</div> -->
              <div v-if="scope.row.reviewStatus =='2'" class="tableBtn greens" @click="bianls(scope.row)">审核</div>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination
            :hide-on-single-page="flag"
            background
            small
            size="mini"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            layout="prev, pager, next,total"
            :total="total "
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>

    </div>
    <!-- 详情框 -->
    <el-dialog
      :visible.sync="detbox"
      custom-class="tongyong_css"
      style="padding: 0;"
      width="65%"
      center
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div style="padding:20px;">
        <div style="font-size: 14px;padding-bottom: 20px;color: #000;">详情页</div>
        <div>
          <div style="padding: 10px 0  20px 0;">基本信息</div>
          <el-descriptions class="margin-top" :column="3" border :label-style="labelStyle" :content-style="contentStyle">

            <el-descriptions-item :span="2">
              <template slot="label">
                问卷标题
              </template>
              {{ secondData.title }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                状态
              </template>
              {{ secondData.reviewStatus == '1'?'待提交':secondData.reviewStatus == '2'?'待审核':secondData.reviewStatus == '3'?'审核通过':secondData.reviewStatus == '4'?'不通过':'已禁用' }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                开始时间
              </template>
              {{ secondData.startDate }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                结束时间
              </template>
              {{ secondData.endDate }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                预计填写时长
              </template>
              {{ secondData.estimatedTime }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                发布端口
              </template>
              {{ secondData.publishPort }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                问卷类型
              </template>
              {{ secondData.questionnaireType }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                填写条件
              </template>
              {{ secondData.fillingConditions }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                问卷介绍
              </template>
              {{ secondData.remarks }}
            </el-descriptions-item>

          </el-descriptions>
          <div style="padding: 20px 0;">问卷封面</div>

          <div>
            <!-- <img :src="secondData.coverImage" alt="" style="height:100%;" /> -->
            <el-image
              style="width: 200px; height: 200px"
              :src="this.$hostUrl + secondData.coverImage"
              fit="fill"
            />
          </div>
          <div v-if="secondData.filler == '会员'" style="padding: 20px 0 ;">参与答卷奖励</div>
          <el-descriptions v-if="secondData.filler == '会员'" class="margin-top" :column="3" border :label-style="labelStyle" :content-style="contentStyle">
            <el-descriptions-item>
              <template slot="label">
                提交问卷后
              </template>
              {{ secondData.rewardForParticipation }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                奖励
              </template>
              <!-- {{secondData.id}} -->
            </el-descriptions-item>
          </el-descriptions>
          <div style="padding: 20px 0 ;">问卷题目</div>
          <el-table
            :data="wenData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
            :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
          >
            <el-table-column label="序号" min-width="100">
              <template slot-scope="scope">
                {{ scope.$index +1 }}
              </template>
            </el-table-column>
            <el-table-column label="题目" min-width="300" prop="title" />
            <el-table-column label="题型" min-width="80" prop="type" />
            <el-table-column label="是否必填" prop="required" min-width="80" />
            <el-table-column label="选项" min-width="120">
              <template slot-scope="scope">
                <div v-for="(value, index) in scope.row.options " v-if="scope.row.type !='文本'" :key="index">
                  {{ index +1 }}：{{ value.answer }}
                </div>
                <div v-else>
                  -
                </div>
              </template>

            </el-table-column>

          </el-table>
          <div style="padding: 20px 0 ;">系统信息</div>
          <el-descriptions class="margin-top" :column="3" border :label-style="labelStyle" :content-style="contentStyle">
            <el-descriptions-item>
              <template slot="label">
                创建人
              </template>
              {{ secondData.createUser }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                创建时间
              </template>
              {{ secondData.createTime }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                更新时间
              </template>
              {{ secondData.updateTime }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div style="padding: 20px 0 ;">审核信息</div>
        <el-descriptions class="margin-top" :column="3" border :label-style="labelStyle" :content-style="contentStyle">
          <el-descriptions-item>
            <template slot="label">
              审核状态
            </template>
            {{ secondData.reviewStatus == '3'?'审核通过':secondData.reviewStatus == '4'?'不通过':'' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              审核意见
            </template>
            {{ secondData.reviewComments }}
          </el-descriptions-item>

        </el-descriptions>
        <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="detbox = false"
          >返回</el-button>
        </div>
      </div>

    </el-dialog>
    <el-dialog
      width="40%"
      title="审核"
      custom-class="liucheng_css"
      :visible.sync="Liunie"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      append-to-body
    >
      <div style="padding:30px 20px 0 20px">
        <el-form
          ref="ruleFormInfo"
          :model="shenMsg"
          :rules="rules"
          label-width="120px"
          style="position: relative"
        >
          <el-form-item label="审核状态" class="grid-content bg-purple" prop="reviewStatus">
            <el-radio-group v-model="shenMsg.reviewStatus" style="margin-top:13px;">
              <el-radio :label="3">通过</el-radio>
              <el-radio :label="4">不通过</el-radio>

            </el-radio-group>
          </el-form-item>

          <el-form-item label="处理意见" class="grid-content bg-purple" prop="reviewComments">
            <el-input
              v-model="shenMsg.reviewComments"
              type="textarea"
              placeholder="请输入处理意见"
              maxlength="50"
            />
          </el-form-item>

        </el-form>
      </div>
      <div style="display:flex;justify-content: flex-end;padding:20px;">
        <el-button
          style="background-color: #3F9B6A;color: #fff;"
          @click="quxiao"
        >取消</el-button>
        <el-button
          style="background-color: #3F9B6A;color: #fff;"
          @click="OAshen"
        >确定</el-button>
      </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"  @tab-click="handleClick">
                              <el-tab-pane label="表单信息" name='1'>
                                <div style="margin:0 0 10px 30%">方案文件 {{secondData.title}}</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>
                                </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-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:30px 20px 0 20px">
                                           <div style="border: 1px solid #E5E5E5;padding: 1px" v-if="index == 1">
                                             <div style="padding: 10px 13px;font-size: 14px;border-bottom: 1px solid #E5E5E5;">
                                              基本信息
                                             </div>
                                             <div style="padding: 15px;">
                                               <div>
                                                 <el-descriptions class="margin-top" :column="3" border :labelStyle="labelStyle" :contentStyle="contentStyle">
                                                   <el-descriptions-item>
                                                     <template slot="label">
                                                       问卷编号
                                                     </template>
                                                     {{secondData.id}}

                                                   </el-descriptions-item>
                                                   <el-descriptions-item>
                                                     <template slot="label">
                                                       问卷标题
                                                     </template>
                                                     {{secondData.title}}
                                                   </el-descriptions-item>
                                                   <el-descriptions-item>
                                                     <template slot="label">
                                                       状态
                                                     </template>
                                                       {{secondData.reviewStatus == '1'?'待提交':secondData.reviewStatus == '2'?'待审核':secondData.reviewStatus == '3'?'审核通过':secondData.reviewStatus == '4'?'不通过':''}}
                                                   </el-descriptions-item>

                                                   <el-descriptions-item>
                                                     <template slot="label">
                                                       开始时间
                                                     </template>
                                                     {{secondData.startDate}}
                                                   </el-descriptions-item>
                                                   <el-descriptions-item>
                                                     <template slot="label">
                                                       结束时间
                                                     </template>
                                                     {{secondData.endDate}}
                                                   </el-descriptions-item>

                                                   <el-descriptions-item>
                                                     <template slot="label">
                                                       预计填写时长
                                                     </template>
                                                     {{secondData.estimatedTime}}
                                                   </el-descriptions-item>
                                                   <el-descriptions-item>
                                                     <template slot="label">
                                                       发布端口
                                                     </template>
                                                     {{secondData.publishPort}}
                                                   </el-descriptions-item>
                                                   <el-descriptions-item>
                                                     <template slot="label">
                                                       问卷类型
                                                     </template>
                                                     {{secondData.questionnaireType}}
                                                   </el-descriptions-item>
                                                   <el-descriptions-item>
                                                     <template slot="label">
                                                       备注
                                                     </template>
                                                     {{secondData.remarks}}
                                                   </el-descriptions-item>
                                                   <el-descriptions-item>
                                                     <template slot="label">
                                                       填写条件
                                                     </template>
                                                     {{secondData.fillingConditions}}
                                                   </el-descriptions-item>
                                                 </el-descriptions>
                                                    <div style="padding: 20px 0;">问卷封面</div>
                                                    <div>
                                                      <img :src="secondData.coverImage" alt="" style="width: 150px;height: 150px;" />
                                                    </div>
                                                     <div style="padding: 20px 0 ;">参与答卷奖励</div>
                                                     <el-descriptions class="margin-top" :column="3" border :labelStyle="labelStyle" :contentStyle="contentStyle">
                                                       <el-descriptions-item>
                                                         <template slot="label">
                                                           提交问卷后
                                                         </template>
                                                         {{secondData.rewardForParticipation}}
                                                       </el-descriptions-item>
                                                       <el-descriptions-item>
                                                         <template slot="label">
                                                           奖励
                                                         </template>

                                                       </el-descriptions-item>
                                                     </el-descriptions>
                                                       <div style="padding: 20px 0 ;">系统信息</div>
                                                       <el-descriptions class="margin-top" :column="3" border :labelStyle="labelStyle" :contentStyle="contentStyle">
                                                         <el-descriptions-item>
                                                           <template slot="label">
                                                             创建人
                                                           </template>
                                                           {{secondData.createUser}}
                                                         </el-descriptions-item>
                                                         <el-descriptions-item>
                                                           <template slot="label">
                                                             创建时间
                                                           </template>
                                                           {{secondData.createTime}}
                                                         </el-descriptions-item>
                                                         <el-descriptions-item>
                                                           <template slot="label">
                                                             更新人
                                                           </template>

                                                         </el-descriptions-item>
                                                         <el-descriptions-item>
                                                           <template slot="label">
                                                             更新时间
                                                           </template>

                                                         </el-descriptions-item>
                                                       </el-descriptions>
                                               </div>
                                             </div>
                                           </div>
                                           <div style="border: 1px solid #E5E5E5;padding: 1px" v-if="index == 2">
                                             <div style="padding: 10px 13px;font-size: 14px;border-bottom: 1px solid #E5E5E5;display: flex;">
                                             <div>问卷题目信息</div>
                                             </div>
                                             <div style="padding: 15px;">
                                               <el-table :data="tikuziyuan.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                                                 :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
                                               >
                                                <el-table-column label="序号" min-width="100">
                                                  <template slot-scope="scope">
                                                    {{scope.$index + 1}}
                                                  </template>
                                                </el-table-column>
                                                <el-table-column label="问题描述" min-width="150" prop="tikuTitle">
                                                </el-table-column>
                                                <el-table-column label="问题类型" min-width="150" prop="questionType">
                                                </el-table-column>
                                                <el-table-column label="是否必填" prop="isRequired" min-width="150">
                                                </el-table-column>
                                                <el-table-column label="题干说明" prop="questionDescription" min-width="120">
                                                </el-table-column>
                                                <el-table-column label="设置内容" min-width="120">
                                                  <template slot-scope="scope">
                                                    <span v-for="(value, key) in JSON.parse(scope.row.optionSettings)" :key="key">
                                                    {{ key }}：{{ value }}
                                                    </span>
                                                  </template>

                                                </el-table-column>
                                               </el-table>
                                             </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%"
                                      title="流程审批"
                                      custom-class='liucheng_css'
                                      :visible.sync="Liunie"
                                      :close-on-click-modal="false" :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>
                                                      <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>
                                                     <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>
                                                     <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">

                                           </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> -->
  </div>

</template>

<script>
import {
  async
} from 'q'
import axios from 'axios'
import {
  TerminaGetAll,
  TerminaAdd,
  TerminaEdit,
  TerminaDel,
  QuestionGetAll,
  QuestionAdd,
} from '../../api/investigation.js'
import upimg from '@/components/ImageUpload/index'
export default {
  components: {
    upimg
  },
  data () {
    return {
      detbox: false, // 详情
      currentPage: 1,
      total: 10,
      flag: false,
      pageSize: 10,
      tableData: [
      ],
      secondData: {},
      formSel: {
        queryStatus: '1',
        title: '',
        questionnaireType: '',
        reviewStatus: '',
        pageNumber: 0,
        pageSize: 10,
      },
      pageindex: {
        pageNumber: 0,
        pageSize: 10,
        queryStatus: '1'
      },
      actSpye: false, // 审核
      actCard: '1',
      MsgSp: false,
      index: 0,
      liuYe: 1, // 通过or不通过
      Liunie: false,
      wenData: [],
      labelStyle: {
        width: '160px'
      },
      contentStyle: {
        width: '246px'
      },
      shenMsg: {
        reviewStatus: 3,
        reviewComments: '',
        id: ''
      },
      rules: {
        reviewComments: [
          { required: true, message: '请输入意见', trigger: 'blur' },
        ],
        reviewStatus: [
          { required: true, message: '请选择审核状态', trigger: 'change' },
        ],
      },
      isbutton: false,
      tikuziyuan: []
    }
  },
  computed: {

  },
  created () {
    this.getAll()
  },
  methods: {
    chenge (val) {
      this.formSel = {
        title: '',
        questionnaireType: '',
        reviewStatus: '',
        pageNumber: 0,
        pageSize: 10,
        queryStatus: '1',
      }
    },
    async getAll () {
      const res = await TerminaGetAll(this.pageindex)
      this.tableData = res.data.content
      this.total = res.data.totalElements
    },

    // 获取时间
    currentTime () {
      const date = new Date();
      const year = date.getFullYear(); // 月份从0~11，所以加一
      const month = date.getMonth();
      const dateArr = [date.getMonth() + 1, date.getDate(), date.getHours()]
      for (let i = 0; i < dateArr.length; i++) {
        if (dateArr[i] >= 1 && dateArr[i] <= 9) {
          dateArr[i] = '0' + dateArr[i]
        }
      }
      const strDate = year + '-' + dateArr[0] + '-' + dateArr[1]
      return strDate
    },
    objectToArray (obj) {
      return Object.keys(obj).map(key => {
        const item = obj[key];
        return {
          id: key,
          ...item
        }
      })
    },

    // 详情
    details (val, item) {
      this.detbox = true
      this.secondData = item
      if (typeof item.question === 'string') {
        item.question = JSON.parse(item.question)
      }
      const array = this.objectToArray(item.question)

      this.wenData = array
    },

    handleSizeChange (val) {
      this.pageSize = val
    },
    handleCurrentChange (val) {
      this.pageindex = {
        pageNumber: val - 1,
        pageSize: 10,
      }

      TerminaGetAll(this.pageindex).then(res => {
        this.tableData = res.data.content
      })
    },

    closeFn (val) {
      this.detbox = false
    },

    // 查询按钮
    async onSubmit () {
      this.isbutton = true;
      const res = await TerminaGetAll(this.formSel)
      this.tableData = res.data.content
      this.total = res.data.totalElements
      this.isbutton = false;
    },
    // 重置按钮
    resetting () {
      this.formSel = { title: '',
        questionnaireType: '',
        reviewStatus: '',
        queryStatus: '1',
        pageNumber: 0,
        pageSize: 10,
      }
      this.currentPage = 1
      this.pageindex.pageNumber = 0
      this.getAll()
    },
    bianls (item) {
      // this.tikuziyuan = item.cereQuestionManagements
      // this.secondData = item
      //    this.actSpye = true
      this.shenMsg.id = item.id
      this.Liunie = true
    },
    MsgShen (val) {
      this.index = val
      this.MsgSp = true
    },
    LiuYes (val) {
      this.liuYe = val
      this.Liunie = true
    },
    OAshen () {
      if (this.shenMsg.reviewComments == '') {
        this.$message({
          message: '请输入审核意见',
        })
        return
      }
      TerminaEdit(this.shenMsg).then(res => {
        this.getAll()
      })
      // if(this.liuYe == 1){
      //   TerminaEdit({id:this.secondData.id,reviewStatus:'3'}).then(res=>{
      //     this.getAll()
      //   })
      // }else{
      //   TerminaEdit({id:this.secondData.id,reviewStatus:'4'}).then(res=>{
      //     this.getAll()
      //   })

      // }
      this.Liunie = false
      // this.actSpye = false
    },
    quxiao () {
      this.$refs.ruleFormInfo.resetFields()
      this.Liunie = false
    }
  }
}
</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 {
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: space-between;
  }

  .greens {
    color: #3F9B6A;
  }

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

  .fenye {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

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

  ::v-deep .el-form-item {
    margin-bottom: 16px;
  }

  .device-form .el-form-item__label::after {
    content: "*";
    color: #1A1A1A;
    margin-left: 5px;
    font-size: 16px;
  }

  ::v-deep .el-dialog__wrapper {
    .el-dialog__header {
      background-color: #FAFAFA;
    }
  }

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

  ::v-deep .el-dialog__wrapper {

    .dialog_css {
      margin-right: 12px;
      margin-top: 61px !important;

      .el-dialog__title {
        font-size: 16px !important;
        font-weight: 600;
        color: #000;
      }
    }

    .diaslog_zhong {
      margin-left: 25%;
      margin-top: 61px !important;
    }

  }

  ::v-deep .diaslog_zhong {
    margin-left: 20%;
    margin-top: 61px !important;

    .el-dialog__header {
      background-color: #fff;
      border-bottom: 1px solid #EFEFEF;

      .el-dialog__title {
        font-size: 14px;
        color: #000000e6;
      }
    }

    .el-dialog__body {
      padding: 10px 30px 30px 20px
    }
  }

  /deep/ .el-table_1_column_8 .hetong {
    color: #7DBB9A;
    text-decoration: underline;
  }

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

  ::v-deep .textarea {
    width: 85%;

    .el-textarea__inner {
      width: 100%;
    }
  }

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

  }

  /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background-color: #fff;
  }
</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: 33px;
  }

  ::v-deep .diaslog_zhong {
    .el-dialog__body {
      padding: 10px 20px 20px 20px;
    }

    .el-upload--picture-card {
      width: 130px;
      height: 130px;
    }
  }
  ::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: 14px;
          }
          .el-step__icon .is-text{
              padding: 10px;
              border-radius:10px;
            border: 2px solid #FABB41;
            font-size: 14px;
          }
        }
        .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: 14px;
          }
          .el-step__icon .is-text{
              padding: 10px;
              border-radius:10px;
            border: 2px solid #C0C4CC;
            font-size: 14px;
          }
        }
         .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: 14px;
             color: #3F9B6A;
           }
           .el-step__icon .is-text{
               padding: 10px;
               border-radius:10px;
             border: 2px solid #3F9B6A;
             font-size: 14px;
           }
           .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>
