<template>
  <div>
    <div
      class="dialog-h-content scroll-h"
      :class="{ 'visiual-form': source === 'visiual' }"
    >
      <el-form
        v-if="formType === 'add'"
        ref="ref_form"
        :inline="true"
        :model="formData"
        :rules="dataRule"
        class="div_form"
      >
        <!-- 服务类别 -->
        <el-form-item
          label="服务类别"
          style="display: block"
          label-width="150px"
          prop="serviceTypeLevel2Id"
        >
          <el-select
            class="u-item-width-communitycascader"
            v-model="formData.serviceTypeLevel1Id"
            placeholder="请选择"
            clearable
            @change="handleChangeServiceTypeLevel1"
          >
            <el-option
              v-for="item in serviceTypesLevel1"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          -
          <el-select
            class="u-item-width-communitycascader"
            v-model="formData.serviceTypeLevel2Id"
            placeholder="请选择"
            @change="handleChangeServiceTypeLevel2"
            clearable
          >
            <el-option
              v-for="item in serviceTypesLevel2"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="服务事项"
          prop="serviceName"
          label-width="150px"
          :class="{ 'form-item': source === 'visiual' }"
          style="display: block"
        >
          <el-input
            class="item_width_1"
            placeholder="请输入服务事项"
            v-model="formData.serviceName"
          >
          </el-input>
        </el-form-item>

        <el-form-item
          label="服务内容"
          prop="remark"
          label-width="150px"
          :class="{ 'form-item': source === 'visiual' }"
          style="display: block"
        >
          <el-input
            class="item_width_1"
            type="textarea"
            maxlength="1000"
            show-word-limit
            :rows="3"
            placeholder="请输入服务内容，不超过1000字"
            v-model="formData.remark"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="服务范围"
          prop="objList"
          label-width="150px"
          :class="{ 'form-item': source === 'visiual' }"
          style="display: block"
        >
          <el-cascader
            class="item_width_1"
            ref="myCascader"
            v-model="scopeIdArray"
            collapse-tags
            :key="iscascaderShow"
            :options="casOptions"
            :props="optionProps"
            :show-all-levels="false"
            @change="handleChangeScope"
          ></el-cascader>
        </el-form-item>

        <el-form-item
          label="服务时间"
          label-width="150px"
          :class="{ 'form-item': source === 'visiual' }"
          prop="serviceTimeStart"
        >
          <el-date-picker
            v-model="formData.serviceTimeStart"
            :picker-options="startPickerOptions"
            class="item_width_2"
            style="width: 220px"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            value="yyyy-MM-dd"
            placeholder="开始时间"
          >
          </el-date-picker>
          <span class="u-data-tag">至</span>
          <el-date-picker
            v-model="formData.serviceTimeEnd"
            :picker-options="endPickerOptions"
            class="item_width_2 u-data-tag"
            style="width: 220px"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            value="yyyy-MM-dd"
            placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item
          label="政策依据"
          prop="policyId"
          label-width="150px"
          :class="{ 'form-item': source === 'visiual' }"
          style="display: block"
        >
          <el-select
            v-model="formData.policyId"
            class="input-width-small"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in policyList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>

          <!-- <el-button
            style="margin-left: 10px"
            type="primary"
            size="small"
            @click="handlePersonList"
            >预览</el-button
          > -->
        </el-form-item>

        <el-form-item
          label="经办人"
          prop="principalName"
          :class="{ 'form-item': source === 'visiual' }"
          label-width="150px"
          style="display: block"
        >
          <el-input
            class="item_width_1"
            placeholder="请输入联系人姓名"
            v-model="formData.principalName"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="联系方式"
          prop="principalContact"
          :class="{ 'form-item': source === 'visiual' }"
          label-width="150px"
          style="display: block"
        >
          <el-input
            class="item_width_1"
            placeholder="请输入联系人电话"
            v-model="formData.principalContact"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="指派服务" label-width="150px">
          <el-switch
            v-model="formData.assignFlag"
            @change="handelDisabledRules"
          >
          </el-switch>
        </el-form-item>

        <el-form-item
          label="查找享受服务人员"
          prop="resiSearchTagId"
          :class="{ 'form-item': source === 'visiual' }"
          label-width="150px"
          style="display: block"
          v-if="formData.assignFlag"
        >
          <input
            type="text"
            v-model="formData.resiSearchTagId"
            v-show="false"
          />
          <template v-if="formData.resiSearchTagName">
            <el-tag @close="handleCloseTag" closable style="margin-right: 10px">
              {{ formData.resiSearchTagName }}
            </el-tag>
          </template>

          <el-button type="primary" @click="handleClickLabel" size="mini">
            <span> <i class="el-icon-plus"></i> 按标签查找 </span>
          </el-button>
        </el-form-item>

        <el-form-item
          label="服务方"
          prop="serviceOrgId"
          label-width="150px"
          :class="{ 'form-item': source === 'visiual' }"
          style="display: block"
        >
          <el-select
            v-model="formData.serviceOrgType"
            class="input-width-small"
            placeholder="请选择"
            clearable
            @change="handleServiceChange('add', $event)"
          >
            <el-option
              v-for="item in serviceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          -
          <el-select
            v-model="formData.serviceOrgId"
            class="input-width-middle"
            filterable
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in serviceOptiondList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="直接反馈"
          prop="remark"
          label-width="150px"
          :class="{ 'form-item': source === 'visiual' }"
          style="display: block"
        >
          <el-checkbox
            :label="'是'"
            v-model="showFeedback"
            @change="handleChangeFeedback"
          ></el-checkbox>
        </el-form-item>
      </el-form>
      <div v-show="formType === 'feedback' || showFeedback">
        <!-- <h3 class="d-h3">反馈内容</h3> -->

        <el-form
          ref="ref_form_feedback"
          :inline="true"
          :model="feedbackFormData"
          :rules="feedbackDataRule"
          class="div_form"
        >
          <!-- <el-form-item
            label="服务目标"
            prop="serviceGoal"
            :class="{ 'form-item': source === 'visiual' }"
            label-width="150px"
            style="display: block"
          >
            <el-input
              class="item_width_1"
              type="textarea"
              maxlength="1000"
              show-word-limit
              :rows="3"
              placeholder="请输入服务目标，不超过1000字"
              v-model="feedbackFormData.serviceGoal"
            ></el-input>
          </el-form-item> -->

          <!-- <el-form-item
            label="服务效果"
            prop="serviceEffect"
            label-width="150px"
            :class="{ 'form-item': source === 'visiual' }"
            style="display: block"
          >
            <el-input
              class="item_width_1"
              type="textarea"
              maxlength="1000"
              show-word-limit
              :rows="3"
              placeholder="请输入服务效果，不超过1000字"
              v-model="feedbackFormData.serviceEffect"
            ></el-input>
          </el-form-item> -->

          <!-- <el-form-item
            label="服务人数"
            style="display: block"
            :class="{ 'form-item': source === 'visiual' }"
            prop="servicePeopleNumber"
            label-width="150px"
          >
            <el-input-number
              class="item_width_2"
              v-model="feedbackFormData.servicePeopleNumber"
              :min="0"
              :max="9999"
              label="服务人数"
            ></el-input-number>
          </el-form-item> -->

          <!-- <el-form-item
            label="服务状态"
            style="display: block"
            label-width="150px"
            :class="{ 'form-item': source === 'visiual' }"
            prop="serviceStatus"
          >
            <span>已完成</span> -->
          <!-- <el-select class="item_width_1"
                         v-model="feedbackFormData.serviceStatus"
                         placeholder="全部"
                         clearable>
                <el-option v-for="item in statusArray"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select> -->
          <!-- </el-form-item> -->
          <el-form-item
            label="满意度"
            style="display: block"
            label-width="150px"
            :class="{ 'form-item': source === 'visiual' }"
            prop="satisfaction"
          >
            <el-select
              class="item_width_2"
              v-model="feedbackFormData.satisfaction"
              placeholder="全部"
              clearable
            >
              <el-option
                v-for="item in satisfyArray"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="备注"
            prop="serviceGoal"
            :class="{ 'form-item': source === 'visiual' }"
            label-width="150px"
            style="display: block"
          >
            <el-input
              class="item_width_1"
              type="textarea"
              maxlength="1000"
              show-word-limit
              :rows="3"
              v-model="feedbackFormData.serviceGoal"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="详细位置" label-width="150px">
             <el-input
              class="item_width_1"
              v-model="feedbackFormData.address"
            ></el-input>
          </el-form-item> -->
          <!-- <el-form-item
            label="地图位置"
            label-width="150px"
            :class="{ 'form-item': source === 'visiual' }"
            style="display: block"
          >
            <div style="width: 500px">
              <div class="div_map">
                <div id="map_app"></div>
                <div class="div_searchmap">
                  <el-input
                    maxlength="50"
                    placeholder="请输入关键字"
                    v-model="keyWords"
                  >
                  </el-input>
                  <el-button
                    style="margin-left: 10px"
                    type="primary"
                    size="mini"
                    @click="handleSearchMap"
                    >查询</el-button
                  >
                </div>
              </div>
            </div>
          </el-form-item> -->

          <!-- <el-form-item
            class="block"
            label="附件"
            :class="{ 'form-item': source === 'visiual' }"
            label-width="150px"
            prop="attach"
          >
            <el-upload
              :headers="$getElUploadHeaders()"
              class="upload-demo"
              :action="uploadUlr"
              accept=".doc,.pdf,.xls,.docx,.xlsx,.jpg,.png,.jpeg,.bmp,.mp4,.wma,.m4a,.mp3"
              :on-success="handleFileSuccess"
              :on-remove="handleFileRemove"
              :limit="3"
              :before-upload="beforeUpload"
              :file-list="fileList"
            >
              <el-button
                size="small"
                :disabled="fileList.length === 3"
                type="primary"
                >点击上传</el-button
              >
              <div slot="tip" class="el-upload__tip">支持图片、word、pdf</div>
            </el-upload>
          </el-form-item> -->
        </el-form>
      </div>
    </div>

    <div class="div_btn">
      <el-button size="small" @click="handleCancle">取 消</el-button>
      <el-button
        size="small"
        type="primary"
        :disabled="btnDisable"
        @click="handleComfirm"
        >确 定</el-button
      >
    </div>

    <el-dialog
      v-if="showPersonList"
      :visible.sync="showPersonList"
      :append-to-body="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="'政策预览'"
      width="1150px"
      top="5vh"
      class="dialog-h"
      @closed="showPersonList = false"
    >
      <person-list
        ref="ref_detail_form"
        :policyId="policyId"
        :ruleList="ruleList"
        @handleOk="handleOk"
        @handleClose="handleClose"
      >
      </person-list>
    </el-dialog>
    <el-dialog
      v-if="showLabelForm"
      :visible.sync="showLabelForm"
      :append-to-body="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="'标签配置'"
      width="900px"
      top="5vh"
      class="dialog-h"
      @closed="showLabelForm = false"
    >
      <label-form
        ref="ref_label_form"
        :policyId="policyId"
        :ruleList="ruleList"
        @dialogCancle="addFormCancle"
        @dialogOk="addFormOk"
      >
        <!--    @handleOk="handleOk"
        @handleClose="handleClose" -->
      </label-form>
    </el-dialog>
  </div>
</template>

  <script>
import { mapGetters } from "vuex";
import { Loading } from "element-ui"; // 引入Loading服务
import { requestPost, requestGet } from "@/js/dai/request";
import personList from "../policy/personList";
import nextTick from "dai-js/tools/nextTick";
import labelForm from "../labelConfig/addForm.vue";
import daiMap from "@/utils/dai-map";

let loading; // 加载动画
let map;

export default {
  props: {
    defaultData: {
      type: Object,
      default: null,
    },
    serviceRecordId: {
      type: String,
      required: "",
    },
    serviceCategoryKey: {
      type: String,
      required: "",
    },
    serviceProjectName: {
      //服务项目名称
      type: String,
      required: false,
      default: "",
    },
    formType: {
      //表单操作类型 add新增，edit编辑，detail详情,feedback反馈
      type: String,
      required: "",
    },
    categrayArray: {
      type: Array,
      default() {
        return [];
      },
    },
    source: {
      //展示来源：manage  管理平台    visiual  可视化平台
      type: String,
      default: "manage",
    },
  },

  data() {
    let endDisabledDate = (time) => {
      //这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
      let nowData = Date.now();
      if (this.formData.serviceTimeStart) {
        let serviceTimeStart = new Date(this.formData.serviceTimeStart);
        return (
          time.getTime() < serviceTimeStart - 24 * 60 * 60 * 1000 ||
          time.getTime() === serviceTimeStart - 24 * 60 * 60 * 1000
        );
      } else {
        return time.getTime() > nowData || time.getTime() === nowData;
      }
    };
    let startDisabledDate = (time) => {
      //这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
      let nowData = Date.now() - 24 * 60 * 60 * 1000;
      return time.getTime() < nowData;
    };

    return {
      // 公共服务分类
      serviceTypesLevel1: [],
      serviceTypesLevel2: [],

      btnDisable: false,
      casOptions: [],
      scopeIdArray: [],
      iscascaderShow: 0,

      optionProps: {
        multiple: true,
        value: "objectId",
        label: "objectName",
        children: "children",
        checkStrictly: true,
        emitPath: false,
      },

      keyWords: "",
      formData: {
        serviceTypeLevel1Id: "", // 公共服务（政策级别）一级分类id
        serviceTypeLevel2Id: "", // 公共服务（政策级别）二级分类id
        serviceCategoryKey: "",
        assignFlag: false,
        resiSearchTagId: "", //查找享受服务人员
        resiSearchTagName: "", //享受服务人员名称
        serviceName: "", //服务事项
        serviceOrgType: "", //服务组织类型 社区自组织：community_org， 志愿者：ic_user_volunteer， 联建单位：party_unit
        serviceOrgId: "", //服务组织Id
        objList: [], //
        policyId: "",
        principalName: "", //经办人(责任人)姓名
        principalContact: "", //经办人联系方式
        serviceTimeStart: "", //服务起始时间yyyy-MM-dd
        serviceTimeEnd: "", //服务截止时间yyyy-MM-dd
        remark: "", //
        feedback: {}, //反馈。允许发起服务的时候直接填写反馈，完成服务。
      },
      feedbackFormData: {
        serviceGoal: "", //	服务目标
        serviceEffect: "", //	服务效果
        servicePeopleNumber: null, //	服务人数
        serviceStatus: "completed", //	服务状态。in_service服务中；completed:已完成
        satisfaction: "", //满意度。不满意:bad、基本满意:good、非常满意:perfect
        longitude: "", //	经度
        latitude: "", //	维度
        address: "",
        fileList: [], //	附件列表
      },

      endPickerOptions: {
        disabledDate: endDisabledDate,
      },
      startPickerOptions: {
        disabledDate: startDisabledDate,
      },

      showFeedback: false,
      serviceOptions: [],
      serviceOptiondList: [],
      policyList: [],

      fileList: [],
      uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadvariedfile",

      policyId: "",
      showPersonList: false,
      ruleList: [],
      firstInitMap: true,

      categrayOptions: [],
      statusArray: [
        {
          value: "in_service",
          label: "进行中",
        },
        {
          value: "completed",
          label: "已完成",
        },
      ],
      satisfyArray: [
        {
          value: "bad",
          label: "不满意",
        },
        {
          value: "good",
          label: "基本满意",
        },
        {
          value: "perfect",
          label: "非常满意",
        },
      ],
      showLabelForm: false,
    };
  },

  computed: {
    feedbackDataRule() {
      return {
        // serviceGoal: [
        //   { required: true, message: "服务目标不能为空", trigger: "blur" },
        // ],

        serviceEffect: [
          { required: true, message: "服务效果不能为空", trigger: "blur" },
        ],
        servicePeopleNumber: [
          { required: true, message: "服务人数不能为空", trigger: "blur" },
        ],
        serviceStatus: [
          { required: true, message: "服务状态不能为空", trigger: "blur" },
        ],
        satisfaction: [
          { required: true, message: "满意度不能为空", trigger: "blur" },
        ],
        address: [{ required: true, message: "地址不能为空", trigger: "blur" }],
      };
    },
    dataRule() {
      return {
        serviceTypeLevel2Id: [
          { required: true, message: "政策类型不能为空", trigger: "change" },
        ],
        serviceName: [
          { required: true, message: "服务事项不能为空", trigger: "change" },
        ],
        serviceOrgId: [
          { required: true, message: "服务组织不能为空", trigger: "change" },
        ],

        serviceTimeStart: [
          { required: true, message: "服务时间不能为空", trigger: "change" },
        ],
        objList: [
          { required: true, message: "服务范围不能为空", trigger: "change" },
        ],
        resiSearchTagId: [
          {
            required: true,
            message: "享受服务人员不能为空",
            trigger: "change",
          },
        ],
      };
    },
  },

  watch: {
    "formData.serviceTimeEnd": function (val) {
      if (val && val != "") {
        let arrayTemp = val.split(" ");
        this.formData.serviceTimeEnd = arrayTemp[0] + " 23:59:59";
      }
    },
  },

  components: { personList, labelForm },

  async mounted() {
    this.startLoading();
    // 都已经重置了，还放在prop里干嘛，我不理解
    this.categrayOptions = this.categrayArray;

    // this.getCategrayList();
    this.getDictOptions();
    this.getPolicyList();
    if (this.formType === "feedback" || this.showFeedback) {
      // this.initMap();
      // this.$refs.ref_form_feedback.resetFields();
    }

    if (this.formType === "add") {
      this.$refs.ref_form.resetFields();
      await this.loadScopeTree();
    } else {
    }

    await this.iniDefaultData();

    this.endLoading();
    // 服务分类下拉（其实是获取的共性服务分类）
    this.$http
      .get("/governance/commonServiceType/selectList/0")
      .then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        } else {
          this.serviceTypesLevel1 = res.data;
          console.log(res.data);
        }
      })
      .catch(() => {
        return this.$message.error("网络错误");
      });
  },

  methods: {
    handelDisabledRules(v) {
      if (!v) {
        delete this.dataRule.resiSearchTagId;
      } else {
        var arr = [
          {
            required: true,
            message: "享受服务人员不能为空",
            trigger: "change",
          },
        ];
        this.dataRule.resiSearchTagId = arr;
      }
      console.log(this.dataRule);
    },

    // 服务类型下拉框选中事件
    handleChangeServiceTypeLevel1() {
      this.formData.serviceTypeLevel2Id = "";
      this.$http
        .get(
          "/governance/commonServiceType/selectList/" +
            this.formData.serviceTypeLevel1Id
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.serviceTypesLevel2 = res.data;
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
    },
    // 如果服务方有选择第一个的话让它更新一下
    handleChangeServiceTypeLevel2() {
      console.log(this.formData.serviceTypeLevel1Id);
      console.log(this.formData.serviceTypeLevel2Id);
      if (this.formData.serviceOrgType) {
        this.getServiceuserList(this.formData.serviceOrgType);
      } else {
        return;
      }
    },
    handleClickLabel() {
      this.showLabelForm = true;
      this.$nextTick(() => {
        this.$refs["ref_label_form"].initForm("info");
      });
    },
    addFormOk(val) {
      this.showLabelForm = false;
      this.formData.resiSearchTagId = val.tagId;
      this.formData.resiSearchTagName = val.tagName;
    },
    addFormCancle() {
      this.showLabelForm = false;
    },
    handleCloseTag() {
      this.formData.resiSearchTagId = "";
      this.formData.resiSearchTagName = "";
    },
    async iniDefaultData() {
      const { defaultData } = this;
      console.log("iniDefaultData3", defaultData);
      if (defaultData) {
        const { serviceOrgType, serviceOrgId, scopeIdArray } = defaultData;
        if (serviceOrgType) {
          this.formData.serviceOrgType = serviceOrgType;
          await this.getServiceuserList(serviceOrgType, "add_demand");
        }
        if (serviceOrgId) {
          this.formData.serviceOrgId = serviceOrgId;
        }
        if (scopeIdArray) {
          this.scopeIdArray = scopeIdArray;
          await nextTick();
          this.handleChangeScope();
        }
      }
    },

    //加载组织数据
    async handlePersonList() {
      if (!this.formData.policyId) {
        this.$message.info("请先选择政策");
        return false;
      }

      this.policyId = this.formData.policyId;
      await this.loadRuleList();

      this.showPersonList = true;
    },

    async loadRuleList() {
      const url = "/governance/policy/rulelist/" + this.policyId;

      let params = {};

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.ruleList = data;
      } else {
        this.$message.error(msg);
      }
    },

    handleClose() {
      this.showPersonList = false;
    },
    handleOk() {
      this.showPersonList = false;
    },

    async getPolicyList() {
      const url = "/governance/policy/policyList";

      let params = {
        pageNo: 1,
        pageSize: 1000
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.policyList = data.list;
      } else {
        this.$message.error(msg);
      }
    },
    async getDictOptions() {
      this.$http
        .post("/sys/dict/data/dictlist", {
          dictType: "user_demand_service_type",
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.serviceOptions = res.data;
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
    },

    // 字典
    // async getCategrayList() {
    //   const url = "/sys/dict/data/dictlist";

    //   let params = {
    //     dictType: "ic_service_type",
    //   };

    //   const { data, code, msg } = await requestPost(url, params);

    //   if (code === 0) {
    //     this.categrayOptions = data;
    //   } else {
    //     this.$message.error(msg);
    //   }
    // },
    async handleServiceChange(type, val) {
      console.log(val);
      if (val === "social_org") {
        if (type === "add") await this.getServiceuserList(val);
        else this.getServiceuserList(val);
      } else this.getServiceuserList(val);
    },

    async getServiceuserList(serverOrgType) {
      if (!serverOrgType) return false;
      if (this.formData.serviceTypeLevel2Id == "") {
        this.$message.error("请先选择服务类别!");
        return;
      }
      const url = "/actual/base/serviceitem/listServerOrg";
      let params = {
        serviceTypeId: this.formData.serviceTypeLevel2Id,
        serverOrgType: serverOrgType,
        businessType: "common_service",
      };
      let { data, code, msg } = await requestPost(url, params);
      if (code == 0) {
        this.serviceOptiondList = data;
      } else if (code >= 8000) {
        this.$message.error(msg);
      }
    },
    handleChangeFeedback(val) {
      this.showFeedback = val;

      if (this.firstInitMap) {
        this.$nextTick(() => {
          this.initMap();
        });
      }
    },

    // 获取服务范围树
    async loadScopeTree() {
      const url = "/gov/org/icServiceProject/service/serviceScopeTree";
      // const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/isServiceProject/service/serviceScopeTree'
      let params = {};

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        ++this.iscascaderShow;
        this.casOptions = [];
        this.scopeIdArray = [];
        this.casOptions.push(data);
      } else {
        this.$message.error(rspMsg);
      }
    },

    handleChangeScope(value) {
      this.formData.objList = [];
      let selArray = this.$refs["myCascader"].getCheckedNodes();
      selArray.forEach((element) => {
        let obj = {
          objectType: element.data.objectType,
          objectId: element.data.objectId,
          objectName: element.data.objectName,
        };
        this.formData.objList.push(obj);
      });
    },

    async handleComfirm() {
      if (this.formType === "add") {
        this.handleAdd();
      } else if (this.formType === "feedback") {
        this.handleFeedback();
      }
    },

    async handleAdd() {
      this.btnDisable = true;
      setTimeout(() => {
        this.btnDisable = false;
      }, 10000);
      this.$refs["ref_form"].validate((valid, messageObj) => {
        if (!valid) {
          app.util.validateRule(messageObj);
          this.btnDisable = false;
        } else {
          var oDate1 = new Date(this.formData.serviceTimeStart);
          var oDate2 = new Date(this.formData.serviceTimeEnd);
          if (oDate1.getTime() > oDate2.getTime()) {
            this.$message.error("服务截止时间必须大于服务开始时间");
            return false;
          }

          if (this.showFeedback) {
            this.$refs["ref_form_feedback"].validate((valid, messageObj) => {
              if (!valid) {
                app.util.validateRule(messageObj);
                this.btnDisable = false;
              } else {
                this.formData.feedback = { ...this.feedbackFormData };
                this.addFuwu();
              }
            });
          } else {
            this.addFuwu();
          }
        }
      });
    },

    async addFuwu() {
      if (this.showFeedback) {
        this.feedbackFormData.fileList = [];
        this.feedbackFormData.fileList = [...this.fileList];
        this.formData.feedback = { ...this.feedbackFormData };
      } else {
        this.formData.feedback = null;
      }
      this.formData.resiSearchTagId = this.assignFlag
        ? this.formData.resiSearchTagId
        : "";
      this.formData.resiSearchTagName = this.assignFlag
        ? this.formData.resiSearchTagName
        : "";
      console.log(this.formData);
      // return false
      const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //联系电话

      if (
        this.formData.principalContact &&
        regPhone.test(this.formData.principalContact) === false
      ) {
        this.btnDisable = false;
        this.$message({
          type: "warning",
          message: "请输入正确的联系电话",
        });
        return false;
      }

      if (this.source === "manage") {
        this.formData.serviceCategoryKey = this.serviceCategoryKey;
      }
      const url = "/governance/icServiceRecordV2/add";
      // const url = 'http://yapi.elinkservice.cn/mock/245/governance/icServiceProject/service/initiate'
      let params = {
        ...this.formData,
      };
      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.$message.success("发起成功");
        this.resetData();
        this.$emit("handleOk");
      } else {
        this.$message.error(msg);
      }
    },

    async handleFeedback() {
      this.btnDisable = true;
      setTimeout(() => {
        this.btnDisable = false;
      }, 10000);

      this.$refs["ref_form_feedback"].validate((valid, messageObj) => {
        if (!valid) {
          app.util.validateRule(messageObj);
          this.btnDisable = false;
        } else {
          this.addFeecback();
        }
      });
    },

    async addFeecback() {
      this.feedbackFormData.fileList = [];
      this.feedbackFormData.fileList = [...this.fileList];
      this.feedbackFormData.serviceRecordId = this.serviceRecordId;

      console.log(this.feedbackFormData);
      // return false

      const url = "/governance/icServiceFeedbackV2/add";

      let params = {
        ...this.feedbackFormData,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.$message.success("反馈成功");
        this.resetData();
        this.$emit("handleOk");
      } else {
        this.$message.error(msg);
      }
    },

    beforeUpload(file) {
      const array = file.name.split(".");
      const extension = array[array.length - 1];

      const formatarray = [
        "jpg",
        "png",
        "jpeg",
        "bmp",
        "mp4",
        "wma",
        "m4a",
        "mp3",
        "doc",
        "docx",
        "xls",
        "xlsx",
        "pdf",
      ];

      if (formatarray.indexOf(extension) === -1) {
        this.$message.error("只支持图片、word、pdf");
        return false;
      }
    },

    handleFileRemove(file) {
      if (file && file.status === "success") {
        this.fileList.splice(
          this.fileList.findIndex((item) => item.uid === file.uid),
          1
        );
      }
    },

    handleFileSuccess(res, file) {
      if (res.code === 0 && res.msg === "success") {
        const array = file.name.split(".");
        const fileType = array[array.length - 1];

        const picArray = ["jpg", "png", "jpeg", "bmp"];
        const videoarray = ["mp4", "wma", "m4a"];
        const docArray = ["doc", "docx", "xls", "xlsx", "pdf"];
        const mp3Array = ["mp3"];

        if (picArray.indexOf(fileType) > -1) {
          file.format = "image";
        } else if (videoarray.indexOf(fileType) > -1) {
          file.format = "video";
        } else if (docArray.indexOf(fileType) > -1) {
          file.format = "doc";
        } else if (mp3Array.indexOf(fileType) > -1) {
          file.format = "voice";
        }

        file.url = res.data.url;
        file.type = fileType;

        file.name = file.name;
        file.type = file.type;
        file.url = file.url;

        this.fileList.push(file);
        console.log(this.fileList);
      } else this.$message.error(res.msg);
    },

    //下载
    handleFileDownload(file) {
      var a = document.createElement("a");
      var event = new MouseEvent("click");
      a.download = file.name;
      console.log(a);
      a.href = file.url;
      a.dispatchEvent(event);
    },
    handleCancle() {
      this.resetData();
      this.$emit("handleClose");
    },

    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
    initMap() {
      let { latitude, longitude } = this.$store.state.user;

      map = new daiMap(
        document.getElementById("map_app"),
        { latitude, longitude },
        {
          zoom: 16.2, // 设置地图缩放级别
          pitch: 43.5, // 设置俯仰角
          rotation: 45, // 设置地图旋转角度
        }
      );

      // 监听地图平移结束
      map.on("dragend", (e) => {
        this.handleMoveCenter(e);
      });

      map.setCenter(latitude, longitude);
      map.setMarker(latitude, longitude);
    },

    async handleMoveCenter() {
      //修改地图中心点
      const { lat, lng } = map.getCenter();
      this.feedbackFormData.latitude = lat;
      this.feedbackFormData.longitude = lng;
      map.setMarker(lat, lng);

      let { msg, data } = await map.getAddress(lat, lng);
      if (msg == "success") {
        this.feedbackFormData.address = data.address;
      }
    },

    async handleSearchMap() {
      const { msg, data } = await map.searchNearby(this.keyWords);
      if (msg == "success") {
        const { lat, lng } = data;
        map.setCenter(lat, lng);
        map.setMarker(lat, lng);
        this.feedbackFormData.latitude = lat;
        this.feedbackFormData.longitude = lng;
      } else {
        this.$message.error("未检索到相关位置坐标");
      }
    },

    resetData() {
      this.formData = {
        serviceTypeLevel1Id: "", // 公共服务（政策级别）一级分类id
        serviceTypeLevel2Id: "", // 公共服务（政策级别）二级分类id
        objList: [], //
        principalName: "", //经办人(责任人)姓名
        principalContact: "", //经办人联系方式
        serviceTimeStart: "", //服务起始时间yyyy-MM-dd
        serviceTimeEnd: "", //服务截止时间yyyy-MM-dd
        remark: "", //
        feedback: {}, //反馈。允许发起服务的时候直接填写反馈，完成服务。
      };
      this.feedbackFormData = {
        serviceGoal: "", //	服务目标
        serviceEffect: "", //	服务效果
        servicePeopleNumber: null, //	服务人数
        serviceStatus: "completed", //	服务状态。in_service服务中；completed:已完成
        satisfaction: "", //满意度。不满意:bad、基本满意:good、非常满意:perfect
        longitude: "", //	经度
        latitude: "", //	维度
        address: "",
        fileList: [], //	附件列表
      };
    },
    // 开启加载动画
    startLoading() {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: "正在加载……", // 加载中需要显示的文字
        background: "rgba(0,0,0,.7)", // 背景颜色
      });
    },
    // 结束加载动画
    endLoading() {
      // clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
};
</script>

  <style lang="scss" scoped>
@import "@/assets/scss/modules/management/form-main.scss";
@import "@/assets/scss/modules/visual/a_customize.scss";

.form-item::v-deep .el-form-item__label {
  color: #fff;
}
.form-item {
  .el-radio {
    color: #fff;
  }

  .el-checkbox {
    color: #fff;
  }
}
</style>
