<template>
  <view class="main">
    <view style="width: 95%" v-if="showList">
      <view class="topText" @click="handleChangeType">{{
        managering ? "完成" : "管理"
      }}</view>

      <view v-if="managering">
        <l-drag-sort :list="allFunList" @change="change" :lineHeight="112"></l-drag-sort>
      </view>
      <view v-if="!managering" class="funList">
        <view class="funItem" v-for="(item, index) in allFunList" :key="index" @click="handleFunClick(item)">
          <view class="funLeft" v-if="item.value !== 12">
            <image class="funIcon" :src="pageType === 'spring' ? item.springSrc : item.src" />
            <text class="funText">{{ item.label || "-" }}</text>
          </view>
          <button v-else class="no-border-btn" hover-class="none" hover-start-time="0" hover-stay-time="0"
            style="background-color: transparent;border-width: 0;padding: 0;" open-type="contact" @contact="onContact">
            <image class="funIcon" :src="pageType === 'spring' ? item.springSrc : item.src" />
            <text class="funText">{{ item.label || "-" }}</text>
          </button>
          <!-- <view class="funRight"> -->
          <!-- <image class="editIcon" src="/static/images/home/editIcon.svg" /> -->
          <!-- </view> -->
        </view>
      </view>
    </view>

    <uni-popup ref="ETCRef">
      <view class="ETCPopup">
        <view class="ETCItem" @click="handleGoETC(1)">
          <image class="itemImg" src="/static/images/home/newEtc.svg" />
          <text class="itemText">ETC小程序</text>
        </view>
        <view class="ETCItem" @click="handleGoETC(2)">
          <image class="itemImg" src="/static/images/home/ETCmap.svg" />
          <text class="itemText">ETC网点</text>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import lDragSort from "../../uni_modules/l-dragSort/components/l-dragSort/l-dragSort.vue";
export default {
  components: { lDragSort },
  data() {
    return {
      allFunList: [], // 存储功能项
      pageType: "",
      showList: false, // 显示排序
      managering: false, // 是否进入可编辑状态
      serviceDetail: {},
    };
  },
  onLoad(query) {
    let funList = uni.getStorageSync("funList2");
    if (funList) {
      funList = JSON.parse(funList);
    }
    if (query.pageType) {
      this.pageType = query.pageType;
    }
    this.allFunList = funList;
    console.log("this.allFunList", this.allFunList);
    this.showList = true;
    this.$forceUpdate();
    this.$utils.addUserBehaviorNew();
  },
  onUnload() {
    uni.setStorageSync("funList2", JSON.stringify(this.allFunList));
  },
  methods: {
    // ETC的功能
    handleGoETC(value) {
      if (value === 1) {
        uni.navigateToMiniProgram({
          appId: "wxb228568a0a4f7120",
        });
      } else if (value === 2) {
        uni.navigateTo({
          url: `/pages/etcMap/index`,
        });
      }
    },
    // 功能列表
    handleFunClick(obj) {
      console.log("obj", obj);
      // 服务区
      if (obj.value === 1) {
        uni.navigateTo({
          url: `/pages/serviceDetail/index`,
        });
      } else if (obj.value === 2) {
        // 加油
        uni.navigateTo({
          url: `/pages/otherFunPage/goPublicPage/index`,
        });
        // uni.navigateTo({
        //   url: `/pages/noDataPage/index`, 
        // });
      } else if (obj.value === 3) {
        // 充电
        uni.navigateToMiniProgram({
          shortLink: "#小程序://云南交投新能源充电网平台/Z6OAkOF7DnSm5da",
        });
      } else if (obj.value === 4) {
        // ETC
        // uni.navigateToMiniProgram({
        //   appId: "wxb228568a0a4f7120",
        // });
        this.$refs.ETCRef.open("center");
      } else if (obj.value === 5) {
        // 点餐
        uni.navigateTo({
          url: "/pages/serviceList/index?type=food",
        });
        // uni.navigateTo({
        //   url: `/pages/reservationOrder/index?id=${this.serviceDetail.SERVERPART_ID}`,
        // });
      } else if (obj.value === 6) {
        // 司机之家
        uni.navigateTo({
          url: "/pages/serviceList/index?type=driver",
        });
      } else if (obj.value === 7) {
        // 租车
        // uni.navigateTo({
        //   url: `/pages/noDataPage/index`,
        // });

        uni.navigateToMiniProgram({
          appId: "wxe4bc565cbbf5e289",
          path: `pages/isd/indexNew/index?landingto=home&apptype=ISD_C_WX&st=ser&fromurl=common&channelid=242572`,
          // extraData: {
          //   landingto: "home",
          //   apptype: "ISD_C_WX",
          //   st: "ser",
          //   fromurl: "common",
          //   channelid: 242572,
          // },
        });
      } else if (obj.value === 8) {
        // 保险
        uni.navigateTo({
          url: `/pages/otherFunPage/insurance/index`,
        });
      } else if (obj.value === 9) {
        // 投诉建议
        // uni.navigateToMiniProgram({
        //   shortLink: "#小程序://云交经司服/jFbQlCIEsEjf5Nq",
        // });
        uni.navigateTo({
          url: `/pages/complaints/index`,
        });
      } else if (obj.value === 10) {
        // 金融
        uni.navigateTo({
          url: `/pages/otherFunPage/finance/index`,
        });
      } else if (obj.value === 11) {
        // 文旅
        uni.navigateTo({
          url: `/pages/noDataPage/index`,
        });
      } else if (obj.value === 12) {
        // 售后
        // uni.navigateTo({
        //   url: `/pages/noDataPage/index`,
        // });

        // uni.makePhoneCall({
        //   phoneNumber: '087167199960' //仅为示例
        // });
      } else if (obj.value === 13) {
        // 加水
        uni.scanCode({
          success: function (res) {
            console.log("条码类型：" + res.scanType);
            console.log("条码内容：" + res.result);
          },
        });
      } else if (obj.value === 14) {
        // 尿素
        uni.scanCode({
          success: function (res) {
            console.log("条码类型：" + res.scanType);
            console.log("条码内容：" + res.result);
          },
        });
      } else if (obj.value === 15) {
        // 商城
        this.handleGoShop();
      } else if (obj.value === 17) {
        if (obj.index === 0) {
          uni.navigateTo({
            url: `/pages/shopMallPage/shopType/index?comeForm=index`,
          });
        } else {
          uni.navigateTo({
            url: `/pages/highwayHeadlines/attractInvestment`,
          });
        }
      } else if (obj.value === 18) {
        uni.navigateTo({
          url: `/pages/eventRegistration/index`,
        });
      } else if (obj.value === 19) {
        uni.navigateTo({
          url: `/pages/sharedRestStop/index`,
        });
      }
    },
    // 改变状态 是否可以修改位置
    handleChangeType() {
      if (this.managering) {
        this.managering = false;
      } else {
        this.managering = true;
      }
    },
    change(e) {
      console.log(e);
      this.allFunList = e;
      this.$forceUpdate();
    },

    // 跳转到商城
    handleGoShop() {
      // uni.navigateTo({
      uni.switchTab({
        url: "/pages/shopMallPage/index/index",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding: 24rpx 32rpx 48rpx;
  background-color: #fff;
  overflow-y: auto;

  .topText {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    font-size: 30rpx;
    margin-bottom: 24rpx;
  }

  .funList {
    width: 100%;
    height: calc(100% - 74rpx);
    overflow-y: auto;

    .funItem {
      width: 100%;
      height: 110rpx;
      box-sizing: border-box;
      padding: 12rpx 24rpx;
      background: #f6f6f6;
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16rpx;
      position: relative;

      .funLeft {
        display: flex;
        align-items: center;

        .funIcon {
          width: 72rpx;
          height: 72rpx;
          margin-right: 16rpx;
        }

        .funText {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #130f05;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
      }

      .no-border-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .funIcon {
          width: 72rpx;
          height: 72rpx;
          margin-right: 16rpx;
        }

        .funText {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #130f05;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
      }

      /* 覆盖系统生成的伪元素 */
      .no-border-btn::after,
      .no-border-btn::before {
        content: '' !important;
        border: 0 !important;
        box-shadow: none !important;
        display: none !important;
        height: 0 !important;
        width: 0 !important;
        -webkit-transform: scale(0) !important;
        transform: scale(0) !important;
      }

      .funRight {
        width: 32rpx;
        height: 32rpx;

        .editIcon {
          width: 32rpx;
          height: 32rpx;
        }
      }
    }
  }

  .ETCPopup {
    width: 80vw;
    height: 120px;
    background: #fff;
    border-radius: 32rpx;
    box-sizing: border-box;
    padding: 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .ETCItem {
      width: calc(50% - 32rpx);
      // background: #e7f8ee;
      // padding: 16rpx;
      // border-radius: 8rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      // box-sizing: border-box;
      .itemImg {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 24rpx;
      }

      .itemText {
        font-family: "PingFangSC";
        font-weight: 400;
        font-size: 24rpx;
        line-height: 32rpx;
        text-align: justify;
        font-style: normal;
        white-space: nowrap;
      }
    }
  }
}
</style>
