HS_MZAP/src/views/placeManage/placeRegister/placeRegister.vue

<template>
  <van-nav-bar
    fixed
    title="场所录入"
    left-arrow
    @click-left="onClickLeft"
    :style="{ 'background-color': selectColor }"
  />
  <div class="main">
    <van-tabs v-model:active="active" swipeable>
      <!-- 基础信息 -->
      <van-tab>
        <template #title> <van-icon name="orders-o" />基础信息</template>
        <div style="padding: 0 10px; height: 570px; overflow: auto">
          <van-cell-group>
            <van-field
              name="uploader"
              label-align="top"
              label-width="8em"
              label="场所内外景照片:"
            >
              <template #input>
                <van-uploader
                  v-model="fileList"
                  :after-read="afterRead1"
                  :max-count="6"
                  capture="camera"
                  accept=""
                  :before-delete="fjdelete"
                >
                </van-uploader>
              </template>
            </van-field>
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="inputForm.name"
              center
              required
              clearable
              label="场所名称:"
              input-align="right"
              placeholder="请输入场所名称"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="religiousType"
              readonly
              required
              label="宗教类型:"
              name="validator"
              placeholder="请选择教别"
              input-align="right"
              right-icon="arrow-down"
              @click="hs_religious = true"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="inputForm.tyshxydm"
              center
              label-width="7em"
              clearable
              label="社会信用代码:"
              input-align="right"
              placeholder="请输入社会信用代码"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="inputForm.contact"
              center
              label-width="7em"
              clearable
              label="场所联系人:"
              input-align="right"
              placeholder="请填写场所联系人"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="inputForm.contactNumber"
              center
              label-width="7em"
              clearable
              label="联系电话:"
              input-align="right"
              placeholder="请输入联系电话"
            />
          </van-cell-group>

          <van-cell-group>
            <van-field
              v-model="placeAddress"
              center
              clearable
              readonly
              label="场所地点:"
              input-align="right"
              right-icon="arrow-down"
              placeholder="请输入场所地点"
              @click="showPlace1 = true"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="inputForm.place"
              center
              clearable
              label="详细地点:"
              input-align="right"
              placeholder="请输入详细场所地点"
            >
              <template #right-icon>
                <van-icon name="location" @click="getLocation" />
              </template>
            </van-field>
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="inputForm.longitude"
              center
              clearable
              label-width="7em"
              label="场所坐标-经度:"
              input-align="right"
              placeholder="请输入场所经度坐标"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="inputForm.latitude"
              center
              clearable
              label-width="7em"
              label="场所坐标-纬度:"
              input-align="right"
              placeholder="请输入场所纬度坐标"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="inputForm.peopleThreshold"
              center
              clearable
              required
              label="额定人数:"
              input-align="right"
              placeholder="请输入场所额定人数"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="placeTypeName"
              center
              readonly
              clearable
              required
              label="场所类型:"
              input-align="right"
              placeholder="请选择场所类型"
              right-icon="arrow-down"
              @click="showPicker1 = true"
            >
            </van-field>
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="propertyName"
              readonly
              required
              label="场所性质"
              placeholder="请选择场所性质"
              input-align="right"
              right-icon="arrow-down"
              @click="showPicker3 = true"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="inputForm.protectionLevel"
              center
              clearable
              label-width="7em"
              label="文物保护级别:"
              input-align="right"
              placeholder="请输入文物保护级别"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="constructionName"
              center
              required
              readonly
              clearable
              label-width="7em"
              label="场所建设阶段:"
              input-align="right"
              right-icon="arrow-down"
              placeholder="请选择场所建设阶段"
              @click="showPicker2 = true"
            >
            </van-field>
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="inputForm.coveredArea"
              center
              clearable
              label="建筑面积(㎡):"
              input-align="right"
              placeholder="请输入场所建筑面积"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="inputForm.floorSpace"
              center
              clearable
              label="占地面积(㎡):"
              input-align="right"
              placeholder="请输入场所占地面积"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="inputForm.plan"
              center
              clearable
              label="场所规划:"
              input-align="right"
              placeholder="请填写场所规划"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="inputForm.mainRoads"
              center
              clearable
              label-width="8em"
              label="出入口主要道路:"
              input-align="right"
              placeholder="请填写出入口主要道路"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="inputForm.publicArea"
              center
              clearable
              label-width="7em"
              label="外围公共区域:"
              input-align="right"
              placeholder="请填写外围公共区域"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              name="uploader"
              label-align="top"
              label-width="8em"
              label="宗教礼仪空间:"
            >
              <template #input>
                <van-uploader
                  v-model="fileList"
                  :after-read="afterRead1"
                  :max-count="6"
                  capture="camera"
                  accept=""
                  :before-delete="fjdelete"
                >
                </van-uploader>
              </template>
            </van-field>
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="inputForm.remake"
              rows="1"
              autosize
              label="备注："
              type="textarea"
              placeholder="请输入备注"
            />
          </van-cell-group>
        </div>
      </van-tab>
      <!-- 备案信息 -->
      <van-tab>
        <template #title> <van-icon name="bulb-o" />备案信息 </template>
        <div style="padding: 0 10px; height: 470px; overflow: auto">
          <van-cell-group>
            <van-field
              v-model="inputForm.filingNo"
              center
              clearable
              label="场所备案号:"
              input-align="right"
              placeholder="请输入场所备案号"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="inputForm.approvedEstablishmentTime"
              center
              required
              clearable
              readonly
              label-width="8em"
              label="批准设立时间:"
              input-align="right"
              right-icon="arrow-down"
              placeholder="请选择批准设立时间"
              @click="hs_SetupTime = true"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="inputForm.registrationAuthority"
              center
              required
              clearable
              label="登记机关:"
              input-align="right"
              placeholder="请输入登记机关"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="inputForm.registrationDate"
              center
              required
              readonly
              clearable
              label="登记日期:"
              right-icon="arrow-down"
              input-align="right"
              placeholder="请选择登记日期"
              @click="hs_SignTime = true"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="inputForm.teachingStaff"
              center
              required
              clearable
              label-width="7em"
              label="主要教职人员:"
              input-align="right"
              placeholder="请输入主要教职人员"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="inputForm.approveOffice"
              center
              clearable
              label-width="7em"
              label="批准设立机关:"
              input-align="right"
              placeholder="请输入批准设立机关"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="religiousDeptManaUserName"
              center
              readonly
              label="宗教管理人员"
              placeholder="请填写宗教管理人员"
              input-align="right"
              right-icon="arrow-down"
              @click="showPerson = true"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="securityDeptManaUserName"
              center
              readonly
              label="公安管理人员"
              placeholder="请填写公安管理人员"
              input-align="right"
              right-icon="arrow-down"
              @click="showReport = true"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              name="uploader"
              label-align="top"
              label-width="10em"
              label="场所建设审批手续:"
            >
              <template #input>
                <van-uploader
                  v-model="fileList3"
                  :after-read="afterRead3"
                  :max-count="6"
                  capture="camera"
                  accept=""
                  :before-delete="fjdelete3"
                >
                </van-uploader>
              </template>
            </van-field>
          </van-cell-group>
        </div>
      </van-tab>
      <!-- 互联网专区 -->
      <van-tab>
        <template #title> <van-icon name="desktop-o" />互联网专区 </template>
        <div style="padding: 0 10px; height: 470px; overflow: auto">
          <div style="overflow: hidden">
            <p style="font-weight: 700; font-size: 14px">
              直播间<van-button
                type="primary"
                size="mini"
                style="margin-left: 10px; vertical-align: middle"
                @click="addForm('直播间')"
                >新增</van-button
              >
            </p>
            <div v-for="item in internetForm.zbjForm" :key="item.key">
              <van-cell-group>
                <van-field
                  v-model="item.typeName"
                  center
                  clearable
                  readonly
                  label-width="7em"
                  label="所属平台:"
                  input-align="right"
                  right-icon="arrow-down"
                  placeholder="请选择所属平台"
                  @click="showNew(item.key)"
                />
              </van-cell-group>
              <van-cell-group>
                <van-field
                  v-model="item.account"
                  center
                  clearable
                  label-width="7em"
                  label="直播账号:"
                  input-align="right"
                  placeholder="请输入直播账号"
                />
              </van-cell-group>
              <van-cell-group>
                <van-field
                  v-model="item.manager"
                  center
                  clearable
                  label-width="7em"
                  label="管理员:"
                  input-align="right"
                  placeholder="请填写管理员"
                />
              </van-cell-group>
              <van-cell-group>
                <van-field
                  v-model="item.contact"
                  center
                  clearable
                  label-width="7em"
                  label="联系方式:"
                  input-align="right"
                  placeholder="请输入联系方式"
                />
              </van-cell-group>
              <van-button
                @click="removeForm(item, '直播间')"
                type="danger"
                size="mini"
                color="#e6a23c"
                >删除</van-button
              >
            </div>
          </div>
          <div style="overflow: hidden">
            <p style="font-weight: 700; font-size: 14px">
              公众号<van-button
                type="primary"
                size="mini"
                @click="addForm('公众号')"
                style="margin-left: 10px; vertical-align: middle"
                >新增</van-button
              >
            </p>
            <div v-for="item in internetForm.gzhForm" :key="item.key">
              <van-cell-group>
                <van-field
                  v-model="item.account"
                  center
                  clearable
                  label-width="7em"
                  label="公众号账号:"
                  input-align="right"
                  placeholder="请输入直播账号"
                />
              </van-cell-group>
              <van-cell-group>
                <van-field
                  v-model="item.manager"
                  center
                  clearable
                  label-width="7em"
                  label="管理员:"
                  input-align="right"
                  placeholder="请填写管理员"
                />
              </van-cell-group>
              <van-cell-group>
                <van-field
                  v-model="item.contact"
                  center
                  clearable
                  label-width="7em"
                  label="联系方式:"
                  input-align="right"
                  placeholder="请输入联系方式"
                />
              </van-cell-group>
              <van-button
                @click="removeForm(item, '公众号')"
                type="danger"
                size="mini"
                color="#e6a23c"
                >删除</van-button
              >
            </div>
          </div>
          <div style="overflow: hidden">
            <p style="font-weight: 700; font-size: 14px">
              微信群<van-button
                type="primary"
                size="mini"
                style="margin-left: 10px; vertical-align: middle"
                @click="addForm('微信群')"
                >新增</van-button
              >
            </p>
            <div v-for="item in internetForm.wxqForm" :key="item.key">
              <van-cell-group>
                <van-field
                  v-model="item.account"
                  center
                  clearable
                  label-width="7em"
                  label="微信群账号:"
                  input-align="right"
                  placeholder="请输入直播账号"
                />
              </van-cell-group>
              <van-cell-group>
                <van-field
                  v-model="item.manager"
                  center
                  clearable
                  label-width="7em"
                  label="管理员:"
                  input-align="right"
                  placeholder="请填写管理员"
                />
              </van-cell-group>
              <van-cell-group>
                <van-field
                  v-model="item.contact"
                  center
                  clearable
                  label-width="7em"
                  label="联系方式:"
                  input-align="right"
                  placeholder="请输入联系方式"
                />
              </van-cell-group>
              <van-button
                @click="removeForm(item, '微信群')"
                type="danger"
                size="mini"
                color="#e6a23c"
                >删除</van-button
              >
            </div>
          </div>
          <div style="overflow: hidden">
            <p style="font-weight: 700">网站</p>
            <div>
              <van-cell-group>
                <van-field
                  v-model="inputForm.website"
                  center
                  clearable
                  label-width="7em"
                  label="网站地址:"
                  input-align="right"
                  placeholder="请输入网站地址"
                />
              </van-cell-group>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <div class="btn">
      <van-button type="primary" @click="submit">场所添加</van-button>
    </div>
    <!-- 宗教类型 -->
    <van-popup v-model:show="hs_religious" round position="bottom">
      <van-picker
        title="宗教类型"
        :columns="religious"
        @cancel="hs_religious = false"
        @confirm="getreligious"
      />
    </van-popup>
    <!-- 场所地点 -->
    <van-popup v-model:show="showPlace1" round position="bottom">
      <van-picker
        title="场所地点"
        :columns="options"
        :columns-field-names="customFieldName"
        @cancel="showPlace1 = false"
        @confirm="getPlace1"
      />
    </van-popup>
    <!-- 场所类型 -->
    <van-popup v-model:show="showPicker1" round position="bottom">
      <van-picker
        title="场所类型"
        :columns="placeType"
        @cancel="showPicker1 = false"
        @confirm="getplaceType"
      />
    </van-popup>
    <!-- 场所性质 -->
    <van-popup v-model:show="showPicker3" round position="bottom">
      <van-picker
        title="场所性质选择"
        :columns="property"
        @cancel="showPicker3 = false"
        @confirm="getproperty"
      />
    </van-popup>
    <!-- 场所建设阶段 -->
    <van-popup v-model:show="showPicker2" round position="bottom">
      <van-picker
        title="场所建设阶段"
        :columns="construction"
        @cancel="showPicker2 = false"
        @confirm="getConstruction"
      />
    </van-popup>
    <!-- 宗教管理人员 -->
    <van-dialog
      v-model:show="showPerson"
      title="宗教部门管理人员"
      show-cancel-button
      @confirm="reselected"
      width="100%"
    >
      <manage-list @selected="selected" :type="0"></manage-list>
    </van-dialog>
    <!-- 公安部门人员 -->
    <van-dialog
      v-model:show="showReport"
      title="公安部门管理人员"
      show-cancel-button
      @confirm="reselected2"
      width="100%"
    >
      <manage-list-2 @selected2="selected2"></manage-list-2>
    </van-dialog>
    <!-- 直播类型 -->
    <van-popup v-model:show="showzbj" round position="bottom">
      <van-picker
        title="直播类型"
        :columns="zbj"
        @cancel="showzbj = false"
        @confirm="getzbj"
      />
    </van-popup>
    <!-- 批准设立时间 -->
    <van-popup v-model:show="hs_SetupTime" round position="bottom">
      <van-date-picker
        v-model="currentDate"
        title="选择日期"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="hs_SetupTime = false"
        @confirm="getSetupTime"
      />
    </van-popup>
    <!-- 登记日期 -->
    <van-popup v-model:show="hs_SignTime" round position="bottom">
      <van-date-picker
        v-model="currentDate"
        title="选择日期"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="hs_SignTime = false"
        @confirm="getSignTime"
      />
    </van-popup>
  </div>
</template>

<script>
import ManageList from "../ManageList.vue";
import ManageList2 from "../ManageList2.vue";
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import placeRegister from "@/api/placeRegister/placeRegister";
import tools from "@/api/sys/tools";
export default {
  components: { ManageList, ManageList2 },
  setup() {
    const inputForm = ref({
      id: "",
      religiousType: "",
      religiousName: "",
      name: "",
      tyshxydm: "",
      filingNo: "",
      contact: "",
      contactNumber: "",
      placeSelectName: "",
      placeSelectId: "",
      placeSelectType3: "",
      placeSelectType4: "",
      placeSelectType5: "",
      placeSelectType6: "",
      placeSelectLastId: "",
      place: "",
      longitude: "",
      latitude: "",
      siteType: "",
      constructionStage: "",
      nature: "",
      religiousDeptManaUser: "",
      securityDeptManaUser: "",
      scenesImage: "",
      plan: "",
      etiquetteSpace: "",
      mainRoads: "",
      publicArea: "",
      website: "",
      approvalProcedures: "",
      peopleThreshold: "",
      state: "1",
      isEnable: "1",
      remake: "",
      approvedEstablishmentTime: "",
      registrationAuthority: "",
      registrationDate: "",
      teachingStaff: "",
      approveOffice: "",
      coveredArea: "",
      floorSpace: "",
      protectionLevel: "",
      dynamicFormJson: "",
    });
    onMounted(() => {
      dynamicFormDataClear();
      dynamicFormDataProceed();
    });
    const active = ref(0);
    // 导航栏颜色
    const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
    //数据接收
    const router = useRouter();
    //详细地址定位
    const getLocation = () => {
      xm.getLocation().then((data) => {
        inputForm.value.place = data.POIName;
      });
    };
    // 地区选择
    let placeAddress = ref("");
    const customFieldName = {
      text: "name",
      value: "id",
    };
    // 选项列表，children 代表子选项，支持多级嵌套
    const options = ref([]);
    // 获取地区数据树
    new placeRegister().treeDate().then((res) => {
      options.value.push(...res);
    });
    let showPlace1 = ref(false);
    const getPlace1 = ({ selectedOptions }) => {
      showPlace1.value = false;
      placeAddress.value =
        selectedOptions[0].name +
        "/" +
        selectedOptions[1].name +
        "/" +
        selectedOptions[2].name;
      const json = Object.assign(inputForm.value, {
        placeSelectName:
          selectedOptions[0].name +
          "/" +
          selectedOptions[1].name +
          "/" +
          selectedOptions[2].name,
        placeSelectId:
          selectedOptions[0].id +
          "/" +
          selectedOptions[1].id +
          "/" +
          selectedOptions[2].id,
        placeSelectType3: selectedOptions[0].id,
        placeSelectType4: selectedOptions[1].id,
        placeSelectType5: selectedOptions[2].id,
        placeSelectLastId: selectedOptions[2].id,
      });
      inputForm.value = json;
    };
    //宗教类型
    const religiousType = ref("");
    const religious = [
      { text: "伊斯兰教", value: "1" },
      { text: "基督教", value: "2" },
      { text: "天主教", value: "3" },
      { text: "佛教", value: "4" },
      { text: "道教", value: "5" },
    ];
    let hs_religious = ref(false);
    const getreligious = ({ selectedOptions }) => {
      hs_religious.value = false;
      const json = Object.assign(inputForm.value, {
        religiousType: selectedOptions[0].value,
        religiousName: selectedOptions[0].text,
      });
      inputForm.value = json;
      religiousType.value = selectedOptions[0].text;
    };
    // 场所类型
    const placeTypeName = ref("");
    const placeType = [
      { text: "线上", value: "0" },
      { text: "线下", value: "1" },
    ];
    let showPicker1 = ref(false);
    const getplaceType = ({ selectedOptions }) => {
      showPicker1.value = false;
      const json = Object.assign(inputForm.value, {
        siteType: selectedOptions[0].value,
      });
      inputForm.value = json;
      placeTypeName.value = selectedOptions[0].text;
    };
    // 场所性质
    const propertyName = ref("");
    const property = [
      { text: "固定场所", value: "0" },
      { text: "寺观教堂", value: "1" },
    ];
    let showPicker3 = ref(false);
    const getproperty = ({ selectedOptions }) => {
      showPicker3.value = false;
      const json = Object.assign(inputForm.value, {
        nature: selectedOptions[0].value,
      });
      inputForm.value = json;
      propertyName.value = selectedOptions[0].text;
    };
    // 场所建设
    const constructionName = ref("");
    const construction = [
      { text: "筹备", value: "0" },
      { text: "建设完成", value: "1" },
    ];
    let showPicker2 = ref(false);
    const getConstruction = ({ selectedOptions }) => {
      showPicker2.value = false;
      const json = Object.assign(inputForm.value, {
        constructionStage: selectedOptions[0].value,
      });
      inputForm.value = json;
      constructionName.value = selectedOptions[0].text;
    };
    //图片上传
    let fileList = ref([]);
    let fileImg = ref([]);
    const afterRead1 = (file) => {
      new tools()
        .uploadFile(file, `religioussites/siteinfo/religiousSitesInfo`)
        .then(({ data }) => {
          data.name = decodeURIComponent(
            data.url.substring(data.url.lastIndexOf("/") + 1)
          );
          inputForm.value.scenesImage += "" + data.url;
          fileImg.value.push(data);
        });
    };
    const fjdelete = (file) => {
      //删除文件操作
      for (let index = 0; index < fileList.value.length; index++) {
        if (file.file == fileList.value[index].file) {
          let delurl = fileImg.value[index].url;
          new tools().uploadFiledelete("", delurl).then(({ data }) => {});
          fileImg.value.splice(index, 1);
          fileList.value.splice(index, 1);
        }
      }
    };
    let fileList2 = ref([]);
    let fileImg2 = ref([]);
    const afterRead2 = (file) => {
      new tools()
        .uploadFile(file, `religioussites/siteinfo/religiousSitesInfo`)
        .then(({ data }) => {
          data.name = decodeURIComponent(
            data.url.substring(data.url.lastIndexOf("/") + 1)
          );
          inputForm.value.etiquetteSpace += "" + data.url;
          fileImg2.value.push(data);
        });
    };
    const fjdelete2 = (file) => {
      //删除文件操作
      for (let index = 0; index < fileList2.value.length; index++) {
        if (file.file == fileList2.value[index].file) {
          let delurl = fileImg2.value[index].url;
          new tools().uploadFiledelete("", delurl).then(({ data }) => {});
          fileImg2.value.splice(index, 1);
          fileList2.value.splice(index, 1);
        }
      }
    };
    let fileList3 = ref([]);
    let fileImg3 = ref([]);
    const afterRead3 = (file) => {
      new tools()
        .uploadFile(file, `religioussites/siteinfo/religiousSitesInfo`)
        .then(({ data }) => {
          data.name = decodeURIComponent(
            data.url.substring(data.url.lastIndexOf("/") + 1)
          );
          inputForm.value.approvalProcedures += "" + data.url;
          fileImg3.value.push(data);
        });
    };
    const fjdelete3 = (file) => {
      //删除文件操作
      for (let index = 0; index < fileList3.value.length; index++) {
        if (file.file == fileList3.value[index].file) {
          let delurl = fileImg3.value[index].url;
          new tools().uploadFiledelete("", delurl).then(({ data }) => {});
          fileImg3.value.splice(index, 1);
          fileList3.value.splice(index, 1);
        }
      }
    };
    //宗教公安人员选择
    const religiousDeptManaUserName = ref("");
    const securityDeptManaUserName = ref("");
    let showPerson = ref(false);
    let showReport = ref(false);
    let list = {
      value: [],
      type: "",
    };
    let list2 = {
      value: [],
      type: "",
    };
    const selected = (val) => {
      list.value = val;
    };
    const selected2 = (val) => {
      list2.value = val;
    };
    const reselected = () => {
      const json = Object.assign(inputForm.value, {
        religiousDeptManaUser: list.value.id,
      });
      inputForm.value = json;
      religiousDeptManaUserName.value = list.value.name;
    };
    const reselected2 = () => {
      const json = Object.assign(inputForm.value, {
        securityDeptManaUser: list2.value.id,
      });
      inputForm.value = json;
      securityDeptManaUserName.value = list2.value.name;
    };
    //批准设立时间
    let hs_SetupTime = ref(false);
    const getSetupTime = ({ selectedOptions }) => {
      hs_SetupTime.value = false;
      const json = Object.assign(inputForm.value,{approvedEstablishmentTime:selectedOptions[0].text +
        "-" +
        selectedOptions[1].text +
        "-" +
        selectedOptions[2].text})
        inputForm.value = json
    };
    //批准设立时间
    let hs_SignTime = ref(false);
    const getSignTime = ({ selectedOptions }) => {
      hs_SignTime.value = false;
      const json = Object.assign(inputForm.value,{registrationDate:selectedOptions[0].text +
        "-" +
        selectedOptions[1].text +
        "-" +
        selectedOptions[2].text})
        inputForm.value = json
    };
    // 互联网专区
    const internetForm = ref({
      zbjForm: [],
      gzhForm: [],
      wxqForm: [],
      dynamicForm: [],
    });
    const addForm = (type) => {
      let data_add = [];
      if (type == "直播间") {
        data_add = internetForm.value.zbjForm;
      } else if (type == "公众号") {
        data_add = internetForm.value.gzhForm;
      } else {
        data_add = internetForm.value.wxqForm;
      }
      data_add.push({
        key: randomString(12),
        siteId: inputForm.value.id,
        type: type,
        typeChild: "",
        account: "",
        manager: "",
        contact: "",
      });
    };
    const randomString = (len) => {
      len = len || 32;
      var $chars =
        "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678"; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
      var maxPos = $chars.length;
      var pwd = "";
      for (let i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
      }
      return pwd;
    };
    const removeForm = (item, type) => {
      let data_add = [];
      if (type == "直播间") {
        data_add = internetForm.value.zbjForm;
      } else if (type == "公众号") {
        data_add = internetForm.value.gzhForm;
      } else {
        data_add = internetForm.value.wxqForm;
      }

      let index = data_add.indexOf(item);

      if (index !== -1) {
        data_add.splice(index, 1);
      }
    };
    const hlwToSubmit = () => {
      internetForm.value.dynamicForm = [];
      internetForm.value.zbjForm.forEach((ele) => {
        if (ele.account != "" || ele.manager != "" || ele.contact != "") {
          internetForm.value.dynamicForm.push(ele);
        }
      });
      internetForm.value.gzhForm.forEach((ele) => {
        if (ele.account != "" || ele.manager != "" || ele.contact != "") {
          internetForm.value.dynamicForm.push(ele);
        }
      });
      internetForm.value.wxqForm.forEach((ele) => {
        if (ele.account != "" || ele.manager != "" || ele.contact != "") {
          internetForm.value.dynamicForm.push(ele);
        }
      });
    };
    const dynamicFormDataProceed = (initial_form) => {
      if (!initial_form || initial_form.length == 0) {
        initial_form = [
          {
            key: randomString(12),
            siteId: inputForm.value.id,
            type: "直播间",
            typeChild: "",
            account: "",
            manager: "",
            contact: "",
          },
          {
            key: randomString(12),
            siteId: inputForm.value.id,
            type: "公众号",
            typeChild: "",
            account: "",
            manager: "",
            contact: "",
          },
          {
            key: randomString(12),
            siteId: inputForm.value.id,
            type: "微信群",
            typeChild: "",
            account: "",
            manager: "",
            contact: "",
          },
        ];
      }

      initial_form.forEach((ele) => {
        if (ele.id) {
          ele.key = ele.id;
        }

        if (ele.type == "直播间") {
          internetForm.value.zbjForm.push(ele);
        } else if (ele.type == "公众号") {
          internetForm.value.gzhForm.push(ele);
        } else {
          internetForm.value.wxqForm.push(ele);
        }
      });
    };
    const dynamicFormDataClear = () => {
      internetForm.value.zbjForm = [];
      internetForm.value.gzhForm = [];
      internetForm.value.wxqForm = [];
      internetForm.value.dynamicForm = [];
    };
    // 直播间类型
    const zbj = [
      { text: "斗鱼", value: "0" },
      { text: "小红书", value: "1" },
      { text: "抖音", value: "2" },
      { text: "哔哩哔哩", value: "3" },
      { text: "虎牙", value: "4" },
      { text: "快手", value: "5" },
      { text: "YY直播", value: "6" },
      { text: "淘宝直播", value: "7" },
      { text: "京东直播", value: "8" },
    ];
    const getzbjType = (type) => {
      const typeObject = {
        斗鱼: 0,
        小红书: 1,
        抖音: 2,
        哔哩哔哩: 3,
        虎牙: 4,
        快手: 5,
        YY直播: 6,
        淘宝直播: 7,
        京东直播: 8,
      };
      return typeObject[type];
    };
    const nowIndex = ref("");
    const showNew = (key) => {
      showzbj.value = true;
      nowIndex.value = key;
    };
    let showzbj = ref(false);
    const getzbj = ({ selectedOptions }) => {
      showzbj.value = false;
      internetForm.value.zbjForm.forEach((item) => {
        if (item.key == nowIndex.value) {
          item.typeName = selectedOptions[0].text;
          item.typeChild = selectedOptions[0].value;
        }
      });
    };
    //返回
    const onClickLeft = () => {
      history.back();
    };
    // 数据提交
    const submit = () => {
      hlwToSubmit();
      let dynami = JSON.stringify(internetForm.value.dynamicForm);
      const json = Object.assign(inputForm.value, { dynamicFormJson: dynami });
      inputForm.value = json;
      new placeRegister().sava(inputForm.value).then((res) => {
        if (res.status == 200) {
          xm.showToast({
            message: "添加成功",
          });
          router.push("/placeRegisterList");
        } else {
          xm.showToast({
            message: "添加失败",
          });
        }
      });
    };
    return {
      inputForm,
      onClickLeft,
      // dataitem,
      selectColor,
      active,
      //图片上传
      fileList,
      afterRead1,
      fjdelete,
      fileList2,
      afterRead2,
      fjdelete2,
      fileList3,
      afterRead3,
      fjdelete3,
      //宗教类型
      religiousType,
      hs_religious,
      religious,
      getreligious,
      //场所类型
      showPicker1,
      placeType,
      getplaceType,
      placeTypeName,
      //场所性质
      showPicker3,
      property,
      getproperty,
      propertyName,
      //场所建设阶段
      showPicker2,
      construction,
      getConstruction,
      constructionName,
      // 详细地址定位
      getLocation,
      // 地区选择
      placeAddress,
      customFieldName,
      showPlace1,
      getPlace1,
      options,
      //宗教公安人员选择
      showPerson,
      showReport,
      selected,
      selected2,
      reselected,
      reselected2,
      religiousDeptManaUserName,
      securityDeptManaUserName,
      // 批准设立时间
      hs_SetupTime,
      getSetupTime,
      // 批准设立时间
      hs_SignTime,
      getSignTime,
      // 互联网专区
      internetForm,
      addForm,
      removeForm,
      zbj,
      showzbj,
      getzbj,
      showNew,
      //数据提交
      submit,
    };
  },
};
</script>
<style lang="less">
.btn {
  margin: 10px auto;
  padding: 0 10px;
  .van-button {
    width: 100%;
    height: 50px;
  }
}
</style>