<template>
  <div class="bgColor">
    <div class="head">
      <template v-if="!isWorkLoading">
        <div class="img" @click="getLocation(online)" v-show="ifWorking == 1 && isWorkOnline">
          {{ online == 1 ? "上班" : "下班" }}
        </div>
        <div class="name">{{ loginUser.name }}</div>
      </template>
      <cube-loading v-if="isWorkLoading"></cube-loading>
    </div>
    <div class="myMessage">
      <div class="label">个人信息</div>
      <ul>
        <li>
          <div>工号</div>
          <div>{{ loginUser.account }}</div>
        </li>
        <li>
          <div>手机号</div>
          <div v-if="!loginUser.phone"></div>
          <div v-if="loginUser.phone">
            <a :href="'tel:' + loginUser.phone"
              ><i class="iconfont icon-shouji"></i>{{ loginUser.phone }}</a
            >
          </div>
        </li>
        <li>
          <div>部门</div>
          <div>{{ loginUser.dept ? loginUser.dept.dept : "" }}</div>
        </li>
        <li>
          <div>工作组</div>
          <div>{{ groups }}</div>
        </li>
      </ul>
    </div>
    <div class="myRapir">
      <div class="label">我的事件工单</div>
      <div class="tit">
        <div>全部</div>
        <div @click="toIncidentList('all')">
          {{ incidentCount.incidentAll || 0 }}条&nbsp;&nbsp;&nbsp;>
        </div>
      </div>
      <div class="rapirMessage">
        <div class="status" @click="toIncidentList('todo')">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-daishouli"></use>
            </svg>
          </div>
          <div>
            <span>待处理</span>
            <span>{{ incidentCount.incidentTodo || 0 }}</span>
          </div>
        </div>
        <div class="status" @click="toIncidentList('done')">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yijiejue"></use>
            </svg>
          </div>
          <div>
            <span>处理过</span>
            <span>{{ incidentCount.incidentDone || 0 }}</span>
          </div>
        </div>
        <!-- <div class="status" @click="toIncidentList('create')">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-daipingjia"></use>
            </svg>
          </div>
          <div>
            <span>我创建</span>
            <span>{{ incidentCount.incidentCreate || 0 }}</span>
          </div>
        </div> -->
      </div>
    </div>
    <div class="myRapir">
      <div class="label">我的巡检</div>
      <div class="tit">
        <div>全部</div>
        <div @click="toinspectionList()">
          {{
            incidentCount.inspectionTodo + incidentCount.inspectionDone || 0
          }}条&nbsp;&nbsp;&nbsp;>
        </div>
      </div>
      <div class="rapirMessage">
        <div class="status">
          <!-- <div class="status" @click="toIncidentList(1594)"> -->
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-chulizhong"></use>
            </svg>
          </div>
          <div @click="toinspectionList('todo')">
            <span>待处理</span>
            <span>{{ incidentCount.inspectionTodo || 0 }}</span>
          </div>
        </div>
        <div @click="toinspectionList('done')" class="status">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yijiejue"></use>
            </svg>
          </div>
          <div>
            <span>处理过</span>
            <span>{{ incidentCount.inspectionDone || 0 }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
let sdk = new jssdk(3, "https://wx2.zuel.edu.cn"); // 域名更换为对应环境域名， 204 更换为对应环境wid
sdk.config(0); //1表示调试模式，生产环境传0
import { GL } from "./../http/http";
import "./../../static/css/iconfont.js";
export default {
  data() {
    return {
      loginUser: JSON.parse(localStorage.getItem("loginUser")),
      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
      ifWorking: localStorage.getItem("ifWorking"), //是否开通上下班
      incidentCount: "",
      promptingConent: "",
      promptingStatus: "",
      groups: "", //工作组
      candidateGroups: "",
      toast: null,
      isWorkOnline: false, //当前用户是否可以上下班
      isWorkLoading: false, //当前用户是否可以上下班loading
      online: 0, //1是上班，0是下班
    };
  },
  methods: {
    //获取位置，经纬度
    getLocation(online) {
      // 判断是否处于微信浏览器环境
      if (!/MicroMessenger/i.test(window.navigator.userAgent)) {
        this.$createToast({
          txt: "请前往微信中上下班",
          type: "warn",
          mask: true,
        }).show();
        return;
      }
      this.toast = this.$createToast({
        time: 0,
        mask: true,
        txt: "正在加载中",
      });
      this.toast.show();
      // 中南财大
      if (this.isZncd) {
        //第二个参数 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        sdk.getLocation((res) => {
          // alert(JSON.stringify(res));
          // latitude
          // longitude
          this.gl(res, online);
        });
      } else {
        GL(this).then((res) => {
          this.gl(res, online);
        });
      }
    },
    //获取地理位置方法
    gl(res, online) {
      let _this = this;
      $.ajax({
        url: "https://apis.map.qq.com/ws/geocoder/v1",
        data: {
          location: res.latitude + "," + res.longitude,
          key: "TADBZ-IRBWU-QAXVE-2IWED-UW2F5-YVF66",
          output: "jsonp",
        },
        dataType: "jsonp",
        success(result) {
          if (result.status === 0) {
            let address = result.result.formatted_addresses.recommend;
            _this.goToWork(online, address);
          }
        },
      });
    },
    // 上下班
    goToWork(online, address) {
      this.$http
        .post("service/auth/online", { online, address })
        .then((res) => {
          if (res.data.status == 200) {
            this.$http.post("service/auth/showOnlineBtn", {}).then((res) => {
              this.toast.hide();
              if (res.data.status == 200) {
                this.online = res.data.online;
                this.showToast(online, "成功");
              }
            });
          } else {
            this.toast.hide();
            this.$createDialog({
              type: "confirm",
              icon: "cubeic-alert",
              title: "提示",
              content: "您现在为非下班时间，您确认要进行下班操作吗？",
              confirmBtn: {
                text: "确定按钮",
                active: true,
                disabled: false,
                href: "javascript:;",
              },
              cancelBtn: {
                text: "取消按钮",
                active: false,
                disabled: false,
                href: "javascript:;",
              },
              onConfirm: () => {
                this.toast = this.$createToast({
                  time: 0,
                  mask: true,
                  txt: "正在加载中",
                });
                this.toast.show();
                this.$http
                  .post("service/auth/online", {
                    online,
                    address,
                    confirm: "ok",
                  })
                  .then((res) => {
                    if (res.data.status == 200) {
                      this.$http
                        .post("service/auth/showOnlineBtn", {})
                        .then((res) => {
                          this.toast.hide();
                          if (res.data.status == 200) {
                            this.online = res.data.online;
                            this.showToast(online, "成功");
                          }
                        });
                    } else {
                      this.toast.hide();
                      this.showToast(online, "失败");
                    }
                  });
              },
            }).show();
          }
        });
    },
    // 展示信息
    showToast(online, msg) {
      const t = this.$createToast({
        type: "txt",
        txt: online == 1 ? "上班" + msg : "下班" + msg,
      });
      t.show();
      setTimeout(() => {
        t.hide();
      }, 1000);
    },
    // 工作组
    getGroups() {
      var that = this;
      if (that.loginUser.group) {
        that.loginUser.group.forEach((element) => {
          that.groups += element.groupName + "/";
          that.candidateGroups += element.id + ",";
        });
      }
      that.candidateGroups = that.candidateGroups.slice(
        0,
        that.candidateGroups.length - 1
      );
    },
    // 跳转到事件列表
    toIncidentList(searchType) {
      this.$router.push({ path: "/main/incidentList/" + searchType });
    },
    // 巡检列表
    toinspectionList(state) {
      this.$router.push({
        name: "Inspection",
        params: {
          state: state,
        },
      });
    },
    // 事件数量
    getIncidentData() {
      var that = this;
      this.$http
        .post("service/bpm/data/getIncidentCount", {
          assignee: that.loginUser.id,
          candidateGroups: that.candidateGroups,
        })
        .then(function (res) {
          that.incidentCount = res.data;
        });
    },
    //获取展示可以上下班人员列表
    getWorkOnline() {
      this.isWorkLoading = true;
      this.$http
        .post("service/bpm/data/fetchDataList/workOnlineConfig", {
          idx: 0,
          sum: 1000,
        })
        .then((res) => {
          if (res.status == 200) {
            let userList = res.data.list[0].userList.map((v) => v.id); //用户id列表
            this.isWorkOnline = userList.includes(this.loginUser.id);
            if (this.isWorkOnline) {
              this.$http.post("service/auth/showOnlineBtn", {}).then((res) => {
                this.isWorkLoading = false;
                if (res.data.status == 200) {
                  this.online = res.data.online;
                }
              });
            } else {
              this.isWorkLoading = false;
            }
          }
        });
    },
  },
  created() {
    this.getGroups();
    this.getIncidentData();
    if(this.ifWorking == 1){
      this.getWorkOnline();
    }
  },
};
</script>
<style scoped>
.bgColor {
  background-color: white;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.label {
  background-color: rgb(238, 238, 238);
  height: 0.6rem;
  line-height: 0.6rem;
  padding-left: 0.2rem;
  font-size: 0.24rem;
  color: #666666;
  border-top: 0.01rem rgb(223, 222, 222) solid;
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
}
/* 头像 */

.head {
  height: 2.4rem;
  background: linear-gradient(#005395, #226ca8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.head .img {
  width: 1.36rem;
  height: 1.36rem;
  border-radius: 50%;
  margin: 0 auto;
  overflow: hidden;
  /* background: url(./../../static/images/pig.jpg);
  background-size: contain; */
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.32rem;
}

.head .name {
  font-size: 0.32rem;
  text-align: center;
  margin-top: 0.2rem;
  color: #ffffff;
}

/* 个人信息 */

/* .myMessage { */
/* background-color: rgb(242, 242, 242); */
/* margin-top: .2rem */
/* } */

.myMessage li {
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding: .2rem .28rem */
  /* height: .88rem; */
  /* line-height: .88rem; */
  line-height: 0.4rem;
  padding: 0.24rem 0.24rem;
}

.myMessage li div:nth-child(1) {
  width: 35%;
  font-size: 0.32rem;
}

.myMessage li div:nth-child(2) {
  width: 55%;
  display: flex;
  justify-content: flex-end;
  font-size: 0.32rem;
  /* line-height: .3rem */
}
.myArea {
}
.factionAdd {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.factionAdd span {
  display: inline-block;
  width: 90%;
  text-align: right;
}
.factionAdd i {
  display: inline-block;
  font-size: 0.34rem;
  width: 12%;
}
/* 我的报修 */

/* .myRapir {
    margin-top: .2rem
} */

.myRapir .tit {
  /* background-color: rgb(242, 242, 242); */
  height: 0.88rem;
  line-height: 0.88rem;
  display: flex;
  padding: 0 0.24rem;
  font-size: 0.32rem;
  justify-content: space-between;
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
}

.rapirMessage {
  display: flex;
  height: 1.8rem;
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
}
.rapirMessage .status {
  width: 25%;
  border-right: 0.01rem rgb(223, 222, 222) solid;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.rapirMessage .status div:nth-child(1) {
  width: 100%;
  text-align: center;
}
.rapirMessage .status div:nth-child(1) svg {
  width: 0.48rem;
  height: 0.48rem;
}
.rapirMessage .status div:nth-child(2) {
  margin-top: 0.2rem;
  display: flex;
  align-items: center;
}
.rapirMessage .status div:nth-child(2) span:nth-child(1) {
  font-size: 0.24rem;
  color: #333333;
}
.rapirMessage .status div:nth-child(2) span:nth-child(2) {
  display: inline-block;
  margin-left: 0.08rem;
  font-size: 0.32rem;
}
</style>
<style>
.myArea .cube-btn {
  padding: 0 !important;
  background-color: white !important;
  color: #333333 !important;
  text-align: right !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
