<template>
  <div class="app-container">
    <el-row type="flex" justify="center" :gutter="10" class="mb8">
      <h1>{{ dutyList.dutyName }}</h1>
    </el-row>
    <b>填报单位：东营市二中</b>
    <div style="width:180px; display: inline; float: right">
      <el-button
        type="primary"
        plain
        icon="el-icon-download"
        size="mini"
        @click="handleExport"
        v-hasPermi="['system:teacherDuty:export']"
      >下载
      </el-button>
      <el-button
        type="info"
        plain
        icon="el-icon-close"
        size="mini"
        @click="close">关闭
      </el-button>
    </div>



    <el-table key="a" v-if="getRouterData() == '0'" border v-loading="loading" :data="dutyList.list"
              :span-method="objectSpanMethod">
      <el-table-column label="节日" align="center" width="180">
        <template slot-scope="scope">
          {{ routerData.holidayName }}
        </template>
      </el-table-column>
      <el-table-column label="日期" align="center" prop="dateAndWeek" width="180"/>
      <el-table-column label="带班领导" align="center" prop="leader"/>
      <el-table-column label="岗位" align="center" prop="postName"/>
      <el-table-column label="值班电话" align="center" prop="dutyDeTel"/>
      <el-table-column label="值班手机" align="center" prop="dutyDePhone"/>
      <el-table-column label="值班人员、手机" align="center" prop="personAndPhone"/>
    </el-table>



    <el-table key="b" v-else border v-loading="loading" :data="dutyList.list" :span-method="objectSpanMethod2">
      <el-table-column label="节日" align="center">
        <template slot-scope="scope">
          {{ routerData.holidayName }}
        </template>
      </el-table-column>
      <el-table-column label="日期" align="center" prop="dutyDeDate"/>
      <el-table-column label="星期" align="center" prop="dutyDeWeek"/>
      <el-table-column label="行政值班" align="center">
        <el-table-column label="值班人员" align="center" prop="adminPerson"/>
        <el-table-column label="值班电话" align="center" prop="adminTel" min-width="110"/>
        <el-table-column label="手机" align="center" prop="adminPhone" min-width="110"/>
      </el-table-column>
      <el-table-column label="办公室值班" align="center">
        <el-table-column label="人员" align="center" prop="officerPerson"/>
        <el-table-column label="值班电话" align="center" prop="officerTel" min-width="130"/>
        <el-table-column label="手机" align="center" prop="officerPhone" min-width="130"/>
      </el-table-column>
      <el-table-column label="门卫值班" align="center">
        <el-table-column label="人员" min-width="170" align="center" prop="guardPerson"/>
        <el-table-column label="值班电话" align="center" prop="guardTel" min-width="130"/>
        <el-table-column label="手机" align="center" prop="guardPhone" min-width="130"/>
      </el-table-column>
      <el-table-column label="学生宿舍值班" align="center">
        <el-table-column label="人员" min-width="170" align="center" prop="dormPerson"/>
        <el-table-column label="手机" align="center" prop="dormPhone" min-width="150"/>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px;margin-left: 50px">说明： {{ dutyList.remarks }}</div>
  </div>
</template>

<script>
import {listDuty, downLoad} from "@/api/smartSchool/schoolManage/dutyManage/dutySchedule";
import {getToken} from "@/utils/auth";

export default {
  name: "dutySchedule",
  dicts: ['duty_de_type'],
  data() {
    return {
      routerData: {
        dutyId: '',
        dutyName: '',
        holidayName: '',
        dutyType: ''
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedSchoolDutyDetails: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 值班管理表格数据
      dutyList: [],
      // 值班管理明细表格数据
      schoolDutyDetailsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dutyDeUsername: null,
        dutyDeType: null,
        dutyDeDate: null,
        dutyDeWeek: null,
        state: null,
      },
      dutyDeWeek: [
        {value: '0', label: '星期一'},
        {value: '1', label: '星期二'},
        {value: '2', label: '星期三'},
        {value: '3', label: '星期四'},
        {value: '4', label: '星期五'},
        {value: '5', label: '星期六'},
        {value: '6', label: '星期日'}
      ],
      // 值班明细导入参数
      upload: {
        // 是否显示弹出层（值班明细导入）
        open: false,
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {Authorization: 'Bearer ' + getToken()},
        // 上传的地址
        url: ''
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        delFlag: [
          {required: true, message: "$comment不能为空", trigger: "blur"}
        ]
      }
    };
  },
  created() {
    this.getList();
    this.getRouterData();
  },
  methods: {
    //纵向合并单元格
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        if (rowIndex % this.dutyList.list.length === 0) {
          return {
            rowspan: this.dutyList.list.length,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    //获取数据字典列表
    getDutyType(dutyType) {
      if (this.dict.type.duty_de_type.length != 0) {
        for (let i = 0; i < this.dict.type.duty_de_type.length; i++) {
          let item = this.dict.type.duty_de_type[i]
          if (dutyType == item.value) return item.label
        }
      }
    },
    //获取路由参数
    getRouterData() {
      this.routerData.dutyId = this.$route.query && this.$route.query.dutyId;
      this.routerData.dutyName = this.$route.query && this.$route.query.dutyName;
      this.routerData.holidayName = this.$route.query && this.$route.query.holidayName;
      this.routerData.dutyType = this.$route.query && this.$route.query.dutyType;
      return this.$route.query && this.$route.query.dutyType;
    },
    /** 查询值班管理列表 */
    getList() {
      this.loading = true;
      let id = this.$route.query && this.$route.query.dutyId;
      let dutyType = this.$route.query && this.$route.query.dutyType;
      listDuty(id, dutyType).then(response => {
        this.dutyList = response.data
        this.total = response.total
        this.loading = false
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      let dutyType = this.$route.query && this.$route.query.dutyType;
      let url = dutyType == '0' ? '/dutyDetails/downloadHoilday/' + this.dutyList.id : '/dutyDetails/downloadVacation/' + this.dutyList.id
      this.download(url, {
        id: this.dutyList.id
      }, `${this.dutyList.dutyName}${Date.now()}.xlsx`)
    },
    /** 关闭按钮 */
    close() {
      const obj = {path: "/schoolManage/dutyManage"};
      this.$tab.closeOpenPage(obj);
    },
    //  合并单元格
    objectSpanMethod2({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        if (rowIndex % this.dutyList.list.length === 0) {
          return {
            rowspan: this.dutyList.list.length,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      if (columnIndex >= 9 && columnIndex <= 13) {
        if (rowIndex === 0) {
          return {
            rowspan: this.dutyList.list.length,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
  }
};
</script>



