<template>
  <div class="contradiction-div">
    <div class="search-div">
      <div style="width: 90%">
        <Row class="mb10">
          <Col span="8">
            <span>人员姓名：</span>
            <Input
              clearable
              style="width: 70%"
              v-model="searchInfo.event_user_name"
              placeholder="请输入"
            />
          </Col>
          <Col span="8">
            <span>人员身份证：</span>
            <Input
              clearable
              style="width: 70%"
              v-model="searchInfo.event_cardno"
              placeholder="请输入"
            />
          </Col>
          <Col span="2">
            <Button type="primary" @click="searchData">查询</Button>
          </Col>
          <Col span="2">
            <Button type="primary" @click="revert">重置</Button>
          </Col>
        </Row>
      </div>
    </div>
    <Table stripe :columns="columns" :data="dataList">
      <template slot-scope="{ row, index }" slot="action">
        <div class="flex-div">
          <Button @click="updateData(row)" type="info" class="mr5">详情</Button>
<!--          <Button @click="removeData(row)" type="error" 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"/>
    <Modal v-model="modal1" :title="title" width="1000">
      <Form ref="form" :model="addObj" :rules="ruleValidate" :label-width="150">
        <div v-for="(item,index) in addObj" :key="index">
          <Row :gutter="16">
            <Col span="12">
              <FormItem label="纠纷编号"  style="">
                <Input type="text" disabled v-model="item.event_code" placeholder=""></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="纠纷大类"  style="">
                <Input type="text" disabled v-model="item.event_category_id_dict" placeholder=""></Input>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col span="12">
              <FormItem label="纠纷小类"  style="">
                <Input type="text" disabled v-model="item.event_type_id_dict" placeholder=""></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="创建人"  style="">
                <Input type="text" disabled v-model="item.create_by" placeholder=""></Input>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col span="12">
              <FormItem label="创建时间"  style="">
                <Input type="text" disabled v-model="item.create_time" placeholder=""></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="社区"  style="">
                <Input type="text" disabled v-model="item.community_id" placeholder=""></Input>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col span="12">
              <FormItem label="地址"  style="">
                <Input type="text" disabled v-model="item.address" placeholder=""></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="纠纷描述"  style="">
                <Input type="textarea" disabled v-model="item.dispute_description" placeholder=""></Input>
              </FormItem>
            </Col>
          </Row>
          <Row style="display: flex;justify-content: flex-end;">
            <Button type="primary" class="mr5" @click="getInfo(item, 'contradiction')">详情</Button>
            <Button @click="removeData(item)" type="error" class="mr5">删除</Button>
          </Row>
          <Divider />
        </div>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="modal1 = false">取消</Button>
        <Button type="primary" size="large" @click="modal1 = false">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  selectEventRepeatbleList, updateEventRepeatbleInfo, eventRepeatbleInfoList
} from '@/api/contradiction.js'
// import { datetime2str } from '@/api/eventlist.js'
export default {
  name: 'register',
  data () {
    return {
      title: '',
      ruleValidate: {
        sort: [
          { required: true, message: '必填', trigger: 'blur' }
        ]
      },
      addObj: [],
      modal1: false,
      dataParam: {},
      searchInfo: {},
      columns: [
        { type: 'index', title: '序号', align: 'center', width: '80px' },
        {
          title: '人员姓名',
          key: 'event_user_name',
          align: 'center'
          // width: '160px'
        },
        {
          title: '人员身份证',
          key: 'event_cardno',
          align: 'center'
          // width: '160px'
        },
        {
          title: '纠纷大类',
          key: 'event_category_id_dict',
          align: 'center'
        },
        {
          title: '纠纷小类',
          key: 'event_type_id_dict',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          align: 'center',
          width: '250'
        }
      ],
      dataList: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        eventType: '2'
      },
      type: '',
      url: '',
      list_url: '',
      dictData: {
        list1: [],
        list2: []
      },
      areaData: {
        list1: [],
        list2: [],
        list3: [],
        list4: []
      }
    }
  },
  mounted () {
    this.list_url = selectEventRepeatbleList
    this.getList()
  },
  methods: {
    revert () {
      this.searchInfo.event_user_name = ''
      this.searchInfo.event_cardno = ''
      this.params.pageNo = 1
      this.params.pageSize = 10
      this.searchData()
    },
    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,
          level: level,
          type: this.type
        }
      })
    },
    size (pageSize) {
      this.params.pageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.params.pageNo = pageNo
      this.getList(this.params)
    },
    updateData (row) {
      this.title = '详情'
      eventRepeatbleInfoList({ event_category_id: row.event_category_id, event_type_id: row.event_type_id, event_cardno: row.event_cardno }).then(ret => {
        if (ret.data.errcode === 0) {
          this.addObj = ret.data.data
          this.modal1 = true
        } else {
        }
      })
    },
    removeData (row) {
      this.$Modal.confirm({
        title: '确认删除？',
        loading: true,
        onOk: () => {
          this.deleteArea(row)
        }
      })
    },
    deleteArea (row) {
      console.log(row, 'row')
      updateEventRepeatbleInfo({ id: row.id, del_flag: '1' }).then(ret => {
        if (ret.data.errcode === 0) {
          console.log(row, 'row')
          eventRepeatbleInfoList({ event_category_id: row.event_category_id, event_type_id: row.event_type_id, event_cardno: row.event_cardno }).then(ret => {
            if (ret.data.errcode === 0) {
              this.addObj = ret.data.data
              this.$Message.success({
                content: '删除成功！'
              })
              this.$Modal.remove()
            } else {
            }
          })
        } else {
          this.$Modal.remove()
          this.$Message.error({
            content: '删除失败\n' + ret.data.errmsg
          })
        }
      })
    },
    getList () {
      this.list_url({ ...this.searchInfo, ...this.params }).then((res) => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data.results
          this.params.totalRecord = res.data.data.totalRecord
        }
      })
    },
    searchData () {
      this.getList(this.searchInfo)
    }
  },
  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;
    // min-height: 200px;
    border: 1px solid skyblue;
    border-radius: 5px;
    background-color: #f6fdfd;
    margin-bottom: 15px;
  }
}
.page_style {
  margin-top: 10px;
  text-align: right;
}
.mb10 {
  // margin-bottom: 10px;
}
.mb20 {
  margin-bottom: 20px;
}
.mt8 {
  margin-top: 8px;
}
.mr15 {
  margin-right: 15px;
}
.mr5 {
  margin-right: 5px;
}
.flex-div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>
