import http from "./http";
import Vue from "vue";

/**
 * 用户登录信息
 */
export const user = {
  state: () => ({}),
  mutations: {
    setUser(state, user) {
      for (const key in user) {
        Vue.set(state, key, user[key])
      }
    }
  },
  actions: {
    getAccount({dispatch, commit}, config) {
      //获取企业微信后台账号信息
      return http.post("/admin/user/detail-phone", null, config).then(res => {
        if (res?.code == 0) {
          commit('setUser', res.data)
          return Promise.all([dispatch('getGridInfo', config)])
        }
      })
    },
    getGridInfo({commit}, config) {
      //获取登录着网格员信息
      return http.post("/app/appgirdmemberinfo/checkLogOnUser", null, config).then(res => {
        if (res?.data) {
          let {girdId, girdMemberId, girdName, checkType: girdCheckType, appGirdInfo: gridInfo} = res.data
          return commit("setUser", {girdId, girdMemberId, girdName, girdCheckType, gridInfo})
        }
      })
    }
  }
}
/**
 * 水印方法
 * */
export const waterMarker = {
  mutations: {
    initWaterMarker(state) {
      const waterMarked = document.querySelector('#waterMarker')
      if (!waterMarked && state.user?.name) {
        const waterMarker = document.createElement('div')
        waterMarker.id = 'waterMarker'
        waterMarker.style.position = 'absolute'
        waterMarker.style.display = 'flex'
        waterMarker.style.flexWrap = 'wrap'
        waterMarker.style.overflow = 'hidden'
        waterMarker.style.justifyContent = 'space-between'
        waterMarker.style.alignContent = 'flex-start'
        waterMarker.style.zIndex = '2'
        waterMarker.style.top = '0'
        waterMarker.style.color = 'rgba(153,153,153,.2)'
        waterMarker.style.width = '100%'
        waterMarker.style.height = '100%'
        waterMarker.style.pointerEvents = 'none'
        for (let i = 0; i < 200; i++) {
          const markerItem = document.createElement('div')
          markerItem.style.fontSize = '14px'
          markerItem.style.padding = '30px'
          markerItem.style.height = '80px'
          markerItem.style.transform = 'rotate(-20deg)'
          markerItem.style.flexShrink = '0'
          markerItem.innerText = state.user?.name + state.user?.phone?.slice(-4) || "未授权"
          waterMarker.appendChild(markerItem)
        }
        document.querySelector('uni-page-body')?.appendChild(waterMarker)
      }
      //   canvas 方案
      //   const HiDPICanvas = (w, h, ratio) => {
      //         const PIXEL_RATIO = () => {
      //           const c = document.createElement("canvas"),
      //               ctx = c.getContext("2d"),
      //               dpr = window.devicePixelRatio || 1,
      //               bsr = ctx['webkitBackingStorePixelRatio'] ||
      //                   ctx['mozBackingStorePixelRatio'] ||
      //                   ctx['msBackingStorePixelRatio'] ||
      //                   ctx['oBackingStorePixelRatio'] ||
      //                   ctx['backingStorePixelRatio'] || 1;
      //
      //           return dpr / bsr;
      //         }
      //         if (!ratio) {
      //           ratio = PIXEL_RATIO();
      //         }
      //         const can = document.createElement("canvas");
      //         can.width = w * ratio;
      //         can.height = h * ratio;
      //         can.style.width = w + "px";
      //         can.style.height = h + "px";
      //         can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);
      //         return can
      //       }
      //   if (!waterMarked && state.user?.name) {
      //     const canvas = HiDPICanvas(100, 40)
      //     canvas.style.display = 'none';
      //     let ctx = canvas.getContext("2d")
      //     ctx.rotate(-20 * Math.PI / 180);
      //     ctx.fillStyle = 'rgba(153,153,153,.3)';
      //     ctx.textAlign = 'left';
      //     ctx.textBaseline = 'middle';
      //     ctx.font = "lighter 7px 'Microsoft YaHei UI',sans-serif"
      //     ctx.fillText(state.user?.name + state.user?.phone?.slice(-4) || "未授权", 0, 30);
      //     const waterMarker = document.createElement('div')
      //     if (waterMarker) {
      //       waterMarker.id = 'waterMarker'
      //       waterMarker.style.position = 'absolute'
      //       waterMarker.style.zIndex = '2'
      //       waterMarker.style.top = '0'
      //       waterMarker.style.width = '100%'
      //       waterMarker.style.height = '100%'
      //       waterMarker.style.pointerEvents = 'none'
      //       waterMarker.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")"
      //       document.querySelector('uni-page-body').appendChild(waterMarker)
      //     }
      //   }
    }
  }
}