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-form @submit="onSubmit" show-error :show-error-message="false">
        <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
                    readonly
                    v-model="fileList"
                    :max-count="5"
                    accept=""
                    :preview-full-image="false"
                    :before-delete="deleteRead"
                    @click-upload="chooseImg"
                  >
                  </van-uploader>
                </template>
              </van-field>
            </van-cell-group>
            <van-cell-group>
            <van-field
              name="uploader"
              label-align="top"
              label-width="8em"
              label="场所外景照片:"
            >
              <template #input>
                <van-uploader
                  readonly
                  v-model="fileList4"
                  :max-count="5"
                  accept=""
                  :preview-full-image="false"
                  :before-delete="deleteRead4"
                  @click-upload="chooseImg4"
                >
                </van-uploader>
              </template>
            </van-field>
          </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.name"
                center
                required
                clearable
                :rules="[{ required: true }]"
                label="场所名称:"
                input-align="right"
                placeholder="请输入场所名称"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="religiousType"
                readonly
                required
                :rules="[{ required: true }]"
                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
                :rules="[{ required: true }]"
                label="额定人数:"
                input-align="right"
                placeholder="请输入场所额定人数"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="placeTypeName"
                center
                readonly
                clearable
                required
                :rules="[{ required: true }]"
                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
                :rules="[{ required: true }]"
                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
                    readonly
                    v-model="fileList2"
                    :max-count="5"
                    accept=""
                    :preview-full-image="false"
                    :before-delete="deleteRead2"
                    @click-upload="chooseImg2"
                  >
                  </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
                :rules="[{ required: true }]"
                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
                :rules="[{ required: true }]"
                label="登记机关:"
                input-align="right"
                placeholder="请输入登记机关"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.registrationDate"
                center
                required
                readonly
                clearable
                :rules="[{ required: true }]"
                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
                :rules="[{ required: true }]"
                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
                    readonly
                    v-model="fileList3"
                    :max-count="5"
                    accept=""
                    :preview-full-image="false"
                    :before-delete="deleteRead3"
                    @click-upload="chooseImg3"
                  >
                    <van-button
                      >上传文件(可添加图片、音、视频和文本等)</van-button
                    >
                  </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; font-size: 14px">网站</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" native-type="submit">确认</van-button>
      </div>
      </van-form>
      
    </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";
import $base from "@/utils/config";
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) => {
        console.log(res,'=====================>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;
        dataitem.value.scenesImage.split("|").forEach((item) => {
          if (item.trim().length > 0) {
            fileImg.value.push({
              name: decodeURIComponent(
                item.substring(item.lastIndexOf("/") + 1)
              ),
              url: $base + item.replace("程序附件//", "程序附件/"),
              id: item.replace("程序附件//", "程序附件/"),
            });
            fileList.value.push({
              name: decodeURIComponent(
                item.substring(item.lastIndexOf("/") + 1)
              ),

              url: $base + item.replace("程序附件//", "程序附件/"),
              id: item.replace("程序附件//", "程序附件/"),
            });
          }
        });
        dataitem.value.etiquetteSpace.split("|").forEach((item) => {
          if (item.trim().length > 0) {
            fileImg2.value.push({
              name: decodeURIComponent(
                item.substring(item.lastIndexOf("/") + 1)
              ),
              url: $base + item.replace("程序附件//", "程序附件/"),
              id: item.replace("程序附件//", "程序附件/"),
            });
            fileList2.value.push({
              name: decodeURIComponent(
                item.substring(item.lastIndexOf("/") + 1)
              ),

              url: $base + item.replace("程序附件//", "程序附件/"),
              id: item.replace("程序附件//", "程序附件/"),
            });
          }
        });
        dataitem.value.approvalProcedures.split("|").forEach((item) => {
          if (item.trim().length > 0) {
            fileImg3.value.push({
              name: decodeURIComponent(
                item.substring(item.lastIndexOf("/") + 1)
              ),
              url: $base + item.replace("程序附件//", "程序附件/"),
              id: item.replace("程序附件//", "程序附件/"),
            });
            fileList3.value.push({
              name: decodeURIComponent(
                item.substring(item.lastIndexOf("/") + 1)
              ),

              url: $base + item.replace("程序附件//", "程序附件/"),
              id: item.replace("程序附件//", "程序附件/"),
            });
          }
        });
        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 chooseImg = () => {
      xm.chooseFile({
        count: 1,
        name: "file",
        url:
          $base +
          `/sys/file/webupload/upload?uploadPath=religioussites/siteinfo/religiousSitesInfo`,
        headers: {
          "Content-Type": "multipart/form-data",
          token: window.localStorage.getItem("MZ_TOKEN"),
        },
      }).then((res) => {
        let data = res[0].data;
        data.name = decodeURIComponent(
          data.id.substring(data.url.lastIndexOf("/") + 1)
        );
        data.url = $base + data.url;
        fileImg.value.push(data);
        fileList.value.push(data);
      });
    };
    // 删除文件
    const deleteRead = (file) => {
      //删除文件操作
      for (let index = 0; index < fileList.value.length; index++) {
        if (file.id == fileList.value[index].id) {
          fileList.value.splice(index, 1);
          if (fileImg.value[index]) {
            let delurl = fileImg.value[index].url;
            new tools().uploadFiledelete("", delurl).then(({ data }) => {});
            fileImg.value.splice(index, 1);
          }
        }
      }
    };
    let fileList2 = ref([]);
    let fileImg2 = ref([]);
    const chooseImg2 = () => {
      xm.chooseFile({
        count: 1,
        name: "file",
        url:
          $base +
          `/sys/file/webupload/upload?uploadPath=religioussites/siteinfo/religiousSitesInfo`,
        headers: {
          "Content-Type": "multipart/form-data",
          token: window.localStorage.getItem("MZ_TOKEN"),
        },
      }).then((res) => {
        let data = res[0].data;
        data.name = decodeURIComponent(
          data.id.substring(data.url.lastIndexOf("/") + 1)
        );
        data.url = $base + data.url;
        fileImg2.value.push(data);
        fileList2.value.push(data);
      });
    };
    // 删除文件
    const deleteRead2 = (file) => {
      //删除文件操作
      for (let index = 0; index < fileList2.value.length; index++) {
        if (file.id == fileList2.value[index].id) {
          fileList2.value.splice(index, 1);
          if (fileImg2.value[index]) {
            let delurl = fileImg2.value[index].url;
            new tools().uploadFiledelete("", delurl).then(({ data }) => {});
            fileImg2.value.splice(index, 1);
          }
        }
      }
    };
    let fileList3 = ref([]);
    let fileImg3 = ref([]);
    const chooseImg3 = () => {
      xm.chooseFile({
        count: 1,
        name: "file",
        url:
          $base +
          `/sys/file/webupload/upload?uploadPath=religioussites/siteinfo/religiousSitesInfo`,
        headers: {
          "Content-Type": "multipart/form-data",
          token: window.localStorage.getItem("MZ_TOKEN"),
        },
      }).then((res) => {
        let data = res[0].data;
        data.name = decodeURIComponent(
          data.id.substring(data.url.lastIndexOf("/") + 1)
        );
        data.url = $base + data.url;
        fileImg3.value.push(data);
        fileList3.value.push(data);
      });
    };
    // 删除文件
    const deleteRead3 = (file) => {
      //删除文件操作
      for (let index = 0; index < fileList3.value.length; index++) {
        if (file.id == fileList3.value[index].id) {
          fileList3.value.splice(index, 1);
          if (fileImg3.value[index]) {
            let delurl = fileImg3.value[index].url;
            new tools().uploadFiledelete("", delurl).then(({ data }) => {});
            fileImg3.value.splice(index, 1);
          }
        }
      }
    };
    let fileList4 = ref([]);
    let fileImg4 = ref([]);
    const chooseImg4 = () => {
      xm.chooseFile({
        count: 1,
        name: "file",
        url:
          $base +
          `/sys/file/webupload/upload?uploadPath=religioussites/siteinfo/religiousSitesInfo`,
        headers: {
          "Content-Type": "multipart/form-data",
          token: window.localStorage.getItem("MZ_TOKEN"),
        },
      }).then((res) => {
        let data = res[0].data;
        data.name = decodeURIComponent(
          data.id.substring(data.url.lastIndexOf("/") + 1)
        );
        data.url = $base + data.url;
        fileImg4.value.push(data);
        fileList4.value.push(data);
      });
    };
    // 删除文件
    const deleteRead4 = (file) => {
      //删除文件操作
      for (let index = 0; index < fileList4.value.length; index++) {
        if (file.id == fileList4.value[index].id) {
          fileList4.value.splice(index, 1);
          if (fileImg4.value[index]) {
            let delurl = fileImg4.value[index].url;
            new tools().uploadFiledelete("", delurl).then(({ data }) => {});
            fileImg4.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(dataitem.value, {
        approvedEstablishmentTime:
          selectedOptions[0].text +
          "-" +
          selectedOptions[1].text +
          "-" +
          selectedOptions[2].text
          +" 00:00:00",
      });
      dataitem.value = json;
    };
    let hs_SignTime = ref(false);
    const getSignTime = ({ selectedOptions }) => {
      hs_SignTime.value = false;
      const json = Object.assign(dataitem.value, {
        registrationDate:
          selectedOptions[0].text +
          "-" +
          selectedOptions[1].text +
          "-" +
          selectedOptions[2].text
          +" 00:00:00",
      });
      dataitem.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;
      //保存前附件处理
      dataitem.value.scenesImage = fileImg.value
        .map((option) => option.id)
        .join("|");
      dataitem.value.etiquetteSpace = fileImg2.value
        .map((option) => option.id)
        .join("|");
      dataitem.value.approvalProcedures = fileImg3.value
        .map((option) => option.id)
        .join("|");
        dataitem.value.plan = fileImg4.value
        .map((option) => option.id)
        .join("|");
      new placeRegister().sava(dataitem.value).then((res) => {
        if (res.status == 200) {
          xm.showToast({
            message: "修改成功",
          });
          router.push({
            path: "/placeRegisterList",
          });
        } else {
          xm.showToast({
            message: "修改失败",
          });
        }
      });
    };
    return {
      onClickLeft,
      dataitem,
      selectColor,
      active,
      //图片上传
      fileList,
      chooseImg,
      deleteRead,
      fileList2,
      chooseImg2,
      deleteRead2,
      fileList3,
      chooseImg3,
      deleteRead3,
      fileList4,
      chooseImg4,
      deleteRead4,
      //宗教类型
      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>