<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
  <title>任务详情</title>
  <!-- 引入样式文件 -->
  <link rel="stylesheet"
    href="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1758012584633/vant.css" />
  <link rel="stylesheet" href="../css/page-return.css">
    <!-- 必须先引入vue，  后使用vant-ui -->
  <script
    src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742017957144/vue.js"></script>
  <!-- 引入vant的组件库-->
  <!-- 引入 Vant 的 JS 文件 -->
  <script
    src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1758012748487/vant.min.js"></script>

  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
  <script src="../js/page-return.js"></script>
  <!-- <script src="../js/vconsole.min.js"></script>
    <script>
  		  var vConsole = new window.VConsole();
  		</script> -->
</head>
<style>
  body {
    margin: 0;
    padding: 0;
  }

  .box {
    width: 100vw;
    min-height: 100vh;
    box-sizing: border-box;
    background: #F7F9FC;
  }

  .page5 {
    width: 100vw;
    box-sizing: border-box;
  }

  .task_content {
    padding: 15px 10px;
  }

  .task_item {
    width: 100%;
    background: #FFFFFF;
    border-radius: 15px;
    box-sizing: border-box;
    padding: 15px 10px;
  }

  .task_item_title {
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    font-size: 16px;
    color: #222222;
    line-height: 20px;
  }

  .client_tag {
    font-size: 12px;
    line-height: 17px;
  }


  .status1 {
    color: #136DFB;
  }

  .status2 {
    color: #FFA041;
  }

  .status3 {
    color: #FF4141;
  }
  .detail_item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .time_item {
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 17px;
    padding-top: 12px;
  }
  .label {
    color: #999999;
  }
  .isAll_type {
    color: #136DFB;
  }
  .time {
    color: #666666;
  }
  .item_space {
    margin-right: 20px;
  }
  .mem_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0 10px;
  }
  .mem_title_left {
    font-size: 14px;
    color: #222222;
    line-height: 20px;
    padding-left: 5px;
    position: relative;
    display: flex;
    align-items: center;
  }
  .mem_title_left::after {
    position: absolute;
    left: 0;
    content: '';
    width: 2px;
    height: 12px;
    background: #136DFB;
    border-radius: 1px;
  }
  .mem_title_right {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #999999;
    line-height: 17px;
  }
  .mem_title_right img{
    width: 16px;
    height: 16px;
  }
  .mem_tag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    max-height: 52px;
    overflow: hidden;
  }
  .mem_tag span {
    padding: 2px 8px;
    background: rgba(19,109,251,0.05);
    border-radius: 5px;
    font-size: 12px;
    line-height: 17px;
    color: #136DFB;
  }
  .send_detail {
    height: calc(100vh - 204px);
    background: #FFFFFF;
    border-radius: 15px 15px 0 0;
  }
  .van-tabs .van-tabs__wrap{
    border-radius: 15px 15px 0 0;
  }
  .van-tabs--line .van-tabs__wrap {
    height: 40px;
  }
  .van-tabs__nav {
    padding: 0 25px 15px;
  }
  .van-tab--active {
    color: #222222 !important;
  }
  .van-tab {
    color: #999999;
  }
  .send_centent {
    padding: 20px 15px 39px;
  }
  .send_text {
    font-size: 14px;
    color: #222222;
    line-height: 20px;
    padding-bottom: 10px;
  }
  .send_contentText {
    font-size: 14px;
    line-height: 23px;
    color: #666666;
    padding-bottom: 20px;
  }
  .img_list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    padding: 0 5px 10px;
  }
  .img_list img {
    min-width: 105px;
    height: 140px;
    border-radius: 10px;
    object-fit: cover;
  }
  .video_container {
    position: relative;
    width: 105px;
    height: 140px;
  }
  .play_button {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .matters_item {
    width: 163px;
    height: 60px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #EFEFEF;
  }
  .matters_item img {
    width: 40px;
    height: 40px;
    margin-right: 8px;
  }
  .matters_item_info {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #999999;
    line-height: 17px;
  }
  .matters_item_title {
    font-size: 12px;
    color: #222222;
    line-height: 17px;
    width: 96px; /* 必须设置宽度 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-bottom: 4px;
  }
  .matters_list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .mem_centent {
    padding: 10px 15px;
  }
  .filter_list {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: 100%;
    overflow-x: auto;
    gap: 10px;
  }
  .filter_span {
    height: 25px;
    box-sizing: border-box;
    font-size: 12px;
    color: #999999;
    padding: 4px 12px;
    background: #FAFAFA;
    border-radius: 10px;
  }
  .active {
    height: 25px;
    box-sizing: border-box;
    font-size: 12px;
    color: #1677FF;
    background: rgba(22,119,255,0.1);
    padding: 4px 12px;
    border-radius: 10px;
  }
  .send_num_data {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 15px 5px 10px;
    font-size: 12px;
    color: #222222;
    line-height: 17px;
  }
  .send_num_data_item {
    width: 70%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .fresh_data {
    display: flex;
    font-weight: 400;
    font-size: 12px;
    color: #136DFB;
  }
  .fresh_data img {
    width: 16px;
    height: 16px;
    margin-right: 2px;
  }
  .color1 {
    color: #1677FF;
    padding-right: 20px;
  }
  .color2 {
    color: #FFA041;
    padding-right: 20px;
  }
  .color3 {
    color: #FF4E4E;
    padding-right: 20px;
  }
  .color4 {
    color: #7D97BF;
    padding-right: 20px;
  }
  .send_mem_item {
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    background: #FAFAFA;
    border-radius: 15px;
    box-sizing: border-box;
    margin-bottom: 10px;
  }
  .send_mem_name {
    font-weight: 500;
    font-size: 14px;
    color: #222222;
    line-height: 20px;
  }
  .send_mem_data {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #999999;
    line-height: 17px;
  }
  .send_mem_time {
    font-size: 12px;
    color: #999999;
    line-height: 17px;
  }
</style>

<body>
  <div id="box" class="box">
    <div class="page5">
      <div class="task_content">
        <div class="task_item">
          <div class="task_item_title">
            <div>{{formValidate.name}}</div>
            <div v-if="formValidate.isNotify === -2" class="client_tag status3">无符合条件客户</div>
            <div v-else-if="formValidate.isNotify === -1" class="client_tag status3">创建失败</div>
            <div v-else-if="formValidate.isNotify === 0" class="client_tag status2">待通知</div>
            <div v-else-if="formValidate.isNotify === 1" class="client_tag status1">已通知</div>
            <div v-else-if="formValidate.isNotify === 3" class="client_tag status2">创建中</div>
          </div>
          <div class="detail_item">
            <div class="time_item item_space">
              <div class="label">群发客户：</div>
              <div class="isAll_type">{{ formValidate.isAll ? '全部客户' : '部分客户' }}</div>
            </div>
            <div class="time_item">
              <div class="label">创建时间：</div>
              <div class="time">{{ formValidate.createdTime }}</div>
            </div>
            <div class="time_item">
              <div class="label">通知时间：</div>
              <div class="time">{{ formValidate.notifyTime }}</div>
            </div>
          </div>
          <div class="mem_title">
            <div class="mem_title_left">生效成员</div>
            <div class="mem_title_right" @click="handleShowClient">
              <div>全部成员</div>
              <img src="../img/qw/more_icon.png" alt="">
            </div>
          </div>
          <div class="mem_tag">
            <span v-for="(item, index) in formValidate.memberList" :key="index">{{item.name}}</span>
          </div>
        </div>
      </div>
      <div class="send_detail">
        <van-tabs v-model="activeTab" ref="tabs" color="#1677FF" line-width="16px" line-height="3px" @change="handleChange">
          <van-tab title="群发内容" name="群发内容"></van-tab>
          <van-tab title="成员详情" name="成员详情"></van-tab>
          <van-tab title="客户详情" name="客户详情"></van-tab>
        </van-tabs>
        <div class="send_centent" v-if="activeTab === '群发内容'">
          <div class="send_text">文本:</div>
          <div class="send_contentText">{{formValidate.contentText}}</div>
          <div class="send_text">素材:</div>
          <template v-if="formValidate.ctOthers && formValidate.ctOthers.length > 0">
            <div class="img_list" v-if="formValidate.ctOthers[0].matterType === 1">
              <img :src="item.imgUrl"  v-for="(item, index) in formValidate.ctOthers" :key="index" alt="">
            </div>
            <div class="video_container" v-if="formValidate.ctOthers[0].matterType === 2">
              <video id="myVideo" style="width: 105px; height: 140px;" :src="formValidate.ctOthers[0].videoPath"></video>
              <img id="playButton" class="play_button" src="../img/qw/play_icon.png" alt="" @click="playPause">
            </div>
            <div class="matters_item" v-if="formValidate.ctOthers[0].matterType === 5">
              <img src="../img/qw/link.png" alt="">
              <div class="matters_item_info">
                <div class="matters_item_title">{{formValidate.ctOthers[0].linkTitle}}</div>
                <div>自定义链接</div>
              </div>
            </div>
          </template>
          <template v-if="formValidate.matters && formValidate.matters.length > 0">
            <div class="img_list" v-if="matterImgList.length > 0">
              <img :src="item.headUrl" v-for="(item, index) in matterImgList" :key="index" alt="">
            </div>
            <div class="matters_list">
              <div class="matters_item" v-for="(item, index) in matterOthersList" :key="index">
                <img v-if="item.contentType === 0" src="../img/qw/article.png" alt="">
                <img v-else-if="item.contentType === 2" src="../img/qw/form.png" alt="">
                <img v-else-if="item.contentType === 3" src="../img/qw/file.png" alt="">
                <img v-else src="../img/qw/link.png" alt="">
                <div class="matters_item_info">
                  <div class="matters_item_title">{{item.title}}</div>
                  <div>{{matterTypeList.find(type => type.contentType === item.contentType)?.name || '未知类型'}}</div>
                </div>
              </div>
            </div>
          </template>
        </div>
        <div class="mem_centent" v-if="activeTab === '成员详情'">
          <div class="filter_list">
            <span :class="filterIndex === null ? 'active' : 'filter_span'" @click="handleFilter('全部')">全部</span>
            <span :class="filterIndex === 1 ? 'active' : 'filter_span'" @click="handleFilter(1)">已发送</span>
            <span :class="filterIndex === 0 ? 'active' : 'filter_span'" @click="handleFilter(0)">未发送</span>
            <span :class="filterIndex === 2 ? 'active' : 'filter_span'" @click="handleFilter(2)">发送失败</span>
            <span :class="filterIndex === -1 ? 'active' : 'filter_span'" @click="handleFilter(-1)">无客户可发送</span>
          </div>
          <div class="send_num_data">
            <div class="send_num_data_item">
              <div>已发送：<span class="color1">{{memberExtra.sendSuccess}}</span></div>
              <div>未发送：<span class="color2">{{memberExtra.unSend}}</span></div>
              <div>发送失败：<span class="color3">{{memberExtra.sendFail}}</span></div>
            </div>
            <div class="fresh_data" @click="freshClientData">
              <img src="../img/qw/fresh.png" alt="">
              <span>刷新</span>
            </div>
          </div>
          <div class="send_mem_list">
            <div class="send_mem_item" v-for="(item, index) in sendMemberList" :key="index">
              <div class="send_mem_name">{{item.name}}</div>
              <div class="send_mem_data">
                发送人数：<span class="color1">{{item.sendNum}}</span>
                发送状态：<span class="color1" v-if="item.sendStatus === -1">无可发送客户</span>
                <span class="color2" v-if="item.sendStatus === 0">未发送</span>
                <span class="color1" v-if="item.sendStatus === 1">已发送</span>
                <span class="color3" v-if="item.sendStatus === 2">发送失败</span>
              </div>
              <div class="send_mem_time">发送时间：<span style="color: #666666;">{{timeFormat(item.sendTime)}}</span></div>
            </div>
          </div>
        </div>
        <div class="mem_centent" v-if="activeTab === '客户详情'">
          <div class="filter_list">
            <span :class="filterIndex === null ? 'active' : 'filter_span'" @click="handleFilter('全部')">全部</span>
            <span :class="filterIndex === 1 ? 'active' : 'filter_span'" @click="handleFilter(1)">已发送</span>
            <span :class="filterIndex === 0 ? 'active' : 'filter_span'" @click="handleFilter(0)">未发送</span>
            <span :class="filterIndex === 2 ? 'active' : 'filter_span'" @click="handleFilter(2)">发送失败</span>
            <span :class="filterIndex === -1 ? 'active' : 'filter_span'" @click="handleFilter(-1)">无客户可发送</span>
          </div>
          <div class="send_num_data">
            <div class="send_num_data_item">
              <div>已接收客户：<span class="color1">{{clientExtra.sendSuccess}}</span></div>
              <div>未接收客户：<span class="color2">{{clientExtra.unSend}}</span></div>
              <div>接收失败客户：<span class="color3">{{clientExtra.sendFail}}</span></div>
            </div>
            <div class="fresh_data" @click="freshClientData">
              <img src="../img/qw/fresh.png" alt="">
              <span>刷新</span>
            </div>
          </div>
          <div class="send_mem_list">
            <div class="send_mem_item" v-for="(item, index) in clientList" :key="index">
              <div class="send_mem_name">{{item.clientName}}</div>
              <div class="send_mem_data">
                所属成员：<span class="color1">{{item.memberName}}</span>
                接收状态：<span class="color1" v-if="item.sendStatus === -1">无可发送客户</span>
                <span class="color2" v-if="item.sendStatus === 0">未发送</span>
                <span class="color1" v-if="item.sendStatus === 1">已发送</span>
                <span class="color3" v-if="item.sendStatus === 2">发送失败</span>
              </div>
              <div class="send_mem_time">接收时间：<span style="color: #666666;">{{timeFormat(item.recvTime)}}</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部返回栏 -->
    <page-return></page-return>
  </div>
</body>
<script>
  new Vue({
    el: '#box',
    data() {
      return {
        httpUrl: '',
        bId: null,
        env: '',
        token: null,
        tenancyId: null,
        userId: null,
        taskId: null,
        keyword: '',
        formValidate: {
          name: '',
          memberList: [],
          contentText: '',
          ctOthers: [],
          matters: [],
          isAll: 1,
          id: null,
          type: 1,
          sendTime: '',
          notifyTime: '',
          createdTime: ''
        },
        activeTab: '群发内容',
        matterImgList: [],
        matterOthersList: [],
        matterTypeList: [
          { contentType: 0, name: '文章'},
          { contentType: 2, name: '表单'},
          { contentType: 3, name: '文件'},
          { contentType: 4, name: '外部链接' },
          { contentType: 15, name: '视频'},
          { contentType: 16, name: '视频链接' },
          { contentType: 17, name: '图集链接' },
        ],
        filterIndex: null,
        memberExtra: {
          sendSuccess: null,
          unSend: null,
          sendFail: null,
        },
        sendMemberList: [],
        clientExtra: {
          sendSuccess: null,
          unSend: null,
          sendFail: null,
        },
        clientList: [],
      }
    },
    created() {
      this.bId = this.getQueryParam('bId')
      this.env = this.getQueryParam('env')

      if (!this.env || this.env === 'prod') {
        this.httpUrl = 'https://wlapi.wefanbot.com'
      } else {
        this.httpUrl = 'http://test.wefanbot.com:18993'
      }
      this.token = localStorage.getItem('tokenValue')
      this.tenancyId = localStorage.getItem('tenancyIdValue')
      this.userId = localStorage.getItem('userId')
      this.taskId = this.getQueryParam('id')
      this.getDetail()
    },
    methods: {
      handleChange(tab) {
        this.activeTab = tab
        if (tab === '群发内容') {
          this.getDetail()
        } else if (tab === '成员详情') {
          this.handleMember()
        } else if (tab === '客户详情') {
          this.handleClient()
        }
      },
      // 群发内容
      getDetail() {
        this.matterImgList = []
        this.matterOthersList = []
        const headers = new Headers()
        headers.append('token', this.token)
        headers.append('tenancyId', this.tenancyId)
        headers.append('userId', this.userId)
        fetch(this.httpUrl + `/scrm/v1/wxcp-send/m/findById2?id=${this.taskId}`, {
          method: 'GET',
          headers: headers
        }).then(res => {
          return res.json()
        }).then(result => {
          let { data, code, msg } = result
          if (code === 1) {
            this.formValidate = data
            this.formValidate.createdTime = this.timeFormat(this.formValidate.createdTime)
            this.formValidate.notifyTime = this.timeFormat(this.formValidate.notifyTime)
            if (this.formValidate.matters && this.formValidate.matters.length > 0) {
              this.formValidate.matters.forEach(item => {
                if (item.contentType === 19) {
                  this.matterImgList.push(item)
                } else {
                  this.matterOthersList.push(item)
                }
              })
            }
          } else {
            vant.Toast.fail(msg)
          }
        })
      },
      freshClientData () {
        const headers = new Headers()
        headers.append('token', this.token)
        headers.append('tenancyId', this.tenancyId)
        headers.append('userId', this.userId)
        fetch(this.httpUrl + `/scrm/v1/wxcp-send/m/refresh?id=${this.taskId}`, {
          method: 'GET',
          headers: headers
        }).then(res => {
          return res.json()
        }).then(result => {
          let { data, code, msg } = result
          if (code === 1) {
            vant.Toast.success('刷新成功')
            if (this.activeTab === '客户详情') {
              this.handleClient()
            } else if (this.activeTab === '成员详情') {
              this.handleMember()
            }
          } else {
            vant.Toast.fail(msg)
          }
        })
      },
      // 播放暂停视频
      playPause() {
        const video = document.getElementById('myVideo')
        const playButton = document.getElementById("playButton")
        if (video.paused) {
          video.play()
        } else {
          video.pause()
        }
      },
      // 筛选发送状态
      handleFilter(index) {
        if (index === '全部') {
          this.filterIndex = null
        } else {
          this.filterIndex = index
        }
        if (this.activeTab === '成员详情') {
          this.handleMember()
        } else if (this.activeTab === '客户详情') {
          this.handleClient()
        }
      },
      handleMember() {
        const headers = new Headers()
        headers.append('token', this.token)
        headers.append('tenancyId', this.tenancyId)
        headers.append('userId', this.userId)
        fetch(this.httpUrl + '/scrm/v1/wxcp-send/m/findMembersPage', {
          method: 'post',
          body: JSON.stringify({
            sendId: this.taskId ,
            status: this.filterIndex,
            page: 1,
            pageCount: 1000,
          }),
          headers: {
            'Content-Type': 'application/json',
            'token': this.token,
            'tenancyId': this.tenancyId,
            'userId': this.userId,
          }
        }).then(res => {
          return res.json()
        }).then(result => {
          let { data, code, msg } = result
          if (code === 1) {
            this.memberExtra = data.extra
            this.sendMemberList = data.records || []
          } else {
            vant.Toast.fail(msg)
          }
        })
      },
      handleClient () {
        const headers = new Headers()
        headers.append('token', this.token)
        headers.append('tenancyId', this.tenancyId)
        headers.append('userId', this.userId)
        fetch(this.httpUrl + '/scrm/v1/wxcp-send/m/findClientsPage', {
          method: 'post',
          body: JSON.stringify({
            sendId: this.taskId,
            status: this.filterIndex,
            page: 1,
            pageCount: 1000,
          }),
          headers: {
            'Content-Type': 'application/json',
            'token': this.token,
            'tenancyId': this.tenancyId,
            'userId': this.userId,
          }
        }).then(res => {
          return res.json()
        }).then(result => {
          let { data, code, msg } = result
          if (code === 1) {
            this.clientExtra = data.extra
            this.clientList = data.records || []
          } else {
            vant.Toast.fail(msg)
          }
        })
      },
      handleShowClient() {
        localStorage.setItem('clientData', JSON.stringify(this.formValidate.memberList || []))
        window.location.href = `showClientList.html`
      },
      timeFormat(time, format = 'yyyy-MM-dd hh:mm:ss') {
        if (time === undefined || time === '' || time === null) {
          return '/';
        }

        const date = new Date(time);
        const o = {
          'M+': date.getMonth() + 1, // 月份
          'd+': date.getDate(),      // 日
          'h+': date.getHours(),     // 小时
          'm+': date.getMinutes(),   // 分钟
          's+': date.getSeconds(),   // 秒
          'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
          'S': date.getMilliseconds() // 毫秒
        };

        // 处理年份
        if (/(y+)/.test(format)) {
          format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
        }

        // 处理日期和时间部分
        for (let k in o) {
          if (new RegExp('(' + k + ')').test(format)) {
            let value = o[k];
            let padding = RegExp.$1.length === 1 ? '' : '00'; // 根据格式字符串中的长度决定是否补零
            format = format.replace(RegExp.$1, ('' + value).padStart(padding.length + value.toString().length - value.toString().length, '0'));
          }
        }

        // 如果格式只包含时间部分，移除日期部分可能的占位符
        if (!/(M+|d+)/.test(format)) {
          // 移除任何可能存在的日期占位符（如：'yyyy-MM-dd '）
          format = format.replace(/(\s*-\s*){2}/g, ''); // 移除两个'-'之间的任何内容
          format = format.replace(/^\s*yyyy-\s*/, ''); // 移除开头的'yyyy-'
        }

        // 如果格式只包含日期部分，移除时间部分可能的占位符
        if (!/(h+|m+|s+)/.test(format)) {
          // 移除任何可能存在的时间占位符（如：' hh:mm:ss'）
          format = format.replace(/(\s*:\s*){2}/g, ''); // 移除两个':'之间的任何内容
          format = format.replace(/\s*hh:\s*$/, ''); // 移除结尾的' hh:'
        }

        return format;
      },
      // 截取url中的数据
      getQueryParam(paramName) {
        // 获取当前URL的查询字符串部分  
        const queryString = window.location.search;
        // 创建一个URLSearchParams对象  
        const urlParams = new URLSearchParams(queryString);
        // 返回指定参数的值，如果不存在则返回null  
        return urlParams.get(paramName);
      },
    }
  })   
</script>

</html>