<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: 70%;" v-model="searchInfo.status" :clearable="true" >
                <Option value="">全部</Option>
                <Option value="1">已办结</Option>
                <Option value="2">处理中 </Option>
            </Select>
          </Col>
          <Col span="6">
            <span>事件编号：</span>
            <Input style="width: 70%;" v-model="searchInfo.event_code" />
          </Col>
          <Col span="6">
            <span>重点事件：</span>
            <Select style="width: 70%;" v-model="searchInfo.is_point_event" :clearable="true">
                <Option value="1">是</Option>
                <Option value="2">否 </Option>
            </Select>
          </Col>
          <Col span="6">
            <span>事件大类：</span>
            <Select v-model="searchInfo.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>
        </Row>
        <Row class="mb10">
          <Col span="6">
            <span>事件小类：</span>
            <Select v-model="searchInfo.event_type_id" :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.is_resolve" :clearable="true" >
                <Option value="1">是</Option>
                <Option value="2">否 </Option>
            </Select>
          </Col>
          <Col span="6">
            <span>化解是否满意：</span>
            <Select style="width: 61%;" v-model="searchInfo.is_satisfaction" :clearable="true" >
                <Option value="1">是</Option>
                <Option value="2">否 </Option>
            </Select>
          </Col>
          <Col span="6">
            <span>发生事件地市：</span>
            <Select v-model="searchInfo.city_id" @on-change="changeArea('2',searchInfo.city_id)" :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.area_id" @on-change="changeArea('3',searchInfo.area_id)" :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.street_id" @on-change="changeArea('4',searchInfo.street_id)" :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.community_id" 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.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" :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.event_user_name" placeholder="请输入当事人1姓名" />
          </Col>
          <Col span="6">
            <span>身份证号码：</span>
            <Input style="width: 65%;" 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" :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.occurrence_time_end" :clearable="true" style="width: 90%;" placeholder="请选择事件发生结束时间"></DatePicker>
          </Col>
          <Col span="6">
            <span>事件化解时间：</span>
            <DatePicker type="datetime" v-model="searchInfo.resolve_time_start" 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.resolve_time_end" style="width: 100%;" placeholder="请选择事件化解结束时间" :clearable="true" ></DatePicker>
          </Col>
        </Row>
      </div>
      <div style="width:10%;float: left;">
        <Row>
          <Col span="12">
            <Button type="primary" @click="searchData">搜索</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" :data="dataList">
      <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="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" @click="getInfo(row, 'contradiction')">详情</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>
      <Input v-if="log_result_show"  v-model="dataParam.log_result" style="margin-top:10px;" type="textarea" placeholder="请输入退回原因" />
      <div slot="footer">
        <Button type="default" @click="modal1 = false">取消</Button>
        <Button type="primary" @click="save">确定</Button>
      </div>
    </Modal>
    <Modal v-model="modal2" title="提示">
      <Form :model="dataParam2" :label-width="120">
        <FormItem label="部门选择：">
          <Select v-model="dataParam2.officeIdList" multiple>
            <Option v-for="(item,index) in fpOfficeList" :key="index" :value="item.id">{{item.name}}</Option>
          </Select>
        </FormItem>
        <FormItem label="办理说明：">
          <Input v-model="dataParam2.log_result" style="margin-top:10px;" type="textarea" placeholder="请输入办理说明" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="default" @click="modal2 = false">取消</Button>
        <Button type="primary" @click="fenpaiok">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  findEventPageList,
  updateEventAcceptance,
  insertEventFlowLog,
  selectOfficeList,
  insertEventFlowLogAssignment,
  selectCityList, selectDictList
} from '@/api/contradiction.js'
export default {
  name: 'contradictionList',
  data () {
    return {
      backInfo: {},
      confirmTtile: 'dfsaf',
      modal1: false,
      modal2: false,
      dataParam2: {},
      fpOfficeList: [],
      log_result_show: 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,
        event_type: '1'
      },
      type: this.$route.query.type,
      url: '',
      list_url: '',
      dictData: {
        list1: [],
        list2: []
      },
      areaData: {
        list1: [],
        list2: [],
        list3: [],
        list4: []
      }
    }
  },
  mounted () {
    this.list_url = findEventPageList
    this.getlist()
    this.getDictList('1')
    this.getCityData('1')
  },
  methods: {
    getDictList (level, id, event_type_id) {
      selectDictList({ type: 'event_category', parent_id: id }).then(res => {
        if (res.data.errcode === 0) {
          this.dictData['list' + level] = res.data.data
          if (event_type_id) {
            this.dictData.list2.forEach(element => {
              if (event_type_id === element.label) {
                this.formInline.event_type_id = element.value
              }
            })
          }
          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
          console.log(this.areaData.list1)
          return
        }
        this.$Message.error(res.errmsg)
      })
    },
    changeDispute (item) {
      this.searchInfo.event_category_id = JSON.parse(item).value
      this.getDictList('2', JSON.parse(item).id)
    },
    changeArea (level, parent_id) {
      this.getCityData(level, parent_id)
    },
    getlist (item) {
      if (item) {
        this.params = Object.assign(this.params, item)
      }
      this.list_url(this.params).then(res => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data.results
          this.params.totalRecord = res.data.data.totalRecord
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    getList (item) {
      console.log('调用列表接口')
      if (item) {
        this.params = Object.assign(this.params, item)
      }
      console.log('fafasd')
      this.list_url(this.params).then(res => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data.results
          this.params.totalRecord = res.data.data.totalRecord
          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)
      this.getlist(this.params)
    },
    searchData () {
      this.getlist(this.searchInfo)
      // this.
    },
    getInfo (row, level) { // 详情接口
      this.$router.push({
        name: 'incidentEventAdd',
        params: {
          what: 'edit',
          id: row.id,
          level: level,
          type: this.type
        }
      })
    },
    banjie (e) {
      console.log(e, 'banjie')
      let data = {
        id: e.id,
        is_special_tasks: e.is_special_tasks,
        status: e.status,
        flow_version: e.flow_version,
        flow_id: e.flow_id,
        log_type: '2'
      }
      console.log(data)
      insertEventFlowLog(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.getlist()
          return
        }
        this.$Message.error(ret.data.errmsg)
      })
    },
    acceptance (row) { // 受理
      console.log('手里')
      this.log_result_show = false
      this.url = updateEventAcceptance
      this.dataParam = {
        id: row.id,
        event_id: row.event_id
      }
      this.formParams = {}
      this.confirmTtile = '确定受理该事项吗？'
      this.modal1 = true
    },
    report (row) { // 上报
      this.url = insertEventFlowLog
      this.log_result_show = false
      this.dataParam = {
        is_special_tasks: '2',
        id: row.id,
        flow_version: row.flow_version,
        status: row.status,
        flow_id: row.flow_id,
        log_type: row.log_type
      }
      this.formParams = {}
      this.confirmTtile = '确定上报该事项吗？'
      this.modal1 = true
    },
    save () { // 提示确定按钮
      console.log('save')
      this.url(this.dataParam).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success('操作成功')
          this.modal1 = false
          this.getlist()
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    chuzhi (row, level) {
      let data = {
        id: row.id
      }
      updateEventAcceptance(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$router.push({
            name: 'contradictionRegisterAdd',
            params: { what: 'edit', id: row.event_id, level: level }
          })
        }
      })
    },
    fenpai (row) {
      this.selectOfficeList()
      this.modal2 = true
      this.dataParam2 = {
        flow_id: row.flow_id,
        status: row.status,
        id: row.id,
        event_id: row.event_id,
        flow_version: row.flow_version,
        log_type: row.log_type,
        log_result: '',
        officeIdList: []
      }
    },
    fenpaiok () {
      insertEventFlowLogAssignment(this.dataParam2).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success('成功')
          this.modal2 = false
          this.getlist()
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    selectOfficeList (item) {
      this.params = Object.assign(this.params, item)
      selectOfficeList().then(res => {
        if (res.data.errcode === 0) {
          this.fpOfficeList = res.data.data
        }
      })
    },
    returnBack (row) {
      this.url = insertEventFlowLog
      this.log_result_show = true
      this.dataParam = {
        is_special_tasks: '2',
        id: row.id,
        event_id: row.event_id,
        flow_version: row.flow_version,
        status: row.status,
        flow_id: row.flow_id,
        log_type: '4'
      }
      this.formParams = {}
      this.confirmTtile = '确定退回此数据吗？'
      this.modal1 = true
    }
  },
  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;
      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;
  }
</style>
