<template>
  <div>
    <el-row>
      <el-col :span="3" :xs="24">
        <div style="background-color: white;padding: 10px;border-right: 1px solid #e6e6e6;" >
          <el-input v-model="queryParams.externalUserName" placeholder="搜索客户" clearable size="small"
                    prefix-icon="el-icon-search"  v-on:input ="handleQuery"/>
          <el-table :data="externalContactCrmList"
                    style="width: 200px;height: 800px;overflow-y:auto;border-top:1px solid #e6e6e6 ;
                    margin-top: 10px;" :show-header="false"
                    @row-click="changeCurrentRow"
                    :row-style="rowStyle"
                    :cell-style="setSellStyle">
            <el-table-column label="外部联系人名称" align="center" prop="externalUserName">
              <template slot-scope="scope">
                <div style="display: flex;white-space: nowrap">
                  <div style="margin: auto">
                    {{scope.row.externalUserName}}
                  </div>
                    <img :src="scope.row.avatar" style="width: 30px;height: 30px">
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            small
            layout="prev, pager, next"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            :total="total">
          </el-pagination>
        </div>
      </el-col>
      <el-col :span="16">
        <div style="background-color: white;width: 100%;height: 55px;border-right: 1px solid #e6e6e6;align-items: center; padding: 0px 50px 0px 50px;">
          <div style="padding-top: 20px; font-weight: bold;">课程列表</div>
        </div>


        <div style="padding: 10px;">
          <el-tabs type="card" v-model="isBindActiveName" @tab-click="handleClickX" style="background-color: white" >
            <el-tab-pane label="全部" name="99"></el-tab-pane>
            <el-tab-pane label="沟通中" name="0"></el-tab-pane>
            <el-tab-pane label="待学习" name="1"></el-tab-pane>
            <el-tab-pane label="正在学习" name="2"></el-tab-pane>
            <el-tab-pane label="已结课" name="3"></el-tab-pane>
          </el-tabs>

          <el-table v-loading="loading" :data="crmCourseStudyList" style="height: 780px"
                    highlight-current-row
                    @row-click="courseDetailChange"
                    :row-style="courseDetailRowStyle"
                    :cell-style="courseDetailSetSellStyle"
                    border>
            <el-table-column label="课程名称" align="center" prop="courseName"/>
            <el-table-column label="课程学习开始时间" align="center" prop="studyCreateTime"/>
            <el-table-column label="课程状态" align="center" prop="status">
              <template slot-scope="scope">
                <dict-tag v-if="scope.row.status!=null" :options="courseStudyOptions" :value="scope.row.status"/>
                <el-tag
                  v-else
                  type="info"
                  size="mini"
                  plain
                >
                  沟通中
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="企微客户名称" align="center" prop="externalUserName"/>
            <el-table-column label="头像" align="center" prop="avatar">
              <template slot-scope="scope">
                <el-popover
                  placement="right"
                  title=""
                  trigger="hover">
                  <img slot="reference" :src="scope.row.avatar" width="50px">
                  <img :src="scope.row.avatar" style="max-width: 200px;">
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="电话" align="center" prop="mobile">
            </el-table-column>
            <el-table-column label="是否绑定CRM" align="center" prop="customerId" >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.customerId" type="success">已绑定CRM</el-tag>
                <el-tag v-else type="danger">未绑定CRM</el-tag>
              </template>
            </el-table-column>

          </el-table>
          <el-pagination
            background
            v-show="studyTotal>0"
            :total="studyTotal"
            :page.sync="queryParamsStudy.pageNum"
            :limit.sync="queryParamsStudy.pageSize"
            @pagination="getQwCrmCourseStudy"
            style="background-color: white;margin-top: 10px"
          />
        </div>
      </el-col>
      <el-col :span="5">
        <div style="background-color: white;width: 100%;height: 55px;border: 1px solid #e6e6e6;display: flex; justify-content: center; align-items: center; overflow-y: auto">
          课程小节
        </div>
        <div style="width: 100%; height: 830px;background-color: white; overflow-y: auto">
          <div v-for="(item, key, index) in stageDetailsList" :key="index" style="padding: 10px; ">
            <el-card v-if="item.videoName!=null">
              <div class="executionHistory" style="white-space: normal;">课节：第{{item.courseSort}}节</div>
              <div class="executionHistory" style="white-space: normal;" >课节名称：{{ item.videoName }}</div>
              <div class="executionHistory" style="white-space: normal;" >课节总学时(秒)：{{ item.times }}</div>
              <div class="executionHistory" style="white-space: normal;" >课节观看时间点(秒)：{{ item.currentTimes }}</div>
              <div class="executionHistory" style="white-space: normal;" >开始学习课节时间：{{ item.logCreateTime }}</div>
              <div class="executionHistory" style="white-space: normal;">
                课节进度：
                <el-tag v-if="item.rate=='100'" type="success">{{item.rate}}%</el-tag>
                <el-tag v-else type="warning" >{{item.rate}}%</el-tag>


              </div>
            </el-card>
            <el-card v-if="item.videoName==null">
              <span>暂无小节记录</span>
            </el-card>
          </div>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import { getQwCrmCourseStudyDetail, getQwCrmCourseStudyList, listExternalContactCrm } from '@/api/qw/externalContactCrm'

export default {
  watch: {
  },
  components:{
  },
  name: "index",

  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 客户总条数
      total: 0,
      //客户课程总条数
      studyTotal:0,

      //筛选
      isBindActiveName:"99",
      //课程观看状态
      courseStudyOptions:[],
      // 客户列表
      externalContactCrmList: [],

      //客户课程列表
      crmCourseStudyList:[],

      //客户课程详情列表
      stageDetailsList:[],

      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询客户参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        externalUserId: null,
        externalUserName: null,
        avatar: null,
        customerId: null,
        companyId: null,
        status: null
      },
      //查询客户课程参数
      queryParamsStudy: {
        pageNum: 1,
        pageSize: 10,
        externalUserId: null,
        userId:null,
      },
      //客户的课程详情
      queryParamsStudyDetails:{
        pageNum: 1,
        pageSize: 10,
        externalUserId: null,
        studyId: null,
        userId: null,
      },
      //客户选择
      currentRowId:null,
      rowIndex:null,

      //客户课程选择
      courseRowId:null,
      courseRowIndex:null,

      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getDicts("sys_user_course_study").then(response => {
      this.courseStudyOptions = response.data;
    });
    this.getList();
  },
  methods: {

    /** 查询客户列表 */
    getList() {
      listExternalContactCrm(this.queryParams).then(response => {
        this.externalContactCrmList = response.rows;
        this.changeCurrentRow(this.externalContactCrmList[0],null,null);
        this.total = response.total;
      });
    },

    handleClickX(tab, event) {

      this.queryParamsStudy.status=tab.name;
      this.getQwCrmCourseStudy(this.queryParamsStudy);
    },
    //选择的客户
    changeCurrentRow(row, column, event) {

      this.queryParamsStudy.externalUserId=row.externalUserId;
      this.queryParamsStudy.userId=row.userId
      this.getQwCrmCourseStudy(this.queryParamsStudy);
    },

    //根据选择的客户查看客户课程
    getQwCrmCourseStudy(params){

      getQwCrmCourseStudyList(params).then(response => {
        this.crmCourseStudyList = response.rows;

        this.courseDetailChange(this.crmCourseStudyList[0],null,null);
        this.studyTotal = response.total;
        this.loading = false;
      });

      if (this.currentRowId === params.externalUserId){
        return
      }else{
        this.currentRowId = params.externalUserId
      }
    },

    //选择的课程详情
    courseDetailChange(row){
      if (row) {
        this.queryParamsStudyDetails.studyId = row.studyId
        this.queryParamsStudyDetails.externalUserId = row.externalUserId
        this.queryParamsStudyDetails.userId = row.userId

        this.crmCourseStudyDetail(this.queryParamsStudyDetails);
      }
    },



    crmCourseStudyDetail(params){
      getQwCrmCourseStudyDetail(params).then(response => {
        this.stageDetailsList=response.rows
      }).finally(()=>{
        this.loading=false;
      })

      this.courseRowId=params.studyId
    },


    //选择客户的颜色变更
    rowStyle ({row, rowIndex}) {
      if (this.currentRowId === row.externalUserId) {
        this.rowIndex=rowIndex;
      }
    },

    setSellStyle({ row, column, rowIndex, columnIndex }) {

      if (column.label === '1') {
        if(this.rowIndex==rowIndex){
          return "borderRadius: 8px 0 0 8px;background:  #3facff;border: none;color: rgb(255, 255, 255) "
        }else{
          return "borderRadius: 8px 0 0 8px;border: none; "
        }
      }
      if (column.label === '2') {
        if(this.rowIndex==rowIndex){
          return "borderRadius: 0px 8px 8px 0px;background: #3facff;border-bottom: none;color: rgb(255, 255, 255)"
        }else{
          return "borderRadius: 0px 8px 8px 0px;#3facff;border: none;"
        }
      }
      if(this.rowIndex==rowIndex){
        return "background:  #3facff;#3facff;border: none;color: rgb(255, 255, 255)"
      }
      return "border: none;"
    },

    //选择课程颜色变更
    courseDetailRowStyle ({row, rowIndex}) {
      if (this.courseRowId === row.studyId) {
        this.courseRowIndex=rowIndex;
      }
    },
    courseDetailSetSellStyle({ row, column, rowIndex, columnIndex }) {

      if (column.label === '1') {
        if(this.courseRowIndex==rowIndex){
          return "borderRadius: 8px 0 0 8px;background:  #3facff;border: none;color: rgb(255, 255, 255) "
        }else{
          return "borderRadius: 8px 0 0 8px;border: none; "
        }
      }
      if (column.label === '2') {
        if(this.courseRowIndex==rowIndex){
          return "borderRadius: 0px 8px 8px 0px;background: #3facff;border-bottom: none;color: rgb(255, 255, 255)"
        }else{
          return "borderRadius: 0px 8px 8px 0px;#3facff;border: none;"
        }
      }
      if(this.courseRowIndex==rowIndex){
        return "background:  #3facff;#3facff;border: none;color: rgb(255, 255, 255)"
      }
      return "border: none;"
    },



    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.orderId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },

    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有治疗单数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        return listExternalContactCrm(queryParams);
      }).then(response => {
        this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => {});
    }
  }
};
</script>
<style scoped>
.el-dialog-execute{
  height: 60vh;
  overflow: auto;
}
.executionHistory{
  font-size: 14px;
  letter-spacing: 1px;
  margin: 5px 2px;
  width: 100%;
}
</style>
