<template>
  <div>
    <div class="contradiction-div">
      <div class="search-div">
        <Row type="flex" class="">
          <Col span="4">
            <span>姓名：</span>
            <Input v-model="params.name" placeholder="请输入" style="width: 65%" />
          </Col>
          <Col span="4">
            <span>身份证号：</span>
            <Input v-model="params.cardNo" placeholder="请输入" style="width: 55%" />
          </Col>
          <Col span="4">
            <span>选择市：</span>
            <Select style="width: 55%" v-model="params.cityId" clearable @on-change="changeCity">
              <Option
                v-for="(item, index) in cityList"
                :key="index"
                :value="item.parent_id"
                >{{ item.name }}</Option
              >
            </Select>
          </Col>
          <Col span="4">
            <span>选择区：</span>
            <Select style="width: 55%" v-model="params.areaId" clearable @on-change="changeArea">
              <Option
                v-for="(item, index) in areaList"
                :key="index"
                :value="item.parent_id"
                >{{ item.name }}</Option
              >
            </Select>
          </Col>
          <Col span="4">
            <span>选择街道：</span>
            <Select style="width: 55%" v-model="params.streetId" clearable @on-change="changeStreet">
              <Option
                v-for="(item, index) in streetList"
                :key="index"
                :value="item.parent_id"
                >{{ item.name }}</Option
              >
            </Select>
          </Col>
          <Col span="4">
            <span>选择社区：</span>
            <Select style="width: 55%" v-model="params.communityId" clearable>
              <Option
                v-for="(item, index) in communityList"
                :key="index"
                :value="item.parent_id"
                >{{ item.name }}</Option
              >
            </Select>
          </Col>
        </Row>
        <Row type="flex" class="" style="margin-top: 15px;">
<!--          <Col span="4">-->
<!--            <span>是否涉矛盾纠纷：</span>-->
<!--            <Select style="width: 42%" v-model="params.involvingConflictsDisputes ">-->
<!--              <Option value="1">是</Option>-->
<!--              <Option value="2">否 </Option>-->
<!--            </Select>-->
<!--          </Col>-->
<!--          <Col span="4" v-if="params.involvingConflictsDisputes === '1'">-->
<!--            <span>矛盾风险等级：</span>-->
<!--            <Select style="width: 42%" v-model="params.riskLevel">-->
<!--              <Option value="1">一级</Option>-->
<!--              <Option value="2">二级</Option>-->
<!--              <Option value="3">三级</Option>-->
<!--            </Select>-->
<!--          </Col>-->
<!--          <Col span="4">-->
<!--            <span>重点人员类别：</span>-->
<!--            <Select style="width: 55%" v-model="params.sysType" clearable>-->
<!--              <Option value="1">"三失一偏"人员</Option>-->
<!--              <Option value="2">刑满释放人员</Option>-->
<!--              <Option value="3">严重精神障碍患者</Option>-->
<!--              <Option value="4">涉重点信访事项人员</Option>-->
<!--              <Option value="5">涉重点涉法涉诉类人员</Option>-->
<!--            </Select>-->
<!--          </Col>-->
          <!-- <Col span="8">
            <span>高度关注情形：</span>
            <Select style="width: 69%" v-model="params.is_zdry">
              <Option
                v-for="(item, index) in situationList"
                :key="index"
                :value="item.highlyConcernedSituation"
                >{{ item.highlyConcernedSituation }}</Option
              >
            </Select>
          </Col> -->
          <Col :span="params.involvingConflictsDisputes === '1' ? 11 : 15" style="text-align: left">
            <Button
              type="primary"
              @click="searchData"
              :loading="loading"
              style="margin-right: 10px"
              >搜索</Button
            >
<!--            <Button type="primary" @click="handleDownload" style="margin-right: 10px;">导出</Button>-->
<!--            v-if="severUserInfo.company_grade === '6'"-->
<!--            <Button-->
<!--              type="primary"-->
<!--              @click="searchPeople"-->
<!--              :loading="loading"-->
<!--              >新增</Button>-->
            <Button style="margin-left: 10px"
              type="primary"
              @click="revert"
            >重置</Button>
<!--            <Button-->
<!--              type="primary"-->
<!--              style="margin-left: 10px"-->
<!--              @click="getDistCard"-->
<!--            >身份证查重</Button-->
<!--            >-->
          </Col>
        </Row>
      </div>
      <Table border :columns="tableColumns" :data="tableData">
        <template slot-scope="{ row, index }" slot="riskLevel">
          <span v-if="row.riskLevel === '1'">一级</span>
          <span v-else-if="row.riskLevel === '2'">二级</span>
          <span v-else-if="row.riskLevel === '3'">三级</span>
          <span v-else>{{ row.riskLevel }}</span>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="warning" size="small" @click="showDetailByRiskLevel(row)">详情</Button>
        </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="peopleForm.show" :title="'重点人群' + title" width="900">
        <Form
          ref="formPerson"
          :model="peopleForm"
          :rules="ruleValidate"
          :label-width="120"
          :disabled="title === '详情'"
        >
          <Row>
            <Col span="23">
              <Row style="margin-top: 15px">
                <Col span="12">
                  <p style="height: 40px">
                    <FormItem label="姓名" prop="name">
                      <Input
                        :disabled="onlyShow"
                        v-model="peopleForm.name"
                        placeholder="请输入姓名"
                        :maxlength="16"
                      ></Input>
                    </FormItem>
                  </p>
                </Col>
                <Col span="12">
                  <p style="height: 40px">
                    <FormItem label="性别" prop="sex">
                      <Select
                        :disabled="onlyShow"
                        v-model="peopleForm.sex"
                        placeholder="请选择性别"
                      >
                        <Option value="1">男</Option>
                        <Option value="2">女</Option>
                      </Select>
                    </FormItem>
                  </p>
                </Col>
              </Row>
              <Row style="margin-top: 15px">
                <Col span="12">
                  <p style="height: 40px">
                    <FormItem label="身份证号" prop="cardNo" :rules="[
                      { required: true, message: '必填', trigger: 'blur' },
                      { validator: checkCardNo, trigger: 'blur' },
                    ]">
                      <Input
                        :disabled="onlyShow"
                        v-model="peopleForm.cardNo"
                        placeholder="请输入身份证号"
                        :maxlength="64"
                      ></Input>
                    </FormItem>
                  </p>
                </Col>
                <Col span="12">
                  <p style="height: 40px">
                    <FormItem label="民族" prop="folk">
                      <Select
                        :disabled="onlyShow"
                        v-model="peopleForm.folk"
                        placeholder="请选择民族"
                      >
                        <Option
                          v-for="(item, index) in mzList"
                          :key="index"
                          :value="item.mzcode"
                          >{{ item.mzname }}</Option
                        >
                      </Select>
                    </FormItem>
                  </p>
                </Col>
              </Row>
              <Row style="margin-top: 15px">
                <Col span="12">
                  <p style="height: 40px">
                    <FormItem label="本人联系方式" prop="phone" :rules="[
                      { required: true, message: '必填', trigger: 'blur' },
                      { validator: checkNum, trigger: 'blur' },
                    ]">
                      <Input
                        :disabled="onlyShow"
                        v-model="peopleForm.phone"
                        placeholder="请输入联系方式"
                        :maxlength="16"
                      ></Input>
                    </FormItem>
                  </p>
                </Col>
                <!-- <Col span="12">
                  <p style="height: 40px">
                    <FormItem label="相关人姓名">
                      <Input
                        :disabled="onlyShow"
                        v-model="peopleForm.relatedPersonName"
                        placeholder="请输入相关人姓名"
                      ></Input>
                    </FormItem>
                  </p>
                </Col> -->
              </Row>
              <!-- <Row style="margin-top: 15px">
                <Col span="12">
                  <p style="height: 40px">
                    <FormItem label="相关人关系">
                      <Select
                        :disabled="onlyShow"
                        v-model="peopleForm.relatedPersonRelation"
                        placeholder="请选择相关人关系"
                      >
                        <Option value="0">户主</Option>
                        <Option value="1">配偶</Option>
                        <Option value="2">子女</Option>
                        <Option value="3">父母</Option>
                        <Option value="4">岳父母或公婆</Option>
                        <Option value="5">祖父母</Option>
                        <Option value="6">媳婿</Option>
                        <Option value="7">孙祖女</Option>
                        <Option value="8">兄弟姐妹</Option>
                        <Option value="9">其他</Option>
                      </Select>
                    </FormItem>
                  </p>
                </Col>
                <Col span="12">
                  <p style="height: 40px">
                    <FormItem label="相关人联系方式">
                      <Input
                        :disabled="onlyShow"
                        v-model="peopleForm.relatedPersonPhone"
                        placeholder="请输入相关人联系方式"
                      ></Input>
                    </FormItem>
                  </p>
                </Col>
              </Row> -->
            </Col>
          </Row>
          <Row style="margin-top: 15px">
          <Col span="6">
              <p style="height: 40px">
                <FormItem label="现住址"  prop="cityId">
                    <Select :disabled="onlyShow || ['2', '3', '4', '5'].includes(currentUserLevel)" :value="peopleForm.cityId" clearable placeholder="请选择市" @on-change="changeCityForm" @on-clear="(e) => changeCityForm(e, 'clear')">
                    <Option
                      v-for="(item, index) in cityListForm"
                      :key="index"
                      :value="item.parent_id"
                    >{{ item.name }}</Option
                    >
                  </Select>
                </FormItem>
              </p>
            </Col>
            <Col span="6">
              <p style="height: 40px">
                <FormItem label="" :label-width="20" prop="areaId">
                  <Select :disabled="onlyShow || ['3', '4', '5'].includes(currentUserLevel)" :value="peopleForm.areaId" clearable placeholder="请选择区" @on-change="changeAreaForm" @on-clear="(e) => changeAreaForm(e, 'clear')">
                    <Option
                      v-for="(item, index) in areaListForm"
                      :key="index"
                      :value="item.parent_id"
                    >{{ item.name }}</Option
                    >
                  </Select>
                </FormItem>
              </p>
            </Col>
            <Col span="6">
              <p style="height: 40px">
                <FormItem label="" :label-width="20" prop="streetId">
                  <Select :disabled="onlyShow || ['4', '5'].includes(currentUserLevel)" :value="peopleForm.streetId" clearable placeholder="请选择街道" @on-change="changeStreetForm" @on-clear="(e) => changeStreetForm(e, 'clear')">
                    <Option
                      v-for="(item, index) in streetListForm"
                      :key="index"
                      :value="item.parent_id"
                    >{{ item.name }}</Option
                    >
                  </Select>
                </FormItem>
              </p>
            </Col>
            <Col span="5">
            <p style="height: 40px">
              <FormItem label="" :label-width="20"  prop="communityId">
                <Select :disabled="onlyShow || currentUserLevel === '5'" :value="peopleForm.communityId" clearable  placeholder="请选择社区" @on-change="changeCommunityForm" @on-clear="(e) => changeCommunityForm(e, 'clear')">
                  <Option
                    v-for="(item, index) in communityListForm"
                    :key="index"
                    :value="item.parent_id"
                  >{{ item.name }}</Option
                  >
                </Select>
              </FormItem>
            </p>
          </Col>
          </Row>
          <Row style="margin-top: 15px">
            <Col span="23">
              <p style="height: 40px">
                <FormItem  label="详细地址" prop="address">
                  <Input
                    :disabled="onlyShow"
                    v-model="peopleForm.address"
                    placeholder="请输入详细地址"
                    :maxlength="300"
                  ></Input>
                </FormItem>
              </p>
            </Col>

          </Row>
          <Row style="margin-top: 15px">
            <Col span="23">
              <p style="height: 40px">
                <FormItem label="户籍地址" prop="registeredResidence">
                  <Input
                    :disabled="onlyShow"
                    v-model="peopleForm.registeredResidence"
                    placeholder="请输入户籍地址"
                    :maxlength="300"
                  ></Input>
                </FormItem>
              </p>
            </Col>
          </Row>
          <Row style="margin-top: 15px">
            <Col span="6">
              <p style="height: 40px">
                <FormItem label="是否涉及矛盾纠纷" prop="">
                  <i-switch :disabled="onlyShow" v-model="peopleForm.involvingConflictsDisputes" true-value="1" false-value="2" size="large">
                    <span slot="open">有</span>
                    <span slot="close">无</span>
                  </i-switch>
                </FormItem>
              </p>
            </Col>
            <Col span="8" v-if="peopleForm.involvingConflictsDisputes === '1'">
              <p style="height: 40px">
                <FormItem prop="">
                  <template slot="label">
                    <span style="">矛盾风险等级</span>
                    <Poptip trigger="hover" placement="bottom">
                      <template slot="content">
                        <div v-if="peopleForm.riskLevel === '1'">
                          <p class="risk-tishi mt30 p20">
                            一级是指在二级矛盾风险基础上，排查对象存在婚姻家庭不幸、有重大疾病、有暴力倾向、有弃世厌世倾向、扬言报复社会等情形。
                          </p>
                        </div>
                        <div
                          v-else-if="peopleForm.riskLevel === '2'"
                        >
                          <p class="risk-tishi mt30 p20">
                            二级是指重点人群涉及的重点信访事项、重点涉法涉诉类矛盾。
                          </p>
                        </div>
                        <div
                          v-else-if="peopleForm.riskLevel === '3'"
                        >
                          <p class="risk-tishi mt30 p20">
                            三级是指重点人群涉及的一般矛盾纠纷和非重点人群涉及的重点信访事项、重点涉法涉诉类矛盾。
                          </p>
                        </div>
                        <div v-else></div>
                      </template>
                      <span style=""
                        ><Icon type="md-help-circle" style="margin-top: -2px"
                      /></span>
                    </Poptip>
                  </template>
                  <Select v-model="peopleForm.riskLevel" :disabled="onlyShow">
                    <Option value="1">一级</Option>
                    <Option value="2">二级</Option>
                    <Option value="3">三级</Option>
                  </Select>
                </FormItem>
              </p>
            </Col>
          </Row>
          <Row style="margin-top: 15px">
            <Col span="23">
              <p style="height: 40px">
                <FormItem label="高度关注情形">
                  <Select
                  :disabled="onlyShow"
                    multiple
                    v-model="peopleForm.keyPersonHighlyConcernedRel"
                    placeholder="请选择高度关注情形"
                  >
                    <Option
                      v-for="(item, index) in situationList"
                      :key="index"
                      :value="item.highlyConcernedSituation"
                      >{{ item.highlyConcernedSituation }}</Option
                    >
                  </Select>
                </FormItem>
              </p>
            </Col>
          </Row>
          <Row style="margin-top: 15px">
            <Col span="12">
              <p style="height: 40px">
                <FormItem label="责任单位" prop="responsibleCompany">
                  <Input
                    :disabled="onlyShow"
                    v-model="peopleForm.responsibleCompany"
                    placeholder="请输入责任单位"
                    :maxlength="128"
                  ></Input>
                </FormItem>
              </p>
            </Col>
            <Col span="11">
              <p style="height: 40px">
                <FormItem label="责任人" prop="responsiblePerson">
                  <Input
                    :disabled="onlyShow"
                    v-model="peopleForm.responsiblePerson"
                    placeholder="请输入责任人"
                    :maxlength="32"
                  ></Input>
                </FormItem>
              </p>
            </Col>
          </Row>
          <Row style="margin-top: 15px">
            <Col span="23">
              <p>
                <FormItem label="备注信息">
                  <Input
                    :disabled="onlyShow"
                    v-model="peopleForm.remarks"
                    type="textarea"
                    :rows="4"
                    placeholder="请输入备注信息"
                    :maxlength="300"
                  />
                </FormItem>
              </p>
            </Col>
          </Row>
        </Form>
        <div slot="footer">
          <div v-if="peopleForm.formtype !== 'detail'">
            <Button type="text" size="large" @click="closeModal"      :loading="loading"
              >取消</Button
            >
            <Button
              :disabled="peopleForm.confirmButton"
              type="primary"
              size="large"
              @click="createPeopleConfirm"
              :loading="loading"
              >确定</Button
            >
          </div>
        </div>
      </Modal>
      <Modal v-model="isShowMDDetail" title="矛盾列表" width="1200">
        <Table border :columns="mdColumns" :data="mdDataList">
          <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="risk_level">
            <div class="flex-div">
              <div v-if="row.risk_level == '一般矛盾纠纷'">
                <img
                  class="level-option-img"
                  src="@/assets/images/warning4.png"
                  alt=""
                />
                <span style="padding-left: 10px">一般矛盾纠纷</span>
              </div>
              <div v-if="row.risk_level == '复杂矛盾纠纷'">
                <img
                  class="level-option-img"
                  src="@/assets/images/warning5.png"
                  alt=""
                />
                <span style="padding-left: 10px">复杂矛盾纠纷</span>
              </div>
              <div v-if="row.risk_level == '重大矛盾纠纷'">
                <img
                  class="level-option-img"
                  src="@/assets/images/warning6.png"
                  alt=""
                />
                <span style="padding-left: 10px">重大矛盾纠纷</span>
              </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.cityId }}{{ row.areaId }}{{ row.streetId
              }}{{ row.communityId }}</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="mdparams.totalRecord"
          :current="mdparams.pageNo"
          :page-size="mdparams.pageSize"
          @on-change="changePageNoMD"
          show-total
          show-sizer
          @on-page-size-change="sizeMD"
        />
        <div slot="footer">
          <Button type="text" size="large" @click="isShowMDDetail = false"
            >关闭</Button
          >
        </div>
      </Modal>
      <Modal v-model="isShowMDDetail2" title="矛盾详情" width="1200">
        <md-detail v-if="isShowMDDetail2" :mdParam="mdParam" />
        <div slot="footer">
          <Button type="text" size="large" @click="isShowMDDetail2 = false"
            >关闭</Button
          >
        </div>
      </Modal>
      <Modal v-model="peopleLog.show" title="走访日志信息列表" width="1200">
        <Button
          type="primary"
          @click="createPeopleLog"
          style="margin-bottom: 10px"
          >新增走访日志</Button
        >
        <Table
          border
          :columns="peopleLog.dataColumns"
          :data="peopleLog.dataList"
        >
          <template slot-scope="{ row, index }" slot="is_pitfall">
            <span v-if="row.is_pitfall === '1'">是</span>
            <span v-if="row.is_pitfall === '2'">否</span>
          </template>
          <template slot-scope="{ row, index }" slot="is_follow">
            <span v-if="row.is_follow === '1'">是</span>
            <span v-if="row.is_follow === '2'">否</span>
          </template>
          <template slot-scope="{ row, index }" slot="abnormal">
            <span v-if="row.abnormal === '1'">是</span>
            <span v-if="row.abnormal === '2'">否</span>
          </template>
          <template slot-scope="{ row, index }" slot="risk_level">
            <span v-if="row.risk_level === '1'">无风险</span>
            <span v-if="row.risk_level === '2'">低风险</span>
            <span v-if="row.risk_level === '3'">高风险</span>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button
              type="success"
              size="small"
              style="margin-right: 5px"
              @click="updatePeopleLog(row)"
              >编辑</Button
            >
            <Button
              type="primary"
              size="small"
              style="margin-right: 5px"
              @click="detailPeopleLog(row)"
              >详情</Button
            >
            <Button
              type="error"
              size="small"
              style="margin-right: 5px"
              @click="removePeopleLog(row)"
              >删除</Button
            >
          </template>
        </Table>
        <div slot="footer">
          <Button type="text" size="large" @click="peopleLog.show = false"
            >取消</Button
          >
          <Button type="primary" size="large" @click="peopleLog.show = false"
            >确定</Button
          >
        </div>
      </Modal>
      <Modal
        v-model="peopleLog.detailShow"
        title="走访日志信息详情"
        width="1200"
      >
        <Form ref="formEmployee" :label-width="100">
          <div class="title-style">身份信息</div>
          <Row style="margin-top: 30px">
            <Col span="8" style="margin-left: -4%">
              <FormItem label="姓名">
                <Input disabled v-model="peopleLog.info.user_name"></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="身份证号">
                <Input disabled v-model="peopleLog.info.cardno"></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="联系方式">
                <Input disabled v-model="peopleLog.info.tel"></Input>
              </FormItem>
            </Col>
          </Row>
          <div class="title-style">居住信息</div>
          <Row style="margin-top: 30px">
            <Col span="8" style="margin-left: -4%">
              <FormItem label="市（州）">
                <Input disabled v-model="peopleLog.info.cityName"></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="县（市、区）">
                <Input disabled v-model="peopleLog.info.areaName"></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="街道（乡镇）">
                <Input disabled v-model="peopleLog.info.streetName"></Input>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8" style="margin-left: -4%">
              <FormItem label="社区（村）">
                <Input disabled v-model="peopleLog.info.communityName"></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="网格">
                <Input disabled v-model="peopleLog.info.gardenName"></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="楼">
                <Input disabled v-model="peopleLog.info.buildName"></Input>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8" style="margin-left: -4%">
              <FormItem label="单元">
                <Input disabled v-model="peopleLog.info.unitName"></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="层">
                <Input disabled v-model="peopleLog.info.floorName"></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="户">
                <Input disabled v-model="peopleLog.info.doorplateName"></Input>
              </FormItem>
            </Col>
          </Row>
          <div class="title-style">走访信息</div>
          <Row>
            <Col span="8" style="margin-left: -4%">
              <FormItem label="日期">
                <DatePicker
                  disabled
                  type="date"
                  v-model="peopleLog.info.visit_date1"
                  style="width: 100%"
                ></DatePicker>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="走访人">
                <Input
                  disabled
                  v-model="peopleLog.info.community_user_name"
                ></Input>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="24" style="margin-left: -4%">
              <FormItem label="标签">
                <Tag
                  v-for="(item, index) in peopleLog.info.label_name_list"
                  :key="index"
                  color="error"
                  >{{ item }}</Tag
                >
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8" style="margin-left: -4%">
              <FormItem label="重点关注">
                <Select
                  v-model="peopleLog.info.is_follow"
                  placeholder="请选择是否重点人员"
                >
                  <Option value="1">是</Option>
                  <Option value="2">否</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="是否存在隐患">
                <Select
                  v-model="peopleLog.info.is_pitfall"
                  placeholder="是否存在隐患"
                >
                  <Option value="1">是</Option>
                  <Option value="2">否</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="是否异常人员">
                <Select
                  v-model="peopleLog.info.abnormal"
                  placeholder="是否异常人员"
                >
                  <Option value="1">是</Option>
                  <Option value="2">否</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8" style="margin-left: -4%">
              <FormItem label="矛盾风险等级">
                <Select
                  v-model="peopleLog.info.risk_level"
                  placeholder="矛盾风险等级"
                >
                  <Option value="1">无风险</Option>
                  <Option value="2">低风险</Option>
                  <Option value="3">高风险</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="24" style="margin-left: -4%">
              <FormItem label="走访内容">
                <Input
                  :rows="6"
                  type="textarea"
                  v-model="peopleLog.info.visit_content"
                ></Input>
              </FormItem>
            </Col>
          </Row>
        </Form>
        <div slot="footer">
          <Button type="text" size="large" @click="peopleLog.detailShow = false"
            >取消</Button
          >
          <Button
            :disabled="peopleLog.confirmButton"
            type="primary"
            size="large"
            @click="peopleLogConfirm"
            >确定</Button
          >
        </div>
      </Modal>
      <Modal v-model="controlData.show" title="输入证件号码" width="500">
        <Row>
          <Col
            span="6"
            style="text-align: right; margin-right: 10px; margin-top: 6px"
            >证件号码:</Col
          >
          <Col span="14">
            <Input v-model="controlData.cardnoInput" placeholder=""></Input>
          </Col>
        </Row>
        <div slot="footer">
          <Button type="text" size="large" @click="controlData.show = false"
            >取消</Button
          >
          <Button type="primary" size="large" @click="searchConfirm"
            >确定</Button
          >
        </div>
      </Modal>
    </div>
    <family-manage :peopleInfo="peopleInfo" ref="family"></family-manage>
    <zf-log ref="zflog" />
  </div>
</template>
<script>
import {
  findPersonListByRiskLevel,
  deleteKeyPersonById,
  insertKeyPersonById,
  updateKeyPersonById,
  createPeopleZFLog,
  findMZList,
  findPeopleZFLogList,
  getPeopleInfoByCardno,
  updatePeopleZFLog,
  selectGardenList,
  selectBuildingList,
  selectUnitList,
  selectFloorList,
  selectDoorplateList,
  deletePeopleZFLog,
  getLoginUserAreaInfo
} from '@/api/peopleInfo'
import { findEventPageList, getCardNoById, selectCityList, selectDictList } from '@/api/contradiction.js'
import { date0str1 } from '@/api/eventlist'
import ceShiImg from '@/assets/contradictionImgs/test1.png'
import mdDetail from './components/mdDetail.vue'
import familyManage from './components/familyManage.vue'
import zfLog from './components/zfLog.vue'
import axios from 'axios'
export default {
  name: 'indexByRiskLevel',
  components: {
    mdDetail,
    zfLog,
    familyManage
  },
  data () {
    return {
      title: '',
      cityType: false,
      cityList: [],
      areaList: [],
      streetList: [],
      communityList: [],
      cityListForm: [],
      areaListForm: [],
      streetListForm: [],
      communityListForm: [],
      col26List: [
        { id: 1, name: '多次犯罪记录和严重犯罪行为犯罪史' },
        { id: 2, name: '服刑期间有违规违纪行为' },
        { id: 3, name: '心理和行为评估发现存在反社会人格障碍、心理扭曲、情绪不稳定和暴力倾向' },
        { id: 4, name: '教育程度低，缺乏必要的职业技能和就业能力' },
        { id: 5, name: '缺乏家庭关爱、亲人疏远，或者在社会上受到歧视、排斥' },
        { id: 6, name: '经济困难、生活无以为继，又无法通过合法途径获得足够的经济资源' },
        { id: 7, name: '继续与有犯罪前科或不良行为的人频繁交往，仍然保持不良生活方式，如赌博、酗酒、吸毒等' },
        { id: 8, name: '表现出对社会不满、怨恨情绪，对法律和社会秩序缺乏尊重和认同，有报复社会的想法或言论' }
      ],
      situationList: [
        { highlyConcernedSituation: '婚姻家庭不幸' },
        { highlyConcernedSituation: '有重大疾病' },
        { highlyConcernedSituation: '有暴力倾向' },
        { highlyConcernedSituation: '有弃世厌世倾向' },
        { highlyConcernedSituation: '扬言报复社会' }
      ],
      ruleValidate: {
        name: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        // cardNo: [
        //   { required: true, message: '必填', trigger: 'blur' }
        // ],
        folk: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        // phone: [
        //   { required: true, message: '必填', trigger: 'blur' }
        // ],
        cityId: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        areaId: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        streetId: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        communityId: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        address: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        registeredResidence: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        involvingConflictsDisputes: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        riskLevel: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        responsibleCompany: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        responsiblePerson: [
          { required: true, message: '必填', trigger: 'blur' }
        ]
      },
      ceShiImg,
      url: ceShiImg,
      tableColumns: [
        { type: 'index', title: '序号', align: 'center', width: 80 },
        { title: '姓名', key: 'name', align: 'center', minWidth: 100 },
        { title: '身份证号 ', key: 'cardNo', align: 'center', minWidth: 220 },
        { title: '矛盾风险等级', slot: 'riskLevel', align: 'center', minWidth: 110 },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          align: 'center',
          minWidth: 150
        }
      ],
      loading: false,
      tableData: [],
      tableLoading: false,
      params: {
        sysType: '',
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      mdparams: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      controlData: {
        cardnoInput: '',
        show: false
      },
      peopleForm: {
        cityId: '',
        areaId: '',
        streetId: '',
        communityId: '',
        show: false,
        confirmButton: false
      },
      labelList: [],
      mzList: [],
      peopleLog: {
        dataColumns: [
          { type: 'index', title: '序号', align: 'center', width: '80' },
          { title: '姓名', key: 'user_name', align: 'center', width: '80' },
          { title: '身份证号 ', key: 'grid_user_cardno', align: 'center' },
          { title: '联系方式', key: 'tel', align: 'center' },
          { title: '是否重点关注', slot: 'is_follow', align: 'center' },
          { title: '是否存在隐患', slot: 'is_pitfall', align: 'center' },
          { title: '是否异常人员', slot: 'abnormal', align: 'center' },
          { title: '矛盾风险等级', slot: 'risk_level', align: 'center' },
          { title: '走访日期', key: 'visit_date', align: 'center' },
          {
            title: '操作',
            slot: 'action',
            fixed: 'right',
            align: 'center',
            width: '180'
          }
        ],
        dataList: [],
        show: false,
        detailShow: false,
        info: {},
        confirmButton: false,
        tableLoading: false,
        operate_type: ''
      },
      isShowMDDetail: false,
      isShowMDDetail2: false,
      severUserInfo: {},
      mdColumns: [
        { 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: 'risk_level',
          align: 'center',
          width: '140px'
        },
        {
          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: '120px'
        }
      ],
      mdDataList: [],
      mdParam: {},
      gardenList: [],
      buildingList: [],
      unitList: [],
      floorList: [],
      doorplateList: [],
      selectKeyList: ['building', 'unit', 'floor', 'doorplate'],
      onlyShow: false,
      peopleInfo: {},
      cardnoWJM: '',
      zfListId: '',
      areaDict: [],
      currentUserLevel: '' // 当前用户层级，用于控制下拉框禁用状态
    }
  },
  methods: {
    getArea () {
      selectDictList({ type: 'jl_key_person_region' }).then(res => {
        if (res.data.errcode === 0) {
          this.areaDict = res.data.data
          return
        }
        this.$Message.error(res.errmsg)
      })
    },
    checkNum (rule, value, callback) {
      if (!value) {
        callback(new Error('必填'))
      } else if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)) {
        callback(new Error('格式不正确'))
      } else {
        callback()
      }
    },
    checkCardNo (rule, value, callback) {
      if (!value) {
        callback(new Error('必填'))
      } 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
        )
      ) {
        callback(new Error('格式不正确'))
      } else {
        callback()
      }
    },
    async handleDownload () {
      try {
        const response = await axios.post('/api/ac/jilinsscgsdp/murderManagementService/findKeyPersonListExport', { ...this.searchInfo, sysType: '1' }, {
          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)
        // 可以在这里添加错误提示
      }
    },
    // 请选择市的 change 事件
    async changeCityForm (e, flag) {
      if (e) {
        this.peopleForm.cityId = e
      } else if (flag && flag === 'clear') {
        this.peopleForm.cityId = ''
      }
      if (!this.peopleForm.cityId) {
        this.areaListForm = []
        this.streetListForm = []
        this.communityListForm = []
        this.peopleForm.areaId = ''
        this.peopleForm.streetId = ''
        this.peopleForm.communityId = ''
        return Promise.resolve()
      }
      const res = await selectCityList({ parent_id: this.peopleForm.cityId })
      this.areaListForm = res.data.data
      // 清空下面的数组
      this.streetListForm = []
      this.communityListForm = []
      this.peopleForm.areaId = ''
      this.peopleForm.streetId = ''
      this.peopleForm.communityId = ''
    },
    // 请选择区的 change 事件
    async changeAreaForm (e, flag) {
      if (e) {
        this.peopleForm.areaId = e
      } else if (flag && flag === 'clear') {
        this.peopleForm.areaId = ''
      }
      if (!this.peopleForm.areaId) {
        this.streetListForm = []
        this.communityListForm = []
        this.peopleForm.streetId = ''
        this.peopleForm.communityId = ''
        return Promise.resolve()
      }
      const res = await selectCityList({ parent_id: this.peopleForm.areaId })
      this.streetListForm = res.data.data
      this.communityListForm = []
      this.peopleForm.streetId = ''
      this.peopleForm.communityId = ''
    },
    // 请选择街道的 change 事件
    async changeStreetForm (e, flag) {
      if (e) {
        this.peopleForm.streetId = e
      } else if (flag && flag === 'clear') {
        this.peopleForm.streetId = ''
      }
      if (!this.peopleForm.streetId) {
        this.communityListForm = []
        this.peopleForm.communityId = ''
        return Promise.resolve()
      }
      const res = await selectCityList({ parent_id: this.peopleForm.streetId })
      this.communityListForm = res.data.data
      this.peopleForm.communityId = ''
    },
    // 请选择社区的 change 事件
    changeCommunityForm (e, flag) {
      if (e) {
        this.peopleForm.communityId = e
      } else if (flag && flag === 'clear') {
        this.peopleForm.communityId = ''
      }
      return Promise.resolve()
    },
    changeAreaType (e) {
      if (e !== '1') {
        this.peopleForm.cityId = ''
        this.peopleForm.areaId = ''
        this.peopleForm.streetId = ''
        this.peopleForm.communityId = ''
      }
    },
    changeCity () {
      if (!this.params.cityId) {
        this.areaList = []
        this.streetList = []
        this.communityList = []
        this.params.areaId = ''
        this.params.streetId = ''
        this.params.communityId = ''
        return
      }
      selectCityList({ parent_id: this.params.cityId }).then((res) => {
        this.areaList = res.data.data
      })
      // 清空下面的数组
      this.streetList = []
      this.communityList = []
    },
    changeArea () {
      if (!this.params.areaId) {
        this.streetList = []
        this.communityList = []
        this.params.streetId = ''
        this.params.communityId = ''
        return
      }
      selectCityList({ parent_id: this.params.areaId }).then((res) => {
        this.streetList = res.data.data
      })
      this.communityList = []
    },
    changeStreet () {
      if (!this.params.streetId) {
        this.communityList = []
        this.params.communityId = ''
        return
      }
      selectCityList({ parent_id: this.params.streetId }).then((res) => {
        this.communityList = res.data.data
      })
    },
    getHighlyConcernedRelStr (arr) {
      if (!arr || arr.length === 0) {
        return ''
      }
      let result = ''
      arr.forEach(item => {
        result += item.highlyConcernedSituation + ','
      })
      // 去掉最后一位
      result = result.slice(0, result.length - 1)
      return result
    },
    getSysTypeText (sysType) {
      const sysTypeMap = {
        '1': '"三失一偏"人员',
        '2': '刑满释放人员',
        '3': '严重精神障碍患者',
        '4': '涉重点信访事项人员',
        '5': '涉重点涉法涉诉类人员'
      }
      return sysTypeMap[sysType] || ''
    },
    closeModal () {
      this.peopleForm.show = false
    },
    showFamily (data) {
      this.peopleInfo = data
      this.$nextTick(() => {
        this.$refs.family.init()
      })
    },
    clearSelect (index) {
      for (let i = 3; i >= index; i--) {
        delete this.peopleForm[`${this.selectKeyList[i]}_id`]
        this.$set(this, `${this.selectKeyList[i]}List`, [])
      }
    },
    revert () {
      this.params.name = ''
      this.params.cardNo = ''
      this.params.cityId = ''
      this.params.areaId = ''
      this.params.streetId = ''
      this.params.communityId = ''
      this.params.sysType = ''
      this.params.riskLevel = ''
      this.params.criminalTendency = ''
      this.params.criminalTendencySituation = ''
      this.params.involvingConflictsDisputes = ''
      this.params.distCard = ''
      this.params.pageNo = 1
      this.params.pageSize = 10
      this.searchData()
    },
    getDistCard () {
      this.params.distCard = '1'
      this.params.pageNo = 1
      this.init()
    },
    getDoorplateList (mark) {
      let id = mark === 'edit' ? this.peopleForm.floor_id : mark
      if (mark !== 'edit') {
        this.clearSelect(3)
      }
      selectDoorplateList({ floor_id: id }).then((res) => {
        if (res.data.errcode === 0) {
          this.doorplateList = res.data.data
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    getFloorList (mark) {
      let id = mark === 'edit' ? this.peopleForm.unit_id : mark
      if (mark !== 'edit') {
        this.clearSelect(2)
      }
      selectFloorList({ unit_id: id }).then((res) => {
        if (res.data.errcode === 0) {
          this.floorList = res.data.data
          if (mark === 'edit') {
            this.getDoorplateList(mark)
          }
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    getUnitList (mark) {
      let id = mark === 'edit' ? this.peopleForm.building_id : mark
      if (mark !== 'edit') {
        this.clearSelect(1)
      }
      selectUnitList({ building_id: id }).then((res) => {
        if (res.data.errcode === 0) {
          this.unitList = res.data.data
          if (mark === 'edit') {
            this.getFloorList(mark)
          }
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    getBuildingList (mark) {
      console.log(mark)
      let id = mark === 'edit' ? this.peopleForm.garden_id : mark
      if (mark !== 'edit') {
        this.clearSelect(0)
      }
      selectBuildingList({ garden_id: id }).then((res) => {
        if (res.data.errcode === 0) {
          this.buildingList = res.data.data
          if (mark === 'edit') {
            this.getUnitList(mark)
          }
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    getGardenByID (mark) {
      let id =
        mark === 'add'
          ? this.severUserInfo.company_id
          : this.peopleForm.community_id
      selectGardenList({ community_id: id }).then((res) => {
        if (res.data.errcode === 0) {
          this.gardenList = res.data.data
          if (mark === 'edit') {
            this.getBuildingList(mark)
          }
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    getInfo (row, level) {
      // 详情接口
      this.mdParam = {
        what: 'edit',
        id: row.id,
        level: level,
        type: this.type
      }
      this.isShowMDDetail2 = true
    },
    getlist (id) {
      getCardNoById({ id }).then((ret) => {
        if (ret.data.errcode === 0) {
          findEventPageList({
            event_cardno: ret.data.data.cardno
          }).then((res) => {
            if (res.data.errcode === 0) {
              this.mdDataList = res.data.data.results
              this.mdparams.totalRecord = res.data.data.totalRecord
              return
            }
            this.$Message.error(res.data.errmsg)
          })
        }
      })
    },
    showMDDetail (data) {
      this.isShowMDDetail = true
      this.getlist(data.id)
    },
    async showDetail (data) {
      this.title = '详情'
      let keyPersonArr = []
      for (let i = 0; i < data.keyPersonHighlyConcernedRel.length; i++) {
        keyPersonArr.push(data.keyPersonHighlyConcernedRel[i].highlyConcernedSituation)
      }
      this.peopleForm = { ...data, show: true, formtype: 'detail', keyPersonHighlyConcernedRel: keyPersonArr }
      this.peopleForm.cityId = data.cityId
      await this.changeCityForm()
      this.peopleForm.areaId = data.areaId
      await this.changeAreaForm()
      this.peopleForm.streetId = data.streetId
      await this.changeStreetForm()
      this.peopleForm.communityId = data.communityId
    },
    showDetailByRiskLevel (data) {
      // 跳转到 indexall.vue 页面，传递姓名、身份证号、矛盾风险等级
      this.$router.push({
        path: '/special/peopleInfoDetail',
        query: {
          name: data.name,
          cardNo: data.cardNo,
          riskLevel: data.riskLevel
        }
      })
    },
    init () {
      this.params.isChangChun = this.cityType
      if (this.params.involvingConflictsDisputes === '2') {
        delete this.params.riskLevel
      }
      findPersonListByRiskLevel(this.params).then((ret) => {
        if (ret.data.errcode === 0) {
          this.params.totalRecord = ret.data.data.totalRecord
          this.tableData = ret.data.data.results
          this.tableLoading = false
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    size (pageSize) {
      this.params.pageSize = pageSize
      this.changePageNo(1)
    },
    changePageNo (pageNo) {
      this.params.pageNo = pageNo
      this.init(this.params)
    },
    changePageNoMD (pageNo) {
      this.mdparams.pageNo = pageNo
      this.getList(this.mdparams)
    },
    sizeMD (pageSize) {
      this.mdparams.pageSize = pageSize
      this.changePageNoMD(1)
    },
    searchData () {
      this.params.pageNo = 1
      this.init()
    },
    searchPeople () {
      this.$refs.formPerson.resetFields()
      this.title = '新增'
      this.onlyShow = false
      this.peopleForm = {
        ...this.peopleForm,
        confirmButton: false,
        show: true,
        involvingConflictsDisputes: '2'
        // region: '1'
      } // 重置当前用户层级
      this.currentUserLevel = ''

      // 调用 getLoginUserAreaInfo 接口获取当前登录人的层级和区域码信息
      getLoginUserAreaInfo({ area_id: this.$store.state.user.otherUserInfo.area_id }).then(async (res) => {
        if (res.data.errcode === 0) {
          const userInfo = res.data.data
          console.log('当前登录人信息:', userInfo)

          // 根据当前登录人的层级设置对应的区域码
          if (userInfo.type === '1') {
            // 层级1（省）无需任何操作
            console.log('当前用户为省级，无需设置默认区域')
          } else {
            // 解析 parentIds 字段，获取各级区域码
            const parentIdsArray = userInfo.parentIds.split(',')
            console.log('parentIds 解析结果:', parentIdsArray)

            // 设置当前用户层级，用于控制下拉框禁用状态
            this.currentUserLevel = userInfo.type

            if (userInfo.type === '2') {
              // 层级2（市），设置市
              this.peopleForm.cityId = userInfo.code
              await this.changeCityForm(this.peopleForm.cityId)
            } else if (userInfo.type === '3') {
              // 层级3（区），设置市和区
              // parentIds: "0,220000000000,220100000000" -> 省码在索引1，市码在索引2
              this.peopleForm.cityId = parentIdsArray[2] || userInfo.parentId
              await this.changeCityForm(this.peopleForm.cityId)
              this.peopleForm.areaId = userInfo.code
              await this.changeAreaForm(this.peopleForm.areaId)
            } else if (userInfo.type === '4') {
              // 层级4（街道），设置市、区、街道
              // parentIds: "0,220000000000,220100000000,220102000000" -> 省码在索引1，市码在索引2，区码在索引3
              this.peopleForm.cityId = parentIdsArray[2] || userInfo.parentId
              await this.changeCityForm(this.peopleForm.cityId)
              this.peopleForm.areaId = parentIdsArray[3] || userInfo.code
              await this.changeAreaForm(this.peopleForm.areaId)
              this.peopleForm.streetId = userInfo.code
              await this.changeStreetForm(this.peopleForm.streetId)
            } else if (userInfo.type === '5') {
              // 层级5（社区），设置市、区、街道、社区
              // parentIds: "0,220000000000,220100000000,220102000000,220102001000" -> 省码在索引1，市码在索引2，区码在索引3，街道码在索引4
              this.peopleForm.cityId = parentIdsArray[2] || userInfo.parentId
              await this.changeCityForm(this.peopleForm.cityId)
              this.peopleForm.areaId = parentIdsArray[3] || userInfo.code
              await this.changeAreaForm(this.peopleForm.areaId)
              this.peopleForm.streetId = parentIdsArray[4] || userInfo.code
              await this.changeStreetForm(this.peopleForm.streetId)
              this.peopleForm.communityId = userInfo.code
              await this.changeCommunityForm(this.peopleForm.communityId)
            }
          }
        } else {
          this.$Notice.error({ title: '获取用户信息失败！', desc: res.data.errmsg })
        }
      }).catch((error) => {
        console.error('获取用户信息失败:', error)
        this.$Notice.error({ title: '获取用户信息失败！', desc: '网络错误' })
      })
    },
    getGenderByID (idNumber) {
      if (!idNumber || idNumber.length !== 18) {
        throw new Error('无效身份证号码')
      }
      const sexCode = idNumber.charAt(16)
      // 1:男，2:女
      const gender = parseInt(sexCode, 10) % 2 === 0 ? '2' : '1'
      return gender
    },
    searchConfirm () {
      this.peopleForm = {}
      let data = {
        cardno: this.controlData.cardnoInput
      }
      // 如果新增就不调查询逻辑
      getPeopleInfoByCardno(data).then((ret) => {
        if (ret.data.errcode === 0) {
          if (ret.data.data === null) {
            this.$Notice.success({
              title: '查询结果！',
              desc: '未查询到人员信息！'
            })
            this.peopleForm.cardno = this.controlData.cardnoInput
            this.peopleForm.sex = this.getGenderByID(
              this.controlData.cardnoInput
            )
            delete this.controlData.cardnoInput
            this.controlData.show = false
            this.getGardenByID('add')
          } else {
            ret.data.data.cardno = this.controlData.cardnoInput
            let data = ret.data.data
            if (data.label_id) {
              data.label_id_list = JSON.parse(data.label_id)
            }
            this.peopleForm = data
            this.controlData.show = false
            this.getGardenByID('edit')
          }
          this.peopleForm.show = true
          this.onlyShow = false
          this.peopleForm.confirmButton = false
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    createPeopleConfirm () {
      this.$refs['formPerson'].validate((valid) => {
        if (valid) {
          this.loading = true
          delete this.peopleForm.label_id
          if (this.peopleForm.id) {
            let arr = []
            if (this.peopleForm.keyPersonHighlyConcernedRel && this.peopleForm.keyPersonHighlyConcernedRel.length > 0) {
              arr = this.peopleForm.keyPersonHighlyConcernedRel.map((item) => {
                return { highlyConcernedSituation: item }
              })
            }
            if (this.peopleForm.involvingConflictsDisputes === '2') {
              delete this.peopleForm.riskLevel
            }
            updateKeyPersonById({ ...this.peopleForm, keyPersonHighlyConcernedRel: arr, sysType: '1' }).then((ret) => {
              if (ret.data.errcode === 0) {
                this.$Notice.success({
                  title: '保存成功！',
                  desc: ret.data.errmsg
                })
                this.init()
                this.peopleForm.show = false
                this.controlData.show = false
                this.$refs['formPerson'].resetFields()
                this.loading = false
              } else {
                this.$refs['formPerson'].resetFields()
                this.$Notice.error({
                  title: '保存失败！',
                  desc: ret.data.errmsg
                })
                this.loading = false
              }
            })
          } else {
            let arr = []
            if (this.peopleForm.keyPersonHighlyConcernedRel && this.peopleForm.keyPersonHighlyConcernedRel.length > 0) {
              arr = this.peopleForm.keyPersonHighlyConcernedRel.map((item) => {
                return { highlyConcernedSituation: item }
              })
            }
            if (this.peopleForm.involvingConflictsDisputes === '2') {
              delete this.peopleForm.riskLevel
            }
            insertKeyPersonById({ ...this.peopleForm, keyPersonHighlyConcernedRel: arr, sysType: '1' }).then((ret) => {
              if (ret.data.errcode === 0) {
                this.$Notice.success({
                  title: '保存成功！',
                  desc: ret.data.errmsg
                })
                this.init()
                this.peopleForm.show = false
                this.controlData.show = false
                this.$refs['formPerson'].resetFields()
                this.loading = false
              } else {
                this.loading = false
                this.$refs['formPerson'].resetFields()
                this.$Notice.error({
                  title: '保存失败！',
                  desc: ret.data.errmsg
                })
              }
            })
          }
          setTimeout(() => {
            this.loading = false
          }, 2000)
        } else {
          // 校验失败
        }
      })
    },
    findLabelList () {
      // 暂时不调接口
      this.labelList = [
        {
          id: '“三失一偏”',
          name: '“三失一偏”'
        },
        {
          id: '刑满释放',
          name: '刑满释放'
        },
        {
          id: '严重精神障碍',
          name: '严重精神障碍'
        },
        {
          id: '涉一级二级三级矛盾',
          name: '涉一级二级三级矛盾'
        },
        {
          id: '涉重点信访事项',
          name: '涉重点信访事项'
        },
        {
          id: '涉重点涉法涉诉',
          name: '涉重点涉法涉诉'
        }
      ]
      // findLabelList().then(ret => {
      //   if (ret.data.errcode === 0) {
      //     this.labelList = ret.data.data
      //   } else {
      //     this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
      //   }
      // })
    },
    findMZList () {
      findMZList().then((ret) => {
        if (ret.data.errcode === 0) {
          this.mzList = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    async updatePeopleInfo (e) {
      this.title = '编辑'
      let keyPersonArr = []
      for (let i = 0; i < e.keyPersonHighlyConcernedRel.length; i++) {
        keyPersonArr.push(
          e.keyPersonHighlyConcernedRel[i].highlyConcernedSituation
        )
      }
      this.peopleForm = { ...e, show: true, formtype: 'update', keyPersonHighlyConcernedRel: keyPersonArr }
      this.peopleForm.cityId = e.cityId
      await this.changeCityForm()
      this.peopleForm.areaId = e.areaId
      await this.changeAreaForm()
      this.peopleForm.streetId = e.streetId
      await this.changeStreetForm()
      this.peopleForm.communityId = e.communityId

      // 重置当前用户层级
      this.currentUserLevel = ''

      // 调用 getLoginUserAreaInfo 接口获取当前登录人的层级和区域码信息
      getLoginUserAreaInfo({ area_id: this.$store.state.user.otherUserInfo.area_id }).then((res) => {
        if (res.data.errcode === 0) {
          const userInfo = res.data.data
          console.log('当前登录人信息:', userInfo)
          this.currentUserLevel = userInfo.type
        } else {
          this.$Notice.error({ title: '获取用户信息失败！', desc: res.data.errmsg })
        }
      }).catch((error) => {
        console.error('获取用户信息失败:', error)
        this.$Notice.error({ title: '获取用户信息失败！', desc: '网络错误' })
      })
    },
    deletePeopleInfo (e) {
      this.$Modal.confirm({
        title: '提示',
        content: '确认删除此重点人员？',
        onOk: () => {
          deleteKeyPersonById({ id: e.id }).then((res) => {
            if (res.data.errcode === 0) {
              this.$Notice.success({
                title: '删除成功！',
                desc: res.data.errmsg
              })
              this.init()
            } else {
              this.$Notice.error({
                title: '删除失败！',
                desc: res.data.errmsg
              })
            }
          })
        },
        onCancel: () => {
          this.$Modal.remove()
        }
      })
    },
    getZFLogList () {
      this.peopleLog.tableLoading = true
      findPeopleZFLogList({ id: this.zfListId }).then((ret) => {
        if (ret.data.errcode === 0) {
          this.peopleLog.tableLoading = false
          this.peopleLog.dataList = ret.data.data
          this.peopleLog.show = true
          // this.peopleLog.info.cardno = e.cardno
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    findPeopleZFLogList (e) {
      this.$refs.zflog.show(e)
      // getCardNoById({ id: e.id }).then((res) => {
      //   if (res.data.errcode === 0) {
      //     this.cardnoWJM = res.data.data.cardno
      //     this.zfListId = e.id
      //     this.getZFLogList()
      //   } else {
      //     this.$Notice.error({ title: '查询失败！', desc: res.data.errmsg })
      //   }
      // })
    },
    createPeopleLog () {
      let data = {
        cardno: this.cardnoWJM
      }
      getPeopleInfoByCardno(data).then((ret) => {
        if (ret.data.errcode === 0) {
          this.peopleLog.info = ret.data.data
          this.peopleLog.info.cardno = this.cardnoWJM
          this.peopleLog.info.visit_date1 = new Date()
          this.peopleLog.info.user_id = this.severUserInfo.id
          this.peopleLog.info.community_user_name = this.severUserInfo.name
          // if (this.peopleLog.info.label_name) {
          //   this.peopleLog.info.label_name_list = JSON.parse(this.peopleLog.info.label_name)
          // }
          this.peopleLog.operate_type = 'create'
          this.peopleLog.detailShow = true
          this.peopleLog.confirmButton = false
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    updatePeopleLog (e) {
      let data = JSON.parse(JSON.stringify(e))
      data.grid_user_cardno = this.cardnoWJM
      data.cardno = this.cardnoWJM
      console.log(data, '3333333')
      this.peopleLog.operate_type = 'update'
      this.peopleLog.info = data
      this.peopleLog.info.visit_date1 = e.visit_date
      // if (this.peopleLog.info.label_name) {
      //   this.peopleLog.info.label_name_list = JSON.parse(this.peopleLog.info.label_name)
      // }
      this.peopleLog.detailShow = true
      this.peopleLog.confirmButton = false
    },
    peopleLogConfirm () {
      let data = {
        cardno: this.peopleLog.info.cardno,
        city_id: this.peopleLog.info.city_id,
        street_id: this.peopleLog.info.street_id,
        community_id: this.peopleLog.info.community_id,
        is_pitfall: this.peopleLog.info.is_pitfall,
        abnormal: this.peopleLog.info.abnormal,
        risk_level: this.peopleLog.info.risk_level,
        is_follow: this.peopleLog.info.is_follow,
        visit_content: this.peopleLog.info.visit_content,
        attachment: this.peopleLog.info.attachment,
        visit_date: date0str1(this.peopleLog.info.visit_date1)
      }
      if (this.peopleLog.operate_type === 'create') {
        createPeopleZFLog(data).then((ret) => {
          if (ret.data.errcode === 0) {
            this.getZFLogList()
            this.peopleLog.detailShow = false
            this.$Notice.success({
              title: '保存成功！',
              desc: ret.data.errmsg
            })
          } else {
            this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
          }
        })
      }
      if (this.peopleLog.operate_type === 'update') {
        data.id = this.peopleLog.info.id
        updatePeopleZFLog(data).then((ret) => {
          if (ret.data.errcode === 0) {
            this.getZFLogList(data)
            this.peopleLog.detailShow = false
            this.$Notice.success({
              title: '保存成功！',
              desc: ret.data.errmsg
            })
          } else {
            this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
          }
        })
      }
    },
    detailPeopleLog (e) {
      let data = JSON.parse(JSON.stringify(e))
      data.grid_user_cardno = this.cardnoWJM
      data.cardno = this.cardnoWJM
      this.peopleLog.info = data
      this.peopleLog.info.visit_date1 = e.visit_date
      // if (this.peopleLog.info.label_name) {
      //   this.peopleLog.info.label_name_list = JSON.parse(this.peopleLog.info.label_name)
      // }
      this.peopleLog.detailShow = true
      this.peopleLog.confirmButton = true
    },
    removePeopleLog (e) {
      this.$Modal.confirm({
        title: '是否确认删除？',
        loading: true,
        onOk: () => {
          deletePeopleZFLog({ id: e.id }).then((ret) => {
            if (ret.data.errcode === 0) {
              this.$Notice.success({ title: '删除成功！' })
              this.getZFLogList()
            } else {
              this.$Notice.error({ title: '删除失败！' })
            }
          })
          this.$Modal.remove()
        }
      })
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    // 接收路由传递的类型参数
    const type = this.$route.query.type
    if (type) {
      // 设置默认搜索条件：是否涉矛盾纠纷为"是"，矛盾风险等级为传递的类型值
      this.params.involvingConflictsDisputes = '1'
      this.params.riskLevel = type
    }
    this.init()
    this.findMZList()
    this.findLabelList()
    this.getArea()
    selectCityList({}).then((res) => {
      this.cityList = res.data.data
      this.cityListForm = JSON.parse(JSON.stringify(res.data.data))
    })
  },
  filters: {
    disposeLabel: function (value) {
      if (!value) return ''
      // value = JSON.parse(value)
      // value = value.join(',')
      // return value
      return ''
    }
  }
}
</script>
<style scoped>
.contradiction-div {
  padding: 10px;
}
.contradiction-div .search-div {
  width: 100%;
  padding: 15px 15px 15px 15px;
  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;
}
.contradiction-div >>> .ivu-form .ivu-form-item-label {
  text-align: center;
}
.title-style {
  padding: 8px 12px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin: 15px 0;
  font-size: 16px;
  width: 100%;
}
</style>
