const defaultHeaders = { mode: 'no-cors', 'Sec-Fetch-Mode': 'no-cors' };
// const HOST = `http://202.103.68.144:890/service-CooperateSOA`; // debug: 0
const HOST = `https://p9axztuwd7x8a7.mycht.cn/service-CooperateSOA`;
const index = new Vue({
  el: '#app',
  computed: {
    isWideScreen() {
      return window.innerWidth >= 768; // Adjust the threshold as needed
    },
    drawWidth() {
      return window.innerWidth < 768 ? Math.floor(window.innerWidth - 40) : 760; // Adjust the threshold as needed
    },
    isEmptyData() {
      return this.feedbackItem.guide.length === 0 && this.feedbackItem.driver.length === 0 && this.feedbackItem.experience.length === 0 && this.feedbackItem.hotel.length === 0;
    },
  },
  data() {
    return {
      timer: null,
      error: false,
      errorMsg: '',
      webcode: 'ah',

      i18n: { title: ''},

      param: {},
      loading: false,

      cityListPage: true,
      resultPage: false,

      cityList: [],
      currentCity: {},
      cityListOpen: false,

      feedbackCity: {},

      isFilled: false,
      feedbackItemList: [],
      feedbackItem: { guide: [], driver: [], experience: [], hotel: [] },
      tourGuideList: [],
      feedbackEvaluation: [],
      group: {},

      showPhotos: false,

      signaturePad: null,
      debug: false,
    };
  },
  created() {
    console.clear();
    console.log('invoke vue', typeof this);
    this.initData();
  },
  methods: {
    initData() {
      this.webcode = webList[hostname] || webList.default;

      for (const param of urlParams) {
        this.param[param[0]] = param[1];
      }
      this.debug = this.param.debug || false;
      this.resultPage = !isEmpty(this.param.r);
      var urlPath = window.location.pathname.replace('/customerfeedback/', '').split('-'); // .filter(s => s);
      urlPath = urlPath.length >= 3 ? urlPath : window.location.pathname.replace('/customerfeedback/', '').split('/');
      if (urlPath.length > 0 && isEmpty(this.param.g)) {
        this.param.g = urlPath[0];
        this.param.v = urlPath[1];
        this.param.l = urlPath[2] || 1;
        this.resultPage = !isEmpty(urlPath[3]);

        this.debug = !isEmpty(urlPath[4]);
        this.resultPage = !isEmpty(urlPath[4]) ? false : !isEmpty(urlPath[3]);
      }
      console.log(this.param);
      if (!(this.param.v && this.param.g)) {
        this.error = true;
        this.errorMsg = 'Invalid URL';
        return false;
      }
      // console.log('resultPage', this.resultPage);
      this.i18n = lanCodeMapped[String(this.param.l)];
      var that = this;
      Array.from(document.getElementsByTagName('h1')).forEach(function(ele){
        ele.textContent = that.i18n.title;
      });
      this.loading = true;
      // console.log('resultPage', this.loading);
      this.getCityList();
    },
    getCityList() {
      if (!(this.param.v && this.param.g)) {
        return false;
      }
      const that = this;
      get(`${HOST}/get_feedback_city`, { GRI_SN: that.param.g, VEI_SN: that.param.v, lgc: this.param.l }, { headers: { ...{} } }).then((res) => {
        that.loading = false;
        that.error = res.cityList.length === 0;
        that.errorMsg = 'No city found';

        const mergeCity = groupBy(res.cityList, (ele) => (isEmpty(ele.tourGuideId) ? 'unknown' : ele.tourGuideId));
        const mergeCityA = Object.keys(mergeCity).reduce((r, tgid) => {
          if (tgid !== 'unknown') {
            const uniqueCII_SN = mergeCity[tgid].map((v) => v.cii_sn).filter((v, i, a) => a.indexOf(v) === i);
            const uniqueCII_Name = mergeCity[tgid].map((v) => v.cityName).filter((v, i, a) => a.indexOf(v) === i);
            return r.concat(
              mergeCity[tgid].length > 1
                ? [
                    {
                      ...mergeCity[tgid][0],
                      cii_sn: uniqueCII_SN.join('_'),
                      cii_sn_arr: uniqueCII_SN,
                      cityName: uniqueCII_Name.join(' & '),
                      feedback_Filled: mergeCity[tgid].reduce((r, v) => r + v.feedback_Filled, 0) > 0,
                      // cities: mergeCity[tgid],
                    },
                  ]
                : mergeCity[tgid][0]
            );
          }
          return r.concat(mergeCity[tgid]);
        }, []);
        // console.log(mergeCityA, that.error);
        that.cityList = mergeCityA;
        if (mergeCityA.length === 1) {
          that.selectCity(mergeCityA[0]);
        }
      });
    },
    selectCity(city) {
      window.scrollTo({ top: 100, behavior: 'smooth' });
      this.cityListOpen = false;
      if (this.currentCity.cii_sn === city.cii_sn) {
        return false;
      }
      // this.cityListPage = false;
      this.feedbackEvaluation = [];
      this.loading = true;
      const _param = {
        GRI_SN: this.param.g,
        VEI_SN: this.param.v,
        // CITY_SN: city.cii_sn,
        lgc: this.param.l,
      };
      const selectedCity = Object.assign({}, city, _param);
      // console.log(selectedCity);
      this.currentCity = selectedCity;
      this.feedbackItem.hotel = [];
      if (selectedCity.cii_sn_arr) {
        for (const iterator of selectedCity.cii_sn_arr) {
          this.getData(Object.assign({}, _param, { CITY_SN: iterator }), true);
        }
      } else {
        this.getData(Object.assign({}, _param, { CITY_SN: selectedCity.cii_sn }));
      }
      // setTimeout(() => {
      //   if (this.feedbackItem.guide.length === 0
      //     && this.feedbackItem.driver.length === 0
      //     && this.feedbackItem.experience.length === 0
      //     && this.feedbackItem.hotel.length === 0
      //   ) {
      //     this.error = true;
      //     this.errorMsg = 'Data error.';
      //     return false;
      //   }
      // }, 1000);
    },
    initSignature() {
      var canvas = document.getElementById('signature-pad');
      this.signaturePad = new SignaturePad(canvas, {
        backgroundColor: '#f8f8f8',
        penColor: 'rgb(50, 50, 50)',
      });
      const ratio = Math.max(window.devicePixelRatio || 1, 1);
      canvas.width = canvas.offsetWidth * ratio;
      canvas.height = canvas.offsetHeight * ratio;
      canvas.getContext('2d').scale(ratio, ratio);
      this.signaturePad.clear(); // otherwise isEmpty() might return incorrect value
    },
    clearSignature() {
      var data = this.signaturePad.toDataURL('image/svg+xml');
      // console.log(data);
      this.signaturePad.clear();
    },
    getData(param, continually = false) {
      const that = this;
      get(`${HOST}/get_feedback_service_item`, param, { headers: { ...{} } }).then((res) => {
        that.loading = false;
        if (res.errcode !== 0) {
          if (continually === false) {
            that.error = true;
            that.errorMsg = 'Data error.';
          }
          return false;
        }
        that.feedbackCity[`city_${res.feedbackEvaluation[0].feedback_cii_sn}`] = res;

        const itemGroup = groupBy(res.feedbackItemList, (ele) => ele.type);
        that.feedbackItem.guide = itemGroup.W ? itemGroup.W : [];
        that.feedbackItem.driver = itemGroup.Y ? itemGroup.Y.filter(ele => ele.Describe !== '') : [];
        let experience = [];
        if (itemGroup['7']) {
          experience = experience.concat(itemGroup['7']);
        }
        if (itemGroup.C) {
          experience = experience.concat(itemGroup.C);
        }
        if (itemGroup.G) {
          experience = experience.concat(itemGroup.G);
        }
        let hotel = [];
        if (itemGroup.A) {
          hotel = hotel.concat(
            itemGroup.A.map(function (ele) {
              var newEle = Object.assign({}, ele);
              newEle.Describe = `${ele.name} ${res.group[0].cityName}`;
              return newEle;
            })
          );
          that.currentCity[`city_${res.feedbackEvaluation[0].feedback_cii_sn}`] = hotel;
        }
        if (continually) {
          const mergeHotel = [].concat(that.feedbackItem.hotel, hotel);
          that.feedbackItem.experience = [].concat(experience, mergeHotel);
          that.feedbackItem.hotel = mergeHotel;
        } else {
          that.feedbackItem.experience = [].concat(experience, hotel);
        }

        that.feedbackItemList = res.feedbackItemList;
        that.tourGuideList = res.tourGuideList;
        that.feedbackEvaluation = [].concat(that.feedbackEvaluation, res.feedbackEvaluation);
        that.group = res.group[0];

        // 已经填写过了
        // that.isFilled = !isEmpty(res.feedbackEvaluation[0].signatureDataUrl);
        that.isFilled = that.currentCity.feedback_Filled || !isEmpty(res.feedbackEvaluation[0].signatureDataUrl);
        that.cityListPage = that.debug ? false : that.resultPage ? false : that.isFilled;
        if (that.resultPage || that.isFilled) {
          // that.signaturePad.fromDataURL(that.feedbackEvaluation.signatureDataUrl);
        } else {
          setTimeout(() => {
            that.initSignature();
          }, 100);
        }
        if (that.debug) {
          setTimeout(() => {
            that.initSignature();
          }, 100);
        }

        that.showPhotos = res.group[0].inTheEnd;
        // alert("Thank you for completing the Feedback Evaluation. Once submitted the tour guide would not be able to view your comments. ");
      });
    },
    submitForm() {
      const that = this;

      event.preventDefault();
      if (that.signaturePad && that.signaturePad.isEmpty()) {
        alert('Please provide a signature first.');
      } else {
        that.loading = true;
        // var data = that.signaturePad.toDataURL(); // default: image/png
        var data = that.signaturePad.toDataURL('image/svg+xml');
        var form = document.getElementById('myForm');
        // Create a FormData instance
        var formData = new FormData(form);
        formData.append('signature', data);

        // Convert the FormData to a plain object
        var formValues = Array.from(formData.entries()).reduce((obj, [key, value]) => {
          obj[key] = value;
          return obj;
        }, {});

        const citySNList = that.currentCity.cii_sn_arr || [that.currentCity.cii_sn];
        for (const iterator of citySNList) {
          const rateArr = that.feedbackCity[`city_${iterator}`].feedbackItemList.map((ele) => {
            return { id: ele.id, name: ele.name, rate: formValues[`rate-${ele.type}-${ele.syc_sn}-${ele.sn}`] || 0 };
          });
          // Submit the form manually
          // console.log(formValues, rateArr);
          // continue;
          postForm(
            `${HOST}/save_feedback`,
            {
              EOI_SN: that.group.EOI_SN,
              GRI_SN: that.currentCity.GRI_SN,
              VEI_SN: that.currentCity.VEI_SN,
              // country_id:,
              // tour_guide_id: that.currentCity.tourGuideId,
              tour_guide_id: that.feedbackCity[`city_${iterator}`].feedbackEvaluation[0] ? that.feedbackCity[`city_${iterator}`].feedbackEvaluation[0].tourGuideId : undefined,
              city_sn: iterator,
              use_the_photos: formValues.photo_permission || -1,
              other_comments: formValues.comments,
              desired_next: formValues.desired_next,
              feedback_id: that.feedbackCity[`city_${iterator}`].feedbackEvaluation[0] ? that.feedbackCity[`city_${iterator}`].feedbackEvaluation[0].feedbackId : undefined,
              service_item_answer: JSON.stringify(rateArr),
              signature_data_url: formValues.signature,
            },
            { headers: { ...{} } }
          ).then((res) => {
            that.loading = false;
            if (res.errcode == 0) {
              that.isFilled = true;
              that.cityListPage = true;
              that.currentCity = {};
            } else {
            }
          });
        }
      }
    },
    cancel() {
      this.cityListPage = true;
      this.currentCity = {};
    },
    toggleCityList() {
      this.cityListOpen = !this.cityListOpen;
    },
  },
});