<template>
  <div>
    <descriptions :column="3">
      <descriptions-item label="所属分部：">
        {{ detail.organName }}
      </descriptions-item>
      <descriptions-item label="合作单位：">
        {{ detail.cooperationName }}
      </descriptions-item>
      <descriptions-item label="巡查乐团：">
        {{ detail.musicGroupName }}
      </descriptions-item>
      <descriptions-item label="乐团主管：">
        {{ detail.realName }}
      </descriptions-item>
      <descriptions-item label="巡查时间：">
        {{ dayjs(detail.planStart).format('YYYY-MM-DD HH:mm') }}~
        {{ dayjs(detail.planEnd).format('HH:mm') }}
      </descriptions-item>
      <descriptions-item label="提交时间：">
        {{ detail.submitedTime }}
      </descriptions-item>
      <descriptions-item label="处理方式：">
        {{ detail.memo }}
      </descriptions-item>
    </descriptions>

    <el-table style="margin-top: 15px;" :data="tableData">
      <el-table-column
        prop="name"
        fixed="left"
        label="巡查项目"
        align="center"
        width="150"
      >
      </el-table-column>
      <el-table-column label="课前管理" align="center">
        <el-table-column
          width="200px"
          align="center"
          label="老师是否提前准备板书（本课内容、作业）"
        >
          <template slot-scope="scope">
            <i :class="scope.row[1] == 1 ? 'el-icon-check' : 'el-icon-close'"></i>
          </template>
        </el-table-column>
        <el-table-column prop="2" width="160px" label="老师是否佩戴工牌" align="center">
          <template slot-scope="scope">
            <i :class="scope.row[2] == 1 ? 'el-icon-check' : 'el-icon-close'"></i>
          </template>
        </el-table-column>
        <el-table-column prop="3" width="180px" label="老师是否仪容仪表整洁" align="center">
          <template slot-scope="scope">
            <i :class="scope.row[3] == 1 ? 'el-icon-check' : 'el-icon-close'"></i>
          </template>
        </el-table-column>
        <el-table-column prop="4" width="160px" label="老师是否携带乐器" align="center">
          <template slot-scope="scope">
            <i :class="scope.row[4] == 1 ? 'el-icon-check' : 'el-icon-close'"></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="5"
          width="160px"
          align="center"
          label="老师是否携带教学资料、设备"
        >
          <template slot-scope="scope">
            <i :class="scope.row[5] == 1 ? 'el-icon-check' : 'el-icon-close'"></i>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="课中管理" align="center">
        <el-table-column
          prop="6"
          width="160px"
          align="center"
          label="老师是否合理安排学员座位"
        >
          <template slot-scope="scope">
            <i :class="scope.row[6] == 1 ? 'el-icon-check' : 'el-icon-close'"></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="7"
          width="160px"
          align="center"
          label="乐器箱包、书包是否摆放整齐"
        >
          <template slot-scope="scope">
            <i :class="scope.row[7] == 1 ? 'el-icon-check' : 'el-icon-close'"></i>
          </template>
        </el-table-column>
        <el-table-column prop="8" width="180px" align="center" label="课堂纪律是否保持良好">
          <template slot-scope="scope">
            <i :class="scope.row[8] == 1 ? 'el-icon-check' : 'el-icon-close'"></i>
          </template>
        </el-table-column>
        <el-table-column prop="9" width="180px" align="center" label="老师是否全程站立教学">
          <template slot-scope="scope">
            <i :class="scope.row[9] == 1 ? 'el-icon-check' : 'el-icon-close'"></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="10"
          width="160px"
          align="center"
          label="老师是否全程使用节拍器或教学音频"
        >
          <template slot-scope="scope">
            <i :class="scope.row[10] == 1 ? 'el-icon-check' : 'el-icon-close'"></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="11"
          width="160px"
          align="center"
          label="未发现私换乐器"
        >
          <template slot-scope="scope">
            <i :class="scope.row[11] == 1 ? 'el-icon-check' : 'el-icon-close'"></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="12"
          width="160px"
          align="center"
          label="老师是否将上课照片/视频发送到声部群"
        >
          <template slot-scope="scope">
            <i :class="scope.row[12] == 1 ? 'el-icon-check' : 'el-icon-close'"></i>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="课后管理" align="center">
        <el-table-column
          prop="13"
          width="160px"
          align="center"
          label="老师是否保持教室环境卫生"
        >
          <template slot-scope="scope">
            <i :class="scope.row[13] == 1 ? 'el-icon-check' : 'el-icon-close'"></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="14"
          width="160px"
          align="center"
          label="老师是否关好所有电源、门窗"
        >
          <template slot-scope="scope">
            <i :class="scope.row[14] == 1 ? 'el-icon-check' : 'el-icon-close'"></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="15"
          width="160px"
          align="center"
          label="老师是否有序组织学员放学"
        >
          <template slot-scope="scope">
            <i :class="scope.row[15] == 1 ? 'el-icon-check' : 'el-icon-close'"></i>
          </template>
        </el-table-column>
      </el-table-column>
      <template #empty>
        <empty />
      </template>
    </el-table>
  </div>
</template>
<script>
import numeral from "numeral";
import dayjs from "dayjs";
import descriptions from "@/components/Descriptions";
import { getPlanConclusion } from '../api'
export default {
  props: ["detail"],
  components: { descriptions },
  data() {
    return {
      tableData: []
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    dayjs,
    numeral,
    async init() {
      try {
        let detail = this.detail
        // if(!detail) {
        //   return
        // }
        const res = await getPlanConclusion({ planId: detail.id })
        this.tableData = res.data
      } catch(err){}
    }
  }
};
</script>
<style lang="less" scoped>
.alert {
  margin: 10px 0;
}
/deep/.el-icon-close, /deep/.el-icon-check {
  font-size: 18px;
  font-weight: bold;
}
/deep/.el-icon-close {
  color: red;
}
/deep/.el-icon-check {
  color: #14928a;
}
</style>
