<template>
  <div class="app-container">
    <div v-show="!isShowDetail">
      <el-page-header @back="goBack" content="个人SOP详情"></el-page-header>
      <!-- <el-divider></el-divider> -->

      <el-card shadow="never" style="margin-top: 20px">
        <div slot="header" class="clearfix">
          <span>规则信息</span>
        </div>
        <div class="top-content">
          <div class="item">
            <div class="label">规则名称：</div>
            <div class="value">{{ruleName}}</div>
          </div>
          <div class="item">
            <div class="label">创建人：</div>
            <div class="value">{{createBy}}</div>
          </div>
          <div class="item">
            <div class="label">创建时间：</div>
            <div class="value">{{createTime}}</div>
          </div>
          <div class="item">
            <div class="label">使用人员：</div>
            <div class="users">
              <div class="it" v-for="(item, index) in customList" :key="index">
                <!-- <img :src="item.avatar" alt="" /> -->
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>

      <el-card shadow="never" style="margin-top: 20px">
        <div slot="header" class="clearfix">
          <span>推送内容</span>
        </div>
        <div class="bottom-content">
          <div
            class="item"
            v-for="(item, index) in pushContentList"
            :key="index"
          >
            <div class="title">
              客户添加企业微信客服当天, {{item.pushMin}}分钟后推送消息【{{ item.taskName }}】
            </div>
            <div class="wrap">
              <div class="tips">发送内容（共1条）</div>
              <div class="content">
                <div v-if="item.sendType === 1||item.sendType === 5" class="text">
                  {{ item.sendText }}
                </div>
                <el-image
                  v-else-if="item.sendType === 2"
                  class="img"
                  :src="item.sendFile"
                  :preview-src-list="[item.sendFile]"
                ></el-image>
                <video
                  v-else-if="item.sendType === 3"
                  class="video"
                  :src="item.sendFile"
                  controls
                ></video>
                <div
                  v-else-if="item.sendType === 4"
                  class="box1"
                  @click="openWeb(item.sendFile)"
                >
                  <div class="left">
                    <div class="name ellipsis">{{ item.sendUrlName }}</div>
                    <div class="desc ellipsis-2">{{ item.sendText }}</div>
                  </div>
                  <img :src="item.sendFile" alt="" />
                </div>
                <!-- <div v-else-if="item.sendType === 5" class="box1">
                  <div class="left">
                    <div class="name ellipsis">{{ item.sendUrlName }}</div>
                  </div>
                  <img :src="item.sendFile" alt="" />
                </div> -->
                <div v-else-if="item.sendType === 6" class="box2">
                  <img
                    src="@/assets/common/word.png"
                    v-if="checkFileType(item.sendFile) == 'word'"
                  />
                  <img
                    src="@/assets/common/excel.png"
                    v-if="checkFileType(item.sendFile) == 'excel'"
                  />
                  <img
                    src="@/assets/common/ppt.png"
                    v-if="checkFileType(item.sendFile) == 'ppt'"
                  />
                  <img
                    src="@/assets/common/pdf.png"
                    v-if="checkFileType(item.sendFile) == 'pdf'"
                  />
                  <div class="name ellipsis">{{ item.sendFileName }}</div>
                </div>
              </div>
            </div>
            <div class="btns">
              <div class="btn" @click="toDetail(item)">
                <i class="el-icon-document"></i>详情
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <SopRuleDetail
      :listItem="queryItem"
      v-if="isShowDetail"
      @backListFormDetail="backList"
      
    />
  </div>
</template>

<script>
import SopRuleDetail from "@/views/marketing/components/sop-rule-detail";
import { getSopDetal } from "@/api/marketing";

export default {
  components: {
    SopRuleDetail,
  },
  data() {
    return {
      id: null,
      ruleName: "", // 规则名称
      createBy: "", // 创建人
      createTime: "", // 创建时间
      customList: [],
      pushContentList: [],

      queryItem: {},
    };
  },
  created() {
    const { id } = this.$route.query;

    this.id = id;
    console.log(this.id);
    // this.getDetail();
    this.getSopDetal();
  },
  computed: {
    isShowDetail() {
      return this.queryItem.hasOwnProperty("id");
    },
  },
  methods: {
    // 个人sop-详情
    getSopDetal() {
      const params = {
        id: this.id,
      };
      getSopDetal(params).then((res) => {
        console.log(res.data);
        if(res.data.enterpriseWechatWorkers==null) return ''

        
        this.customList = res.data.enterpriseWechatWorkers;
        this.pushContentList = res.data.sopPushTask;
        console.log( this.pushContentList)
        this.ruleName = res.data.ruleName;
        this.createBy = res.data.createBy;
        this.createTime = res.data.createTime;
      });
    },
    // 返回主页
    goBack() {
      this.$router.go(-1);
    },

    // getDetail() {
    //   this.customList = [
    //     {id: 1, avatar: 'https://wework.qpic.cn/bizmail/3HM1dLKwUD1Cggzs5C5wrwibsIVkw8Au82vulP5ibc8JgqorPUiczR4dA/0', name: '罗颖'},
    //     {id: 1, avatar: 'https://wework.qpic.cn/bizmail/3HM1dLKwUD1Cggzs5C5wrwibsIVkw8Au82vulP5ibc8JgqorPUiczR4dA/0', name: '罗颖'},
    //   ]

    //   this.pushContentList = [
    //     {id: 1, type: 1, title: '测试数据1文本', content: '详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述', fileUrl: ''},
    //     {id: 2, type: 2, title: '测试数据2图片', content: '', fileUrl: 'https://wework.qpic.cn/bizmail/3HM1dLKwUD1Cggzs5C5wrwibsIVkw8Au82vulP5ibc8JgqorPUiczR4dA/0'},
    //     {id: 3, type: 3, title: '测试数据3视频', content: '', fileUrl: '123.mp4'},
    //     {id: 4, type: 4, title: '测试数据4网页', content: '', fileUrl: 'https://wework.qpic.cn/bizmail/3HM1dLKwUD1Cggzs5C5wrwibsIVkw8Au82vulP5ibc8JgqorPUiczR4dA/0', webUrl: 'https://www.baidu.com/', webName: '百度', webDesc: '查资料上百度'},
    //     {id: 5, type: 5, title: '测试数据5小程序', content: '', fileUrl: 'https://wework.qpic.cn/bizmail/3HM1dLKwUD1Cggzs5C5wrwibsIVkw8Au82vulP5ibc8JgqorPUiczR4dA/0', appUrl: '/page/index/index', appName: '小程序'},
    //     {id: 6, type: 6, title: '测试数据6文件', content: '', fileUrl: 'a.pdf', fileName: '文件名'},
    //   ]
    // },

    // 检查文件类型
    checkFileType(url) {
      if (!url) return "";
      const fileSuffix = url.substring(url.lastIndexOf(".") + 1);
      const wordList = ["doc", "docx", "dot", "wps", "wpt"];
      const excelList = ["xls", "xlsx", "xlt", "et", "ett"];
      const pptList = ["ppt", "pptx", "dps", "dpt", "pot", "pps"];
      const pdfList = ["pdf"];

      if (wordList.indexOf(fileSuffix) >= 0) {
        return "word";
      } else if (excelList.indexOf(fileSuffix) >= 0) {
        return "excel";
      } else if (pptList.indexOf(fileSuffix) >= 0) {
        return "ppt";
      } else if (pdfList.indexOf(fileSuffix) >= 0) {
        return "pdf";
      } else {
        return "";
      }
    },

    // 打开网页
    openWeb(url) {
      window.open(url);
    },

    // 进入详情
    toDetail(item) {
      console.log(item)
      this.queryItem = item;
   
    },

    backList() {
      this.queryItem = {};
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-card__header {
  font-weight: 600;
}
.top-content {
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    font-size: 14px;
    &:last-child {
      margin-bottom: 0;
      align-items: flex-start;
      .label {
        line-height: 36px;
      }
    }
    .label {
      color: rgba(0, 0, 0, 0.45);
    }
    .value {
      color: rgba(0, 0, 0, 0.95);
    }
    .users {
      display: flex;
      align-items: center;
      .it {
        margin-right: 10px;
        margin-bottom: 10px;
        padding: 4px 12px;
        border: 1px solid rgb(228, 231, 237);
        border-radius: 2px;
        display: flex;
        align-items: center;
        img {
          width: 26px;
          height: 26px;
          margin-right: 6px;
          border-radius: 2px;
        }
        span {
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
  }
}
.bottom-content {
  .item {
    position: relative;
    margin-bottom: 20px;
    .btns {
      position: absolute;
      bottom: 0;
      left: 660px;
      display: flex;
      .btn {
        padding: 4px;
        margin-right: 5px;
        cursor: pointer;
        border-radius: 2px;
        background-color: #f2f2f2;
        font-size: 12px;
        i {
          font-size: 14px;
          margin-right: 2px;
        }
      }
    }
    .title {
      color: #222;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    .wrap {
      padding: 16px;
      background: #f2f2f2;
      width: 650px;
      .tips {
        font-size: 14px;
        margin-bottom: 10px;
      }
      .content {
        padding: 10px;
        background: #fff;
        .text {
          font-size: 14px;
          color: #666;
        }
        .img {
          width: 200px;
          height: 200px;
          display: block;
        }
        .video {
          width: 200px;
          height: 200px;
          display: block;
        }
        .box1 {
          display: flex;
          padding: 10px;
          align-items: center;
          border: 1px solid #e4e7ed;
          cursor: pointer;
          .left {
            flex: 1;
            margin-right: 10px;
            .name {
              color: #222;
              font-weight: 600;
            }
            .desc {
              color: #999;
              font-size: 12px;
              margin-top: 10px;
            }
          }
          img {
            width: 40px;
            height: 40px;
            display: block;
          }
        }
        .box2 {
          display: flex;
          padding: 10px;
          align-items: center;
          border: 1px solid #e4e7ed;
          cursor: pointer;
          img {
            width: 40px;
            height: 40px;
            display: block;
          }
          .name {
            flex: 1;
            color: #222;
            font-weight: 600;
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>