<template>
  <div class="contradiction-div">
    <div class="search-div">
      <Form  :label-width="120">
          <Row>
            <Col span="6">
              <FormItem label="嫌疑人：">
                <Input v-model="searchInfo.suspect_name" placeholder="请输入嫌疑人姓名" />
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem label="嫌疑人身份证号码：">
                <Input v-model="searchInfo.suspect_cardno" placeholder="请输入嫌疑人身份证号码" />
              </FormItem>
            </Col>
            <Col span="5" offset="1">
              <Button type="primary" @click="reset">重置</Button>
              <Button type="primary" @click="searchData" style="margin-left: 10px;">查询</Button>
            </Col>
          </Row>
      </Form>
    </div>
    <div>
      <vxe-table align="center" :data="dataList" >
        <vxe-column type="seq"  title="序号"></vxe-column>
        <vxe-column field="suspect_name"  title="嫌疑人姓名"></vxe-column>
        <vxe-column field="suspect_cardno"  title="身份证号"></vxe-column>
        <vxe-column field="sex"  title="性别"></vxe-column>
        <vxe-column field="birthday"  title="出生日期"></vxe-column>
        <!--        <vxe-column field="edu_level"  title="文化程度"></vxe-column>-->
        <!--        <vxe-column field="career_situation"  title="职业情况"></vxe-column>-->
      </vxe-table>
    </div>

  </div>
</template>
<script>

import {
  getJlHomicideSuspectList
} from '@/api/murder-management.js'

// import { getInfoFromId } from '@/api/common.js'
// import axios from 'axios'
// import * as XLSX from 'xlsx'

export default {
  name: 'register',
  data () {
    return {
      searchInfo: {},
      dataList: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      }
    }
  },
  mounted () {
    this.list_url = getJlHomicideSuspectList
    this.getList()
  },
  methods: {
    reset () {
      this.searchInfo = {}
      this.params = {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      }
    },
    getList (item) {
      console.log('调用列表接口', item, this.params)
      if (item) {
        this.params = Object.assign(this.params, item)
      }
      console.log('fafasd', this.params)
      this.list_url(this.params).then(res => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data
          console.log(this.dataList, ' this.dataList')
          // 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)
    },
    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 0px 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;
  }
  // /deep/ input:disabled,textarea:disabled {
  //   opacity: 1;
  //   -webkit-text-fill-color: #515a6e;
  //   font-size: 14px;
  // }

  /* 修改被禁用的Select组件的文本颜色 */
  /deep/ .ivu-select-disabled .ivu-select-selected-value{
      color: #515a6e; /* 修改为你想要的颜色 */
  }
  // /deep/ .ivu-select-disabled .ivu-select-placeholder{
  //     color: #515a6e; /* 修改为你想要的颜色 */
  //     font-size: 14px;
  // }
  /deep/ .ivu-input-disabled{
  color: #515a6e !important; /* 修改为你想要的颜色 */
  }
</style>
