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

<template>
  <div>
    <!--        顶部条-->
    <div class="navBarTOP">
      <van-nav-bar class="navBar" title="日报详情" left-arrow @click-left="onClickLeft" />
    </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">
      <p style="font-size: 16px; margin: 10px 0">{{ title }}</p>
      <van-collapse v-model="activeNames">
        <van-collapse-item v-if="type != 3 && type != 4" name="1" :title="saptitle">
          <van-row>
            <van-col span="24" v-if="GZQuota"
              ><p>
                昨日新增:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.sapNewYesterday)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><span v-if="!JZQuota" class="leftTitle">本月业绩</span
              ><span v-if="JZQuota" class="leftTitle">本月实际</span></van-col
            >
            <van-col span="12"
              ><span v-if="!JZQuota" class="rightTitle">本季业绩</span
              ><span v-if="JZQuota" class="rightTitle">本季实际</span></van-col
            >
            <van-col span="12">
              <p v-if="!JZQuota">
                本月实际:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.sapMonthAct)
                }}</span>
              </p>
              <p v-if="JZQuota">
                本月累计:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.sapMonthAct)
                }}</span>
              </p>
            </van-col>
            <van-col span="12">
              <p v-if="!JZQuota">
                本季实际:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.sapQuarterAct)
                }}</span>
              </p>
              <p v-if="JZQuota">
                本季累计:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.sapQuarterAct)
                }}</span>
              </p>
            </van-col>
            <van-col span="12"
              ><p>
                本月达成率:<span class="colorbalck"
                  >{{ reportTargetAll.sapMonthSuccessRate }}%</span
                >
              </p></van-col
            >
            <van-col span="12"
              ><p>
                本季达成率:<span class="colorbalck"
                  >{{ reportTargetAll.sapQuarterSuccessRate }}%</span
                >
              </p></van-col
            >
            <van-col span="12"
              ><p>
                本月成长率:<span class="colorbalck">{{ reportTargetAll.sapMonthGrowRate }}%</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                本季成长率:<span class="colorbalck">{{ reportTargetAll.sapQuarterGrowRate }}%</span>
              </p></van-col
            >
            <van-col span="24" v-if="JZQuota"><span class="leftTitle">年度累计</span></van-col>
            <van-col span="24" v-if="JZQuota"
              ><p>
                年度累计:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.sapYearAct)
                }}</span>
              </p></van-col
            >
            <van-col span="24" v-if="JZQuota"
              ><p>
                年度达成率:<span class="colorbalck">{{ reportTargetAll.sapYearSuccessRate }}%</span>
              </p></van-col
            >
            <van-col span="24" v-if="JZQuota"
              ><p>
                年度成长率:<span class="colorbalck">{{ reportTargetAll.sapYearGrowRate }}%</span>
              </p></van-col
            >
          </van-row>
        </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">{{ Micrometer(reportTargetAll.gzCtzjMonthSuccessRate) }}%</span></p></van-col>-->
            <!--            <van-col span="12" ><p>业绩达成率:<span class="colorbalck">{{ Micrometer(reportTargetAll.gzCtzjQuarterSuccessRate) }}%</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">{{ Micrometer(reportTargetAll.gzZgwqMonthSuccessRate) }}%</span></p></van-col>-->
            <!--            <van-col span="12" ><p>业绩达成率:<span class="colorbalck">{{ Micrometer(reportTargetAll.gzZgwqQuarterSuccessRate) }}%</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"><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.gzKhljYearAct)
                }}</span>
              </p></van-col
            >
            <!--            <van-col span="12" ><p>报备成功数:<span class="colorbalck">{{ Micrometer(reportTargetAll.gzBbMonthSuccessNum) }}</span></p></van-col>-->
            <!--            <van-col span="12"><p>&nbsp;</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 title="建店布机" v-if="!JZQuota && !GZQuota" name="2">
          <van-row>
            <van-col span="12"
              ><p><span class="leftTitle">今年实际</span></p></van-col
            >
            <van-col span="12"
              ><p><span class="rightTitle">今年目标(达成率)</span></p></van-col
            >
            <van-col span="12"
              ><p>
                金牌店点数:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.goldShopYearAct)
                }}</span>
              </p></van-col
            >
            <van-col span="12">
              <p>
                金牌店点数:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.goldShopYearTarget)
                }}</span
                ><span class="colorbalck">({{ reportTargetAll.goldShopYearRate }}%)</span>
              </p>
            </van-col>
            <van-col span="12"
              ><p>
                金牌店布机:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.goldShopBjYearAct)
                }}</span>
              </p></van-col
            >
            <van-col span="12">
              <p>
                金牌店布机:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.goldShopBjYearTarget)
                }}</span
                ><span class="colorbalck">({{ reportTargetAll.goldShopBjYearRate }}%)</span>
              </p>
            </van-col>
            <van-col span="12"
              ><p>
                分销店点数:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.allShopYearAct)
                }}</span>
              </p></van-col
            >
            <van-col span="12">
              <p>
                分销店点数:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.allShopYearTarget)
                }}</span
                ><span class="colorbalck">({{ reportTargetAll.allShopYearRate }}%)</span>
              </p>
            </van-col>
            <!-- <van-col span="12"
              ><p>调色机上传数:{{ Micrometer(reportTargetAll.tsjUploadYearAct) }}</p></van-col
            >
            <van-col span="12">
              <p>
                调色机上传数:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.tsjUploadYearTarget)
                }}</span
                ><span class="colorbalck">({{ reportTargetAll.tsjUploadYearRate }}%)</span>
              </p>
            </van-col> -->
            <van-col span="24"
              ><p>涂料店点数:{{ Micrometer(reportTargetAll.tlShopYearAct) }}</p></van-col
            >
            <!--            <van-col span="12" >-->
            <!--              <p>涂料店点数:<span class="colorbalck">{{ Micrometer(reportTargetAll.tlShopYearTarget) }}</span><span class="colorbalck">({{ reportTargetAll.tlShopYearRate }}%)</span></p>-->
            <!--            </van-col>-->
            <van-col span="24">
              <p>厨卫店点数:{{ Micrometer(reportTargetAll.cwShopYearAct) }}</p></van-col
            >
            <!--            <van-col span="12" >-->
            <!--              <p>厨卫店点数:<span class="colorbalck">{{ Micrometer(reportTargetAll.cwShopYearTarget) }}</span><span class="colorbalck">({{ reportTargetAll.cwShopYearRate }}%)</span></p>-->
            <!--            </van-col>-->
          </van-row>
        </van-collapse-item>
        <van-collapse-item v-if="!JZQuota && !GZQuota" name="11" 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.czjMonthAct) }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.czjQuarterAct) }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                达成率:<span class="colorbalck">{{ reportTargetAll.czjMonthSuccessRate }}%</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                达成率:<span class="colorbalck">{{ reportTargetAll.czjQuarterSuccessRate }}%</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                成长率:<span class="colorbalck">{{ reportTargetAll.czjMonthGrowRate }}%</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                成长率:<span class="colorbalck">{{ reportTargetAll.czjQuarterGrowRate }}%</span>
              </p></van-col
            >
          </van-row>
        </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="16" v-if="!JZQuota && !GZQuota" 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">{{
                  Micrometer(reportTargetAll.professionalSslYes)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                下单点数:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.professionalSslMonth)
                }}</span>
              </p></van-col
            >
            <van-col span="12"><p></p></van-col>
            <van-col span="12"
              ><p>
                下单率 :<span class="colorbalck"
                  >{{ reportTargetAll.professionalSslOrderRateMonth }}%</span
                >
              </p></van-col
            >
            <van-col span="12"
              ><p>
                下单数量(桶):<span class="colorbalck">{{
                  Micrometer(reportTargetAll.professionalSslOrderNumYes)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                下单数量(桶):<span class="colorbalck">{{
                  Micrometer(reportTargetAll.professionalSslOrderNumMonth)
                }}</span>
              </p></van-col
            >
          </van-row>
        </van-collapse-item>
        <van-collapse-item name="17" v-if="!JZQuota && !GZQuota" 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">{{
                  Micrometer(reportTargetAll.excellentPostYes)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                下单点数:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.excellentPostMonth)
                }}</span>
              </p></van-col
            >
            <van-col span="12"><p></p></van-col>
            <van-col span="12"
              ><p>
                下单率 :<span class="colorbalck"
                  >{{ reportTargetAll.excellentPostOrderRateMonth }}%</span
                >
              </p></van-col
            >
            <van-col span="12"
              ><p>
                下单数量(包):<span class="colorbalck">{{
                  Micrometer(reportTargetAll.excellentPostOrderNumYes)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                下单数量(包):<span class="colorbalck">{{
                  Micrometer(reportTargetAll.excellentPostOrderNumMonth)
                }}</span>
              </p></van-col
            >
          </van-row>
        </van-collapse-item>
        <van-collapse-item v-if="!JZQuota && !GZQuota" name="33" title="分销店下单点数">
          <van-row>
            <van-col span="24"><span class="leftTitle">本月进度</span></van-col>
            <van-col span="12"
              ><p>
                分销店下单点数:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.fxOrderShopMonthAct)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                分销店下单率:<span class="colorbalck"
                  >{{ reportTargetAll.fxShopMonthOrderRate }}%</span
                >
              </p></van-col
            >
            <van-col span="12"
              ><p>
                金牌店下单点数:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.jpOrderShopMonthAct)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                金牌店下单率 :<span class="colorbalck"
                  >{{ reportTargetAll.jpShopMonthOrderRate }}%</span
                >
              </p></van-col
            >
            <van-col span="12"
              ><p>
                厨卫店下单点数:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.cwOrderShopMonthAct)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                厨卫店下单率:<span class="colorbalck"
                  >{{ reportTargetAll.cwShopMonthOrderRate }}%</span
                >
              </p></van-col
            >
            <van-col span="12"
              ><p>
                涂料店下单点数:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.tlOrderShopMonthAct)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                涂料店下单率:<span class="colorbalck"
                  >{{ reportTargetAll.tlShopMonthOrderRate }}%</span
                >
              </p></van-col
            >
          </van-row>
        </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="20" 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.czjPostCustomerMonth }}</span>
              </p>
            </van-col>
            <van-col span="12"
              ><p>
                客户数:<span class="colorbalck">{{ reportTargetAll.czjPostCustomerQuarter }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                下单数(包):<span class="colorbalck">{{
                  reportTargetAll.czjPostOrderNumMonth
                }}</span>
              </p>
            </van-col>
            <van-col span="12"
              ><p>
                下单数(包):<span class="colorbalck">{{
                  reportTargetAll.czjPostOrderNumQuarter
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                下单销售额:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.czjPostOrderPriceMonth)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                下单销售额:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.czjPostOrderPriceQuarter)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                下单率:<span class="colorbalck">{{ reportTargetAll.czjPostOrderRateMonth }}%</span>
              </p>
            </van-col>
            <van-col span="12"
              ><p>
                下单率:<span class="colorbalck"
                  >{{ reportTargetAll.czjPostOrderRateQuarter }}%</span
                >
              </p></van-col
            >
            <van-col span="24"><span class="leftTitle">年度累计实际</span></van-col>
            <van-col span="24"
              ><p>
                客户数:<span class="colorbalck">{{ reportTargetAll.czjPostCustomerYear }}</span>
              </p>
            </van-col>
            <van-col span="24"
              ><p>
                下单数(包):<span class="colorbalck">{{ reportTargetAll.czjPostOrderNumYear }}</span>
              </p>
            </van-col>
            <van-col span="24"
              ><p>
                下单销售额:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.czjPostOrderPriceYear)
                }}</span>
              </p></van-col
            >
            <van-col span="24"
              ><p>
                下单率:<span class="colorbalck">{{ reportTargetAll.czjPostOrderRateYear }}%</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 v-if="!GZQuota" title="拜访数据(实时)" name="7">
          <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.inVisitAct }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                线内拜访点数:<span class="colorbalck">{{ reportTargetAll.inVisitActMonth }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                计划拜访点数:<span class="colorbalck">{{ reportTargetAll.visitTarget }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                计划拜访点数:<span class="colorbalck">{{ reportTargetAll.coverStoreNum }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                线内拜访率:<span class="colorbalck">{{ reportTargetAll.inVisitRate }}%</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                线内拜访率:<span class="colorbalck">{{ reportTargetAll.inVisitMonthRate }}%</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                整体拜访数:<span class="colorbalck">{{ reportTargetAll.allVisitNum }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                整体拜访率:<span class="colorbalck">{{ reportTargetAll.allVisitMonthRate }}%</span>
              </p></van-col
            >
          </van-row>
        </van-collapse-item>
        <van-collapse-item title="今日拜访照片" name="10" v-if="reportTarget.photos">
          <div v-for="(item, index) in reportTarget.photos" :key="index">
            <p style="margin-bottom: 10px; margin-top: 0">{{ item.taskName }}</p>
            <van-row gutter="10" class="visitIMG1">
              <van-col
                span="6"
                style="padding-bottom: 10px"
                @click="pviewFn(index, indexImg)"
                v-for="(itemImg, indexImg) in item.photos"
                :key="indexImg">
                <img :src="itemImg.fileUrl" alt="" />
              </van-col>
            </van-row>
          </div>
        </van-collapse-item>
      </van-collapse>
      <div class="contentContainer">
        <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">报备数量</p>-->
          <!--          <div style="padding: 10px 0">-->
          <!--            <van-field readonly v-model="reportingNum" type="digit"  />-->
          <!--          </div>-->
          <p class="contentContainerTitle">今日TUC成功报备数量</p>
          <div style="padding: 10px 0">
            <van-field readonly v-model="tucReportingSuccessNum" type="digit" />
          </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>
      </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 v-if="reportTarget.reportRemarks != null">
          <div v-for="(item, index) in reportTarget.reportRemarks" :key="index">
            <p class="contentContainerTitle">{{ item.postName }}-{{ item.nickName }}的点评</p>
            <div style="padding: 10px 0">
              <van-field
                v-model="item.remarkContent"
                rows="4"
                autosize
                readonly
                type="textarea"
                placeholder="请输入评语" />
            </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"
            placeholder="请输入点评" />
        </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>
</template>

<script>
import history from '@/assets/Icon/history.png';
import envelopes from '@/assets/envelopes.png';
import { userTodayPlanNum, insertRemark, getDetailById, updateReport } from '@/api/index';
import axios from 'axios';
import { ImagePreview } from 'vant';

export default {
  name: 'daily',
  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: {},
      reportContents: [{ dayContent: '' }],
      reportTarget: {},
      successContent: '',
      managerRemarkContent: '',
      projectFollowNum: '',
      reportingNum: '',
      tucReportingSuccessNum: '',
      isDiy: false,
      type: '-1',
      imgList: [],
      JZQuota: false,
      titlejz: '',
      GZQuota: false,
      saptitle: '业绩目标SAP(千元)',
      //
    };
  },
  created() {
    this.powerGrade = localStorage.getItem('powerGrade');
    this.isDiy = localStorage.getItem('isDiy');
    this.getDetailById();
  },
  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.num = 0;
    this.userTodayPlanNum();
  },
  methods: {
    pviewFn(val, imgVal) {
      var imgList = [];
      var photos = this.reportTarget.photos[val].photos;
      for (let i = 0; i < photos.length; i++) {
        imgList.push(photos[i].fileUrl);
      }
      ImagePreview({ images: imgList, startPosition: imgVal });
    },
    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.$route.query.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);
        }
      });
    },
    // submint(){
    //   let loading1 = this.$toast.loading({
    //     duration: 0,
    //     message: '数据提交中...',
    //     forbidClick: true,
    //   });
    //   if(this.managerRemarkContent.trim()==""){
    //     this.$toast("点评内容未填写")
    //     return false
    //   }
    //   this.reportTarget.managerRemarkContent=this.managerRemarkContent
    //   this.reportTarget.status=4
    //   insertRemark(this.reportTarget).then(res=>{
    //     loading1.clear()
    //     if(res.code==200){
    //       this.$dialog.alert({
    //         title: '系统提示',
    //         message: '提交成功',
    //       }).then(() => {
    //         this.getDetailById()
    //       });
    //     }else{
    //       this.$toast.fail(res.msg)
    //     }
    //   })
    // },
    getDetailById() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      getDetailById({ reportId: this.$route.query.reportId }).then((res) => {
        loading1.clear();
        this.GZQuota = false;
        this.JZQuota = 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;
        }
        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;
          }
        } else {
          this.Content = '';
          this.Content2 = '';
        }
        this.reportContents = res.data.reportContents;
        var imgList = [];
        if (res.data.photos != null) {
          for (var k = 0; k < res.data.photos.length; k++) {
            imgList.push(res.data.photos[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() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
.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;
}
</style>
<style>
.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;
}
</style>