<template>
  <div>
    <Modal v-model="show" title="刑满释放人员" width="900">
        <Form
          ref="formPerson"
          :disabled="true"
          :label-width="120"
          :model="peopleForm"
        >
          <Row>
            <Col span="23">
              <Row style="margin-top: 15px">
                <Col span="12">
                  <p style="height: 40px">
                    <FormItem label="姓名" prop="name">
                      <Input
                        v-model="peopleForm.name"
                        :maxlength="16"
                        placeholder="请输入姓名"
                      ></Input>
                    </FormItem>
                  </p>
                </Col>
                <Col span="12">
                  <p style="height: 40px">
                    <FormItem label="性别" prop="sex">
                      <Select 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">
                      <Input
                        v-model="peopleForm.cardNo"
                        :maxlength="64"
                        placeholder="请输入身份证号"
                      ></Input>
                    </FormItem>
                  </p>
                </Col>
                <Col span="12">
                  <p style="height: 40px">
                    <FormItem label="民族" prop="folk">
                      <Select
                        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">
                      <Input
                        v-model="peopleForm.phone"
                        :maxlength="16"
                        placeholder="请输入联系方式"
                      ></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="23">
            <p style="height: 40px">
              <FormItem label="地区" required>
                <Select :disabled="onlyShow" placeholder="请选择地区" v-model="peopleForm.region" @on-change="changeAreaType(peopleForm.region)">
                  <Option v-for="(item, index) in areaDict" :key="index" :value="item.value">{{ item.label }}</Option>
                </Select>
              </FormItem>
            </p>
          </Col> </Row> -->
          <Row style="margin-top: 15px">
            <Col span="6">
              <p style="height: 40px">
                <FormItem label="现住址" prop="cityId">
                  <Select
                    :disabled="['2', '3', '4', '5'].includes(currentUserLevel)"
                    :value="peopleForm.cityId"
                    clearable
                    placeholder="请选择市"
                    @on-change="changeCityForm"
                  >
                    <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-width="20" label="" prop="areaId">
                  <Select
                    :disabled="['3', '4', '5'].includes(currentUserLevel)"
                    :value="peopleForm.areaId"
                    clearable
                    placeholder="请选择区"
                    @on-change="changeAreaForm"
                  >
                    <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-width="20" label="" prop="streetId">
                  <Select
                    :disabled="['4', '5'].includes(currentUserLevel)"
                    :value="peopleForm.streetId"
                    clearable
                    placeholder="请选择街道"
                    @on-change="changeStreetForm"
                  >
                    <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-width="20" label="" prop="communityId">
                  <Select
                    :disabled="currentUserLevel === '5'"
                    :value="peopleForm.communityId"
                    clearable
                    placeholder="请选择社区"
                    @on-change="changeCommunityForm"
                  >
                    <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
                    v-model="peopleForm.address"
                    :maxlength="300"
                    placeholder="请输入详细地址"
                  ></Input>
                </FormItem>
              </p>
            </Col>
          </Row>
          <Row style="margin-top: 15px">
            <Col span="23">
              <p style="height: 40px">
                <FormItem label="户籍地址" prop="registeredResidence">
                  <Input
                    v-model="peopleForm.registeredResidence"
                    :maxlength="300"
                    placeholder="请输入户籍地址"
                  ></Input>
                </FormItem>
              </p>
            </Col>
          </Row>
          <Row style="margin-top: 15px">
            <Col span="6">
              <p style="height: 40px">
                <FormItem label="是否涉及矛盾纠纷" prop="">
                  <i-switch
                    v-model="peopleForm.involvingConflictsDisputes"
                    false-value="2"
                    size="large"
                    true-value="1"
                  >
                    <span slot="open">有</span>
                    <span slot="close">无</span>
                  </i-switch>
                </FormItem>
              </p>
            </Col>
            <Col v-if="peopleForm.involvingConflictsDisputes === '1'" span="8">
              <p style="height: 40px">
                <FormItem prop="">
                  <template slot="label">
                    <span style="">矛盾风险等级</span>
                    <Poptip placement="bottom" trigger="hover">
                      <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 style="margin-top: -2px" type="md-help-circle"
                      /></span>
                    </Poptip>
                  </template>
                  <Select v-model="peopleForm.riskLevel">
                    <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
                    v-model="peopleForm.keyPersonHighlyConcernedRel"
                    multiple
                    placeholder="请选择高度关注情形"
                  >
                    <Option
                      v-for="(item, index) in situationList"
                      :key="index"
                      :value="item.highlyConcernedSituation"
                      >{{ item.highlyConcernedSituation }}</Option
                    >
                  </Select>
                </FormItem>
              </p>
            </Col>
            <!-- 刑满释放 -->
            <Col span="8">
              <p style="height: 40px">
                <FormItem label="重新犯罪倾向" prop="">
                  <i-switch
                    v-model="peopleForm.criminalTendency"
                    false-value="2"
                    size="large"
                    true-value="1"
                  >
                    <span slot="open">有</span>
                    <span slot="close">无</span>
                  </i-switch>
                </FormItem>
              </p>
            </Col>
            <Col v-if="peopleForm.criminalTendency === '1'" span="23">
              <p style="">
                <FormItem label="具体表现" prop="">
                  <Select
                    v-model="peopleForm.criminalTendencySituation"
                    multiple
                    placeholder="请选择多选"
                  >
                    <Option
                      v-for="(item, index) in col26List"
                      :key="index"
                      :value="item.name"
                      >{{ item.name }}</Option
                    >
                  </Select>
                </FormItem>
              </p>
            </Col>
          </Row>
          <Row style="">
            <Col span="23">
              <Row style="margin-top: 15px">
                <Col span="12">
                  <p style="height: 40px">
                    <FormItem
                      label="安置帮教责任单位"
                      prop="responsibleCompanyByAssistance"
                    >
                      <Input
                        v-model="peopleForm.responsibleCompanyByAssistance"
                        :maxlength="128"
                        placeholder="请输入责任单位"
                      ></Input>
                    </FormItem>
                  </p>
                </Col>
                <Col span="12">
                  <p style="height: 40px">
                    <FormItem
                      label="安置帮教责任人"
                      prop="responsiblePersonByAssistance"
                    >
                      <Input
                        v-model="peopleForm.responsiblePersonByAssistance"
                        :maxlength="16"
                        placeholder="请输入责任人"
                      ></Input>
                    </FormItem>
                  </p>
                </Col>
              </Row>
            </Col>
          </Row>
          <Row>
            <Col span="23">
              <Row style="margin-top: 15px">
                <Col span="12">
                  <p style="height: 40px">
                    <FormItem
                      label="重点人员责任单位"
                      prop="responsibleCompanyByKeyPersonnel"
                    >
                      <Input
                        v-model="peopleForm.responsibleCompanyByKeyPersonnel"
                        :maxlength="128"
                        placeholder="请输入责任单位"
                      ></Input>
                    </FormItem>
                  </p>
                </Col>
                <Col span="12">
                  <p style="height: 40px">
                    <FormItem
                      label="重点人员责任人"
                      prop="responsiblePersonKeyPersonnel"
                    >
                      <Input
                        v-model="peopleForm.responsiblePersonKeyPersonnel"
                        :maxlength="16"
                        placeholder="请输入责任人"
                      ></Input>
                    </FormItem>
                  </p>
                </Col>
              </Row>
            </Col>
          </Row>
          <Row style="margin-top: 15px">
            <Col span="23">
              <p>
                <FormItem label="备注信息">
                  <Input
                    v-model="peopleForm.remarks"
                    :maxlength="300"
                    :rows="4"
                    placeholder="请输入备注信息"
                    type="textarea"
                  />
                </FormItem>
              </p>
            </Col>
          </Row>
        </Form>
      </Modal>
  </div>
</template>
<script>
import { findMZList, getLoginUserAreaInfo } from '@/api/peopleInfo'
import { selectCityList } from '@/api/contradiction'
export default {
  name: 'DetailsTemplate2',
  data () {
    return {
      show: false,
      title: '',
      peopleForm: {},
      currentUserLevel: '',
      cityListForm: [],
      areaListForm: [],
      streetListForm: [],
      communityListForm: [],
      situationList: [
        { highlyConcernedSituation: '婚姻家庭不幸' },
        { highlyConcernedSituation: '有重大疾病' },
        { highlyConcernedSituation: '有暴力倾向' },
        { highlyConcernedSituation: '有弃世厌世倾向' },
        { highlyConcernedSituation: '扬言报复社会' }
      ],
      mzList: [],
      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: '表现出对社会不满、怨恨情绪，对法律和社会秩序缺乏尊重和认同，有报复社会的想法或言论'
        }
      ]
    }
  },
  methods: {
    init (v) {
      this.severUserInfo = this.$store.state.user.severUserInfo
      selectCityList({}).then((res) => {
        this.cityList = res.data.data
        this.cityListForm = JSON.parse(JSON.stringify(res.data.data))
      })
      this._getLoginUserAreaInfo()
      this._findMZList()
      this.getInfo(v)
      this.show = true
    },
    getInfo (data) {
      console.log('data>>', data)

      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.changeCityForm()
      this.changeAreaForm()
      this.changeStreetForm()
    },
    _getLoginUserAreaInfo () {
      getLoginUserAreaInfo().then((res) => {
        if (res.data.errcode === 0) {
          const userInfo = res.data.data
          // 设置当前用户层级，用于控制下拉框禁用状态
          this.currentUserLevel = userInfo.type
        }
      })
    },
    changeCityForm (e) {
      if (e) {
        this.peopleForm.cityId = e
      }
      if (!this.peopleForm.cityId) {
        this.areaListForm = []
        this.streetListForm = []
        this.communityListForm = []
        this.peopleForm.areaId = ''
        this.peopleForm.streetId = ''
        this.peopleForm.communityId = ''
        return Promise.resolve()
      }
      return selectCityList({ parent_id: this.peopleForm.cityId }).then((res) => {
        this.areaListForm = res.data.data
        // 清空下面的数组
        this.streetListForm = []
        this.communityListForm = []
      })
    },
    changeAreaForm (e) {
      if (e) {
        this.peopleForm.areaId = e
      }
      if (!this.peopleForm.areaId) {
        this.streetListForm = []
        this.communityListForm = []
        this.peopleForm.streetId = ''
        this.peopleForm.communityId = ''
        return Promise.resolve()
      }
      return selectCityList({ parent_id: this.peopleForm.areaId }).then((res) => {
        this.streetListForm = res.data.data
        this.communityListForm = []
      })
    },
    changeStreetForm (e) {
      if (e) {
        this.peopleForm.streetId = e
      }
      if (!this.peopleForm.streetId) {
        this.communityListForm = []
        this.peopleForm.communityId = ''
        return Promise.resolve()
      }
      return selectCityList({ parent_id: this.peopleForm.streetId }).then((res) => {
        this.communityListForm = res.data.data
      })
    },
    changeCommunityForm (e) {
      if (e) {
        this.peopleForm.communityId = e
      }
      return Promise.resolve()
    },
    _findMZList () {
      findMZList().then((ret) => {
        if (ret.data.errcode === 0) {
          this.mzList = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
