<template>
  <div class="container">
    <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>
  </div>
</template>

<script>
import { UserInfoUpdate } from "@/api/cso";
import { formatDate } from "@/utils/date";

export default {
  name: "ChatRecord",
  props: ["allRecord"],
  //   props: {
  //     UserInfoDetail: {
  //       type: Object,
  //       default: {}
  //     }
  //   },
  data() {
    return {
      recordVisible: false
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$confirm("是否要提交", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            UserInfoUpdate(this.UserInfoDetail).then(response => {
              this.$message({
                type: "success",
                message: "提交成功",
                duration: 1000
              });
              // location.reload();
              this.$forceUpdate();
            });
            // console.log(this.UserInfoDetail, "submitForm");
          });
        } else {
          console.log("error submit!!");
          console.log(valid);
          return false;
        }
      });
      // createUser(this.form)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.UserInfoDetail.grade = "";
      this.UserInfoDetail.gpa = "";
    },
    getRecord() {
      getChatRecordAll({
        pageNum: this.allRecord.pageNum,
        pageSize: this.allRecord.pageSize,
        userId: this.userInfo.userId
      }).then(res => {
        this.allRecord = res.data;

        console.log(this.allRecord);
      });
    },
    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();
        });
      });
    }
  },
  filters: {
    formatDateTime(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    }
  }
  //   mounted() {
  //     console.log(this.UserInfoDetail, "mounted");

  //   }
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  align-items: center;
}
</style>
