<template>
  <div>
    <div class="contradiction-div">
      <Tabs value="name1" v-model="tabValue">
        <TabPane label="基本信息" name="1">
          <div class="title-style">身份信息</div>
          <Form
            :model="formInline"
            ref="form1"
            label-position="left"
            :label-width="130"
          >
            <div
              v-for="(item, index) in formInline.userList"
              v-bind:key="index"
            >
              <Row :gutter="16">
                <Col span="6">
                  <FormItem
                    label="当事人类型："
                    :prop="'userList.' + index + '.eventUserType'"
                    :key="`${index}eventUserType`"
                    :rules="[
                      { required: true, message: '必填', trigger: 'change' },
                    ]"
                  >
                    <Select
                      v-model="item.eventUserType"
                      style="width: 90%"
                      @on-change="checkUserType(item.eventUserType)"
                    >
                      <Option value="1">自然人</Option>
                      <Option value="2">社会组织</Option>
                      <Option value="3">企业</Option>
                      <Option value="4">政府机关</Option>
                    </Select>
                  </FormItem>
                </Col>
                <Col span="6" v-if="item.eventUserType === '1'">
                  <FormItem
                    label="是否重点人群："
                    :prop="'userList.' + index + '.isKeynote'"
                    :key="`${index}isKeynote`"
                    :rules="[
                      { required: true, message: '必填', trigger: 'change' },
                    ]"
                  >
                    <Select v-model="item.isKeynote" style="width: 90%">
                      <Option value="1">是</Option>
                      <Option value="2">否</Option>
                    </Select>
                  </FormItem>
                </Col>
                <Col span="6" v-if="item.isKeynote === '1' && item.eventUserType === '1'">
                  <FormItem
                    label="重点人群类型："
                    :prop="'userList.' + index + '.keynoteType'"
                    :key="`${index}keynoteType`"
                    :rules="[
                      { required: true, message: '必填', trigger: 'change' },
                    ]"
                  >
                    <Select v-model="item.keynoteType" style="width: 90%">
                      <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>
                    </Select>
                  </FormItem>
                </Col>
                <Col span="6" v-if="flag === 'add'">
                  <Button type="primary" v-if="index == 0" @click="addPerson"
                  >添加当事人
                  </Button
                  >
                  <Button
                    type="error"
                    v-else-if="index > 0"
                    @click="deletePerson(index)"
                  >删除当事人
                  </Button
                  >
                </Col>
              </Row>
              <Row v-if="item.eventUserType == '1'">
                <Col span="6">
                  <FormItem
                    label="当事人："
                    :prop="'userList.' + index + '.eventUserName'"
                    :key="`${index}eventUserName${item.eventUserType}`"
                    :rules="[
                      { required: true, message: '必填', trigger: 'blur' },
                    ]"
                  >
                    <Input
                      v-model="item.eventUserName"
                      style="width: 90%"
                      placeholder="请输入当事人姓名"
                      :maxlength="20"
                    ></Input>
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem
                    label="身份证号码："
                    :prop="'userList.' + index + '.eventCardno'"
                    :key="`${index}eventCardno${item.eventUserType}`"
                    :rules="[
                      { required: true, message: '必填', trigger: 'blur' },
                      { validator: checkCardNo, trigger: 'blur' },
                    ]"
                  >
                    <!-- <FormItem label="身份证号码：" :prop="'userList.' + index + '.eventCardno'" > -->

                    <Input
                      v-model="item.eventCardno"
                      style="width: 90%"
                      placeholder="请输入身份证号码"
                      :maxlength="18"
                    ></Input>
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem
                    label="联系电话："
                    :prop="'userList.' + index + '.eventTel'"
                    :key="`${index}eventTel${item.eventUserType}`"
                    :rules="[
                      { required: true, message: '必填', trigger: 'blur' },
                      { validator: checkTel, trigger: 'blur' },
                    ]"
                  >
                    <Input
                      v-model="item.eventTel"
                      style="width: 90%"
                      placeholder="请输入联系电话"
                      :maxlength="15"
                    ></Input>
                  </FormItem>
                </Col>
              </Row>
              <Row v-if="item.eventUserType == '2'" :gutter="16">
                <Col span="6">
                  <FormItem
                    label="机构代表："
                    :prop="'userList.' + index + '.eventRepresent'"
                    :key="`${index}eventRepresent${item.eventUserType}`"
                    :rules="[
                      { required: true, message: '必填', trigger: 'blur' },
                    ]"
                  >
                    <Input
                      v-model="item.eventRepresent"
                      style="width: 90%"
                      placeholder="请输入机构代表"
                      :maxlength="30"
                    ></Input>
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem
                    label="身份证号码："
                    :prop="'userList.' + index + '.eventCardno'"
                    :key="`${index}eventCardno${item.eventUserType}`"
                    :rules="[
                      { required: true, message: '必填', trigger: 'blur' },
                      { validator: checkCardNo, trigger: 'blur' },
                    ]"
                  >
                    <Input
                      v-model="item.eventCardno"
                      style="width: 90%"
                      placeholder="请输入身份证号码"
                      :maxlength="18"
                    ></Input>
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem
                    label="机构代码："
                    :key="`${index}tyshxydm${item.eventUserType}`"
                  >
                    <Input
                      v-model="item.tyshxydm"
                      style="width: 90%"
                      placeholder="请输入机构代码"
                      :maxlength="20"
                    ></Input>
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem
                    label="机构名称："
                    :prop="'userList.' + index + '.eventUserName'"
                    :key="`${index}eventUserName${item.eventUserType}`"
                    :rules="[
                      { required: true, message: '必填', trigger: 'blur' },
                    ]"
                  >
                    <Input
                      v-model="item.eventUserName"
                      style="width: 90%"
                      placeholder="请输入机构名称"
                      :maxlength="30"
                    ></Input>
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem
                    label="联系电话："
                    :prop="'userList.' + index + '.eventTel'"
                    :key="`${index}eventTel${item.eventUserType}`"
                    :rules="[
                      { required: true, message: '必填', trigger: 'blur' },
                      { validator: checkNum, trigger: 'blur' },
                    ]"
                  >
                    <Input
                      v-model="item.eventTel"
                      style="width: 90%"
                      placeholder="请输入联系电话"
                      :maxlength="18"
                    ></Input>
                  </FormItem>
                </Col>
              </Row>
              <Row v-if="item.eventUserType == '3'">
                <Col span="6">
                  <FormItem
                    label="法定代表："
                    :prop="'userList.' + index + '.eventRepresent'"
                    :key="`${index}eventRepresent${item.eventUserType}`"
                    :rules="[
                      { required: true, message: '必填', trigger: 'blur' },
                    ]"
                  >
                    <Input
                      v-model="item.eventRepresent"
                      style="width: 90%"
                      placeholder="请输入法定代表"
                      :maxlength="20"
                    ></Input>
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem
                    label="身份证号码："
                    :prop="'userList.' + index + '.eventCardno'"
                    :key="`${index}eventCardno${item.eventUserType}`"
                    :rules="[
                      { required: true, message: '必填', trigger: 'blur' },
                      { validator: checkCardNo, trigger: 'blur' },
                    ]"
                  >
                    <Input
                      v-model="item.eventCardno"
                      style="width: 90%"
                      placeholder="请输入身份证号码"
                      :maxlength="18"
                    ></Input>
                  </FormItem>
                </Col>
<!--                <Col span="6">-->
<!--                  <FormItem-->
<!--                    label="社会信用代码："-->
<!--                    :prop="'userList.' + index + '.tyshxydm'"-->
<!--                    :key="`${index}tyshxydm${item.eventUserType}`"-->
<!--                    :rules="[-->
<!--                      { required: true, message: '必填', trigger: 'blur' },-->
<!--                    ]"-->
<!--                  >-->
<!--                    <Input-->
<!--                      v-model="item.tyshxydm"-->
<!--                      style="width: 90%"-->
<!--                      placeholder="请输入社会信用代码"-->
<!--                    ></Input>-->
<!--                  </FormItem>-->
<!--                </Col>-->
                <Col span="6">
                  <FormItem
                    label="社会信用代码："
                    :key="`${index}tyshxydm${item.eventUserType}`"
                  >
                    <Input
                      v-model="item.tyshxydm"
                      style="width: 90%"
                      placeholder="请输入社会信用代码"
                      :maxlength="18"
                    ></Input>
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem
                    label="单位名称："
                    :prop="'userList.' + index + '.eventUserName'"
                    :key="`${index}eventUserName${item.eventUserType}`"
                    :rules="[
                      { required: true, message: '必填', trigger: 'blur' },
                    ]"
                  >
                    <Input
                      v-model="item.eventUserName"
                      style="width: 90%"
                      placeholder="请输入单位名称"
                      :maxlength="30"
                    ></Input>
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem
                    label="联系电话："
                    :prop="'userList.' + index + '.eventTel'"
                    :key="`${index}eventTel${item.eventUserType}`"
                    :rules="[
                      { required: true, message: '必填', trigger: 'blur' },
                      { validator: checkNum, trigger: 'blur' },
                    ]"
                  >
                    <Input
                      v-model="item.eventTel"
                      style="width: 90%"
                      placeholder="请输入联系电话"
                      :maxlength="15"
                    ></Input>
                  </FormItem>
                </Col>
              </Row>
              <Row v-if="item.eventUserType == '4'">
                <Col span="6">
                  <FormItem
                    label="社会信用代码："
                    :prop="'userList.' + index + '.tyshxydm'"
                    :key="`${index}tyshxydm${item.eventUserType}`"
                    :rules="[
                      { required: true, message: '必填', trigger: 'blur' },
                    ]"
                  >
                    <Input
                      v-model="item.tyshxydm"
                      style="width: 90%"
                      placeholder="请输入社会信用代码"
                      :maxlength="18"
                    ></Input>
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem
                    label="单位名称："
                    :prop="'userList.' + index + '.eventUserName'"
                    :key="`${index}eventUserName${item.eventUserType}`"
                    :rules="[
                      { required: true, message: '必填', trigger: 'blur' },
                    ]"
                  >
                    <Input
                      v-model="item.eventUserName"
                      style="width: 90%"
                      placeholder="请输入单位名称"
                      :maxlength="30"
                    ></Input>
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem
                    label="联系电话："
                    :prop="'userList.' + index + '.eventTel'"
                    :key="`${index}eventTel${item.eventUserType}`"
                    :rules="[
                      { required: true, message: '必填', trigger: 'blur' },
                      { validator: checkNum, trigger: 'blur' },
                    ]"
                  >
                    <Input
                      v-model="item.eventTel"
                      style="width: 90%"
                      placeholder="请输入联系电话"
                      :maxlength="15"
                    ></Input>
                  </FormItem>
                </Col>
              </Row>
            </div>
          </Form>
          <div class="title-style">矛盾纠纷信息</div>
          <Form
            :model="formInline"
            ref="form2"
            label-position="left"
            :label-width="130"
          >
            <Row>
              <Col span="6">
                <FormItem
                  prop="riskLevel"
                  :rules="[
                    { required: true, message: '必填', trigger: 'change' },
                  ]">
                  <template slot="label">
                    <span style="">风险等级：</span>
                    <Poptip trigger="hover"  width="800" placement="right" word-wrap>
                      <template slot="content">
                        <div v-if="formInline.riskLevel === '一般矛盾纠纷'">
                          <div class="risk-tishi mt30 p20">
                            <div style="">一般矛盾纠纷:</div>
                            <div style="margin-top: 10px;text-indent: 2.5rem">
                              指较为轻微、容易解决、对社会稳定和当事人影响较小，经过简单的沟通、调解就能化解的矛盾纠纷。这类矛盾纠纷影响范围小、危害程度低、解决难度不大，存在风险隐患较小，可采取常规措施进行处置。主要包括:
                            </div>
                            <div style="margin-top: 10px">
                              1.纠纷事实清楚，权利义务关系明确，利益损害轻微、争议不大，经调解可达成口头协议或可即时履行协议的矛盾纠纷。
                            </div>
                            <div style="margin-top: 10px">
                              2.公民之间、公民与法人以及其他社会组织之间发生的涉案人数较少，涉案金额较低的矛盾纠纷。
                            </div>
                            <div style="margin-top: 10px">
                              3.易发多发于邻里之间的小摩擦、日常生活中的小误会、轻微损害赔偿、侵权等领域的矛盾纠纷。
                            </div>
                            <div style="margin-top: 10px">
                              4.当事人不属于重点人群，所涉矛盾纠纷不是重点信访事项、重点涉法涉诉类矛盾的矛盾纠纷。
                            </div>
                          </div>
                        </div>
                        <div
                          v-else-if="formInline.riskLevel === '复杂矛盾纠纷'"
                        >
                          <div class="risk-tishi mt30 p20">
                            <div style="">复杂矛盾纠纷:</div>
                            <div style="margin-top: 10px;text-indent: 2.5rem">
                              指可能激化导致引发一般刑事案件以及故意伤害、打架斗殴等治安案件，干扰当事人正常生产生活秩序的矛盾纠纷。这类矛盾纠纷影响范围较大、危害程度较高、解决难度适中，存在一定风险隐患，需要及时介入和调解，防止矛盾纠纷进一步升级，主要包括:
                            </div>
                            <div style="margin-top: 10px">1.涉案标的金额5万元以下的矛盾纠纷。</div>
                            <div style="margin-top: 10px">2.涉案人数在5人以下的群体性矛盾纠纷。</div>
                            <div style="margin-top: 10px">3.各级信访部门交办，且案情较为复杂的矛盾纠纷。</div>
                            <div style="margin-top: 10px">
                              4.积怨较深、成因复杂，虽经调解组织多次调解，但仍未化解的矛盾纠纷。
                            </div>
                            <div style="margin-top: 10px">
                              5.家庭类、情感类、邻里类、经济类、土地类纠纷中，矛盾激烈、易引发刑事案件的矛盾纠纷。
                            </div>
                            <div style="margin-top: 10px">
                              6.重点人群涉及的一般矛盾纠纷和非重点人群涉及的重点信访事项、重点涉法涉诉类矛盾纠纷。
                            </div>
                          </div>
                        </div>
                        <div
                          v-else-if="formInline.riskLevel === '重大矛盾纠纷'"
                        >
                          <div class="risk-tishi mt30 p20">
                            <div style="">重大矛盾纠纷:</div>
                            <div style="margin-top: 10px;text-indent: 2.5rem">
                              指可能激化引发重特大案(事)件、个人极端案(事)件、群体性越级访和非访的矛盾纠纷，持续时间长，影响政治安全和社会稳定的矛盾纠纷。这类矛盾纠纷影响范围大、危害程度高、解决难度大，存在较大风险隐患，需要引起高度关注和重视。主要包括：
                            </div>
                            <div style="margin-top: 10px">1.涉案标的金额5万元及以上的矛盾纠纷。</div>
                            <div style="margin-top: 10px">2.涉案人数5人及以上的群体性矛盾纠纷。</div>
                            <div style="margin-top: 10px">3.多年累积、反复性大、对当地社会稳定造成较大影响的矛盾纠纷。
                            </div>
                            <div style="margin-top: 10px">4.多人多次非正常上访、造成重大社会影响的信访纠纷。</div>
                            <div style="margin-top: 10px">5.重特大生产安全事故引发的矛盾纠纷。</div>
                            <div style="margin-top: 10px">6.上级党委、政府督办或党政领导交办的重大疑难矛盾纠纷。</div>
                            <div style="margin-top: 10px">
                              7.重点人群涉及的重点信访事项、重点涉法涉诉类矛盾，或在此基础上，重点人存在婚姻家庭不幸、有重大疾病、有暴力倾向、有弃世厌世倾向、扬言报复社会等情形的矛盾纠纷。
                            </div>
                          </div>
                        </div>
                        <div v-else></div>
                      </template>
                      <span style=""
                      ><Icon type="md-help-circle" style="margin-top: -2px"
                      /></span>
                    </Poptip>
                  </template>
                  <Select
                    v-model="formInline.riskLevel"

                    style="width: 90%"
                  >
                    <Option value="一般矛盾纠纷" label="一般矛盾纠纷">
                      <img
                        class="level-option-img"
                        src="@/assets/images/warning4.png"
                        alt=""
                      />
                      <span style="padding-left: 10px">一般矛盾纠纷</span>
                    </Option>
                    <Option value="复杂矛盾纠纷" label="复杂矛盾纠纷">
                      <img
                        class="level-option-img"
                        src="@/assets/images/warning5.png"
                        alt=""
                      />
                      <span style="padding-left: 10px">复杂矛盾纠纷</span>
                    </Option>
                    <Option value="重大矛盾纠纷" label="重大矛盾纠纷">
                      <img
                        class="level-option-img"
                        src="@/assets/images/warning6.png"
                        alt=""
                      />
                      <span style="padding-left: 10px">重大矛盾纠纷</span>
                    </Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="6" style="display: flex;">
                <Poptip trigger="click" placement="bottom-end" width="400">
                  <template slot="content">
                    <Steps
                      :current="riskList.length"
                      direction="vertical"
                      v-if="riskList && riskList.length > 0"
                    >
                      <Step
                        v-for="(item, index) in riskList"
                        v-bind:key="index"
                      >
                        <template slot="title"
                        >风险等级：{{ item.riskLevel }}级
                        </template
                        >
                        <template slot="content"
                        >操作人：{{ item.create_name }}
                        </template
                        >
                      </Step>
                    </Steps>
                    <p v-else style="text-align: center">暂无数据</p>
                  </template>
                  <!--                  <Button type="primary" @click="getRiskList()"-->
                  <!--                    >风险等级历史</Button-->
                  <!--                  >-->
                </Poptip>
                <Button v-if="formInline.riskLevel && formInline.riskLevel !=='一般矛盾纠纷'" type="info"
                        style="margin-left: 10px;" @click="showRiskFactor()"
                >选择风险因子
                </Button
                >
              </Col>
              <Col span="6">
                <div v-if="formInline.riskLevel && formInline.riskLevel !=='一般矛盾纠纷'">
                  <template v-if="type === '2' || type === '3' || !type">
                    <Tag v-for="item in formInline.riskNameList" :key="item">{{ item }}</Tag>
                  </template>
                  <template v-else>
                    <Tag v-for="item in formInline.riskName" :key="item" closable @on-close="handleClose(item)">{{
                        item
                      }}
                    </Tag>
                  </template>
                </div>
              </Col>

              <Col span="3" v-if="formInline.riskLevel"></Col>
            </Row>
            <Row>
              <Col span="6">
                <FormItem
                  label="纠纷大类："
                  prop="info"
                  key="info"
                  :rules="[
                    { required: true, message: '必填', trigger: 'change' },
                  ]"
                >
                  <Select
                    v-model="formInline.info"
                    @on-change="changeDispute(formInline.info)"
                    style="width: 90%"
                  >
                    <Option
                      v-for="item in dictData.list1"
                      :value="JSON.stringify(item)"
                      :key="item.value"
                    >{{ item.label }}
                    </Option
                    >
                  </Select>
                </FormItem>
              </Col>
              <Col span="6">
                <FormItem
                  label="纠纷小类："
                  prop="eventTypeId"
                  key="eventTypeId"
                  :rules="[
                    { required: true, message: '必填', trigger: 'change' },
                  ]"
                >
                  <Select
                    v-model="formInline.eventTypeId"
                    style="width: 90%"
                    :label-in-value="true"
                    @on-change="changeEventType"
                  >
                    <Option
                      v-for="item in dictData.list2"
                      :value="item.value"
                      :key="item.value"
                    >{{ item.label }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="6">
                <FormItem
                  label="是否涉众："
                  key="is_involve_everyone"
                  prop="is_involve_everyone"
                  :rules="[
                    { required: true, message: '必填', trigger: 'change' },
                  ]"
                >
                  <Select
                    v-model="formInline.is_involve_everyone"
                    style="width: 90%"
                  >
                    <Option value="0">否</Option>
                    <Option value="1">是</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="6" v-if="formInline.is_involve_everyone === '1'">
                <FormItem
                  label="涉众人数范围："
                  key="is_involve_everyone_count"
                  prop="is_involve_everyone_count"
                  :rules="[
                    { required: true, message: '必填', trigger: 'change' },
                  ]"
                >
                  <Select
                    v-model="formInline.is_involve_everyone_count"
                    style="width: 90%"
                  >
                    <Option value="0">5-30人</Option>
                    <Option value="1">31-300人</Option>
                    <Option value="2">300人以上</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="12" v-if="formInline.info && (JSON.parse(formInline.info).label === '其他')">
                <FormItem
                  label="其他纠纷大类："
                  key="event_category_other_name"
                  prop="event_category_other_name"
                  :rules="[
                    { required: true, message: '必填', trigger: 'blur' },
                  ]"
                >
                  <Input
                    v-model="formInline.event_category_other_name"
                    type="text"
                    placeholder="请输入其他纠纷大类"
                  ></Input>
                </FormItem>
              </Col>
              <Col span="12" v-if="formInline.eventTypeLabel === '其他'">
                <FormItem
                  label="其他纠纷小类："
                  key="event_category_mini_other_name"
                  prop="event_category_mini_other_name"
                  :rules="[
                    { required: true, message: '必填', trigger: 'blur' },
                  ]"
                >
                  <Input
                    v-model="formInline.event_category_mini_other_name"

                    type="text"
                    placeholder="请输入其他纠纷小类"
                  ></Input>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="16">
              <Col span="6">
                <FormItem
                  label="发生时间："
                  prop="occurrenceTime"
                  key="occurrenceTime"
                  :rules="[
                    {
                      required: true,
                      type: 'date',
                      message: '必填',
                      trigger: 'change',
                    },
                  ]"
                >
                  <DatePicker
                    type="datetime"
                    v-model="formInline.occurrenceTime"

                    placeholder="请选择发生时间"
                    @on-change="occurrenceTimeChange"
                  ></DatePicker>
                </FormItem>
              </Col>
              <!-- <Col span="6" v-if="formInline.is_involve_everyone === '1'">
                <FormItem
                  label="涉众人数范围："
                  key="is_involve_everyone_count"
                  prop="is_involve_everyone_count"
                  :rules="[
                    { required: true, message: '必填', trigger: 'change' },
                  ]"
                >
                  <Select
                    v-model="formInline.is_involve_everyone_count"
                    style="width: 90%"

                  >
                    <Option value="0">5-30人</Option>
                    <Option value="1">31-300人</Option>
                    <Option value="2">300以上</Option>
                  </Select>
                </FormItem>
              </Col> -->
              <Col span="5">
                <!-- v-if="serverUserInfo.company_grade != '3'" -->
                <!--              <FormItem label="纠纷发生地：" prop="cityId" :rules="[{required: true, message: '必填', trigger: 'change' }]">-->
                <FormItem label="纠纷发生地：" key="cityId" prop="cityId"
                          :rules="[{ required: true, message: '必填', trigger: 'change' },]">
                  <Select
                    v-model="formInline.cityId"
                    @on-change="changeArea('2', formInline.cityId)"
                    placeholder="请选择市"

                    style="width: 90%"
                  >
                    <Option
                      v-for="item in areaData.list1"
                      :value="item.parent_id"
                      :key="item.parent_id"
                    >{{ item.name }}
                    </Option
                    >
                  </Select>
                </FormItem>
              </Col>
              <Col span="3">
                <FormItem
                  prop="areaId"
                  key="areaId"
                  :label-width="0"
                  :rules="[
                      { required: true, message: '必填', trigger: 'change' },
                    ]"
                >
                  <Select
                    v-model="formInline.areaId"
                    @on-change="changeArea('3', formInline.areaId)"
                    placeholder="请选择区"

                    style="width: 90%"
                  >
                    <Option
                      v-for="item in areaData.list2"
                      :value="item.parent_id"
                      :key="item.parent_id"
                    >{{ item.name }}
                    </Option
                    >
                  </Select>
                </FormItem>
              </Col>
              <Col span="3">
                <FormItem
                  prop="streetId"
                  key="streetId"
                  :label-width="0"
                  :rules="[
                      { required: true, message: '必填', trigger: 'change' },
                    ]"
                >
                  <Select
                    v-model="formInline.streetId"
                    @on-change="changeArea('4', formInline.streetId)"
                    placeholder="请选择街道"

                    style="width: 90%;"
                  >
                    <Option
                      v-for="item in areaData.list3"
                      :value="item.parent_id"
                      :key="item.parent_id"
                    >{{ item.name }}
                    </Option
                    >
                  </Select>
                </FormItem>
              </Col>
              <Col span="3">
                <FormItem
                  key="communityId"
                  :label-width="0"
                >
                  <Select
                    v-model="formInline.communityId"
                    placeholder="请选择社区"

                    style="width: 90%"
                  >
                    <Option
                      v-for="item in areaData.list4"
                      :value="item.parent_id"
                      :key="item.parent_id"
                    >{{ item.name }}
                    </Option
                    >
                  </Select>
                </FormItem>
              </Col>
              <!--              <Col span="3">-->
              <!--                <FormItem-->
              <!--                  prop="gardenId"-->
              <!--                  key="gardenId"-->
              <!--                  :label-width="0"-->
              <!--                >-->
              <!--                  <Input-->
              <!--                    v-model="formInline.gardenId"-->
              <!--                    -->
              <!--                    style="width: 90%; margin-left: 0px"-->
              <!--                    placeholder="请输入网格"-->
              <!--                  ></Input>-->
              <!--                </FormItem>-->
              <!--              </Col>-->
            </Row>
            <Row>
              <!-- <Col span="3">
              <FormItem prop="buildingId" style="margin-left:-100px;">
                <Input v-model="formInline.buildingId"  style="width:90%;margin-left:0px;" placeholder="请输入楼" ></Input>
              </FormItem>
            </Col>
            <Col span="3">
              <FormItem prop="unitId" style="margin-left:-100px;">
                <Input v-model="formInline.unitId"  style="width:90%;margin-left:0px;" placeholder="请输入单元"></Input>
              </FormItem>
            </Col>
            <Col span="3">
              <FormItem prop="floorId" style="margin-left:-100px;">
                <Input v-model="formInline.floorId"  style="width:90%;margin-left:0px;" placeholder="请输入层"></Input>
              </FormItem>
            </Col>
            <Col span="3">
              <FormItem prop="doorplateId" style="margin-left:-100px;">
                <Input v-model="formInline.doorplateId"  style="width:90%;margin-left:0px;" placeholder="请输入户"></Input>
              </FormItem>
            </Col> -->
            </Row>
            <Row>
              <Col span="6">
                <FormItem
                  label="受理人姓名："
                  key="event_name"
                  prop="event_name"
                  :rules="[
                    { required: true, message: '必填', trigger: 'blur' },
                  ]"
                >
                  <Input
                    v-model="formInline.event_name"

                    style="width: 90%"
                    type="text"
                    placeholder="请输入受理人姓名"
                    :maxlength="20"
                  ></Input>
                </FormItem>
              </Col>
              <Col span="6">
                <FormItem
                  label="受理人电话："
                  key="event_tel"
                  prop="event_tel"
                  :rules="[
                      { required: true, message: '必填', trigger: 'blur' },
                      { validator: checkNum, trigger: 'blur' },
                    ]"
                >
                  <Input
                    v-model="formInline.event_tel"

                    style="width: 90%"
                    type="text"
                    placeholder="请输入受理人电话"
                    :maxlength="15"
                  ></Input>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <FormItem
                  label="详细地址："
                  key="address"

                >
                  <Input
                    v-model="formInline.address"

                    type="textarea"
                    :rows="2"
                    placeholder="请输入详细地址"
                    :maxlength="200"
                  ></Input>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <FormItem
                  label="纠纷简述："
                  key="disputeDescription"
                  prop="disputeDescription"
                  :rules="[
                    { required: true, message: '必填', trigger: 'blur' },
                  ]"
                >
                  <Input
                    v-model="formInline.disputeDescription"

                    type="textarea"
                    :rows="4"
                    :maxlength="500"
                    placeholder="请输入纠纷简述"
                  ></Input>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <!-- 重点事件暂时隐藏 -->
              <!-- <div class="more-style" v-if="!pointShow">
                <div @click="changeMore" style="cursor: pointer">
                  {{ moreTitle
                  }}<i
                    class="iconfont icon-shuangxianxiajiantou"
                    style="margin-left: 4px; font-size: 12px"
                  ></i>
                </div>
              </div>
              <div class="more-style" v-if="pointShow">
                <div @click="changeMore" style="cursor: pointer">
                  {{ moreTitle
                  }}<i
                    class="iconfont icon-shuangxianshangjiantou"
                    style="margin-left: 4px; font-size: 12px"
                  ></i>
                </div>
              </div> -->
              <Row v-if="pointShow">
                <!-- <Col span="6">
                  <FormItem
                    label="重点事件："
                    key="isPointEvent"
                    prop="isPointEvent"
                  >
                    <Select
                      v-model="formInline.isPointEvent"

                      style="width: 90%"
                    >
                      <Option value="1">是</Option>
                      <Option value="2">否</Option>
                    </Select>
                  </FormItem>
                </Col> -->
                <!--                <Col span="5">-->
                <!-- v-if="serverUserInfo.company_grade != '3'" -->
                <!--              <FormItem label="纠纷发生地：" prop="cityId" :rules="[{required: true, message: '必填', trigger: 'change' }]">-->
                <!--                  <FormItem label="纠纷发生地：" key="cityId" prop="cityId">-->
                <!--                    <Select-->
                <!--                      v-model="formInline.cityId"-->
                <!--                      :disabled="serverUserInfo.company_grade >= 3"-->
                <!--                      @on-change="changeArea('2', formInline.cityId)"-->
                <!--                      placeholder="请选择市"-->
                <!--                      style="width: 90%"-->
                <!--                    >-->
                <!--                      <Option-->
                <!--                        v-for="item in areaData.list1"-->
                <!--                        :value="item.parent_id"-->
                <!--                        :key="item.parent_id"-->
                <!--                        >{{ item.name }}</Option-->
                <!--                      >-->
                <!--                    </Select>-->
                <!--                  </FormItem>-->
                <!--                </Col>-->
                <!--                <Col span="3">-->
                <!--                  <FormItem-->
                <!--                    prop="areaId"-->
                <!--                    key="areaId"-->
                <!--                    :label-width="0"-->
                <!--                    :rules="[-->
                <!--                      { required: true, message: '必填', trigger: 'change' },-->
                <!--                    ]"-->
                <!--                  >-->
                <!--                    <Select-->
                <!--                      v-model="formInline.areaId"-->
                <!--                      :disabled="serverUserInfo.company_grade >= 4"-->
                <!--                      @on-change="changeArea('3', formInline.areaId)"-->
                <!--                      placeholder="请选择区"-->
                <!--                      style="width: 90%"-->
                <!--                    >-->
                <!--                      <Option-->
                <!--                        v-for="item in areaData.list2"-->
                <!--                        :value="item.parent_id"-->
                <!--                        :key="item.parent_id"-->
                <!--                        >{{ item.name }}</Option-->
                <!--                      >-->
                <!--                    </Select>-->
                <!--                  </FormItem>-->
                <!--                </Col>-->
                <!--                <Col span="3">-->
                <!--                  <FormItem-->
                <!--                    prop="streetId"-->
                <!--                    key="streetId"-->
                <!--                    :label-width="0"-->
                <!--                    :rules="[-->
                <!--                      { required: true, message: '必填', trigger: 'change' },-->
                <!--                    ]"-->
                <!--                  >-->
                <!--                    <Select-->
                <!--                      v-model="formInline.streetId"-->
                <!--                      :disabled="serverUserInfo.company_grade >= 5"-->
                <!--                      @on-change="changeArea('4', formInline.streetId)"-->
                <!--                      placeholder="请选择街道"-->
                <!--                      style="width: 90%; color: #0c0c0c"-->
                <!--                    >-->
                <!--                      <Option-->
                <!--                        v-for="item in areaData.list3"-->
                <!--                        :value="item.parent_id"-->
                <!--                        :key="item.parent_id"-->
                <!--                        >{{ item.name }}</Option-->
                <!--                      >-->
                <!--                    </Select>-->
                <!--                  </FormItem>-->
                <!--                </Col>-->
                <!--                <Col span="3">-->
                <!--                  <FormItem-->
                <!--                    prop="communityId"-->
                <!--                    key="communityId"-->
                <!--                    :label-width="0"-->
                <!--                    :rules="[-->
                <!--                      { required: true, message: '必填', trigger: 'change' },-->
                <!--                    ]"-->
                <!--                  >-->
                <!--                    <Select-->
                <!--                      v-model="formInline.communityId"-->
                <!--                      :disabled="serverUserInfo.company_grade >= 6"-->
                <!--                      placeholder="请选择社区"-->
                <!--                      style="width: 90%"-->
                <!--                    >-->
                <!--                      <Option-->
                <!--                        v-for="item in areaData.list4"-->
                <!--                        :value="item.parent_id"-->
                <!--                        :key="item.parent_id"-->
                <!--                        >{{ item.name }}</Option-->
                <!--                      >-->
                <!--                    </Select>-->
                <!--                  </FormItem>-->
                <!--                </Col>-->
                <!--                <Col span="3">-->
                <!--                  <FormItem-->
                <!--                    prop="gardenId"-->
                <!--                    key="gardenId"-->
                <!--                    :label-width="0"-->
                <!--                  >-->
                <!--                    <Input-->
                <!--                      v-model="formInline.gardenId"-->
                <!--                      -->
                <!--                      style="width: 90%; margin-left: 0px"-->
                <!--                      placeholder="请输入网格"-->
                <!--                    ></Input>-->
                <!--                  </FormItem>-->
                <!--                </Col>-->
              </Row>
              <Col span="6">
                <FormItem label="上报人：" key="reportName">
                  <Input
                    disabled
                    v-model="reportingName"
                    style="width: 90%"
                  ></Input>
                </FormItem>
              </Col>
              <Col span="6">
                <FormItem label="上报人单位：" key="reportCompanyName">
                  <Input
                    disabled
                    v-model="reportingUnit"
                    style="width: 90%"
                  ></Input>
                </FormItem>
              </Col>
            </Row>
            <Row style="margin-bottom: 20px;">
              <Col span="6">
                <FormItem
                  label="是否化解："
                  prop="isResolve"
                  :rules="[
                    { required: true, message: '必填', trigger: 'change' },
                  ]"
                >
                  <Select
                    v-model="formInline.isResolve"
                    transfer
                    style="width: 90%"
                  >
                    <Option value="1">是</Option>
                    <Option value="2">否</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
          </Form>
          <div class="title-style"
               v-if="(params.what === 'edit' && isShowInfo) ? (formInline.isResolve === '1') : formInline.isResolve === '1'">
            化解过程
          </div>
          <Form
            :model="formInline"
            ref="form3"
            label-position="left"
            :label-width="150"
            v-if="(params.what === 'edit' && isShowInfo) ? (formInline.isResolve === '1') : formInline.isResolve === '1'"
          >
            <Row>
              <Col span="8">
                <FormItem
                  label="化解人："
                  key="resolveName"
                  prop="resolveName"
                  :rules="[
                    { required: true, message: '必填', trigger: 'blur' },
                  ]"
                >
                  <Input
                    v-model="formInline.resolveName"
                    style="width: 80%"
                    placeholder="请输入化解人"
                    :maxlength="20"
                  ></Input>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem
                  label="化解人所属单位："
                  key="resolveUnit"
                  prop="resolveUnit"
                  :rules="[
                    { required: true, message: '必填', trigger: 'blur' },
                  ]"
                >
                  <Input
                    v-model="formInline.resolveUnit"
                    style="width: 80%"
                    placeholder="请输入化解人所属单位"
                    :maxlength="30"
                  ></Input>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem
                  label="化解层级："
                  key="resolveHierarchy"
                  prop="resolveHierarchy"
                  :rules="[
                    { required: true, message: '必填', trigger: 'blur' },
                  ]"
                >
                  <Select
                    v-model="formInline.resolveHierarchy"
                    style="width: 80%"
                  >
                    <Option value="1">省级</Option>
                    <Option value="2">市级</Option>
                    <Option value="3">县级</Option>
                    <Option value="4">乡镇街道</Option>
                    <Option value="5">村/社区</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="8">
                <FormItem
                  label="化解方式："
                  key="resolveWay"
                  prop="resolveWay"
                  :rules="[
                    { required: true, message: '必填', trigger: 'blur' },
                  ]"
                >
                  <Select v-model="formInline.resolveWay" style="width: 80%">
                    <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>
                  </Select>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem
                  label="化解时间："
                  key="resolveTime"
                  prop="resolveTime"
                  :rules="[
                    {
                      required: true,
                      type: 'date',
                      message: '必填',
                      trigger: 'change',
                    },
                  ]"
                >
                  <DatePicker
                    type="datetime"
                    v-model="formInline.resolveTime"
                    placeholder="请选择化解时间"
                    :options="dateOptions"
                    @on-change="resolveTimeChange"
                    style="width: 80%"
                    transfer
                  ></DatePicker>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem
                  label="化解是否满意："
                  key="isSatisfaction"
                  prop="isSatisfaction"
                  :rules="[
                    { required: true, message: '必填', trigger: 'change' },
                  ]"
                >
                  <Select
                    v-model="formInline.isSatisfaction"
                    placeholder="请选择是否满意"
                    style="width: 80%"
                  >
                    <Option value="1">是</Option>
                    <Option value="2">否</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <FormItem
                  label="化解过程描述："
                  key="resolveProcess"
                  prop="resolveProcess"
                  :rules="[
                    { required: true, message: '必填', trigger: 'blur' },
                  ]"
                >
                  <Input
                    v-model="formInline.resolveProcess"
                    type="textarea"
                    :rows="4"
                    placeholder="请输入化解过程描述"
                    :maxlength="300"
                  ></Input>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <FormItem label="附件上传：" key="resolveFj">
                  <Upload
                    action="#"
                    :show-upload-list="false"
                    :before-upload="beforeUpload"
                    :format="['jpg','jpeg','png']"
                  >
                    <Button icon="ios-cloud-upload-outline">上传图片</Button>
                  </Upload>
                </FormItem>
              </Col>
            </Row>
            <img :src="imageUrl" alt=""/>
            <Row>
              <Col span="24">
                <div
                  class="demo-upload-list"
                  v-for="(item, index) in imgArr"
                  v-bind:key="index"
                >
                  <template>
                    <img :src="item.url"/>
                    <div class="demo-upload-list-cover">
                      <Icon
                        type="ios-eye-outline"
                        @click.native="handleView(item, index)"
                      ></Icon>
                      <Icon
                        type="ios-trash-outline"
                        v-if="params.what === 'edit' && params.dispose"
                        @click.native="handleRemove(index)"
                      ></Icon>
                    </div>
                  </template>
                </div>
                <!-- <img v-if="imgUrl" :src="imgUrl" alt="" style="width:100px;height:100px;"> -->
              </Col>
            </Row>
          </Form>
          <!--          <div class="title-style" v-if="params.level == 'street'">-->
          <!--            处置情况-->
          <!--          </div> -->
          <div class="title-style"
               v-if="(params.what === 'edit' && isShowInfo) ? (formInline.isResolve === '1' && formInline.resolveName) : formInline.isResolve === '1'">
            处置情况
          </div>
          <Form
            :model="formInline"
            ref="form4"
            label-position="left"
            :label-width="130"
            v-if="(params.what === 'edit' && isShowInfo) ? (formInline.isResolve === '1' && formInline.resolveName) : formInline.isResolve === '1'"
          >
            <Row>
              <Col span="24">
                <FormItem
                  label="处置过程描述："
                  key="logResult"
                  prop="logResult"
                  :rules="[
                    { required: true, message: '必填', trigger: 'blur' },
                  ]"
                >
                  <Input
                    v-model="formInline.logResult"
                    type="textarea"
                    :rows="4"
                    placeholder="处置过程描述"
                    :maxlength="300"
                  ></Input>
                </FormItem>
              </Col>
            </Row>
          </Form>
          <div
            class="title-style"
            v-if="
              (params.what === 'edit' && params.wgyBj) || formInline.eventCheck
            "
          >
            核查情况
          </div>
          <Form
            :model="formInline"
            ref="form5"
            label-position="left"
            :label-width="130"
            v-if="
              (params.what === 'edit' && params.wgyBj) || formInline.eventCheck
            "
          >
            <Row>
              <Col span="24">
                <FormItem
                  label="核查内容描述："
                  key="eventCheck"
                  prop="eventCheck"
                  :rules="[
                    { required: true, message: '必填', trigger: 'blur' },
                  ]"
                >
                  <Input
                    v-model="formInline.eventCheck"
                    type="textarea"
                    :rows="4"
                    :maxlength="300"
                    placeholder="请输入核查内容"
                  ></Input>
                </FormItem>
              </Col>
            </Row>
          </Form>
          <div class="flex-div">
            <Button
              type="primary"
              class="mr10 mb10"
              :loading="reportLoading"
              v-if="params.level === 'bl' && formInline.isResolve !== '1'"
              @click="report('form1')"
            >上报
            </Button >
              <Button
              type="primary"
              class="mr10 mb10"
              :loading="reportLoading"
              v-if="
                formInline.isResolve === '1' &&
                !params.dispose
              "
              @click="complete()"
            >办结
            </Button
            >
            <Button
              type="primary"
              class="mr10 mb10"
              v-if="
                serverUserInfo.company_grade !== '6' && params.level === 'bl' &&
                formInline.isResolve !== '1' && !isHXOffice
              "
              @click="cross('form1')"
            >转办
            </Button
            >
            <Button
              type="primary"
              class="mr10 mb10"
              v-if="
                serverUserInfo.company_grade !== '6' && params.level === 'bl' &&
                formInline.isResolve !== '1' && !isHXOffice
              "
              @click="lowerFaction('form1')"
            >下派
            </Button
            >
          </div>
        </TabPane>
        <TabPane label="进度信息" name="2" v-if="params.id">
          <Card>
            <Steps :current="current" direction="vertical">
              <Step v-for="(item, index) in processList" v-bind:key="index">
                <!--                <template slot="title" >-->
                <!--                  <Steps>-->
                <!--                    <Step-->
                <!--                      v-for="(item1, index1) in item.processList"-->
                <!--                      v-bind:key="index1"-->
                <!--                      style="width: 300px"-->
                <!--                    >-->
                <template slot="title">
                  {{ item.hierarchyName }}
                </template>
                <template slot="content">
                  <div v-if="item.is_show_hf_history === '1'" style="margin-left:180px;position: fixed;opacity: 1">
                    <div class="stamp">
                      <div class="stamp-text">已办结</div>
                    </div>
                  </div>
                  <div v-if="item.completeTime">
                    完成时间：{{ item.completeTime }}
                  </div>
                  <div v-if="item.receiveTime">
                    受理时间：{{ item.receiveTime }}
                  </div>
                  <!--                        <div v-if="item.logType">-->
                  <!--                          流程：{{ logTypeArr.find(e => e.value === item.logType).label }}-->
                  <!--                        </div>-->
                  <div v-if="item.status">
                    部门受理状况：{{ item.status === '1' ? '待处理' : item.status === '2' ? '已受理' : '已完成' }}
                  </div>
                  <div v-if="item.deal_log_type === '4' || item.deal_log_type === '6'|| item.deal_log_type === '2'">
                    {{ item.deal_log_type === '4' ? '退回原因' : item.deal_log_type === '6' ? '下派原因' : item.deal_log_type === '2' ? '处置过程' : '' }}：{{
                      item.deal_log_type === '2' && item.eventCheck ? item.eventCheck : item.logResult
                    }}
                  </div>
                  <div v-if="item.deal_log_type === '3'">
                    转办原因：{{ item.assignResult }}
                  </div>
                  <div v-if="item.is_show_hf_history === '1'">
                    <Button
                      @click="evaluation(item)"
                      type="error"
                      class="mr5"
                    >回访记录
                    </Button>
                  </div>
                  <div v-if="item.isResolve === '1' && item.resolveName && item.resolveName.trim() !== ''"
                       :style="item.is_show_hf_history === '1' ? 'margin-top: 10px;' : ''">
                    <Button
                      @click="evaluationButton(item)"
                      type="error"
                      class="mr5"
                    >处置详情
                    </Button>
                  </div>
                </template>

              </Step>
            </Steps>
          </Card>
        </TabPane>
      </Tabs>

      <Modal v-model="modal1" title="提示">
        <p>{{ confirmTtile }}</p>
        <div slot="footer">
          <Button type="default" @click="modal1 = false">取消</Button>
          <Button type="primary" @click="save">确定</Button>
        </div>
      </Modal>
      <Modal title="查看图片" v-model="visible">
        <img :src="imgName" v-if="visible" style="width: 100%"/>
      </Modal>
      <Modal v-model="modal2" title="转办机构">
        <Row>
          <Col span="24">
            <span class="red-star-div">转办机构：</span>
            <Select v-model="crossOfficeIds"  multiple style="width: 80%">
              <Option
                v-for="(item, index) in crossList"
                :value="item.crossOfficeId"
                :key="index"
              >{{ item.name }}
              </Option
              >
            </Select>
          </Col>
          <Col span="24">
            <span class="red-star-div">办理说明：</span>
            <Input
              v-model="assignResult"
              style="margin-top: 10px"
              type="textarea"
              placeholder="请输入办理说明"
            />
          </Col>
        </Row>
        <div slot="footer">
          <Button type="default" @click="modal2 = false">取消</Button>
          <Button type="primary" @click="crossEventData">确定</Button>
        </div>
      </Modal>
      <Modal v-model="modal3" title="下派机构">
        <Row>
          <Col span="24">
            <span>下派机构：</span>
            <Select v-model="crossOfficeId" style="width: 80%">
              <Option
                v-for="(item, index) in lowerList"
                :value="item.crossOfficeId"
                :key="index"
              >{{ item.name }}
              </Option
              >
            </Select>
          </Col>
          <Col span="24">
            <span>下派原因：</span>
            <Input
              v-model="logResult"
              style="margin-top: 10px"
              type="textarea"
              placeholder="请输入下派原因"
            />
          </Col>
        </Row>
        <div slot="footer">
          <Button type="default" @click="modal3 = false">取消</Button>
          <Button type="primary" @click="lowerEventData">确定</Button>
        </div>
      </Modal>
    </div>
    <div style="width: 100%; text-align: center">
      <Button style="margin-top: 10px; width: 100px" @click="$router.go(-1)"
      >返回
      </Button
      >
    </div>
    <Modal v-model="riskModal" title="矛盾纠纷风险因子">
      <Table
        style="margin-bottom: 20px"
        border
        ref="selection"
        :columns="columnsWeight"
        :data="dataWeight"
        @on-selection-change="onSelectWeight"
      ></Table>
      <Button type="success" @click="riskAddModal = true">新增其他因子</Button>
      <div slot="footer">
        <Button type="default" @click="riskModal = false">取消</Button>
        <Button type="primary" @click="riskModal = false">确定</Button>
      </div>
    </Modal>
    <Modal v-model="riskAddModal" title="新增临时风险因子">
      <Input
        v-model="riskAddName"
        placeholder="请输入风险因子名称"
      ></Input>
      <div slot="footer">
        <Button type="default" @click="riskAddModal = false">取消</Button>
        <Button type="primary" @click="riskAddFun">确定</Button>
      </div>
    </Modal>
    <Modal v-model="peopleLog.show" title="回访记录列表" width="1200">
      <Alert type="warning">
        <!-- 一般风险需7天内回访一次、 复杂风险需 7天内， 30天内各回访一次 重大
        风险需7天内 30天内 90天内各回访一次 ，如未按要求会被亮灯提醒 -->
        1、一般矛盾纠纷至少回访一次，且在7日内完成。
        2、复杂矛盾纠纷至少回访两次，分别在7日内和30日内完成。
        3、重大矛盾纠纷至少回访三次，分别在7日内、30日内、90日内完成。
        如未按时限完成跟踪回访，系统将亮红灯发出超期预警提示。
      </Alert>
      <Table border :columns="peopleLog.dataColumns" :data="peopleLog.dataList">
        <template slot-scope="{ row, index }" slot="satisfactionLevel">
          <div>{{ row.satisfactionLevel }} %</div>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button
            type="success"
            size="small"
            style="margin-right: 5px"
            @click="detailPeopleLog(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="title" width="500">
      <Form
        ref="form"
        :model="addObj"
        :key="modalKey"
        :label-width="150"
      >
        <Row :gutter="16">
          <Col span="20">
            <FormItem label="回访时间" prop="recordTime" required style="">
              <DatePicker
                type="date"
                v-model="addObj.recordTime"
                :clearable="true"
                style="width: 240px"
                placeholder=""
              ></DatePicker>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="20">
            <FormItem label="满意度" prop="satisfactionLevel" required style="">
              <InputNumber
                style="width: 240px"
                :max="100"
                :min="0"
                v-model="addObj.satisfactionLevel"
                :formatter="(value) => `${value}%`"
                :parser="(value) => value.replace('%', '')"
              ></InputNumber>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="20">
            <FormItem label="沟通记录" prop="recordLog" required style="">
              <Input
                v-model="addObj.recordLog"
                placeholder=""
                type="textarea"
              ></Input>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="20">
            <FormItem label="意见建议" prop="opinions" required style="">
              <Input
                v-model="addObj.opinions"
                placeholder=""
                type="textarea"
              ></Input>
            </FormItem>
          </Col>
        </Row>
        <!-- <Row :gutter="16">
          <Col span="20">
            <FormItem label="附件：" prop="col5">
              <Upload
                action="http://jilinmdjf.lngov.top/api/ac/jilinsscgsdp/uploadService/uploadFile"
                :show-upload-list="false"
                :before-upload="beforeUpload"
              >
                <Button icon="ios-cloud-upload-outline">上传图片</Button>
              </Upload>
            </FormItem>
          </Col>
        </Row> -->
      </Form>
      <div slot="footer">
        <div v-if="title !== '回访记录详情'">
          <Button type="text" size="large" @click="peopleLog.detailShow = false"
          >取消
          </Button
          >
        </div>
      </div>
    </Modal>
    <!-- 添加处置详情显示模态框 -->
    <Modal v-model="processDetailModal" title="处置详情" width="600">
      <div v-if="processInfo">
        <Form :label-width="150">
          <Row :gutter="16">
            <Col span="20">
              <FormItem label="是否化解">
                <span>{{ processInfo.isResolve === '1' ? '是' : '否' }}</span>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col span="20">
              <FormItem label="化解人">
                <span>{{ processInfo.resolveName }}</span>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col span="20">
              <FormItem label="化解人单位">
                <span>{{ processInfo.resolveUnit }}</span>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col span="20">
              <FormItem label="化解层级">
                <span>{{
                    processInfo.resolveHierarchy === '1' ? '省' :
                      processInfo.resolveHierarchy === '2' ? '市' :
                        processInfo.resolveHierarchy === '3' ? '县' :
                          processInfo.resolveHierarchy === '4' ? '街道' :
                            processInfo.resolveHierarchy === '5' ? '社区/村' : ''
                  }}</span>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col span="20">
              <FormItem label="化解方式">
                <span>{{
                    processInfo.resolveWay === '1' ? '人民调解' :
                      processInfo.resolveWay === '2' ? '行政调解' :
                        processInfo.resolveWay === '3' ? '司法调解' :
                          processInfo.resolveWay === '4' ? '行业调解' :
                            processInfo.resolveWay === '5' ? '仲裁' :
                              processInfo.resolveWay === '6' ? '诉讼' :
                                processInfo.resolveWay === '7' ? '其他' : ''
                  }}</span>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col span="20">
              <FormItem label="化解时间">
                <span>{{ processInfo.resolveTime }}</span>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col span="20">
              <FormItem label="是否满意">
                <span>{{ processInfo.isSatisfaction === '1' ? '是' : '否' }}</span>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col span="20">
              <FormItem label="化解过程">
                <div style="max-height: 200px; overflow-y: auto;">{{ processInfo.resolveProcess }}</div>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <div slot="footer">
        <Button type="primary" @click="processDetailModal = false">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  selectConflictWarningList,
  selectARiskFactorList,
  selectDictList,
  selectCityList,
  getEventLogByCreateId,
  getEventLogById,
  selectCommunityCode,
  // updateEventAcceptance,
  insertEventEnd,
  insertEventFlowLog,
  findFlowLogProcessList,
  getEventAllAsc,
  uploadFile,
  selectEventIdByAttachList,
  updateEventCompletion,
  selectRiskLevelList,
  selectJuniorList,
  selectOfficeFaxList,
  getFaxById,
  getJobDuty,
  insertRiskFactor, selectFollowUpRecordsList, getIsHXOffice, insertSafeSoundEvent, getSafeSoundEvent
} from '@/api/contradiction.js'
import { datetime2str } from '@/api/eventlist.js'
import axios from 'axios'

export default {
  inject: ['reload'],
  name: 'registerAdd',
  data () {
    return {
      riskAddModal: false,
      riskAddName: '',
      modalKey: 1,
      title: '',
      logTypeArr: [{
        label: '上报',
        value: '1'
      }, {
        label: '办结',
        value: '2'
      }, {
        label: '转办',
        value: '3'
      }, {
        label: '退回',
        value: '4'
      }, {
        label: '转办',
        value: '5'
      }, {
        label: '下派',
        value: '6'
      }],
      reportLoading: false,
      riskModal: false,
      assignResult: '',
      dataWeight: [],
      warningValue: {
        s: '2',
        m: '4',
        l: '6'
      },
      columnsWeight: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        { type: 'index', title: '序号', align: 'center', width: '80px' },
        {
          title: '风险因子名称',
          key: 'factorName',
          align: 'center'
        }
        // {
        //   title: '权重',
        //   key: 'riskWeight',
        //   align: 'center',
        //   width: '380px'
        // }
      ],
      moreTitle: '更多',
      pointShow: false,
      imgName: '',
      visible: false,
      isHXOffice: false,
      tabValue: '1',
      confirmTtile: '',
      logResult: '',
      personInfo: {},
      modal1: false,
      modal2: false, // 转办模态框
      modal3: false, // 下派模态框
      crossList: '',
      dateOptions: {
        disabledDate (date) {
          // 禁用今天之后的日期
          return date && date.valueOf() > Date.now()
        }
      },
      lowerList: [],
      crossOfficeIds: [],
      crossOfficeId: '',
      formInline: {
        is_involve_everyone: '0',
        isPointEvent: '2',
        userList: [
          { eventUserType: '' }
          // ... more items
        ],
        info: '',
        gardenId: '',
        buildingId: '',
        resolveTime: null,
        occurrenceTime: null,
        termTime: null
      },
      rules: {},
      formData: {
        personList: [
          {
            eventUserType: ''
          }
        ]
      },
      dictData: {
        list1: [],
        list2: []
      },
      dictNextData: [],
      disputeInfo: {
        eventType: '2' // 纠纷
      },
      areaData: {
        list1: [],
        list2: [],
        list3: [],
        list4: []
      },
      param: {
        pageNo: 1,
        pageSize: 10
      },
      params: this.$route.params,
      url: '',
      addObj: {
        id: '',
        eventCode: '',
        recordTime: '',
        satisfactionLevel: 0,
        recordLog: '',
        opinions: '',
        col5: ''
      },
      dataParam: {},
      successFlag: [],
      peopleLog: {
        dataColumns: [
          { type: 'index', title: '序号', align: 'center', width: '80' },
          { title: '回访时间', key: 'recordTime', align: 'center' },
          { title: '满意度 ', slot: 'satisfactionLevel', align: 'center' },
          {
            title: '操作',
            slot: 'action',
            fixed: 'right',
            align: 'center',
            width: '180'
          }
        ],
        dataList: [],
        show: false,
        detailShow: false,
        info: {},
        confirmButton: false,
        tableLoading: false,
        operate_type: ''
      },
      type: this.$route.params.type,
      flag: this.$route.query.type,
      reportingName: '',
      reportingUnit: '',
      isShowInfo: false,
      processList: [],
      current: 1,
      imgUrl: '',
      imgArr: [],
      uniUuid: '',
      imageUrl: null,
      urlList: [],
      url111: '',
      riskContent:
        '1.纠纷事实清楚，权利义务关系明确，利益损害轻微、争议不大，履行协议的矛盾纠纷。2.公民之间、公民与法人以及其他社会组织之间发生的涉案人数较少，涉案金额较低的矛盾纠纷。3.易发多发于邻里之间的小摩擦、日常生活中的小误会、轻微损害赔偿、侵权等领域的矛盾纠纷。',
      riskList: [],
      communityInfo: {},
      processInfo: {},
      processDetailModal: false // 处置详情弹框显示控制
    }
  },
  computed: {
    serverUserInfo () {
      return this.$store.state.user.severUserInfo
    }
  },
  watch: {
    $route (to, from) {
      // 路由发生变化时的处理逻辑
      console.log('Route changed from', from, 'to', to)
      if (to.query.type) {
        this.getReload()
        // this.params.what = 'add'
        // this.formInline = {
        //   userList: [
        //     { eventUserType: '' }
        //     // ... more items
        //   ],
        //   info: '',
        //   gardenId: '',
        //   buildingId: ''
        // }
      }
      // 你可以在这里根据路由变化执行相应的操作
    }
  },
  async mounted () {
    console.log(this.$route.query, 'chuanguolaide')
    console.log(this.$route.params, 'chuanguolaide')
    this.reportingName = this.serverUserInfo.name
    this.reportingUnit = this.serverUserInfo.company_name
    this.imgArr = []
    this.getHXOffice() // 判断是否是横向部门
    this.getFaxData()
    this.getDictList('1')
    await this.getCityData('1')
    this.getRiskFactor() // 获取风险因子列表
    this.url =
      this.type === '1'
        ? getEventLogByCreateId
        : this.type === '2'
          ? getEventLogById
          : this.type === '3'
            ? getEventLogById
            : getEventAllAsc // type=1是网格事件列表，2是社区事件列表，3是街道区市省事件列表，不传是矛盾查询列表，是单独的列表页面
    if (this.$route.query.hasOwnProperty('type') && this.$route.query.type === 'add') {
      this.type = 'add'
    }
    this.isShowInfo = this.$route.params.isShowInfo || false
    if (this.params.id) {
      this.getImg()
      await this.getInfo()
    } else {
      this.$nextTick(() => {
        this.getCommunityCode()
      })
    }
    this.getProcessList()
    this.getCrossData()
    this.getLowerData()
    this.getWarningValue() // 获取预警值
  },
  methods: {
    occurrenceTimeChange () {
      if (this.formInline.resolveTime) {
        this.resolveTimeChange()
      }
    },
    resolveTimeChange () {
      console.log(this.formInline.resolveTime, 'formInline.resolveTime')
      const time1 = this.formInline.occurrenceTime.getTime() // 发生时间
      const time2 = this.formInline.resolveTime.getTime() // 化解时间
      if (time1 > time2) {
        this.formInline.resolveTime = ''
        this.$Message.error('化解时间不能早于发生时间')
      }
    },
    detailPeopleLog (row) {
      this.title = '回访记录详情'
      this.peopleLog.detailShow = true
      this.addObj.opinions = row.opinions
      this.addObj.recordTime = row.recordTime
      this.addObj.satisfactionLevel = row.satisfactionLevel
      this.addObj.recordLog = row.recordLog
      this.addObj.disabled = true
    },
    evaluation (item) {
      this.getZFLogList(item.eventCode)
    },
    evaluationButton (item) {
      this.getProcessInfo(item.id)
    },
    getZFLogList (eventCode) {
      selectFollowUpRecordsList({ eventCode }).then((ret) => {
        if (ret.data.errcode === 0) {
          this.peopleLog.tableLoading = false
          this.peopleLog.dataList = ret.data.data
          this.peopleLog.show = true
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    riskAddFun () {
      if (this.riskAddName !== '') {
        insertRiskFactor({ factorName: this.riskAddName, is_custom: '1' }).then((res) => {
          if (res.data.errcode === 0) {
            this.$Message.success('新增成功')
            this.dataWeight.push({
              factorName: this.riskAddName,
              is_custom: '1'// 固定值传1
            })
            this.riskAddName = ''
          }
        })
      }
      this.riskAddModal = false
    },
    handleClose (item) {
      // 删掉表格的选中
      let index1 = this.dataWeight.findIndex((riskItem) => {
        return riskItem.factorName === item
      })
      if (index1 > -1) {
        this.$refs.selection.toggleSelect(index1)
      }
      // 删标签
      const index = this.formInline.riskName.indexOf(item)
      if (index > -1) {
        this.formInline.riskName.splice(index, 1)
      }
    },
    showRiskFactor () {
      this.riskModal = true
    },
    getHXOffice () {
      getIsHXOffice().then((res) => {
        if (res.data.errcode === 0) {
          this.isHXOffice = res.data.data
        }
      })
    },
    getWarningValue () {
      selectConflictWarningList().then((res) => {
        if (res.data.errcode === 0) {
          let obj = {}
          res.data.data.forEach((item) => {
            obj[item.id] = item.conflictWarningValue
          })
          this.warningValue.s = obj.singleRiskWarningValue
          this.warningValue.m = obj.complexRiskWarningValue
          this.warningValue.l = obj.significantRiskWarningValue
          // this.warningValue.s = res.data.data[0].singleRiskWarningValue
          // this.warningValue.m = res.data.data[0].complexRiskWarningValue
          // this.warningValue.l = res.data.data[0].significantRiskWarningValue
        }
      })
    },
    getRiskFactor () {
      selectARiskFactorList({ is_custom: '0', is_show: '1' }).then((res) => {
        if (res.data.errcode === 0) {
          this.dataWeight = res.data.data
        }
      })
    },
    onSelectWeight (selection) {
      console.log(selection, 'selection')
      let str = []
      selection.map(item => {
        str.push(item.factorName)
      })
      this.formInline.riskNameList = str
      this.$set(this.formInline, 'riskName', str)
    },
    getDisabled (num, role) {
      let a = {
        0: [true, false, false, false],
        1: [true, true, false, false],
        2: [true, true, true, false],
        3: [true, true, true, true],
        // 3: [true, false, false, false],
        4: [true, true, false, false],
        5: [true, true, true, false],
        6: [true, true, true, true]
      }
      return a[role][num]
    },
    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()
      }
    },
    checkTel (rule, value, callback) {
      if (!value) {
        callback(new Error('必填'))
      } else if (!/^1\d{10}$/.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()
      }
    },
    setCityData (data) {
      // 省级 communityId 省级id
      // 市级 streetId 省级id communityId 市级id
      // 区级 areaId  省级id streetId 市级id communityId 区级id
      // 街道 cityId  省级id areaId 市级id streetId 区级id communityId 街道级id
      // 社区 cityId  市级id areaId 区级id streetId 街道级id communityId 社区级id
      let dataObj = JSON.parse(JSON.stringify(data))
      if (this.serverUserInfo.company_grade === '2') {
        dataObj.cityId = ''
        dataObj.communityId = ''
        dataObj.areaId = ''
        dataObj.streetId = ''
      }
      if (this.serverUserInfo.company_grade === '3') {
        dataObj.cityId = dataObj.communityId
        dataObj.areaId = ''
        dataObj.streetId = ''
        dataObj.communityId = ''
      }
      if (this.serverUserInfo.company_grade === '4') {
        dataObj.cityId = dataObj.streetId
        dataObj.areaId = dataObj.communityId
        dataObj.streetId = ''
        dataObj.communityId = ''
      }
      if (this.serverUserInfo.company_grade === '5') {
        dataObj.cityId = dataObj.areaId
        dataObj.areaId = dataObj.streetId
        dataObj.streetId = dataObj.communityId
        dataObj.communityId = ''
      }
      return dataObj
    },
    getCommunityCode () {
      selectCommunityCode().then((res) => {
        if (res.data.errcode === 0) {
          let cityData = this.setCityData(res.data.data)
          if (cityData.cityId) {
            // this.$set(this.formInline, 'cityId', cityData.cityId)
            selectCityList({ parent_id: cityData.cityId }).then((res) => {
              if (res.data.errcode === 0) {
                this.areaData['list' + 2] = res.data.data
                return
              }
              this.$Message.error(res.errmsg)
            })
          }
          if (cityData.areaId) {
            // this.$set(this.formInline, 'areaId', cityData.areaId)
            selectCityList({ parent_id: cityData.areaId }).then((res) => {
              if (res.data.errcode === 0) {
                this.areaData['list' + 3] = res.data.data
                return
              }
              this.$Message.error(res.errmsg)
            })
          }
          if (cityData.streetId) {
            // this.$set(this.formInline, 'streetId', cityData.streetId)
            selectCityList({ parent_id: cityData.streetId }).then((res) => {
              if (res.data.errcode === 0) {
                this.areaData['list' + 4] = res.data.data
                return
              }
              this.$Message.error(res.errmsg)
            })
          }
          // this.$set(this.formInline, 'communityId', cityData.communityId)
          this.communityInfo = cityData
          return
        }
        this.$Message.error(res.errmsg)
      })
    },
    getFaxData () {
      // 查询当前账号是单位还是综治中心num=1则为单位 等于0是综治中心
      getFaxById({}).then((res) => {
        if (res.data.errcode === 0) {
          this.personInfo = res.data.data
          console.log(this.personInfo, '个人信息')
          return
        }
        this.$Message.error(res.errmsg)
      })
    },
    changeMore () {
      this.pointShow = !this.pointShow
      this.moreTitle = this.pointShow === true ? '隐藏' : '更多'
    },
    getReload () {
      this.reload()
    },
    getDictList (level, id, eventTypeId, eventCategoryId) {
      selectDictList({ type: 'event_category', parent_id: id }).then((res) => {
        if (res.data.errcode === 0) {
          this.dictData['list' + level] = res.data.data
          console.log(this.dictData, '字典')
          if (eventCategoryId) {
            let list1 = this.dictData['list' + level]
            list1.forEach((element) => {
              if (element.label === eventCategoryId) {
                this.formInline.info = JSON.stringify(element)
                if (this.formInline.eventTypeId) {
                  this.getDictList(
                    '2',
                    element.id,
                    this.formInline.eventTypeId,
                    ''
                  )
                }
              }
            })
          }
          if (eventTypeId) {
            this.dictData.list2.forEach((element) => {
              if (eventTypeId === element.label) {
                console.log('11111')
                this.formInline.eventTypeId = element.value
              }
            })
          }
          return
        }
        this.$Message.error(res.errmsg)
      })
    },
    async changeArea (level, parent_id) {
      await this.getCityData(level, parent_id)
    },
    async getCityData (level, id) {
      if (!id && level !== '1') {
        if (level === '2') {
          Object.assign(this.areaData, { list2: [] })
          Object.assign(this.formInline, { areaId: '', streetId: '', communityId: '' })
        } else if (level === '3') {
          Object.assign(this.areaData, { list3: [] })
          Object.assign(this.formInline, { streetId: '', communityId: '' })
        } else if (level === '4') {
          Object.assign(this.areaData, { list4: [] })
          this.formInline.communityId = ''
        }
        return
      }
      let res = await selectCityList({ parent_id: id })
      if (res.data.errcode === 0) {
        this.areaData['list' + level] = res.data.data
        return
      }
      this.$Message.error(res.errmsg)
    },
    changeEventType (item) {
      this.formInline.eventTypeLabel = item.label
    },
    changeDispute (item) {
      this.formInline.eventCategoryId = JSON.parse(item).value
      this.formInline.eventTypeLabel = ''
      this.getDictList('2', JSON.parse(item).id)
    },
    addPerson () {
      // 添加当事人
      this.$refs['form1'].validate((valid) => {
        if (valid) {
          console.log('success')
          this.formInline.userList.push({ eventUserType: '' })
          // this.insertEventData()
        } else {
          console.log('fail')
          return false
        }
      })
    },
    checkUserType (type) {
      console.log(type, '类型')
    },
    deletePerson (index) {
      this.$Modal.confirm({
        title: '确定删除该当事人吗？',
        // content: '此操作会删除该菜单下全部菜单',
        onOk: () => {
          this.formInline.userList.splice(index, 1)
        }
      })
      // if (confirm('确定删除该当事人吗？')) {
      //   this.formInline.userList.splice(index, 1)
      // }
    },
    report (type) {
      this.successFlag = []

      // 验证身份信息
      this.$refs['form1'].validate((valid1) => {
        if (!valid1) {
          this.$Message.error('请完善身份信息')
          return
        }
        this.successFlag.push(true)

        // 验证矛盾纠纷信息
        this.$refs['form2'].validate((valid2) => {
          if (!valid2) {
            this.$Message.error('请完善矛盾纠纷信息')
            return
          }
          this.successFlag.push(true)

          // 如果已化解，验证化解信息
          if (this.formInline.isResolve === '1') {
            this.$refs['form3'].validate((valid3) => {
              if (!valid3) {
                this.$Message.error('请完善化解信息')
                return
              }
              this.successFlag.push(true)

              // 验证处置情况
              this.$refs['form4'].validate((valid4) => {
                if (!valid4) {
                  this.$Message.error('请完善处置情况')
                  return
                }
                this.successFlag.push(true)

                // 所有验证通过，执行提交
                this.insertEventData()
              })
            })
          } else {
            // 未化解，直接提交
            this.insertEventData()
          }
        })
      })
    },
    getCrossData () {
      selectOfficeFaxList().then((res) => {
        if (res.data.errcode === 0) {
          this.crossList = res.data.data
          return
        }
        this.$Message.error(res.errmsg)
      })
    },
    getLowerData () {
      selectJuniorList().then((res) => {
        if (res.data.errcode === 0) {
          this.lowerList = res.data.data
          return
        }
        this.$Message.error(res.errmsg)
      })
    },
    cross () {
      // 转办
      this.successFlag = []
      this.$refs['form1'].validate((valid) => {
        if (valid) {
          console.log('success1')
          this.successFlag.push(true)
        } else {
          console.log('fail')
          this.$Message.error('请完善页面必填校验!')
          this.successFlag.push(false)
          return false
        }
      })
      this.$refs['form2'].validate((valid) => {
        if (valid) {
          console.log('success2')
          this.successFlag.push(true)
        } else {
          console.log('fail')
          this.$Message.error('请完善页面必填校验!')
          this.successFlag.push(false)
          return false
        }
      })
      console.log(this.successFlag, 'this.successFlag')
      let flag = this.successFlag.every((item) => {
        return item === true
      })
      console.log(flag, 'flagflag')
      if (flag) {
        this.crossOfficeIds = ''
        this.assignResult = ''
        this.modal2 = true
        // this.crossEventData() // 转办
      }
    },
    lowerFaction () {
      this.successFlag = []
      // 下派
      this.$refs['form1'].validate((valid) => {
        if (valid) {
          console.log('success1')
          this.successFlag.push(true)
        } else {
          console.log('fail')
          this.successFlag.push(false)
          return false
        }
      })
      this.$refs['form2'].validate((valid) => {
        if (valid) {
          console.log('success2')
          this.successFlag.push(true)
        } else {
          console.log('fail')
          this.successFlag.push(false)
          return false
        }
      })
      let flag = this.successFlag.every((item) => {
        return item === true
      })
      console.log(flag, 'flagflag')
      if (flag) {
        this.crossOfficeId = ''
        this.logResult = ''
        this.modal3 = true
        // this.crossEventData() // 转办
      }
    },
    dispose () {
      // 处置
      if (this.formInline.isResolve === '1') {
        this.$refs['form4'].validate((valid) => {
          if (valid) {
            console.log('success')
            // 已化解
            this.$refs['form3'].validate((valid) => {
              if (valid) {
                console.log()
                let data = {
                  id: this.formInline.eventId,
                  logResult: this.formInline.logResult,
                  isSpecialTasks: this.formInline.isSpecialTasks,
                  status: this.formInline.status,
                  flowVersion: this.formInline.flowVersion,
                  flowId: this.formInline.flowId,
                  logType: '2',
                  isResolve: this.formInline.isResolve,
                  riskLevel: this.formInline.riskLevel,
                  resolveName: this.formInline.resolveName,
                  resolveUnit: this.formInline.resolveUnit,
                  resolveHierarchy: this.formInline.resolveHierarchy,
                  resolveWay: this.formInline.resolveWay,
                  resolveTime: datetime2str(this.formInline.resolveTime),
                  isSatisfaction: this.formInline.isSatisfaction,
                  resolveProcess: this.formInline.resolveProcess,
                  urlList: this.urlList
                }
                insertEventFlowLog(data).then((ret) => {
                  if (ret.data.errcode === 0) {
                    this.$Message.success('操作成功')
                    this.$router.push({
                      name: 'contradictionRegister',
                      query: {
                        type: this.params.type
                      }
                    })
                  }
                })
              } else {
                this.$Message.error('请完善必填校验!')
                return false
              }
            })
            // 处置
          } else {
            this.$Message.error('请完善必填校验!')
            return false
          }
        })
      } else {
        // 未化解
        this.$Message.error('事件未化解不可完成')
      }
    },
    complete () {
      // 确认办结（网格员录入时候直接办结或者上报到街道处置后网格员再次进行办结）
      // 如果是退回后点击办结
      // 先清空验证结果数组
      this.successFlag = []
      if (this.$route.params.wgyBj) {
        // 上报到街道处置后网格员再次进行办结
        console.log('上报到街道处置后网格员再次进行办结')
        this.$refs['form5'].validate((valid) => {
          if (valid) {
            console.log('核查内容已填写')
            this.successFlag.push(true)
            this.url = updateEventCompletion
            let param = {
              id: this.formInline.eventId,
              isSpecialTasks: this.formInline.isSpecialTasks,
              status: this.formInline.status,
              flowVersion: this.formInline.flowVersion,
              riskLevel: this.formInline.riskLevel,
              flowId: this.formInline.flowId,
              logType: '2',
              eventCheck: this.formInline.eventCheck
            }
            if (this.formInline.logType === '4' && this.formInline.createBy === this.serverUserInfo.id) {
              // 如果被驳回后再次办结
              param.is_return_resubmit = '1'
            }
            this.dataParam = param
            this.modal1 = true
            this.confirmTtile = '此事件已处置完成，是否办结？'
          } else {
            console.log('fail')
            this.successFlag.push(false)
            this.$Message.error('请完善核查内容')
            return false
          }
        })
      } else if (this.formInline.logType === '4' && this.formInline.createBy === this.serverUserInfo.id) {
        this.$refs['form1'].validate((valid1) => {
          if (!valid1) {
            this.$Message.error('请完善身份信息')
            return
          }
          this.successFlag.push(true)
          // 验证矛盾纠纷信息
          this.$refs['form2'].validate((valid2) => {
            if (!valid2) {
              this.$Message.error('请完善矛盾纠纷信息')
              return
            }
            this.successFlag.push(true)

            // 验证化解信息
            this.$refs['form3'].validate((valid3) => {
              if (!valid3) {
                this.$Message.error('请完善化解信息')
                return
              }
              this.successFlag.push(true)

              // 所有验证通过，执行办结操作
              this.url = updateEventCompletion
              let param = {}

              param = Object.assign(this.formInline)
              param['userList'] = this.formInline.userList
              param['eventSource'] = '1'
              param['eventType'] = '2'
              param['logType'] = '2'
              param['is_return_resubmit'] = '1'
              param['id'] = this.formInline.eventId
              param['urlList'] = this.urlList
              console.log(param, '办结入参')
              this.dataParam = param
              this.modal1 = true
              this.confirmTtile = '是否确认办结？'
            })
          })
        })
        // 原参数
        // let param = {
        //   id: this.formInline.eventId,
        //   isSpecialTasks: this.formInline.isSpecialTasks,
        //   status: this.formInline.status,
        //   flowVersion: this.formInline.flowVersion,
        //   riskLevel: this.formInline.riskLevel,
        //   flowId: this.formInline.flowId,
        //   logType: '2',
        //   is_return_resubmit: '1'
        // }
      } else {
        // 网格员录入时候直接办结
        console.log('网格员录入时候直接办结')

        // 验证身份信息
        this.$refs['form1'].validate((valid1) => {
          if (!valid1) {
            this.$Message.error('请完善身份信息')
            return
          }
          this.successFlag.push(true)

          // 验证矛盾纠纷信息
          this.$refs['form2'].validate((valid2) => {
            if (!valid2) {
              this.$Message.error('请完善矛盾纠纷信息')
              return
            }
            this.successFlag.push(true)

            // 验证化解信息
            this.$refs['form3'].validate((valid3) => {
              if (!valid3) {
                this.$Message.error('请完善化解信息')
                return
              }
              this.successFlag.push(true)
              this.$refs['form4'].validate((valid4) => {
                if (!valid4) {
                  this.$Message.error('请完善化解信息')
                  return
                }
                this.successFlag.push(true)
                // 所有验证通过，执行办结操作
                this.url = insertEventEnd
                let param = {}
                param = Object.assign(this.formInline)
                param['userList'] = this.formInline.userList
                param['eventSource'] = '1'
                param['eventType'] = '2'
                param['eventTel'] = this.formInline.event_tel
                param['urlList'] = this.urlList
                console.log(param, '办结入参')
                this.dataParam = param
                this.modal1 = true
                this.confirmTtile = '此事件已处置完成，是否办结？'
              })
            })
          })
        })
      }
    },
    insertEventData () {
      // 调用上报接口
      console.log('调用上报接口')
      let param = {}
      if (this.formInline.occurrenceTime) {
        this.formInline.occurrenceTime = datetime2str(
          this.formInline.occurrenceTime
        )
      }
      if (this.formInline.resolveTime) {
        this.formInline.resolveTime = datetime2str(this.formInline.resolveTime)
      }
      console.log(this.formInline)
      param = Object.assign(this.formInline)
      param['userList'] = this.formInline.userList
      param['eventSource'] = '1'
      // param['reportingName'] = this.serverUserInfo.name
      // param['reportingUnit'] = this.serverUserInfo.company_name
      param['eventType'] = '2'
      param['logType'] = '1' // 除了省都可上报，上报增加入参logType=1
      param['urlList'] = this.urlList
      if (!param.cityId) {
        param.cityId = this.communityInfo.cityId
        param.areaId = this.communityInfo.areaId
        param.streetId = this.communityInfo.streetId
        param.communityId = this.communityInfo.communityId
      }
      this.reportLoading = true
      insertSafeSoundEvent({ ...param }).then((res) => {
        if (res.data.errcode === 0) {
          this.reportLoading = false
          this.$Message.success('上报成功')
          getJobDuty().then((res1) => {
            if (res1.data.errcode === 0) {
              let type = ''
              if (this.serverUserInfo.company_grade === '6') {
                if (res1.data.data === '1') {
                  // 网格员
                  type = '1'
                  this.$router.push({
                    path: '/contradiction/register',
                    query: {
                      type: type
                    }
                  })
                } else {
                  type = '2'
                  this.$router.push({
                    path: '/contradiction/contradictionList',
                    query: {
                      type: type
                    }
                  })
                }
              } else {
                type = '3'
                this.$router.push({
                  path: '/contradiction/contradictionList',
                  query: {
                    type: type
                  }
                })
              }
            } else {
              this.reportLoading = false
              this.$Message.error(res1.data.errmsg)
            }
          })
        } else {
          this.reportLoading = false
          this.$Message.error(res.data.errmsg)
        }
      })
    },
    crossEventData () {
      // 调用转办接口
      console.log('调用转办接口')
      let param = {}
      if (this.crossOfficeIds.length === 0) {
        this.$Message.error('请选择转办机构')
        return
      }
      if (this.assignResult === '') {
        this.$Message.error('请填写办理说明')
        return
      }
      if (this.formInline.occurrenceTime) {
        this.formInline.occurrenceTime = datetime2str(
          this.formInline.occurrenceTime
        )
      }
      if (this.formInline.resolveTime) {
        this.formInline.resolveTime = datetime2str(this.formInline.resolveTime)
      }
      param = Object.assign(this.formInline)
      param['userList'] = this.formInline.userList
      param['eventSource'] = '1'
      param['officeList'] = this.crossOfficeIds
      param['assignResult'] = this.assignResult
      // param['reportingName'] = this.serverUserInfo.name
      // param['reportingUnit'] = this.serverUserInfo.company_name
      param['eventType'] = '2'
      // param['logType'] = '5' // 街道、区、市、省可转办，转办增加入参logType=5
      param['logType'] = '3' // 街道、区、市、省可转办，转办增加入参logType=3
      param['urlList'] = this.urlList

      console.log(param, '转办入参1')
      insertSafeSoundEvent(param).then((res) => {
        if (res.data.errcode === 0) {
          this.$Message.success('转办成功')
          let type = ''
          type = '3'
          this.$router.push({
            name: 'contradictionRegister',
            query: {
              type: type
            }
          })
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    lowerEventData () {
      // 调用下派接口
      console.log('调用下派接口')
      let param = {}
      if (this.crossOfficeId.length === 0) {
        this.$Message.error('请选择下派机构')
        return
      }
      if (this.logResult === '') {
        this.$Message.error('请填写下派原因')
        return
      }
      if (this.formInline.occurrenceTime) {
        this.formInline.occurrenceTime = datetime2str(this.formInline.occurrenceTime)
        console.log(this.formInline.occurrenceTime, 'this.formInline.occurrenceTime1111111111')
      }

      if (this.formInline.resolveTime) {
        this.formInline.resolveTime = datetime2str(this.formInline.resolveTime)
      }
      if (this.formInline.termTime) {
        this.formInline.termTime = datetime2str(this.formInline.termTime)
      }
      console.log(this.formInline.occurrenceTime, 'this.formInline.occurrenceTime')
      param = Object.assign({}, this.formInline)
      console.log(param, '下派入参1111111111111111')
      param['userList'] = this.formInline.userList
      param['eventSource'] = '1'
      param['crossOfficeId'] = this.crossOfficeId
      param['logResult'] = this.logResult
      // param['reportingName'] = this.serverUserInfo.name
      // param['reportingUnit'] = this.serverUserInfo.company_name
      param['eventType'] = '2'
      param['logType'] = '6' // 街道、区、市、省综治中心可下派，下派增加入参logType=6
      param['urlList'] = this.urlList

      console.log(param, '下派入参1')
      insertSafeSoundEvent(param).then((res) => {
        if (res.data.errcode === 0) {
          this.$Message.success('下派成功')
          let type = ''
          type = '3'
          this.$router.push({
            name: 'contradictionRegister',
            query: {
              type: type
            }
          })
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    save () {
      this.reportLoading = true
      if (this.formInline.occurrenceTime) {
        this.dataParam.occurrenceTime = datetime2str(this.formInline.occurrenceTime)
      }
      if (this.formInline.resolveTime) {
        this.dataParam.resolveTime = datetime2str(this.formInline.resolveTime)
      }
      this.url(this.dataParam).then((res) => {
        this.reportLoading = false
        if (res.data.errcode === 0) {
          this.$Message.success('成功')
          this.modal1 = false
          this.$router.push({
            name: 'contradictionRegister',
            query: {
              type: this.$route.params.type || '3'
            }
          })
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    async getInfo () {
      let res = await getSafeSoundEvent({ id: this.params.id })
      if (res.data.errcode === 0) {
        console.log(this.$refs.selection, 'this.$refs.selection')
        if (res.data.data.riskName) {
          // 其他风险因子回显
          res.data.data.riskName = res.data.data.riskName.split(',')
          res.data.data.riskName.forEach(item => {
            const foundItem = this.dataWeight.findIndex(item2 => item2.factorName === item)
            console.log(foundItem, 'foundItem')
            if (foundItem !== -1) {
              this.$refs.selection.toggleSelect(foundItem)
            } else {
              this.dataWeight.push({
                factorName: item,
                _checked: true,
                is_custom: '1'// 固定值传1
              })
            }
            // this.dataWeight.push({
            //   factorName: item,
            //   _checked: true,
            //   is_custom: '1'// 固定值传1
            // })
          })
        }
        this.formInline = res.data.data
        if (res.data.data.logType === '4' && res.data.data.createBy === this.serverUserInfo.id && this.isShowInfo === false) {
          this.params.what = ''
          this.formInline.isReturnResubmit = '1'
        }
        if (res.data.data.eventTypeId === '其他') {
          this.formInline.eventTypeLabel = '其他'
        }
        this.reportingName = res.data.data.reportingName || this.serverUserInfo.name
        this.reportingUnit = res.data.data.reportingUnit || this.serverUserInfo.company_name
        if (this.formInline.cityId) {
          await this.getCityData('2', this.formInline.cityId)
        }
        if (this.formInline.areaId) {
          await this.getCityData('3', this.formInline.areaId)
        }
        if (this.formInline.streetId) {
          await this.getCityData('4', this.formInline.streetId)
        }
        if (this.formInline.eventCategoryId) {
          await this.getDictList('1', '', '', this.formInline.eventCategoryId) // level,一级id，二级id，用于回显的一级id
        }
        console.log(this.formInline, '详情')
        return
      }
      this.$Message.error(res.data.errmsg)
    },
    riskAndReport () {
      // 社区以上层级上报（可修改风险等级和办结期限）
      this.$Modal.confirm({
        title: '确定上报该事件吗？',
        // content: '此操作会删除该菜单下全部菜单',
        onOk: () => {
          let param = {}
          if (this.formInline.occurrenceTime) {
            this.formInline.occurrenceTime = datetime2str(this.formInline.occurrenceTime)
          }
          if (this.formInline.resolveTime) {
            this.formInline.resolveTime = datetime2str(this.formInline.resolveTime)
          }
          console.log(this.formInline.termTime, 'termTime')
          if (this.formInline.termTime) {
            this.formInline.termTime = datetime2str(this.formInline.termTime)
          }
          console.log(this.formInline)

          this.formInline.eventCategoryId = JSON.parse(this.formInline.info).value
          param = Object.assign(this.formInline)
          param['userList'] = this.formInline.userList
          param['eventSource'] = '1'
          // param['reportingName'] = this.serverUserInfo.name
          // param['reportingUnit'] = this.serverUserInfo.company_name
          param['id'] = this.formInline.eventId
          param['isSpecialTasks'] = '2'
          param['eventType'] = '2'
          param['logType'] = '1' // 除了省都可上报，上报增加入参logType=1
          param['urlList'] = this.urlList
          if (!param.cityId) {
            param.cityId = this.communityInfo.cityId
            param.areaId = this.communityInfo.areaId
            param.streetId = this.communityInfo.streetId
            param.communityId = this.communityInfo.communityId
          }
          let riskNameStr = ''
          if (param.riskLevel !== '一般矛盾纠纷') {
            if (Array.isArray(param.riskName) && param.riskName.length > 0) {
              param.riskName.forEach((item) => {
                riskNameStr += item + ','
              })
              riskNameStr = riskNameStr.slice(0, -1)
            } else {
              this.$Message.error('请选择风险因子')
              return
            }
          }
          const newObj = {}
          for (const key in param) {
            if (param.hasOwnProperty(key)) {
              const newKey = this.camelToSnake(key)
              newObj[newKey] = param[key]
            }
          }
          console.log(newObj, 'newObj')
          // let dataParam = {
          // isSpecialTasks: '2',
          // id: this.formInline.eventId,
          // flowVersion: this.formInline.flowVersion,
          // status: this.formInline.status,
          // flowId: this.formInline.flowId,
          // logType: '1',
          // riskLevel: this.formInline.riskLevel,
          // termTime: datetime2str(this.formInline.termTime)
          // }
          insertEventFlowLog({ ...newObj, riskName: riskNameStr }).then((res) => {
            if (res.data.errcode === 0) {
              this.$Message.success('上报成功')
              this.$router.push({
                path: '/contradiction/register',
                query: {
                  type: this.params.type
                }
              })
              return
            }
            this.$Message.error(res.data.errmsg)
          })
        }
      })
      // if (confirm('确定上报该事件吗？')) {

      // }
    },
    camelToSnake (str) {
      return str.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`)
    },
    getImg () {
      selectEventIdByAttachList({ id: this.params.id }).then((res) => {
        if (res.data.errcode === 0) {
          let imgList = res.data.data
          imgList.forEach((element) => {
            // 把后台返回的uuid传给接口
            let url = this.getImgUrl(element.uuid, element.suffix)
            console.log(url, 'memeiemiei')
          })
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    getImgUrl (uuid, suffix) {
      let that = this
      axios({
        method: 'get',
        responseType: 'arraybuffer',
        url:
          '/api/ac/jilinsscgsdp/uploadService/getObsObject?uuid=' +
          uuid +
          '&&suffix=' +
          suffix
      }).then(function (res) {
        const base64String = btoa(
          new Uint8Array(res.data).reduce(
            (data, byte) => data + String.fromCharCode(byte),
            ''
          )
        )
        let url = 'data:image/png;base64,' + base64String
        that.imgArr.push({ url: url })
        // 调用下载方法，把后端传过来的流传给fileDownload方法
        // this.fileDownload(res.data, fileName)
      })
    },
    arrayBufferToBase64 (buffer) {
      var binary = ''
      var bytes = new Uint8Array(buffer)
      var len = bytes.byteLength
      for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i])
      }
      return window.btoa(binary)
    },
    getProcessList () {
      findFlowLogProcessList({ eventId: this.params.id }).then((res) => {
        if (res.data.errcode === 0) {
          this.processList = res.data.data
          if (
            this.processList[this.processList.length - 1] &&
            this.processList[this.processList.length - 1].completeTime
          ) {
            this.current = this.processList.length
          } else {
            this.current = this.processList.length - 1
          }
          console.log(this.processList, 'dfdddddddd')
          return
        }
        this.$Message.success(res.data.errmsg)
      })
    },
    getRiskList () {
      selectRiskLevelList({ event_id: this.formInline.eventId }).then((res) => {
        if (res.data.errcode === 0) {
          this.riskList = res.data.data
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    // 上传图片前转base64
    beforeUpload (file) {
      const allowedTypes = ['image/jpeg', 'image/png']
      const isImage = allowedTypes.includes(file.type)
      if (!isImage) {
        this.$Message.error('请上传图片格式')
        return
      }
      console.log(isImage, 'isImage')
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = (e) => {
        this.imgArr.push({ url: e.target.result })
      }
      let formdata = new FormData()
      formdata.append('file', file)
      formdata.append('fileName', file.name)
      formdata.append('json', JSON.stringify({ business_type: 'jlEvent' }))
      console.log(formdata, 'dada adasdasdsad')
      uploadFile(formdata).then((res) => {
        let len = this.imgArr.length
        this.imgArr[len - 1]['uuid'] = res.data.data.uuid
        this.urlList.push(res.data.data)
        console.log(this.urlList.push, 'ssssssssss')
      })
    },
    handleView (item, index) {
      this.imgName = item.url
      this.visible = true
    },
    handleRemove (index) {
      this.imgArr.splice(index, 1)
      this.urlList.splice(index, 1)
      console.log(this.imgArr, this.urlList)
    },
    // 添加获取处置详情的方法
    getProcessInfo (id) {
      // 调用接口获取处置详情
      axios.post('/api/ac/jilinsscgsdp/eventService/findFlowLogProcessInfo', { id: id }).then(res => {
        if (res.data.errcode === 0) {
          this.processInfo = res.data.data
          this.processDetailModal = true
        } else {
          this.$Notice.error({ title: '查询失败！', desc: res.data.errmsg })
        }
      })
    },
    handleOccurrenceTimeOk () {
      const date = this.formInline.occurrenceTime
      console.log(date, 'date')
      // 如果日期为空，不做任何处理，让用户自己选择
      if (!date) {
        // 确保使用正确的日期格式
        const now = new Date()
        // 尝试几种不同的方式设置日期，确保组件能正确识别
        // 方式1：直接使用Date对象
        this.formInline.occurrenceTime = datetime2str(now)
      }
      console.log(this.formInline.occurrenceTime, 'this.formInline.occurrenceTime')
    }
  }
}
</script>
<style scoped lang="less">
/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; /* 修改为你想要的颜色 */
  font-size: 14px;
}

/deep/ .ivu-select-disabled .ivu-select-placeholder {
  color: #515a6e; /* 修改为你想要的颜色 */
  font-size: 14px;
}

/deep/ .ivu-input-disabled {
  color: #515a6e !important; /* 修改为你想要的颜色 */
  font-size: 14px;
}

/deep/ .ivu-form .ivu-form-item-label {
  font-size: 14px;
}

.contradiction-div {
  // padding: 10px;
  background: #fff;
  padding: 10px;
  font-size: 14px;

  .title-style {
    padding: 8px 12px;
    background-color: #ecf8ff;
    border-radius: 4px;
    border-left: 5px solid #50bfff;
    margin: 15px 0;
    font-size: 16px;
    width: 100%;
  }

  .more-style {
    background-color: #ecf8ff;
    width: 70px;
    padding: 8px 12px;
    border-radius: 4px;
  }
}

.red-star {
  color: red;
}

.flex-div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

//.Input{
//  color: black;
//}
.mr10 {
  margin-right: 10px;
}

.mt30 {
  margin-top: 30px;
}

.mb20 {
  margin-bottom: 20px;
}

.risk-tishi {
  // margin-bottom: 10px;
  // color: red;
  font-size: 20px;
}

.p20 {
  padding: 0px 30px 10px 30px;
}

.level-option-img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-bottom: 3px;
}

.stamp {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at center, transparent 60%, rgba(231, 76, 60, 0.1) 60%, rgba(231, 76, 60, 0.1) 65%, transparent 65%);
  border: 8px solid transparent;
  box-shadow: 0 0 0 8px #e74c3c;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #e74c3c;
  font-family: "SimSun", "宋体", serif;
  text-align: center;
  line-height: 1.4;
  padding: 20px;
  opacity: 0.7;
  box-sizing: border-box;
  transform: rotate(-15deg);
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}

.stamp::before {
  content: "";
  position: absolute;
  top: -12px;
  left: -12px;
  right: -12px;
  bottom: -12px;
  border: 2px dashed #e74c3c;
  border-radius: 50%;
  opacity: 0.7;
}

.stamp::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, transparent 50%, rgba(231, 76, 60, 0.05) 100%);
  border-radius: 50%;
}

.stamp-text {
  font-size: 10px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stamp-subtext {
  font-size: 14px;
}

.stamp-company {
  font-size: 14px;
  margin-top: 10px;
  border-top: 1px solid #e74c3c;
  padding-top: 5px;
  width: 80%;
}
.red-star-div {
  position: relative; /* 为伪元素定位提供参考 */
  padding-left: 20px;
}

.red-star-div::before {
  content: "*"; /* 插入星号 */
  color: red; /* 设置红色 */
  position: absolute; /* 绝对定位 */
  left: 5px; /* 左侧对齐 */
  top: 50%; /* 垂直居中基准 */
  transform: translateY(-50%); /* 向上偏移自身高度的50% */
  font-size: 20px; /* 调整星号大小 */
}
</style>
