<template>
  <div class="contradiction-div">
    <div class="head-title">群体性事件预警</div>
    <div class="search-div">
      <div style="width:100%;">
        <Row class="mb10">
          <Col span="6">
            <span>纠纷大类：</span>
            <Select v-model="searchInfo.eventCategoryId" @on-change="changeDispute(searchInfo.eventCategoryId)" :clearable="true" style="width:70%">
              <Option v-for="item in dictData.list1" :value="item.value" :key="item.id">{{ item.label }}</Option>
            </Select>
          </Col>
          <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.id">{{ item.label }}</Option>
            </Select>
          </Col>
          <!-- <Col span="6">
            <span>触发类：</span>
            <Select style="width: 70%;" v-model="searchInfo.triggerType">
              <Option value="1">风险因子</Option>
              <Option value="2">矛盾类型</Option>
            </Select>
          </Col> -->
          <Col span="6">
            <Button type="primary" @click="searchData">搜索</Button>
            <Button type="primary" @click="resert" style="margin-left: 10px;">重置</Button>
          </Col>
        </Row>
        <Row class="">
          <Alert v-if="alarmLevel ==='3'" type="warning">不同当事人涉及的矛盾纠纷大类、小类相同，且属于易引发群体性事件矛盾纠纷类型，矛盾纠纷发生地相同，发生时间跨度在30日内，并达到5—30次的。</Alert>
          <Alert v-if="alarmLevel ==='2'" type="warning">不同当事人涉及的矛盾纠纷大类、小类相同，且属于易引发群体性事件矛盾纠纷类型，矛盾纠纷发生地相同，发生时间跨度在30日内，并达到31—300次以上。</Alert>
          <Alert v-if="alarmLevel ==='1'" type="warning">不同当事人涉及的矛盾纠纷大类、小类相同，且属于易引发群体性事件的矛盾纠纷类型，矛盾纠纷发生地相同，发生时间跨度在30日内，并达到300次以上的。</Alert>
          <Alert v-if="status ==='1'" type="warning">不同当事人涉及的矛盾纠纷大类、小类相同，且属于易引发群体性事件的矛盾纠纷类型，矛盾纠纷发生地相同，发生时间跨度在30日内，并达到5次以上的。</Alert>
        </Row>
      </div>
    </div>
    <vxe-table  :data="dataList"  stripe show-overflow  size="small" resizable align="center" header-align="center">
      <vxe-column title="序号" align="center" type="seq"/>
      <vxe-column v-if="type === '4'" title="解除时间" align="center"  field="liftStatus"/>
      <vxe-column align="center" title="所属地区">
        <template v-slot="{ row }">
         {{ row.cityName }}{{ row.areaName }}
        </template>
      </vxe-column>
      <vxe-column title="纠纷大类" align="center"  field="eventCategoryName"/>
      <vxe-column title="纠纷小类" align="center" field="eventTypeName"/>
      <vxe-column title="触发次数" align="center" field="triggerCount"/>
      <vxe-column title="操作" align="center"  fixed="right" class-name="small-padding fixed-width">
        <template v-slot="{ row }">
          <Button type="primary" class="mr5" @click="getInfo(row)">详情</Button>
        </template>
      </vxe-column>
    </vxe-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="monthFocusList">
        <template slot-scope="{ row, index }" slot="status">
          <div v-if="row.status == '1'">已办结</div>
          <div v-else-if="row.status == '2'">受理中</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 {
  findEventTrigger,
  findTriggerEventIdListForTriggerList,
  selectDictList
  // findTriggerEventIdList
} from '@/api/contradiction.js'
import { desensitizationIDCard } from '@/libs/tools.js'
export default {
  name: 'register',
  data () {
    return {
      dictData: {
        list1: [],
        list2: []
      },
      user_types: [],
      searchInfo: {},
      dataList: [],
      monthFocusList: [],
      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: '重点矛盾', slot: 'is_point_event', align: 'center', width: '90px' },
        { 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' }
      ],
      status: '',
      alarmLevel: '',
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      params1: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        trigger_event_id: ''
      },
      id: '',
      type: ''
    }
  },
  mounted () {
    // 重点事 type:'0'   一级预警 type :'1'   二级预警 type :'2'   三级预警 type :'3'   重点事触发历史 type: '4'
    this.status = this.$route.query.type || ''
    this.alarmLevel = this.$route.query.alarmLevel || ''
    this.getList()
    this.getDictList('1')
  },
  watch: {
    // 监听路由参数变化
    '$route.query': {
      handler (newQuery) {
        // 更新status和alarmLevel
        this.status = newQuery.type || ''
        this.alarmLevel = newQuery.alarmLevel || ''
        // 重置页码
        this.params.pageNo = 1
        // 重新获取数据
        this.getList()
      },
      deep: true
    }
  },
  methods: {
    changeDispute (item) {
      this.searchInfo.eventCategoryId = item
      console.log('选中的值:', item)
      console.log('list1数据:', this.dictData.list1)
      const foundItem = this.dictData.list1.find(listItem => listItem.value === item)
      console.log('找到的项:', foundItem)
      if (foundItem) {
        this.getDictList('2', foundItem.id)
      } else {
        console.warn('未找到匹配的项')
      }
    },
    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)
      })
    },
    desensitizationIDCard (idCard) {
      return desensitizationIDCard(idCard)
    },
    getList (item) {
      // 构建基础请求参数
      let params = {
        pageNo: this.params.pageNo,
        pageSize: this.params.pageSize
      }
      // 合并搜索条件（如果有）
      if (Object.keys(this.searchInfo).length > 0) {
        Object.keys(this.searchInfo).forEach(key => {
          if (this.searchInfo[key] !== null && this.searchInfo[key] !== undefined && this.searchInfo[key] !== '') {
            params[key] = this.searchInfo[key]
          }
        })
      }
      // 如果路由中有status参数，则添加到请求参数中
      if (this.status) {
        params.status = this.status
      }
      // 如果路由中有alarmLevel参数，则添加到请求参数中
      if (this.alarmLevel) {
        params.alarmLevel = this.alarmLevel
        params.status = '1'
      }
      // 发送请求获取列表数据
      findEventTrigger(params).then(res => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data.results
          this.params.totalRecord = res.data.data.totalRecord
        } else {
          this.$Message.error(res.data.errmsg)
        }
      }).catch(err => {
        console.error('获取群体性事件预警数据失败:', err)
        this.$Message.error('获取数据失败')
      })
    },
    size (pageSize) {
      this.params.pageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.params.pageNo = pageNo
      this.getList(this.params)
    },
    searchData () {
      // 重置页码
      this.params.pageNo = 1
      // 调用getList方法，传入搜索条件
      this.getList()
    },
    resert () {
      this.searchInfo = {}
      this.params.pageNo = 1
      this.searchData()
    },
    getInfo (item) {
      this.params1.pageNo = 1
      this.params1.pageSize = 10
      this.modal = true
      this.id = item.id
      this.getEventList()
    },
    getEventList () {
      this.params1.eventTrigger = this.id
      console.log('++++++++++')
      console.log(this.params1)
      console.log('++++++++++')
      findTriggerEventIdListForTriggerList(this.params1).then(res => {
        if (res.data.errcode === 0) {
          this.monthFocusList = res.data.data.results
          this.params1.totalRecord = res.data.data.totalRecord
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    size1 (pageSize) {
      this.params1.pageSize = pageSize
      this.changePageNo1()
    },
    changePageNo1 (pageNo) {
      this.params1.pageNo = pageNo
      this.getEventList()
    },
    getEventInfo (row) {
      this.$router.push({
        name: 'contradictionRegisterAdd',
        params: {
          what: 'edit',
          id: row.id,
          level: '',
          type: this.type
        }
      })
    }
  },
  computed: {
    serverUserInfo () {
      return this.$store.state.user.severUserInfo
    }
  }
}
</script>
<style scoped lang="less">
.contradiction-div {
  padding: 10px;
  .search-div {
    width: 100%;
    padding: 15px 30px 15px 15px;
    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;
}
.level-option-img{
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-bottom: 3px;
}
.head-title{
  width: 100%;
  height: 35px;
  font-size: 16px;
  line-height: 30px;
}
</style>
