<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      回访记录
    </h2>
    <div class="m-core">
      <save-form :inline="true"
      @submit='search'
      @reset="onReSet"
               :model="searchForm">
        <el-form-item>
          <el-input placeholder="请输入老师姓名"
                    v-model.trim="searchForm.teacher"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model.trim="searchForm.organId"
                     placeholder='请选择分部'
                     clearable
                     filterable>
            <el-option v-for='(item,index) in organList'
                       :key="index"
                       :value="item.id"
                       :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model.trim="searchForm.visiterType"
                     placeholder='请选择角色'
                     clearable
                     filterable>
            <el-option value="TEACHER"
                       label="指导老师"></el-option>
            <el-option value="EDU_TEACHER"
                       label="乐团主管"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-cascader expand-trigger="hover"
                       clearable
                       placeholder="请选择回访类型"
                       :options="visitChiose"
                       @change="handleChange"
                       v-model="type">
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model.trim="timer"
                          style="width:420px;"
                          type="daterange"
                          value-format="yyyy-MM-dd"
                          @change="changeTimer"
                          range-separator="至"
                          start-placeholder="回访开始日期"
                          end-placeholder="回访结束日期"
                          :picker-options="{
                            firstDayOfWeek: 1
                          }">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="danger"
                    native-type="submit">搜索</el-button>
          <el-button native-type="reset"
                     type="primary">重置</el-button>
        </el-form-item>
      </save-form>
      <div class="tableWrap">
        <el-table :data='tableList'
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column align='center'
                           prop="teacherName"
                           label="老师姓名">
          </el-table-column>
          <el-table-column align='center'
                           prop="organName"
                           label="所属分部">
          </el-table-column>
          <el-table-column align='center'
                           prop="visiterType"
                           label="角色">
            <template slot-scope="scope">
              <div>
                {{scope.row.visiterType | visiterType}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="studentId"
                           label="学生ID">
          </el-table-column>
          <el-table-column align='center'
                           prop="studentName"
                           label="学生姓名">
          </el-table-column>
          <el-table-column align='center'
                           prop="type"
                           label="回访类型">
          </el-table-column>
          <el-table-column align='center'
                           prop="purpose"
                           label="回访目的">
          </el-table-column>
          <el-table-column align='center'
                           prop="visitTime"
                           label="回访时间">
            <template slot-scope="scope">
              <div>
                {{scope.row.visitTime?scope.row.visitTime.split(' ')[0]:'--'}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="masterTeacherName"
                           label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text"
                           @click="lookDetail(scope.row)">查看</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
        sync
        :total.sync="rules.total"
                    :page.sync="rules.page"
                    :limit.sync="rules.limit"
                    :page-sizes="rules.page_size"
                    @pagination="getList" />
      </div>
    </div>
    <el-dialog title="回访详情"
               width="700px"
               destroy-on-close
               :visible.sync="detailVisible">
         <descriptions :column="2" v-if="activeRow">
      <descriptions-item label="老师姓名:">{{
        activeRow.teacherName
      }}</descriptions-item>
      <descriptions-item label="所属分部:">{{
        activeRow.organName
      }}</descriptions-item>
      <descriptions-item label="角色:">{{
       activeRow.visiterType | visiterType
      }}</descriptions-item>
      <descriptions-item label="学生姓名:">{{
        activeRow.studentName
      }}</descriptions-item>
      <descriptions-item label="回访类型:">{{
        activeRow.type
      }}</descriptions-item>
      <descriptions-item label="回访目的:">{{
       activeRow.purpose
      }}</descriptions-item>
      <descriptions-item label="回访情况:" :span="6">{{ activeRow.overview }}</descriptions-item>
      <descriptions-item label="家长反馈" :span="6">{{ activeRow.feedback }}</descriptions-item>
    </descriptions>



      <!-- <el-form :inline="true"
               v-if="activeRow"
               ref='visitForm'>
        <el-form-item label="老师姓名">
          <p class="msg">{{ activeRow.teacherName}}</p>
        </el-form-item>
        <el-form-item label="所属分部">
          <p class="msg">{{ activeRow.organName}}</p>
        </el-form-item>
        <el-form-item label="角色">
          <p class="msg">{{activeRow.visiterType | visiterType}}</p>
        </el-form-item>
        <el-form-item label="学生姓名">
          <p class="msg">{{activeRow.studentName}}</p>
        </el-form-item>
        <el-form-item label="回访类型"
                      prop='visitType'>
          <p class="msg">{{activeRow.type}}</p>
        </el-form-item>
        <el-form-item label="回访目的"
                      prop='visitType'>
          <p class="msg">{{activeRow.purpose}}</p>
        </el-form-item>

        </el-form-item>
        <el-form-item label="学员情况"
                      prop="overview">
          <p class="label">{{activeRow.overview}}</p>
        </el-form-item>
        <el-form-item label="家长反馈"
                      prop='feedback'>
          <p class="label">{{activeRow.feedback}}</p>
        </el-form-item>
      </el-form> -->
    </el-dialog>
  </div>
</template>
<script>
import { visitChiose } from "@/utils/searchArray";
import pagination from "@/components/Pagination/index";
import { getEmployeeOrgan } from "@/api/buildTeam";
import { getVisitList } from "./api.js";
import cleanDeep from "clean-deep";
export default {
  components: { pagination },
  data() {
    return {
      searchForm: {
        teacher: "",
        organId: "",
        visiterType: "",
        type: "",
        purpose: "",
      },
      type: [],
      timer: [],
      visitChiose,
      organList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      tableList: [],
      detailVisible: false,
      activeRow: null,
    };
  },
  mounted() {
    getEmployeeOrgan().then((res) => {
      if (res.code == 200) {
        this.organList = res.data;
      }
    });
    this.getList();
  },
  activated() {
    this.getList();
  },
  methods: {
    handleChange(val) {
      this.searchForm.type = val[0];
      this.searchForm.purpose = val[1];
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReSet() {
      this.type = [];
      this.timer = [];
      this.searchForm = {
        teacher: "",
        organId: "",
        visiterType: "",
        type: "",
        purpose: "",
      };
      this.search();
    },
    getList() {
      // cleanDeep

      this.searchForm.page = this.rules.page;
      this.searchForm.rows = this.rules.limit;
      getVisitList(cleanDeep(this.searchForm)).then((res) => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total;
        }
      });
    },
    lookDetail(row) {
      this.activeRow = row;
      this.detailVisible = true;
    },
    changeTimer(val) {
      if (val && val.length > 0) {
        this.searchForm.startTime = this.timer[0];
        this.searchForm.endTime = this.timer[1];
      } else {
        this.searchForm.startTime = null;
        this.searchForm.endTime = null;
      }
    },
  },
  watch: {
    detailVisible(val) {
      if (!val) {
        this.activeRow = null;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.msg {
  min-width: 120px;
}
.label {
  width: 520px;
}
</style>
