<template>
  <div id="home" >
    <van-loading
      v-if="loading"
      class="fullscren"
      type="spinner"
      size="24px"
      vertical
      >加载中...</van-loading
    >
    <template v-if="!loading">
    <div class="home_top">
      <div class="top_title">首页</div>
      <div class="top_mian">
        <div class="top_mian_left">
          <van-icon name="user" class="userIcon"></van-icon>
        </div>
        <div class="top_mian_right">
          <div class="userName">{{ userName }}</div>
          <div class="gyh">
            <span>柜员号：</span>
            <span>{{ userId }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="home_img">
      <div class="home_item" @click="handleClickItem('zfrw')">
        <div class="item_zeroImg_box">
          <img src="../../images/home/zfrw.png" alt="" class="home_item_img" />
        </div>
        <div class="item_name">走访任务</div>
      </div>
      <div class="home_item" @click="handleClickWdkh">
        <div class="item_oneImg_box">
          <img src="../../images/home/ke.png" alt="" class="home_item_img" />
        </div>
        <div class="item_name">我的客户</div>
      </div>
      <div class="home_item" @click="handleClickDttk">
        <div class="item_twoImg_box">
          <img src="../../images/home/tk.png" alt="" class="home_item_img" />
        </div>
        <div class="item_name">地图拓客</div>
      </div>
      <div class="home_item" @click="handleClickGzt">
        <div class="item_threeImg_box">
          <img src="../../images/home/gzt.png" alt="" class="home_item_img" />
        </div>
        <div class="item_name">工作台</div>
      </div>
    </div>
    <div class="home_title">功能导航</div>
    <div class="home_main safe-bottom">
      <div class="home_main_item" @click="handleClickItem('lszf')">
        <div class="main_left">
          <div>
            <img
              src="../../images/home/lszf.png"
              alt=""
              style="width: 25px; height: 25px"
            />
          </div>
          <div class="main_title">历史走访</div>
        </div>
        <van-icon name="arrow" class="next_icon"></van-icon>
      </div>
      <div class="home_main_item" @click="handleClickItem('wdwg')">
        <div class="main_left">
          <div>
            <img
              src="../../images/home/wdwg.png"
              alt=""
              style="width: 25px; height: 25px"
            />
          </div>
          <div class="main_title">我的网格</div>
        </div>
        <van-icon name="arrow" class="next_icon"></van-icon>
      </div>

      <div class="home_main_item" @click="handleClickItem('xkdj')">
        <div class="main_left">
          <div>
            <img
              src="../../images/home/xkdj.png"
              alt=""
              style="width: 25px; height: 25px"
            />
          </div>
          <div class="main_title">新客登记</div>
        </div>
        <van-icon name="arrow" class="next_icon"></van-icon>
      </div>
      <div class="home_main_item" @click="handleClickItem('sjzx')">
        <div class="main_left">
          <div>
            <img
              src="../../images/home/iconPark-trend-two@3x.png"
              alt=""
              style="width: 25px; height: 25px"
            />
          </div>
          <div class="main_title">数据中心</div>
        </div>
        <van-icon name="arrow" class="next_icon"></van-icon>
      </div>
      <div class="home_main_item" @click="handleClickItem('mdtj')">
        <div class="main_left">
          <div>
            <img
              src="../../images/home/riLine-file-user-line@3x.png"
              alt=""
              style="width: 25px; height: 25px"
            />
          </div>
          <div class="main_title">名单统计</div>
        </div>
        <van-icon name="arrow" class="next_icon"></van-icon>
      </div>
      <div class="home_main_item" @click="handleClickItem('record')" v-if="userInfo.userName && (userInfo.userName+'').substring(0,6) == '932009'">
        <div class="main_left">
          <div>
            <img
              src="../../images/home/riLine-file-user-line@3x.png"
              alt=""
              style="width: 25px; height: 25px"
            />
          </div>
          <div class="main_title">录音测试</div>
        </div>
        <van-icon name="arrow" class="next_icon"></van-icon>
      </div>
      <div class="home_main_item" @click="handleClickItem('qkdj')" v-if="userInfo.deptId && (userInfo.deptId+'').substring(0,3) == '932'">
        <div class="main_left">
          <div>
            <img
              src="../../images/home/xkdj.png"
              alt=""
              style="width: 25px; height: 25px"
            />
          </div>
          <div class="main_title">潜客登记</div>
        </div>
        <van-icon name="arrow" class="next_icon"></van-icon>
      </div>
    </div>
    </template>
  </div>
</template>

<script>
import { Button, Loading, Icon, Toast, Popup } from "vant"; //button组件
import "vant/lib/button/style"; //button样式

// 引入vuex
import { mapMutations, mapState, mapGetters } from "vuex";
import { getUrlLink } from "@/config/config";
import { getToken,getTokenPc, getUserInfo, getWhiteIp } from "@/service/api/home.js";

export default {
  name: "Home",
  data() {
    return {
      userName: "",
      userId: "",
      dhList: [
        // {
        //   icon:'clock-o',
        //   title:'历史走访'
        // },
        // {
        //   icon:'closed-eye',
        //   title:'征信查询'
        // },
        // {
        //   icon:'sign',
        //   title:'行社辅助管理系统'
        // },
        {
          url: "../../images/home/wdwg.png",
          title: "我的网格",
        },
        // {
        //   icon:'play-circle-o',
        //   title:'招投标'
        // },
        // {
        //   icon:'add',
        //   title:'新增企业'
        // },
        // {
        //   icon:'search',
        //   title:'全维搜索'
        // },
        // {
        //   icon:'replay',
        //   title:'数据中心'
        // },
        // {
        //   icon:'user-o',
        //   title:'客户池'
        // },
        // {
        //   icon:'comment',
        //   title:'名单统计'
        // },
      ],
      authShow: false,

      loading: true,
    };
  },

  watch: {
    $route: {
      handler(to, from) {
        console.log(to.query, from);
        if(process.env.VUE_APP_HJ == 'development'){
          if(to.query.userName){
            this.getCurrentUserInfo(to.query.userName);
          }else{
            this.$router.replace("/dashboard/home?userName=9650702");
          }
        }else{
          if (!sessionStorage["token"]) {
            const params = new URLSearchParams(window.location.search);
            let code = params.get("code");
            if (!code) {
              console.log(localStorage.getItem('appId'),888888)
              if (localStorage.getItem("appId")) {
                window.location.href = getUrlLink(localStorage.getItem("appId"), localStorage.getItem("agentId"));
              }
            } else {
              console.log(sessionStorage.getItem("url"));
              console.log(window.location, "$route");
              this.getCurrentUserInfo(code);
            }
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },

  created() {},
  computed: {
    ...mapGetters(["userInfo"]),
  },
  mounted() {
    window.scrollTo(0, 0);
    const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
    if (userInfo.nickName) {
      this.userName = userInfo.nickName;
      this.userId = userInfo.userName;
      this.loading = false;
    }
    if (window.wx) {
      wx.ready(() => {
        wx.getLocation({
          type: "gcj02",
          success: (res) => {
            console.log(res, "location");
          },
          fail: (err) => {
            console.error("错误码：", err);
          },
        });
      });
    }
  },
  components: {
    VanButton: Button,
    Loading,
    VanIcon: Icon,
    VanToast: Toast,
    VanPopup: Popup,
  },
  methods: {
    ...mapMutations(['SET_USER_INFO']),
    async getCurrentUserInfo(code) {
      let res1 = null
      if(process.env.VUE_APP_HJ == 'development'){
        res1 = await getTokenPc({
          userName:code
        });
      }else{
        res1 = await getToken({
          code,
          orgId: localStorage["orgId"],
        });
      }

      if (res1.code == 200) {
        this.loading = false;
        sessionStorage.setItem("token", "Bearer " + res1?.szzh_qyweixin_token);
        const res2 = await getUserInfo();
        if (res2.code == 200) {
          const userInfo = res2?.user || {};
          if(userInfo.deptId && ['931',"932","933","935","936","937","938","939","951"].includes((userInfo.deptId+"").substring(0,3))){
            document.title="浙丽管家"
          }
          userInfo.roles = res2.roles;
          this.SET_USER_INFO(userInfo)
          // sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
          this.userName = userInfo.nickName;
          this.userId = userInfo.userName;
          getWhiteIp({ orgId: localStorage["orgId"] }).then((res) => {
            if (res.code == 200) {
              console.log(res.data);
            }
          });
        }
      }
    },
    handleClickWdkh() {
      console.log(111111);

      this.$router.push("/customerHome");
    },
    handleClickGzt() {
      // const { deptId = '' } = this.userInfo
      // const id = String(deptId).substring(0,3)
      // if (['875'].includes(id)) {
      //   this.$router.push("/WorkHomeOther");
      // } else {
      //   this.$router.push("/WorkHome");
      // }
      
      this.$router.push("/WorkHomeNew");
    },
    handleClickItem(type) {
      if (type == "wdwg") {
        this.$router.push("/gridHome");
      } else if (type == "sjzx") {
        this.$router.push("/dataCenter");
      } else if (type == "mdtj") {
        this.$router.push("/listStatisHome");
      } else if (type == "xkdj") {
        this.$router.push("/filingHome");
      } else if (type == "zfrw") {
        this.$router.push("/visitingTaskHome");
      } else if (type == "lszf") {
        this.$router.push("/historyHome");
      } else if (type == "qkdj") {
        this.$router.push("/filingqkHome");
      } else if (type == "rcrwlb") {
        this.$router.push("/workmngdaytaskindex");
      } else if (type == "yjrwlb") {
        this.$router.push("/workmngwarningtask");
      } else if (type == "record") {
        this.$router.push("/record");
      }
    },
    handleClickDttk() {
      console.log("in");
      this.$router.push("/mapCustom");
    },
  },
};
</script>

<style lang="less" scoped>
#home {
  width: 100%;
}

.home_top {
  height: 190px;
  background-color: rgb(70, 130, 255);
  border-radius: 0 0 20px 20px;
  position: relative;
}

.top_title {
  position: absolute;
  top: 44px;
  left: 0;
  text-align: center;
  color: rgb(255, 255, 255);
  font-size: 18px;
  line-height: 25px;
  width: 100%;
}

.top_mian {
  position: absolute;
  left: 14px;
  top: 104px;
  width: 92%;
  height: 102px;
  border-radius: 8px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 15px 0 rgba(8, 8, 8, 0.08);
  border: 1px solid rgba(255, 0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
}

.top_mian_left {
  background-color: rgb(70, 130, 255);
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.userIcon {
  font-size: 50px;
  color: #ffffff;
}

.top_mian_right {
  width: 60%;
  margin-left: 20px;
}

.userName {
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  color: rgb(4, 4, 4);
}

.gyh {
  color: rgb(140, 140, 140);
  font-size: 14px;
  line-height: 30px;
}

.home_img {
  display: flex;
  background-color: #ffffff;
  margin-top: 30px;
  justify-content: space-between;
  padding: 20px;
}

.home_item {
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.home_item_img {
  width: 45px;
  height: 45px;
}

.home_title {
  line-height: 40px;
  margin: 10px 20px;
  font-weight: 600;
}

.home_main {
  background-color: #ffffff;
}

.home_main_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
}

.main_left {
  display: flex;
  align-items: center;
}

.home_main_icon {
  font-size: 30px;
  color: rgb(98, 132, 221);
}

.main_title {
  margin-left: 15px;
  font-size: 16px;
}

.item_zeroImg_box {
  padding: 8px;
  background-color: rgb(234, 246, 255);
  border-radius: 50%;
}

.item_oneImg_box {
  padding: 8px;
  background-color: rgb(236, 250, 238);
  border-radius: 50%;
}

.item_twoImg_box {
  padding: 8px;
  background-color: rgb(234, 246, 255);
  border-radius: 50%;
}

.item_threeImg_box {
  padding: 8px;
  background-color: rgb(253, 244, 232);
  border-radius: 50%;
}

.item_name {
  margin-top: 10px;
}
.auth-main {
  padding: 30px 16px;
  .auth-header {
    text-align: center;
    margin-bottom: 10px;
  }
  .auth-footer {
    display: flex;
    justify-content: center;
    .btn {
      margin-right: 10px;
      width: 80px;
    }
  }
}
</style>
