<template>
  <div class="contradiction-div">
    <div class="search-div">
      <div style="width:90%;">
        <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.eventCode" />
          </Col>
          <Col span="6">
            <span>重点矛盾：</span>
            <Select style="width: 70%;" v-model="searchInfo.isPointEvent" :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)" @on-clear="clearDispute" :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.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 style="width: 70%;" v-model="searchInfo.isResolve" :clearable="true" >
              <Option value="1">是</Option>
              <Option value="2">否 </Option>
            </Select>
          </Col>
          <Col span="6">
            <span>化解是否满意：</span>
            <Select style="width: 61%;" v-model="searchInfo.isSatisfaction" :clearable="true" >
              <Option value="1">是</Option>
              <Option value="2">否 </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>
            <Select v-model="searchInfo.streetId" @on-change="changeArea('4',searchInfo.streetId)" :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.communityId" 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.gardenId" placeholder="请输入网格" />
          </Col>
        </Row>
        <Row class="mb10" v-if="!isShowMore">
          <Col span="6">
            <span>是否超时：</span>
            <Select style="width: 70%;" v-model="searchInfo.isEarlyWarning" :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.eventUserName" placeholder="请输入当事人1姓名" />
          </Col>
          <Col span="6">
            <span>身份证号码：</span>
            <Input style="width: 65%;" v-model="searchInfo.eventCardno" placeholder="请输入身份证号码" />
          </Col>
          <Col span="6">
            <span>联系电话：</span>
            <Input style="width: 70%;" v-model="searchInfo.eventTel" placeholder="请输入联系电话" />
          </Col>
        </Row>
        <Row v-if="!isShowMore">
          <Col span="6">
            <span>纠纷发生时间：</span>
            <DatePicker type="datetime" v-model="searchInfo.occurrenceTimeStart" :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.occurrenceTimeEnd" :clearable="true" style="width: 90%;" placeholder="请选择纠纷发生结束时间"></DatePicker>
          </Col>
          <Col span="6">
            <span>纠纷化解时间：</span>
            <DatePicker type="datetime" v-model="searchInfo.resolveTimeStart" 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.resolveTimeEnd" style="width: 100%;" placeholder="请选择纠纷化解结束时间" :clearable="true" ></DatePicker>
          </Col>
        </Row>
        <Row class="">
          <Alert v-if="type ==='1'"  type="warning">矛盾纠纷事件存在4个以上风险因子。</Alert>
          <Alert v-if="type ==='0'" type="warning">矛盾纠纷事件存在3个及以上风险因子。</Alert>
          <Alert v-if="type ==='2'" type="warning">矛盾纠纷事件存在4个风险因子。</Alert>
          <Alert v-if="type ==='3'" type="warning">矛盾纠纷事件存在3个风险因子。</Alert>
        </Row>

      </div>
      <div style="width:10%;">
        <Row>
          <Col span="12">
            <Button type="primary" @click="searchData">搜索</Button>
          </Col>
          <Col span="12">
            <Button type="primary"  @click="resert">重置</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>
    <vxe-table  :data="dataList"  stripe show-overflow  size="small" resizable align="center" header-align="center">
      <vxe-column title="序号" align="center" width='80' type="seq"/>
      <vxe-column v-if="type === '4'" title="解除时间" align="center" width='100' field="liftStatus"/>
      <vxe-column title="矛盾状态" align="center" width='100' field="status">
      <template v-slot="{ row }">
        <div v-if="row.status == '1'">已办结</div>
        <div v-else-if="row.status == '2'">处理中</div>
      </template>
      </vxe-column>
      <vxe-column title="矛盾来源" align="center" width='100' field="eventSource">
        <template v-slot="{ row }">
          <div v-if="row.eventSource === '1'">网格员上报</div>
          <div v-else-if="row.eventSource === '2'">委办局推送</div>
          <div v-else-if="row.eventSource === '3'">上级督办</div>
        </template>
      </vxe-column>
      <vxe-column title="纠纷编号" align="center" width='160' field="eventCode"/>
      <vxe-column title="超时提示" align="center" width='90' field="isEarlyWarning">
        <template v-slot="{ row }">
            <div class="circle-div3" v-if="row.isEarlyWarning === '1'"></div>
            <div class="circle-div2" v-if="row.isEarlyWarning === '3'"></div>
            <div class="circle-div1" v-if="row.isEarlyWarning === '4'"></div>
        </template>
      </vxe-column>
      <vxe-column title="风险等级" align="center" width='140' field="riskLevel">
        <template v-slot="{ row }">
          <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>
        </template>
      </vxe-column>
      <vxe-column title="重点矛盾" align="center" width='160' field="isPointEvent">
        <template v-slot="{ row }">
          <div v-if="row.isPointEvent === '1'">是</div>
          <div v-else-if="row.isPointEvent === '2'">否</div>
        </template>
      </vxe-column>
      <vxe-column title="纠纷大类" align="center" width='90' field="eventCategoryId"/>
      <vxe-column title="纠纷小类" align="center" width='90' field="eventTypeId"/>
      <vxe-column title="风险因子个数" align="center" width='90' field="riskName">
        <template v-slot="{ row }">
          {{ row.riskName ? row.riskName.split(',').length : '' }}
        </template>
      </vxe-column>
      <vxe-column title="风险因子名称" align="center" width='90' field="riskName"/>
      <vxe-column title="回访预警" align="center" width='90' field="warningLight">
        <template v-slot="{ row }">
          <span v-if="row.warningLight === false"></span>
          <img v-else
               class="level-option-img"
               src="@/assets/images/warning6.png"
               alt=""
          />
        </template>
      </vxe-column>
      <vxe-column title="纠纷发生时间" align="center" width='90' field="occurrenceTime"/>
      <vxe-column title="纠纷描述" align="center" width='90' field="disputeDescription"/>
      <vxe-column title="纠纷发生地" align="center" width='90' field="occurrenceAddress">
        <template v-slot="{ row }">
          <span>{{row.city}}{{row.area}}{{row.street}}{{row.community}}</span>
        </template>
      </vxe-column>
      <vxe-column title="详细地址" align="center" width='90' field="address"/>
      <vxe-column title="上报人" align="center" width='90' field="reportingName"/>
      <vxe-column title="上报单位" align="center" width='90' field="reportingUnit"/>
      <vxe-column title="操作" align="center" width="300" fixed="right" class-name="small-padding fixed-width">
        <template v-slot="{ row }">
          <Button type="primary" class="mr5" @click="getInfo(row, 'contradiction')">详情</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"/>
  </div>
</template>
<script>
import {
  findEventRiskFactorPageList, selectCityList, selectDictList
} from '@/api/contradiction.js'
export default {
  name: 'contradictionList',
  data () {
    return {
      dataParam: {},
      isShowMore: true,
      searchInfo: {},
      dataList: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        event_type: '2'
      },
      type: '',
      status: '',
      url: '',
      list_url: '',
      dictData: {
        list1: [],
        list2: []
      },
      areaData: {
        list1: [],
        list2: [],
        list3: [],
        list4: []
      }
    }
  },
  mounted () {
    // 重点事 type:'0'   一级预警 type :'1'   二级预警 type :'2'   三级预警 type :'3'   重点事触发历史 type: '4'
    this.type = this.$route.query.type
    this.status = this.$route.query.status
    this.searchInfo.status = this.$route.query.status
    this.list_url = findEventRiskFactorPageList
    this.getlist()
    this.getDictList('1')
    this.getCityData('1')
  },
  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
          console.log(this.areaData.list1)
          return
        }
        this.$Message.error(res.errmsg)
      })
    },
    changeDispute (item) {
      this.searchInfo.eventCategoryId = JSON.parse(item).value
      this.getDictList('2', JSON.parse(item).id)
    },
    clearDispute () {
      // 清空纠纷大类相关数据
      this.searchInfo.info = ''
      this.searchInfo.eventCategoryId = ''
      this.searchInfo.eventTypeId = ''
      this.dictData.list2 = []
    },
    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) {
      let params = {
        pageNo: this.params.pageNo,
        pageSize: this.params.pageSize,
        alarmLevel: this.type
        // status: this.$route.query.status
      }
      // if (this.$route.query.status) {
      //   params.status = this.$route.query.status
      // }
      // 合并搜索条件（如果有）
      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]
          }
        })
      }
      this.list_url(params).then(res => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data.results
          // TODO 测试用
          this.dataList.map((item, index) => {
            // 判断index是奇数还是偶数
            if (index % 2 === 0) {
              // item.col1 = false
              item.col2 = 1
            } else {
              // item.col1 = true
              item.col2 = 2
            }
          })
          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)
    },
    resert () {
      this.searchInfo = {}
      this.params.pageNo = 1
      this.searchInfo.status = this.status || ''
      this.searchData()
    },
    searchData () {
      this.getlist(this.searchInfo)
      // this.
    },
    getInfo (row, level) { // 详情接口
      console.log('+++++this.type+++++')
      console.log(this.type)
      console.log('+++++this.type+++++')
      this.$router.push({
        name: 'contradictionRegisterAdd',
        params: {
          what: 'edit',
          id: row.id,
          isShowInfo: true, // 控制化解过程显隐
          isInfo: 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;
}
.level-option-img{
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-bottom: 3px;
}
</style>
