<template>
  <div class="container">
    <div style="padding: 0px 20px">
      <div ref="lxHeader">
        <LxHeader icon="md-apps" text="雨管养护管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
          <div slot="content"></div>
          <slot>
            <div>
              <Input class="vm10" style="width: 200px; margin-right: 10px" v-model="searchFields.keyword" placeholder="关键字搜索" />
              <el-select class="vm10" v-model="searchFields.road_id" filterable remote
                reserve-keyword clearable @focus="remoteRoad" placeholder="请输入关键词查找道路" :remote-method="remoteMethod"
                :loading="roadloading">
                <el-option v-for="item in roadsList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
              <el-select class="vm10" filterable v-model="searchFields.area_id" placeholder="请选择所属片区">
                <el-option v-for="item in selects.areasList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
              <el-select class="vm10" filterable v-model="searchFields.status" placeholder="请选择状态">
                <el-option v-for="item in selects.statusList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
              <el-select class="vm10" filterable v-model="searchFields.type" placeholder="请选择类型">
                <el-option v-for="item in selects.typeList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
              <el-select class="vm10" filterable v-model="searchFields.end_type" placeholder="请选择结办类型">
                <el-option v-for="item in selects.endTypeList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>

              <el-select class="vm10" filterable v-model="searchFields.title_id" placeholder="请选择养护内容">
                <el-option v-for="item in allmaintaninList" :key="item.id" :label="item.value" :value="item.id">
                </el-option>
              </el-select>

              <el-date-picker class="vm10" v-model="datesearch" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
              </el-date-picker>
              <Button type="primary" @click="load(false)" style="margin-left: 10px">查询</Button>
              <Button type="primary" @click="edit()" style="margin-left: 10px">新增</Button>
              <Button type="primary" @click="review()" style="margin-left: 10px">批量复核</Button>
              <Button type="primary" @click="exportExcel()" style="margin-left: 10px">导出</Button>
            </div>
          </slot>
        </LxHeader>
      </div>
      <div ref="lxTable">
        <el-table :data="tableData" class="v-table" @selection-change="handleSelectionChange" :height="tableHeight"
          style="width: 100%">
          <el-table-column type="selection" fixed width="55"></el-table-column>
          <el-table-column type="index" width="50" fixed label="序号" align="center"> </el-table-column>
          <el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in columns"
            :label="column.title" :width="column.width" :fixed="column.fixed">
            <template slot-scope="scope">
              <div v-if="column.type=='opt'">
                <Button ghost size="small" @click="show(scope.row)" type="primary" style="margin-left: 10px;"
                  v-if="scope.row['status']==2||scope.row['status']==3||scope.row['status']==4||scope.row['end_type']==1">查看</Button>

                <Button v-if="scope.row['status']==0" ghost size="small" @click="edit(scope.row)" type="primary"
                  style="margin-left: 10px;">编辑</Button>
                <Button v-if="scope.row['status']==0" ghost size="small" @click="show(scope.row)" type="primary"
                  style="margin-left: 10px;">审核</Button>
                <Button v-if="scope.row['status']==1&&scope.row['end_type']!=1" ghost size="small"
                  @click="show(scope.row)" type="primary" style="margin-left: 10px;">办结</Button>
                <Button ghost size="small"
                  v-if="scope.row['status']==0||scope.row['status']==1&&scope.row['end_type']!=1"
                  @click="del(scope.row)" type="error" style="margin-left: 10px;">删除</Button>
              </div>
              <div v-else-if="column.type=='end_type'">
                <el-tag v-if="scope.row[column.field]==1" type="warning">有</el-tag>
                <el-tag v-else>无</el-tag>
              </div>
              <div v-else-if="column.type=='type'">
                <el-tag v-if="scope.row[column.field]==1">雨水管道疏挖</el-tag>
                <el-tag v-if="scope.row[column.field]==2">雨水管道疏通</el-tag>
                <el-tag v-if="scope.row[column.field]==3">汛期助排</el-tag>
                <el-tag v-if="scope.row[column.field]==4">污泥外运</el-tag>
                <el-tag v-if="scope.row[column.field]==5">出水口排查</el-tag>
                <el-tag v-if="scope.row[column.field]==6">专项处理</el-tag>
                <el-tag v-if="scope.row[column.field]==7">维修</el-tag>
              </div>
              <div v-else-if="column.type=='status'">
                <el-tag v-if="scope.row[column.field]==0">待审核</el-tag>
                <el-tag type="success" v-if="scope.row[column.field]==1">已审核</el-tag>
                <el-tag type="warning" v-if="scope.row[column.field]==2">已办结</el-tag>
                <el-tag type="info" v-if="scope.row[column.field]==3">已退回</el-tag>
                <el-tag type="danger" v-if="scope.row[column.field]==4">缺陷办结</el-tag>

              </div>
              <div v-else-if="column.type=='audit_status' && scope.row['status']==2">
                <el-tag v-if="scope.row[column.field]==0">待复核</el-tag>
                <el-tag type="success" v-if="scope.row[column.field]==1">已复核</el-tag>
                <!-- <el-tag type="warning" v-if="scope.row[column.field]==2">未通过</el-tag> -->
              </div>
              <div v-else-if="column.type=='audit_status' && scope.row['status']!=2">
                无
              </div>
              <div v-else-if="column.type=='format'">
                {{scope.row[column.field]?scope.row[column.field].name:""}}
              </div>
              <div v-else-if="column.type=='admin'">
                {{getUserName(scope.row)}}
              </div>
              <!-- <div v-else-if="column.type=='end_type'">
                    <el-tag v-if="scope.row[column.field]==0">无</el-tag>
                    <el-tag  type="danger" v-if="scope.row[column.field]==1" >违法转办</el-tag>
                </div> -->
              <div v-else>{{scope.row[column.field]}}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination @current-change="handleCurrentChange" :current-page="paginations.page"
            :page-size="paginations.page_size" background layout="prev, pager, next" :total="paginations.total">
          </el-pagination>
        </div>
      </div>
      <el-dialog title="雨管养护类型选择" :visible.sync="rainTypeVisible" width="60%">
        <div class="dialogConcent">
          <el-radio v-model="rainType" label="1">雨水管道疏挖</el-radio>
          <el-radio v-model="rainType" label="2">雨水管道疏通</el-radio>
          <el-radio v-model="rainType" label="3">汛期助排</el-radio>
          <el-radio v-model="rainType" label="4">污泥外运</el-radio>
          <el-radio v-model="rainType" label="5">出水口排查</el-radio>
          <el-radio v-model="rainType" label="6">专项处理</el-radio>
          <el-radio v-model="rainType" label="7">维修</el-radio>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button @click="resetrainType()">取 消</el-button>
          <el-button type="primary" v-preventReClick @click="submitRainType()">确认</el-button>
        </div>
      </el-dialog>

      <!-- 审核 -->
      <el-dialog class="common-dialog" :title="rainTitle" :visible.sync="dialogFormDetailVisible" width="60%">
        <div class="dialogConcent">
          <el-scrollbar style="flex: 1">
            <!-- 疏通疏挖 -->
            <el-form v-if="rainType==1||rainType==2||rainType==5||rainType==6||rainType==7" :model="formdetail" :rules="{}" ref="formdetail"
              label-position="right" :label-width="formLabelWidth">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="所属道路" prop="road_id">
                    {{roadName}}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="养护内容" prop="title_id">
                    {{form.title_detail}}
                    <!-- <div v-for="item in maintaninList">
                      <div v-if="item.id==form.title_id">
                        {{item.value}}
                      </div>
                    </div> -->
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="rainType==5">
                  <el-form-item label="出水口编号" prop="number">
                    {{form.number}}
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="24" v-if="rainType==1||rainType==2">
                  <el-form-item label="覆盖范围" prop="scope">
                    {{form.scope}}米
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="rainType==1||rainType==2">
                  <el-form-item label="点位名称" prop="point_name">
                    {{form.point_name}}
                  </el-form-item>
                </el-col> -->
                <el-col :span="24">
                  <el-form-item label="所在位置" prop="address">
                    {{form.address}}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="经度" prop="longitude">
                    {{form.longitude}}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="纬度" prop="latitude">
                    {{form.latitude}}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="描述" prop="content">
                    {{form.content}}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="现场照片" prop="files_list" class="files_check">
                    <el-upload multiple action="/api/admin/upload-file" list-type="picture-card" :file-list="filesList"
                      ref="pictureUploads">
                      <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                            <i class="el-icon-zoom-in"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="是否解决" prop="is_solve">
                    <el-tag v-if="form.is_solve==0">否</el-tag>
                    <el-tag type="success" v-if="form.is_solve==1">是</el-tag>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="是否违法" prop="is_law">
                    <el-tag v-if="form.is_law==0">否</el-tag>
                    <el-tag type="success" v-if="form.is_law==1">是</el-tag>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="临时处理办法" prop="deal_content">
                    {{form.deal_content}}
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.is_solve==1">
                  <el-form-item label="处理结果" prop="deal_result">
                    {{form.deal_result}}
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.is_solve==1">
                  <el-form-item label="处理后照片" prop="files_deal_list" class="files_check">
                    <el-upload multiple action="/api/admin/upload-file" list-type="picture-card"
                      :file-list="dealFilesList" ref="pictureUploads">
                      <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                            <i class="el-icon-zoom-in"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>

                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="nowstatus==0||nowstatus==1&&wf_type!=1">
                  <el-form-item label="备注" prop="content">
                    <el-input type="textarea" v-model="formdetail.content" placeholder="请填写备注"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="nowstatus==1&&wf_type!=1">
                  <el-form-item label="有无违法转办" prop="end_type">
                    <el-radio-group v-model="formdetail.end_type">
                      <el-radio :label="0">无</el-radio>
                      <el-radio :label="1">有</el-radio>
                      <el-radio :label="2">养护转办</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="nowstatus==1&&formdetail.end_type==2">
                  <el-form-item label="养护转办类型" prop="end_type">
                    <el-select class="width100" v-model="formdetail.type" placeholder="请选择养护转办类型">
                      <el-option v-for="item in yhtypeList" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="nowstatus==1 && formdetail.end_type==2">
                  <el-form-item label="要求完成时间" prop="end_time">
                    <el-date-picker style="width:100%" v-model="formdetail.end_time" type="datetime" placeholder="选择时间"
                      value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="nowstatus==1 && formdetail.end_type==2">
                  <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" v-model="formdetail.remark" placeholder="请填写备注" autocomplete="off">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="nowstatus==2||nowstatus==3||nowstatus==4||wf_type==1">
                  <el-form-item label="有无违法转办">
                    <el-tag v-if="end_types==0">无</el-tag>
                    <el-tag type="success" v-if="end_types==1">有</el-tag>
                    <el-tag type="success" v-if="end_types==2">养护转办</el-tag>
                  </el-form-item>
                </el-col>

                <el-col :span="24" v-if="nowstatus==2||nowstatus==3||nowstatus==4||wf_type==1">
                  <el-form-item label="处理日志" prop="">

                  </el-form-item>
                  <el-table :data="rainMaintainLogs" style="width: 90%;margin: 0 auto;">
                    <el-table-column prop="created_at" label="日期" width="180">
                    </el-table-column>
                    <el-table-column prop="content" label="内容">
                    </el-table-column>
                    <!-- <el-table-column
                              prop="end_type"
                              label="有无违法转办"
                              >

                            </el-table-column> -->
                    <el-table-column prop="type_name" label="操作结果">
                    </el-table-column>

                    <el-table-column prop="adminName" label="操作人" width="180">
                    </el-table-column>
                  </el-table>

                </el-col>

              </el-row>

            </el-form>


            <!-- 汛期助排 -->
            <el-form v-if="rainType==3" :model="formdetail" :rules="{}" ref="formdetail" label-position="right"
              :label-width="formLabelWidth">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="所属道路" prop="road_id">
                    {{roadName}}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="所在位置" prop="address">
                    {{form.address}}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="经度" prop="longitude">
                    {{form.longitude}}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="纬度" prop="latitude">
                    {{form.latitude}}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="描述" prop="content">
                    {{form.content}}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="现场照片" prop="files_list" class="files_check">
                    <el-upload multiple action="/api/admin/upload-file" list-type="picture-card" :file-list="filesList"
                      ref="pictureUploads">
                      <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                            <i class="el-icon-zoom-in"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="是否解决" prop="is_solve">
                    <el-tag v-if="form.is_solve==0">否</el-tag>
                    <el-tag type="success" v-if="form.is_solve==1">是</el-tag>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="临时处理办法" prop="deal_content">
                    {{form.deal_content}}
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.is_solve==1">
                  <el-form-item label="处理结果" prop="deal_result">
                    {{form.deal_result}}
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.is_solve==1">
                  <el-form-item label="处理后照片" prop="files_deal_list" class="files_check">
                    <el-upload multiple action="/api/admin/upload-file" list-type="picture-card"
                      :file-list="dealFilesList" ref="pictureUploads">
                      <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                            <i class="el-icon-zoom-in"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>

                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="nowstatus==0||nowstatus==1&&wf_type!=1">
                  <el-form-item label="备注" prop="content">
                    <el-input type="textarea" v-model="formdetail.content" placeholder="请填写备注"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="nowstatus==1&&wf_type!=1">
                  <el-form-item label="有无违法转办" prop="end_type">
                    <el-radio-group v-model="formdetail.end_type">
                      <el-radio :label="0">无</el-radio>
                      <el-radio :label="1">有</el-radio>
                      <el-radio :label="2">养护转办</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="nowstatus==1&&formdetail.end_type==2">
                  <el-form-item label="养护转办类型" prop="end_type">
                    <el-select class="width100" v-model="formdetail.type" placeholder="请选择养护转办类型">
                      <el-option v-for="item in yhtypeList" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="nowstatus==1 && formdetail.end_type==2">
                  <el-form-item label="要求完成时间" prop="end_time">
                    <el-date-picker style="width:100%" v-model="formdetail.end_time" type="datetime" placeholder="选择时间"
                      value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="nowstatus==1 && formdetail.end_type==2">
                  <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" v-model="formdetail.remark" placeholder="请填写备注" autocomplete="off">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="nowstatus==2||nowstatus==3||nowstatus==4||wf_type==1">
                  <el-form-item label="有无违法转办">
                    <el-tag v-if="end_types==0">无</el-tag>
                    <el-tag type="success" v-if="end_types==1">有</el-tag>
                    <el-tag type="success" v-if="end_types==2">养护转办</el-tag>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="nowstatus==2||nowstatus==3||nowstatus==4||wf_type==1">
                  <el-form-item label="处理日志" prop="">

                  </el-form-item>
                  <el-table :data="rainMaintainLogs" style="width: 90%;margin: 0 auto;">
                    <el-table-column prop="created_at" label="日期" width="180">
                    </el-table-column>
                    <el-table-column prop="content" label="内容">
                    </el-table-column>
                    <el-table-column prop="type_name" label="操作结果">
                    </el-table-column>

                    <el-table-column prop="adminName" label="操作人" width="180">
                    </el-table-column>
                  </el-table>

                </el-col>


              </el-row>

            </el-form>





            <!-- 污泥外运 -->
            <el-form v-if="rainType==4" :model="formdetail" :rules="{}" ref="formdetail" label-position="right"
              :label-width="formLabelWidth">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="所属道路" prop="road_id">
                    {{roadName}}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="外运时间" prop="date">
                    {{form.date}}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备用排放点" prop="address">
                    {{form.address}}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="描述" prop="content">
                    {{form.content}}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="现场照片" prop="files_list" class="files_check">
                    <el-upload multiple action="/api/admin/upload-file" list-type="picture-card" :file-list="filesList"
                      ref="pictureUploads">
                      <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                            <i class="el-icon-zoom-in"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="nowstatus==0||nowstatus==1&&wf_type!=1">
                  <el-form-item label="备注" prop="content">
                    <el-input type="textarea" v-model="formdetail.content" placeholder="请填写备注"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="nowstatus==1&&wf_type!=1">
                  <el-form-item label="有无违法转办" prop="end_type">
                    <el-radio-group v-model="formdetail.end_type">
                      <el-radio :label="0">无</el-radio>
                      <el-radio :label="1">有</el-radio>
                      <el-radio :label="2">养护转办</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="nowstatus==1&&formdetail.end_type==2">
                  <el-form-item label="养护转办类型" prop="end_type">
                    <el-select class="width100" v-model="formdetail.type" placeholder="请选择养护转办类型">
                      <el-option v-for="item in yhtypeList" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="nowstatus==1 && formdetail.end_type==2">
                  <el-form-item label="要求完成时间" prop="end_time">
                    <el-date-picker style="width:100%" v-model="formdetail.end_time" type="datetime" placeholder="选择时间"
                      value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="nowstatus==1 && formdetail.end_type==0">
                  <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" v-model="formdetail.remark" placeholder="请填写备注" autocomplete="off">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="nowstatus==2||nowstatus==3||nowstatus==4||wf_type==1">
                  <el-form-item label="有无违法转办">
                    <el-tag v-if="end_types==0">无</el-tag>
                    <el-tag type="success" v-if="end_types==1">有</el-tag>
                  </el-form-item>
                </el-col>


                <el-col :span="24" v-if="nowstatus==2||nowstatus==3||nowstatus==4||wf_type==1">
                  <el-form-item label="处理日志" prop="">

                  </el-form-item>
                  <el-table :data="rainMaintainLogs" style="width: 90%;margin: 0 auto;">
                    <el-table-column prop="created_at" label="日期" width="180">
                    </el-table-column>
                    <el-table-column prop="content" label="内容">
                    </el-table-column>
                    <el-table-column prop="type_name" label="操作结果">
                    </el-table-column>

                    <el-table-column prop="adminName" label="操作人" width="180">
                    </el-table-column>
                  </el-table>

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

            </el-form>
          </el-scrollbar>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button @click="resetFormDetail('formdetail')">取 消</el-button>
          <el-button v-if="nowstatus==0" type="primary" v-preventReClick @click="submitFormDetail('formdetail','1')">审核
          </el-button>
          <el-button v-if="nowstatus==1&&formdetail.end_type!=1" type="warning" v-preventReClick
            @click="submitFormDetail('formdetail','4')">
            缺陷办结</el-button>
          <el-button v-if="nowstatus==1&&formdetail.end_type!=1" type="primary" v-preventReClick
            @click="submitFormDetail('formdetail','2')">办结
          </el-button>
          <el-button v-if="nowstatus==1&&formdetail.end_type==1&&wf_type!=1" type="primary" v-preventReClick
            @click="submitFormDetail('formdetail','1')">保存
          </el-button>
          <el-button v-if="nowstatus==1&&formdetail.end_type!=1" type="danger" v-preventReClick
            @click="submitFormDetail('formdetail','3')">退回
          </el-button>

        </div>
      </el-dialog>




      <!-- 编辑 -->
      <el-dialog class="common-dialog" :title="rainTitle" :visible.sync="dialogFormVisible" width="60%">
        <div class="dialogConcent">
          <el-scrollbar style="flex: 1">
            <!-- 疏通疏挖 -->
            <el-form v-if="rainType==1||rainType==2||rainType==5||rainType==6||rainType==7" :model="form" :rules="rules" ref="form"
              label-position="right" :label-width="formLabelWidth">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="所属道路" prop="road_id">
                    <el-select class="width100" v-model="roadName" filterable remote @change="chooseRoad"
                      :disabled="roaddisabled" clearable @focus="remoteRoad" reserve-keyword placeholder="请输入关键词查找道路信息" :remote-method="remoteMethod"
                      :loading="roadloading">
                      <el-option v-for="item in roadsList" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="养护内容" prop="title_id">
                    <el-select multiple class="width100" v-model="titleArr" placeholder="请选择养护内容">
                      <el-option v-for="item in maintaninList" :key="item.id" :label="item.value" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="rainType==5">
                  <el-form-item label="出水口编号" prop="number">
                    <el-input v-model="form.number" placeholder="请填写出水口编号" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <!-- <el-col :span="12" v-if="rainType==1||rainType==2">
                  <el-form-item label="覆盖范围(米)" prop="scope">
                    <el-input type="number" required v-model="form.scope" placeholder="请填写覆盖范围" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="rainType==1||rainType==2">
                  <el-form-item label="点位名称" prop="point_name">
                    <el-input required v-model="form.point_name" placeholder="请填写点位名称" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col> -->
                <el-col :span="24">
                  <el-form-item label="所在位置" prop="address">
                    <avue-input-map :params="mapparams" placeholder="请选择地图" v-model="mapform"></avue-input-map>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="经度" prop="longitude">
                    <el-input disabled="" v-model="form.longitude" placeholder="经度" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="纬度" prop="address">
                    <el-input disabled="" v-model="form.latitude" placeholder="纬度" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="描述" prop="content">
                    <el-input type="textarea" v-model="form.content" placeholder="请填写描述" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="现场照片" prop="files_list">
                    <el-upload multiple action="/api/admin/upload-file" list-type="picture-card" :file-list="filesList"
                      ref="pictureUpload" :auto-upload="true" :data="uploadOther" :on-error="handleError"
                      :on-success="function(responsose,file,fileList) {return handlesuccess(responsose,file,fileList,1)}">
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                            <i class="el-icon-zoom-in"></i>
                          </span>
                          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="是否解决" prop="is_solve">
                    <el-radio-group v-model="form.is_solve">
                      <el-radio :label="0">否</el-radio>
                      <el-radio :label="1">是</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="是否违法" prop="is_law">
                    <el-radio-group v-model="form.is_law">
                      <el-radio :label="0">否</el-radio>
                      <el-radio :label="1">是</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="临时处理办法" prop="deal_content">
                    <el-input type="textarea" v-model="form.deal_content" placeholder="请填写临时处理办法" autocomplete="off">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.is_solve==1">
                  <el-form-item label="处理结果" prop="deal_result">
                    <el-input type="textarea" v-model="form.deal_result" placeholder="请填写处理结果" autocomplete="off">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.is_solve==1">
                  <el-form-item label="处理后照片" prop="files_deal_list">
                    <el-upload multiple action="/api/admin/upload-file" list-type="picture-card" :on-error="handleError"
                      :file-list="dealFilesList" ref="pictureUploads" :limit="3" :auto-upload="true" :data="uploadOther"
                      :on-success="function(responsose,file,fileList) {return handlesuccess(responsose,file,fileList,2)}">
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                            <i class="el-icon-zoom-in"></i>
                          </span>
                          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                  </el-form-item>
                </el-col>


              </el-row>

            </el-form>


            <!-- 汛期助排 -->
            <el-form v-if="rainType==3" :model="form" :rules="rules" ref="form" label-position="right"
              :label-width="formLabelWidth">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="所属道路" prop="road_id">
                    <el-select class="width100" v-model="roadName" filterable remote @change="chooseRoad"
                      :disabled="roaddisabled" reserve-keyword clearable @focus="remoteRoad" placeholder="请输入关键词查找道路信息" :remote-method="remoteMethod"
                      :loading="roadloading">
                      <el-option v-for="item in roadsList" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="所在位置" prop="address">
                    <avue-input-map :params="mapparams" placeholder="请选择地图" v-model="mapform"></avue-input-map>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="经度" prop="longitude">
                    <el-input disabled="" v-model="form.longitude" placeholder="经度" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="纬度" prop="address">
                    <el-input disabled="" v-model="form.latitude" placeholder="纬度" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="描述" prop="content">
                    <el-input type="textarea" v-model="form.content" placeholder="请填写描述" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="现场照片" prop="files_list">
                    <el-upload multiple action="/api/admin/upload-file" list-type="picture-card" :file-list="filesList"
                      ref="pictureUpload" :auto-upload="true" :data="uploadOther" :on-error="handleError"
                      :on-success="function(responsose,file,fileList) {return handlesuccess(responsose,file,fileList,1)}">
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                            <i class="el-icon-zoom-in"></i>
                          </span>
                          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="是否解决" prop="is_solve">
                    <el-radio-group v-model="form.is_solve">
                      <el-radio :label="0">否</el-radio>
                      <el-radio :label="1">是</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="临时处理办法" prop="deal_content">
                    <el-input type="textarea" v-model="form.deal_content" placeholder="请填写临时处理办法" autocomplete="off">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.is_solve==1">
                  <el-form-item label="处理结果" prop="deal_result">
                    <el-input type="textarea" v-model="form.deal_result" placeholder="请填写处理结果" autocomplete="off">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.is_solve==1">
                  <el-form-item label="处理后照片" prop="files_deal_list">
                    <el-upload multiple action="/api/admin/upload-file" list-type="picture-card" :on-error="handleError"
                      :file-list="dealFilesList" ref="pictureUploads" :limit="3" :auto-upload="true" :data="uploadOther"
                      :on-success="function(responsose,file,fileList) {return handlesuccess(responsose,file,fileList,2)}">
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                            <i class="el-icon-zoom-in"></i>
                          </span>
                          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                  </el-form-item>
                </el-col>


              </el-row>

            </el-form>





            <!-- 污泥外运 -->
            <el-form v-if="rainType==4" :model="form" :rules="rules" ref="form" label-position="right"
              :label-width="formLabelWidth">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="所属道路" prop="road_id">
                    <el-select class="width100" v-model="roadName" filterable remote @change="chooseRoad"
                      :disabled="roaddisabled" clearable @focus="remoteRoad" reserve-keyword placeholder="请输入关键词查找道路信息" :remote-method="remoteMethod"
                      :loading="roadloading">
                      <el-option v-for="item in roadsList" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="外运时间" prop="date">
                    <el-date-picker class="width100" v-model="form.date" type="datetime" placeholder="选择日期时间"
                      value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备用排放点" prop="address">
                    <el-input type="text" v-model="form.address" placeholder="请填写备用排放点" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="描述" prop="content">
                    <el-input type="textarea" v-model="form.content" placeholder="请填写描述" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="附件" prop="files_list">
                    <el-upload multiple action="/api/admin/upload-file" list-type="picture-card" :file-list="filesList"
                      ref="pictureUpload" :auto-upload="true" :data="uploadOther" :on-error="handleError"
                      :on-success="function(responsose,file,fileList) {return handlesuccess(responsose,file,fileList,1)}">
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                            <i class="el-icon-zoom-in"></i>
                          </span>
                          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
          </el-scrollbar>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button @click="resetForm('form')">取 消</el-button>
          <el-button type="primary" v-preventReClick @click="submitForm('form')">保存</el-button>
        </div>
      </el-dialog>

      <el-dialog class="common-dialog" :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>

      <el-dialog class="common-dialog" title="批量复核" :visible.sync="reviewFormVisible" width="40%">
        <div class="dialogConcent">
          <el-scrollbar style="flex: 1">

            <el-form :model="reviewForm" ref="reviewForm" label-position="right" :label-width="formLabelWidth">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="复核状态" prop="audit_status">
                    <el-select class="width100" v-model="reviewForm.audit_status" placeholder="请选择复核状态">
                      <el-option v-for="item in reviewStatusList" :key="item.id" :label="item.value" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备注" prop="audit_reamrk">
                    <el-input type="textarea" v-model="reviewForm.audit_reamrk" placeholder="请填写备注" autocomplete="off">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
          </el-scrollbar>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button @click="reviewFormVisible=false">取 消</el-button>
          <el-button type="primary" v-preventReClick @click="submitReviewForm('reviewForm')">确认</el-button>
        </div>
      </el-dialog>




    </div>
  </div>
</template>

<script>
  import {
    listmain,
    get,
    del,
    update,
    storecirculation,
    savecirculation,
    storedischarge,
    savedischarge,
    storemire,
    savemire,
    storewater,
    savewater,
    review
  } from '../../../api/rain/maintain.js'
  import {
    getToken
  } from '@/utils/auth'
  import {
    listarea
  } from '../../../api/basic/area.js'
  import {
    listroad
  } from '../../../api/basic/road.js'
  import {
    getparameteritem
  } from '../../../api/system/dictionary.js'
  import LxHeader from "@/components/LxHeader/index.vue";
  import AvueMap from 'avue-plugin-map'
  import { ElMapExportTable } from "table-excel";

  export default {
    components: {
      LxHeader,
      AvueMap
    },
    data() {
      return {
        reviewFormVisible: false,
        reviewList: [],
        reviewForm: {
          ids: [],
          audit_status: 0,
          audit_reamrk: ""
        },
        reviewStatusList: [{
          id: 0,
          value: "待复核"
        }, {
          id: 1,
          value: "已复核"
        }],
        tableHeight: 0,
        rainTypeVisible: false,
        rainType: "1",
        dialogFormVisible: false,
        dialogFormDetailVisible: false,
        formLabelWidth: "120px",
        dialogImageUrl: "",
        dialogVisible: false,
        rainTitle: "雨水管道疏挖",
        tableData: [],
        mapparams: {
          zoom: 11,
        },
        mapform: [],
        tableHeight: 0,
        datesearch:"",
        baseurl:"",
        searchFields: {
          is_export:0
        },
        yhtypeList: [{
          id: 1,
          name: "雨水管道疏挖"
        }, {
          id: 2,
          name: "雨水管道疏通"
        },{
          id: 3,
          name: "汛期助排"
        },{
          id: 4,
          name: "污泥外运"
        },{
          id: 5,
          name: "出水口排查"
        },{
          id: 6,
          name: "专项处理"
        },{
          id: 7,
          name: "维修"
        }],
        selects: {
          areasList: [{
            id: "",
            name: "所有"
          }],
          typeList: [{
            id: "",
            name: "所有"
          }, {
            id: 1,
            name: "雨水管道疏挖"
          }, {
            id: 2,
            name: "雨水管道疏通"
          },{
            id: 3,
            name: "汛期助排"
          },{
            id: 4,
            name: "污泥外运"
          },{
            id: 5,
            name: "出水口排查"
          },{
            id: 6,
            name: "专项处理"
          },{
            id: 7,
            name: "维修"
          }],
          statusList: [{
            id: "",
            name: "所有"
          }, {
            id: 0,
            name: "未审核"
          }, {
            id: 1,
            name: "已审核"
          }, {
            id: 2,
            name: "已办结"
          }, {
            id: 3,
            name: "已退回"
          }],
          endTypeList: [{
            id: 0,
            name: "所有"
          }, {
            id: 1,
            name: "养护转办"
          }, {
            id: 2,
            name: "违法转办"
          }]
        },
        paginations: {
          page: 1,
          page_size: 15,
          total: 0
        },
        filesList: [],
        dealFilesList: [],
        rainMaintainLogs: [],
        end_types: 0,
        disabled: false,
        uploadOther: {
          token: ""
        },
        idname: "",
        nowstatus: 0,
        maintaninList: [],
        form: {
          content: "",
          title_id: "",
          scope: "",
          point_name: '',
          is_solve: 0,
          is_law: 0,
          deal_content: "",
          deal_result: "",
          address: "",
          longitude: "",
          latitude: "",
          files_list: [],
          files_deal_list: [],
          date: "",
          address: "",
          road_id: ""
        },
        allmaintaninList:[{
          id:"",
          value:"所有"
        }],
        roadsList: [],
        roadName: "",
        roaddisabled: false,
        roadloading: false,
        formdetail: {
          status: 0,
          end_type: 0,
          content: "",
          end_time:"",
          remark:""
        },
        wf_type: 0,
titleArr:[],
        rules: {
          // scope: [{
          //   required: true,
          //   message: '请填写覆盖范围',
          //   trigger: 'blur',
          // }],
          // point_name: [{
          //   required: true,
          //   message: '请填写点位名称',
          //   trigger: 'blur',
          // }],
          // content: [{
          //   required: true,
          //   message: '请填写描述',
          //   trigger: 'blur',
          // }]
        },

        columns: [{
            field: "address",
            title: "地址/排放点",
            type: "string",
            align: "left",
            width: 360,
            fixed: "left"
          },
          {
            field: "area_info",
            title: "所属片区",
            type: "format",
            align: "center",
            width: 180
          },
          {
            field: "type",
            title: "类型",
            type: "type",
            align: "center",
            width: 180
          },
          {
            field: "end_type",
            title: "有无违法转办",
            type: "end_type",
            align: "center",
            width: 180
          },
          {
            field: "status",
            title: "状态",
            type: "status",
            align: "center",
            width: 180
          },
          {
            field: "audit_status",
            title: "复核状态",
            type: "audit_status",
            align: "center",
            width: 180
          },
          // {
          //   field: "end_type",
          //   title: "结办类型",
          //   type: "end_type",
          //   align: "center",
          //   width:160
          // },
          {
            field: "userName",
            title: "提交人",
            type: "admin",
            align: "center",
            width: 180
          },
          {
            field: "created_at",
            title: "提交日期",
            type: "string",
            align: "center",
            width: 180,
            fixed: "right"
          },
          {
            field: "操作",
            title: "操作",
            width: 220,
            type: "opt",
            fixed: "right"
          }
        ],
      }
    },
    created() {
      this.initLoad();
      this.load();

    },
    watch: {
      mapform(newVal, oldVal) {
        this.form.longitude = newVal[0];
        this.form.latitude = newVal[1];
        // if(this.rainType!=4){
        this.form.address = newVal[2];
        // }
      },
      rainType() {
        this.roadsList = []
      },
      datesearch(newVal, oldVal) {
        console.log(newVal)
        if (newVal) {
          this.searchFields.start_date = newVal[0]
          this.searchFields.end_date = newVal[1]
        } else {
          this.searchFields.start_date = ""
          this.searchFields.end_date = ""
        }

      },
      'searchFields.type':function(val){
        if(val==1||val==2||val==5||val==6||val==7){
          getparameteritem('maintainContent_'+val).then(res => {
            for(var m of res.detail){
              this.allmaintaninList.push(m)
            }
          })
        }else{
          this.allmaintaninList=[{
            id:"",
            value:"所有"
          }]
        }
      }
    },
    methods: {
      getUserName(row) {
        if (row.admin) {
          return row.admin.name;
        } else if (row.user) {
          return row.user.name;
        } else {
          return "未知";
        }

      },
      exportExcel(){
        var that = this
        that.searchFields.is_export = 1
        that.load(true)
      },
      handleSelectionChange(val) {
        console.log(val)
        this.reviewList = val
      },
      review() {
        let data = this.reviewList
        let idsArr = [];
        if (data.length > 0) {
          for (var m of data) {
            idsArr.push(m.id)
          }
          this.reviewForm.ids = idsArr
          this.reviewFormVisible = true

        } else {
          this.$message({
            message: '请选择需要复核的信息',
            type: 'warning'
          });
        }
      },
      submitReviewForm() {
        var that = this
        console.log(that.reviewForm);

        review({
          ids: that.reviewForm.ids,
          audit_status: that.reviewForm.audit_status,
          audit_reamrk: that.reviewForm.audit_reamrk
        }).then(response => {
          this.$Message.success('操作成功');
          that.load();
          that.reviewFormVisible = false;
        }).catch(error => {
          console.log(error)
          reject(error)
        });
      },
      chooseRoad(val) {
        this.form.road_id = val
      },
      remoteRoad() {
        this.roadsList = []
      },
      remoteMethod(query) {
        if (query != '') {
          this.roadloading = true
          listroad({
            name: query
          }).then(res => {
            this.roadloading = false
            this.roadsList = res.data
          })
        } else {
          this.roadsList = []
        }
      },
      initLoad() {
        var that = this;
        var clientHeight = document.documentElement.clientHeight
        var lxHeader_height = 96.5; //查询 头部
        var paginationHeight = 37; //分页的高度
        var topHeight = 50; //页面 头部
        let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
        that.tableHeight = tableHeight;
        that.baseurl = location.host; //process.env.VUE_APP_BASE_API
        this.uploadOther.token = getToken();

        listarea({
          page: 1,
          page_size: 99
        }).then(res => {

          for (var m of res.data) {
            that.selects.areasList.push({
              id: m.id,
              name: m.name
            })
          }

        })
      },
      handleCurrentChange(page) {
        this.paginations.page = page;
        this.load();
      },
      load(is_export) {
        listmain({
          page: this.paginations.page,
          page_size: this.paginations.page_size,
          ...this.searchFields
        }).then(response => {
          let tokens = getToken();
          if (is_export) {
            var url = "/api/admin/rain-maintains/index?token=" + tokens
            for (var m in this.searchFields) {
              url += "&" + m + "=" + this.searchFields[m]
            }
            url = this.baseurl + url
            console.log(url)
            window.open("http://" + url, '_blank')
            this.searchFields.is_export = 0
            return;
          }
          this.tableData = response.data;
          this.paginations.total = response.total;
        }).catch(error => {
          console.log(error)
          reject(error)
        });

      },
      info(obj) {
        var that = this;
        get(obj.id).then(res => {
          let result = Object.assign(that.form, res);
          that.rainType = result.type;
          that.nowstatus = result.status;
          that.formdetail.id = result.id
          that.formdetail.end_type = result.end_type
          // that.formdetail.type = parseInt(result.type)
          that.wf_type = result.end_type
          if (result.rain_maintain_logs) {
            for (var k of result.rain_maintain_logs) {
              k.adminName = k.admin ? k.admin.name : ""
            }
          }
          that.rainMaintainLogs = result.rain_maintain_logs;
          that.end_types = result.end_type
          if (that.rainType == 1) {
            that.rainTitle = "雨水管道疏挖"
          } else if (that.rainType == 2) {
            that.rainTitle = "雨水管道疏通"
          } else if (that.rainType == 3) {
            that.rainTitle = "汛期助排"
          } else if (that.rainType == 4) {
            that.rainTitle = "污泥外运"
          } else if (that.rainType == 5) {
            that.rainTitle = "出水口排查"
          }else if (that.rainType == 6) {
            that.rainTitle = "专项处理"
          }else if (that.rainType == 7) {
            that.rainTitle = "维修"
          } else {
            that.rainTitle = "雨管养护"
          }
          switch (result.old_type) {
            case 1:
            case 2:
            case 6:
            case 7:
              that.form = result.circulation_info;
              that.form.circulation_id = result.circulation_id;
              that.roaddisabled = true
              that.roadName = result.circulation_info.road ? result.circulation_info.road.name : ""
              that.idname = "circulation_id"
              that.mapform = [result.circulation_info.longitude, result.circulation_info.latitude, result
                .circulation_info.address
              ]
              let cir_arrs = result.circulation_info.title_id ? result.circulation_info.title_id.split(","):[]
              for(var m of cir_arrs){
                that.titleArr.push(parseInt(m))
              }
              let _files = [];
              for (var mod of result.circulation_info.circulation_files) {
                let m = Object.assign({}, mod);
                m.url = mod.files.url;
                m.id = mod.files.id;
                m.photoType = "before";
                _files.push(m);
              }
              that.filesList = _files;

              let _filesafter = [];
              for (var mod of result.circulation_info.circulation_deal_files) {
                let m = Object.assign({}, mod);
                m.url = mod.files.url;
                m.id = mod.files.id;
                m.photoType = "after";
                _filesafter.push(m);
              }
              that.dealFilesList = _filesafter;
              break;
            case 3:
              that.form = result.help_discharge_info;
              that.form.help_discharge_id = result.help_discharge_id;
              that.roaddisabled = true
              that.roadName = result.help_discharge_info.road ? result.help_discharge_info.road.name : ""
              that.idname = "help_discharge_id"
              that.mapform = [result.help_discharge_info.longitude, result.help_discharge_info.latitude, result
                .help_discharge_info.address
              ]
              let discharge_files = [];
              for (var mod of result.help_discharge_info.help_discharge_files) {
                let m = Object.assign({}, mod);
                m.url = mod.files.url;
                m.id = mod.files.id;
                m.photoType = "before";
                discharge_files.push(m);
              }
              that.filesList = discharge_files;

              let discharge_filesafter = [];
              for (var mod of result.help_discharge_info.help_discharge_deal_files) {
                let m = Object.assign({}, mod);
                m.url = mod.files.url;
                m.id = mod.files.id;
                m.photoType = "after";
                discharge_filesafter.push(m);
              }
              that.dealFilesList = discharge_filesafter;

              break;
            case 4:
              that.form = result.mire_info;
              that.form.mire_id = result.mire_id;
              that.roaddisabled = true
              that.roadName = result.mire_info.road ? result.mire_info.road.name : ""
              that.idname = "mire_id";
              let mire_files = [];
              for (var mod of result.mire_info.mire_files) {
                let m = Object.assign({}, mod);
                m.url = mod.files.url;
                m.id = mod.files.id;
                m.photoType = "before";
                mire_files.push(m);
              }
              that.filesList = mire_files;
              break;
            case 5:
              that.form = result.out_water_info;
              that.form.out_water_id = result.out_water_id;
              that.idname = "out_water_id"
              that.roaddisabled = true
              that.roadName = result.out_water_info.road ? result.out_water_info.road.name : ""
              that.mapform = [result.out_water_info.longitude, result.out_water_info.latitude, result.out_water_info
                .address
              ]
              let water_arrs = result.circulation_info.title_id ? result.circulation_info.title_id.split(","):[]
              for(var m of water_arrs){
                that.titleArr.push(parseInt(m))
              }
              let water_files = [];
              for (var mod of result.out_water_info.out_water_files) {
                let m = Object.assign({}, mod);
                m.url = mod.files.url;
                m.id = mod.files.id;
                m.photoType = "before";
                water_files.push(m);
              }
              that.filesList = water_files;

              let water_filesafter = [];
              for (var mod of result.out_water_info.out_water_deal_files) {
                let m = Object.assign({}, mod);
                m.url = mod.files.url;
                m.id = mod.files.id;
                m.photoType = "after";
                water_filesafter.push(m);
              }
              that.dealFilesList = water_filesafter;
              break;
          }

        }).catch(error => {
          //reject(error)
        })
      },

      show(obj) {
        this.dialogFormDetailVisible = true;
        this.info(obj)
      },

      edit(obj) {
        var that = this;
        this.form = this.$options.data().form
        that.filesList = [];
        that.dealFilesList = [];
        that.mapform = ['', '', ''];
        that.roadName = ""
        that.titleArr = []
        that.roaddisabled = false
        if (obj) {
          that.info(obj);
          this.dialogFormVisible = true;
        } else {
          this.dialogFormVisible = false
          this.rainTypeVisible = true
        }

      },
      del(obj) {
        var that = this;
        if (obj) {
          this.$Modal.confirm({
            title: '确认要删除数据？',
            onOk: () => {
              del(obj.id).then(response => {
                this.$Message.success('操作成功');
                that.load();
              }).catch(error => {
                console.log(error)
                reject(error)
              })
            },
            onCancel: () => {
              //this.$Message.info('Clicked cancel');
            }
          });
        }
      },
      returnTitleId(arr){
        if(arr.length==0){
          return
        }
        let getArr = ""
        for(var m of arr){
          getArr+= m+","
        }
        getArr = getArr.substring(0,getArr.length-1)
        return getArr
      },
      submitForm(formName) {
        var that = this;
        var listUrlbefore = []
        for (var m of this.filesList) {
          m.photoType = "before";
          if (m.response)
            listUrlbefore.push({
              "upload_id": m.response.id
            });
          else
            listUrlbefore.push({
              "upload_id": m.id
            });
        }
        this.form.files_list = listUrlbefore;
        let listUrlafter = [];
        for (var m of this.dealFilesList) {
          if (m.response)
            listUrlafter.push({
              "upload_id": m.response.id
            });
          else
            listUrlafter.push({
              "upload_id": m.upload_id
            });
        }

        this.form.files_deal_list = listUrlafter
        that.form.title_id = this.returnTitleId(that.titleArr)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            that.submitAll(that.rainType, that.form[this.idname])
          } else {
            this.$Message.error('数据校验失败');
            console.log('error submit!!');
            return false;
          }
        });
      },
      submitFormDetail(formName, status) {

        var that = this;
        that.formdetail.status = status
        console.log(that.formdetail)
        // return


        update(that.formdetail).then(response => {
          this.$Message.success('操作成功');
          that.load();
          that.dialogFormDetailVisible = false;
        }).catch(error => {
          //reject(error)
        })

      },
      resetForm(formName) {
        var that = this;
        that.filesList = [];
        that.dealFilesList = [];
        that.mapform = ['', '', ''];
        this.$refs[formName].resetFields();
        that.dialogFormVisible = false;
        that.dialogFormDetailVisible = false;
      },
      resetFormDetail(formName) {
        var that = this;
        that.filesList = [];
        that.dealFilesList = [];
        that.mapform = ['', '', ''];
        that.form = {};
        that.rainMaintainLogs = []
        that.end_types = 0;
        that.formdetail.type=""
        this.$refs[formName].resetFields();
        that.dialogFormVisible = false;
        that.dialogFormDetailVisible = false;
      },
      handleRemove(file) {
        if (file.photoType == "before") {
          for (var i = 0; i < this.filesList.length; i++) {
            if (this.filesList[i].url == file.url) {
              this.filesList.splice(i, 1)
            }
          }
        } else if (file.photoType == "after") {
          for (var i = 0; i < this.dealFilesList.length; i++) {
            if (this.dealFilesList[i].url == file.url) {
              this.dealFilesList.splice(i, 1)
            }
          }

        }
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handlesuccess(response, file, fileList, index) {
        if (index == 1) {
          file.photoType = "before"
          this.filesList = fileList;
          // this.form.files_list = listUrl;
        } else {

          file.photoType = "after"
          this.dealFilesList = fileList
        }
        this.$message({
          message: '上传成功',
          type: 'success'
        });
      },

      handleError(err, file, fileList) {
        this.$message.error('上传失败，重新上传');
      },
      resetrainType() {
        this.rainTypeVisible = false
      },
      submitRainType() {
        var that = this
        this.rainTypeVisible = false
        if (that.rainType == 1||that.rainType == 2||that.rainType == 5||that.rainType == 6||that.rainType == 7) {
          if (that.rainType == 1) {
            that.rainTitle = "雨水管道疏挖"
          } else if (that.rainType == 2) {
            that.rainTitle = "雨水管道疏通"
          } else if (that.rainType == 5) {
            that.rainTitle = "出水口排查"
          }else if (that.rainType == 6) {
            that.rainTitle = "专项处理"
          }else if (that.rainType == 7) {
            that.rainTitle = "维修"
          } else {
            that.rainTitle = "雨管养护"
          }
          getparameteritem('maintainContent_'+that.rainType).then(res => {
            that.maintaninList = res.detail
          })
        }  else if (that.rainType == 3) {
          that.rainTitle = "汛期助排"
          that.maintaninList = []
        } else if (that.rainType == 4) {
          that.rainTitle = "污泥外运"
          that.maintaninList = []
        }else {
          that.rainTitle = "雨水管道疏挖"
        }

        this.dialogFormVisible = true;
      },


      submitAll(type, id) {
        var that = this;

        // return
        that.form.type = type;
        console.log(that.form.type)
        switch (parseInt(type)) {
          case 1:
          case 2:
          case 6:
          case 7:
            if (id) {
              savecirculation(that.form).then(response => {
                this.$Message.success('操作成功');
                that.load();
                that.dialogFormVisible = false;
              }).catch(error => {
                //reject(error)
              })
            } else {
              storecirculation(that.form).then(response => {
                this.$Message.success('操作成功');
                that.load();
                that.dialogFormVisible = false;
              }).catch(error => {
                //reject(error)
              })
            }
            break;
          case 3:
            if (id) {
              savedischarge(that.form).then(response => {
                this.$Message.success('操作成功');
                that.load();
                that.dialogFormVisible = false;
              }).catch(error => {
                //reject(error)
              })
            } else {
              storedischarge(that.form).then(response => {
                this.$Message.success('操作成功');
                that.load();
                that.dialogFormVisible = false;
              }).catch(error => {
                //reject(error)
              })
            }
            break;
          case 4:
            if (id) {
              savemire(that.form).then(response => {
                this.$Message.success('操作成功');
                that.load();
                that.dialogFormVisible = false;
              }).catch(error => {
                //reject(error)
              })
            } else {
              storemire(that.form).then(response => {
                this.$Message.success('操作成功');
                that.load();
                that.dialogFormVisible = false;
              }).catch(error => {
                //reject(error)
              })
            }
            break;
          case 5:
            if (id) {
              savewater(that.form).then(response => {
                this.$Message.success('操作成功');
                that.load();
                that.dialogFormVisible = false;
              }).catch(error => {
                //reject(error)
              })
            } else {
              storewater(that.form).then(response => {
                this.$Message.success('操作成功');
                that.load();
                that.dialogFormVisible = false;
              }).catch(error => {
                //reject(error)
              })
            }
            break;


        }





      }

    }
  }
</script>

<style lang="scss">
  .dialogConcent {
    overflow-y: auto;
  }

  .width100 {
    width: 100%;
  }

  .files_check .el-upload.el-upload--picture-card {
    display: none;
  }
  .vm10{
    margin-right:10px;
    margin-bottom:10px;
    height: 32px;
    vertical-align: bottom;
  }
  .vm10 input {
    height: 32px;
    vertical-align: middle;
  }

  .vm10 .el-select__caret.el-input__icon.el-icon-arrow-up {
    line-height: 30px;
  }
  .vm10 .el-input__icon.el-range__icon.el-icon-date,.vm10 .el-range-separator{
    line-height: 25px;
  }
  .selerchcontent button{
    vertical-align: top;
  }
</style>
