<template>
  <div class="app-container pageSediment">
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :inline="true"
      :model="queryParams"
      class="inputs"
      label-width="68px"
    >
      <el-form-item prop="applyNum">
        <el-input
          v-model="queryParams.visitNum"
          clearable
          placeholder="请输入门诊号/住院号"
          size="small"
          @keyup.enter.native="handleQuery"

        >
          <el-select slot="prepend" v-model="visitFlag" placeholder="选择类型"  style="width: 100px">
            <el-option label="门诊号" value="1"></el-option>
            <el-option label="住院号" value="2"></el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label="患者名称" prop="patientName">
        <el-input
          v-model="queryParams.patientName"
          clearable
          placeholder="请输入患者名称或编码"
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="申请单状态" label-width="100px" prop="applyState">
        <el-select
          v-model="queryParams.applyState"
          clearable
          placeholder="请选择申请单状态"
          size="small"
        >
          <el-option
            v-for="dict in applyStateOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="检查队列" prop="examTypeId">
        <el-select
          v-model="queryParams.examTypeId"
          clearable
          placeholder="请选择队列"
        >
          <el-option
            v-for="item in Examtypes"
            :key="item.typeCode"
            :label="item.typeName"
            :value="parseInt(item.typeCode)"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="预约日期" prop="reservationDate">

      </el-form-item> -->

      <el-form-item label="就诊类型" prop="visitTypeId">
        <el-select
          v-model="queryParams.visitTypeId"
          clearable
          placeholder="请选择类型"
        >
          <el-option
            v-for="item in visitType"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="检查项目" prop="outExamItemName">
        <el-input
          v-model="queryParams.outExamItemName"
          clearable
          placeholder="请输入检查项目"
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="预约日期" prop="reservationDate">
        <el-date-picker
          v-model="queryParams.reservationDate"
          clearable
          placeholder="选择预约时间"
          size="small"
          type="date"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="科室" prop="reservationDate" >

          <el-input
            v-model="deptName"
            clearable
            placeholder="请输科室名"
            size="small"
            @keyup.enter.native="handleQuery"
          >
            <el-select slot="prepend" v-model="deptFlag" placeholder="选择类型"  style="width: 100px">
              <el-option label="申请科室" value="1"></el-option>
              <el-option label="检查科室" value="2"></el-option>
            </el-select>
          </el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          icon="el-icon-search"
          size="mini"
          type="cyan"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="applyList"
      border stripe tooltip-effect="light" @row-click="handleTableClick"
    >
      <!-- <el-table-column label="预约序号" align="center" prop="reservationNum" width="150"/> -->
      <el-table-column align="left" fixed="left" label="患者名称" prop="patientName" show-overflow-tooltip width="100"/>
      <el-table-column
        align="center"
        fixed="left" label="患者编码"
        prop="patientId"
        show-overflow-tooltip width="140"
      />
      <el-table-column
        :formatter="genderFormat"
        align="center"
        label="性别"
        prop="gender"
        width="50"
      />
      <el-table-column align="center" label="年龄" prop="age" width="50"/>
      <!-- <el-table-column label="申请时间" align="center" prop="reservationTime" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.reservationTime != null">{{ parseTime(scope.row.reservationTime, '{y}-{m}-{d} {h}:{i}') }}</span>
          <span v-else></span>
        </template>
      </el-table-column>  -->
      <el-table-column
        align="left"
        label="检查类型"
        prop="examName"
        width="100"
      />
      <el-table-column
        align="center"
        label="检查项目"
        min-width="250"
        prop="outExamItemName" show-overflow-tooltip
      />
      <el-table-column
        :formatter="reservationDateFormat"
        align="center"
        label="预约时间段"
        prop="reservationTimeSlot"
        width="200"
      />
      <el-table-column
        align="center"
        label="就诊类型"
        prop="visitName"
        width="80"
      />
      <el-table-column
        :formatter="applyStateFormat"
        align="center"
        label="申请单状态"
        prop="applyState"
        width="100"
      />
      <el-table-column
        :formatter="isPayFormat"
        align="center"
        label="交费状态"
        prop="isPay"
        width="80"
      />
      <el-table-column
        align="left"
        label="申请单号"
        min-width="150"
        prop="applyNum" show-overflow-tooltip
      />
      <el-table-column
        align="left"
        label="门诊/住院号"
        min-width="150"
        prop="visitNum" show-overflow-tooltip
      />
    </el-table>
    <pagination
      v-show="total > 0"
      :limit.sync="queryParams.pageSize"
      :page.sync="queryParams.pageNum"
      :total="total"
      @pagination="getList"
    />
    <!-- 添加或修改检查申请单对话框 -->
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="openApply"
      append-to-body
      width="1000px"
    >
      <table border="1" class="tab">
        <thead class="tab-th">
          <tr>
            <th></th>
            <th v-for="(item, index) in weekTimeList" :key="index">
              {{ item }}
            </th>
          </tr>
        </thead>
        <tbody class="tab-tr">
          <td class="tab-td">
            <tr v-for="(i, index) in timeFrame" :key="index">
              <td>
                {{ i }}
              </td>
            </tr>
          </td>
          <td
            v-for="(item, index) in sourcePoolList"
            :key="index"
            class="tab-tt"
          >
            <tr v-for="(it, indexs) in item" :key="indexs">
              <td
                v-if="it.stat == null"
                v-bind:class="{
                  active: currentIndex === index && ercurIndex === indexs,
                }"
                @click="applyGo(it, index, indexs)"
              >
                {{ it.reservedNum }}/{{ it.singleSourceCount }}
              </td>
              <td
                v-else
                id="noSelect"
                v-bind:class="{
                  active: currentIndex === index && ercurIndex === indexs,
                }"
              >
                {{ it.reservedNum }}/{{ it.singleSourceCount }}
              </td>
            </tr>
          </td>
        </tbody>
      </table>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitApply">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 申请单详情抽屉 -->
    <el-drawer v-if="applyDrawer" :visible.sync="applyDrawer" :with-header="false" title="详情">
      <div class="drawer_item"></div>
      <div class="drawer_item"><div class="item_title">门诊/住院号:</div><div class="item_content">{{ activeApplyItem.visitNum }}</div></div>
      <div class="drawer_item"><div class="item_title">类别:</div><div class="item_content">{{ activeApplyItem.visitName }}</div></div>
      <div class="drawer_item"><div class="item_title">姓名:</div><div class="item_content">{{ activeApplyItem.patientName }}</div></div>
      <div class="drawer_item"><div class="item_title">时段:</div><div class="item_content">{{ activeApplyItem.reservationTimeSlot }}</div></div>
      <div class="drawer_item"><div class="item_title">序号:</div><div class="item_content">{{ activeApplyItem.reservationNum }}</div></div>
      <div class="drawer_item"><div class="item_title">项目:</div><div class="item_content">{{ activeApplyItem.inExamItemName }}</div></div>
      <div class="drawer_item"><div class="item_title">开单科室:</div><div class="item_content">{{ activeApplyItem.applyDeptName }}</div></div>
      <div class="drawer_item"><div class="item_title">检查科室:</div><div class="item_content">{{ activeApplyItem.examDeptName }}</div></div>
      <div class="drawer_item"><div class="item_title">患者电话:</div><div class="item_content">{{ activeApplyItem.phone }}</div></div>
      <div class="drawer_item"><div class="item_title">检查队列:</div><div class="item_content">{{ activeApplyItem.queueName }}</div></div>
      <div class="drawer_item"><div class="item_title">申请科室医生:</div><div class="item_content">{{ activeApplyItem.applyDoctorName }}</div></div>
    </el-drawer>

  </div>
</template>

<script>
import {
  listApply,
  getApply,
  delApply,
  addApply,
  updateApply,
  changeApply,
  exportApply,
  cancelApply,
  printApply,
  deptType, applyDetailInfoList
} from '@/api/resource/apply'
import {
  listSourcePoolToManage,
  listSourcePool,
  listSourcePools,
  getSourcePool,
  delSourcePool,
  addSourceNum,
  lessSourceNum,
  exportSourcePool,
} from "@/api/resource/sourcePool";
import { listExamtype } from "@/api/basis/examtype";
import QRCode from "qrcodejs2";
import { getLodop } from "@/utils/LodopFuncs";
import router from "@/router";
import { listQueue } from '@/api/resource/queue'

export default {
  name: "ApplyInfo",
  data() {
    return {
      // 遮罩层
      loading: true,
      weekTimeList: [],
      img: "http://localhost:11580/prod-api/profile/avatar/2020/02/06/f936f9a559c8a13859ed9c05ca08d077.jpeg",
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      currentIndex: 99,
      ercurIndex: 99,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      applyFlag: false,
      // 申请单详情抽屉开关
      applyDrawer: false,
      // 选中申请行数据
      activeApplyItem: undefined,
      // 总条数
      total: 0,
      // 检查申请单表格数据
      applyList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      dateArr: [],
      openApply: false,
      // 是否加急字典
      isUrgentOptions: [],
      // 性别字典
      genderOptions: [],
      // 申请单状态字典
      applyStateOptions: [],
      // 是否交费字典
      isPayOptions: [],
      //号源
      sourcePoolList: [[]],
      //打印数据
      applyPrintList: [],
      //检查类型下拉
      examTypeList: [],
      //注意事项
      remarks: [],
      //时段
      timeFrame: [],
      cur: 99,
      ind: 99,
      thisArr: [[]],
      Examtypes: [],
      visitType: [
        { id: "1", name: "门诊" },
        { id: "2", name: "住院" },
        { id: "3", name: "体检" },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        patientName: null,
        applyState: null,
        reservationDate: null,
        deptType: null,
        reservationTimeSlot: null,
        applyNum: null,
        examTypeId: null,
        visitTypeId: null,
        outExamItemName: null,
        visitNum: null,
        queueId:null,
        applyDeptName:null,
        examDeptName:null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      deptFlag:null,
      deptName:null,
      visitFlag:'1'
    };
  },
  watch: {
    timeFrame: {
      handler() {},
      deep: true,
    },
  },
  created() {
    this.thisWeekData();

    this.getDicts("sys_user_sex").then((response) => {
      this.genderOptions = response.data;
    });
    this.getDicts("sys_yes_no").then((response) => {
      this.isUrgentOptions = response.data;
    });
    this.getDicts("apply_status").then((response) => {
      this.applyStateOptions = response.data;
    });
    this.getDicts("pay_status").then((response) => {
      this.isPayOptions = response.data;
    });
    listExamtype().then((response) => {
      this.Examtypes = response.rows;
    });
    this.inits();
  },
  methods: {
    inits() {
      deptType().then((res) => {
        if (res.data.deptType != null) {
          this.queryParams.deptType = res.data.deptType + "";
          if (res.data.deptType === "2") {
            this.queryParams.visitTypeId = "2";
            if (
              this.queryParams.examTypeId != null &&
              this.queryParams.examTypeId != ""
            ) {
              this.queryParams.examTypeId = parseInt(res.data.visitType);
            }
          } else {
            if (
              this.queryParams.examTypeId != null &&
              this.queryParams.examTypeId != ""
            ) {
              this.queryParams.examTypeId = parseInt(res.data.visitType);
            }
          }
          this.getList();
        } else {
          // this.queryParams.visitTypeId = "1"
          // var now = new Date();
          // var year = now.getFullYear();       //年
          // var month = now.getMonth() + 1;     //月
          // var day = now.getDate();
          //  if(month < 10){
          //        month = "0"+month
          //     }
          //     if(day < 10){
          //         day = "0"+day
          //     }
          //     this.queryParams.reservationDate = year+"-"+month+"-"+day
          this.getList();
        }
      });
    },
    /** 查询检查申请单列表 */
    getList() {
      this.loading = true
      applyDetailInfoList(this.queryParams).then((response) => {
        console.log(response.rows)
        this.applyList = response.rows
        this.total = response.total
      }).finally(_ => {
        this.loading = false
      })
    },
    initPooldate(queue) {
      listSourcePools({ timeFlag: "true", queueId: queue }).then((response) => {
        let arr = [];
        this.timeFrame = [];
        response.rows.forEach((element) => {
          this.timeFrame.push(element.timeSlot);
        });
        this.initsource(queue);
      });
    },
    initsource(queue) {
      listSourcePoolToManage({ timeFlag: "true", queueId: queue }).then(
        (response) => {
          this.sourcePoolList = [[], [], [], [], [], [], []];
          var rows = response.rows;
          // console.log(rows[0])
          for (let i = 0; i < 7; i++) {
            var arr = [];
            this.timeFrame.forEach((i) => {
              arr.push({});
            });
            for (let j = 0; j < rows.length; j++) {
              if (rows[j].examDate == this.dateArr[i]) {
                for (let k = 0; k < this.timeFrame.length; k++) {
                  if (this.timeFrame[k] === rows[j].timeSlot) {
                    arr[k] = rows[j];
                  }
                }
              }
            }
            this.sourcePoolList[i] = arr;
          }
        }
      );
    },
    // 是否加急字典翻译
    isUrgentFormat(row, column) {
      return this.selectDictLabel(this.isUrgentOptions, row.isUrgent);
    },
    // 性别字典翻译
    genderFormat(row, column) {
      return this.selectDictLabel(this.genderOptions, row.gender);
    },
    // 申请单状态字典翻译
    applyStateFormat(row, column) {
      return this.selectDictLabel(this.applyStateOptions, row.applyState);
    },
    // 是否交费字典翻译
    isPayFormat(row, column) {
      return this.selectDictLabel(this.isPayOptions, row.isPay);
    },
    reservationDateFormat(row, column) {
      var reservationResult = "";
      if (row.reservationDate != null) {
        if (row.reservationTimeSlot != null) {
          reservationResult =
            row.reservationDate + " " + row.reservationTimeSlot;
        } else {
          reservationResult = row.reservationDate;
        }
      }

      return reservationResult;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.openApply = false;
      this.reset();
      this.currentIndex = 99;
      this.ercurIndex = 99;
      this.cur = 99;
      this.ind = 99;
    },
    // 点击表格某一行时触发
    handleTableClick(row, column, event) {
      console.log(this.activeApplyItem)
      this.applyDrawer = true;
      this.activeApplyItem = row;
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        applyNum: null,
        queueId: null,
        phone: null,
        sourcePoolId: null,
        examTypeId: null,
        reservationTime: null,
        itemCode: null,
        outExamItemName: null,
        sourceId: null,
        reservationDate: null,
        reservationTimeSlot: null,
        reservationNum: null,
        reservationId: null,
        timeFrame: null,
        GeneralRemarks: null,
        printCount: null

      };
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (this.deptFlag != null) {
        console.log(this.deptFlag )
        if (this.deptFlag === '1') {
          this.queryParams.applyDeptName = this.deptName
          console.log(this.queryParams.applyDeptName)
        } else if (this.deptFlag === '2') {
          this.queryParams.examDeptName = this.deptName
        }
      }
      //this.$print(this.$refs.print) // 使用
      this.queryParams.pageNum = 1;
      this.getList();
    },
    handleQueryDept() {

      //this.$print(this.$refs.print) // 使用
      this.queryParams.pageNum = 1;
      console.log(this.queryParams)
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.deptFlag = null
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 取消预约按钮操作 */
    cancelApplys(row) {
      this.$confirm("确认取消预约?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return cancelApply({ id: row.id, applyNum: row.applyNum });
        })
        .then(() => {
          this.getList();
          this.msgSuccess("取消成功");
        })
        .catch(function () {});
    },
    /** 打印按钮操作 */
    handlePrinting(row) {
      const id = row.id || this.ids;
      getApply(id).then((response) => {
        this.applyPrintList = response.data;
        this.Examtypes.forEach((item) => {
          if (item.typeCode === response.data.examTypeId) {
            this.remarks = item.generalRemarks;
          }
        });
        this.CreateOneFormPage();
      });
    },
    //打印
    CreateOneFormPage() {
      LODOP = getLodop();
      LODOP.PRINT_INIT("reservation");
      LODOP.SET_PRINT_STYLE("FontSize", 10); //设置字体大小
      LODOP.SET_PRINT_PAGESIZE(1, 550, 550, ""); //设置打印方向,宽,高,纸张类型(例:A4)
      //这里的数字是调整相应位置
      //LODOP.ADD_PRINT_TEXT(10, 10, 500, 5, '患者编码：' + data.PatientId);
      LODOP.ADD_PRINT_TEXT(
        5,
        8,
        550,
        10,
        this.applyPrintList.patientName +
          "(" +
          this.applyPrintList.patientId +
          ")"
      );
      LODOP.SET_PRINT_STYLEA(0, "FontName", "黑体");
      //LODOP.ADD_PRINT_TEXT(5, 150, 550, 10, this.applyPrintList.reservationId);
      LODOP.SET_PRINT_STYLEA(0, "FontName", "黑体");
      LODOP.ADD_PRINT_TEXT(20, 8, 550, 10, this.applyPrintList.applyNum);
      //LODOP.ADD_PRINT_TEXT(35, 8, 550, 10, data.ExamDeptName);
      LODOP.ADD_PRINT_TEXT(35, 8, 550, 10, this.applyPrintList.queueName);
      LODOP.ADD_PRINT_TEXT(
        50,
        8,
        550,
        10,
        "预约时间:" + this.applyPrintList.reservationDate
      );
      LODOP.ADD_PRINT_TEXT(
        65,
        8,
        550,
        10,
        "检查时段:" + this.applyPrintList.reservationTimeSlot
      );
      //LODOP.ADD_PRINT_TEXT(65, 3, 500, 10, data.OutExamItemName);
      LODOP.ADD_PRINT_TEXT(80, 8, 550, 10, "注意事项:");
      var generalRemarks = this.remarks;
      if (generalRemarks != null && generalRemarks != "") {
        generalRemarks = generalRemarks
          .replace(/[^\x00-\xff]/g, "$&\x01")
          .replace(/.{28}\x01?/g, "$&\n")
          .replace(/\x01/g, ""); //每40个换行
        LODOP.ADD_PRINT_TEXT(95, 8, 550, 100, generalRemarks);
      }
      LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      //二维码
      LODOP.ADD_PRINT_BARCODE(
        50,
        145,
        60,
        60,
        "QRCode",
        this.applyPrintList.patientId
      );
      if (
        LODOP.SET_PRINTER_INDEX("瓶贴单") ||
        LODOP.SET_PRINTER_INDEX("瓶签打印机")
      ) {
        //LODOP.PREVIEW();  //打印预览
        LODOP.PRINT(); //直接打印
      } else {
        LODOP.PREVIEW(); //打印预览
      }
    },
    /** 打开预约窗口操作 */
    handleApply(row, titles) {
      this.reset();
      this.initPooldate(row.queueId);
      //this.initsource(row.queueId);
      this.openApply = true;
      if (row.reservationDate != null) {
        for (let i = 0; i < this.dateArr.length; i++) {
          if (this.dateArr[i] === row.reservationDate) {
            this.currentIndex = i;
            this.cur = i;
          }
        }
        setTimeout(() => {
          for (let k = 0; k < this.timeFrame.length; k++) {
            if (this.timeFrame[k] === row.reservationTimeSlot) {
              this.ercurIndex = k;
              this.ind = k;
            }
          }
        }, 500);
      }
      this.form.id = row.id;
      this.form.sourceId = row.sourceId;
      this.form.phone = row.phone;
      this.form.applyNum = row.applyNum;
      this.form.visitTypeId = row.visitTypeId;
      this.form.useReservationDate = row.reservationDate;
      this.form.itemCode = row.itemCode;
      this.form.outExamItemName = row.outExamItemName;
      this.form.useReservationTime = row.reservationTimeSlot;
      this.form.positionCount = row.positionCount;
      this.form.isEmpty = row.isEmpty;
      this.title = titles;
      this.form.primaryDate =
        row.reservationDate + " " + row.reservationTimeSlot;
    },
    //选择号源后的数据
    applyGo(val, index, key) {
      if (!(JSON.stringify(val) == "{}")) {
        this.currentIndex = index;
        this.ercurIndex = key;
        this.form.sourcePoolId = val.id;
        this.form.reservationDate = val.examDate;
        this.form.reservationTimeSlot = val.timeSlot;
        this.form.reservationNum = val.reservationSerialNum;
        this.form.timeFrame = val.timeFrame;
        this.form.queueId = val.queueId;
        this.form.examTypeId = val.examTypeId;

        if (this.form.visitTypeId != "3") {
          switch (this.form.visitTypeId) {
            //门诊
            case "1":
              if (
                val.outSourceCount >=
                val.outNumSourceCount + val.inNumSourceCount
              ) {
                this.applyFlag = true;
              } else {
                this.applyFlag = false;
              }

              break;
            //住院
            case "2":
              if (
                val.inSourceCount >=
                val.outNumSourceCount + val.inNumSourceCount
              ) {
                this.applyFlag = true;
              } else {
                this.applyFlag = false;
              }
              break;
            default:
              break;
          }
          //体检
        } else {
          this.applyFlag = false;
        }
      }
    },
    /** 提交预约改约按钮操作 */
    submitApply() {
      if (this.currentIndex === this.cur) {
        if (this.ercurIndex === this.ind) {
          return;
        }
      }

      if (this.applyFlag) {
        this.$message({
          showClose: true,
          message: "该时段号源已满，请选择其他时段！",
          type: "warning",
        });
        return;
      }

      if (this.title == "预约") {
        updateApply(this.form).then((res) => {
          this.cancel();
          this.getList();
        });
      } else {
        //改约
        changeApply(this.form).then((res) => {
          this.cancel();
          this.getList();
        });
      }
    },
    creatQrCode() {
      let code = this.form.applyNum;
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: code, // 需要转换为二维码的内容
        width: 50,
        height: 50,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
    // 改约操作
    handleModification(row) {
      this.$store.dispatch("apply/setApplyInfo", row);
      this.$store.dispatch("apply/setFromRouter", 1);
      this.$router.push({ path: "/manualApply" });
    },
    thisWeekData() {
      //获取系统当前时间
      var leng = 8;
      var now = new Date();
      var nowTime = now.getTime();
      var oneDayTime = 24 * 60 * 60 * 1000;
      var timeArr = [];
      var timeStr = "";
      var dateStr = "";
      for (var i = 0; i < 7; i++) {
        //显示星期
        var ShowTime = nowTime + i * oneDayTime;
        //初始化日期时间
        var myDate = new Date(ShowTime);
        var year = myDate.getFullYear();
        var month = myDate.getMonth() + 1;
        var date = myDate.getDate();
        if (month < 10) {
          month = "0" + month;
        }
        if (date < 10) {
          date = "0" + date;
        }
        var str = "星期" + "日一二三四五六".charAt(myDate.getDay());
        timeStr = date + "(" + str + ")";

        dateStr = year + "-" + month + "-" + date;

        this.dateArr.push(dateStr);
        timeArr.push(timeStr);
      }
      this.weekTimeList = timeArr;
    },
  },
};
</script>

<style lang="scss" scoped>
#noSelect {
  background-color: rgba(167, 174, 177, 0.493);
}
.qrcode {
  display: inline-block;
  position: relative;
  top: 30px;
  right: 170px;
}
.tab,
tr,
td {
  border-collapse: collapse;
  border: 2px solid white;
}
.inputs{
  display: flex;
  flex-wrap: wrap;

}
.tab th {
  height: 45px;
  line-height: 45px;
  text-align: center;
  background-color: lightskyblue;
  width: 120px;
  border: 2px solid white;
}
.tab-tr td {
  padding: 0;
  width: 120px;
}
.tab-tr .tab-td {
  border: none;
  height: 40px;
  line-height: 40px;
  padding: 0;
  text-align: center;
  color: aliceblue;
  background-color: rgb(135, 194, 250);
}
.tab-td tr,
.tab-tt tr {
  border: 2px solid white;
  padding: 0;
}

.tab-td td,
.tab-tt td {
  border: none;
}
.tab-tt {
  padding: 0;
  border: none;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: rgba(184, 207, 216, 0.473);
}

.active {
  color: rgb(57, 125, 214);
  font-size: 16px;
  background: rgba(169, 204, 236, 0.664);
  font-weight: bolder;
}
.tab-tt tr td:hover {
  cursor: pointer;
}
.drawer_item{
  width: 100%;
  box-sizing: border-box;
  padding: 5px 10px;
  border-bottom: 2px solid rgba(126, 161, 157, 0.2);
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
}
.drawer_item:first-child{
  height: 30px;
  background-image: linear-gradient(to bottom,rgba(165, 154, 140, 0.671),transparent);
  border-bottom: none;
}
.drawer_item .item_title{
  width: 140px;
  line-height: 1.5;
  box-sizing: border-box;
  font-size: 1.2em;
  font-weight: 660;
  color: rgba(165, 154, 140, 0.671);
  padding-left: 10px;
  text-align: left;
  }
  .drawer_item .item_content{
    line-height: 1.8;
  box-sizing: border-box;
  font-size: 1em;
  font-weight: 660;
  }
  .app-container ::v-deep .el-drawer__header{
    display: none;
  }

</style>
