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

<template>
  <van-nav-bar
    fixed
    title="场所详细信息"
    left-arrow
    @click-left="onClickLeft"
    :style="{ 'background-color': selectColor }"
  />
  <div class="main" style="height: 100vh">
    <div class="banner">
      <img src="../../../../public/loginbg/banner.jpg" alt="" />
    </div>
    <div class="info" style="height: 500px">
      <van-tabs v-model:active="active" swipeable>
        <!-- 基础信息 -->
        <van-tab>
          <template #title> <van-icon name="orders-o" />基础信息</template>
          <div style="padding: 0 10px; height: 470px; 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="dataitem.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="dataitem.tyshxydm"
                center
                label-width="7em"
                clearable
                label="社会信用代码:"
                input-align="right"
                placeholder="请输入社会信用代码"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.contact"
                center
                label-width="7em"
                clearable
                label="场所联系人:"
                input-align="right"
                placeholder="请填写场所联系人"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.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="dataitem.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="dataitem.longitude"
                center
                clearable
                label-width="7em"
                label="场所坐标-经度:"
                input-align="right"
                placeholder="请输入场所经度坐标"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.latitude"
                center
                clearable
                label-width="7em"
                label="场所坐标-纬度:"
                input-align="right"
                placeholder="请输入场所纬度坐标"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.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="dataitem.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="dataitem.coveredArea"
                center
                clearable
                label="建筑面积(㎡):"
                input-align="right"
                placeholder="请输入场所建筑面积"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.floorSpace"
                center
                clearable
                label="占地面积(㎡):"
                input-align="right"
                placeholder="请输入场所占地面积"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.plan"
                center
                clearable
                label="场所规划:"
                input-align="right"
                placeholder="请填写场所规划"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.mainRoads"
                center
                clearable
                label-width="8em"
                label="出入口主要道路:"
                input-align="right"
                placeholder="请填写出入口主要道路"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.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="fileList2"
                    :after-read="afterRead2"
                    :max-count="6"
                    capture="camera"
                    accept=""
                    :before-delete="fjdelete2"
                  >
                  </van-uploader>
                </template>
              </van-field>
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.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="dataitem.filingNo"
                center
                clearable
                label="场所备案号:"
                input-align="right"
                placeholder="请输入场所备案号"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
              v-model="dataitem.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="dataitem.registrationAuthority"
                center
                required
                clearable
                label="登记机关:"
                input-align="right"
                placeholder="请输入登记机关"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
              v-model="dataitem.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="dataitem.teachingStaff"
                center
                required
                clearable
                label-width="7em"
                label="主要教职人员:"
                input-align="right"
                placeholder="请输入主要教职人员"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.approveOffice"
                center
                clearable
                label-width="7em"
                label="批准设立机关:"
                input-align="right"
                placeholder="请输入批准设立机关"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="religiousDeptManaUserName"
                center
                label="宗教管理人员"
                placeholder="请填写宗教管理人员"
                input-align="right"
                right-icon="arrow-down"
                @click="showPerson = true"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="securityDeptManaUserName"
                center
                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="dataitem.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>
    </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 active = ref(0);
    // 导航栏颜色
    const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
    //场所数据
    let dataitem = ref({});
    //数据接收
    const router = useRouter();
    onMounted(() => {
      var id = JSON.parse(router.currentRoute.value.query.id);
      new placeRegister().queryById(id).then((res) => {
        dataitem.value = res;
        const rN = Object.assign(dataitem.value, {
          religiousName: getreligiousT(dataitem.value.religiousType),
          placeSelectLastId: dataitem.value.placeSelectId.split("/")[2],
        });
        dataitem.value = rN;
        religiousType.value = getreligiousT(dataitem.value.religiousType);
        propertyName.value = getpropertyType(dataitem.value.nature);
        constructionName.value = getConstructionType(
          dataitem.value.constructionStage
        );
        placeTypeName.value = getplaceTypeN(dataitem.value.siteType);
        placeAddress.value = dataitem.value.placeSelectName;
        if (dataitem.value.scenesImage) {
          fileList.value = dataitem.value.scenesImage.split("/");
        }
        new placeRegister().queryInternetBySiteId(dataitem.value.id).then(({data})=>{
          dynamicFormDataClear();
          dynamicFormDataProceed(data);
        })
      });
    });
    //详细地址定位
    const getLocation = () => {
      xm.getLocation().then((data) => {
        placeActivity.placeData.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(dataitem.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,
      });
      dataitem.value = json;
    };
    //宗教类型
    const religiousType = ref("");
    const getreligiousT = (type) => {
      const typeObject = {
        1: "伊斯兰教",
        2: "基督教",
        3: "天主教",
        4: "佛教",
        5: "道教",
      };
      return typeObject[type];
    };
    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(dataitem.value, {
        religiousType: selectedOptions[0].value,
        religiousName: selectedOptions[0].text,
      });
      dataitem.value = json;
      religiousType.value = selectedOptions[0].text;
    };
    // 场所类型
    const placeTypeName = ref("");
    const placeType = [
      { text: "线上", value: "0" },
      { text: "线下", value: "1" },
    ];
    const getplaceTypeN = (type) => {
      const typeObject = {
        0: "线上",
        1: "线下",
      };
      return typeObject[type];
    };
    let showPicker1 = ref(false);
    const getplaceType = ({ selectedOptions }) => {
      showPicker1.value = false;
      const json = Object.assign(dataitem.value, {
        siteType: selectedOptions[0].value,
      });
      dataitem.value = json;
      placeTypeName.value = selectedOptions[0].text;
    };
    // 场所性质
    const propertyName = ref("");
    const property = [
      { text: "固定场所", value: "0" },
      { text: "寺观教堂", value: "1" },
    ];
    const getpropertyType = (type) => {
      const typeObject = {
        0: "固定场所",
        1: "寺观教堂",
      };
      return typeObject[type];
    };
    let showPicker3 = ref(false);
    const getproperty = ({ selectedOptions }) => {
      showPicker3.value = false;
      const json = Object.assign(dataitem.value, {
        nature: selectedOptions[0].value,
      });
      dataitem.value = json;
      propertyName.value = selectedOptions[0].text;
    };
    // 场所建设
    const constructionName = ref("");
    const construction = [
      { text: "筹备", value: "0" },
      { text: "建设完成", value: "1" },
    ];
    const getConstructionType = (type) => {
      const typeObject = {
        0: "筹备",
        1: "建设完成",
      };
      return typeObject[type];
    };
    let showPicker2 = ref(false);
    const getConstruction = ({ selectedOptions }) => {
      showPicker2.value = false;
      const json = Object.assign(dataitem.value, {
        constructionStage: selectedOptions[0].value,
      });
      dataitem.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)
          );
          dataitem.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)
          );
          dataitem.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)
          );
          dataitem.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(dataitem.value, {
        religiousDeptManaUser: list.value.id,
      });
      dataitem.value = json;
      religiousDeptManaUserName.value = list.value.name;
    };
    const reselected2 = () => {
      const json = Object.assign(dataitem.value, {
        securityDeptManaUser: list2.value.id,
      });
      dataitem.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: dataitem.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: dataitem.value.id, type: '直播间', typeChild: '', account: '', manager: '', contact: ''},
          {key: randomString(12), siteId: dataitem.value.id, type: '公众号', typeChild: '', account: '', manager: '', contact: ''},
          {key: randomString(12), siteId: dataitem.value.id, type: '微信群', typeChild: '', account: '', manager: '', contact: ''}
        ];
      }

      initial_form.forEach(ele=>{
        if (ele.id) {
          ele.key = ele.id;
        }
        if (ele.type == '直播间') {
          ele.typeName = getzbjType2(ele.typeChild)
          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 zbjTypeName = ref("");
    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 getzbjType2 = (type) => {
      const typeObject = {
        0: "斗鱼",
        1: "小红书",
        2: "抖音",
        3: "哔哩哔哩",
        4: "虎牙",
        5: "快手",
        6: "YY直播",
        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(dataitem.value,{dynamicFormJson:dynami})
      dataitem.value = json
      new placeRegister().sava(dataitem.value).then((res) => {
        if (res.status == 200) {
          xm.showToast({
            message: "修改成功",
          });
        }else{
          xm.showToast({
            message: "修改失败",
          });
        }
      });
    };
    return {
      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;
  .van-button {
    width: 100%;
    height: 50px;
  }
}
</style>