<template>
  <div class="contradiction-div">
    <div class="search-div">
      <div style="width: 90%; float: left">
        <Row class="mb10">
          <Col span="6">
            <span>纠纷编号：</span>
            <Input style="width: 70%" v-model="searchInfo.eventCode" />
          </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>
          <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
              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>
            <Input
              style="width: 74%"
              v-model="searchInfo.eventUserName"
              placeholder="请输入当事人姓名"
            />
          </Col>
          <Col span="6">
            <span>联系电话：</span>
            <Input
              style="width: 70%"
              v-model="searchInfo.eventTel"
              placeholder="请输入联系电话"
            />
          </Col>
          <Col span="6">
            <span>纠纷发生时间：</span>
            <DatePicker
              type="datetime"
              v-model="searchInfo.occurrenceTimeStart"
              :clearable="true"
              style="width: 60%"
              placeholder="请选择开始时间"
            ></DatePicker>
          </Col>
        </Row>
        <Row class="mb10">
          <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>
        </Row>
        <Row class="">
          <Alert v-if="alarmLevel ==='3'" type="warning">复杂矛盾纠纷或者重大矛盾纠纷超期预警提示达到5日以上。</Alert>
          <Alert v-else type="warning">复杂矛盾纠纷或者重大矛盾纠纷超期预警提示5天及以上。</Alert>
        </Row>
      </div>
      <div style="width: 10%; float: left">
        <Row>
          <Col span="12">
            <Button type="primary" @click="searchData">搜索</Button>
          </Col>
          <Col offset="2" span="10">
            <Button type="primary" @click="resetSearch">重置</Button>
          </Col>
        </Row>
      </div>
    </div>
    <Table stripe :columns="columns" :data="dataList">
      <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="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="action">
        <div class="flex-div">
          <Button
            @click="getInfo(row)"
            type="primary"
            class="mr5"
            >详情</Button
          >
<!--          <Button-->
<!--            @click="handleWarn(row)"-->
<!--            type="primary"-->
<!--            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"
    />
  </div>
</template>
<script>
import {
  findOverdueEventPageList,
  selectCityList,
  selectDictList
} from '@/api/contradiction.js'
import { datetime2str } from '@/api/eventlist.js'
export default {
  name: 'overdueEventWarn',
  data () {
    return {
      searchInfo: {},
      columns: [
        { type: 'index', title: '序号', align: 'center', width: '80px' },
        { title: '矛盾状态', slot: 'status', align: 'center', width: '100px' },
        {
          title: '纠纷编号',
          key: 'eventCode',
          align: 'center',
          width: '160px'
        },
        {
          title: '风险等级',
          slot: 'riskLevel',
          align: 'center',
          width: '140px'
        },
        {
          title: '纠纷大类',
          key: 'eventCategoryId',
          align: 'center',
          width: '140px'
        },
        {
          title: '纠纷小类',
          key: 'eventTypeId',
          align: 'center',
          width: '200px'
        },
        {
          title: '纠纷发生时间',
          key: 'occurrenceTime',
          align: 'center',
          width: '150px'
        },
        {
          title: '纠纷描述',
          key: 'disputeDescription',
          align: 'center',
          width: '200px'
        },
        {
          title: '纠纷发生地',
          slot: 'occurrenceAddress',
          align: 'center',
          width: '140px'
        },
        {
          title: '上报人',
          key: 'reportingName',
          align: 'center',
          width: '100px'
        },
        {
          title: '上报单位',
          key: 'reportingUnit',
          align: 'center',
          width: '120px'
        },
        {
          title: '超期天数',
          key: 'overdueDays',
          align: 'center',
          width: '100px'
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          align: 'center',
          width: '180px'
        }
      ],
      alarmLevel: '',
      status: '',
      dataList: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      dictData: {
        list1: [],
        list2: []
      },
      areaData: {
        list1: [],
        list2: [],
        list3: [],
        list4: []
      }
    }
  },
  mounted () {
    this.getList()
    this.getDictList('1')
    this.getCityData('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: {
    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)
      })
    },
    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) {
      // 清空纠纷大类
      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.$route.query.status) {
        this.params.status = this.$route.query.status
      }
      findOverdueEventPageList(this.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 || '获取数据失败')
        }
      })
    },
    size (pageSize) {
      this.params.pageSize = pageSize
      this.getList()
    },
    changePageNo (pageNo) {
      this.params.pageNo = pageNo
      this.getList()
    },
    searchData () {
      this.params.pageNo = 1 // 搜索时重置为第一页
      this.getList(this.searchInfo)
    },
    resetSearch () {
      this.searchInfo = {}
      this.params.pageNo = 1
      this.searchData()
    },
    getInfo (row) {
      // 跳转到详情页
      this.$router.push({
        name: 'contradictionRegisterAdd',
        params: {
          what: 'edit',
          id: row.id,
          level: 'street',
          type: '3'
        }
      })
    },
    handleWarn (row) {
      // 预警处置
      this.$router.push({
        path: `/contradiction/riskWarning/warnDisposal/${row.id}`,
        query: {
          eventId: row.eventId,
          type: 'overdue'
        }
      })
    }
  },
  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;
    border: 1px solid skyblue;
    border-radius: 5px;
    background-color: #f6fdfd;
    margin-bottom: 15px;
  }
}
.mb10 {
  margin-bottom: 10px;
}
.mt8 {
  margin-top: 8px;
}
.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;
}
.level-option-img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-bottom: 3px;
}
</style>
