<!-- 不知道为什么会有2个一样的 template  复制出来 备份了  源文件删除了 第一个 -->
<template>
    <div class="contradiction-div">
      <div class="search-div">
        <div style="width: 90%; float: left">
          <Row class="mb10">
            <Col span="6">
              <span>矛盾进度：</span>
              <Select style="width: 70%" v-model="searchInfo.status" :clearable="true">
                <Option value="1">已办结</Option>
                <Option value="2">处理中 </Option>
              </Select>
            </Col>
            <Col span="6">
              <span>纠纷编号：</span>
              <Input style="width: 70%" v-model="searchInfo.eventCode" />
            </Col>
            <Col span="6">
              <span>重点矛盾：</span>
              <Select
                style="width: 70%"
                v-model="searchInfo.isPointEvent"
                :clearable="true"
              >
                <Option value="1">是</Option>
                <Option value="2">否 </Option>
              </Select>
            </Col>
            <Col span="6">
              <span>纠纷大类：</span>
              <Select
                v-model="searchInfo.info"
                @on-clear="clearDispute('info')"
                @on-change="changeDispute(searchInfo.info)"
                :clearable="true"
                style="width: 70%"
              >
                <Option
                  v-for="item in dictData.list1"
                  :value="JSON.stringify(item)"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </Col>
          </Row>
          <Row class="mb10">
            <Col span="6">
              <span>纠纷小类：</span>
              <Select
                v-model="searchInfo.eventTypeId"
                :clearable="true"
                style="width: 70%"
              >
                <Option
                  v-for="item in dictData.list2"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </Col>
            <Col span="6">
              <span>是否化解：</span>
              <Select
                style="width: 70%"
                v-model="searchInfo.isResolve"
                :clearable="true"
              >
                <Option value="1">是</Option>
                <Option value="2">否 </Option>
              </Select>
            </Col>
            <Col span="6">
              <span>是否涉众：</span>
              <Select
                style="width: 70%"
                v-model="searchInfo.is_involve_everyone"
                :clearable="true"
              >
                <Option value="1">是</Option>
                <Option value="2">否 </Option>
              </Select>
            </Col>
            <Col span="6">
              <span>化解是否满意：</span>
              <Select
                style="width: 61%"
                v-model="searchInfo.isSatisfaction"
                :clearable="true"
              >
                <Option value="1">是</Option>
                <Option value="2">否 </Option>
              </Select>
            </Col>

          </Row>
          <Row class="mb10">
            <Col span="6">
              <span>发生纠纷地市：</span>
              <Select
                v-model="searchInfo.cityId"
                @on-change="changeArea('2', searchInfo.cityId)"
                :clearable="true"
                placeholder="请选择市"
                style="width: 61%"
              >
                <Option
                  v-for="item in areaData.list1"
                  :value="item.parent_id"
                  :key="item.parent_id"
                >{{ item.name }}</Option
                >
              </Select>
            </Col>
            <Col span="6">
              <span>发生纠纷地区：</span>
              <Select
                v-model="searchInfo.areaId"
                @on-change="changeArea('3', searchInfo.areaId)"
                :clearable="true"
                placeholder="请选择区"
                style="width: 61%"
              >
                <Option
                  v-for="item in areaData.list2"
                  :value="item.parent_id"
                  :key="item.parent_id"
                  >{{ item.name }}</Option
                >
              </Select>
            </Col>
            <Col span="6">
              <span>发生纠纷街道：</span>
              <Select
                v-model="searchInfo.streetId"
                @on-change="changeArea('4', searchInfo.streetId)"
                :clearable="true"
                placeholder="请选择街道"
                style="width: 61%"
              >
                <Option
                  v-for="item in areaData.list3"
                  :value="item.parent_id"
                  :key="item.parent_id"
                  >{{ item.name }}</Option
                >
              </Select>
            </Col>
            <Col span="6">
              <span>发生纠纷社区：</span>
              <Select
                v-model="searchInfo.communityId"
                placeholder="请选择社区"
                :clearable="true"
                style="width: 61%"
              >
                <Option
                  v-for="item in areaData.list4"
                  :value="item.parent_id"
                  :key="item.parent_id"
                  >{{ item.name }}</Option
                >
              </Select>
            </Col>
  <!--          <Col span="6">-->
  <!--            <span>发生纠纷网格：</span>-->
  <!--            <Input-->
  <!--              style="width: 61%"-->
  <!--              v-model="searchInfo.gardenId"-->
  <!--              placeholder="请输入网格"-->
  <!--            />-->
  <!--          </Col>-->
          </Row>
          <Row class="mb10" v-if="!isShowMore">
            <Col span="6">
              <span>是否超时：</span>
              <Select
                style="width: 70%"
                v-model="searchInfo.isEarlyWarning"
                :clearable="true"
              >
                <Option value="1">正常</Option>
                <Option value="3">预警 </Option>
                <Option value="4">告警</Option>
              </Select>
            </Col>
            <Col span="6">
              <span>当事人：</span>
              <Input
                style="width: 74%"
                v-model="searchInfo.eventUserName"
                placeholder="请输入当事人姓名"
              />
            </Col>
            <Col span="6">
              <span>身份证号码：</span>
              <Input
                style="width: 65%"
                v-model="searchInfo.eventCardno"
                placeholder="请输入身份证号码"
              />
            </Col>
            <Col span="6">
              <span>联系电话：</span>
              <Input
                style="width: 70%"
                v-model="searchInfo.eventTel"
                placeholder="请输入联系电话"
              />
            </Col>
          </Row>
          <Row v-if="!isShowMore">
            <Col span="6">
              <span>纠纷发生时间：</span>
              <DatePicker
                type="datetime"
                v-model="searchInfo.occurrenceTimeStart"
                :clearable="true"
                style="width: 60%"
                placeholder="请选择纠纷发生开始时间"
              ></DatePicker>
            </Col>
            <Col span="1" class="mt8">
              <span>至</span>
            </Col>
            <Col span="5">
              <DatePicker
                type="datetime"
                v-model="searchInfo.occurrenceTimeEnd"
                :clearable="true"
                style="width: 90%"
                placeholder="请选择纠纷发生结束时间"
              ></DatePicker>
            </Col>
            <Col span="6">
              <span>纠纷化解时间：</span>
              <DatePicker
                type="datetime"
                v-model="searchInfo.resolveTimeStart"
                style="width: 60%"
                placeholder="请选择纠纷化解开始时间"
              ></DatePicker>
            </Col>
            <Col span="1" class="mt8">
              <span>至</span>
            </Col>
            <Col span="4">
              <DatePicker
                type="datetime"
                v-model="searchInfo.resolveTimeEnd"
                style="width: 100%"
                placeholder="请选择纠纷化解结束时间"
              ></DatePicker>
            </Col>
          </Row>
          <Row class="mb10" style="margin-top: 10px;">
            <Col span="6">
              <span>涉众人数范围：</span>
              <Select
                style="width: 60%"
                v-model="searchInfo.is_involve_everyone_count"
                :clearable="true"
              >
                <Option value="0">5-30人</Option>
                <Option value="1">31-300人</Option>
                <Option value="2">300人以上</Option>
              </Select>
            </Col>
            <Col span="6">
              <span>流程：</span>
              <Select
                style="width: 60%"
                v-model="searchInfo.logType"
                :clearable="true"
              >
                <Option value="1">上报</Option>
                <Option value="2">办结</Option>
                <Option value="3">转办</Option>
                <Option value="4">退回</Option>
  <!--              <Option value="5">横传</Option>-->
                <Option value="6">下派</Option>
              </Select>
            </Col>
  <!--          <Col span="6">-->
  <!--            <span>回访状态：</span>-->
  <!--            <Select-->
  <!--              style="width: 61%"-->
  <!--              v-model="searchInfo.warningState"-->
  <!--              :clearable="true"-->
  <!--            >-->
  <!--              <Option value="1">是</Option>-->
  <!--              <Option value="2">否 </Option>-->
  <!--            </Select>-->
  <!--          </Col>-->

          </Row>
        </div>
        <div style="width: 10%; float: left">
          <Row>
            <Col span="12">
              <Button type="primary" @click="searchData">搜索</Button>
            </Col>
            <Col offset="2" span="10">
              <div @click="isShowMore = !isShowMore" class="show-more">
                {{ isShowMore ? "更多" : "收起" }}
                <Icon
                  :type="isShowMore ? 'ios-arrow-down' : 'ios-arrow-up'"
                ></Icon>
              </div>
            </Col>
          </Row>
          <Row style="margin-top: 10px;">
            <Col span="12">
              <Button type="default" @click="resetSearch">重置</Button>
            </Col>
          </Row>
        </div>
      </div>
      <Table stripe :columns="columns" :data="dataList" ref="table" row-class-name="table-row-selectable">
        <template slot-scope="{ row, index }" slot="eventStatus">
          <div v-if="row.eventStatus == '1'">已办结</div>
          <div v-else-if="row.eventStatus == '2'">处理中</div>
        </template>
        <template slot-scope="{ row, index }" slot="status">
          <div v-if="row.status == '1'">待受理</div>
          <div v-else-if="row.status == '2'">已受理</div>
          <div v-else-if="row.status == '3'">已完成</div>
        </template>

        <template slot-scope="{ row, index }" slot="riskName">
          {{ row.riskName ? row.riskName.split(',').length : '' }}
        </template>
        <template slot-scope="{ row, index }" slot="warningLight">
          <span v-if="row.warningLight === false"></span>
          <img v-else
            class="level-option-img"
            src="@/assets/images/warning6.png"
            alt=""
          />
        </template>
        <template slot-scope="{ row, index }" slot="warningState">
          {{row.warningState}}
        </template>
        <!-- <template slot-scope="{ row, index }" slot="eventSource">
          <div v-if="row.eventSource == '1'">网格员上报</div>
          <div v-else-if="row.eventSource == '2'">委办局推送</div>
          <div v-else-if="row.eventSource == '3'">上级督办</div>
        </template> -->
        <template slot-scope="{ row, index }" slot="isEarlyWarning">
          <div class="flex-div">
            <div class="circle-div3" v-if="row.isEarlyWarning == '1'"></div>
            <div class="circle-div2" v-if="row.isEarlyWarning == '3'"></div>
            <div class="circle-div1" v-if="row.isEarlyWarning == '4'"></div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="riskLevel">
          <div class="flex-div">
            <div v-if="row.riskLevel == '一般矛盾纠纷'">
              <img
                class="level-option-img"
                src="@/assets/images/warning4.png"
                alt=""
              />
              <span style="padding-left: 10px">一般矛盾纠纷</span>
            </div>
            <div v-if="row.riskLevel == '复杂矛盾纠纷'">
              <img
                class="level-option-img"
                src="@/assets/images/warning5.png"
                alt=""
              />
              <span style="padding-left: 10px">复杂矛盾纠纷</span>
            </div>
            <div v-if="row.riskLevel == '重大矛盾纠纷'">
              <img
                class="level-option-img"
                src="@/assets/images/warning6.png"
                alt=""
              />
              <span style="padding-left: 10px">重大矛盾纠纷</span>
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="occurrenceAddress">
          <span
            >{{ row.city }}{{ row.area }}{{ row.street }}{{ row.community }}</span
          >
        </template>
        <template slot-scope="{ row, index }" slot="is_involve_everyone">
          <div v-if="row.is_involve_everyone === '0'">否</div>
          <div v-else-if="row.is_involve_everyone === '1'">是</div>
        </template>
        <template slot-scope="{ row, index }" slot="is_involve_everyone_count">
          <div v-if="row.is_involve_everyone_count === '0'">5-30人</div>
          <div v-else-if="row.is_involve_everyone_count === '1'">5-30人</div>
          <div v-else-if="row.is_involve_everyone_count === '2'">301以上</div>
        </template>
        <template slot-scope="{ row, index }" slot="logTypeNew">
          <div v-if="row.logTypeNew === '1'">上报</div>
          <div v-else-if="row.logTypeNew === '2'">办结</div>
          <div v-else-if="row.logTypeNew === '3'">转办</div>
          <div v-else-if="row.logTypeNew === '4'">退回</div>
  <!--        <div v-else-if="row.logTypeNew === '5'">横传</div>-->
          <div v-else-if="row.logTypeNew === '6'">下派</div>
        </template>
        <template slot-scope="{ row, index }" slot="logType">
          <div v-if="row.logType === '1'">上报</div>
          <div v-else-if="row.logType === '2'">办结</div>
          <div v-else-if="row.logType === '3'">转办</div>
          <div v-else-if="row.logType === '4'">退回</div>
  <!--        <div v-else-if="row.logType === '5'">横传</div>-->
          <div v-else-if="row.logType === '6'">下派</div>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <div class="flex-div">
            <Button
              @click="handleApply(row, '1')"
              v-if="(!row.deal_result_1 || row.deal_result_1 === '2') && row.completeTime !== null && row.createBy === currentUserId"
              type="primary"
              class="mr5"
            >申请不回访</Button>
            <!-- <Button
              @click="handleEdit(row)"
              v-if="row.createBy === currentUserId && row.logType === '4'"
              type="primary"
              class="mr5"
            >编辑</Button> -->
  <!--          <Button-->
  <!--            @click="handleApply(row, '3')"-->
  <!--            v-if="(!row.deal_result_3 || row.deal_result_3 === '2') && row.completeTime === null && row.isAcceptance === '0' && row.createBy !== currentUserId"-->
  <!--            type="primary"-->
  <!--            class="mr5"-->
  <!--          >申请退回</Button>-->
            <Button
              @click="acceptance(row)"
              v-if="row.status === '1' && row.logStatus == 1"
              type="primary"
              class="mr5"
              >受理</Button
            >
  <!--          <Button-->
  <!--            @click="returnBack(row)"-->
  <!--            v-if="row.status === '1' && type > '1' "-->
  <!--            type="primary"-->
  <!--            class="mr5"-->
  <!--            >退回</Button-->
  <!--          >-->
            <!--  退回和上报增加 row.is_dispatch_office_counts == row.is_dispatch_office_back_counts 判断条件   is_dispatch_office_back_counts：横向部门退回数量   is_dispatch_office_counts： 横向部门数量  添加备注 如果有问题 需去除if判断里面这个条件 >-->
            <Button
              @click="returnBack(row)"
              v-if="(row.fax != null && row.fax !== undefined && row.fax !== '') ? (row.status === '1' && type > '1' &&  row.createBy !== currentUserId) : (row.status === '1' && type > '1' && row.is_dispatch_office_counts == row.is_dispatch_office_back_counts &&  row.createBy !== currentUserId)"
              type="primary"
              class="mr5"
            >退回</Button
            >
            <div v-else>
              <Button
                @click="report(row)"
                v-if="
                  row.status === '2' &&
                  row.fax === '' &&
                  serverUserInfo.company_grade > 2 &&
                  row.logStatus == 1 &&
                  row.logType !== '6' && row.isResolve !== '1' &&
                  row.is_dispatch_office_counts == row.is_dispatch_office_back_counts
                "
                type="primary"
                class="mr5"
                >上报</Button
              >
  <!--            <Button-->
  <!--              @click="report(row)"-->
  <!--              v-if="-->
  <!--                row.status === '1' &&-->
  <!--                row.fax === '' &&-->
  <!--                serverUserInfo.company_grade > 2 &&-->
  <!--                row.logStatus == 1 &&-->
  <!--                row.logType === '4' && row.isResolve !== '1'-->
  <!--              "-->
  <!--              type="primary"-->
  <!--              class="mr5"-->
  <!--            >上报</Button-->
  <!--            >-->
              <Button
                @click="chuzhi(row, 'street', 'dispose')"
                v-if="
                  (serverUserInfo.company_grade === '5' ||
                    serverUserInfo.company_grade === '4' || serverUserInfo.company_grade === '3') &&
                  row.status !== '3' && row.status !== '1' &&
                  type > '1'
                "
                type="primary"
                class="mr5"
                >处置</Button
              >
              <Button
                @click="fenpai(row)"
                v-if="
                  row.status !== '3' && row.status !== '1' &&
                  type === '3' &&
                  row.assignmentType !== '1' &&
                  row.fax === ''
                "
                type="primary"
                class="mr5"
                >转办</Button
              >
              <Button
                @click="banjie(row, 'grid')"
                v-if="row.status === '2' && row.isResolve === '1' && row.createBy === currentUserId"
                type="primary"
                class="mr5"
                >办结</Button
              >
              <Button
                @click="getInfo(row, 'street')"
                v-if="type === '3' && (serverUserInfo.company_grade === '3' || serverUserInfo.company_grade === '2')"
                type="primary"
                class="mr5"
                >详情</Button
              >
              <!-- <Button
                @click="getInfo(row, 'street')"
                v-if="serverUserInfo.company_grade === '5'"
                type="primary"
                class="mr5"
                >详情</Button
              >
              <Button
                @click="getInfo(row, 'community')"
                v-if="type === '2'"
                type="primary"
                class="mr5"
                >详情</Button
              > -->
              <Button
                @click="evaluation(row)"
                v-if="row.completeTime && row.createBy === $store.state.user.severUserInfo.id && row.deal_result_1 !== '1'"
                type="error"
                class="mr5"
                >回访记录</Button
              >
              <Button
                @click="handleApply(row, '2')"
                v-if="(!row.deal_result_2 || row.deal_result_2 === '2') && row.completeTime === null && row.status > '1' && row.logType !== '4'"
                type="info"
                class="mr5"
              >申请未办结</Button>
              <Button
                @click="handleApply(row, '0')"
                v-if="(!row.deal_result_0 || row.deal_result_0 === '2') && row.completeTime === null && row.status > '1' && row.logType !== '4'"
                type="warning"
                class="mr5"
              >申请延期</Button>
              <Button
                @click="getInfo(row, 'grid')"
                v-if="type === '1'"
                type="primary"
                class="mr5"
                >详情</Button
              >
            </div>
            <Button
                @click="getInfo(row, 'street')"
                v-if="serverUserInfo.company_grade === '5'"
                type="primary"
                class="mr5"
                >详情</Button
              >
              <Button
                @click="getInfo(row, 'community')"
                v-if="type === '2'"
                type="primary"
                class="mr5"
                >详情</Button
              >
  <!--          <Button-->
  <!--            v-if="row.status === '1' && row.logStatus == 1 && type === '2'"-->
  <!--            type="primary"-->
  <!--            @click="getInfo(row, 'community')"-->
  <!--            class="mr5"-->
  <!--            >详情</Button-->
  <!--          >-->
            <!-- <Button
              v-if="row.status === '1' && row.logStatus == 1 && type === '3'"
              type="primary"
              @click="getInfo(row, 'community')"
              class="mr5"
              >详情</Button
            > -->
            <Button
              v-if="serverUserInfo.company_grade === '4'"
              type="primary"
              @click="getInfo(row, 'community')"
              class="mr5"
              >详情</Button
            >
          </div>
        </template>
      </Table>
      <Page
        class="page_style"
        :total="params.totalRecord"
        :current="params.pageNo"
        :page-size="params.pageSize"
        @on-change="changePageNo"
        show-total
        show-sizer
        @on-page-size-change="size"
      />
      <Modal v-model="modal1" title="提示">
        <p>{{ confirmTtile }}</p>
        <Input
          v-if="logResult_show"
          v-model="dataParam.logResult"
          style="margin-top: 10px"
          type="textarea"
          placeholder="请输入退回原因"
        />
        <div slot="footer">
          <Button type="default" @click="modal1 = false">取消</Button>
          <Button type="primary" @click="save">确定</Button>
        </div>
      </Modal>
      <Modal v-model="modal2" title="提示">
        <Form :model="dataParam2" :label-width="120">
          <FormItem label="部门选择：">
            <Select v-model="dataParam2.officeIdList" multiple>
              <Option
                v-for="(item, index) in fpOfficeList"
                :key="index"
                :value="item.id"
                >{{ item.name }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="办理说明：">
            <Input
              v-model="dataParam2.assignResult"
              style="margin-top: 10px"
              type="textarea"
              placeholder="请输入办理说明"
            />
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="default" @click="modal2 = false">取消</Button>
          <Button type="primary" @click="fenpaiok">确定</Button>
        </div>
      </Modal>
      <Modal v-model="peopleLog.show" title="回访记录列表" width="1200">
        <Button
          type="primary"
          @click="createPeopleLog"
          style="margin-bottom: 10px"
          >新增回访记录</Button
        >
        <Alert type="warning">
          <!-- 一般风险需7天内回访一次、 复杂风险需 7天内， 30天内各回访一次 重大
          风险需7天内 30天内 90天内各回访一次 ，如未按要求会被亮灯提醒 -->
          1、一般矛盾纠纷至少回访一次，且在7日内完成。
          2、复杂矛盾纠纷至少回访两次，分别在7日内和30日内完成。
          3、重大矛盾纠纷至少回访三次，分别在7日内、30日内、90日内完成。
          如未按时限完成跟踪回访，系统将亮红灯发出超期预警提示。
        </Alert>
        <Table border :columns="peopleLog.dataColumns" :data="peopleLog.dataList">
          <template slot-scope="{ row, index }" slot="satisfactionLevel">
            <div>{{ row.satisfactionLevel }} %</div>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button
              type="success"
              size="small"
              style="margin-right: 5px"
              @click="detailPeopleLog(row)"
              >详情</Button
            >
            <Button
              type="primary"
              size="small"
              style="margin-right: 5px"
              @click="updatePeopleLog(row)"
              >修改</Button
            >
            <Button
              type="error"
              size="small"
              style="margin-right: 5px"
              @click="removePeopleLog(row)"
              >删除</Button
            >
          </template>
        </Table>
        <div slot="footer">
          <Button type="text" size="large" @click="peopleLog.show = false"
            >取消</Button
          >
          <Button type="primary" size="large" @click="peopleLog.show = false"
            >确定</Button
          >
        </div>
      </Modal>
      <Modal v-model="peopleLog.detailShow" :title="title" width="500">
        <Form
          ref="form"
          :model="addObj"
          :key="modalKey"
          :rules="ruleValidate"
          :label-width="150"
        >
          <Row :gutter="16">
            <Col span="20">
              <FormItem label="回访时间" prop="recordTime" required style="">
                <DatePicker
                  type="date"
                  v-model="addObj.recordTime"
                  :clearable="true"
                  style="width: 240px"
                  placeholder=""
                ></DatePicker>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col span="20">
              <FormItem label="满意度" prop="satisfactionLevel" required style="">
                <InputNumber
                  style="width: 240px"
                  :max="100"
                  :min="0"
                  v-model="addObj.satisfactionLevel"
                  :formatter="(value) => `${value}%`"
                  :parser="(value) => value.replace('%', '')"
                ></InputNumber>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col span="20">
              <FormItem label="沟通记录" prop="recordLog" required style="">
                <Input
                  v-model="addObj.recordLog"
                  placeholder=""
                  type="textarea"
                ></Input>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col span="20">
              <FormItem label="意见建议" prop="opinions" required style="">
                <Input
                  v-model="addObj.opinions"
                  placeholder=""
                  type="textarea"
                ></Input>
              </FormItem>
            </Col>
          </Row>
          <!-- <Row :gutter="16">
            <Col span="20">
              <FormItem label="附件：" prop="col5">
                <Upload
                  action="http://jilinmdjf.lngov.top/api/ac/jilinsscgsdp/uploadService/uploadFile"
                  :show-upload-list="false"
                  :before-upload="beforeUpload"
                >
                  <Button icon="ios-cloud-upload-outline">上传图片</Button>
                </Upload>
              </FormItem>
            </Col>
          </Row> -->
        </Form>
        <div slot="footer">
          <div v-if="title !== '回访记录详情'">
            <Button type="text" size="large" @click="peopleLog.detailShow = false"
              >取消</Button
            >
            <Button
              :disabled="peopleLog.confirmButton"
              type="primary"
              size="large"
              @click="peopleLogConfirm"
              >确定</Button
            >
          </div>
        </div>
      </Modal>
      <Modal
        v-model="applyModal.visible"
        :title="applyModal.title"
        :closable="false"
        :mask-closable="false"
        :footer-hide="true"
      >
        <Form :model="applyForm" :label-width="80" :rules="applyRules" ref="applyForm">
          <FormItem label="申请原因" prop="approve_desc">
            <Input v-model="applyForm.approve_desc" type="textarea" :rows="4" placeholder="请输入申请原因" />
          </FormItem>
          <FormItem label="延期天数" prop="approve_days" v-if="applyForm.approve_type === '0'">
            <InputNumber v-model="applyForm.approve_days" :min="1" :max="365" placeholder="请输入延期天数" :style="{width: '100%'}" />
          </FormItem>
        </Form>
        <div class="modal-footer">
          <Button @click="handleApplyCancel">取消</Button>
          <Button type="primary" :loading="applyModal.loading" @click="handleApplySubmit">确定</Button>
        </div>
      </Modal>
    </div>
  </template>
<script>
import {
  deleteFollowUpRecords,
  insertFollowUpRecords,
  updateFollowUpRecords,
  selectFollowUpRecordsList,
  uploadFile,
  findEventLogByOfficeStatusList,
  updateEventAcceptance,
  insertEventFlowLog,
  selectOfficeList,
  insertEventFlowLogAssignment,
  findEventLogByCreateList,
  selectCityList,
  selectDictList
} from '@/api/contradiction.js'
import { insertEventApprove } from '@/api/approval'
import { datetime2str, date2str } from '@/api/eventlist.js'
export default {
  name: 'register',
  data () {
    return {
      modalKey: 1,
      ruleValidate: {
        recordTime: [
          { required: true, message: '必选', type: 'date', trigger: 'change' }
        ],
        // satisfactionLevel: [{ required: true, message: '必填', trigger: 'change' }],
        recordLog: [{ required: true, message: '必填', trigger: 'blur' }],
        opinions: [{ required: true, message: '必填', trigger: 'blur' }]
      },
      addObj: {
        id: '',
        eventCode: '',
        recordTime: '',
        satisfactionLevel: 0,
        recordLog: '',
        opinions: '',
        col5: ''
      },
      title: '',
      peopleLog: {
        dataColumns: [
          { type: 'index', title: '序号', align: 'center', width: '80' },
          { title: '回访时间', key: 'recordTime', align: 'center' },
          { title: '满意度 ', slot: 'satisfactionLevel', align: 'center' },
          {
            title: '操作',
            slot: 'action',
            fixed: 'right',
            align: 'center',
            width: '180'
          }
        ],
        dataList: [],
        show: false,
        detailShow: false,
        info: {},
        confirmButton: false,
        tableLoading: false,
        operate_type: ''
      },
      userId: '',
      token: '',
      backInfo: {},
      lowerModal: false,
      lowerForm: {},
      lowerList: [],
      confirmTtile: 'dfsaf',
      modal1: false,
      modal2: false,
      dataParam2: {},
      fpOfficeList: [],
      logResult_show: false,
      dataParam: {},
      isShowMore: true,
      searchInfo: {},
      columns: [
        { type: 'index', title: '序号', align: 'center', width: '80px' },
        { title: '矛盾状态', slot: 'status', align: 'center', width: '100px' },
        { title: '矛盾进度', slot: 'eventStatus', align: 'center', width: '100px' },
        { title: '流程', slot: 'logTypeNew', align: 'center', width: '100px' },
        // { title: '矛盾来源', slot: 'eventSource', align: 'center', width: '100px' },
        {
          title: '纠纷编号',
          key: 'eventCode',
          align: 'center',
          width: '160px'
        },
        // { title: '化解状态', key: 'eventCode', align: 'center', width: '160px' }, // 后台未返回
        {
          title: '超时提示',
          slot: 'isEarlyWarning',
          align: 'center',
          width: '90px'
        },
        {
          title: '风险等级',
          slot: 'riskLevel',
          align: 'center',
          width: '140px'
        },
        // {
        //   title: '预计办结时间',
        //   key: 'termTime',
        //   align: 'center',
        //   width: '150px'
        // },
        // { title: '重点矛盾', slot: 'isPointEvent', align: 'center', width: '90px' },
        {
          title: '纠纷大类',
          key: 'eventCategoryId',
          align: 'center',
          width: '150px'
        },
        {
          title: '纠纷小类',
          key: 'eventTypeId',
          align: 'center',
          width: '200px'
        },
        {
          title: '风险因子个数',
          slot: 'riskName',
          align: 'center',
          width: '120px'
        },
        {
          title: '风险因子名称',
          key: 'riskName',
          align: 'center',
          width: '200px'
        },

        {
          title: '是否涉众',
          slot: 'is_involve_everyone',
          align: 'center',
          width: '150px'
        },
        {
          title: '涉众人数范围',
          slot: 'is_involve_everyone_count',
          align: 'center',
          width: '150px'
        },
        {
          title: '回访预警',
          slot: 'warningLight',
          align: 'center',
          width: '90px'
        },
        {
          title: '回访状态',
          slot: 'warningState',
          align: 'center',
          width: '100px'
        },
        {
          title: '纠纷发生时间',
          key: 'occurrenceTime',
          align: 'center',
          width: '150px'
        },

        {
          title: '纠纷描述',
          key: 'disputeDescription',
          align: 'center',
          width: '200px'
        },
        {
          title: '纠纷发生地',
          slot: 'occurrenceAddress',
          align: 'center',
          width: '140px'
        },
        { title: '详细地址', key: 'address', align: 'center', width: '140px' },
        {
          title: '上报人',
          key: 'reportingName',
          align: 'center',
          width: '90px'
        },
        {
          title: '上报单位',
          key: 'reportingUnit',
          align: 'center',
          width: '100px'
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          align: 'center',
          width: '600'
        }
      ],
      dataList: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        eventType: '2'
      },
      type: '',
      url: '',
      list_url: '',
      dictData: {
        list1: [],
        list2: []
      },
      areaData: {
        list1: [],
        list2: [],
        list3: [],
        list4: []
      },
      applyModal: {
        visible: false,
        title: '申请',
        loading: false
      },
      applyForm: {
        event_id: '',
        approve_type: '',
        approve_desc: '',
        approve_days: null
      },
      applyRules: {
        approve_desc: [
          { required: true, message: '请输入申请原因', trigger: 'blur' }
        ],
        approve_days: [
          {
            required: true,
            message: '请输入延期天数',
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (this.applyForm.approve_type === '0') {
                if (!value) {
                  callback(new Error('请输入延期天数'))
                } else if (value < 1 || value > 365) {
                  callback(new Error('延期天数必须在1-365天之间'))
                } else {
                  callback()
                }
              } else {
                callback()
              }
            }
          }
        ]
      },
      currentUserId: ''
    }
  },
  mounted () {
    this.type = this.$route.query.type
    if (this.type === '1') {
      this.columns[3].slot = 'logType'
    } else {
      this.columns[3].slot = 'logTypeNew'
    }
    this.list_url =
        this.type === '1'
          ? findEventLogByCreateList
          : findEventLogByOfficeStatusList
    this.getList()
    this.getDictList('1')
    this.getCityData('1')
    this.currentUserId = this.serverUserInfo.id
    // if (this.serverUserInfo.name.indexOf('网格员') !== -1) {
    //   // 此账号是网格员账号
    //   this.columns.splice(6, 1)
    // }
  },
  methods: {
    // 上传图片前转base64
    beforeUpload (file) {
      let imgObj = {}
      const reader = new FileReader()
      reader.onload = (e) => {
        imgObj.url = e.target.result
        this.imgArr.push(imgObj)
      }
      reader.readAsDataURL(file)
      let formdata = new FormData()
      formdata.append('file', file)
      formdata.append('fileName', file.name)
      let form = {
        business_type: 'jlEvent'
      }
      formdata.append('json', JSON.stringify(form))
      uploadFile(formdata, form).then((res) => {
        // let len = this.imgArr.length
        // this.imgArr[len - 1]['uuid'] = res.data.data.uuid
        // this.urlList.push(res.data.data)
      })
    },
    peopleLogConfirm () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.title === '新增回访记录') {
            // 新增
            insertFollowUpRecords({
              ...this.addObj,
              recordTime: date2str(this.addObj.recordTime)
            }).then((ret) => {
              if (ret.data.errcode === 0) {
                this.$Message.success('新增成功')
                this.peopleLog.detailShow = false
                this.getZFLogList(this.addObj.eventCode)
                this.$refs['form'].resetFields()
                return
              }
              this.$Message.error(ret.data.errmsg)
            })
          } else if (this.title === '修改回访记录') {
            // 修改
            updateFollowUpRecords({
              ...this.addObj,
              recordTime: date2str(this.addObj.recordTime)
            }).then((ret) => {
              if (ret.data.errcode === 0) {
                this.$Message.success('修改成功')
                this.peopleLog.detailShow = false
                this.$refs['form'].resetFields()
                this.getZFLogList(this.addObj.eventCode)
                return
              }
              this.$Message.error(ret.data.errmsg)
            })
          }
        }
      })
    },
    detailPeopleLog (row) {
      this.title = '回访记录详情'
      this.peopleLog.detailShow = true
      this.addObj.opinions = row.opinions
      this.addObj.recordTime = row.recordTime
      this.addObj.satisfactionLevel = row.satisfactionLevel
      this.addObj.recordLog = row.recordLog
      this.addObj.disabled = true
    },
    updatePeopleLog (row) {
      this.title = '修改回访记录'
      this.peopleLog.detailShow = true
      this.addObj.id = row.id
      this.addObj.eventCode = row.eventCode
      this.addObj.opinions = row.opinions
      this.addObj.recordTime = row.recordTime
      this.addObj.satisfactionLevel = row.satisfactionLevel
      this.addObj.recordLog = row.recordLog
    },
    removePeopleLog (row) {
      this.$Modal.confirm({
        title: '确认删除？',
        loading: true,
        onOk: () => {
          // TODO
          deleteFollowUpRecords({ id: row.id }).then((ret) => {
            if (ret.data.errcode === 0) {
              this.$Modal.remove()
              this.getZFLogList(this.addObj.eventCode)
              this.$Message.success({
                content: '删除成功！'
              })
            } else {
              this.$Modal.remove()
              this.$Message.error({
                content: '删除失败\n' + ret.data.errmsg
              })
            }
          })
        }
      })
    },
    createPeopleLog () {
      this.title = '新增回访记录'
      this.peopleLog.detailShow = true
      this.addObj.id = ''
      this.addObj.opinions = ''
      this.addObj.recordTime = ''
      this.addObj.satisfactionLevel = 0
      this.addObj.recordLog = ''
    },
    evaluation (row) {
      // getCardNoById({ id: e.id }).then(res => {
      //   if (res.data.errcode === 0) {
      //     this.cardnoWJM = res.data.data.cardno
      //     this.zfListId = e.id
      //     this.getZFLogList()
      //   } else {
      //     this.$Notice.error({ title: '查询失败！', desc: res.data.errmsg })
      //   }
      // })
      this.addObj.eventCode = row.eventCode
      this.getZFLogList(row.eventCode)
    },
    getZFLogList (eventCode) {
      // this.peopleLog.tableLoading = true
      selectFollowUpRecordsList({ eventCode }).then((ret) => {
        if (ret.data.errcode === 0) {
          this.peopleLog.tableLoading = false
          this.peopleLog.dataList = ret.data.data
          this.peopleLog.show = true
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    getDictList (level, id, eventTypeId) {
      selectDictList({ type: 'event_category', parent_id: id }).then((res) => {
        if (res.data.errcode === 0) {
          this.dictData['list' + level] = res.data.data
          if (eventTypeId) {
            this.dictData.list2.forEach((element) => {
              if (eventTypeId === element.label) {
                this.formInline.eventTypeId = element.value
              }
            })
          }
          return
        }
        this.$Message.error(res.errmsg)
      })
    },
    getCityData (level, id) {
      selectCityList({ parent_id: id }).then((res) => {
        if (res.data.errcode === 0) {
          this.areaData['list' + level] = res.data.data
          return
        }
        this.$Message.error(res.errmsg)
      })
    },
    clearDispute (res) {
      // 清空纠纷大类
      console.log(res, 'dddddd')
      this.$nextTick(() => {
        // clearable后会直接把searchInfo里的该字段删除掉
        this.$set(this.searchInfo, 'eventCategoryId', '')
        this.$set(this.searchInfo, res, res === 'info' ? '{}' : '')
      })
    },
    changeDispute (item) {
      this.searchInfo.eventCategoryId = JSON.parse(item).value
      this.getDictList('2', JSON.parse(item).id)
    },
    changeArea (level, parent_id) {
      if (level > 1 && !parent_id) {
        this.areaData['list' + level] = []
        let list = ['', 'cityId', 'areaId', 'streetId', 'communityId']
        for (let i = level; i < list.length; i++) {
          this.$set(this.searchInfo, list[i], '')
        }
        return
      }
      this.getCityData(level, parent_id)
    },
    getList (item) {
      if (item) {
        this.params = Object.assign(this.params, item)
        if (this.params.occurrenceTimeStart) {
          this.params.occurrenceTimeStart = datetime2str(
            this.params.occurrenceTimeStart
          )
        }
        if (this.params.occurrenceTimeEnd) {
          this.params.occurrenceTimeEnd = datetime2str(
            this.params.occurrenceTimeEnd
          )
        }
        if (this.params.resolveTimeStart) {
          this.params.resolveTimeStart = datetime2str(
            this.params.resolveTimeStart
          )
        }
        if (this.params.resolveTimeEnd) {
          this.params.resolveTimeEnd = datetime2str(this.params.resolveTimeEnd)
        }
      }
      this.list_url(this.params).then((res) => {
        if (res.data.errcode === 0) {
          let tempArr = res.data.data.results
          this.dataList = res.data.data.results
          let status1 = []
          let status2 = []
          let status3 = []
          let others = []
          tempArr.forEach((item) => {
            switch (item.status) {
              case '1':
                status1.push(item)
                break
              case '2':
                status2.push(item)
                break
              case '3':
                status3.push(item)
                break
              default:
                others.push(item)
                break
            }
          })
          status1.sort(
            (a, b) => new Date(b.occurrenceTime) - new Date(a.occurrenceTime)
          )
          status2.sort(
            (a, b) => new Date(b.occurrenceTime) - new Date(a.occurrenceTime)
          )
          status3.sort(
            (a, b) => new Date(b.occurrenceTime) - new Date(a.occurrenceTime)
          )
          this.dataList = [...status1, ...status2, ...status3, ...others]
          // TODO 测试用
          // this.dataList.map((item, index) => {
          //   // 判断index是奇数还是偶数
          //   if (index % 2 === 0) {
          //     // item.col1 = false
          //     item.col2 = 1
          //   } else {
          //     // item.col1 = true
          //     item.col2 = 2
          //   }
          // })
          this.params.totalRecord = res.data.data.totalRecord
        }
      })
    },
    size (pageSize) {
      this.params.pageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.params.pageNo = pageNo
      this.getList(this.params)
    },
    searchData () {
      this.params.pageNo = 1 // 重置页码为1
      this.getList(this.searchInfo)
    },
    getInfo (row, level) {
      // 详情接口
      this.$router.push({
        name: 'contradictionRegisterAdd',
        params: {
          what: 'edit',
          id: row.id,
          level: level,
          isShowInfo: true,
          type: this.type
        }
      })
    },
    banjie (row, level) {
      // 点击办结跳转到详情页面，增加核查内容录入框(只有网格员有办结按钮)
      console.log(this.type)
      this.$router.push({
        name: 'contradictionRegisterAdd',
        params: {
          what: 'edit',
          id: row.id,
          level: level,
          type: this.type,
          status: row.status,
          wgyBj: true
        }
      })
      // let data = {
      //   id: e.id,
      //   isSpecialTasks: e.isSpecialTasks,
      //   status: e.status,
      //   flowVersion: e.flowVersion,
      //   flowId: e.flowId,
      //   logType: '2'
      // }
      // updateEventCompletion(data).then(ret => {
      //   if (ret.data.errcode === 0) {
      //     this.$Message.success('操作成功')
      //     this.getList()
      //     return
      //   }
      //   this.$Message.error(ret.data.errmsg)
      // })
    },
    acceptance (row) {
      // 受理
      console.log('手里')
      this.logResult_show = false
      this.url = updateEventAcceptance
      this.dataParam = {
        id: row.id,
        eventId: row.eventId,
        riskLevel: row.riskLevel
      }
      this.formParams = {}
      this.confirmTtile = '确定受理该事项吗？'
      this.modal1 = true
    },
    report (row) {
      // 上报跳转到详情页进行风险等级和办结期限编辑
      // this.url = insertEventFlowLog
      // this.logResult_show = false
      // this.dataParam = {
      //   isSpecialTasks: '2',
      //   id: row.id,
      //   flowVersion: row.flowVersion,
      //   status: row.status,
      //   flowId: row.flowId,
      //   logType: row.logType
      // }
      // this.formParams = {}
      // this.confirmTtile = '确定上报该事项吗？'
      // this.modal1 = true
      let whatValue = 'edit'
      if (row.createBy === this.currentUserId) {
        whatValue = 'editRegister'
      }
      this.$router.push({
        name: 'contradictionRegisterAdd',
        params: {
          what: whatValue,
          id: row.id,
          // level: level,
          type: this.type,
          risk: true
        }
      })
    },
    save () {
      // 提示确定按钮
      console.log('save')
      this.url(this.dataParam).then((res) => {
        if (res.data.errcode === 0) {
          this.$Message.success('操作成功')
          this.modal1 = false
          this.getList()
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    chuzhi (row, level, disposeFlag) {
      let data = {
        id: row.id
      }
      updateEventAcceptance(data).then((ret) => {
        if (ret.data.errcode === 0) {
          this.$router.push({
            name: 'contradictionRegisterAdd',
            params: {
              what: 'edit',
              id: row.id,
              level: level,
              type: this.type,
              dispose: disposeFlag
            }
          })
        }
      })
    },
    fenpai (row) {
      this.selectOfficeList(row)
      this.modal2 = true
      this.dataParam2 = {
        flowId: row.flowId,
        status: row.status,
        id: row.id,
        eventId: row.eventId,
        flowVersion: row.flowVersion,
        riskLevel: row.riskLevel,
        // logType: '3', // 原
        logType: '5',
        logResult: '',
        officeIdList: []
      }
    },
    fenpaiok () {
      insertEventFlowLogAssignment(this.dataParam2).then((res) => {
        if (res.data.errcode === 0) {
          this.$Message.success('成功')
          this.modal2 = false
          this.getList()
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    selectOfficeList (item) {
      // this.params = Object.assign(this.params, item)
      let param = {
        event_id: item.eventId
      }
      selectOfficeList(param).then((res) => {
        if (res.data.errcode === 0) {
          this.fpOfficeList = res.data.data
        }
      })
    },
    returnBack (row) {
      this.url = insertEventFlowLog
      this.logResult_show = true
      this.dataParam = {
        isSpecialTasks: '2',
        id: row.id,
        eventId: row.eventId,
        flowVersion: row.flowVersion,
        riskLevel: row.riskLevel,
        status: row.status,
        flowId: row.flowId,
        logType: '4'
      }
      this.formParams = {}
      this.confirmTtile = '确定退回此数据吗？'
      this.modal1 = true
    },

    handleApply (row, approve_type) {
      this.applyModal.visible = true
      this.applyForm.event_id = row.eventId
      this.applyForm.approve_type = approve_type
      this.applyForm.approve_desc = ''
      this.applyForm.approve_days = null
    },
    handleApplyCancel () {
      this.applyModal.visible = false
      this.$refs.applyForm.resetFields()
    },
    async handleApplySubmit () {
      this.applyModal.loading = true
      try {
        // 先进行表单验证
        const valid = await this.$refs.applyForm.validate()
        if (!valid) {
          this.applyModal.loading = false
          return
        }

        const params = {
          event_id: this.applyForm.event_id,
          approve_type: this.applyForm.approve_type,
          approve_desc: this.applyForm.approve_desc
        }

        // 如果是延期申请，添加延期天数
        if (this.applyForm.approve_type === '0') {
          params.approve_days = this.applyForm.approve_days
        }

        const res = await insertEventApprove(params)
        if (res.data.errcode === 0) {
          this.$Message.success('申请提交成功')
          this.applyModal.visible = false
          this.getList() // 刷新列表
        } else {
          this.$Message.error(res.data.errmsg || '申请提交失败')
        }
      } catch (error) {
        console.error('申请提交失败:', error)
        this.$Message.error('申请提交失败')
      } finally {
        this.applyModal.loading = false
      }
    },
    handleEdit (row) {
      this.$router.push({
        name: 'contradictionRegisterAdd',
        params: {
          what: 'editRegister',
          id: row.id,
          level: this.type === '3' ? 'street' : this.type === '2' ? 'community' : 'grid',
          type: this.type
        },
        query: {
          type: 'add'
        }
      })
    },
    resetSearch () {
      this.searchInfo = {}
      // 重置区域和纠纷类型选择
      this.areaData.list2 = []
      this.areaData.list3 = []
      this.areaData.list4 = []
      this.dictData.list2 = []
      this.getList()
    }
  },
  computed: {
    serverUserInfo () {
      return this.$store.state.user.severUserInfo
    }
  }
}
</script>
  <style scoped lang="less">
  .contradiction-div {
    padding: 10px;
    .search-div {
      float: left;
      width: 100%;
      padding: 15px 30px 15px 15px;
      // min-height: 200px;
      border: 1px solid skyblue;
      border-radius: 5px;
      background-color: #f6fdfd;
      margin-bottom: 15px;
    }
  }

  // 强制覆盖全局样式，使表格可选
  /deep/ .ivu-table-wrapper {
    div, p, span, td, th {
      word-break: break-all !important;
      -webkit-user-select: text !important;
      -moz-user-select: text !important;
      user-select: text !important;
    }

    .ivu-table-body, .ivu-table-cell {
      -webkit-user-select: text !important;
      -moz-user-select: text !important;
      user-select: text !important;
    }

    tr td {
      -webkit-user-select: text !important;
      -moz-user-select: text !important;
      user-select: text !important;
    }
  }

  // 单独为风险因子列添加样式
  /deep/ .ivu-table-column-riskName .ivu-table-cell {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    user-select: text !important;
  }

  .mb10 {
    margin-bottom: 10px;
  }
  .mt8 {
    margin-top: 8px;
  }
  .mr15 {
    margin-right: 15px;
  }
  .mr5 {
    margin-right: 5px;
  }
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .flex-div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .circle-div1 {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: red;
  }
  .circle-div2 {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: orange;
  }
  .circle-div3 {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: green;
  }
  .show-more {
    margin-top: 5px;
    cursor: pointer;
  }
  .level-option-img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-bottom: 3px;
  }
  .modal-footer {
    text-align: right;
    margin-top: 20px;
  }
  .modal-footer .ivu-btn {
    margin-left: 8px;
  }

  </style>
  <template>
    <div class="contradiction-div">
      <div class="search-div">
        <div style="width: 90%; float: left">
          <Row class="mb10">
            <Col span="6">
              <span>部门受理状况：</span>
              <Select style="width: 60%" v-model="searchInfo.status"    :clearable="true">
                <Option value="1">待处理</Option>
                <Option value="2">已受理 </Option>
                <Option value="3">已完成</Option>
              </Select>
            </Col>
            <Col span="6">
              <span>纠纷编号：</span>
              <Input style="width: 70%" v-model="searchInfo.eventCode" />
            </Col>
            <Col span="6">
              <span>重点矛盾：</span>
              <Select
                style="width: 70%"
                :clearable="true"
                v-model="searchInfo.isPointEvent"
              >
                <Option value="1">是</Option>
                <Option value="2">否 </Option>
              </Select>
            </Col>
            <Col span="6">
              <span>纠纷大类：</span>
              <Select
                v-model="searchInfo.info"
                @on-clear="clearDispute('info')"
                @on-change="changeDispute(searchInfo.info)"
                :clearable="true"
                style="width: 70%"
              >
                <Option
                  v-for="item in dictData.list1"
                  :value="JSON.stringify(item)"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </Col>
          </Row>
          <Row class="mb10">
            <Col span="6">
              <span>纠纷小类：</span>
              <Select
                v-model="searchInfo.eventTypeId"
                :clearable="true"
                style="width: 70%"
              >
                <Option
                  v-for="item in dictData.list2"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </Col>
            <Col span="6">
              <span>是否化解：</span>
              <Select
                style="width: 70%"
                v-model="searchInfo.isResolve"
                :clearable="true"
              >
                <Option value="1">是</Option>
                <Option value="2">否 </Option>
              </Select>
            </Col>
            <Col span="6">
              <span>是否涉众：</span>
              <Select
                style="width: 70%"
                v-model="searchInfo.is_involve_everyone"
                :clearable="true"
              >
                <Option value="1">是</Option>
                <Option value="2">否 </Option>
              </Select>
            </Col>
            <Col span="6">
              <span>化解是否满意：</span>
              <Select
                style="width: 61%"
                v-model="searchInfo.isSatisfaction"
                :clearable="true"
              >
                <Option value="1">是</Option>
                <Option value="2">否 </Option>
              </Select>
            </Col>

          </Row>
          <Row class="mb10">
            <Col span="6">
              <span>发生纠纷地市：</span>
              <Select
                v-model="searchInfo.cityId"
                @on-change="changeArea('2', searchInfo.cityId)"
                :clearable="true"
                placeholder="请选择市"
                style="width: 61%"
              >
                <Option
                  v-for="item in areaData.list1"
                  :value="item.parent_id"
                  :key="item.parent_id"
                >{{ item.name }}</Option
                >
              </Select>
            </Col>
            <Col span="6">
              <span>发生纠纷地区：</span>
              <Select
                v-model="searchInfo.areaId"
                @on-change="changeArea('3', searchInfo.areaId)"
                :clearable="true"
                placeholder="请选择区"
                style="width: 61%"
              >
                <Option
                  v-for="item in areaData.list2"
                  :value="item.parent_id"
                  :key="item.parent_id"
                  >{{ item.name }}</Option
                >
              </Select>
            </Col>
            <Col span="6">
              <span>发生纠纷街道：</span>
              <Select
                v-model="searchInfo.streetId"
                @on-change="changeArea('4', searchInfo.streetId)"
                :clearable="true"
                placeholder="请选择街道"
                style="width: 61%"
              >
                <Option
                  v-for="item in areaData.list3"
                  :value="item.parent_id"
                  :key="item.parent_id"
                  >{{ item.name }}</Option
                >
              </Select>
            </Col>
            <Col span="6">
              <span>发生纠纷社区：</span>
              <Select
                v-model="searchInfo.communityId"
                placeholder="请选择社区"
                :clearable="true"
                style="width: 61%"
              >
                <Option
                  v-for="item in areaData.list4"
                  :value="item.parent_id"
                  :key="item.parent_id"
                  >{{ item.name }}</Option
                >
              </Select>
            </Col>
  <!--          <Col span="6">-->
  <!--            <span>发生纠纷网格：</span>-->
  <!--            <Input-->
  <!--              style="width: 61%"-->
  <!--              v-model="searchInfo.gardenId"-->
  <!--              placeholder="请输入网格"-->
  <!--            />-->
  <!--          </Col>-->
          </Row>
          <Row class="mb10" v-if="!isShowMore">
            <Col span="6">
              <span>是否超时：</span>
              <Select
                style="width: 70%"
                v-model="searchInfo.isEarlyWarning"
                :clearable="true"
              >
                <Option value="1">正常</Option>
                <Option value="3">预警 </Option>
                <Option value="4">告警</Option>
              </Select>
            </Col>
            <Col span="6">
              <span>当事人：</span>
              <Input
                style="width: 74%"
                v-model="searchInfo.eventUserName"
                placeholder="请输入当事人姓名"
              />
            </Col>
            <Col span="6">
              <span>身份证号码：</span>
              <Input
                style="width: 65%"
                v-model="searchInfo.eventCardno"
                placeholder="请输入身份证号码"
              />
            </Col>
            <Col span="6">
              <span>联系电话：</span>
              <Input
                style="width: 70%"
                v-model="searchInfo.eventTel"
                placeholder="请输入联系电话"
              />
            </Col>
          </Row>
          <Row v-if="!isShowMore">
            <Col span="6">
              <span>纠纷发生时间：</span>
              <DatePicker
                type="datetime"
                v-model="searchInfo.occurrenceTimeStart"
                :clearable="true"
                style="width: 60%"
                placeholder="请选择纠纷发生开始时间"
              ></DatePicker>
            </Col>
            <Col span="1" class="mt8">
              <span>至</span>
            </Col>
            <Col span="5">
              <DatePicker
                type="datetime"
                v-model="searchInfo.occurrenceTimeEnd"
                :clearable="true"
                style="width: 90%"
                placeholder="请选择纠纷发生结束时间"
              ></DatePicker>
            </Col>
            <Col span="6">
              <span>纠纷化解时间：</span>
              <DatePicker
                type="datetime"
                v-model="searchInfo.resolveTimeStart"
                style="width: 60%"
                :clearable="true"
                placeholder="请选择纠纷化解开始时间"
              ></DatePicker>
            </Col>
            <Col span="1" class="mt8">
              <span>至</span>
            </Col>
            <Col span="4">
              <DatePicker
                type="datetime"
                v-model="searchInfo.resolveTimeEnd"
                style="width: 100%"
                :clearable="true"
                placeholder="请选择纠纷化解结束时间"
              ></DatePicker>
            </Col>
          </Row>
          <Row class="mb10" style="margin-top: 10px;">
            <Col span="6">
              <span>涉众人数范围：</span>
              <Select
                style="width: 60%"
                v-model="searchInfo.is_involve_everyone_count"
                :clearable="true"
              >
                <Option value="0">5-30人</Option>
                <Option value="1">31-300人</Option>
                <Option value="2">300人以上</Option>
              </Select>
            </Col>
            <Col span="6">
              <span>矛盾事件进度：</span>
              <Select
                style="width: 60%"
                v-model="searchInfo.logType"
                :clearable="true"
              >
                <Option value="1">上报</Option>
                <Option value="2">办结</Option>
                <Option value="3">转办</Option>
                <Option value="4">退回</Option>
  <!--              <Option value="5">横传</Option>-->
                <Option value="6">下派</Option>
              </Select>
            </Col>
  <!--          <Col span="6">-->
  <!--            <span>回访状态：</span>-->
  <!--            <Select-->
  <!--              style="width: 61%"-->
  <!--              v-model="searchInfo.warningState"-->
  <!--              :clearable="true"-->
  <!--            >-->
  <!--              <Option value="1">是</Option>-->
  <!--              <Option value="2">否 </Option>-->
  <!--            </Select>-->
  <!--          </Col>-->

          </Row>
        </div>
        <div style="width: 10%; float: left">
          <Row>
            <Col span="12">
              <Button type="primary" @click="searchData">搜索</Button>
            </Col>
            <Col offset="2" span="10">
              <div @click="isShowMore = !isShowMore" class="show-more">
                {{ isShowMore ? "更多" : "收起" }}
                <Icon
                  :type="isShowMore ? 'ios-arrow-down' : 'ios-arrow-up'"
                ></Icon>
              </div>
            </Col>
          </Row>
        </div>
      </div>
      <Table stripe :columns="columns" :data="dataList">
        <template slot-scope="{ row, index }" slot="eventStatus">
          <div v-if="row.eventStatus == '1'">已办结</div>
          <div v-else-if="row.eventStatus == '2'">处理中</div>
        </template>
        <template slot-scope="{ row, index }" slot="status">
          <div v-if="row.status == '1'">待处理</div>
          <div v-else-if="row.status == '2'">已受理</div>
          <div v-else-if="row.status == '3'">已完成</div>
        </template>

        <template slot-scope="{ row, index }" slot="riskName">
          {{ row.riskName ? row.riskName.split(',').length : '' }}
        </template>
        <template slot-scope="{ row, index }" slot="warningLight">
          <span v-if="row.warningLight === false"></span>
          <img v-else
            class="level-option-img"
            src="@/assets/images/warning6.png"
            alt=""
          />
        </template>
        <template slot-scope="{ row, index }" slot="warningState">
          {{row.warningState}}
        </template>
        <!-- <template slot-scope="{ row, index }" slot="eventSource">
          <div v-if="row.eventSource == '1'">网格员上报</div>
          <div v-else-if="row.eventSource == '2'">委办局推送</div>
          <div v-else-if="row.eventSource == '3'">上级督办</div>
        </template> -->
        <template slot-scope="{ row, index }" slot="isEarlyWarning">
          <div class="flex-div">
            <div class="circle-div3" v-if="row.isEarlyWarning == '1'"></div>
            <div class="circle-div2" v-if="row.isEarlyWarning == '3'"></div>
            <div class="circle-div1" v-if="row.isEarlyWarning == '4'"></div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="riskLevel">
          <div class="flex-div">
            <div v-if="row.riskLevel == '一般矛盾纠纷'">
              <img
                class="level-option-img"
                src="@/assets/images/warning4.png"
                alt=""
              />
              <span style="padding-left: 10px">一般矛盾纠纷</span>
            </div>
            <div v-if="row.riskLevel == '复杂矛盾纠纷'">
              <img
                class="level-option-img"
                src="@/assets/images/warning5.png"
                alt=""
              />
              <span style="padding-left: 10px">复杂矛盾纠纷</span>
            </div>
            <div v-if="row.riskLevel == '重大矛盾纠纷'">
              <img
                class="level-option-img"
                src="@/assets/images/warning6.png"
                alt=""
              />
              <span style="padding-left: 10px">重大矛盾纠纷</span>
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="occurrenceAddress">
          <span
            >{{ row.city }}{{ row.area }}{{ row.street }}{{ row.community }}</span
          >
        </template>
        <template slot-scope="{ row, index }" slot="is_involve_everyone">
          <div v-if="row.is_involve_everyone === '0'">否</div>
          <div v-else-if="row.is_involve_everyone === '1'">是</div>
        </template>
        <template slot-scope="{ row, index }" slot="is_involve_everyone_count">
          <div v-if="row.is_involve_everyone_count === '0'">5-30人</div>
          <div v-else-if="row.is_involve_everyone_count === '1'">5-30人</div>
          <div v-else-if="row.is_involve_everyone_count === '2'">301以上</div>
        </template>
        <template slot-scope="{ row, index }" slot="logTypeNew">
          <div v-if="row.logTypeNew === '1'">上报</div>
          <div v-else-if="row.logTypeNew === '2'">办结</div>
          <div v-else-if="row.logTypeNew === '3'">转办</div>
          <div v-else-if="row.logTypeNew === '4'">退回</div>
  <!--        <div v-else-if="row.logTypeNew === '5'">横传</div>-->
          <div v-else-if="row.logTypeNew === '6'">下派</div>
        </template>
        <template slot-scope="{ row, index }" slot="logType">
          <div v-if="row.logType === '1'">上报</div>
          <div v-else-if="row.logType === '2'">办结</div>
          <div v-else-if="row.logType === '3'">转办</div>
          <div v-else-if="row.logType === '4'">退回</div>
  <!--        <div v-else-if="row.logType === '5'">横传</div>-->
          <div v-else-if="row.logType === '6'">下派</div>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <div class="flex-div">
            <Button
              @click="handleApply(row, '1')"
              v-if="(!row.deal_result_1 || row.deal_result_1 === '2') && row.completeTime !== null && row.createBy === currentUserId"
              type="primary"
              class="mr5"
            >申请不回访</Button>
            <!-- <Button
              @click="handleEdit(row)"
              v-if="row.createBy === currentUserId && row.logType === '4'"
              type="primary"
              class="mr5"
            >编辑</Button> -->
  <!--          <Button-->
  <!--            @click="handleApply(row, '3')"-->
  <!--            v-if="(!row.deal_result_3 || row.deal_result_3 === '2') && row.completeTime === null && row.isAcceptance === '0' && row.createBy !== currentUserId"-->
  <!--            type="primary"-->
  <!--            class="mr5"-->
  <!--          >申请退回</Button>-->
            <Button
              @click="acceptance(row)"
              v-if="row.status === '1' && row.logStatus == 1"
              type="primary"
              class="mr5"
              >受理</Button
            >
  <!--          <Button-->
  <!--            @click="returnBack(row)"-->
  <!--            v-if="row.status === '1' && type > '1' "-->
  <!--            type="primary"-->
  <!--            class="mr5"-->
  <!--            >退回</Button-->
  <!--          >-->
            <!--  退回和上报增加 row.is_dispatch_office_counts == row.is_dispatch_office_back_counts 判断条件   is_dispatch_office_back_counts：横向部门退回数量   is_dispatch_office_counts： 横向部门数量  添加备注 如果有问题 需去除if判断里面这个条件 >-->
            <Button
              @click="returnBack(row)"
              v-if="(row.fax != null && row.fax !== undefined && row.fax !== '') ? (row.status === '1' && type > '1' &&  row.createBy !== currentUserId) : (row.status === '1' && type > '1' && row.is_dispatch_office_counts == row.is_dispatch_office_back_counts &&  row.createBy !== currentUserId)"
              type="primary"
              class="mr5"
            >退回</Button
            >
            <div v-else>
              <Button
                @click="report(row)"
                v-if="
                  row.status === '2' &&
                  row.fax === '' &&
                  serverUserInfo.company_grade > 2 &&
                  row.logStatus == 1 &&
                  row.logType !== '6' && row.isResolve !== '1' &&
                  row.is_dispatch_office_counts == row.is_dispatch_office_back_counts
                "
                type="primary"
                class="mr5"
                >上报</Button
              >
  <!--            <Button-->
  <!--              @click="report(row)"-->
  <!--              v-if="-->
  <!--                row.status === '1' &&-->
  <!--                row.fax === '' &&-->
  <!--                serverUserInfo.company_grade > 2 &&-->
  <!--                row.logStatus == 1 &&-->
  <!--                row.logType === '4' && row.isResolve !== '1'-->
  <!--              "-->
  <!--              type="primary"-->
  <!--              class="mr5"-->
  <!--            >上报</Button-->
  <!--            >-->
              <Button
                @click="chuzhi(row, 'street', 'dispose')"
                v-if="
                  (serverUserInfo.company_grade === '5' ||
                    serverUserInfo.company_grade === '4' || serverUserInfo.company_grade === '3' ||  serverUserInfo.company_grade === '2' || row.logType === '6') &&
                  row.status !== '3' && row.status !== '1' && row.logType !== '2'&&
                  type > '1'
                "
                type="primary"
                class="mr5"
                >处置</Button
              >
              <Button
                @click="lowerFaction(row, 'street', 'dispose')"
                v-if="
                  (serverUserInfo.company_grade === '5' ||
                    serverUserInfo.company_grade === '4' || serverUserInfo.company_grade === '3' ||  serverUserInfo.company_grade === '2') &&
                  row.status !== '3' && row.status !== '1' && (row.logType === '6' || row.logType === '4' || row.logType === '1') &&
                  type > '1'
                "
                type="primary"
                class="mr5"
              >下派</Button
              >
              <Button
                @click="fenpai(row)"
                v-if="
                  row.status !== '3' && row.status !== '1' &&
                  type === '3' &&
                  row.assignmentType !== '1' &&
                  row.fax === ''
                "
                type="primary"
                class="mr5"
                >转办</Button
              >
              <Button
                @click="banjie(row, 'grid')"
                v-if="row.status === '2' && row.isResolve === '1' && row.createBy === currentUserId"
                type="primary"
                class="mr5"
                >办结</Button
              >
              <Button
                @click="getInfo(row, 'street')"
                v-if="type === '3' && (serverUserInfo.company_grade === '3' || serverUserInfo.company_grade === '2')"
                type="primary"
                class="mr5"
                >详情</Button
              >
              <!-- <Button
                @click="getInfo(row, 'street')"
                v-if="serverUserInfo.company_grade === '5'"
                type="primary"
                class="mr5"
                >详情</Button
              >
              <Button
                @click="getInfo(row, 'community')"
                v-if="type === '2'"
                type="primary"
                class="mr5"
                >详情</Button
              > -->
              <Button
                @click="evaluation(row)"
                v-if="row.completeTime && row.createBy === $store.state.user.severUserInfo.id"
                type="error"
                class="mr5"
                >回访记录</Button
              >
              <Button
                @click="handleApply(row, '2')"
                v-if="(!row.deal_result_2 || row.deal_result_2 === '2') && row.completeTime === null && row.status > '1' && serverUserInfo.company_grade !== '2'"
                type="info"
                class="mr5"
              >申请未办结</Button>
              <Button
                @click="handleApply(row, '0')"
                v-if="(!row.deal_result_0 || row.deal_result_0 === '2') && row.completeTime === null && row.status > '1' && serverUserInfo.company_grade !== '2'"
                type="warning"
                class="mr5"
              >申请延期</Button>
              <Button
                @click="getInfo(row, 'grid')"
                v-if="type === '1'"
                type="primary"
                class="mr5"
                >详情</Button
              >
            </div>
            <Button
                @click="getInfo(row, 'street')"
                v-if="serverUserInfo.company_grade === '5'"
                type="primary"
                class="mr5"
                >详情</Button
              >
              <Button
                @click="getInfo(row, 'community')"
                v-if="type === '2' && serverUserInfo.company_grade !== '5'"
                type="primary"
                class="mr5"
                >详情</Button
              >
  <!--          <Button-->
  <!--            v-if="row.status === '1' && row.logStatus == 1 && type === '2'"-->
  <!--            type="primary"-->
  <!--            @click="getInfo(row, 'community')"-->
  <!--            class="mr5"-->
  <!--            >详情</Button-->
  <!--          >-->
            <!-- <Button
              v-if="row.status === '1' && row.logStatus == 1 && type === '3'"
              type="primary"
              @click="getInfo(row, 'community')"
              class="mr5"
              >详情</Button
            > -->
            <Button
              v-if="serverUserInfo.company_grade === '4'"
              type="primary"
              @click="getInfo(row, 'community')"
              class="mr5"
              >详情</Button
            >
          </div>
        </template>
      </Table>
      <Page
        class="page_style"
        :total="params.totalRecord"
        :current="params.pageNo"
        :page-size="params.pageSize"
        @on-change="changePageNo"
        show-total
        show-sizer
        @on-page-size-change="size"
      />
      <Modal v-model="modal1" title="提示">
        <p>{{ confirmTtile }}</p>
        <Input
          v-if="logResult_show"
          v-model="dataParam.logResult"
          style="margin-top: 10px"
          type="textarea"
          placeholder="请输入退回原因"
        />
        <div slot="footer">
          <Button type="default" @click="modal1 = false">取消</Button>
          <Button type="primary" @click="save">确定</Button>
        </div>
      </Modal>
      <Modal v-model="lowerModal" title="提示">
        <p>{{ confirmTtile }}</p>
        <Row>
          <Col span="12">
            <span>下派机构：</span>
            <Select v-model="lowerForm.crossOfficeId" style="width: 80%">
              <Option
                v-for="(item, index) in lowerList"
                :value="item.crossOfficeId"
                :key="index"
              >{{ item.name }}</Option
              >
            </Select>
          </Col>
          <Col span="12">
            <span>下派原因：</span>
            <Input
              v-model="lowerForm.logResult"
              type="textarea"
              placeholder="请输入下派原因"
            />
          </Col>
        </Row>
        <div slot="footer">
          <Button type="default" @click="lowerModal = false">取消</Button>
          <Button type="primary" @click="saveLower">确定</Button>
        </div>
      </Modal>
      <Modal v-model="modal2" title="提示">
        <Form :model="dataParam2" :label-width="120">
          <FormItem label="部门选择：">
            <Select v-model="dataParam2.officeIdList" multiple>
              <Option
                v-for="(item, index) in fpOfficeList"
                :key="index"
                :value="item.id"
                >{{ item.name }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="办理说明：">
            <Input
              v-model="dataParam2.assignResult"
              style="margin-top: 10px"
              type="textarea"
              placeholder="请输入办理说明"
            />
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="default" @click="modal2 = false">取消</Button>
          <Button type="primary" @click="fenpaiok">确定</Button>
        </div>
      </Modal>
      <Modal v-model="peopleLog.show" title="回访记录列表" width="1200">
        <Button
          type="primary"
          @click="createPeopleLog"
          style="margin-bottom: 10px"
          >新增回访记录</Button
        >
        <Alert type="warning">
          <!-- 一般风险需7天内回访一次、 复杂风险需 7天内， 30天内各回访一次 重大
          风险需7天内 30天内 90天内各回访一次 ，如未按要求会被亮灯提醒 -->
          1、一般矛盾纠纷至少回访一次，且在7日内完成。
          2、复杂矛盾纠纷至少回访两次，分别在7日内和30日内完成。
          3、重大矛盾纠纷至少回访三次，分别在7日内、30日内、90日内完成。
          如未按时限完成跟踪回访，系统将亮红灯发出超期预警提示。
        </Alert>
        <Table border :columns="peopleLog.dataColumns" :data="peopleLog.dataList">
          <template slot-scope="{ row, index }" slot="satisfactionLevel">
            <div>{{ row.satisfactionLevel }} %</div>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button
              type="success"
              size="small"
              style="margin-right: 5px"
              @click="detailPeopleLog(row)"
              >详情</Button
            >
            <Button
              type="primary"
              size="small"
              style="margin-right: 5px"
              @click="updatePeopleLog(row)"
              >修改</Button
            >
            <Button
              type="error"
              size="small"
              style="margin-right: 5px"
              @click="removePeopleLog(row)"
              >删除</Button
            >
          </template>
        </Table>
        <div slot="footer">
          <Button type="text" size="large" @click="peopleLog.show = false"
            >取消</Button
          >
          <Button type="primary" size="large" @click="peopleLog.show = false"
            >确定</Button
          >
        </div>
      </Modal>
      <Modal v-model="peopleLog.detailShow" :title="title" width="500">
        <Form
          ref="form"
          :model="addObj"
          :key="modalKey"
          :rules="ruleValidate"
          :label-width="150"
        >
          <Row :gutter="16">
            <Col span="20">
              <FormItem label="回访时间" prop="recordTime" required style="">
                <DatePicker
                  type="date"
                  v-model="addObj.recordTime"
                  :clearable="true"
                  style="width: 240px"
                  placeholder=""
                  :disabled="addObj.disabled"
                ></DatePicker>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col span="20">
              <FormItem label="满意度" prop="satisfactionLevel" required style="">
                <InputNumber
                  style="width: 240px"
                  :max="100"
                  :min="0"
                  v-model="addObj.satisfactionLevel"
                  :formatter="(value) => `${value}%`"
                  :parser="(value) => value.replace('%', '')"
                  :disabled="addObj.disabled"
                ></InputNumber>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col span="20">
              <FormItem label="沟通记录" prop="recordLog" required style="">
                <Input
                  v-model="addObj.recordLog"
                  placeholder=""
                  type="textarea"
                  :disabled="addObj.disabled"
                ></Input>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col span="20">
              <FormItem label="意见建议" prop="opinions" required style="">
                <Input
                  v-model="addObj.opinions"
                  placeholder=""
                  type="textarea"
                  :disabled="addObj.disabled"
                ></Input>
              </FormItem>
            </Col>
          </Row>
          <!-- <Row :gutter="16">
            <Col span="20">
              <FormItem label="附件：" prop="col5">
                <Upload
                  action="http://jilinmdjf.lngov.top/api/ac/jilinsscgsdp/uploadService/uploadFile"
                  :show-upload-list="false"
                  :before-upload="beforeUpload"
                >
                  <Button icon="ios-cloud-upload-outline">上传图片</Button>
                </Upload>
              </FormItem>
            </Col>
          </Row> -->
        </Form>
        <div slot="footer">
          <div v-if="title !== '回访记录详情'">
            <Button type="text" size="large" @click="peopleLog.detailShow = false"
              >取消</Button
            >
            <Button
              :disabled="peopleLog.confirmButton"
              type="primary"
              size="large"
              @click="peopleLogConfirm"
              >确定</Button
            >
          </div>
        </div>
      </Modal>
      <Modal
        v-model="applyModal.visible"
        :title="applyModal.title"
        :closable="false"
        :mask-closable="false"
        :footer-hide="true"
      >
        <Form :model="applyForm" :label-width="80" :rules="applyRules" ref="applyForm">
          <FormItem label="申请原因" prop="approve_desc">
            <Input v-model="applyForm.approve_desc" type="textarea" :rows="4" placeholder="请输入申请原因" />
          </FormItem>
          <FormItem label="延期天数" prop="approve_days" v-if="applyForm.approve_type === '0'">
            <InputNumber v-model="applyForm.approve_days" :min="1" :max="365" placeholder="请输入延期天数" :style="{width: '100%'}" />
          </FormItem>
        </Form>
        <div class="modal-footer">
          <Button @click="handleApplyCancel">取消</Button>
          <Button type="primary" :loading="applyModal.loading" @click="handleApplySubmit">确定</Button>
        </div>
      </Modal>
    </div>
  </template>
  <script>
  import {
    deleteFollowUpRecords,
    insertFollowUpRecords,
    updateFollowUpRecords,
    selectFollowUpRecordsList,
    uploadFile,
    findEventLogByOfficeStatusList,
    updateEventAcceptance,
    insertEventFlowLog,
    selectOfficeList,
    insertEventFlowLogAssignment,
    findEventLogByCreateList,
    selectCityList,
    selectDictList, selectJuniorList
  } from '@/api/contradiction.js'
  import { insertEventApprove } from '@/api/approval'
  import { datetime2str, date2str } from '@/api/eventlist.js'
  export default {
    name: 'register',
    data () {
      return {
        modalKey: 1,
        ruleValidate: {
          recordTime: [
            { required: true, message: '必选', type: 'date', trigger: 'change' }
          ],
          // satisfactionLevel: [{ required: true, message: '必填', trigger: 'change' }],
          recordLog: [{ required: true, message: '必填', trigger: 'blur' }],
          opinions: [{ required: true, message: '必填', trigger: 'blur' }]
        },
        addObj: {
          id: '',
          eventCode: '',
          recordTime: '',
          satisfactionLevel: 0,
          recordLog: '',
          opinions: '',
          col5: ''
        },
        title: '',
        peopleLog: {
          dataColumns: [
            { type: 'index', title: '序号', align: 'center', width: '80' },
            { title: '回访时间', key: 'recordTime', align: 'center' },
            { title: '满意度 ', slot: 'satisfactionLevel', align: 'center' },
            {
              title: '操作',
              slot: 'action',
              fixed: 'right',
              align: 'center',
              width: '210'
            }
          ],
          dataList: [],
          show: false,
          detailShow: false,
          info: {},
          confirmButton: false,
          tableLoading: false,
          operate_type: ''
        },
        userId: '',
        token: '',
        backInfo: {},
        lowerModal: false,
        lowerForm: {},
        lowerList: [],
        confirmTtile: 'dfsaf',
        modal1: false,
        modal2: false,
        dataParam2: {},
        fpOfficeList: [],
        logResult_show: false,
        dataParam: {},
        isShowMore: true,
        searchInfo: {},
        columns: [
          { type: 'index', title: '序号', align: 'center', width: '80px' },
          { title: '部门受理状况', slot: 'status', align: 'center', width: '110px' },
          // { title: '部门受理状况', slot: 'eventStatus', align: 'center', width: '100px' },
          { title: '矛盾事件进度', slot: 'logTypeNew', align: 'center', width: '110px' },
          // { title: '矛盾来源', slot: 'eventSource', align: 'center', width: '100px' },
          {
            title: '纠纷编号',
            key: 'eventCode',
            align: 'center',
            width: '160px'
          },
          // { title: '化解状态', key: 'eventCode', align: 'center', width: '160px' }, // 后台未返回
          {
            title: '超时提示',
            slot: 'isEarlyWarning',
            align: 'center',
            width: '90px'
          },
          {
            title: '风险等级',
            slot: 'riskLevel',
            align: 'center',
            width: '140px'
          },
          // {
          //   title: '预计办结时间',
          //   key: 'termTime',
          //   align: 'center',
          //   width: '150px'
          // },
          // { title: '重点矛盾', slot: 'isPointEvent', align: 'center', width: '90px' },
          {
            title: '纠纷大类',
            key: 'eventCategoryId',
            align: 'center',
            width: '150px'
          },
          {
            title: '纠纷小类',
            key: 'eventTypeId',
            align: 'center',
            width: '200px'
          },
          {
            title: '风险因子个数',
            slot: 'riskName',
            align: 'center',
            width: '120px'
          },
          {
            title: '风险因子名称',
            key: 'riskName',
            align: 'center',
            width: '200px'
          },

          {
            title: '是否涉众',
            slot: 'is_involve_everyone',
            align: 'center',
            width: '150px'
          },
          {
            title: '涉众人数范围',
            slot: 'is_involve_everyone_count',
            align: 'center',
            width: '150px'
          },
          {
            title: '回访预警',
            slot: 'warningLight',
            align: 'center',
            width: '90px'
          },
          {
            title: '回访状态',
            slot: 'warningState',
            align: 'center',
            width: '100px'
          },
          {
            title: '纠纷发生时间',
            key: 'occurrenceTime',
            align: 'center',
            width: '150px'
          },

          {
            title: '纠纷描述',
            key: 'disputeDescription',
            align: 'center',
            width: '200px'
          },
          {
            title: '纠纷发生地',
            slot: 'occurrenceAddress',
            align: 'center',
            width: '140px'
          },
          { title: '详细地址', key: 'address', align: 'center', width: '140px' },
          {
            title: '上报人',
            key: 'reportingName',
            align: 'center',
            width: '90px'
          },
          {
            title: '上报单位',
            key: 'reportingUnit',
            align: 'center',
            width: '100px'
          },
          {
            title: '操作',
            slot: 'action',
            fixed: 'right',
            align: 'center',
            width: '600'
          }
        ],
        dataList: [],
        params: {
          pageNo: 1,
          pageSize: 10,
          totalRecord: 0,
          eventType: '2'
        },
        type: '',
        url: '',
        list_url: '',
        dictData: {
          list1: [],
          list2: []
        },
        areaData: {
          list1: [],
          list2: [],
          list3: [],
          list4: []
        },
        applyModal: {
          visible: false,
          title: '申请',
          loading: false
        },
        applyForm: {
          event_id: '',
          approve_type: '',
          approve_desc: '',
          approve_days: null
        },
        applyRules: {
          approve_desc: [
            { required: true, message: '请输入申请原因', trigger: 'blur' }
          ],
          approve_days: [
            {
              required: true,
              message: '请输入延期天数',
              trigger: 'change',
              validator: (rule, value, callback) => {
                if (this.applyForm.approve_type === '0') {
                  if (!value) {
                    callback(new Error('请输入延期天数'))
                  } else if (value < 1 || value > 365) {
                    callback(new Error('延期天数必须在1-365天之间'))
                  } else {
                    callback()
                  }
                } else {
                  callback()
                }
              }
            }
          ]
        },
        currentUserId: ''
      }
    },
    mounted () {
      this.type = this.$route.query.type
      if (this.type === '1') {
        this.columns[2].slot = 'logType'
      } else {
        this.columns[2].slot = 'logTypeNew'
      }
      this.list_url =
        this.type === '1'
          ? findEventLogByCreateList
          : findEventLogByOfficeStatusList
      this.getList()
      this.getDictList('1')
      this.getCityData('1')
      this.getLowerData()
      this.currentUserId = this.serverUserInfo.id
      // if (this.serverUserInfo.name.indexOf('网格员') !== -1) {
      //   // 此账号是网格员账号
      //   this.columns.splice(6, 1)
      // }
    },
    methods: {
      getLowerData () {
        selectJuniorList().then((res) => {
          if (res.data.errcode === 0) {
            this.lowerList = res.data.data
            return
          }
          this.$Message.error(res.errmsg)
        })
      },
      // 上传图片前转base64
      beforeUpload (file) {
        let imgObj = {}
        const reader = new FileReader()
        reader.onload = (e) => {
          imgObj.url = e.target.result
          this.imgArr.push(imgObj)
        }
        reader.readAsDataURL(file)
        let formdata = new FormData()
        formdata.append('file', file)
        formdata.append('fileName', file.name)
        let form = {
          business_type: 'jlEvent'
        }
        formdata.append('json', JSON.stringify(form))
        uploadFile(formdata, form).then((res) => {
          // let len = this.imgArr.length
          // this.imgArr[len - 1]['uuid'] = res.data.data.uuid
          // this.urlList.push(res.data.data)
        })
      },
      peopleLogConfirm () {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            if (this.title === '新增回访记录') {
              // 新增
              insertFollowUpRecords({
                ...this.addObj,
                recordTime: date2str(this.addObj.recordTime)
              }).then((ret) => {
                if (ret.data.errcode === 0) {
                  this.$Message.success('新增成功')
                  this.peopleLog.detailShow = false
                  this.getZFLogList(this.addObj.eventCode)
                  this.$refs['form'].resetFields()
                  return
                }
                this.$Message.error(ret.data.errmsg)
              })
            } else if (this.title === '修改回访记录') {
              // 修改
              updateFollowUpRecords({
                ...this.addObj,
                recordTime: date2str(this.addObj.recordTime)
              }).then((ret) => {
                if (ret.data.errcode === 0) {
                  this.$Message.success('修改成功')
                  this.peopleLog.detailShow = false
                  this.$refs['form'].resetFields()
                  this.getZFLogList(this.addObj.eventCode)
                  return
                }
                this.$Message.error(ret.data.errmsg)
              })
            }
          }
        })
      },
      detailPeopleLog (row) {
        this.title = '回访记录详情'
        this.peopleLog.detailShow = true
        this.addObj.opinions = row.opinions
        this.addObj.recordTime = row.recordTime
        this.addObj.satisfactionLevel = row.satisfactionLevel
        this.addObj.recordLog = row.recordLog
        this.addObj.disabled = true
      },
      updatePeopleLog (row) {
        this.title = '修改回访记录'
        this.peopleLog.detailShow = true
        this.addObj.id = row.id
        this.addObj.eventCode = row.eventCode
        this.addObj.opinions = row.opinions
        this.addObj.recordTime = row.recordTime
        this.addObj.satisfactionLevel = row.satisfactionLevel
        this.addObj.recordLog = row.recordLog
      },
      removePeopleLog (row) {
        this.$Modal.confirm({
          title: '确认删除？',
          loading: true,
          onOk: () => {
            // TODO
            deleteFollowUpRecords({ id: row.id }).then((ret) => {
              if (ret.data.errcode === 0) {
                this.$Modal.remove()
                this.getZFLogList(this.addObj.eventCode)
                this.$Message.success({
                  content: '删除成功！'
                })
              } else {
                this.$Modal.remove()
                this.$Message.error({
                  content: '删除失败\n' + ret.data.errmsg
                })
              }
            })
          }
        })
      },
      createPeopleLog () {
        this.title = '新增回访记录'
        this.peopleLog.detailShow = true
        this.addObj.id = ''
        this.addObj.opinions = ''
        this.addObj.recordTime = ''
        this.addObj.satisfactionLevel = 0
        this.addObj.recordLog = ''
      },
      evaluation (row) {
        // getCardNoById({ id: e.id }).then(res => {
        //   if (res.data.errcode === 0) {
        //     this.cardnoWJM = res.data.data.cardno
        //     this.zfListId = e.id
        //     this.getZFLogList()
        //   } else {
        //     this.$Notice.error({ title: '查询失败！', desc: res.data.errmsg })
        //   }
        // })
        this.addObj.eventCode = row.eventCode
        this.getZFLogList(row.eventCode)
      },
      getZFLogList (eventCode) {
        // this.peopleLog.tableLoading = true
        selectFollowUpRecordsList({ eventCode }).then((ret) => {
          if (ret.data.errcode === 0) {
            this.peopleLog.tableLoading = false
            this.peopleLog.dataList = ret.data.data
            this.peopleLog.show = true
          } else {
            this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
          }
        })
      },
      getDictList (level, id, eventTypeId) {
        selectDictList({ type: 'event_category', parent_id: id }).then((res) => {
          if (res.data.errcode === 0) {
            this.dictData['list' + level] = res.data.data
            if (eventTypeId) {
              this.dictData.list2.forEach((element) => {
                if (eventTypeId === element.label) {
                  this.formInline.eventTypeId = element.value
                }
              })
            }
            return
          }
          this.$Message.error(res.errmsg)
        })
      },
      getCityData (level, id) {
        selectCityList({ parent_id: id }).then((res) => {
          if (res.data.errcode === 0) {
            this.areaData['list' + level] = res.data.data
            return
          }
          this.$Message.error(res.errmsg)
        })
      },
      clearDispute (res) {
        // 清空纠纷大类
        console.log(res, 'dddddd')
        this.$nextTick(() => {
          // clearable后会直接把searchInfo里的该字段删除掉
          this.$set(this.searchInfo, 'eventCategoryId', '')
          this.$set(this.searchInfo, res, res === 'info' ? '{}' : '')
        })
      },
      changeDispute (item) {
        this.searchInfo.eventCategoryId = JSON.parse(item).value
        this.getDictList('2', JSON.parse(item).id)
      },
      changeArea (level, parent_id) {
        if (level > 1 && !parent_id) {
          this.areaData['list' + level] = []
          let list = ['', 'cityId', 'areaId', 'streetId', 'communityId']
          for (let i = level; i < list.length; i++) {
            this.$set(this.searchInfo, list[i], '')
          }
          return
        }
        this.getCityData(level, parent_id)
      },
      getList (item) {
        if (item) {
          this.params = Object.assign(this.params, item)
          if (this.params.occurrenceTimeStart) {
            this.params.occurrenceTimeStart = datetime2str(
              this.params.occurrenceTimeStart
            )
          }
          if (this.params.occurrenceTimeEnd) {
            this.params.occurrenceTimeEnd = datetime2str(
              this.params.occurrenceTimeEnd
            )
          }
          if (this.params.resolveTimeStart) {
            this.params.resolveTimeStart = datetime2str(
              this.params.resolveTimeStart
            )
          }
          if (this.params.resolveTimeEnd) {
            this.params.resolveTimeEnd = datetime2str(this.params.resolveTimeEnd)
          }
        }
        this.list_url(this.params).then((res) => {
          if (res.data.errcode === 0) {
            let tempArr = res.data.data.results
            this.dataList = res.data.data.results
            let status1 = []
            let status2 = []
            let status3 = []
            let others = []
            tempArr.forEach((item) => {
              switch (item.status) {
                case '1':
                  status1.push(item)
                  break
                case '2':
                  status2.push(item)
                  break
                case '3':
                  status3.push(item)
                  break
                default:
                  others.push(item)
                  break
              }
            })
            status1.sort(
              (a, b) => new Date(b.occurrenceTime) - new Date(a.occurrenceTime)
            )
            status2.sort(
              (a, b) => new Date(b.occurrenceTime) - new Date(a.occurrenceTime)
            )
            status3.sort(
              (a, b) => new Date(b.occurrenceTime) - new Date(a.occurrenceTime)
            )
            this.dataList = [...status1, ...status2, ...status3, ...others]
            // TODO 测试用
            // this.dataList.map((item, index) => {
            //   // 判断index是奇数还是偶数
            //   if (index % 2 === 0) {
            //     // item.col1 = false
            //     item.col2 = 1
            //   } else {
            //     // item.col1 = true
            //     item.col2 = 2
            //   }
            // })
            this.params.totalRecord = res.data.data.totalRecord
          }
        })
      },
      size (pageSize) {
        this.params.pageSize = pageSize
        this.changePageNo()
      },
      changePageNo (pageNo) {
        this.params.pageNo = pageNo
        this.getList(this.params)
      },
      searchData () {
        this.params.pageNo = 1  // 重置页码为1
        this.getList(this.searchInfo)
      },
      getInfo (row, level) {
        // 详情接口
        this.$router.push({
          name: 'contradictionRegisterAdd',
          params: {
            what: 'edit',
            id: row.id,
            level: level,
            isShowInfo:true,
            type: this.type
          }
        })
      },
      banjie (row, level) {
        // 点击办结跳转到详情页面，增加核查内容录入框(只有网格员有办结按钮)
        console.log(this.type)
        this.$router.push({
          name: 'contradictionRegisterAdd',
          params: {
            what: 'edit',
            id: row.id,
            level: level,
            type: this.type,
            status: row.status,
            wgyBj: true
          }
        })
        // let data = {
        //   id: e.id,
        //   isSpecialTasks: e.isSpecialTasks,
        //   status: e.status,
        //   flowVersion: e.flowVersion,
        //   flowId: e.flowId,
        //   logType: '2'
        // }
        // updateEventCompletion(data).then(ret => {
        //   if (ret.data.errcode === 0) {
        //     this.$Message.success('操作成功')
        //     this.getList()
        //     return
        //   }
        //   this.$Message.error(ret.data.errmsg)
        // })
      },
      acceptance (row) {
        // 受理
        console.log('手里')
        this.logResult_show = false
        this.url = updateEventAcceptance
        this.dataParam = {
          id: row.id,
          eventId: row.eventId,
          riskLevel: row.riskLevel
        }
        this.formParams = {}
        this.confirmTtile = '确定受理该事项吗？'
        this.modal1 = true
      },
      report (row) {
        // 上报跳转到详情页进行风险等级和办结期限编辑
        // this.url = insertEventFlowLog
        // this.logResult_show = false
        // this.dataParam = {
        //   isSpecialTasks: '2',
        //   id: row.id,
        //   flowVersion: row.flowVersion,
        //   status: row.status,
        //   flowId: row.flowId,
        //   logType: row.logType
        // }
        // this.formParams = {}
        // this.confirmTtile = '确定上报该事项吗？'
        // this.modal1 = true
        let whatValue = 'edit'
        // if (row.createBy === this.currentUserId) {
        //   whatValue = 'editRegister'
        // }
        this.$router.push({
          name: 'contradictionRegisterAdd',
          params: {
            what: whatValue,
            id: row.id,
            // level: level,
            type: this.type,
            risk: true
          }
        })
      },
      lowerFaction (row) {
        this.url = insertEventFlowLog
        this.dataParam = {
          isSpecialTasks: '2',
          id: row.id,
          eventId: row.eventId,
          flowVersion: row.flowVersion,
          riskLevel: row.riskLevel,
          status: row.status,
          flowId: row.flowId,
          logType: '6',
        }
        this.formParams = {}
        this.confirmTtile = '确定下派此数据吗？'
        this.lowerModal = true
      },
      save () {
        // 提示确定按钮
        console.log('save', this.dataParam)
        this.url(this.dataParam).then((res) => {
          if (res.data.errcode === 0) {
            this.$Message.success('操作成功')
            this.modal1 = false
            this.getList()
            return
          }
          this.$Message.error(res.data.errmsg)
        })
      },
      saveLower() {
        if(!this.lowerForm.crossOfficeId){
          this.$Message.error('请选择下派机构!')
          return;
        }
        if(!this.lowerForm.logResult){
          this.$Message.error('请填写下派原因!')
          return;
        }
        this.dataParam.crossOfficeId = this.lowerForm.crossOfficeId
        this.dataParam.logResult = this.lowerForm.logResult
        this.url(this.dataParam).then((res) => {
          if (res.data.errcode === 0) {
            this.$Message.success('操作成功')
            this.lowerModal = false
            this.lowerForm = {}
            this.getList()
            return
          }
          this.$Message.error(res.data.errmsg)
        })
      },
      chuzhi (row, level, disposeFlag) {
        let data = {
          id: row.id
        }
        updateEventAcceptance(data).then((ret) => {
          if (ret.data.errcode === 0) {
            this.$router.push({
              name: 'contradictionRegisterAdd',
              params: {
                what: 'edit',
                id: row.id,
                level: level,
                type: this.type,
                dispose: disposeFlag
              }
            })
          }
        })
      },
      fenpai (row) {
        this.selectOfficeList(row)
        this.modal2 = true
        this.dataParam2 = {
          flowId: row.flowId,
          status: row.status,
          id: row.id,
          eventId: row.eventId,
          flowVersion: row.flowVersion,
          riskLevel: row.riskLevel,
          logType: '3',
          logResult: '',
          officeIdList: []
        }
      },
      fenpaiok () {
        insertEventFlowLogAssignment(this.dataParam2).then((res) => {
          if (res.data.errcode === 0) {
            this.$Message.success('成功')
            this.modal2 = false
            this.getList()
            return
          }
          this.$Message.error(res.data.errmsg)
        })
      },
      selectOfficeList (item) {
        // this.params = Object.assign(this.params, item)
        let param = {
          event_id: item.eventId
        }
        selectOfficeList(param).then((res) => {
          if (res.data.errcode === 0) {
            this.fpOfficeList = res.data.data
          }
        })
      },
      returnBack (row) {
        this.url = insertEventFlowLog
        this.logResult_show = true
        this.dataParam = {
          isSpecialTasks: '2',
          id: row.id,
          eventId: row.eventId,
          flowVersion: row.flowVersion,
          riskLevel: row.riskLevel,
          status: row.status,
          flowId: row.flowId,
          logType: '4'
        }
        this.formParams = {}
        this.confirmTtile = '确定退回此数据吗？'
        this.modal1 = true
      },
      handleApply (row, approve_type) {
        this.applyModal.visible = true
        this.applyForm.event_id = row.eventId
        this.applyForm.approve_type = approve_type
        this.applyForm.approve_desc = ''
        this.applyForm.approve_days = null
      },
      handleApplyCancel () {
        this.applyModal.visible = false
        this.$refs.applyForm.resetFields()
      },
      async handleApplySubmit () {
        this.applyModal.loading = true
        try {
          // 先进行表单验证
          const valid = await this.$refs.applyForm.validate()
          if (!valid) {
            this.applyModal.loading = false
            return
          }

          const params = {
            event_id: this.applyForm.event_id,
            approve_type: this.applyForm.approve_type,
            approve_desc: this.applyForm.approve_desc
          }

          // 如果是延期申请，添加延期天数
          if (this.applyForm.approve_type === '0') {
            params.approve_days = this.applyForm.approve_days
          }

          const res = await insertEventApprove(params)
          if (res.data.errcode === 0) {
            this.$Message.success('申请提交成功')
            this.applyModal.visible = false
            this.getList() // 刷新列表
          } else {
            this.$Message.error(res.data.errmsg || '申请提交失败')
          }
        } catch (error) {
          console.error('申请提交失败:', error)
          this.$Message.error('申请提交失败')
        } finally {
          this.applyModal.loading = false
        }
      },
      handleEdit (row) {
        this.$router.push({
          name: 'contradictionRegisterAdd',
          params: {
            what: 'editRegister',
            id: row.id,
            level: this.type === '3' ? 'street' : this.type === '2' ? 'community' : 'grid',
            type: this.type
          },
          query: {
            type: 'add'
          }
        })
      }
    },
    computed: {
      serverUserInfo () {
        return this.$store.state.user.severUserInfo
      }
    }
  }
  </script>
  <style scoped lang="less">
  .contradiction-div {
    padding: 10px;
    .search-div {
      float: left;
      width: 100%;
      padding: 15px 30px 15px 15px;
      // min-height: 200px;
      border: 1px solid skyblue;
      border-radius: 5px;
      background-color: #f6fdfd;
      margin-bottom: 15px;
    }
  }
  .mb10 {
    margin-bottom: 10px;
  }
  .mt8 {
    margin-top: 8px;
  }
  .mr15 {
    margin-right: 15px;
  }
  .mr5 {
    margin-right: 5px;
  }
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .flex-div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .circle-div1 {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: red;
  }
  .circle-div2 {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: orange;
  }
  .circle-div3 {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: green;
  }
  .show-more {
    margin-top: 5px;
    cursor: pointer;
  }
  .level-option-img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-bottom: 3px;
  }
  .modal-footer {
    text-align: right;
    margin-top: 20px;
  }
  .modal-footer .ivu-btn {
    margin-left: 8px;
  }
  </style>
