<template>
  <div class="detail-container">
    <el-page-header @back="goBack" content="个人SOP规则详情"></el-page-header>

    <div class="top-container" style="margin-top: 20px">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :lg="12">
          <el-card shadow="never">
            <div slot="header" class="clearfix">
              <span>规则信息</span>
            </div>
            <div class="left-content">
              <div class="item">
                <div class="label">任务名称：</div>
                <div class="value">{{ listItem.taskName }}</div>
              </div>
              <div class="item">
                <div class="label">触发条件：</div>
                <div class="value">添加客户{{ listItem.pushMin }}分钟后</div>
              </div>
              <div class="item">
                <div class="label">创建时间：</div>
                <div class="value">{{ listItem.createTime }}</div>
              </div>
              <div class="item">
                <div class="label">创建人：</div>
                <div class="value">{{ listItem.companyName }}</div>
              </div>
              <div class="item">
                <div class="label">任务状态：</div>
                <div class="value">{{ checkStatus() }}</div>
              </div>
              <div class="item">
                <div class="label">推送类型：</div>
                <div class="value">{{ checkSendType() }}</div>
              </div>
              <div class="item">
                <div class="label">推送内容：</div>
                <div class="content">
                  <div v-if="listItem.sendType === 1||listItem.sendType === 5" class="text">
                    {{ listItem.sendText }}
                  </div>
                  <el-image
                    v-else-if="listItem.sendType === 2"
                    class="img"
                    :src="listItem.sendFile"
                    :preview-src-list="[listItem.sendFile]"
                  ></el-image>
                  <video
                    v-else-if="listItem.sendType === 3"
                    class="video"
                    :src="listItem.sendFile"
                    controls
                  ></video>
                  <div
                    v-else-if="listItem.sendType === 4"
                    class="box1"
                    @click="openWeb(listItem.sendUrl)"
                  >
                    <div class="left">
                      <div class="name ellipsis">
                        {{ listItem.sendUrlName }}
                      </div>
                      <div class="desc ellipsis-2">{{ listItem.sendText }}</div>
                    </div>
                    <img :src="listItem.sendFile" alt="" />
                  </div>
                  <!-- <div v-else-if="listItem.sendType === 5" class="box1">
                    <div class="left">
                      <div class="name ellipsis">
                        {{ listItem.sendUrlName }}
                      </div>
                    </div>
                    <img :src="listItem.sendFile" alt="" />
                  </div> -->
                  <div v-else-if="listItem.sendType === 6" class="box2">
                    <img
                      src="@/assets/common/word.png"
                      v-if="checkFileType(listItem.sendFile) == 'word'"
                    />
                    <img
                      src="@/assets/common/excel.png"
                      v-if="checkFileType(listItem.sendFile) == 'excel'"
                    />
                    <img
                      src="@/assets/common/ppt.png"
                      v-if="checkFileType(listItem.sendFile) == 'ppt'"
                    />
                    <img
                      src="@/assets/common/pdf.png"
                      v-if="checkFileType(listItem.sendFile) == 'pdf'"
                    />
                    <div class="name ellipsis">{{ listItem.sendFileName }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12">
          <el-card shadow="never">
            <div slot="header" class="clearfix">
              <span>任务统计</span>
            </div>
            <div class="right-content">
              <div class="data">
                <div class="content">
                  <div class="item">
                    <div class="num">{{allCount}}</div>
                    <div class="text">总推送量</div>
                  </div>
                  <!-- <div class="item">
                    <div class="num">{{workerCount}}</div>
                    <div class="text">员工执行总数</div>
                  </div> -->
                  <div class="item">
                    <div class="num">{{dayCount}}</div>
                    <div class="text">今日推送数量</div>
                  </div>
                  <!-- <div class="item">
                    <div class="num">{{dayWorkerCount}}</div>
                    <div class="text">今日员工执行总数</div>
                  </div> -->
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <h4 style="margin-top: 30px">客户列表</h4>
    <el-divider></el-divider>

    <div class="screen-container">
      <el-form
        ref="screenForm"
        :model="screenForm"
        label-width="96px"
        size="small"
        label-position="right"
      >
        <el-row :gutter="20">
          <el-col :xs="12" :sm="12" :lg="6">
            <el-form-item label="客户信息" prop="keyword">
              <el-input
                v-model="screenForm.keyword"
                placeholder="请输入客户信息"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="8" >
            <el-form-item label="任务推送时间" prop="pushDate">
              <el-date-picker
                v-model="screenForm.pushDate"
                type="daterange"
                size="small"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6">
            <!-- <el-form-item label="员工执行状态" prop="status">
              <el-select v-model="screenForm.status" placeholder="全部">
                <el-option label="所有状态" value=""></el-option>
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, index) in select_status"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item> -->
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6">
            <!-- <el-form-item label="">
              <el-button size="small" @click="resetScreenForm">清空</el-button>
              <el-button size="small" type="primary" @click="submitScreenForm"
                >搜索</el-button
              >
            </el-form-item> -->
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="table">
      <el-table
        v-loading="listLoading"
        :data="dataList"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        stripe
      >
        <el-table-column
          align="center"
          label="客户"
          prop="externalName"
          min-width="160"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          label="所属员工"
          prop="wechatName"
          min-width="160"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          label="任务推送时间"
          prop="taskTime"
          min-width="160"
          show-overflow-tooltip
        ></el-table-column>
        <!-- <el-table-column
          align="center"
          label="员工执行状态"
          prop="workerStatus"
          min-width="160"
          show-overflow-tooltip
        >
         <template slot-scope="scope">
              {{scope.row.workerStatus==1 ? '执行':'未执行'}}
            </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="员工执行时间"
          prop="workerTime"
          min-width="160"
          show-overflow-tooltip
        ></el-table-column> -->
      </el-table>
    </div>

    <div class="pagination clearfix">
      <div class="fr">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listTotal"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getSopRuleDetal, getSopTaskCount,getSopTaskList } from "@/api/marketing";

export default {
  props: ["listItem"],
  data() {
    return {
      allCount: "", // 总推送数量
      dayCount: "", // 今日推送数量
      dayWorkerCount: "", // 今日员工执行数量
      workerCount: "", // 员工执行数量
      id: null,
      dataList: null, // 列表数据
      listLoading: false, // 列表加载loading
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      screenForm: {
        keyword: "",
        pushDate: "",
        status: "",
      },
      select_status: [
        // 筛选字段 - 状态
        { label: "已执行", value: true },
        { label: "未执行", value: false },
      ],

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

    this.id = id;
    console.log(this.id);
    console.log(this.listItem);
    // this.getDetail();
    this.getSopRuleDetal();
    this.getSopTaskCount();
    this.getSopTaskList()
  },
  methods: {
       // 检查文件类型
    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 "";
      }
    },
    // 个人sop-客户列表
    getSopTaskList(){
      const params={
        pageNum:this.currentPage,
        pageSize:this.pageSize,
          ruleId: this.id,
        taskId: this.listItem.id,

      }
      getSopTaskList(params).then(res=>{
        console.log(res)
        if(res.data.records==[]) {
          this.dataList=[]
        }else{
             this.dataList=res.data.records
        }
       

    
      console.log(this.dataList)
        
      })
    },
    // 个人sop-任务统计
    getSopTaskCount() {
      const params = {
        ruleId: this.id,
        taskId: this.listItem.id,
      };
      getSopTaskCount(params).then((res) => {
        console.log(res);
        this.allCount = res.data.allCount;
        this.dayCount = res.data.dayCount;
        this.dayWorkerCount = res.data.dayWorkerCount;
        this.workerCount = res.data.workerCount;
      });
    },
    // 检查任务状态
    checkStatus() {
      if (this.listItem.status == 1) {
        return "已开启";
      } else {
        return "已关闭";
      }
    },
    // 检查推送类型
    checkSendType() {
      if (this.listItem.sendType == 1) {
        return "文本";
      } else if (this.listItem.sendType == 2) {
        return "图片";
      } else if (this.listItem.sendType == 3) {
        return "短视频";
      } else if (this.listItem.sendType == 3) {
        return "网页";
      } else if (this.listItem.sendType == 3) {
        return "小程序";
      } else {
        return "文件";
      }
    },
    // 返回主页
    goBack() {
      this.$emit("backListFormDetail");
    },
    // 个人sop-任务详情
    getSopRuleDetal() {
      const params = {
        id: this.listItem.id,
      };
      getSopRuleDetal(params).then((res) => {
        console.log(res);
      });
    },

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

    //   // })
    // },

    // getList() {
    //   // this.listLoading = true;

    //   // let params = {
    //   //   keyword: this.screenForm.keyword,
    //   //   pageNum: this.currentPage,
    //   //   pageSize: this.pageSize
    //   // }

    //   // getList(params).then(res => {
    //   //   this.dataList = res.data.records;
    //   //   this.listTotal = res.data.total;
    //   //   this.listLoading = false;
    //   // })

    //   let dataList = [
    //     {
    //       id: 1,
    //       title: "测试数据1",
    //       content:
    //         "详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述",
    //       file: "a.xls",
    //     },
    //     {
    //       id: 2,
    //       title: "测试数据2",
    //       content:
    //         "详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述",
    //     },
    //     {
    //       id: 3,
    //       title: "测试数据3",
    //       content: "详细描述详细描述详细描述详细描述详细描述详细描述详细描述",
    //     },
    //   ];
    //   // 给数组每个对象添加一个属性，默认为false
    //   dataList.forEach((item) => {
    //     item.selected = false;
    //   });
    //   this.dataList = dataList;
    // },

    // 提交筛选表单
    submitScreenForm() {
      this.currentPage = 1;
      this.getList();
    },

    // 重置筛选表单
    resetScreenForm() {
      this.$refs.screenForm.resetFields();
      this.currentPage = 1;
      this.getList();
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getList();
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-card__header {
  font-weight: 600;
}
.left-content {
  .item {
    display: flex;
    margin-bottom: 16px;
    font-size: 14px;
    &:last-child {
      margin-bottom: 0;
    }
    .label {
      color: rgba(0, 0, 0, 0.45);
      flex-shrink: 0;
    }
    .value {
      color: rgba(0, 0, 0, 0.95);
    }
    .content {
      flex: 1;
      .text {
        color: rgba(0, 0, 0, 0.95);
      }
      .img {
        width: 200px;
        height: 200px;
        display: block;
      }
      .video {
        width: 200px;
        height: 200px;
        display: block;
      }
      .box1 {
        flex: 1;
        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 {
        flex: 1;
        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;
        }
      }
    }
  }
}
.right-content {
  .data {
    .content {
      color: #606266;
      border-radius: 2px;
      background-color: #ebf5ff;
      border: 1px solid #e6f0ff;
      display: flex;
      .item {
        flex: 1;
        padding: 16px 0;
        text-align: center;
        .num {
          color: #222;
          font-size: 30px;
          font-weight: 600;
          margin-bottom: 15px;
        }
        .text {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
  }
}
</style>