<template>
<div>
  <div class="contradiction-div">
    <div class="search-div">
      <Row class="mb10">
        <Col span="6">
          <span>信息来源：</span>
          <Select style="width: 70%;" v-model="searchInfo.select">
            <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.event_code" />
        </Col>
        <Col span="5">
          <span>重点事件：</span>
          <Select style="width: 70%;" v-model="searchInfo.is_point_event">
            <Option value="1">是</Option>
            <Option value="2">否 </Option>
          </Select>
        </Col>
        <Col span="5">
          <span>重点人员类别：</span>
          <Select style="width: 65%;" v-model="searchInfo.select">
            <Option value="1">是</Option>
            <Option value="2">否 </Option>
          </Select>
        </Col>
        <Col span="1">
          <Button type="primary" @click="searchData">搜索</Button>
        </Col>
        <Col span="1">
          <div @click="isShowMore = !isShowMore" class="show-more">
            {{ isShowMore ?'更多':'收起'}}
            <Icon :type="isShowMore ?'ios-arrow-down':'ios-arrow-up'"></Icon>
          </div>
        </Col>
      </Row>
      <Row class="mb10">
        <Col span="6">
          <span>纠纷大类：</span>
          <Select style="width: 70%;" v-model="searchInfo.event_category_id">
            <Option value="1">网格员上报</Option>
            <Option value="2">委办局推送 </Option>
            <Option value="3">上级督办</Option>
          </Select>
        </Col>
        <Col span="6">
          <span>纠纷小类：</span>
          <Select style="width: 70%;" v-model="searchInfo.event_type_id">
            <Option value="1">是</Option>
            <Option value="2">否 </Option>
          </Select>
        </Col>
        <Col span="6">
          <span>是否化解：</span>
          <Select style="width: 70%;" v-model="searchInfo.is_resolve">
            <Option value="1">是</Option>
            <Option value="2">否 </Option>
          </Select>
        </Col>
        <Col span="5">
          <span>化解是否满意：</span>
          <Select style="width: 65%;" v-model="searchInfo.is_satisfaction">
            <Option value="1">是</Option>
            <Option value="2">否 </Option>
          </Select>
        </Col>
      </Row>
      <Row class="mb10">
        <Col span="6">
          <span>发生纠纷地：</span>
          <Select style="width: 66%;" v-model="searchInfo.city_id" placeholder="请选择市">
            <Option value="1">网格员上报</Option>
            <Option value="2">委办局推送 </Option>
            <Option value="3">上级督办</Option>
          </Select>
        </Col>
        <Col span="4" class="mr15">
          <Select style="width: 100%;" v-model="searchInfo.area_id" placeholder="请选择区">
            <Option value="1">网格员上报</Option>
            <Option value="2">委办局推送 </Option>
            <Option value="3">上级督办</Option>
          </Select>
        </Col>
        <Col span="4" class="mr15">
          <Select style="width: 100%;" v-model="searchInfo.street_id" placeholder="请选择街道">
            <Option value="1">网格员上报</Option>
            <Option value="2">委办局推送 </Option>
            <Option value="3">上级督办</Option>
          </Select>
        </Col>
        <Col span="4" class="mr15">
          <Select style="width: 100%;" v-model="searchInfo.community_id" placeholder="请选择社区">
            <Option value="1">网格员上报</Option>
            <Option value="2">委办局推送 </Option>
            <Option value="3">上级督办</Option>
          </Select>
        </Col>
        <Col span="4" class="mr15">
          <Input style="width: 100%;" v-model="searchInfo.garden_id" placeholder="请输入网格" />
        </Col>
      </Row>
      <Row class="mb10" v-if="!isShowMore">
        <Col span="6">
          <span>是否超时：</span>
          <Select style="width: 70%;" v-model="searchInfo.is_early_warning">
            <Option value="1">正常</Option>
            <Option value="3">预警 </Option>
            <Option value="4">告警</Option>
          </Select>
        </Col>
        <Col span="6">
          <span>当事人：</span>
          <Input style="width: 70%;" v-model="searchInfo.event_user_name" placeholder="请输入当事人1姓名" />
        </Col>
        <Col span="6">
          <span>身份证号码：</span>
          <Input style="width: 70%;" v-model="searchInfo.event_cardno" placeholder="请输入身份证号码" />
        </Col>
        <Col span="6">
          <span>联系电话：</span>
          <Input style="width: 70%;" v-model="searchInfo.event_tel" placeholder="请输入联系电话" />
        </Col>
      </Row>
      <Row v-if="!isShowMore">
        <Col span="6">
          <span>纠纷发生时间：</span>
          <DatePicker type="datetime" v-model="searchInfo.occurrence_time_start" style="width: 60%;" placeholder="请选择纠纷发生开始时间"></DatePicker>
        </Col>
        <Col span="1" class="mt8">
          <span>至</span>
        </Col>
        <Col span="5">
          <DatePicker type="datetime" v-model="searchInfo.ccurrence_time_end" style="width: 90%;" placeholder="请选择纠纷发生结束时间"></DatePicker>
        </Col>
        <Col span="6">
          <span>纠纷化解时间：</span>
          <DatePicker type="datetime" v-model="searchInfo.resolve_time_start" style="width: 60%;" placeholder="请选择纠纷化解开始时间"></DatePicker>
        </Col>
        <Col span="1" class="mt8">
          <span>至</span>
        </Col>
        <Col span="4">
          <DatePicker type="datetime" v-model="searchInfo.occurrence_time_end" style="width: 100%;" placeholder="请选择纠纷化解结束时间"></DatePicker>
        </Col>
      </Row>
    </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="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-div3" v-if="row.is_early_warning == '4'"></div>
        </div>
      </template>
      <template slot-scope="{ row, index }" slot="is_point_event">
        <div v-if="row.is_point_event == '1'">是</div>
        <div v-else-if="row.is_point_event == '2'">否</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">
        <div class="flex-div">
          <!-- <Button type="primary" class="mr5">查看</Button> -->
          <Button type="primary" class="mr5" @click="getInfo(row)">查看</Button>
          <Button type="primary" class="mr5" @click="chuzhi(row)">处置</Button>
          <Button type="primary" class="mr5" @click="report(row)">上报</Button>
          <Button type="primary" class="mr5" @click="tuihui(row)">退回</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>
      <div slot="footer">
        <Button type="default" @click="modal1 = false">取消</Button>
        <Button type="primary" @click="save">确定</Button>
      </div>
    </Modal>
  </div>
</div>
</template>
<script>
import { findEventLogByOfficeStatusList, updateEventAcceptance } from '@/api/contradiction'

export default {
  name: 'streetList',
  data () {
    return {
      confirmTtile: 'dfsaf',
      modal1: false,
      dataParam: {},
      isShowMore: true,
      searchInfo: {},
      columns: [
        { type: 'index', 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: '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: '操作', slot: 'action', fixed: 'right', align: 'center', width: '300px' }

      ],
      dataList: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      }
    }
  },
  methods: {
    getList (item) {
      this.params = Object.assign(this.params, item)
      findEventLogByOfficeStatusList(this.params).then(res => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data.results
          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.getList(this.searchInfo)
    },
    getInfo (row) { // 详情接口
      this.$router.push({
        name: 'contradictionRegisterAdd',
        params: { what: 'edit', id: row.event_id, level: 'street' }
      })
    },
    acceptance (row) { // 受理
      this.url = updateEventAcceptance
      this.dataParam = {
        id: row.id,
        event_id: row.event_id
      }
      this.formParams = {}
      this.confirmTtile = '确定受理该事项吗？'
      this.modal1 = true
    },
    report (row) { // 上报

    },
    chuzhi (row) {
      this.$router.push({
        name: 'contradictionRegisterAdd',
        params: { what: 'edit', id: row.event_id, level: 'street' }
      })
    },
    tuihui (e) {

    },
    save () { // 提示确定按钮
      this.url(this.dataParam).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success('成功')
          this.getList()
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    }
  },
  mounted () {
    this.getList()
  }
}
</script>
<style scoped lang="less">
.contradiction-div {
  padding: 10px;
  .search-div {
    width: 100%;
    padding: 15px 30px 15px 15px;
    // min-height: 200px;
    border: 1px solid skyblue;
    background-color: azure;
    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;
}
</style>
