<!--
 * @Title: 应急排值班
 * @Description: 
 * @Author: 893699165@qq.com
 * @Date: 2022-04-07 14:59:42
 * @LastEditors: 
 * @LastEditTime: 2022-04-07 14:59:42
-->
<template>
  <div class="yjpzb2">
    <basic-container>
      <el-row>
        <el-col :span="8">
          <div>
            查询时间:
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="date"
              size="small"
              @change="changeDate(date)"
              :clearable="false"
            ></el-date-picker>
            <el-button
              size="small"
              type="primary"
              class="ml20"
              @click="changeDate()"
              >今日</el-button
            >
          </div>
        </el-col>
        <!-- <el-col :span="7" class="text-center">
          <el-radio-group v-model="type" @change="changeType">
            <el-radio :label="1">实际值班情况</el-radio>
            <el-radio :label="2">排班表</el-radio>
          </el-radio-group>
        </el-col> -->
        <el-col :span="16">
          <div class="text-right">
            <el-upload
              class="upload-demo"
              ref="upload"
              :action="uploadUrl()"
              :multiple="false"
              :file-list="fileList"
              :on-remove="handleRemove"
              :on-exceed="onExceed"
              :show-file-list="false"
              :before-upload="beforeUpload"
              :limit="1"
              :on-success="uploadSuccess"
            >
              <el-button size="small" type="primary" :loading="loading"
                >导入</el-button
              >
              <div slot="tip" class="el-upload__tip"></div>
            </el-upload>

            <!-- <el-button
              v-if="detail.filingStatus"
              size="small"
              type="primary"
              class="ml20"
              @click="openShift"
              icon="el-icon-set-up"
              >调班</el-button
            > -->

            <!-- <el-button
              size="small"
              type="primary"
              class="ml20"
              icon="el-icon-date"
              @click="openCal"
              >排值班日历</el-button
            > -->
          </div>
        </el-col>
      </el-row>


      <!-- <div class="date">
        <div v-if="detail.dutyStartTime" class="dateText">
          {{
            dateFormat(
              new Date(detail.dutyStartTime),
              "yyyy" + "年" + "MM" + "月" + "dd" + "日"
            )
          }}
        </div>
        <div v-else class="dateText">
          {{
            dateFormat(
              new Date(date),
              "yyyy" + "年" + "MM" + "月" + "dd" + "日"
            )
          }}
        </div>
      </div> -->
      <el-row>
 
            <avue-crud
              :option="option"
              :table-loading="loading"
              :data="data"
              :page.sync="page"
              :before-open="beforeOpen"
              ref="crud"
              v-model="form"
              :permission="permissionList"
              @row-del="rowDel"
              @row-update="rowUpdate"
              @row-save="rowSave"
              @search-change="searchChange"
              @search-reset="searchReset"
              @selection-change="selectionChange"
              @current-change="currentChange"
              @size-change="sizeChange"
              @refresh-change="refreshChange"
              @on-load="onLoad"
              @before-open="beforeOpen"
            >
              <template slot="state" slot-scope="{ row }">
                <el-button type="text" @click="openConfig(row)"> 正常 </el-button>
              </template>
              <template slot-scope="{ row, index }" slot="menu">
          
                <el-button type="text" size="small" @click="importRtu"
                  >导入测站
                </el-button>
        
              </template>
            </avue-crud>
       
      </el-row>

 
    </basic-container>
    <el-dialog
      :title="title"
      :visible.sync="orgDialog"
      width="800px"
      append-to-body
    >
      <el-table
        border
        :data="orgTable"
        style="width: 100%"
        max-height="500"
        :header-cell-style="{ background: '#fafafa', color: '#000' }"
      >
        <el-table-column fixed prop="postName" label="岗位" align="center">
        </el-table-column>
        <el-table-column prop="userName" label="姓名" align="center">
        </el-table-column>
        <el-table-column
          prop="userEmergencyPhone"
          label="应急电话"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="userMobile" label="手机" align="center">
        </el-table-column>
        <avue-empty :size="50" slot="empty" desc="" image="">
          <img src="/svg/empty.svg" alt="" />
          <p>暂无数据</p>
        </avue-empty>
      </el-table>
    </el-dialog>

    <el-drawer
      :title="dutyTitle"
      :visible.sync="dialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      append-to-body
      :wrapperClosable="false"
      size="1200px"
    >
      <!-- <div class="demo-drawer__content" style="">
        <yjpzbAdd
          ref="yjpzbAdd"
          @close="closeAdd"
          @confirm="confirmAdd"
          :pzbDate="date"
          @closeShift="closeShift"
          :dutyStartTime="dutyStartTime"
        ></yjpzbAdd>
      </div> -->
    </el-drawer>
    <el-drawer
      title="排值班日历"
      :visible.sync="calDialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      append-to-body
      :wrapperClosable="false"
      size="900px"
    >
      <!-- <div class="demo-drawer__content" style="">
        <calendar ref="calendar" @close="closeCal"></calendar>
      </div> -->
    </el-drawer>
  </div>
</template>

<script>
// import yjpzbAdd from "./yjpzbAdd.vue";
// import calendar from "./calendar.vue";
import { dateFormat } from "@/util/date";

// import {
//   getDutyDetail,
//   getDutyUser,
//   getDutyOrganization,
//   updateDutyStatus,
//   getPzbList,
//   getDcList,
// } from "@/api/business/yjbz/yjpzb/yjpzb2";

// import {  } from "@/api/business/yjxyzy/yjqd/yjqd";
// import html2canvas from "html2canvas";
// import printJS from "print-js";
import { getToken } from "@/util/auth";

// import request from '@/router/axios';

export default {
  name: "rtuimport",
  data() {
    return {
      fileList: [],
      title: "",
      deptTitle: "",
      orgDialog: false,
      orgTable: [],
      dutyStartTime: "",
      date: "",
      detail: {},
      activeName: "list",
      dialog: false,
      calDialog: false,

      tableData: [],
      treeList: [],
      shiftForm: {
        dutyDetailId: "",
        changeUserId: "",
        changeTime: "",
        userEmergencyPhone: "",
        userMobile: "",
      },
      shiftList: [],
      filterText: "",
      data: [],
      defaultProps: {
        children: "children",
        label: "deptTitle",
      },
      current: 1,
      size: 10,
      total: 0,
      type: 2,
      array: [],
      loading: false,
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  components: {
    // yjpzbAdd,
    // calendar,
  },
  onLoad(){
     console.log("dddddddddddddddddddddddddddddddddddd")
  },
  mounted() {},
  created() {
    const date = this.$route.query.date;

    this.changeDate(date);
  },
  methods: {
    beforeUpload() {
      this.loading = true;
    },
    // 打印
    // toImg() {
    //   if (this.activeName === "list") {
    //     html2canvas(this.$refs["pzbList"], {
    //       backgroundColor: null,
    //       useCORS: true,
    //       windowHeight: document.body.scrollHeight,
    //     }).then((canvas) => {
    //       const url = canvas.toDataURL();
    //       this.img = url;
    //       printJS({
    //         printable: url,
    //         type: "image",
    //         documentTitle: "&nbsp",
    //       });
    //     });
    //   }
    //   if (this.activeName === "tree") {
    //     html2canvas(this.$refs["pzbTree"], {
    //       backgroundColor: null,
    //       useCORS: true,
    //       windowHeight: document.body.scrollHeight,
    //     }).then((canvas) => {
    //       const url = canvas.toDataURL();
    //       this.img = url;
    //       printJS({
    //         printable: url,
    //         type: "image",
    //         documentTitle: "&nbsp",
    //       });
    //     });
    //   }
    // },
    // closeShift() {
    //   this.changeType();
    // },
    // // 切换 实际与计划排值班 数据
    // changeType() {
    //   this.tableData = [];
    //   this.getDutyOrganization();
    // },
    // handleSizeChange(val) {
    //   this.size = val;
    //   this.current = 1;
    //   if (this.type === 1) {
    //     this.getList();
    //   } else {
    //     this.getPzbList();
    //   }
    // },
    // // page 修改
    // currentChange(val) {
    //   if (this.type === 1) {
    //     this.getList(val);
    //   } else {
    //     this.getPzbList(val);
    //   }
    // },
    // // 点击左边组织列表
    // nodeClick(node) {
    //   this.deptCode = node.deptCode;
    //   this.deptTitle = node.deptTitle;
    //   console.log(node);
    //   if (this.type === 1) {
    //     this.getList();
    //   } else {
    //     this.getPzbList();
    //   }
    // },
    // getPzbList(current = 1) {
    //   this.tableData = [];
    //   this.total = 0;
    //   let params = {
    //     date: this.date,
    //     deptCode: this.deptCode,
    //     current,
    //     size: this.size,
    //   };
    //   getPzbList(params).then((res) => {
    //     this.tableData = res.data.data.records;
    //     this.total = res.data.data.total;
    //     this.current = current;
    //   });
    // },
    // // 获取岗位列表
    // getList(current = 1) {
    //   this.tableData = [];
    //   this.total = 0;
    //   let params = {
    //     date: this.date,
    //     dutyDeptCode: this.deptCode,
    //     current,
    //     size: this.size,
    //   };
    //   getDcList(params).then((res) => {
    //     this.tableData = res.data.data.records;
    //     console.log(res.data);
    //     this.total = res.data.data.total;
    //     this.current = current;
    //   });
    // },
    // filterNode(value, data) {
    //   if (!value) return true;
    //   return data.deptTitle.indexOf(value) !== -1;
    // },
    dateFormat,
    // // 获取阻止结构
    // getDutyOrganization() {
    //   this.treeList = [];
    //   this.tableData = [];
    //   this.data = [];
    //   let params = {
    //     type: 1,
    //     date: this.date,
    //     realType: this.type === 1 ? 1 : "",
    //   };
    //   getDutyOrganization(params).then((res) => {
    //     this.treeList = res.data.data;
    //     this.data = res.data.data;

    //     this.nodeClick(this.data[0]);
    //   });
    // },

    // // 点击 今日
    changeDate(date) {
      this.date = date || dateFormat(new Date(), "yyyy-MM-dd");
      //this.getData();

    //  this.getDutyOrganization();
    },
    // // 获取 排值班基本详情
    // getData() {
    //   this.detail = {};
    //   getDutyDetail({
    //     date: this.date,
    //     dutyDeptCode: this.deptCode,
    //   }).then((res) => {
    //     if (res.data.code === 200) {
    //       this.detail = res.data.data;
    //     }
    //   });
    // },

    // // 归档
    // returning() {
    //   this.$confirm("确定归档该当前时间?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       updateDutyStatus({
    //         id: this.detail.id,
    //         filingStatus: 1,
    //       }).then((res) => {
    //         if (res.data.code === 200) {
    //           this.$message.success("操作成功");
    //           this.detail.filingStatus = 1;
    //           this.getDutyOrganization();
    //         }
    //       });
    //     })
    //     .catch(() => {});
    // },
    // // 打开调班窗口
    // openShift(item) {
    //   if (!this.detail.filingStatus) {
    //     this.$message.warning("当前数据未归档");
    //     return;
    //   }
    //   this.dutyTitle = "调 班";
    //   this.dialog = true;
    //   this.dutyStartTime = this.detail.dutyStartTime;

    //   this.$nextTick(() => {
    //     this.$refs["yjpzbAdd"].shift();
    //   });
    // },
    // // 打开调班窗口
    // openEdit(item) {
    //   this.dutyTitle = "编 辑";

    //   this.dialog = true;
    //   this.dutyStartTime = this.detail.dutyStartTime;

    //   this.$nextTick(() => {
    //     this.$refs["yjpzbAdd"].edit();
    //   });
    // },
    // // 查看详情
    // linkDetail(item) {
    //   this.dialog = true;

    //   this.dutyStartTime = this.detail.dutyStartTime;

    //   this.$nextTick(() => {
    //     this.$refs["yjpzbAdd"].check();
    //   });
    // },
    // openAdd() {
    //   this.dutyTitle = "新 增";

    //   this.dialog = true;
    //   this.dutyStartTime = "";

    //   this.$nextTick(() => {
    //     this.$refs["yjpzbAdd"].open();
    //   });
    // },

    // openCal() {
    //   this.calDialog = true;
    //   this.$nextTick(() => {
    //     this.$refs["calendar"].open();
    //   });
    // },
    // // 关闭排值班日历
    // closeCal(date) {
    //   this.calDialog = false;

    //   if (date) {
    //     this.date = date;
    //     this.getData();

    //     this.getDutyOrganization();
    //   }
    // },
    // confirmAdd() {
    //   this.changeDate(this.date);
    //   this.dialog = false;
    // },
    // // 关闭排值班新增
    // closeAdd() {
    //   this.dialog = false;
    // },
    // //每页条数 改变
    // handleSizeChange(newSize) {
    //   this.size = newSize;
    //   if (this.type === 1) {
    //     this.getList();
    //   } else {
    //     this.getPzbList();
    //   }
    // },
    // //当前页 改变
    // handleCurrentChange(newPage) {
    //   this.current = newPage;
    //   if (this.type === 1) {
    //     this.getList(newPage);
    //   } else {
    //     this.getPzbList(newPage);
    //   }
    // },
    // openOrg(item) {
    //   this.orgDialog = true;
    //   this.title = item.deptTitle;
    //   this.orgTable = item.dutyDetailVOList;
    // },
    uploadUrl: function () {
      return `/api/galaxy-test/data/manage/import/rtu?${
        this.website.tokenHeader
      }=${getToken()}`;
    },
    // handleRemove(file, fileList) {
    //   this.ruleForm.attach = "";
    // },
    // onExceed(file, fileList) {
    //   this.$message.warning("超出文件上传数量");
    // },
    // uploadSuccess(response, file, fileList) {
    //   console.log("---response:", response);
    //   console.log("---file:", file);

    //   console.log("---fileList:", fileList);
    //   this.fileList = [];
    //   this.loading = false;
    //   this.$message.success("导入成功");
    //   this.changeDate();
    // },
  },
};
</script>

<style lang="scss" scoped>
.yjpzb2 {

  .text-right{
    text-align:right;
  }
   
  

  .upload-demo {
    display: inline-block;
  }
  .deptTitle {
    font-size: 16px;
    font-weight: 700;
    height: 36px;
    line-height: 36px;
  }
  .ifChangeShift {
    color: rgb(117, 220, 194);
  }
  .fax {
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #eee;
    border-top: none;
  }
  .date {
    position: relative;
    height: 20px;
    .dateText {
      position: absolute;
      right: 0;
      bottom: -30px;
      z-index: 99;
    }
  }
  .tree {
    position: relative;
    height: 800px;
    .main {
      position: absolute;
      left: 50%;
      top: 40px;
      transform: translateX(-50%);
      height: 200px;
      width: 300px;
      border: 2px solid #409eff;
      cursor: pointer;
      border-radius: 8px;

      &::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -40px;
        transform: translateX(-50%);
        width: 2px;
        height: 40px;
        background-color: #409eff;
      }
    }
    .main2 {
      position: absolute;
      left: 50%;
      top: 280px;
      transform: translateX(-50%);
      height: 200px;
      width: 300px;
      border: 2px solid #409eff;
      cursor: pointer;
      border-radius: 8px;

      &::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -30px;
        transform: translateX(-50%);
        width: 2px;
        height: 30px;
        background-color: #409eff;
      }
      &::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -30px;
        transform: translateX(-50%);
        width: 1028px;
        height: 2px;
        background-color: #409eff;
      }
    }
    .title {
      height: 40px;
      line-height: 40px;
      padding: 0 10px;
      margin: 0;
      font-size: 14px;
      font-weight: 500;
      border-bottom: 2px solid #409eff;
      color: #333;
    }
    .postList {
      overflow: scroll;
      height: 158px;
      flex-grow: 1;
      padding: 0px 20px;
      box-sizing: border-box;
      font-size: 12px;
      &::-webkit-scrollbar {
        width: 0 !important;
      }
    }
    .post {
      padding: 10px 0;
      color: #666;
      font-size: 14px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .postName {
        flex-grow: 2;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .userName {
        flex-shrink: 0;
      }
    }
    .far {
      width: 1200px;
      position: absolute;
      left: 50%;
      top: 538px;
      transform: translateX(-50%);
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .son {
        border-radius: 8px;

        width: 260px;
        position: relative;
        border: 2px solid #409eff;
        box-sizing: border-box;
        cursor: pointer;
        &::before {
          content: "";
          position: absolute;
          left: 50%;
          top: -30px;
          transform: translateX(-50%);
          width: 2px;
          height: 30px;
          background-color: #409eff;
        }
      }
    }
  }
}
</style>
