<template>
  <div class="container">
    <div class="top">
      <div class="part left">
        <el-descriptions title="用户信息" :column="5">
          <el-descriptions-item label="姓名">{{
            userInfo.nameCn
          }}</el-descriptions-item>

          <el-descriptions-item label="学员状态" span="4">
            <el-radio-group
              v-model="userStatusList.userStatus"
              size="mini"
              @change="changeStatus()"
            >
              <el-radio-button label="0">未报名</el-radio-button>
              <el-radio-button label="1">在读学员</el-radio-button>
              <el-radio-button label="2">退费学员</el-radio-button>
              <el-radio-button label="3">结课学员</el-radio-button>
            </el-radio-group>
            <!-- <span style="width:80px">          
          <div v-if="UserInfoDetail.userStatus == 0">未报名</div>
          <div v-if="UserInfoDetail.userStatus == 1">在读学员</div>
          <div v-if="UserInfoDetail.userStatus == 2">退费学员</div>
          <div v-if="UserInfoDetail.userStatus == 3">结课学员</div></span>
          <el-button  @click="showSelect = true" v-show = "!showSelect" size="mini">编辑</el-button>
              <el-select v-model="userStatusList.userStatus" placeholder="" size="mini" @blur="changeStatus" v-show="showSelect">
              <el-option label="未报名" :value="0"></el-option>
              <el-option label="在读学员" :value="1"></el-option>
              <el-option label="退费学员" :value="2"></el-option>
              <el-option label="结课学员" :value="3"></el-option>
            </el-select> -->
          </el-descriptions-item>
          <el-descriptions-item label="缴费状态">{{
            userInfo.payCostStatus == 0
              ? "未缴费"
              : userInfo.payCostStatus == 1
              ? "已缴定金"
              : userInfo.payCostStatus == 2
              ? "补全费用"
              : userInfo.payCostStatus == 3
              ? "全款"
              : ""
          }}</el-descriptions-item>
          <el-descriptions-item label="自定义标签">
            <!-- <el-tag size="small">学校</el-tag> -->
            <div class="tagBox">
              <el-tag
                v-for="(item, index) in dynamicTags"
                :key="index"
                closable
                :disable-transitions="false"
                @close="handleClose(item.id)"
              >
                {{ item.tag }}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              >
              </el-input>
              <el-button
                v-else
                class="button-new-tag"
                size="mini"
                @click="showInput"
                >添加标签</el-button
              >
            </div>
          </el-descriptions-item>
        </el-descriptions>
        <!-- <div class="line">
          <div>ID</div>
          <div>姓名</div>
          <div>学员状态</div>
          <div>缴费状态</div>
          <div>自定义标签</div>
        </div> -->
        <!-- <div class="line">
          <div>{{ userInfo.userName }}</div>
          <div>{{ userInfo.nameCn }}</div>
          
          <div v-if="userInfo.userStatus == 0">未报名</div>
          <div v-if="userInfo.userStatus == 1">在读学员</div>
          <div v-if="userInfo.userStatus == 2">退费学员</div>
          <div v-if="userInfo.userStatus == 3">结课学员</div>
          
          <div v-if="userInfo.payCostStatus == 0">未缴费</div>
          <div v-if="userInfo.payCostStatus == 1">已缴定金</div>
          <div v-if="userInfo.payCostStatus == 2">补全费用</div>
          <div v-if="userInfo.payCostStatus == 3">全款</div>
          
          <div class="tagBox">
            <el-tag
              v-for="(item, index) in dynamicTags"
              :key="index"
              closable
              :disable-transitions="false"
              @close="handleClose(item.id)"
            >
              {{ item.tag }}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput"
              >添加标签</el-button
            >
          </div>
        </div> -->
      </div>
      <!-- <div class="part">
        <span>学员ID</span>
        <el-input v-model="input"></el-input>
        <el-button @click="check">查询</el-button>
      </div> -->
      <div class="part">
        <div class="line">
          <div>客服老师</div>
          <div>学服老师</div>
          <!-- <div>教务老师</div> -->
          <!-- <div>教务部</div> -->
        </div>
        <div class="line">
          <div>{{ userInfo.customerCareName }}</div>
          <div>{{ userInfo.studyCareName }}</div>
          <!-- <div>{{ userInfo.teacherAssistantName }}</div> -->
          <!-- <div>王五</div> -->
        </div>
      </div>
    </div>
    <div class="bottom">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="UserInfoDetail">
          <!-- <div v-for="(item, name, index) in userInfo" :key="index">
            {{ name }} : {{ item }}
          </div> -->
          <stuDetailInfo
            @update="update"
            :UserInfoDetail="UserInfoDetail"
          ></stuDetailInfo>
        </el-tab-pane>
        <el-tab-pane label="沟通记录" name="ChatRecord">
          <!-- <ChatRecord></ChatRecord> -->
          <el-button @click="recordVisible = true" style="float: right"
            >添加沟通记录</el-button
          >
          <el-dialog title="添加沟通记录" :visible.sync="recordVisible">
            <el-form :model="chatRecord">
              <el-form-item label="意向度" :label-width="formLabelWidth">
                <el-select clearable v-model="chatRecord.planStatus">
                  <el-option label="低" :value="1"></el-option>
                  <el-option label="中" :value="2"></el-option>
                  <el-option label="高" :value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="下次沟通时间" :label-width="formLabelWidth">
                <el-date-picker
                  v-model="chatRecord.nextChatTime"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="沟通记录" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  :rows="8"
                  placeholder="请输入内容"
                  v-model="chatRecord.context"
                >
                </el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="recordVisible = false">取 消</el-button>
              <el-button type="primary" @click="updatedChatRecord"
                >确 定</el-button
              >
            </div>
          </el-dialog>

          <div class="table-container">
            <el-table
              ref="adminTable"
              :data="allRecord.list"
              style="width: 100%"
              border
            >
              <el-table-column label="姓名" width="100" align="center">
                <template slot-scope="scope">{{ scope.row.nickName }}</template>
              </el-table-column>
              <el-table-column label="添加时间" width="160" align="center">
                <template slot-scope="scope">{{
                  scope.row.addTime | formatDateTime
                }}</template>
              </el-table-column>
              <!-- <el-table-column label="添加老师" width="100" align="center">
                <template slot-scope="scope">{{ scope.row.roleName }}</template>
              </el-table-column> -->
              <el-table-column label="沟通记录" align="center">
                <template slot-scope="scope">{{ scope.row.context }}</template>
              </el-table-column>
            </el-table>

            <div class="pagination-container">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="allRecord.pageNum"
                :page-size="allRecord.pageSize"
                :page-sizes="[10, 15, 20]"
                :total="allRecord.total"
              >
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="缴费信息" name="payCostInfo">
          <payCostInfo :id="id" :userInfo="userInfo"></payCostInfo>
        </el-tab-pane>
        <el-tab-pane label="课程信息" name="courseInfo">
          <courseInfo :id="id" :UserInfoDetail="UserInfoDetail"></courseInfo>
        </el-tab-pane>
        <el-tab-pane label="学员审课所处状态" name="userAuditCourseState">
          <userAuditCourseState></userAuditCourseState>
        </el-tab-pane>
        <el-tab-pane label="成绩单" name="transcripts">
          <transcripts :stuName="userInfo.nameCn"></transcripts>
        </el-tab-pane>
        <el-tab-pane label="上传凭证" name="proof">
          <proof v-if="activeName === 'proof'"></proof>
        </el-tab-pane>
      </el-tabs>
      <!-- <el-button @click="test">test</el-button> -->
    </div>
  </div>
</template>

<script>
import {
  getUserInfo,
  UserInfoDetail,
  addChatRecord,
  getChatRecordAll,
  userTag,
  addUserCustomTag,
  deleteUserCustomTag,
  payCostInfoAll
} from "@/api/cso";
import { UserStatusUpdate } from "@/api/cso2";
import { formatDate } from "@/utils/date";
// import axios from "axios";
import stuDetailInfo from "./components/stuDetailInfo.vue";
import ChatRecord from "./components/ChatRecord.vue";
import payCostInfo from "./components/payCostInfo.vue";
import courseInfo from "./components/courseInfo.vue";
import userAuditCourseState from "./components/userAuditCourseState.vue";
import transcripts from "./components/transcripts.vue";
import proof from "./components/proof.vue";

export default {
  name: "stuDetail",
  data() {
    return {
      id: "",
      activeName: "UserInfoDetail",
      recordVisible: false,
      // input: "00784959ba7e46018e0b1bc717658f82",
      userInfo: "",
      UserInfoDetail: {},
      userStatusList: {
        userStatus: 0,
        channel: 0,
        nameCn: "",
        school: "",
        wechatNumber: ""
      },
      chatRecord: {
        planStatus: "",
        nextChatTime: "",
        context: "",
        userId: ""
      },
      showSelect: false,
      formLabelWidth: "120px",
      allRecord: {
        pageNum: 1,
        pageSize: 10
      },

      dynamicTags: "",
      inputVisible: false,
      inputValue: "",
      payInfo: ""
    };
  },
  components: {
    stuDetailInfo,
    ChatRecord,
    payCostInfo,
    courseInfo,
    userAuditCourseState,
    transcripts,
    proof
  },
  filters: {
    formatDateTime(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    }
  },
  methods: {
    //proof刷新
//  timer(){
// return this.$route.path + Math.random();
//  },
    handleClick(tab, event) {
      // console.log(tab, event);
      // console.log(tab.name == 'record');
      if (tab.name == "ChatRecord") {
        this.getRecord();
      }
      // if (tab.name == "payCostInfo") {
      //   // this.getRecord();
      //   // console.log("payCostInfo");
      //   this.getPayInfo();
      // }
    },
    getRecord() {
      getChatRecordAll({
        pageNum: this.allRecord.pageNum,
        pageSize: this.allRecord.pageSize,
        userId: this.userInfo.userId
      }).then(res => {
        this.allRecord = res.data;

        // console.log(this.allRecord);
      });
    },
    //改变学生状态
    changeStatus() {
      this.userStatusList.channel = this.UserInfoDetail.channel;
      this.userStatusList.nameCn = this.UserInfoDetail.nameCn;
      this.userStatusList.school = this.UserInfoDetail.school;
      this.userStatusList.wechatNumber = this.UserInfoDetail.wechatNumber;
      this.userStatusList.id = this.UserInfoDetail.id;
      // console.log('this.userStatusList',this.userStatusList);
      this.$confirm("是否提交", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        UserStatusUpdate(this.userStatusList).then(response => {
          this.$message({
            type: "success",
            message: "提交成功",
            duration: 1000
          });
          // this.$refs[formName].resetFields();
          // this.addUpdateVisible = false;
          // this.getData();
          this.getUserInfoDetail(this.id);
        });

        // this.$forceUpdate();
      });
      //  this.showSelect = false
      //  this.getUserInfoDetail(this.id);
    },
    getPayInfo() {
      payCostInfoAll({
        pageNum: 1,
        pageSize: 100, //这里不做分页显示
        userId: this.id
      }).then(res => {
        this.payInfo = res.data;
        // console.log(this.allRecord);
        // console.log(this.payInfo, "this.payInfo222222222222222");
      });
    },

    check(id) {
      // console.log(this.input);
      //00784959ba7e46018e0b1bc717658f82
      getUserInfo(id).then(res => {
        // console.log(res.data,'res.data');
        this.userInfo = JSON.parse(JSON.stringify(res.data));
        this.chatRecord.userId = res.data.userId;

        console.log(this.userInfo, "this.userInfo");
        // console.log(this.input,'this.input');
      });
    },
    getUserInfoDetail(id) {
      UserInfoDetail(id).then(res => {
        this.UserInfoDetail = JSON.parse(JSON.stringify(res.data));
        this.userStatusList.userStatus = res.data.userStatus;
        console.log(this.UserInfoDetail, "this.UserInfoDetail");
      });
    },
    getUserTag(id) {
      userTag(id).then(res => {
        this.dynamicTags = res.data;
        // console.log(this.dynamicTags, "this.dynamicTags");
      });
    },
    // handleSizeChange(val) {
    //   // this.allRecord.pageNum = 1;
    //   this.allRecord.pageSize = val;

    //   this.test();
    // },
    // handleCurrentChange(val) {
    //   this.allRecord.pageNum = val;

    //   this.test();
    // },
    handleSizeChange(val) {
      this.allRecord.pageNum = 1;
      this.allRecord.pageSize = val;
      this.getRecord();
    },
    handleCurrentChange(val) {
      this.allRecord.pageNum = val;
      // console.log(this.allRecord.pageNum);
      this.getRecord();
    },
    updatedChatRecord() {
      this.recordVisible = false;
      // console.log(this.chatRecord);
      this.$confirm("是否提交", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        addChatRecord(this.chatRecord).then(response => {
          this.$message({
            type: "success",
            message: "提交成功",
            duration: 1000
          });
          // location.reload();
          this.getRecord();
        });
      });
    },
    handleClose(id) {
      // this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      deleteUserCustomTag({
        tagId: id,
        userId: this.id
      }).then(res => {
        this.getUserTag(this.id);
      });
      // console.log("handleClose");
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        // this.dynamicTags.push(inputValue);
        addUserCustomTag({
          tag: this.inputValue,
          userId: this.id
        }).then(res => {
          // console.log(res, "addUserCustomTag");
          this.getUserTag(this.id);
        });
        // console.log(inputValue);
      }
      this.inputVisible = false;
      // this.inputValue = "";

      // console.log("666");

      // this.inputVisible = false;
      this.inputValue = null;
    },
    update() {
      this.getUserInfoDetail(this.id);
      console.log("66666");
    }
  },
  mounted() {
    this.id = this.$route.query.id;
    console.log(this.id, "this.id");
    this.check(this.id);
    this.getUserInfoDetail(this.id);
    this.getUserTag(this.id);
    // this.getPayInfo();
  }
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  padding: 30px;
  //   background-color: pink;
}
.top {
  display: flex;
  //   flex-direction: column;
  justify-content: space-between;
  margin-bottom: 30px;
}
.left {
  flex: 1;
  // width: 45%;
}
.line {
  display: flex;
  align-items: center;
  div {
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    // width: 100px;
    // background-color: lightskyblue;
  }
  .tagBox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1000px;
    // margin-left: 100px;
    .el-tag + .el-tag {
      margin-left: 10px;
    }
    .button-new-tag {
      margin-left: 10px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
    }
    .input-new-tag {
      width: 150px;
      margin-left: 10px;
      vertical-align: bottom;
    }
  }
}
</style>
