storevisit-ui-mobile/src/views/week/dailyHistoricalDetails.vue

<template>
  <div class="dailyHistoricalDetails">
    <div class="dailyHistoricalDetailsBox" v-if="setDailyDetailsBoxFlag">
      <!--        顶部条-->
      <div class="navBarTOP">
        <van-nav-bar class="navBar" title="日报详情" left-arrow @click-left="onClickLeft">
          <template #right>
            <!-- 分享按钮 -->
            <!-- 分享过的不能在分享， fx分销的可以分享，reportTarget，status == -1过期未汇报不能分享 -->
            <div
              class="shareBtn"
              @click="clickShareFlag(-1)"
              v-if="
                reportTarget &&
                source != 'share' &&
                reportTarget.reportPostType == 'fx' &&
                reportTarget.status != -1
              ">
              <van-icon name="share" />
              <div class="vedioLinks" @click.stop="shareVedioLinks">
                <span>一键分享日报，</span>
                <span class="linkSpan">点击查看操作视频</span><van-icon name="play" />
              </div>
            </div>
          </template>
        </van-nav-bar>
      </div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <!--        主体内容-->
      <div class="container linep" v-if="reportTargetAll">
        <p style="font-size: 16px; margin: 10px 0">
          {{ title }}
        </p>
        <p style="font-size: 16px; margin: 10px 0" v-if="reportTarget.commitTime">
          提交时间: {{ reportTarget.commitTime }}
        </p>
        <template v-if="postName == '质感销售负责人' || postName == '质感销售专员'">
          <target :homePageIndicatorDate="homePageIndicatorList"></target>
        </template>
        <template v-else>
          <van-collapse v-model="activeNames" v-if="!YFQuota">
            <!-- YFQuota:应用服务平台 不显示各项指标 -->
            <van-collapse-item v-if="!GZQuota" title="拜访数据(实时)" name="7">
              <visitedRealTime
                :reportTargetAll="reportTargetAll"
                :powerGrade="powerGrade"
                :JZQuota="JZQuota"></visitedRealTime>
            </van-collapse-item>
            <van-collapse-item title="建店布机" v-if="!JZQuota && !GZQuota" name="2">
              <createStoreBJ :reportTargetAll="reportTargetAll"></createStoreBJ>
            </van-collapse-item>
            <van-collapse-item v-if="!JZQuota && !GZQuota" name="33" title="下单点数">
              <placeOrder :reportTargetAll="reportTargetAll"></placeOrder>
            </van-collapse-item>
            <van-collapse-item name="16" v-if="!JZQuota && !GZQuota" title="专业时时丽分销店下单">
              <ZYPlaceOrder :reportTargetAll="reportTargetAll"></ZYPlaceOrder>
            </van-collapse-item>
            <van-collapse-item v-if="type != 3 && type != 4" name="1" :title="saptitle">
              <performanceSAP
                :reportTargetAll="reportTargetAll"
                :JZQuota="JZQuota"></performanceSAP>
            </van-collapse-item>
            <van-collapse-item v-if="GZQuota" name="43" title="纯态之家SAP(千元)">
              <van-row style="margin-top: -10px">
                <van-col span="12"><span class="leftTitle">本月</span></van-col
                ><van-col span="12"><span class="rightTitle">本季</span></van-col>
                <van-col span="12"
                  ><p>
                    业绩实际:<span class="colorbalck">{{
                      Micrometer(reportTargetAll.gzCtzjMonthAct)
                    }}</span>
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    业绩实际:<span class="colorbalck">{{
                      Micrometer(reportTargetAll.gzCtzjQuarterAct)
                    }}</span>
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    业绩成长率:<span class="colorbalck"
                      >{{ reportTargetAll.gzCtzjMonthGrowRate }}%</span
                    >
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    业绩成长率:<span class="colorbalck"
                      >{{ reportTargetAll.gzCtzjQuarterGrowRate }}%</span
                    >
                  </p></van-col
                >
              </van-row>
            </van-collapse-item>
            <van-collapse-item v-if="GZQuota" name="42" title="商机关联的质感外墙业绩SAP(千元)">
              <van-row style="margin-top: -10px">
                <van-col span="12"><span class="leftTitle">本月</span></van-col
                ><van-col span="12"><span class="rightTitle">本季</span></van-col>
                <van-col span="12"
                  ><p>
                    业绩实际:<span class="colorbalck">{{
                      Micrometer(reportTargetAll.gzZgwqMonthAct)
                    }}</span>
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    业绩实际:<span class="colorbalck">{{
                      Micrometer(reportTargetAll.gzZgwqQuarterAct)
                    }}</span>
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    业绩成长率:<span class="colorbalck"
                      >{{ reportTargetAll.gzZgwqMonthGrowRate }}%</span
                    >
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    业绩成长率:<span class="colorbalck"
                      >{{ reportTargetAll.gzZgwqQuarterGrowRate }}%</span
                    >
                  </p></van-col
                >
              </van-row>
            </van-collapse-item>
            <van-collapse-item v-if="GZQuota" name="41" title="累计出货有效客户">
              <van-row>
                <van-col span="12"
                  ><p>
                    全年实际:<span class="colorbalck">{{
                      Micrometer(reportTargetAll.gzKhljYearAct)
                    }}</span>
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    全年目标:<span class="colorbalck">{{
                      Micrometer(reportTargetAll.gzKhljYearTarget)
                    }}</span>
                  </p></van-col
                >
                <van-col span="12"><p>&nbsp;</p></van-col>
                <van-col span="12"
                  ><p>
                    目标达成率:<span class="colorbalck"
                      >{{ Micrometer(reportTargetAll.gzKhljSuccessRate) }}%</span
                    >
                  </p></van-col
                >
              </van-row>
            </van-collapse-item>
            <van-collapse-item v-if="GZQuota" name="40" title="今日拜访">
              <van-row>
                <van-col span="12"
                  ><p>
                    公装客户数:<span class="colorbalck">{{
                      Micrometer(reportTargetAll.gzVisitCustomerNum)
                    }}</span>
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    工地数:<span class="colorbalck">{{
                      Micrometer(reportTargetAll.gzVisitGdNum)
                    }}</span>
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    潜在客户数:<span class="colorbalck">{{
                      Micrometer(reportTargetAll.gzVisitQzCustomerNum)
                    }}</span>
                  </p></van-col
                >
              </van-row>
            </van-collapse-item>
            <van-collapse-item v-if="!JZQuota && !GZQuota" name="11" title="专业时时丽SAP(千元)">
              <ZYSAP :reportTargetAll="reportTargetAll"></ZYSAP>
            </van-collapse-item>
            <van-collapse-item v-if="!JZQuota && !GZQuota" name="29" title="瓷砖胶SAP(千元)">
              <van-row>
                <van-col span="12"><span class="leftTitle">本月业绩</span></van-col
                ><van-col span="12"><span class="rightTitle">本季业绩</span></van-col>
                <van-col span="12"
                  ><p>
                    实际:<span class="colorbalck">{{
                      Micrometer(reportTargetAll.czjSapMonthAct)
                    }}</span>
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    实际:<span class="colorbalck">{{
                      Micrometer(reportTargetAll.czjSapQuarterAct)
                    }}</span>
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    达成率:<span class="colorbalck"
                      >{{ reportTargetAll.czjSapMonthSuccessRate }}%</span
                    >
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    达成率:<span class="colorbalck"
                      >{{ reportTargetAll.czjSapQuarterSuccessRate }}%</span
                    >
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    成长率:<span class="colorbalck"
                      >{{ reportTargetAll.czjSapMonthGrowRate }}%</span
                    >
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    成长率:<span class="colorbalck"
                      >{{ reportTargetAll.czjSapQuarterGrowRate }}%</span
                    >
                  </p></van-col
                >
              </van-row>
            </van-collapse-item>
            <van-collapse-item name="17" v-if="!JZQuota && !GZQuota" title="超好贴分销店下单">
              <veryGoodPlaceOrder :reportTargetAll="reportTargetAll"></veryGoodPlaceOrder>
            </van-collapse-item>
            <van-collapse-item v-if="JZQuota" name="23" title="展厅上样">
              <van-row>
                <van-col span="24"
                  ><p>
                    当月新增店数:<span class="colorbalck">{{
                      reportTargetAll.exhibitionHallMonthAct
                    }}</span>
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    全年实际店数:<span class="colorbalck"
                      >{{ Micrometer(reportTargetAll.exhibitionHallYearAct) }}%</span
                    >
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    全年达成进度率:<span class="colorbalck"
                      >{{ reportTargetAll.exhibitionHallYearRate }}%</span
                    >
                  </p></van-col
                >
              </van-row>
            </van-collapse-item>
            <van-collapse-item v-if="JZQuota" name="22" title="基材粉料过账(千元)">
              <van-row>
                <van-col span="12"><span class="leftTitle">本月实际</span></van-col>
                <van-col span="12"><span class="rightTitle">本季实际</span></van-col>
                <van-col span="12"
                  ><p>
                    客户数:<span class="colorbalck">{{ reportTargetAll.jcPostCustomerMonth }}</span>
                  </p>
                </van-col>
                <van-col span="12"
                  ><p>
                    客户数:<span class="colorbalck">{{
                      reportTargetAll.jcPostCustomerQuarter
                    }}</span>
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    下单数(包):<span class="colorbalck">{{
                      reportTargetAll.jcPostOrderNumMonth
                    }}</span>
                  </p>
                </van-col>
                <van-col span="12"
                  ><p>
                    下单数(包):<span class="colorbalck">{{
                      reportTargetAll.jcPostOrderNumQuarter
                    }}</span>
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    下单销售额:<span class="colorbalck">{{
                      Micrometer(reportTargetAll.jcPostOrderPriceMonth)
                    }}</span>
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    下单销售额:<span class="colorbalck">{{
                      Micrometer(reportTargetAll.jcPostOrderPriceQuarter)
                    }}</span>
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    下单率:<span class="colorbalck"
                      >{{ reportTargetAll.jcPostOrderRateMonth }}%</span
                    >
                  </p>
                </van-col>
                <van-col span="12"
                  ><p>
                    下单率:<span class="colorbalck"
                      >{{ reportTargetAll.jcPostOrderRateQuarter }}%</span
                    >
                  </p></van-col
                >
                <van-col span="24"><span class="leftTitle">年度累计实际</span></van-col>
                <van-col span="24"
                  ><p>
                    客户数:<span class="colorbalck">{{ reportTargetAll.jcPostCustomerYear }}</span>
                  </p>
                </van-col>
                <van-col span="24"
                  ><p>
                    下单数(包):<span class="colorbalck">{{
                      reportTargetAll.jcPostOrderNumYear
                    }}</span>
                  </p>
                </van-col>
                <van-col span="24"
                  ><p>
                    下单销售额:<span class="colorbalck">{{
                      Micrometer(reportTargetAll.jcPostOrderPriceYear)
                    }}</span>
                  </p></van-col
                >
                <van-col span="24"
                  ><p>
                    下单率:<span class="colorbalck"
                      >{{ reportTargetAll.jcPostOrderRateYear }}%</span
                    >
                  </p>
                </van-col>
              </van-row>
            </van-collapse-item>
            <van-collapse-item v-if="JZQuota" name="21" title="魔术漆过账(千元)">
              <van-row>
                <van-col span="12"><span class="leftTitle">本月实际</span></van-col>
                <van-col span="12"><span class="rightTitle">本季实际</span></van-col>
                <van-col span="12"
                  ><p>
                    客户数:<span class="colorbalck">{{
                      reportTargetAll.msqPostCustomerMonth
                    }}</span>
                  </p>
                </van-col>
                <van-col span="12"
                  ><p>
                    客户数:<span class="colorbalck">{{
                      reportTargetAll.msqPostCustomerQuarter
                    }}</span>
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    下单销售额:<span class="colorbalck">{{
                      Micrometer(reportTargetAll.msqPostOrderPriceMonth)
                    }}</span>
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    下单销售额:<span class="colorbalck">{{
                      Micrometer(reportTargetAll.msqPostOrderPriceQuarter)
                    }}</span>
                  </p></van-col
                >
                <van-col span="12"
                  ><p>
                    下单率:<span class="colorbalck"
                      >{{ reportTargetAll.msqPostOrderRateMonth }}%</span
                    >
                  </p>
                </van-col>
                <van-col span="12"
                  ><p>
                    下单率:<span class="colorbalck"
                      >{{ reportTargetAll.msqPostOrderRateQuarter }}%</span
                    >
                  </p></van-col
                >
                <van-col span="24"><span class="leftTitle">年度累计实际</span></van-col>
                <van-col span="24"
                  ><p>
                    客户数:<span class="colorbalck">{{ reportTargetAll.msqPostCustomerYear }}</span>
                  </p>
                </van-col>
                <van-col span="24"
                  ><p>
                    下单销售额:<span class="colorbalck">{{
                      Micrometer(reportTargetAll.msqPostOrderPriceYear)
                    }}</span>
                  </p></van-col
                >
                <van-col span="24"
                  ><p>
                    下单率:<span class="colorbalck"
                      >{{ reportTargetAll.msqPostOrderRateYear }}%</span
                    >
                  </p>
                </van-col>
              </van-row>
            </van-collapse-item>
            <van-collapse-item title="今日拜访照片" name="10" v-if="reportTarget.photoSummary">
              <div
                class="visitIMG1"
                :style="{
                  overflow: 'hidden',
                  height: visitIMG1Flag ? 'auto' : '170px',
                }">
                <template v-for="(item, index) in reportTarget.photoSummary">
                  <van-col span="6" style="padding: 5px" @click="pviewFn(index)" :key="index">
                    <img :src="item.fileUrl" alt="" />
                  </van-col>
                </template>
              </div>
              <div
                v-if="reportTarget.photoSummary.length > 8"
                class="arrowIcon"
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  padding: 5px 0;
                  font-size: 14px;
                  color: #969799;
                "
                @click="visitIMG1Flag = !visitIMG1Flag">
                <template v-if="visitIMG1Flag">
                  <span style="margin-right: 5px">折叠</span>
                  <van-icon size="14" :name="require('@/assets/Icon/arrow-up.png')" />
                </template>
                <template v-else>
                  <span style="margin-right: 5px">展开</span>
                  <van-icon size="14" :name="require('@/assets/Icon/arrow-down.png')" />
                </template>
              </div>
              <!-- 生动化陈列 sku -->
              <template
                v-if="
                  reportTarget.photoSkuImgSummaryeList &&
                  reportTarget.photoSkuImgSummaryeList.length
                ">
                <p style="padding-bottom: 10px; font-size: 14px; color: #1e5398; font-weight: 500">
                  SKU陈列照识别结果
                </p>
                <p style="padding-bottom: 10px; font-size: 14px; font-weight: 500">
                  目前识别桶装和战略产品合计106个，后续会增加被识别产品数
                </p>
                <el-table
                  :data="reportTarget.photoSkuImgSummaryeList"
                  border
                  class="table-headermd table-headermdhome"
                  style="width: 100%">
                  <el-table-column label="序号" type="index" width="50px" align="center" />
                  <el-table-column label="门店名称（编号）" prop="name" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.name }}({{ scope.row.code }})
                    </template>
                  </el-table-column>
                  <el-table-column label="SKU数量" prop="count" width="80px" align="center" />
                </el-table>
              </template>
            </van-collapse-item>
          </van-collapse>
        </template>
        <div class="contentContainer">
          <!-- isHistory 是否为历史汇报：0-新汇报 1-历史汇报 -->
          <reportCustom
            ref="reportCustom"
            v-if="reportTarget.isHistory == '0'"
            :disabled="true"
            :reportCustomData="reportTarget.customTaskList"></reportCustom>
          <template v-else>
            <div v-if="GZQuota">
              <p class="contentContainerTitle">今日项目跟进数</p>
              <div style="padding: 10px 0">
                <van-field readonly v-model="projectFollowNum" type="digit" />
              </div>
              <p class="contentContainerTitle">今日TUC成功报备数量</p>
              <div style="padding: 10px 0">
                <van-field readonly v-model="tucReportingSuccessNum" type="digit" />
              </div>
            </div>
            <!-- 今日未拜访原因 如果不为空则展示，为空则不展示 -->
            <div v-if="reportTarget.notVisitReason && reportTarget.notVisitReason != ''">
              <p class="contentContainerTitle">截至日报提交时间，今日拜访0家店的原因</p>
              <div style="padding: 10px 0">
                <van-field
                  readonly
                  v-model="reportTarget.notVisitReason"
                  rows="4"
                  autosize
                  type="textarea" />
              </div>
            </div>
            <p class="contentContainerTitle">今日机会与挑战总结</p>
            <div style="padding: 10px 0">
              <van-field v-model="Content" rows="4" autosize readonly type="textarea" />
            </div>
            <p class="contentContainerTitle">明日工作规划</p>
            <div style="padding: 10px 0">
              <van-field v-model="Content2" rows="4" autosize readonly type="textarea" />
            </div>
          </template>
        </div>
        <div
          class="contentContainer"
          v-if="reportTarget.status > 1 || reportTarget.reportRemarks != null">
          <p class="texttitle texttitledaily">
            <span class="opint"></span>
            <span v-if="reportTarget.status == 1">待审批</span>
            <span v-if="reportTarget.status == 3">审批完成</span>
            <span v-if="reportTarget.status == 2">退回重写</span>
            <span v-if="reportTarget.status == -1">过期未汇报</span>
            <span v-if="reportTarget.status > 1"><{{ ptitle }}审批></span>
          </p>
          <div style="padding: 10px 0" v-if="reportTarget.status > 1">
            <van-rate
              v-model="reportTarget.number"
              :size="25"
              readonly
              color="#ffd21e"
              void-icon="star"
              void-color="#eee" /><span class="rateText"
              >&nbsp;&nbsp;&nbsp;&nbsp;{{ reportTarget.number }}分</span
            >
          </div>
          <div style="padding: 10px 0" v-if="reportTarget.status > 1">
            <van-field v-model="successContent" rows="4" autosize readonly type="textarea" />
          </div>
        </div>
        <div class="contentContainer" v-if="reportTarget.reportRemarks != null">
          <div>
            <div v-for="(item, index) in reportTarget.reportRemarks" :key="index">
              <div class="contentContainerTitle redisplay">
                <div class="nameTitle">
                  <template v-if="item.deptName">{{ item.deptName }}-</template
                  >{{ item.postName }}-{{ item.nickName }}的点评
                </div>
                <div
                  class="shareBtn"
                  @click="clickShareFlag(index)"
                  v-if="
                    reportTarget &&
                    source != 'share' &&
                    reportTarget.reportPostType == 'fx' &&
                    reportTarget.status != -1
                  ">
                  <van-icon name="share" />
                </div>
              </div>
              <div style="padding: 10px 0">
                <van-field
                  v-model="item.remarkContent"
                  rows="4"
                  autosize
                  readonly
                  type="textarea" />
              </div>
              <!-- <p style="text-align: right">点评时间：{{ item.createTime }}</p> -->
            </div>
          </div>
        </div>
        <div class="contentContainer">
          <p class="contentContainerTitle">点评</p>
          <div style="padding: 10px 0">
            <van-field
              v-model="managerRemarkContent"
              rows="4"
              autosize
              maxlength="800"
              show-word-limit
              type="textarea"
              :formatter="formatter" />
          </div>
        </div>
      </div>
      <br />
      <div class="contentborder">
        <van-button type="info" size="small" plain class="Btn1" @click="submint"
          >提交点评</van-button
        >
      </div>
      <br />
      <br />
      <br />
      <!--    v-if="isDiy=='true'"  v-if="reportTarget.status!=-1&&showEnvelopes&&(reportTarget.userId!=reportTarget.loginUserId)"-->
      <!--        <div class="envelopes"  @click="openEnterpriseChat" >-->
      <!--          <img :src="envelopes">-->
      <!--          <p>红包奖励</p>-->
      <!--        </div>-->
      <!--        <div class="envelopes" @click="openEnterpriseChatv" v-if="reportTarget.status!=-1&&!showEnvelopes&&(reportTarget.userId!=reportTarget.loginUserId)">-->
      <!--          <img :src="envelopes">-->
      <!--          <p>红包提醒</p>-->
      <!--        </div>-->
      <!--    <div class="contentborder">-->
      <!--      <van-button type="info" size="small" plain class="Btn1" >红包会话测试</van-button>-->
      <!--    </div>-->
      <br />
      <br />
      <br />
      <br />
    </div>
    <share
      v-if="setShareFlag"
      :reportTarget="reportTarget"
      :reportId="$route.query.reportId"
      @setShareImg="setShareImg"
      @setDailyDetailsBox="setDailyDetailsBox"
      :urlList="urlList"
      :reportRemarksIndex="reportRemarksIndex"
      :reportContents="reportContents"
      :checkedPlan="checkedPlan"></share>
    <!--分享图片列表 -->
    <el-dialog
      title="选择分享的内容"
      :visible.sync="shareImgFlag"
      width="90%"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="wuliaoTableClose"
      custom-class="shareImgFlag">
      <div v-if="reportTarget.photoSummary">
        <!-- <p style="margin-bottom: 10px; margin-top: 0; display: flex">
          今日总结&明日规划的文本内容<van-checkbox
            v-model="checkedPlan"
            style="margin-left: 10px"></van-checkbox>
        </p> -->
        <p style="margin-top: 0">请点击勾选想要分享的今日拜访照片</p>
        <div class="shareVisitImg">
          <template v-for="(itemImg, indexImg) in reportTarget.photoSummary">
            <div>
              <img :src="itemImg.fileUrl" alt="" @click="selectImg(itemImg)" />
              <van-icon
                @click.stop
                name="success"
                class="activaImg"
                color="#fff"
                size="15"
                style="
                  position: absolute;
                  right: 0;
                  bottom: 0;
                  /* margin: -15px 0 0 -15px; */
                  pointer-events: none;
                  background: #2b73cf;
                  border: 2px solid #fff;
                "
                v-if="itemImg.checked" />
            </div>
          </template>
        </div>
      </div>
      <span slot="footer" class="footer-btn">
        <van-button plain type="primary" @click="shareImgFlag = false">取 消</van-button>
        <van-button type="primary" @click="confirmShare">确 定</van-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import history from '@/assets/Icon/history.png';
import envelopes from '@/assets/envelopes.png';
import {
  userTodayPlanNum,
  insertRemark,
  getDetailById,
  updateReport,
  buryingPoint,
  getDictOption,
} from '@/api/index';
import axios from 'axios';
import { ImagePreview } from 'vant';
import visitedRealTime from '@/views/componentsTarget/visitedRealTime';
import createStoreBJ from '@/views/componentsTarget/createStoreBJ';
import placeOrder from '@/views/componentsTarget/placeOrder';
import ZYPlaceOrder from '@/views/componentsTarget/ZYPlaceOrder';
import performanceSAP from '@/views/componentsTarget/performanceSAP';
import ZYSAP from '@/views/componentsTarget/ZYSAP';
import veryGoodPlaceOrder from '@/views/componentsTarget/veryGoodPlaceOrder';
import share from '@/components/share';
import reportCustom from './reportCustom';
import target from './target.vue';

export default {
  name: 'daily',
  components: {
    visitedRealTime,
    createStoreBJ,
    placeOrder,
    ZYPlaceOrder,
    performanceSAP,
    ZYSAP,
    veryGoodPlaceOrder,
    share,
    reportCustom,
    target,
  },
  data() {
    return {
      envelopes: envelopes,
      show: true,
      num: 0,
      title: '',
      ptitle: '',
      showEnvelopes: true,
      todayGoal: {},
      progressWidth: 0,
      history: history,
      imgArr: [],
      activeNames: [
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '10',
        '16',
        '17',
        '20',
        '21',
        '22',
        '23',
        '11',
        '29',
        '33',
        '40',
        '41',
        '42',
        '43',
      ],
      value: '2',
      message: '',
      powerGrade: '',
      Content: '',
      Content2: '',
      reportTargetAll: null,
      reportContents: [],
      reportTarget: {},
      successContent: '',
      managerRemarkContent: '',
      projectFollowNum: '',
      reportingNum: '',
      tucReportingSuccessNum: '',
      isDiy: false,
      type: '-1',
      imgList: [],
      JZQuota: false,
      titlejz: '',
      GZQuota: false,
      YFQuota: false, //应用服务
      saptitle: '业绩目标SAP(千元)',
      setShareFlag: false,
      source: '',
      reportRemarksIndex: -1,
      shareImgFlag: false,
      urlList: [],
      reportId: '',
      checkedPlan: true, //今日总结&明日规划
      setDailyDetailsBoxFlag: true,
      visitIMG1Flag: false,
      shareReportConfig: null,
      postName: '',
      homePageIndicatorList: null,
    };
  },
  watch: {
    $route(to, from) {
      this.powerGrade = localStorage.getItem('powerGrade');
      this.isDiy = localStorage.getItem('isDiy');
      if (to.path == '/dailyHistoricalDetails') {
        this.showEnvelopes = true;
        this.getDetailById();
      }
      // &&from.path=="/dailyApprovalList"
      // if(to.path=="/dailyDetails"&&from.path=="/myHistoricalDaily"){
      //   this.getDetailById()
      // }
    },
  },
  activated() {
    this.setDailyDetailsBoxFlag = true;
    this.shareImgFlag = false;
    this.reportId = this.$route.query.reportId ? this.$route.query.reportId.replace('?', '') : '';
    console.log(this.reportId);
    this.source = this.$route.query.source;
    this.num = 0;
    this.userTodayPlanNum();
    this.setShareFlag = false;
    this.powerGrade = localStorage.getItem('powerGrade');
    this.isDiy = localStorage.getItem('isDiy');
    this.getDetailById();
  },
  methods: {
    setVisitIMG1Flag(item) {
      this.$set(item, 'visitIMG1Flag', !item.visitIMG1Flag);
      this.$forceUpdate();
    },
    setDailyDetailsBox(flag) {
      this.setDailyDetailsBoxFlag = flag;
    },
    setShareImg(flag) {
      this.setShareFlag = flag;
    },
    // 打开分享
    clickShareFlag(index = -1) {
      buryingPoint({
        systemModel: '日报审核',
        buryingPointType: 2,
        buryingPointValue: this.$route.query.reportId,
        buryingPointName: '日报详情分享',
        buryingPointPosition: '日报详情',
      });
      this.urlList = [];
      this.reportRemarksIndex = index;
      if (this.reportTarget.photoSummary && this.reportTarget.photoSummary.length) {
        // 重置分享图片状态
        this.reportTarget.photoSummary.forEach((item) => {
          // item.photos.forEach((val) => {
          this.$set(item, 'checked', false);
          // });
        });
        // 选择分享的图片
        this.shareImgFlag = true;
      } else {
        this.setShareFlag = true;
      }
    },
    // 确认分享
    confirmShare() {
      this.reportTarget.photoSummary.forEach((item) => {
        // item.photos.forEach((val) => {
        if (item.checked) this.urlList.push(item.fileUrl);
        // });
      });
      if (this.urlList.length == 0 && !this.checkedPlan) {
        this.$notify({ type: 'warning', message: '请选择分享内容！', className: 'notifyIndex' });
        return;
      }
      buryingPoint({
        systemModel: '日报审核',
        buryingPointType: 2,
        buryingPointValue: `文本${this.checkedPlan ? '是' : '否'},图片${this.urlList.length}`,
        buryingPointName: '日报分享确认',
        buryingPointPosition: '日报详情',
      });
      this.shareImgFlag = false;
      this.setShareFlag = true;
    },
    pviewFn(index) {
      var imgList = [];
      var photos = this.reportTarget.photoSummary;
      for (let i = 0; i < photos.length; i++) {
        imgList.push(photos[i].fileUrl);
      }
      ImagePreview({ images: imgList, startPosition: index });
    },
    openEnterpriseChatv() {
      this.$dialog
        .confirm({
          title: '系统提示',
          message: '是否发送红包提醒？',
        })
        .then(() => {
          this.$toast('提醒成功！');
        })
        .catch(() => {
          // on cancel
        });
    },
    formatter(value) {
      return value.replace(
        /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi,
        '',
      );
    },
    openEnterpriseChat(val) {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      let url = window.location.href;
      let that = this;
      let wx = this.wx;
      let qiyeData;
      var userIds = this.reportTarget.reportContents[0].createBy;
      const instance = axios.create();
      instance.defaults.headers.common['userId'] = localStorage.getItem('loginName');
      instance
        .get(process.env.VUE_APP_BASE_API + 'mobile/wx/ticket', {
          params: {
            url: url,
          },
        })
        .then((response) => {
          if (response.status == 200) {
            loading1.clear();
            qiyeData = response.data.data;
            wx.config({
              beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: qiyeData.appId, // 必填，企业微信的corpID
              timestamp: qiyeData.timestamp, // 必填，生成签名的时间戳
              nonceStr: qiyeData.nonceStr, // 必填，生成签名的随机串
              signature: qiyeData.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
              jsApiList: ['ready', 'openEnterpriseChat'], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
            });
            wx.ready(function () {
              wx.openEnterpriseChat({
                //localStorage.getItem("loginName")
                userIds: userIds,
                // externalUserIds:"dingxiaogai.sm",
                groupName: '我的红包群', // 会话名称。单聊时该参数传入空字符串""即可。localStorage.getItem("loginName")
                chatId: '', //CHATID 若要打开已有会话，需指定此参数。如果是新建会话，chatId必须为空串
                success: function (res) {
                  that.showEnvelopes = false;
                  var chatId = res.chatId; //返回当前群聊ID，仅当使用agentConfig注入该接口权限时才返回chatId
                },
                fail: function (res) {
                  if (res.errMsg.indexOf('function not exist') > -1) {
                    alert('版本过低请升级');
                  }
                },
              });
            });
          } else {
            this.$toast.fail(dataList.msg);
          }
        });
    },
    submint() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '数据提交中...',
        forbidClick: true,
      });
      if (this.managerRemarkContent.trim() == '') {
        this.$toast('点评内容未填写');

        return false;
      }
      if (this.managerRemarkContent.length > 800) {
        this.$toast('点评内容超过800字');
        return false;
      }
      var remak = {
        remarkContent: this.managerRemarkContent,
        reportId: this.reportId,
      };
      insertRemark(remak).then((res) => {
        loading1.clear();
        if (res.code == 200) {
          this.$dialog
            .alert({
              title: '系统提示',
              message: '提交成功',
            })
            .then(() => {
              this.managerRemarkContent = '';
              this.getDetailById();
            });
        } else {
          this.$toast.fail(res.msg);
        }
      });
    },
    getDetailById() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      // 获取店招异常原因字典
      getDictOption({}, 'share_report_config').then((res) => {
        this.shareReportConfig = res.data;
      });
      this.homePageIndicatorList = null;
      getDetailById({ reportId: this.reportId }).then((res) => {
        loading1.clear();
        if (res.code == 500 && this.source == 'share') {
          this.$dialog
            .confirm({
              title: '系统提示',
              message: res.msg,
              showCancelButton: false,
            })
            .then(() => {
              this.$router.replace({
                path: '/My/index',
              });
            });
        } else {
          if (res.data.postName == '质感销售负责人' || res.data.postName == '质感销售专员') {
            this.homePageIndicatorList = res.data.homePageIndicatorList;
          }
          console.log(this.homePageIndicatorList);
          this.postName = res.data.postName;
          this.GZQuota = false;
          this.JZQuota = false;
          this.YFQuota = res.data.postType == 'YF' ? true : false;
          if (res.data.postType == 'JZ') {
            this.JZQuota = true;
          } else if (res.data.postType == 'GZ') {
            this.GZQuota = true;
            this.saptitle = '公裝业绩SAP(千元)';
          } else {
            this.saptitle = '业绩目标SAP(千元)';
          }
          this.title =
            res.data.deptName + '-' + res.data.postName + '-' + res.data.nickName + '的日报';
          this.ptitle = res.data.pdeptName + '-' + res.data.ppostName + '-' + res.data.pnickName;
          this.reportTargetAll = res.data.reportTargetAll;
          this.reportTarget = res.data;
          this.type = res.data.userType;
          if (res.data.status == 3) {
            this.successContent = res.data.successContent;
          } else {
            this.successContent = res.data.failContent;
          }
          this.Content = '';
          this.Content2 = '';
          this.reportContents = [];
          // <!-- isHistory 是否为历史汇报：0-新汇报 1-历史汇报 -->
          if (this.reportTarget.isHistory == '0') {
            if (this.reportTarget.customTaskList && this.reportTarget.customTaskList.length) {
              for (let x = 0; x < this.reportTarget.customTaskList.length; x++) {
                let sfaReportCustomCollections =
                  this.reportTarget.customTaskList[x].sfaReportCustomCollections;
                if (sfaReportCustomCollections) {
                  for (let y = 0; y < sfaReportCustomCollections.length; y++) {
                    let custom = this.shareReportConfig.filter(
                      (val) =>
                        val.dictValue == sfaReportCustomCollections[y].reportCustomCollectionName,
                    );
                    if (custom.length) {
                      custom[0].content = sfaReportCustomCollections[y].answerValue;
                      this.reportContents = this.reportContents.concat(custom);
                    }
                  }
                }
              }
            }
          } else {
            if (res.data.reportContents.length > 0) {
              this.Content = res.data.reportContents[0].dayContent;
              if (res.data.reportContents.length > 1) {
                this.Content2 = res.data.reportContents[1].dayContent;
              } else {
                this.Content2 = '';
              }
              if (res.data.reportContents.length > 2) {
                this.projectFollowNum = res.data.reportContents[2].projectFollowNum;
                this.tucReportingSuccessNum = res.data.reportContents[3].tucReportingSuccessNum;
              }
            }
            this.reportContents = [
              {
                dictValue: '今日机会与挑战总结',
                content: this.Content,
              },
              {
                dictValue: '明日工作计划',
                content: this.Content2,
              },
            ];
          }
          var imgList = [];
          if (res.data.photoSummary != null) {
            for (var k = 0; k < res.data.photoSummary.length; k++) {
              imgList.push(res.data.photoSummary[k].fileUrl + '');
            }
          }
          this.imgList = imgList;
        }
        var imgList = [];
        if (res.data.photoSummary != null) {
          if (res.data.photoSummary != null) {
            for (var k = 0; k < res.data.photoSummary.length; k++) {
              imgList.push(res.data.photoSummary[k].fileUrl + '');
            }
          }
        }
        this.imgList = imgList;
      });
    },
    userTodayPlanNum() {
      userTodayPlanNum().then((res) => {
        if (res.code == 200) {
          this.todayGoal = res.data;
          this.progressWidth = (this.todayGoal.finishNum / this.todayGoal.planNum) * 100 + '%';
          localStorage.setItem('nickName', res.data.user.nickName);
          localStorage.setItem('storeType', res.data.user.type);
        } else {
          this.$toast.fail(res.msg);
        }
      });
    },
    onClickLeft() {
      if (this.source == 'share') {
        this.$router.replace({
          path: '/My/index',
        });
      } else {
        this.$router.go(-1);
      }
    },
    wuliaoTableClose() {
      this.shareImgFlag = false;
    },
    // 选中的图片
    selectImg(item) {
      this.$set(item, 'checked', !item.checked);
      console.log(item);
    },
  },
};
</script>
<style scoped lang="scss">
.dailyHistoricalDetails {
  position: relative;
  background: #fff;
  width: 100%;
  height: 100%;
  .dailyHistoricalDetailsBox {
    background: #fff;
  }
  .shareBtn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .van-icon-share {
      color: #fff;
    }
    .vedioLinks {
      max-width: vw(205);
      position: absolute;
      bottom: -13px;
      background: #dae7f6;
      padding: 2px 7px;
      /* word-break: keep-all; */
      white-space: nowrap;
      /* text-overflow: ellipsis; */
      right: 0;
      border-radius: 5px;
      font-size: 10px;
      right: 28px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      z-index: 999999;
      span {
        line-height: 17px;
      }
      .linkSpan {
        text-decoration: underline;
      }
      .van-icon-play {
        position: absolute;
        top: 12px;
        /* transform: rotate(270deg); */
        right: -8px;
        color: #dae7f6;
      }
    }
  }
}
.container {
  margin: 10px;
}

.container .van-collapse-item {
  margin-bottom: 10px;
  border-radius: 6px;
  overflow: hidden;
}

.linep p {
  margin: 6px 0 0 0;
  font-size: 14px;
  color: #666;
}

.linep .texttitle {
  color: #0057ba;
  position: relative;
  padding-left: 10px;
}

.linep .texttitledaily {
  color: #000;
  position: relative;
  padding-left: 10px;
}

.linep .texttitle2 {
  padding-left: 0;
}
.linep .texttitledaily .opint {
  position: absolute;
  left: 0px;
  top: 6px;
  margin-right: 6px;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 10px;
  background-color: #0057ba;
}

.leftTitle {
  background-color: #74a4d9;
  color: #fff;
  display: inline-block;
  padding: 0 4px;
  border-radius: 2px;
}

.rightTitle {
  background-color: #e7b4bb;
  color: #fff;
  display: inline-block;
  padding: 0 4px;
  border-radius: 2px;
}
.redisplay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .nameTitle {
    flex: 1;
  }
}
</style>
<style lang="scss">
.linep .van-cell__title {
  color: #1e5398;
  font-weight: 500;
}

.linep .contentContainer {
  background-color: white;
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 10px;
}

.linep .contentContainer .contentContainerTitle {
  color: #222;
}

.linep .contentContainer .contentContainerTitle span {
  font-size: 12px;
  color: #666;
}

.linep .contentContainer .van-field__control {
  background-color: #ebf4ff;
  padding: 10px;
  border-radius: 8px;
}

.linep .contentContainer .van-cell {
  padding: 0;
}

.colorbalck {
  color: #333;
}
.van-dialog__confirm,
.van-dialog__confirm:active {
  color: #0057ba;
}
.visitIMG1 img {
  display: block;
  width: 100%;
  height: 75px;
  border-radius: 6px;
}

.table-headermd {
  font-size: 12px;
  text-align: center;
  position: initial;
  width: 98% !important;
  margin: 0 auto;
  border-right: 0;
  border-radius: 10px;
  .el-table__cell {
    padding: 6px 0 !important;
  }
}
.table-headermd th.el-table__cell {
  background-color: #1989fa;
  color: #fff;
}
.el-dialog__wrapper {
  z-index: 9999 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5) !important;
  .shareImgFlag {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70%;
    margin-top: 0 !important;
    .el-dialog__header {
      height: 40px;
      display: flex;
      justify-content: right;
      .el-dialog__headerbtn {
        position: static !important;
      }
    }
    .el-dialog__body {
      padding: 30px 20px !important;
      overflow-y: auto;
      flex: 1;
    }
    .cell {
      font-size: 12px;
    }
    .footer-btn {
      display: flex;
      justify-content: space-around;
    }
  }
}
.shareImgFlag {
  .shareVisitImg {
    display: flex;
    flex-wrap: wrap;
    div {
      width: 22%;
      height: 80px;
      margin-right: 3%;
      margin-top: 10px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .el-dialog__header {
    display: flex;
    .el-dialog__title {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.notifyIndex {
  z-index: 999999 !important;
}
</style>