<template>
  <div class="contradiction-div">
    <div class="head-title">重点人触发历史</div>
    <div class="search-div">
      <div style="width:90%;float: left;">
        <Row class="mb10">
          <Col span="8">
            <span>身份证号码：</span>
            <Input style="width: 70%;" clearable v-model="searchInfo.cardno"/>
          </Col>
          <Col span="8">
            <span>姓名：</span>
            <Input style="width: 70%;" clearable v-model="searchInfo.name"/>
          </Col>
           <Col span="8">
            <span>触发时间：</span>
            <DatePicker style="width: 70%;" type="daterange" v-model="dateRange" format="yyyy-MM-dd"
                        placeholder="选择日期范围" clearable/>
          </Col>
          <!-- <Col span="8">
            <span>联系电话：</span>
            <Input style="width: 70%;" clearable v-model="searchInfo.tel"/>
          </Col> -->
        </Row>
        <!-- <Row class="mb10"> -->

          <!--          <Col span="16">-->
          <!--            <span>重点人员类别：</span>-->
          <!--            <Select style="width: 81%;" multiple v-model="user_types" :clearable="true">-->
          <!--              <Option value="1">刑满释放人员</Option>-->
          <!--              <Option value="2">严重精神障碍患者</Option>-->
          <!--              <Option value="3">"三失一偏"人员</Option>-->
          <!--              <Option value="4">涉重点涉法涉诉类矛盾人员</Option>-->
          <!--              <Option value="5">涉重点信访事项人员</Option>-->
          <!--            </Select>-->
          <!--          </Col>-->
        <!-- </Row> -->
      </div>
      <div style="width:10%;float: left;">
        <Row>
          <Col span="12">
            <Button type="primary" @click="searchData">搜索</Button>
          </Col>
          <Col span="12">
            <Button type="primary" @click="resert">重置</Button>
          </Col>
        </Row>
      </div>
    </div>
    <Table stripe :columns="columns" :data="dataList">
      <template slot-scope="{row, index}" slot="name">
        <div style="">{{ row.name }}</div>
      </template>
      <template slot-scope="{row, index}" slot="cardno">
        <div style="">{{ row.cardno }}</div>
      </template>
      <template slot-scope="{row, index}" slot="user_type">
        <div v-if="row.user_type">
          <span v-for="(item, index) in row.user_type.split('|')" :key="index">
            <Tag v-if="item === '1'" color="blue">刑满释放人员</Tag>
            <Tag v-if="item === '2'" color="green">严重精神障碍患者</Tag>
            <Tag v-if="item === '3'" color="orange">"三失一偏"人员</Tag>
            <Tag v-if="item === '4'" color="red">涉重点涉法涉诉类矛盾人员</Tag>
            <Tag v-if="item === '5'" color="purple">涉重点信访事项人员</Tag>
          </span>
        </div>
      </template>
      <template slot-scope="{row, index}" slot="action">
        <Button type="primary" @click="getInfo(row)">矛盾详情</Button>
      </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="modal" width="1000" title="触发矛盾详情">
      <Table stripe :columns="columns1" :data="eventList">
        <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="event_source">
          <div v-if="row.event_source == '1'">pc端</div>
          <div v-else-if="row.event_source == '2'">app端</div>
          <div v-else-if="row.event_source == '3'">第三方对接</div>
        </template>
        <template slot-scope="{ row, index }" slot="is_early_warning">
          <div class="flex-div">
            <div class="circle-div3" v-if="row.is_early_warning == '1'"></div>
            <div class="circle-div2" v-if="row.is_early_warning == '3'"></div>
            <div class="circle-div1" v-if="row.is_early_warning == '4'"></div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="risk_level">
          <div class="flex-div">
            <div v-if="row.risk_level == '一般矛盾纠纷'">
              <img class="level-option-img" src="@/assets/images/warning4.png" alt="">
              <span style="padding-left: 10px;">一般矛盾纠纷</span>
            </div>
            <div v-if="row.risk_level == '复杂矛盾纠纷'">
              <img class="level-option-img" src="@/assets/images/warning5.png" alt="">
              <span style="padding-left: 10px;">复杂矛盾纠纷</span>
            </div>
            <div v-if="row.risk_level == '重大矛盾纠纷'">
              <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="occurrence_address">
          <span>{{ row.city }}{{ row.area }}{{ row.street }}{{ row.community }}</span>
        </template>
        <template slot-scope="{row, index}" slot="action">
          <Button type="primary" class="mr5" @click="getEventInfo(row)">详情</Button>
        </template>
      </Table>
      <Page class="page_style" :total="params1.totalRecord" :current="params1.pageNo"
            :page-size="params1.pageSize" @on-change="changePageNo1" show-total show-sizer
            @on-page-size-change="size1"/>
    </Modal>
  </div>
</template>

<script>
import {
  getTriggerEventHistory, findTriggerEventIdList
} from '@/api/contradiction.js'
import { desensitizationIDCard } from '@/libs/tools.js'
import { date2str } from '@/api/eventlist'

export default {
  name: 'keyTriggerHistoryList',
  data () {
    return {
      user_types: [],
      dateRange: [],
      searchInfo: {},
      columns: [
        { type: 'index', title: '序号', align: 'center', width: '80px' },
        { title: '姓名', slot: 'name', align: 'center' },
        { title: '身份证号码', slot: 'cardno', align: 'center' },
        {
          title: '触发时间',
          key: 'triggerTime',
          align: 'center',
          render: (h, params) => {
            return h('span', this.formatDate(params.row.triggerTime))
          }
        },
        { title: '触发数量', key: 'triggerCount', align: 'center' },
        { title: '操作', slot: 'action', align: 'center' }
      ],
      dataList: [],
      eventList: [],
      modal: false,
      columns1: [
        { type: 'index', fixed: 'left', title: '序号', align: 'center', width: '80px' },
        { title: '矛盾状态', slot: 'status', align: 'center', width: '100px' },
        { title: '矛盾来源', slot: 'event_source', align: 'center', width: '100px' },
        { title: '纠纷编号', key: 'event_code', align: 'center', width: '160px' },
        { title: '超时提示', slot: 'is_early_warning', align: 'center', width: '90px' },
        { title: '风险等级', slot: 'risk_level', align: 'center', width: '140px' },
        { title: '预计办结时间', key: 'term_time', align: 'center', width: '150px' },
        { title: '纠纷大类', key: 'event_category_id', align: 'center', width: '90px' },
        { title: '纠纷小类', key: 'event_type_id', align: 'center', width: '200px' },
        { title: '纠纷发生时间', key: 'occurrence_time', align: 'center', width: '150px' },
        { title: '纠纷描述', key: 'dispute_description', align: 'center', width: '200px' },
        { title: '纠纷发生地', slot: 'occurrence_address', align: 'center', width: '140px' },
        { title: '详细地址', key: 'address', align: 'center', width: '140px' },
        { title: '上报人', key: 'reporting_name', align: 'center', width: '90px' },
        { title: '上报单位', key: 'reporting_unit', align: 'center', width: '100px' },
        { title: '操作', fixed: 'right', slot: 'action', align: 'center', width: '100px' }
      ],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      params1: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        trigger_event_id: ''
      },
      currentId: ''
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    resert () {
      this.searchInfo.cardno = ''
      this.searchInfo.name = ''
      this.searchInfo.tel = ''
      this.searchInfo.trigger_num = ''
      this.dateRange = []
      this.params.startTime = ''
      this.params.endTime = ''
      this.params.pageNo = 1
      this.params.pageSize = 10
      this.searchData()
    },
    desensitizationIDCard (idCard) {
      return desensitizationIDCard(idCard)
    },
    // 获取重点人触发历史列表
    getList (item) {
      // 处理搜索条件
      const params = { ...this.params }
      if (item) {
        Object.assign(params, item)
      }

      // 处理日期范围
      if (this.dateRange && this.dateRange.length === 2) {
        params.startTime = date2str(this.dateRange[0])
        params.endTime = date2str(this.dateRange[1])
      }

      // 处理人员类别
      if (this.user_types && this.user_types.length > 0) {
        params.user_type = this.user_types.join('|')
      }

      // 调用接口获取数据
      getTriggerEventHistory(params).then(res => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data.results || []
          this.params.totalRecord = res.data.data.totalRecord || 0
        } else {
          this.$Message.error(res.data.errmsg || '获取数据失败')
        }
      }).catch(error => {
        console.error('获取重点人触发历史列表失败', error)
        this.$Message.error('获取数据失败')
      })
    },
    // 分页相关方法
    size (pageSize) {
      this.params.pageSize = pageSize
      this.getList()
    },
    changePageNo (pageNo) {
      this.params.pageNo = pageNo || 1
      this.getList()
    },
    // 搜索
    searchData () {
      this.params.pageNo = 1
      this.getList(this.searchInfo)
    },
    // 查看矛盾详情
    getInfo (item) {
      this.params1.pageNo = 1
      this.params1.pageSize = 10
      this.modal = true
      this.currentId = item.triggerEventId
      this.getEventList()
    },
    // 获取矛盾列表
    getEventList () {
      this.params1.trigger_event_id = this.currentId
      findTriggerEventIdList(this.params1).then(res => {
        if (res.data.errcode === 0) {
          this.eventList = res.data.data.results || []
          this.params1.totalRecord = res.data.data.totalRecord || 0
        } else {
          this.$Message.error(res.data.errmsg || '获取矛盾列表失败')
        }
      }).catch(error => {
        console.error('获取矛盾列表失败', error)
        this.$Message.error('获取矛盾列表失败')
      })
    },
    // 矛盾列表分页
    size1 (pageSize) {
      this.params1.pageSize = pageSize
      this.changePageNo1()
    },
    changePageNo1 (pageNo) {
      this.params1.pageNo = pageNo || 1
      this.getEventList()
    },
    // 查看矛盾详情
    getEventInfo (row) {
      // 获取用户权限等级对应的参数
      const grade = this.serverUserInfo.company_grade

      // 设置 level 映射关系：2=省, 3=市, 4=区, 5=街道, 6=社区
      let level = 'street' // 默认街道
      if (grade === '2') level = 'province'
      else if (grade === '3') level = 'city'
      else if (grade === '4') level = 'area'
      else if (grade === '5') level = 'street'
      else if (grade === '6') level = 'community'

      // 设置 type 映射关系：网格事件列表=1, 社区事件列表=2, 街道=3
      let type = '3' // 默认街道
      if (grade === '2' || grade === '3' || grade === '4') type = '1' // 省市区级用网格事件列表
      else if (grade === '6') type = '2' // 社区用社区事件列表
      else type = '3' // 其他用街道

      this.$router.push({
        name: 'contradictionRegisterAdd',
        params: {
          what: 'edit',
          id: row.id,
          level: level,
          type: type
        }
      })
    },
    formatDate (dateStr) {
      if (!dateStr) return '-'

      let date
      // 处理时间戳
      if (typeof dateStr === 'number') {
        date = new Date(dateStr)
      } else {
        // 处理字符串日期
        date = new Date(dateStr)
      }

      // 检查日期是否有效
      if (isNaN(date.getTime())) return dateStr

      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')

      return `${year}-${month}-${day}`
    }
  },
  computed: {
    serverUserInfo () {
      return this.$store.state.user.severUserInfo
    }
  }
}
</script>

<style scoped lang="less">
.contradiction-div {
  padding: 10px;

  .head-title {
    font-size: 18px;
    font-weight: bold;
    padding: 10px 0;
  }

  .search-div {
    float: left;
    width: 100%;
    padding: 15px 30px 15px 15px;
    border: 1px solid skyblue;
    border-radius: 5px;
    background-color: #f6fdfd;
    margin-bottom: 15px;
  }

  .mb10 {
    margin-bottom: 10px;
  }

  .search-input {
    width: 50%;
  }

  .page_style {
    margin-top: 10px;
    text-align: right;
  }

  .flex-div {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .circle-div1 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ed4014;
  }

  .circle-div2 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff9900;
  }

  .circle-div3 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2d8cf0;
  }

  .level-option-img {
    width: 16px;
    height: 16px;
  }

  .mr5 {
    margin-right: 5px;
  }
}
</style>
