<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.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>
              <Option value="0">已办结</Option>
            </Select>
          </Col>
          <!--          <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" placeholder="请输入"/>
          </Col>
          <Col span="6">
            <span>纠纷大类：</span>
            <Select
              v-model="searchInfo.info"
              @on-change="changeDispute(searchInfo.info)"
              @on-clear="clearDispute('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.status" :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>
          <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>
        </Row>
        <Row class="mb10">
          <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="请输入当事人1姓名"/>
          </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" class="mb10">
          <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="请选择纠纷化解开始时间" :clearable="true"></DatePicker>
          </Col>
          <Col span="1" class="mt8">
            <span>至</span>
          </Col>
          <Col span="4">
            <DatePicker type="datetime" v-model="searchInfo.resolveTimeEnd" style="width: 100%;"
                        placeholder="请选择纠纷化解结束时间" :clearable="true"></DatePicker>
          </Col>
        </Row>
        <Row v-if="!isShowMore" class="mb10">
          <Col span="6">
            <span>创建时间：</span>
            <DatePicker v-model="searchInfo.createTimeStart" :clearable="true" placeholder="请选择纠纷发生开始时间"
                        style="width: 60%" type="datetime"></DatePicker>
          </Col>
          <Col class="mt8" span="1">
            <span>至</span>
          </Col>
          <Col span="5">
            <DatePicker v-model="searchInfo.createTimeEnd" :clearable="true" placeholder="请选择纠纷发生结束时间"
                        style="width: 90%" type="datetime"></DatePicker>
          </Col>
          <Col span="6">
            <span>化解方式：</span>
            <Select v-model="searchInfo.resolveWay" :clearable="true" placeholder="请选择化解方式" style="width: 70%">
              <Option value="1">人民调解</Option>
              <Option value="2">行政调解</Option>
              <Option value="3">司法调解</Option>
              <Option value="4">行业调解</Option>
              <Option value="5">仲裁</Option>
              <Option value="8">行政复议</Option>
              <Option value="9">行政裁决</Option>
              <Option value="10">法律监督</Option>
              <Option value="6">诉讼</Option>
              <Option value="11">信访三级办理</Option>
              <Option value="7">其他</Option>
            </Select>
          </Col>
        </Row>
        <Row class="mb10" style="margin-top: 10px;">
          <Col span="6">
            <span>是否涉众：</span>
            <Select
              style="width: 70%"
              v-model="searchInfo.is_involve_everyone"
              :clearable="true"
            >
              <Option value="1">是</Option>
              <Option value="0">否</Option>
            </Select>
          </Col>
          <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>

        </Row>
      </div>
      <div style="width:10%;float: left;">
        <Row>
          <Col span="12">
            <Button type="primary" @click="searchData" style="margin-right: 10px">搜索</Button>
          </Col>
          <Col span="12">
            <Button type="primary" @click="resert">重置</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" :loading="loading" :data="dataList">

      <!-- 风险因子名称-->
      <template slot-scope="{ row, index }" slot="riskNameText">
        <TableTextEllipsis :text="row.riskName" :lines="2"/>
      </template>

      <!-- 纠纷描述-->
      <template slot-scope="{ row, index }" slot="disputeDescriptionText">
        <TableTextEllipsis :text="row.disputeDescription" :lines="2"/>
      </template>

      <!-- 详细地址-->
      <template slot-scope="{ row, index }" slot="addressText">
        <TableTextEllipsis :text="row.address" :lines="2"/>
      </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="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="eventStatus">
        <div v-if="row.eventStatus == '1'">已处置</div>
        <div v-else-if="row.eventStatus == '2'">处理中</div>
      </template>
      <template slot-scope="{ row, index }" slot="logType">
        <div v-if="row.eventStatus !=='1'">
          <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.mineLatestLogTypeNew === '5'">横传</div>-->
          <div v-else-if="row.logType === '6'">已下派</div>
          <div v-else-if="row.logType === '0'">已办结</div>
        </div>
        <div v-if="row.eventStatus ==='1'">
          <div>已办结</div>
        </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'">300人以上</div>
      </template>
      <template slot-scope="{ row, index }" slot="col2">
        <div v-if="row.col2 == '1'">不涉及</div>
        <div v-else-if="row.col2 == '2'">未完成</div>
        <div v-else-if="row.col2 == '3'">已完成</div>
      </template>
      <template slot-scope="{ row, index }" slot="eventSource">
        <div v-if="row.eventSource == '1'">pc端</div>
        <div v-else-if="row.eventSource == '2'">app端</div>
        <div v-else-if="row.eventSource == '3'">第三方对接</div>
        <div v-else-if="row.eventSource == '4'">平安长春</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="isPointEvent">
        <div v-if="row.isPointEvent == '1'">是</div>
        <div v-else-if="row.isPointEvent == '2'">否</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="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
            v-if="row.completeTime && row.createBy === $store.state.user.severUserInfo.id"
            @click="evaluation(row)"
            type="info"
            class="mr5"
          >回访记录
          </Button
          >
          <Button type="primary" class="mr5" @click="getInfo(row, 'contradiction')">详情</Button>
          <Button type="error" v-if="row.deleteType=='1'" class="mr5" @click="del(row.id)">删除</Button>
          <Button type="error" v-if="$store.state.user.severUserInfo.loginName==='admin'" class="mr5"
                  @click="del(row.id)">admin专属删除
          </Button>
          <Button
            @click="getUrl(row)"
            type="success"
            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="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"
                :options="datePickerOptions"
                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"
                :maxlength="300"
              ></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"
                :maxlength="300"
              ></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" style="margin-left: 10px" :loading="applyModal.loading" @click="handleApplySubmit">确定
        </Button>
      </div>
    </Modal>
    <Modal title="一案一码" v-model="qrCodeModal" width="400" :mask-closable="false">
      <div id="printContent" style="width: 300px;height: 300px;margin-left: 35px;">
        <vueQr :text="qrCodeUrl" :margin="0" colorDark="black" colorLight="#fff" :size="300"></vueQr>
      </div>
      <div slot="footer">
        <Button style="margin-bottom: 7px" type="info" v-print="printDetail">
          打印
        </Button>
        <Button style="margin-bottom: 7px" @click="qrCodeModal = false">
          关闭
        </Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  deleteEvent, deleteFollowUpRecords,
  findEventAllList,
  insertFollowUpRecords,
  selectCityList,
  selectDictList,
  selectFollowUpRecordsList,
  updateFollowUpRecords,
  selectCreateByList
} from '@/api/contradiction.js'
import { date2str, datetime2str } from '@/api/eventlist'
import { insertEventApprove } from '@/api/approval'
import vueQr from 'vue-qr'

export default {
  name: 'contradictionList',
  components: {
    vueQr
  },
  data () {
    return {
      loading: false,
      dataParam: {},
      isShowMore: true,
      searchInfo: {
        createTime: ''
      },
      printDetail: {
        id: 'printContent',
        popTitle: '明细',
        extraCss: `
          @page {
            size: A4 portrait;
            margin: 10mm;
          }
          body {
            margin: 0;
            padding: 0;
          }
          .no-print {
            display: none !important;
          }
          .title {
            text-align: center !important;
            font-size: 18px !important;
            font-weight: bold !important;
            width: 100% !important;
            margin: 0 auto 10px !important;
            padding: 8px 0 !important;
          }
          .time-box {
            display: flex !important;
            justify-content: space-between !important;
            width: 100% !important;
            padding: 0 16px 5px !important;
            box-sizing: border-box !important;
          }
          .table-box {
            width: 100% !important;
            transform: scale(0.95);
            transform-origin: top center;
            page-break-inside: avoid;
            box-sizing: border-box !important;
            padding: 0 16px 5px !important;
          }
          .table-box .row-box .col-box-flexrow,
          .table-box .row-box .col-box-flexcol {
            border-color: #000000 !important;
            font-size: 12px !important;
          }
          .table-box .row-box {
            border-color: #000000 !important;
          }
          div {
            page-break-inside: avoid;
          }
        `,
        beforeOpenCallback () {
          console.log('打印窗口即将打开')
        },
        openCallback () {
          console.log('打印窗口已打开')
        },
        closeCallback () {
          console.log('打印窗口已关闭')
        }
      },
      qrCodeModal: false,
      qrCodeUrl: '',
      columns: [
        { type: 'index', title: '序号', align: 'center', width: '80px' },
        // { title: '部门受理状况', slot: 'status', align: 'center', width: '110px' },
        // { title: '部门受理状况', slot: 'eventStatus', align: 'center', width: '100px' },
        { title: '矛盾事件进度', slot: 'logType', align: 'center', width: '110px' },
        { title: '矛盾来源', slot: 'eventSource', align: 'center', width: '100px' },
        { title: '创建单位', key: 'createName', align: 'center', width: '150px' },
        { title: '纠纷编号', key: 'eventCode', align: 'center', width: '160px' },
        { title: '超时提示', slot: 'isEarlyWarning', align: 'center', width: '90px' },
        { title: '风险等级', slot: 'riskLevel', align: 'center', width: '140px' },
        // { title: '重点矛盾', slot: 'isPointEvent', align: 'center', width: '90px' },
        { title: '纠纷大类', key: 'eventCategoryId', align: 'center', width: '90px' },
        { title: '纠纷小类', key: 'eventTypeId', align: 'center', width: '90px' },
        {
          title: '风险因子个数',
          slot: 'riskName',
          align: 'center',
          width: '80px'
        },
        {
          title: '风险因子名称',
          slot: 'riskNameText',
          align: 'center',
          width: '140px'
        },

        {
          title: '是否涉众',
          slot: 'is_involve_everyone',
          align: 'center',
          width: '60px'
        },
        {
          title: '涉众人数范围',
          slot: 'is_involve_everyone_count',
          align: 'center',
          width: '80px'
        },
        {
          title: '回访预警',
          slot: 'warningLight',
          align: 'center',
          width: '90px'
        },
        {
          title: '回访状态',
          key: 'warningState',
          align: 'center',
          width: '100px'
        },
        { title: '纠纷发生时间', key: 'occurrenceTime', align: 'center', width: '150px' },
        {
          title: '纠纷描述',
          slot: 'disputeDescriptionText',
          align: 'center',
          width: '140px'
        },
        { title: '纠纷发生地', slot: 'occurrenceAddress', align: 'center', width: '200px' },
        {
          title: '详细地址',
          slot: 'addressText',
          align: 'center',
          width: '140px'
        },
        { title: '上报人', key: 'reportingName', align: 'center', width: '150px' },
        { title: '上报单位', key: 'reportingUnit', align: 'center', width: '150px' },
        { title: '操作', slot: 'action', fixed: 'right', align: 'center', width: '400px' }
      ],
      dataList: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        event_type: '2'
      },
      type: this.$route.query.type,
      url: '',
      createByList: [],
      list_url: '',
      dictData: {
        list1: [],
        list2: []
      },
      areaData: {
        list1: [],
        list2: [],
        list3: [],
        list4: []
      },
      currentCompleteTime: null,
      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: ''
      },
      modalKey: 1,
      title: '',
      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: ''
      },
      minDate: null,
      currentUserId: '',
      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()
              }
            }
          }
        ]
      }
    }
  },
  mounted () {
    const { createTime } = this.$route.query
    if (createTime) {
      this.searchInfo.createTime = createTime
    }
    this.list_url = findEventAllList
    this.getlist(this.searchInfo)
    this.getDictList('1')
    this.getCityData('1')
    if (this.$route.query.status) {
      this.searchInfo.status = this.$route.query.status
      this.searchData()
    }
    this.$forceUpdate()
    this.currentUserId = this.serverUserInfo.id

    selectCreateByList(null).then((ret) => {
      if (ret.data.errcode === 0) {
        this.createByList = ret.data.data
      }
    })
  },
  activated () {
    const { createTime, status } = this.$route.query
    this.searchInfo.createTime = createTime || ''
    this.searchInfo.status = status || ''
    this.list_url = findEventAllList
    this.getlist(this.searchInfo)
    this.$forceUpdate()
  },
  deactivated () {
    this.resert()
  },
  beforeDestroy () {
    this.resert()
  },
  methods: {
    getUrl (row) {
      this.qrCodeUrl = 'http://36.135.8.39:8088/#/dispute?toPhone=true&onlyRead=true&id=' + row.id
      console.log(this.qrCodeUrl, 'this.qrCodeUrl')
      this.qrCodeModal = true
    },
    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.addObj.disabled = false
      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.disabled = false
      this.addObj.id = ''
      this.addObj.opinions = ''
      this.addObj.recordTime = ''
      this.addObj.satisfactionLevel = 0
      this.addObj.recordLog = ''
      // 设置最小日期为completeTime之后
      this.minDate = this.currentCompleteTime ? new Date(this.currentCompleteTime) : null
    },
    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 })
      //   }
      // })
      // 获取当前行的completeTime字段
      this.currentCompleteTime = row.completeTime
      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 })
        }
      })
    },
    del (id) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定删除吗',
        loading: true,
        onOk: () => {
          deleteEvent({ id: id }).then(res => {
            if (res.data.errcode === 0) {
              this.searchData()
            }
            this.$Modal.remove()
            this.$Message.error(res.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
          return
        }
        this.$Message.error(res.errmsg)
      })
    },
    resert () {
      this.searchInfo.logType = ''
      this.searchInfo.eventCode = ''
      this.searchInfo.info = ''
      this.searchInfo.eventTypeId = ''
      this.searchInfo.isResolve = ''
      this.searchInfo.isSatisfaction = ''
      this.searchInfo.cityId = ''
      this.searchInfo.areaId = ''
      this.searchInfo.streetId = ''
      this.searchInfo.communityId = ''
      this.searchInfo.gardenId = ''
      this.searchInfo.isEarlyWarning = ''
      this.searchInfo.eventUserName = ''
      this.searchInfo.eventCardno = ''
      this.searchInfo.eventTel = ''
      this.searchInfo.occurrenceTimeStart = ''
      this.searchInfo.occurrenceTimeEnd = ''
      this.searchInfo.resolveTimeStart = ''
      this.searchInfo.resolveTimeEnd = ''
      this.searchInfo.createTimeStart = ''
      this.searchInfo.createTimeEnd = ''
      this.searchInfo.is_involve_everyone = ''
      this.searchInfo.is_involve_everyone_count = ''
      this.searchInfo.createTime = ''
      this.searchInfo.resolveWay = ''
      this.searchInfo.status = ''
      this.searchInfo.createBy = ''
      this.params.pageNo = 1
      this.params.pageSize = 10
      this.searchData()
    },
    getCityData (level, id) {
      selectCityList({ parent_id: id }).then(res => {
        if (res.data.errcode === 0) {
          this.areaData['list' + level] = res.data.data
          console.log(this.areaData.list1)
          return
        }
        this.$Message.error(res.errmsg)
      })
    },
    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) {
      this.loading = true
      if (item) {
        this.params = Object.assign(this.params, item)
        if (this.params.createTimeStart) {
          this.params.createTimeStart = datetime2str(this.params.createTimeStart)
        }
        if (this.params.createTimeEnd) {
          this.params.createTimeEnd = datetime2str(this.params.createTimeEnd)
        }
      }
      this.list_url(this.params).then(res => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data.results
          // 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
          this.loading = false
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    size (pageSize) {
      this.params.pageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.params.pageNo = pageNo
      this.getlist(this.params)
    },
    searchData () {
      this.params.pageNo = 1
      this.getlist(this.searchInfo)
      // this.
    },
    getInfo (row, level) { // 详情接口
      console.log('+++++this.type+++++')
      console.log(this.type)
      console.log('+++++this.type+++++')
      this.$router.push({
        name: 'contradictionRegisterAdd',
        params: {
          what: 'edit',
          id: row.id,
          level: level,
          type: this.type,
          isShowInfo: true, // 控制化解过程显隐
          isInfo: true
        }
      })
    },
    clearDispute (res) {
      this.$nextTick(() => {
        this.$set(this.searchInfo, 'eventCategoryId', '')
        this.$set(this.searchInfo, 'eventTypeId', '') // 清空小类
        this.$set(this.searchInfo, res, '') // 设为''
        this.dictData.list2 = [] // 清空小类下拉
      })
    },
    handleDateChange (v1) {
      this.searchInfo.createTime = v1
    },
    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
      }
    }
  },
  computed: {
    serverUserInfo () {
      return this.$store.state.user.severUserInfo
    },
    datePickerOptions () {
      const minDate = this.minDate
      if (minDate) {
        return {
          disabledDate (date) {
            console.info(date)
            console.info(minDate)
            return date && date < minDate
          }
        }
      }
      return {}
    }
  }
}
</script>
<style scoped lang="less">
.contradiction-div {
  padding: 10px;

  .search-div {
    width: 100%;
    padding: 15px 30px 15px 15px;
    float: left;
    // 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;
}
</style>
