<template>
  <div class="userPage">
    <div class="navBarTOP">
      <van-nav-bar class="navBar" title="我的" />
    </div>
    <div class="content">
      <div class="myHeader">
        <van-row>
          <van-col span="7">
            <van-image round width="8rem" height="8rem" :src="avatar" @click="login" />
          </van-col>
          <van-col span="17">
            <div class="avatarContent">
              <p class="nickName">{{ nickName }}</p>
              <p>
                <span class="postName">{{ postName }}</span>
              </p>
            </div>
          </van-col>
        </van-row>
      </div>
      <!--        主体内容-->
      <div class="container">
        <!--      门店及拜访-->
        <van-cell-group inset class="mtb10" v-if="reportInfo">
          <van-cell
            title="设计师招募"
            is-link
            to="/addDesignerPage"
            v-if="reportInfo.designerRecruitButton">
            <template #icon>
              <van-icon :name="addShop" class="zicon" />
            </template>
          </van-cell>
          <van-cell :title="addBTN" is-link @click="onSelect('B')" v-if="addShow">
            <template #icon>
              <van-icon :name="addShop" class="zicon" />
            </template>
          </van-cell>
          <van-cell title="新增专卖店/金牌店" is-link @click="onSelect('A')" v-if="addShow1">
            <template #icon>
              <van-icon :name="addShop" class="zicon" />
            </template>
          </van-cell>
          <van-cell
            title="新增潜在客户"
            is-link
            to="/competingStoresAdd"
            v-if="postType == 'DIY' && addShow">
            <template #icon>
              <van-icon :name="addShop" class="zicon" />
            </template>
          </van-cell>
          <van-cell :title="title" is-link to="/storemanagementlist">
            <template #icon>
              <van-icon :name="storeselect" class="zicon" />
            </template>
          </van-cell>
          <van-cell title="历史拜访" is-link @click="historAllVisit()">
            <template #icon>
              <van-icon :name="history" class="zicon" />
            </template>
          </van-cell>
        </van-cell-group>
        <van-cell-group inset class="mtb10">
          <van-cell title="设置" is-link to="/systemSettings">
            <template #icon>
              <van-icon name="setting-o" class="zicon" color="#0158ba" />
            </template>
          </van-cell>
          <van-cell
            title="切换经销商"
            is-link
            to="/changeChain"
            v-if="userInfo && userInfo.userMultipleChains">
            <template #icon>
              <van-icon name="exchange" class="zicon" color="#0158ba" />
            </template>
          </van-cell>
        </van-cell-group>
        <!--      客资类-->
        <van-cell-group inset class="mtb10">
          <van-cell title="客资&投诉任务" to="/clew" v-if="customerClueButton" is-link>
            <template #icon>
              <van-icon :name="history" class="zicon" />
            </template>
            <template #title>
              <span>客资&投诉任务</span>
              &nbsp;<van-tag type="danger" v-if="customerClueNum > 0">{{
                customerClueNum
              }}</van-tag>
            </template>
          </van-cell>
          <van-cell title="待分配客资" to="/assignAwait" v-if="isAssignFlag" is-link>
            <template #icon>
              <van-icon :name="history" class="zicon" />
            </template>
            <template #title>
              <span>待分配客资</span>
              &nbsp;<van-tag type="danger" v-if="notAllocationNum > 0">{{
                notAllocationNum
              }}</van-tag>
            </template>
          </van-cell>
        </van-cell-group>
        <!--拜访照片识别异常反馈 部主管及以上-->
        <van-cell-group inset class="mtb10">
          <van-cell title="拜访照片识别异常反馈" to="/AIImage" is-link>
            <template #icon>
              <van-icon :name="history" class="zicon" />
            </template>
            <template #title>
              <span>拜访照片识别异常反馈</span>
              <span
                style="font-weight: 600; font-size: 16px; color: red; margin-left: 15px"
                v-if="photoApprovalNum">
                <van-tag type="danger">{{ photoApprovalNum }}</van-tag>
              </span>
            </template>
          </van-cell>
        </van-cell-group>
        <!--      汇报类-->
        <van-cell-group inset class="mtb10">
          <van-cell
            title="我的历史汇报"
            v-if="historyButton"
            is-link
            to="/myHistoricalDaily"
            class="MYTile">
            <template #title>
              <span class="custom-title">我的历史汇报&nbsp;&nbsp;</span>
            </template>
            <template #icon>
              <van-icon :name="daily" class="zicon" />
            </template>
            <template #right-icon>
              <van-tag type="danger" v-if="existReject">退回待处理</van-tag>
              <van-icon name="arrow" />
            </template>
          </van-cell>
          <van-cell v-if="showDaily || isDiy == 'true'" is-link to="/subordinateHistoricalDaily">
            下属业务员历史日报
            <span
              style="font-weight: 600; font-size: 16px; color: red; margin-left: 15px"
              v-if="thisWeekRemarkNum != null">
              <van-tag type="danger">{{ thisWeekRemarkNum }}/5</van-tag>
            </span>
            <template #icon>
              <van-icon :name="daily" class="zicon" />
            </template>
          </van-cell>
          <van-cell
            title="下属部主管历史周报"
            v-if="showWeekly || isDiy == 'true'"
            is-link
            to="/subordinateHistoricalWeekly">
            <template #icon>
              <van-icon :name="daily" class="zicon" />
            </template>
          </van-cell>
          <van-cell
            title="下属大区主管历史半月报"
            v-if="showDouble || isDiy == 'true'"
            is-link
            to="/doubleWeeklyHistorical">
            <template #icon>
              <van-icon :name="daily" class="zicon" />
            </template>
          </van-cell>
          <van-cell
            title="下属汇报率审批率统计"
            v-if="showDaily || showWeekly || showDouble || isDiy == 'true'"
            is-link
            to="/reportingRate">
            <template #icon>
              <van-icon :name="daily" class="zicon" />
            </template>
          </van-cell>
        </van-cell-group>
        <!--      物料类-->
        <van-cell-group inset class="mtb10">
          <van-cell title="我的物料库存" is-link to="/myInventory" class="MYTile">
            <template #title>
              <span class="custom-title">我的物料库存&nbsp;&nbsp;</span>
            </template>
            <template #icon>
              <van-icon :name="daily" class="zicon" />
            </template>
          </van-cell>
        </van-cell-group>
        <!--      <p style="margin: -8px 16px 8px;color: #888;" v-if="list">主管任务</p>-->
        <van-cell-group inset>
          <div style="border-radius: 6px; overflow: hidden">
            <van-cell
              is-link
              v-for="(item, index) in list"
              :key="index"
              :to="
                '/VisitSummaryAdd?summaryId=' +
                item.summaryId +
                '&title=' +
                item.summaryTaskName +
                '&qrCodeCheck=' +
                item.qrCodeCheck
              ">
              <template #title>
                <span class="custom-title">{{ item.summaryTaskName }}</span>
              </template>
              <template #icon>
                <van-icon :name="daily" class="zicon" />
              </template>
            </van-cell>
            <van-cell title="主管任务查询" is-link to="/VisitSummary" v-if="summaryTaskButton">
              <template #icon>
                <van-icon :name="history" class="zicon" />
              </template>
              <template #title>
                <span>主管任务查询</span>
                <span
                  style="font-weight: 600; font-size: 16px; color: red; margin-left: 15px"
                  v-if="summaryApprovalFeedbackNum">
                  <van-tag type="danger">{{ summaryApprovalFeedbackNum }}</van-tag>
                </span>
              </template>
            </van-cell>
            <van-cell
              title="主管任务审批"
              is-link
              to="/SUPTaskApproval"
              v-if="summaryApprovalButton">
              <template #icon>
                <van-icon :name="history" class="zicon" />
              </template>
              <template #title>
                <span>主管任务审批</span>
                <span
                  style="font-weight: 600; font-size: 16px; color: red; margin-left: 15px"
                  v-if="summaryPendingApprovalNum">
                  <van-tag type="danger">{{ summaryPendingApprovalNum }}</van-tag>
                </span>
              </template>
            </van-cell>
            <van-cell
              title="家装推广会历史提报查询"
              is-link
              to="/VisitSummaryMy"
              v-if="jzTaskButton">
              <template #icon>
                <van-icon :name="history" class="zicon" />
              </template>
              <template #title>
                <span>家装推广会历史提报查询</span>
                <span
                  style="font-weight: 600; font-size: 16px; color: red; margin-left: 15px"
                  v-if="summaryApprovalFeedbackNum">
                  <van-tag type="danger">{{ summaryApprovalFeedbackNum }}</van-tag>
                </span>
              </template>
            </van-cell>
          </div>
        </van-cell-group>
      </div>
    </div>
    <tab-bar tabBarActive="MyList"></tab-bar>
  </div>
</template>

<script>
import history from '@/assets/Icon/history.png';
import addShop from '@/assets/Icon/addShop.png';
import avatar from '@/assets/avatar2.png';
import doubleWeekly from '@/assets/doubleWeekly.png';
import daily from '@/assets/daily.png';
import Weekly from '@/assets/Weekly.png';
import storeselect from '@/assets/Icon/storeselect.png';
import tabBar from '@/components/tabBar';
import { getReportInfo, getstoreCoverPosition } from '@/api/index';
import { selectAllocationPermission } from '@/api/week';
import { mapState } from 'vuex';
export default {
  name: 'MyList',
  components: { tabBar },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  data() {
    return {
      history: history,
      avatar: avatar,
      addShow: false,
      doubleWeekly: doubleWeekly,
      Weekly: Weekly,
      daily: daily,
      storeselect: storeselect,
      addShop: addShop,
      powerGrade: '1',
      num: 0,
      nickName: '',
      postName: '',
      showDaily: false,
      showWeekly: false,
      showDouble: false,
      existReject: false,
      isDiy: false,
      historyButton: false,
      deptLevel: 0,
      list: [],
      addBTN: '新建工地',
      title: '我的客户',
      addShow1: false,
      result: '',
      jzTaskButton: false,
      summaryTaskButton: false,
      customerClueButton: false,
      customerClueNum: 0,
      thisWeekRemarkNum: null,
      notAllocationNum: 0, //待分配客资数量
      isAssignFlag: false,
      photoApprovalNum: 0,
      summaryApprovalButton: false,
      summaryPendingApprovalNum: 0,
      summaryApprovalFeedbackNum: 0,
      reportInfo: null,
      postType: null,
    };
  },
  watch: {
    $route(to, from) {
      this.num = 0;
      if (to.path == '/My/index') {
        this.nickName = localStorage.getItem('nickName');
        this.postName = localStorage.getItem('postName');
        this.postType = localStorage.getItem('postType');
        this.powerGrade = localStorage.getItem('powerGrade');
        this.isDiy = localStorage.getItem('isDiy');
        this.getstoreCoverPosition();
        this.getReportInfo();
      }
    },
  },
  created() {
    this.powerGrade = localStorage.getItem('powerGrade');
    this.postName = localStorage.getItem('postName');
    this.postType = localStorage.getItem('postType');
    this.isDiy = localStorage.getItem('isDiy');
    this.nickName = localStorage.getItem('nickName');
    this.getstoreCoverPosition();
    this.getReportInfo();
  },
  methods: {
    historAllVisit() {
      localStorage.setItem('typeQuery', 0);
      this.$router.push({
        path: '/historAllVisit',
      });
    },
    getstoreCoverPosition() {
      getstoreCoverPosition({}).then((res) => {
        var postName = localStorage.getItem('postName');
        var postType = localStorage.getItem('postType');
        if (postType == 'DIY') {
          this.addBTN = '新建同城分销店';
          this.title = '我的客户';
          this.addShow1 = true;
        } else if (postType == 'JZ') {
          this.addBTN = '新建家装店';
          this.addShow1 = true;
          this.title = '我的客户';
        } else if (postType == 'GZ') {
          this.addBTN = '新建工地/潜在客户/公装客户仓库';
          this.addShow1 = false;
          this.title = '我的客户';
        }
        postName = postName.split(',');
        for (let i = 0; i < res.data.length; i++) {
          for (let j = 0; j < postName.length; j++) {
            if (res.data[i].dictLabel == postName[j]) {
              this.addShow = true;
              return false;
            }
          }
        }
      });
    },
    dailyFn(row) {
      this.$router.push({
        path: '/VisitSummaryAdd',
        query: { summaryId: row.summaryId, title: row.summaryTaskName },
      });
    },
    getReportInfo() {
      this.deptLevel = localStorage.getItem('deptLevel');
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      // 如果有客资分配权限，获取待分配客资数量
      this.getSelectAllocationPermission();
      getReportInfo({ isContent: false }).then((res) => {
        loading1.clear();
        this.reportInfo = res.data;
        this.list = res.data.summaryTasks;
        this.historyButton = res.data.historyButton;
        localStorage.setItem('powerGrade', res.data.positionId);
        localStorage.setItem('userDeptLevel', res.data.userDeptLevel);
        this.existReject = res.data.existReject;
        this.powerGrade = res.data.positionId;
        this.showButton = res.data.showButton;
        this.deptLevel = res.data.deptLevel;
        this.reportTargetAll = res.data.reportTargetAll;
        this.jzTaskButton = res.data.jzTaskButton;
        this.summaryTaskButton = res.data.summaryTaskButton;
        this.summaryApprovalButton = res.data.summaryApprovalButton;
        this.customerClueButton = res.data.customerClueButton;
        this.customerClueNum = res.data.customerClueNum;
        this.updataTime = res.data.reportTargetAll.updateTime;
        this.thisWeekRemarkNum = res.data.thisWeekRemarkNum; //查询本周点评的数量,null不需要展示
        this.photoApprovalNum = res.data.photoApprovalNum; //首页照片异常待反馈数量
        this.summaryPendingApprovalNum = res.data.summaryPendingApprovalNum;
        this.summaryApprovalFeedbackNum = res.data.summaryApprovalFeedbackNum;
        if (res.data.deptLevel === 0) {
          this.showDaily = false;
          this.showWeekly = false;
          this.showDouble = false;
        }
        if (res.data.deptLevel === 1) {
          this.showDaily = true;
          this.showWeekly = false;
          this.showDouble = false;
        }
        if (res.data.deptLevel === 2) {
          this.showDaily = true;
          this.showWeekly = true;
          this.showDouble = false;
        }
        if (res.data.deptLevel === 3) {
          this.showDaily = true;
          this.showWeekly = true;
          this.showDouble = true;
        }
      });
    },
    getSelectAllocationPermission() {
      selectAllocationPermission()
        .then((res) => {
          this.isAssignFlag = res.data.isAllocationPermission;
          this.notAllocationNum = res.data.notAllocationNum;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    login() {
      if (this.num > 10) {
        this.$router.push('/login');
      } else {
        this.num = this.num + 1;
      }
    },
    onSelect(action) {
      if (action == 'B') {
        this.$router.push('/storeAdd');
      } else {
        window.location.href =
          'https://weboa.nipponpaint.com.cn/4825836600585B0C/68488309EEFAC9044825805F0059C65B/_fi12rtp156lortal9ue32ww78_r_t4r5rr_09tu0qq19k09_npchina_sfs2g_?open&portalunid=AFECD3A3682ED7494825886F00242F0C&mainid=63C98CD1C79B608C4825886F0007F001';
      }
    },
  },
};
</script>
<style scoped lang="scss">
.userPage {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .content {
    flex: 1;
    margin-top: 46px;
    overflow-y: auto;
  }
  .tabBar {
    height: 50px;
  }
}
.myHeader {
  background-color: #1c84c6;
  padding: 24px 30px;
  background: url('../../assets/bg.png');
  background-size: cover;
}
.mtb10 {
  margin: 10px 16px;
}

.container {
  margin: 16px 0;
}

.zicon {
  margin-top: 4px;
  padding-right: 8px;
}

.avatarContent {
  padding: 10px 0;
}

.avatarContent .nickName {
  color: white;
  font-size: 14px;
  margin-top: 0;
}

.avatarContent .postName {
  display: inline-block;
  padding: 4px 6px;
  background-color: white;
  border-radius: 4px;
  color: #1c84c6;
  font-size: 12px;
}

.MYTile .van-tag--danger {
  border-radius: 20px;
  padding: 0 6px;
}

.MYTile .van-icon-arrow {
  font-size: 16px;
  line-height: 24px;
  color: #969799;
  margin-left: 6px;
}
</style>
