<template>
  <div class="detail">
    <div class="task">
      <div class="task_title">群发客户群</div>
      <div class="task_content">
        <div class="item">
          <span>任务名称</span>
          <span>{{ data.taskTitle }}</span>
        </div>
        <div class="item">
          <span>创建人</span>
          <span>
            <AiOpenData type="userName" :openid="data.createUserId"></AiOpenData>
          </span>
        </div>
        <div class="item" v-if="data.enableExamine == 1">
          <span>审批人</span>
          <span>
            <span v-for="(item, index) in approver" :key="index" style="color: #333;">
              <AiOpenData type="userName" :openid="item.examineUserId" style="display: inline-block"></AiOpenData>
              <span v-if="approver.length>1">、</span>
            </span>
          </span>
        </div>
        <div class="item">
          <span>所在部门</span>
          <span style="display: flex;">
            <div v-if="data.createUserDept"><AiOpenData type="departmentName" :openid="data.createUserDept" style="display: inline-block;"></AiOpenData></div>
            <!-- <div v-if="data.createUserSecondDept"><AiOpenData type="departmentName" :openId="data.createUserSecondDept" style="display: inline-block"></AiOpenData></div> -->
          </span>
        </div>
        <div class="item">
          <span>群发时间</span>
          <span>{{ data.choiceTime }}</span>
        </div>
      </div>
      <div class="task_results" v-if="data.enableExamine == 1">
        <img v-if="data.status == 1" src="./images/refuse.png" alt="">
        <img v-if="data.status == 2" src="./images/pass.png" alt="">
      </div>
    </div>
    <div class="info">
      <div class="scope">
        <span>群发范围</span>
        <span v-if="data.sendScope==0">全部{{ data.receiveGroupCount || 0}}个居民群</span>
        <span v-if="data.sendScope==1 || data.sendScope==2">按条件筛选的{{ data.receiveGroupCount || 0}}个居民群</span>
      </div>
      <div class="content">
        <p>群发内容</p>
        <div>
          <!-- 文本 -->
          <div class="textarea" v-show="content.length">{{ content }}</div>
          <!-- 图片 -->
          <div class="pictures" v-show="picList.length">
            <image v-for="(item, index) in picList" :key="index" :src="item.imgPicUrl" @click.stop="previewImages(picList, item.imgPicUrl)"/>
          </div>
          <!-- 视频 -->
          <div class="video" v-show="videoList.length">
            <video v-for="(item, index) in videoList" :key="index" :src="item.imgPicUrl"/>
          </div>
          <!-- 文件 -->
          <div class="file" v-show="fileList.length">
            <div class="file_item" v-for="(item,index) in fileList" :key="index" @click="prevFile(item.sysFile)">
              <img src="./images/files.png" alt="">
              <div>{{ item.sysFile.name }}</div>
            </div>
          </div>
          <!-- 网页 -->
          <div class="webpage" v-show="webpage.length">
            <p>链接地址</p>
            <a v-for="(item, index) in webpage" :key="index" :href="item.linkUrl">
              <div v-if="item.linkTitle">{{item.linkTitle}}</div>
              <div v-else>{{ item.linkUrl }}</div>
            </a>
          </div>
          <!-- 小程序 -->
          <div class="miniapp" v-show="miniapp.length">
            <p>小程序</p>
            <div v-for="(item, index) in miniapp" :key="index">{{item.mpTitle}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn" v-if="data.status==0 && data.haveExaminPower">
      <div class="refuse" @click="refuseBtn">审核拒绝</div>
      <div class="pass" @click="passBtn">审核通过</div>
    </div>
  </div>
</template>

<script>
import { mapState ,mapActions } from "vuex";
export default {
  data() {
    return {
      id: "",
      data: {},
      content: '',
      picList: [],
      videoList: [],
      fileList: [],
      webpage: [],
      miniapp: [],
      pictres: [],
      options: '',
      approver: [],  //审批人
    } 
  },
  onLoad(o) {
    this.id = o.id
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    getDetail() {
      this.$http.post(`/app/appmasssendingtask/queryDetailById?id=${this.id}`).then(res=> {
        if (res?.data) {
          this.data = res.data
          this.content = res.data.contents.filter(v=> v.msgType == 0)?.[0].content
          this.picList = res.data.contents.filter(v=> v.msgType == 1)
          this.videoList = res.data.contents.filter(v=> v.msgType == 2)
          this.fileList = res.data.contents.filter(v=> v.msgType == 3)
          this.webpage = res.data.contents.filter(v=> v.msgType == 4)
          this.miniapp = res.data.contents.filter(v=> v.msgType == 5)
          this.approver = res.data.examines
          // if(res.data.status==1) {  // 拒绝
          //   this.approver = res.data.examines.filter(e=> e.examineStatus == 2)
          // } else {  // 通过
          //   this.approver = res.data.examines
          // }
        }
      })
    },
    previewImages(images, img) {
      uni.previewImage({
        urls: images.map(v => v.imgPicUrl),
        current: img
      })
    },
    ...mapActions(['previewFile']),
    prevFile(file) {
      this.$loading()
      this.previewFile({ ...file }).then(()=>{
        this.$hideLoading()
      })
    },
    // 拒绝
    refuseBtn() {
      this.pass = 0
      this.$confirm('确认审核拒绝该任务？').then(() => {
        this.examine()
      })
    },
    // 通过
    passBtn() {
      this.pass = 1
      this.$confirm('确认审核通过该任务？').then(() => {
        this.examine()
      })
    },
    examine() {
      this.$http.post(`/app/appmasssendingtask/examine`,null,{
        params: {
          pass: this.pass,
          id: this.id,
          options: this.options
        }
      }).then(res => {
        if(res?.code == 0) {
          if(this.pass == 0) {
            this.$u.toast('任务已拒绝')
          } else if(this.pass == 1) {
            this.$u.toast('任务审核通过')
          }
          this.getDetail()
        }
      }).catch(()=> {
      })
    },
  },
  onShow() {
    document.title = "群发审批"
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.detail {
  padding: 32px 32px 140px 32px;
  box-sizing: border-box;
  .task {
    position: relative;
    margin-bottom: 24px;
    background: #FFF;
    border-radius: 8px;
    box-shadow: inset 0px -1px 0px 0px #DDDDDD;
    .task_title {
      padding: 26px 32px;
      box-sizing: border-box;
      border-bottom: 2px solid #DDDDDD;
    }
    .task_content {
      padding: 0 32px 26px 32px;
      box-sizing: border-box;
      .item {
        display: flex;
        padding-top: 26px;
        box-sizing: border-box;
        span:first-child {
          width: 160px;
          color: #999999;
        }
        span:last-child {
          width: calc(100% - 160px);
        }
      }
    }
    .task_results {
      position: absolute;
      right: 30px;
      top: 30px;
      img {
        width: 160px;
        height: 130px;
      }
    }
  }

  .info {
    background: #FFF;
    border-radius: 8px;
    padding: 26px 32px;
    box-sizing: border-box;
    .scope {
      display: flex;
      margin-bottom: 16px;
      span:first-child {
        width: 160px;
        color: #999;
      }
      span:last-child {
        width: calc(100% - 160px);
      }
    }
    .content {
      p {
        color: #999;
      }
      .textarea,
      .pictures,
      .video,
      .file,
      .webpage,
      .miniapp {
        background: #F9F9F9;
        border-radius: 4px;
        padding: 20px;
        box-sizing: border-box;
        margin-top: 26px;
      }
      .pictures {
        margin-top: 16px;
        image {
          width: 190px;
          height: 190px;
          margin-right: 4px;
          margin-bottom: 4px;
        }
        image:nth-child(3n) {
          margin-right: 0;
        }
      }
      .video {
        video {
          height: 300px;
        }
      }
      .file {
        .file_item {
          display: flex;
          align-items: center;
          img {
            width: 96px;
            height: 96px;
          }
        }
      }
    }
  }

  .btn {
    position: fixed;
    display: flex;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 112px;
    line-height: 112px;
    font-size: 32px;
    z-index: 9;
    .refuse {
      width: 40%;
      height: 100%;
      background: #FFF;
      color: #FF4466;
      text-align: center;
    }
    .pass {
      width: 60%;
      height: 100%;
      background: #3975C6;
      color: #FFF;
      text-align: center;
    }
  }
}
</style>