<template>
    <div>
      <div class="dialog-h-content scroll-h">
        <div v-if="initLoading" class="m-row">
          <div class="m-info">
            <div class="info-prop">
              <span class="info-title-2">服务名称：</span>
              <span>{{ formData.serviceName || "--" }}</span>
            </div>

            <div class="info-prop">
              <span class="info-title-2">服务组织：</span>
              <span>{{ serviceOrgName || "--" }}</span>
            </div>

            <div class="info-prop">
              <span class="info-title-2">服务范围：</span>
              <span>{{ formData.gridIdListName || "--" }}</span>
            </div>

            <div class="info-prop">
              <span class="info-title-2">政策依据：</span>
              <span>{{ formData.policyTitle || "--" }}</span>
              <!-- <el-button
                v-if="formData.policyId"
                style="margin-left: 10px"
                type="primary"
                size="small"
                @click="handlePersonList"
                >预览</el-button
              > -->
            </div>
            <div class="info-prop">
              <span class="info-title-2">经办人：</span>
              <span>{{ formData.principalName || "--" }}</span>
            </div>
            <div class="info-prop">
              <span class="info-title-2">联系方式：</span>
              <span>{{ formData.principalContact || "--" }}</span>
            </div>
            <div class="info-prop">
              <span class="info-title-2">服务时间：</span>
              <span>{{ formData.serviceTimeStart || "--" }}</span
              >至
              <span>{{ formData.serviceTimeEnd || "--" }}</span>
            </div>
            <div class="info-prop">
              <span class="info-title-2">享受服务人员: </span>
              <span>{{ resiSearchTagName }}</span>
            </div>

            <div class="info-prop">
              <span class="info-title-2">备注：</span>
              <span>{{ formData.remark || "--" }}</span>
            </div>

            <div v-show="formData.serviceStatus === 'completed'">
              <h3 class="d-h3">反馈内容</h3>

              <div class="info-prop">
                <span class="info-title-2">备注：</span>
                <span>{{ feedbackFormData.serviceGoal || "--" }}</span>
              </div>
              <!-- <div class="info-prop">
                <span class="info-title-2">服务效果：</span>
                <span>{{ feedbackFormData.serviceEffect || "--" }}</span>
              </div>
              <div class="info-prop">
                <span class="info-title-2">服务人数：</span>
                <span>{{ feedbackFormData.servicePeopleNumber || 0 }}</span>
              </div>

              <div class="info-prop">
                <span class="info-title-2">服务状态：</span>
                <span>{{ feedbackFormData.serviceStatusShow || "--" }}</span>
              </div> -->
              <div class="info-prop">
                <span class="info-title-2">满意度：</span>
                <span>{{ feedbackFormData.satisfactionShow || "--" }}</span>
              </div>

              <!-- <div class="info-prop">
                <span class="info-title-2">地理位置：</span>
                <span>{{ feedbackFormData.address || "--" }}</span>
              </div>

              <div class="info-prop">
                <span class="info-title-2">地图位置：</span>
                <div class="div_map">
                  <div id="app_detail"></div>
                </div>
              </div>

              <div class="info-prop">
                <span class="info-title-2">附件：</span>
                <file-list
                  v-if="fileList.length > 0"
                  :fileList="fileList"
                ></file-list>
                <span v-else>--</span>
              </div> -->
            </div>
          </div>
        </div>
      </div>

      <div class="div-btn">
      </div>
      <el-row type="flex" justify="right">
          <el-col :span="24"  align="right">
           <el-button size="small" @click="handleCancle" style="margin-right:16px;">关 闭</el-button>
          </el-col>
      </el-row>
      <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>
    </div>
  </template>

  <script>
  import { mapGetters } from "vuex";
  import { Loading } from "element-ui"; // 引入Loading服务
  import { requestPost } from "@/js/dai/request";
  // import personList from "../policy/oldPersonList.vue";
  import fileList from "@/views/components/fileList";
  import daiMap from "@/utils/dai-map";

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

  export default {
    data() {
      return {
        initLoading: false,

        keyWords: "",
        formData: {},
        resiSearchTagName:"",
        feedbackFormData: {
          serviceProjectId: "", //	服务项目id
          serviceName: "",
          serviceGoal: "", //	服务目标
          serviceEffect: "", //	服务效果
          servicePeopleNumber: null, //	服务人数
          serviceStatus: "completed", //	服务状态。in_service服务中；completed:已完成
          satisfaction: "", //满意度。不满意:bad、基本满意:good、非常满意:perfect
          longitude: "", //	经度
          latitude: "", //	维度
          address: "",
          fileList: [], //	附件列表
        },

        policyId: "",
        showPersonList: false,
        ruleList: [],
        policyList: [],
      };
    },
    components: { fileList },
    async mounted() {
      // if (this.serviceRecordId) {//详情
      await this.loadInfo();
      this.initLoading = true;

      if (
        this.formData.serviceStatus === "completed" &&
        this.feedbackFormData.latitude
      ) {
        this.$nextTick(() => {
          this.initMap();
        });
      }
    },

    methods: {
      diaDestroy() {},

      //加载组织数据
      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;
      },

      //加载组织
      async loadInfo() {
        const url = "/governance/icServiceRecordV2/detail";

        let params = {
          serviceRecordId: this.serviceRecordId,
        };

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

        if (code === 0) {
          this.formData = { ...data };
          this.formData.serviceRecordId = this.serviceRecordId;
          this.feedbackFormData = { ...data.feedback };
          this.formData.gridIdListName = "";
          this.feedbackFormData.serviceStatusShow = "";
          this.feedbackFormData.satisfactionShow = "";
          await this.getTagName()
          let arr = [];
          this.formData.gridIdList.forEach((element) => {
            arr.push(element.objectName);
          });
          this.formData.gridIdListName = arr.join(",");
          this.statusArray.forEach((element) => {
            if (this.formData.serviceStatus === element.value) {
              this.feedbackFormData.serviceStatusShow = element.label;
            }
          });
          this.satisfyArray.forEach((element) => {
            if (this.feedbackFormData.satisfaction === element.value) {
              this.feedbackFormData.satisfactionShow = element.label;
            }
          });

          this.fileList = [];
          if (
            data.feedback &&
            data.feedback.fileList &&
            data.feedback.fileList.length > 0
          ) {
            data.feedback.fileList.forEach((element) => {
              let obj = {
                name: element.name,
                format: element.format,
                url: element.url,
                type: element.type,
              };
              this.fileList.push(obj);
            });
          }
        } else {
          this.$message.error(msg);
        }
      },
      async getTagName() {
        const url = "/governance/resiSearchTag/listResiSearchTags";
        let params = {
          pageSize: 99,
        };
        let { data, msg, code } = await requestPost(url, params);
        if (code == 0) {
          let showAddProduct = data.list.filter(item=>{
             return [this.formData.resiSearchTagId].includes(item.tagId)
            })
          if(this.formData.resiSearchTagId){
            this.resiSearchTagName = showAddProduct[0].tagName
          }else{
           this.resiSearchTagName = '--'
          }
         
        } else {
          this.$message.error(msg);
        }
      },
      handleCancle() {
        this.resetData();
        this.$emit("diaDetailClose");
      },

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

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

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

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

      resetData() {
        this.formData = {};
      },
      // 开启加载动画
      startLoading() {
        loading = Loading.service({
          lock: true, // 是否锁定
          text: "正在加载……", // 加载中需要显示的文字
          background: "rgba(0,0,0,.7)", // 背景颜色
        });
      },
      // 结束加载动画
      endLoading() {
        // clearTimeout(timer);
        if (loading) {
          loading.close();
        }
      },
    },
    computed: {
      dataRule() {
        return {
          serviceTimeStart: [
            { required: true, message: "服务时间不能为空", trigger: "blur" },
          ],
        };
      },
      // resiSearchTagNameText(){
      //   let text = ""
      //   if(this.resiSearchTagName){
      //     text = this.resiSearchTagName
      //   }else {
      //     text = '--'
      //   }
      //   return text
      // },
    },
    props: {
      serviceRecordId: {
        type: String,
        required: true,
      },
      serviceOrgName: {
        type: String,
        required: true,
      },

      satisfyArray: {
        type: Array,
        default() {
          return [];
        },
      },
      statusArray: {
        type: Array,
        default() {
          return [];
        },
      },
    },
  };
  </script>

  <style lang="scss" scoped>
  @import "@/assets/scss/modules/management/detail-main.scss";
  .info-prop{
    margin-top: 29px;
  }
  .scroll-h{
    padding: 0 90px !important;
  }
  </style>
