<template>
  <div class="contradiction-div">
    <div class="search-div">
      <Form :model="dataParam" :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="6">
              <FormItem label="命案发生时间：">
                <DatePicker type="datetimerange" v-model="searchInfo.incident_time" format="yyyy-MM-dd HH:mm" style="width: 100%;" placeholder="请选择命案发生时间"></DatePicker>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="6">
              <FormItem label="案发地点：">
                <Select v-model="searchInfo.city_id" @on-change="changeArea('2',searchInfo.city_id)" :clearable="true" placeholder="请选择市" style="width:100%">
                  <Option v-for="item in areaData.list1" :value="item.parent_id" :key="item.parent_id">{{ item.name }}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="4">
              <Select v-model="searchInfo.area_id" @on-change="changeArea('3',searchInfo.area_id)" :clearable="true" placeholder="请选择区" style="margin-left:5%;width:95%">
                <Option v-for="item in areaData.list2" :value="item.parent_id" :key="item.parent_id">{{ item.name }}</Option>
              </Select>
            </Col>
            <Col span="4">
              <Select v-model="searchInfo.street_id" @on-change="changeArea('4',searchInfo.street_id)" :clearable="true" placeholder="请选择街道" style="margin-left:5%;width:95%">
                <Option v-for="item in areaData.list3" :value="item.parent_id" :key="item.parent_id">{{ item.name }}</Option>
              </Select>
            </Col>
            <Col span="4">
              <Select v-model="searchInfo.community_id" placeholder="请选择社区" :clearable="true" style="margin-left:5%;width:95%">
                <Option v-for="item in areaData.list4" :value="item.parent_id" :key="item.parent_id">{{ item.name }}</Option>
              </Select>
            </Col>
          </Row>
          <Row>
            <Col span="5" style="margin-left:5%;">
              <Button type="primary" @click="searchData">查询</Button>
              <Button type="primary" @click="reset" style="margin-left: 10px;">重置</Button>
              <Button v-if="user_level !== '5'" type="primary" @click="add" style="margin-left: 10px;">新增</Button>
              <Button type="primary" @click="handleDownload" style="margin-left: 10px;">导出</Button>
<!--              <Button type="primary" @click="exportData" style="margin-left: 10px;">导出</Button>-->
            </Col>
          </Row>
      </Form>
    </div>
    <div style="margin-bottom: 10px;color: #FF0000;">共<span style="padding: 0 3px;">
      {{params.totalRecord}}
    </span>起</div>
    <Table stripe :columns="columns" :data="dataList">
      <template slot-scope="{ row, index }" slot="area_type">
        <span v-if="row.area_type == '1'">城市（区）</span>
        <span v-if="row.area_type == '2'">农村</span>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <div class="flex-div">
          <Button type="info" class="mr5"  @click="showCase(row)">查看</Button>
          <Button v-if="user_level !== '4'&&user_level !== '5'" type="success" class="mr5" @click="editCase(row)">修改</Button>
          <Button v-if="user_level !== '4'&&user_level !== '5'" type="error" class="mr5" @click="deleteCase(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.show" :title="modal1.title" width="1000">
      <Form :model="dataParam" ref="dataParam"  :rules="ruleValidate" :label-width="120" :disabled="modal1.disabled">
        <Card shadow title="案件信息">
          <Row>
            <Col span="8">
              <FormItem label="案发日期：" prop="incident_time" :rules="[{ required: true, type:'date', message: '必填', trigger: 'change' }]">
                <DatePicker type="datetime" :options="options3"  v-model="dataParam.incident_time" placeholder="请选择案发时间" style="width: 100%"> </DatePicker>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="案发所属市：" prop="city_id" :rules="[{ required: true, message: '必填', trigger: 'change' }]">
                <Select v-model="dataParam.city_id" @on-change="changeArea('2',dataParam.city_id, 1)" :clearable="true" placeholder="请选择市" >
                  <Option v-for="item in areaData2.list1" :value="item.parent_id" :key="item.parent_id">{{ item.name }}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="案发所属区：" prop="area_id" :rules="[{ required: true, message: '必填', trigger: 'change' }]">
                <Select v-model="dataParam.area_id" @on-change="changeArea('3',dataParam.area_id, 1)" :clearable="true" placeholder="请选择区" >
                  <Option v-for="item in areaData2.list2" :value="item.parent_id" :key="item.parent_id">{{ item.name }}</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8">
              <FormItem label="案发所属街道："  prop="street_id" :rules="[{ required: true, message: '必填', trigger: 'change' }]">
                <Select v-model="dataParam.street_id" @on-change="changeArea('4',dataParam.street_id, 1)" :clearable="true" placeholder="请选择街道" >
                  <Option v-for="item in areaData2.list3" :value="item.parent_id" :key="item.parent_id">{{ item.name }}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="案发所社区：" prop="community_id" :rules="[{ required: true, message: '必填', trigger: 'change' }]">
                <Select v-model="dataParam.community_id" placeholder="请选择社区" :clearable="true" >
                  <Option v-for="item in areaData2.list4" :value="item.parent_id" :key="item.parent_id">{{ item.name }}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="地区类别：" prop="area_type" :rules="[{ required: true, message: '必填', trigger: 'change' }]">
                <Select v-model="dataParam.area_type" placeholder="请选择地区类别" :clearable="true" >
                  <Option v-for="(item, index) in areaType" :value="item.value" :key="index">{{ item.name }}</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8">
              <FormItem label="犯罪嫌疑人数：" prop="involved_number" :rules="[{ required: true, message: '必填', trigger: 'blur' }]">
                <Input v-model="dataParam.involved_number" placeholder="请输入犯罪嫌疑人数" />
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="死亡人数 ：" prop="dead_number" :rules="[{ required: true, message: '必填', trigger: 'blur' }]">
                <Input v-model="dataParam.dead_number" placeholder="请输入死亡人数 " />
              </FormItem>
            </Col>

            <Col span="8">
              <FormItem label="属于类别：" prop="dead_type"  :rules="[{ required: true, message: '必填', trigger: 'change' }]">
                <Select v-model="dataParam.dead_type" placeholder="请选择属于类别" :clearable="true" >
                  <Option v-for="(item, index) in col1List" :value="item.value" :key="index">{{ item.name }}</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
          <Row>

          </Row>
          <Row>
            <Col span="8">
              <FormItem label="案发原因：" prop="reason_incident" :rules="[{ required: true, message: '必填', trigger: 'change' }]">
                <Select v-model="dataParam.reason_incident" placeholder="请选择案发原因" :clearable="true" >
                  <Option v-for="(item, index) in reasonIncidentList" :value="item.value" :key="index">{{ item.name }}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="16">
              <FormItem label="简要案情：" prop="case_description" :rules="[{ required: true, message: '必填', trigger: 'blur' }]">
                <Input v-model="dataParam.case_description" type="textarea" :rows="3" :maxlength="300" placeholder="请输入案件描述" />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="24">
              <Button type="primary" class="mr5" style="margin:0 auto;display: flex" @click="saveCase()" v-if="!modal1.disabled">保存案件信息</Button>
            </Col>
          </Row>
        </Card>
      </Form>
      <Card shadow v-if="form_show">
        <Tabs value="tabs1">
          <TabPane label="嫌疑人信息" name="tabs1">
            <Button type="primary" @click="addSuspect" v-if="!modal1.disabled">新增嫌疑人信息</Button>
            <Table stripe :columns="suspectColumns" :data="suspectDataList" style="margin-top: 10px;">
              <template slot-scope="{ row, index }" slot="action">
                <div class="flex-div">
                  <Button type="info" class="mr5" @click="showSuspect(row)">查看</Button>
                  <Button type="success" class="mr5" @click="editSuspect(row)" v-if="!modal1.disabled">修改</Button>
                  <Button type="error" class="mr5" @click="deleteSuspect(row)" v-if="!modal1.disabled">删除</Button>
                </div>
              </template>
            </Table>
          </TabPane>
        </Tabs>
      </Card>
      <div slot="footer">
        <Button type="primary" @click="modal1.show = false">关闭</Button>
      </div>
    </Modal>
    <Modal v-model="modal2.show" :title="modal2.title">
      <Form :model="dataParam2" :label-width="120" :disabled="modal2.disable">
        <Row>
          <Col span="24">
            <FormItem label="受害者姓名：">
              <Input v-model="dataParam2.victim_name" placeholder="请输入受害者姓名" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="24">
            <FormItem label="受害者身份证号：">
              <Input v-model="dataParam2.victim_cardno" placeholder="请输入受害者身份证号" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="24">
            <FormItem label="受害者联系方式：">
              <Input v-model="dataParam2.victim_tel" placeholder="请输入受害者联系方式" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="24">
            <FormItem label="死亡时间：">
              <DatePicker type="datetime" v-model="dataParam2.death_time" placeholder="请选择死亡时间" style="width: 100%"> </DatePicker>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="24">
            <FormItem label="死亡原因：">
              <Input v-model="dataParam2.death_reason" type="textarea" :rows="3" placeholder="请输入死亡原因" />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="default" @click="modal2.show = false" v-if="!modal2.disable">取消</Button>
        <Button type="primary" @click="saveVictime" v-if="!modal2.disable">确定</Button>
        <Button type="primary" @click="modal2.show = false" v-if="modal2.disable">关闭</Button>
      </div>
    </Modal>
    <Modal v-model="modal3.show" :title="modal3.title" width="1000">
      <Button type="primary" @click="addFamily" v-if="!modal1.disabled">新增受害者家属信息</Button>
      <Table stripe :columns="familyColumns" :data="familyDataList" style="margin-top: 10px;">
        <template slot-scope="{ row, index }" slot="action">
          <div class="flex-div">
            <Button type="info" class="mr5" @click="showFamily(row)">查看</Button>
            <Button type="success" class="mr5" @click="editFamily(row)" v-if="!modal1.disabled">修改</Button>
            <Button type="error" class="mr5" @click="deleteFamily(row)" v-if="!modal1.disabled">删除</Button>
          </div>
        </template>
      </Table>
      <div slot="footer">
        <Button type="primary" @click="modal3.show = false">关闭</Button>
      </div>
    </Modal>
    <Modal v-model="modal4.show" :title="modal4.title">
      <Form :model="dataParam3" :label-width="120" :disabled="modal4.disable">
        <Row>
          <Col span="24">
            <FormItem label="家属姓名：">
              <Input v-model="dataParam3.family_name" placeholder="请输入家属姓名" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="24">
            <FormItem label="家属身份证号：">
              <Input v-model="dataParam3.family_cardno" placeholder="请输入家属身份证号" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="24">
            <FormItem label="家属联系方式：">
              <Input v-model="dataParam3.family_tel" placeholder="请输入家属联系方式" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="24">
            <FormItem label="与受害人关系：">
              <Input v-model="dataParam3.relationship_victim" placeholder="请输入与受害人关系" />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="default" @click="modal4.show = false" v-if="!modal4.disable">取消</Button>
        <Button type="primary" @click="saveFamily" v-if="!modal4.disable">确定</Button>
        <Button type="primary" @click="modal4.show = false" v-if="modal4.disable">关闭</Button>
      </div>
    </Modal>
    <Modal v-model="modal5.show" :title="modal5.title" width="800">
      <Form :model="dataParam4"  ref="dataParam4"  :rules="ruleValidate" :label-width="120" :disabled="modal5.disable">

        <Row>
          <Col span="12">
            <FormItem label="嫌疑人姓名："  prop="suspect_name"  :rules="[{ required: true, message: '必填', trigger: 'blur' }]" >
              <Input v-model="dataParam4.suspect_name" placeholder="请输入嫌疑人姓名" />
            </FormItem>
          </Col>
          <Col span="12">
<!--            <FormItem label="嫌疑人身份证号：">-->
<!--              <Input v-model="dataParam4.suspect_cardno" @on-blur=getIdInfo() placeholder="请输入嫌疑人身份证号" />-->
<!--            </FormItem>-->
            <FormItem label="嫌疑人身份证号" prop="suspect_cardno" :rules="[
                      { required: true, message: '必填', trigger: 'blur' },
                      { validator: checkCardNo, trigger: 'blur' },
                    ]">
              <Input
                v-model="dataParam4.suspect_cardno"
                placeholder="请输入嫌疑人身份证号" @on-blur=getIdInfo()
              ></Input>
            </FormItem>

          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="嫌疑人性别：">
              <Select v-model="dataParam4.sex" disabled placeholder="根据填写身份证号码自动带出" >
                <Option value="女">女</Option>
                <Option value="男">男</Option>
              </Select>
              <!-- <Input v-model="dataParam4.sex" placeholder="请输入嫌疑人性别" di /> -->
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="嫌疑人出生日期：">
              <Input v-model="dataParam4.birthday " placeholder="根据填写身份证号码自动带出" disabled />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="文化程度：">
              <Select v-model="dataParam4.edu_level" placeholder="请选择文化程度" :clearable="true" >
                <Option v-for="(item, index) in educationTypes" :value="item.value" :key="index">{{ item.name }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="职业情况：">
              <Select v-model="dataParam4.career_situation" placeholder="请选择职业情况" :clearable="true" >
                <Option v-for="(item, index) in careerTypes" :value="item.value" :key="index">{{ item.name }}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="是否重点人员：">
              <Select v-model="dataParam4.is_key_personnel">
                <Option value="1">是</Option>
                <Option value="2">否</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12"  v-if="dataParam4.is_key_personnel == '1'">
            <FormItem label="重点人员类型：">
              <Select v-model="dataParam4.key_personnel_type">
                <Option v-for="(item, index) in personnelTypes" v-bind:key="index" :value="item.value">{{item.name}}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="default" @click="modal5.show = false" v-if="!modal5.disable">取消</Button>
        <Button type="primary" @click="saveSuspect" v-if="!modal5.disable">确定</Button>
        <Button type="primary" @click="modal5.show = false" v-if="modal5.disable">关闭</Button>
      </div>
    </Modal>
    <Modal v-model="modal6.show" :title="modal6.title">
      <Form :model="dataParam5" :label-width="120" :disabled="modal6.disable">
        <Row>
          <Col span="24">
            <FormItem label="证人姓名：">
              <Input v-model="dataParam5.witness_name" placeholder="请输入证人姓名" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="24">
            <FormItem label="证人身份证号：">
              <Input v-model="dataParam5.witness_cardno" placeholder="请输入证人身份证号" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="24">
            <FormItem label="证人联系电话：">
              <Input v-model="dataParam5.witness_tel" placeholder="请输入证人联系电话" />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="default" @click="modal6.show = false" v-if="!modal6.disable">取消</Button>
        <Button type="primary" @click="saveWitness" v-if="!modal6.disable">确定</Button>
        <Button type="primary" @click="modal6.show = false" v-if="modal6.disable">关闭</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  // insertDisputeResolution,
  selectCityList, selectDictList
  // updateDisputeResolution
  // updateEventCategory
} from '@/api/contradiction.js'
import {
  getJlHomicideCasePageList,
  deleteJlHomicideCaseAll,
  getJlHomicideVictimeList,
  createJlHomicideVictime,
  deleteJlHomicideVictime,
  getJlHomicideFamilyList,
  createJlHomicideFamily,
  deleteJlHomicideFamily,
  getJlHomicideSuspectList,
  createJlHomicideSuspect,
  deleteJlHomicideSuspect,
  getJlHomicideWitnessList,
  createJlHomicideWitness,
  deleteJlHomicideWitness,
  createJlHomicideCase
  // exportHomicideCaseDataNew
  // exportHomicideCaseData
} from '@/api/murder-management.js'
import { datetime2str, getUuid } from '@/api/eventlist.js'
import { getInfoFromId } from '@/api/common.js'
import axios from 'axios'
import * as XLSX from 'xlsx'
// import xeUtil from 'xe-utils'

export default {
  name: 'register',
  data () {
    return {
      options3: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      ruleValidate: {},
      col1List: [
        { name: '一杀一人', value: '1' },
        { name: '一杀二人', value: '2' },
        { name: '一人杀三人及以上命案', value: '3' }
      ],
      reasonIncidentList: [
        { name: '口角琐事', value: '1' },
        { name: '家庭矛盾', value: '2' },
        { name: '情感（婚恋）矛盾', value: '3' },
        { name: '邻里矛盾', value: '4' },
        { name: '土地纠纷', value: '5' },
        { name: '经济（借贷）纠纷', value: '6' },
        { name: '精神障碍患者肇事肇祸', value: '7' },
        { name: '悲观厌世', value: '8' },
        { name: '抢劫杀人', value: '9' },
        { name: '强奸杀人', value: '10' },
        { name: '吸毒致幻杀人', value: '11' },
        { name: '其他', value: '12' }
      ],
      careerTypes: [
        { name: '党政机关人员', value: '1' },
        { name: '企事业人员', value: '2' },
        { name: '退休人员', value: '3' },
        { name: '无业人员', value: '4' },
        { name: '农民', value: '5' },
        { name: '个体户', value: '6' },
        { name: '务工人员 ', value: '7' },
        { name: '其他', value: '8' }
      ],
      educationTypes: [
        { name: '文盲', value: '1' },
        { name: '小学学历', value: '2' },
        { name: '初中学历', value: '3' },
        { name: '高中学历', value: '4' },
        { name: '专科学历', value: '5' },
        { name: '本科学历', value: '6' },
        { name: '硕士学历 ', value: '7' },
        { name: '博士学历', value: '8' },
        { name: '其他', value: '9' }
      ],
      areaType: [
        { name: '城市（区）', value: '1' },
        { name: '农村', value: '2' }
      ],
      personnelTypes: [
        { name: '前科劣迹人员', value: '1' },
        { name: '社区矫正人员', value: '2' },
        { name: '精神障碍患者', value: '3' },
        { name: '三失一偏人员', value: '4' },
        { name: '重点青少年', value: '5' },
        { name: '刑满释放人员', value: '6' }
      ],
      backInfo: {},
      modal1: {
        show: false,
        disabled: false,
        title: ''
      },
      modal2: {
        show: false,
        disable: false,
        title: ''
      },
      modal3: {
        show: false,
        disable: false,
        title: ''
      },
      modal4: {
        show: false,
        disable: false,
        title: ''
      },
      modal5: {
        show: false,
        disable: false,
        title: ''
      },
      modal6: {
        show: false,
        disable: false,
        title: ''
      },
      form_show: false,
      searchInfo: {},
      columns: [
        { type: 'index', title: '序号', align: 'center', width: '80px' },
        { title: '案发时间', key: 'incident_time', align: 'center', minWidth: 150 },
        { title: '案发地市', key: 'city', align: 'center', minWidth: 100 },
        { title: '案发地区', key: 'area', align: 'center', minWidth: 100 },
        { title: '案发地街道', key: 'street', align: 'center', minWidth: 100 },
        { title: '案发地社区', key: 'community', align: 'center', minWidth: 100 },
        { title: '地区类别', slot: 'area_type', align: 'center', minWidth: 100 },
        { title: '犯罪嫌疑人数', key: 'involved_number', align: 'center', minWidth: 100 },
        { title: '被害人数', key: 'dead_number', align: 'center', minWidth: 100 },
        { title: '操作', slot: 'action', fixed: 'right', align: 'center', width: '250' }
      ],
      dataList: [],
      victimeColumns: [
        { type: 'index', title: '序号', align: 'center', width: '80px' },
        { title: '受害者姓名', key: 'victim_name', align: 'center', minWidth: 100 },
        { title: '受害者身份证号', key: 'victim_cardno', align: 'center', minWidth: 150 },
        { title: '受害者联系方式', key: 'victim_tel', align: 'center', minWidth: 150 },
        { title: '死亡时间', key: 'death_time', align: 'center', minWidth: 150 },
        { title: '死亡原因', key: 'death_reason', align: 'center', minWidth: 100 },
        { title: '操作', slot: 'action', fixed: 'right', align: 'center', width: '300' }
      ],
      victimeDataList: [],
      familyColumns: [
        { type: 'index', title: '序号', align: 'center', width: '80px' },
        { title: '家属姓名', key: 'family_name', align: 'center', minWidth: 100 },
        { title: '家属身份证号', key: 'family_cardno', align: 'center', minWidth: 150 },
        { title: '家属联系方式', key: 'family_tel', align: 'center', minWidth: 150 },
        { title: '与受害人关系', key: 'relationship_victim', align: 'center', minWidth: 100 },
        { title: '操作', slot: 'action', fixed: 'right', align: 'center', width: '300' }
      ],
      familyDataList: [],
      suspectColumns: [
        { type: 'index', title: '序号', align: 'center', width: '80px' },
        { title: '嫌疑人姓名', key: 'suspect_name', align: 'center', minWidth: 100 },
        { title: '嫌疑人身份证号', key: 'suspect_cardno', align: 'center', minWidth: 150 },
        { title: '操作', slot: 'action', fixed: 'right', align: 'center', width: '250' }
      ],
      suspectDataList: [],
      witnessColumns: [
        { type: 'index', title: '序号', align: 'center', width: '80px' },
        { title: '证人姓名', key: 'witness_name', align: 'center', minWidth: 100 },
        { title: '证人身份证号', key: 'witness_cardno', align: 'center', minWidth: 150 },
        { title: '证人联系方式', key: 'witness_tel', align: 'center', minWidth: 150 },
        { title: '操作', slot: 'action', fixed: 'right', align: 'center', width: '250' }
      ],
      witnessDataList: [],
      dataParam: {
        incident_time: '',
        city_id: '',
        area_id: '',
        street_id: '',
        community_id: '',
        area_type: '',
        involved_number: '',
        dead_number: '',
        dead_type: '',
        reason_incident: '',
        case_description: ''
      },
      dataParam2: {},
      dataParam3: {},
      dataParam4: {},
      dataParam5: {},
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      list_url: '',
      dictData: [],
      areaData: {
        list1: [],
        list2: [],
        list3: [],
        list4: []
      },
      areaData2: {
        list1: [],
        list2: [],
        list3: [],
        list4: []
      },
      homicide_victime_id: '',
      homicide_id: '',
      user_level: ''
    }
  },
  mounted () {
    this.user_level = this.$store.state.user.severUserInfo.company_grade
    this.list_url = getJlHomicideCasePageList
    this.getList()
    this.getDictList('1')
    this.getCityData('1')
  },
  methods: {
    async handleDownload () {
      try {
        const response = await axios.post('/api/ac/jilinsscgsdp/murderManagementService/exportHomicideCaseDataNew', { ...this.searchInfo }, {
          responseType: 'blob'
        })
        const url = window.URL.createObjectURL(new Blob([response.data]))
        // 创建隐藏的a标签并设置属性
        const link = document.createElement('a')
        link.href = url
        link.download = '命案导出.xlsx' // 自定义下载文件名和扩展名
        link.style.display = 'none'
        document.body.appendChild(link)
        // 触发点击下载
        link.click()
        // 清理
        document.body.removeChild(link)
        window.URL.revokeObjectURL(url)
      } catch (error) {
        console.error('下载失败:', error)
        // 可以在这里添加错误提示
      }
    },
    async exportData () {
      try {
        // const response = await exportHomicideCaseData()
        const response = await axios.post('/api/ac/jilinsscgsdp/murderManagementService/exportHomicideCaseData', this.searchInfo)

        let header_keys = ['incidentTime', 'city', 'area', 'street', 'community', 'areaType', 'involvedNumber']
        let header_labels = ['案发时间', '案发地市', '案发地区', '案发地街道', '案发地社区', '地区类别', '涉案人数']
        const ws_data = []
        ws_data.push(header_labels)
        for (let row of response.data.data) {
          ws_data.push(header_keys.map(header => row[header])) // 添加数据行
        }
        // 将JSON格式的数据转换为工作表(worksheet)
        // XLSX.utils.json_to_sheet()方法接受一个数组，其中每个元素是一个对象，代表Excel中的一行
        // 这里的data变量应该是一个数组，数组中的每个对象包含将要写入Excel的行数据
        const worksheet = XLSX.utils.aoa_to_sheet(ws_data)

        // 创建一个新的工作簿(workbook)
        // 工作簿是Excel文件中的顶级容器，可以包含多个工作表
        const workbook = XLSX.utils.book_new()

        // 将工作表添加到工作簿中
        // 'Sheet1'是工作表的名称，你可以根据需要修改它
        XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')

        // 将工作簿保存为Excel文件，并触发下载
        // 'data.xlsx'是导出的文件名，你可以根据需要修改它
        // 这个方法会生成一个.xlsx文件，并提示用户下载
        XLSX.writeFile(workbook, '命案管理人员导出.xlsx')
      } catch (err) {
        this.$message.error('download error!')
      }
    },

    checkCardNo (rule, value, callback) {
      if (!value) {
        this.dataParam4.sex = ''
        this.dataParam4.birthday = ''
        callback()
      } else if (
        !/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
          value
        )
      ) {
        this.dataParam4.sex = ''
        this.dataParam4.birthday = ''
        callback(new Error('格式不正确'))
      } else {
        callback()
      }
    },

    showVictimeFamily (row) {
      this.modal3.show = true
      this.dataParam3 = {}
      this.dataParam3.homicide_victime_id = row.id
      this.homicide_victime_id = row.id
      this.getJlHomicideFamilyList(row.id)
      this.modal3.title = '受害者家属信息'
    },
    showVictime (row) {
      this.modal2.show = true
      this.modal2.disable = true
      this.dataParam2 = JSON.parse(JSON.stringify(row))
      this.modal2.title = '查看受害者信息'
    },
    showFamily (row) {
      this.modal4.show = true
      this.modal4.disable = true
      this.dataParam3 = JSON.parse(JSON.stringify(row))
      this.modal4.title = '查看受害者家属信息'
    },
    showSuspect (row) {
      this.modal5.show = true
      this.modal5.disable = true
      this.dataParam4 = JSON.parse(JSON.stringify(row))
      this.modal5.title = '查看嫌疑人'
    },
    showWitness (row) {
      this.modal6.show = true
      this.modal6.disable = true
      this.dataParam5 = JSON.parse(JSON.stringify(row))
      this.modal6.title = '查看嫌疑人'
    },
    showCase (row) {
      this.modal1.show = true
      this.modal1.disabled = true
      this.form_show = true
      this.changeArea('2', row.city_id, 1)
      this.changeArea('3', row.area_id, 1)
      this.changeArea('4', row.street_id, 1)
      this.dataParam = JSON.parse(JSON.stringify(row))
      this.homicide_id = row.id
      this.getJlHomicideVictimeList(row.id)
      this.getJlHomicideSuspectList(row.id)
      this.getJlHomicideWitnessList(row.id)
      this.modal1.title = '查看命案信息'
    },
    saveCase () {
      this.$refs['dataParam'].validate((valid) => {
        if (valid) {
          console.log('11111')
          if (this.dataParam.incident_time) {
            this.dataParam.incident_time = datetime2str(this.dataParam.incident_time)
          }
          createJlHomicideCase(this.dataParam).then(res => {
            if (res.data.errcode === 0) {
              this.$Message.success('操作成功')
              this.form_show = true
              this.getList()
            } else {
              this.$Message.error(res.data.errmsg)
            }
          })
        } else {
          this.$Message.error('请完善页面必填校验!')
        }
      })
    },
    async saveVictime () {
      if (this.dataParam2.death_time) {
        this.dataParam2.death_time = datetime2str(this.dataParam2.death_time)
      }
      await createJlHomicideVictime(this.dataParam2).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success('操作成功')
        } else {
          this.$Message.error(res.data.errmsg)
        }
      })
      await this.getJlHomicideVictimeList(this.dataParam.id)
      this.modal2.show = false
    },
    async saveFamily () {
      await createJlHomicideFamily(this.dataParam3).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success('操作成功')
        } else {
          this.$Message.error(res.data.errmsg)
        }
      })
      await this.getJlHomicideFamilyList(this.homicide_victime_id)
      this.modal4.show = false
    },
    saveSuspect () {
      this.$refs['dataParam4'].validate(async (valid) => {
        if (valid) {
          console.log('11111')
          const res = await createJlHomicideSuspect(this.dataParam4)
          if (res.data.errcode === 0) {
            this.$Message.success('操作成功')
          } else {
            this.$Message.error(res.data.errmsg)
          }
          await this.getJlHomicideSuspectList(this.homicide_id)
          this.modal5.show = false
        } else {
          this.$Message.error('请完善页面必填校验!')
        }
      })
    },
    async saveWitness () {
      await createJlHomicideWitness(this.dataParam5).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success('操作成功')
        } else {
          this.$Message.error(res.data.errmsg)
        }
      })
      await this.getJlHomicideWitnessList(this.homicide_id)
      this.modal6.show = false
    },
    addVictime () {
      this.modal2.show = true
      this.modal2.disable = false
      this.dataParam2 = {}
      this.dataParam2.homicide_id = this.dataParam.id
      console.log(this.dataParam2)
      this.modal2.title = '新增受害者信息'
    },
    addFamily () {
      this.modal4.show = true
      this.modal4.disable = false
      this.dataParam3 = {}
      this.dataParam3.homicide_victime_id = this.homicide_victime_id
      this.modal4.title = '新增受害者家属信息'
    },
    addSuspect () {
      this.modal5.show = true
      this.modal5.disable = false
      this.dataParam4 = {}
      this.dataParam4.homicide_id = this.homicide_id
      this.modal5.title = '新增嫌疑人信息'
    },
    addWitness () {
      this.modal6.show = true
      this.modal6.disable = false
      this.dataParam5 = {}
      this.dataParam5.homicide_id = this.homicide_id
      this.modal6.title = '新增证人信息'
    },
    add () {
      this.dataParam = {}
      this.dataParam2 = {}
      this.dataParam3 = {}
      this.dataParam4 = {}
      this.dataParam5 = {}
      let uuid = getUuid()
      this.dataParam.id = uuid
      this.homicide_id = uuid
      this.getJlHomicideVictimeList(uuid)
      this.getJlHomicideSuspectList(uuid)
      this.getJlHomicideWitnessList(uuid)
      this.modal1.title = '新增案件'
      this.modal1.show = true
      this.modal1.disabled = false
      this.form_show = false
    },
    editCase (row) {
      this.form_show = true
      this.changeArea('2', row.city_id, 1)
      this.changeArea('3', row.area_id, 1)
      this.changeArea('4', row.street_id, 1)
      this.dataParam = JSON.parse(JSON.stringify(row))
      this.dataParam.involved_number = this.dataParam.involved_number + ''
      this.dataParam.dead_number = this.dataParam.dead_number + ''
      this.dataParam2.homicide_id = row.id
      this.homicide_id = row.id
      this.getJlHomicideVictimeList(row.id)
      this.getJlHomicideSuspectList(row.id)
      this.getJlHomicideWitnessList(row.id)
      this.modal1.show = true
      this.modal1.disabled = false
      this.modal1.title = '修改案件'
    },
    editVictime (row) {
      this.dataParam2 = JSON.parse(JSON.stringify(row))
      this.modal2.show = true
      this.modal2.disable = false
      this.modal2.title = '修改受害者信息'
    },
    editFamily (row) {
      this.dataParam3 = JSON.parse(JSON.stringify(row))
      this.modal4.show = true
      this.modal4.disable = false
      this.modal4.title = '修改受害者家属信息'
    },
    editSuspect (row) { // 编辑嫌疑人
      this.dataParam4 = JSON.parse(JSON.stringify(row))
      this.modal5.show = true
      this.modal5.disable = false
      this.modal5.title = '修改嫌疑人信息'
    },
    editWitness (row) {
      this.dataParam5 = JSON.parse(JSON.stringify(row))
      this.modal6.show = true
      this.modal6.disable = false
      this.modal6.title = '修改证人信息'
    },
    async deleteCase (row) {
      this.$Modal.confirm({
        title: '确认删除此案件吗？',
        content: '请仔细核对后再操作',
        onOk: async () => {
          await deleteJlHomicideCaseAll({ id: row.id }).then(res => {
            if (res.data.errcode === 0) {
              this.$Message.success('操作成功')
            } else {
              this.$Message.error(res.data.errmsg)
            }
          })
          await this.getList()
        }
      })
    },
    async deleteVictime (row) {
      this.$Modal.confirm({
        title: '确认删除此受害者吗？',
        content: '请仔细核对后再操作',
        onOk: async () => {
          await deleteJlHomicideVictime({ id: row.id }).then(res => {
            if (res.data.errcode === 0) {
              this.$Message.success('操作成功')
            } else {
              this.$Message.error(res.data.errmsg)
            }
          })
          await this.getJlHomicideVictimeList(this.dataParam.id)
        }
      })
    },
    async deleteFamily (row) {
      this.$Modal.confirm({
        title: '确认删除此受害者家属吗？',
        content: '请仔细核对后再操作',
        onOk: async () => {
          await deleteJlHomicideFamily({ id: row.id }).then(res => {
            if (res.data.errcode === 0) {
              this.$Message.success('操作成功')
            } else {
              this.$Message.error(res.data.errmsg)
            }
          })
          await this.getJlHomicideFamilyList(this.homicide_victime_id)
        }
      })
    },
    async deleteSuspect (row) {
      this.$Modal.confirm({
        title: '确认删除此嫌疑人吗？',
        content: '请仔细核对后再操作',
        onOk: async () => {
          await deleteJlHomicideSuspect({ id: row.id }).then(res => {
            if (res.data.errcode === 0) {
              this.$Message.success('操作成功')
            } else {
              this.$Message.error(res.data.errmsg)
            }
          })
          await this.getJlHomicideSuspectList(this.homicide_id)
        }
      })
    },
    async deleteWitness (row) {
      this.$Modal.confirm({
        title: '确认删除此证人吗？',
        content: '请仔细核对后再操作',
        onOk: async () => {
          await deleteJlHomicideWitness({ id: row.id }).then(res => {
            if (res.data.errcode === 0) {
              this.$Message.success('操作成功')
            } else {
              this.$Message.error(res.data.errmsg)
            }
          })
          await this.getJlHomicideWitnessList(this.homicide_id)
        }
      })
    },
    getJlHomicideVictimeList (homicide_id) {
      getJlHomicideVictimeList({ homicide_id: homicide_id }).then(res => {
        if (res.data.errcode === 0) {
          this.victimeDataList = res.data.data
          return
        }
        this.$Message.error(res.errmsg)
      })
    },
    getJlHomicideSuspectList (homicide_id) {
      getJlHomicideSuspectList({ homicide_id: homicide_id }).then(res => {
        if (res.data.errcode === 0) {
          this.suspectDataList = res.data.data
          // this.suspectDataList.forEach(item => {
          //   item.birthday = xeUtil.toDateString(item.birthday, 'yyyy-MM-dd')
          // })
          return
        }
        this.$Message.error(res.errmsg)
      })
    },
    getJlHomicideWitnessList (homicide_id) {
      getJlHomicideWitnessList({ homicide_id: homicide_id }).then(res => {
        if (res.data.errcode === 0) {
          this.witnessDataList = res.data.data
          return
        }
        this.$Message.error(res.errmsg)
      })
    },
    getJlHomicideFamilyList (homicide_victime_id) {
      getJlHomicideFamilyList({ homicide_victime_id: homicide_victime_id }).then(res => {
        if (res.data.errcode === 0) {
          this.familyDataList = res.data.data
          return
        }
        this.$Message.error(res.errmsg)
      })
    },
    getDictList () {
      selectDictList({ type: 'case_type' }).then(res => {
        if (res.data.errcode === 0) {
          this.dictData = 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
          this.areaData2['list' + level] = res.data.data
          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, type) {
      if (level > 1 && !parent_id) {
        let list = ['', 'city_id', 'area_id', 'street_id', 'community_id']
        let key = type === 1 ? 'dataParam' : 'searchInfo'
        let key2 = type === 1 ? 'areaData2' : 'areaData'
        this[key2]['list' + level] = []
        for (let i = level; i<list.length; i++) {
          this.$set(this[key], list[i], '')
        }
        return
      }
      this.getCityData(level, parent_id)
    },
    reset () {
      this.searchInfo = {}
      this.params = {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      }
      this.searchData()
    },
    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.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)
    },
    searchData () {
      console.log(this.searchInfo, '入参')
      if (this.searchInfo.incident_time) {
        this.searchInfo.incident_time_start = datetime2str(this.searchInfo.incident_time[0])
        this.searchInfo.incident_time_end = datetime2str(this.searchInfo.incident_time[1])
      }
      this.getList(this.searchInfo)
    },
    getIdInfo () {
      // 根据身份证号码获取性别和生日
      if (this.dataParam4.suspect_cardno) {
        if (getInfoFromId(this.dataParam4.suspect_cardno, '1') === '1') {
          this.$set(this.dataParam4, 'sex', '男')
        } else {
          this.$set(this.dataParam4, 'sex', '女')
        }
        // this.$set(this.dataParam4, 'sex', getInfoFromId(this.dataParam4.suspect_cardno, '1'))
        this.$set(this.dataParam4, 'birthday', getInfoFromId(this.dataParam4.suspect_cardno, '2'))
        console.log(getInfoFromId(this.dataParam4.suspect_cardno, '1'), 'this.dataParam4')
      }
    }
  },
  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;
      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>
