<template>
  <div class="container-attendMeeting">
    <el-card style="margin-bottom: 20px">
      <h4 style="margin-bottom: 10px">预约客户</h4>
      <el-table :data="makeList" style="width: 100%" border>
        <el-table-column min-width="75" align="center" prop="RealName" label="姓名" width=""> </el-table-column>
        <el-table-column min-width="110" align="center" prop="Mobile" label="手机号" width=""> </el-table-column>
        <el-table-column min-width="110" align="center" prop="OutboundMobile" label="外呼号码" width=""> </el-table-column>
        <el-table-column min-width="150" align="center" prop="CompanyName" label="公司名称" width=""> </el-table-column>
        <el-table-column min-width="115" align="center" prop="SellerName" label="所属销售" width=""> </el-table-column>
        <el-table-column align="center" prop="" label="是否到会" width="">
          <template slot-scope="scope">
            {{ scope.row.IsMeeting == 1 ? "已到会" : "未到会" }}
          </template>
        </el-table-column>
        <el-table-column min-width="130" align="center" prop="FirstMeetingTime" label="首次入会时间" width=""> </el-table-column>
        <el-table-column min-width="130" align="center" prop="LastMeetingTime" label="最后退出时间" width=""> </el-table-column>
        <el-table-column min-width="98" align="center" prop="Duration" label="参与总时长" width=""> </el-table-column>
        <el-table-column min-width="91" align="center" prop="MeetingTypeStr" label="参会方式" width=""> </el-table-column>
        <el-table-column min-width="91" align="center" prop="MeetingAuthentication" label="参会鉴权" width=""> </el-table-column>
        <el-table-column min-width="91" align="center" prop="MeetingStatusStr" label="参会状态" width=""> </el-table-column>
      </el-table>
    </el-card>
    <el-card style="margin-bottom: 20px">
      <h4 style="margin-bottom: 10px">未预约客户</h4>
      <el-table :data="notMakeList" style="width: 100%" border>
        <el-table-column min-width="75" align="center" prop="RealName" label="姓名" width=""> </el-table-column>
        <el-table-column min-width="110" align="center" prop="Mobile" label="手机号" width=""> </el-table-column>
        <el-table-column min-width="160" align="center" prop="CompanyName" label="公司名称" width=""> </el-table-column>
        <el-table-column min-width="125" align="center" prop="SellerName" label="所属销售" width=""> </el-table-column>
        <el-table-column min-width="160" align="center" prop="FirstMeetingTime" label="首次入会时间" width=""> </el-table-column>
        <el-table-column min-width="160" align="center" prop="LastMeetingTime" label="最后退出时间" width=""> </el-table-column>
        <el-table-column min-width="98" align="center" prop="Duration" label="参与总时长" width=""> </el-table-column>
        <el-table-column min-width="91" align="center" prop="MeetingTypeStr" label="参会方式" width=""> </el-table-column>
        <el-table-column min-width="91" align="center" prop="MeetingAuthentication" label="参会鉴权" width=""> </el-table-column>
        <el-table-column min-width="91" align="center" prop="MeetingStatusStr" label="参会状态" width=""> </el-table-column>
      </el-table>
    </el-card>
    <el-card style="margin-bottom: 20px">
      <h4 style="margin-bottom: 10px">潜在客户</h4>
      <el-table :data="potentialList" style="width: 100%" border>
        <el-table-column width="300" align="center" prop="RealName" label="备注">
          <template slot-scope="{ row }">
            <div class="remark-list">
              <span>{{ row.Content }}</span>
              <div class="button">
                <span class="editsty" @click="examineHandle(row, '添加')">添加</span>
                <span class="editsty" @click="examineHandle(row, '历史')">历史</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column min-width="75" align="center" prop="RealName" label="姓名" width=""> </el-table-column>
        <el-table-column min-width="110" align="center" prop="Mobile" label="手机号" width=""> </el-table-column>
        <el-table-column min-width="160" align="center" prop="CompanyName" label="公司名称" width=""> </el-table-column>
        <el-table-column min-width="125" align="center" prop="Position" label="职位" width=""> </el-table-column>
        <el-table-column min-width="160" align="center" prop="FirstMeetingTime" label="首次入会时间" width=""> </el-table-column>
        <el-table-column min-width="160" align="center" prop="LastMeetingTime" label="最后退出时间" width=""> </el-table-column>
        <el-table-column min-width="98" align="center" prop="Duration" label="参与总时长" width=""> </el-table-column>
        <el-table-column min-width="91" align="center" prop="MeetingTypeStr" label="参会方式" width=""> </el-table-column>
        <el-table-column min-width="91" align="center" prop="MeetingAuthentication" label="参会鉴权" width=""> </el-table-column>
        <el-table-column min-width="91" align="center" prop="MeetingStatusStr" label="参会状态" width=""> </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-dialogDrag :visible.sync="examineOrAddDlg" :close-on-click-modal="false" :modal-append-to-body="false" @close="cancelHandle" center :width="examineOrAddShow ? '800px' : '500px'">
      <div slot="title">
        <i class="el-icon-close" style="fontsize: 24px; cursor: pointer; position: absolute; right: 20px; top: 50%; transform: translateY(-50%)" @click="cancelHandle"></i>
        <span style="fontsize: 16px">{{ examineOrAddShow ? "历史备注" : "添加备注" }}</span>
      </div>
      <div v-if="examineOrAddShow">
        <el-table :data="lableRemarkList" style="width: 100%" border height="350">
          <el-table-column align="center" prop="Content" label="备注信息"> </el-table-column>
          <el-table-column align="center" width="90" prop="RealName" label="备注人"> </el-table-column>
          <el-table-column align="center" width="200" prop="CreateTime" label="备注时间"> </el-table-column>
        </el-table>
      </div>
      <div v-else>
        <el-input type="textarea" :rows="4" placeholder="请输入备注信息" v-model.trim="addRemarText"> </el-input>
      </div>
      <div style="display: flex; justify-content: center; margin: 40px 0">
        <template v-if="!examineOrAddShow">
          <el-button type="primary" @click="saveHandle">确定</el-button>
          <el-button type="primary" plain @click="cancelHandle">关闭</el-button>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { raiInterface } from "@/api/api.js";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      makeList: [],
      notMakeList: [],
      potentialList: [],
      examineOrAddDlg: false, //弹窗
      examineOrAddShow: false, //区分弹窗显示
      addRemarText: "", //备注输入框
      lableRemarkList: [], //备注数据
      addRemarksFrom: {}, //item 的数据
      remainTime: 0,
      remainTiming: null, //
      articleId: null, //
    };
  },
  computed: {},
  watch: {},
  created() {
    this.remainTiming = setInterval(() => {
      this.remainTime++;
    }, 1000);
  },
  mounted() {
    this.articleId = +this.$route.query.id;
    this.attendanceDetail();
  },
  methods: {
    async attendanceDetail() {
      const res = await raiInterface.attendanceDetail({
        ActivityId: this.articleId,
      });
      try {
        if (res.Ret === 200) {
          this.makeList = res.Data.List1;
          this.notMakeList = res.Data.List2;
          this.potentialList = res.Data.List3;
        }
      } catch (err) {}
    },
    //弹窗的开启事件
    async examineHandle(item, type) {
      this.addRemarksFrom = item;
      this.examineOrAddShow = type === "历史" ? true : false;
      this.examineOrAddDlg = true;
      if (this.examineOrAddShow) {
        const res = await raiInterface.activityMeetRemarkList({ Mobile: item.Mobile });
        if (res.Ret === 200) {
          this.$nextTick(() => {
            this.lableRemarkList = res.Data.List || [];
          });
        }
      }
    },
    //弹窗的关闭事件
    cancelHandle() {
      this.addRemarksFrom = {};
      this.addRemarText = "";
      this.examineOrAddDlg = false;
    },
    //添加备注的确定事件
    async saveHandle() {
      if (!this.addRemarText) return this.$message.error("请输入备注内容");
      const res = await raiInterface.activityMeetAddRemarks({
        ActivityId: this.addRemarksFrom.ActivityId,
        Mobile: this.addRemarksFrom.Mobile,
        Content: this.addRemarText,
      });
      if (res.Ret === 200) {
        this.addRemarksFrom = {};
        this.addRemarText = "";
        this.examineOrAddDlg = false;
        this.$message.success("添加成功");
        this.attendanceDetail();
      }
    },
    //添加阅读时长
    async activityMeetAddStopTime() {
      const res = await raiInterface.activityMeetAddStopTime({
        ActivityId: this.articleId,
        StopTime: this.remainTime,
      });
      if (res.Ret === 200) {
      }
    },
  },
  destroyed() {
    clearInterval(this.remainTiming);
    this.activityMeetAddStopTime();
  },
};
</script>
<style scoped lang="scss">
.container-attendMeeting {
  .remark-list {
    display: flex;
    text-align: left;
    justify-content: space-between;
    .button {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
    }
  }
}
</style>
