<template>
  <div class="content-box">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <span class="cameratxt">课表管理</span>
    </div>
    <div class="scroll">
      <div class="middle">
        <div class="filter">
          <div class="filter_block">
            <div class="condition">
              <span>姓名&nbsp;&nbsp;</span>
              <el-input
                :clearable="true"
                @clear="searchBtn"
                v-model.trim="searchInput.keyWord"
                class="w-50 m-2"
                placeholder="请输入姓名"
                style="width: 180px"
              />
            </div>
            <div class="condition">
              <span>日期&nbsp;&nbsp; </span>
              <el-date-picker
                v-model="searchInput.createTime"
                type="daterange"
                range-separator="-"
                start-placeholder="起始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :prefix-icon="Calendar"
                placeholder="请选择日期"
                @change="searchBtn"
              />
              <!-- <el-date-picker
                v-model="searchInput.createTime"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :prefix-icon="Calendar"
                :clearable="false"
                placeholder="请选择日期"
                @change="searchData"
              /> -->
            </div>
            <div class="condition">
              <el-button
                color="rgba(0, 97, 255, 1)"
                type="primary"
                class="search"
                @click="searchBtn"
                ><el-icon>
                  <Search />
                </el-icon>
                <span>查询</span></el-button
              >
            </div>
          </div>
        </div>
        <div class="filter">
          <div class="filter_block">
            <el-button
              style="margin-right: 8px"
              v-if="flagBtn.tianjia == 1"
              type="primary"
              @click="addClass"
              plain
              >添加</el-button
            >
            <el-button
              style="margin-right: 20px"
              v-if="flagBtn.shanchu == 1"
              type="primary"
              @click="delClass"
              plain
              >勾选删除</el-button
            >
            <el-upload
              v-if="flagBtn.daoruzhiban == 1"
              class="avatar-uploader"
              action=""
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-change="handleChange"
              :http-request="handleUpload"
              :before-upload="beforeAvatarUpload"
            >
              <template #trigger>
                <el-button type="primary" color="rgba(0, 97, 255, 1)"
                  >导入</el-button
                >
              </template>
              <template #tip>
                <!-- <div class="el-upload__tip">
                    （注：图片大小不超过10M，建议按16:9比例）
                  </div> -->
              </template>
            </el-upload>
            <el-button
              style="margin-right: 8px"
              v-if="flagBtn.daochu == 1"
              type="primary"
              @click="importExcel"
              plain
              >导出</el-button
            >
          </div>
        </div>
      </div>
      <div class="footer" v-loading="loading">
        <el-table
          :data="tableData.list"
          style="width: 100%"
          :header-cell-style="{
            background: 'rgba(240, 243, 247, 1)',
            height: '50px',
          }"
        >
          <el-table-column
            width="200"
            align="center"
            prop="dateName"
            label="日期/星期"
          />
          <el-table-column
            width="150"
            align="center"
            prop="remarks"
            show-overflow-tooltip
            label="有无替换"
          >
          </el-table-column>
          <el-table-column align="center" v-for="i in tableHead" width="100">
            <template #header>
              <div>教师资格</div>
            </template>
            <template #default="{ row }">
              <div v-if="row.list[i - 1]">
                <el-checkbox
                  @change="selDelChange($event, row.list[i - 1])"
                  v-model="row.list[i - 1].selDel"
                  size="large"
                  >{{ row.list[i - 1].jsxm }}</el-checkbox
                >
              </div>
              <span v-else></span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog
        class="addStaff"
        v-model="addDialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :title="dialongTitle"
        align-center
        width="480"
        :before-close="cancelAdd"
      >
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          :size="formSize"
          label-position="left"
          status-icon
        >
          <el-form-item label="微校卡号 :" prop="cardNum">
            <!-- <el-input
              v-model="ruleForm.cardNum"
              placeholder="请输入微校卡号"
              clearable
              :disabled="dialongTitle == '编辑信息'"
            /> -->
            <el-select
              v-model="ruleForm.cardNum"
              popper-class="more-tag-data"
              filterable
              remote
              :remote-method="conteactMethod"
              placeholder="请选择微校卡号"
              style="width: 200px"
              @change="schoolCardChange"
            >
              <el-option
                v-for="item in schoolCardList"
                :key="item.id"
                :label="item.cardNumber"
                :value="item.cardNumber"
              >
                <div style="float: left">
                  <span style="display: inline-block; width: 80px">{{
                    item.userName
                  }}</span>
                  <span style="display: inline-block; width: 120px"
                    >部门 : {{ item.departmentName }}</span
                  >
                  <span>微校卡号 : {{ item.cardNumber }}</span>
                </div>
              </el-option>
              <template #footer>
                <div class="addStudentMore">
                  <el-button
                    v-if="
                      schoolCardPage < schoolCardTotalPage &&
                      schoolCardTotalPage != 0
                    "
                    @click="addschoolCardListMore"
                    >加载更多+</el-button
                  >
                </div>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名 :" prop="corpnName">
            <el-input
              v-model.trim="ruleForm.corpnName"
              placeholder="请输入姓名"
              clearable
              :disabled="true"
            />
          </el-form-item>
          <!-- <el-form-item label="手机号码 :" prop="corpnPhone">
            <el-input
              v-model="ruleForm.corpnPhone"
              placeholder="请输入手机号码"
              clearable
              :disabled="true"
            />
          </el-form-item> -->
          <el-form-item label="日期 :" style="width: 400px" prop="dataTime">
            <el-date-picker
              v-model="ruleForm.dateTime"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :prefix-icon="Calendar"
              placeholder="请选择日期"
              
            />
          </el-form-item>
          <el-form-item class="options">
            <el-button
              color="rgba(0, 97, 255, 1)"
              class="queding"
              type="primary"
              @click="submitAdd(ruleFormRef)"
            >
              确定
            </el-button>
            <el-button @click="cancelAdd(ruleFormRef)">取消</el-button>
          </el-form-item>
          
        </el-form>
      </el-dialog>

      <!-- 分页组件 -->
      <div class="pageSize">
        <span></span>
        <el-pagination
          background
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper, slot"
          :total="total"
          @update:current-page="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  nextTick,
  watch,
  onBeforeMount,
  onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Calendar } from "@element-plus/icons-vue";
import vidiconsApi from "@/api/vidicons.js";
import { dayjs } from "element-plus";
import lodash from "lodash";
import axios from "axios";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();
const flagBtn = ref(); // 按钮权限
// 表格数据(-----------------------------------)
const loading = ref(false);
const tableHead = ref(20); // 表头循环日期
const tableData = reactive({
  list: [
    { time: "2023/10/11  星期一", name: "张发财替换张晓才" },
    { time: "2023/10/11  星期一", name: "张发财替换张晓才" },
  ],
});
const currentPage = ref(1); // 当前页
const pageSize = ref(10);
const total = ref(); // 当前总数
// 下拉框数据
const changePriceSelect = ref();
// const selectData = reactive({ list: [] }); // 多选框选择的数据
// 搜索按钮数据
const searchInput = reactive({
  keyWord: "",
  createTime: [],
});

const dialongTitle = ref("新增值班教师"); // 弹窗标题
const schoolCardList = ref();
const schoolCardSearch = ref(); // 微信卡号下拉框搜索词
const schoolCardPage = ref(1);
const schoolCardSize = ref(20);
const schoolCardTotalPage = ref();
const addDialogVisible = ref(false); // 控制添加账号弹窗

const defaultProps = ref({
  children: "children",
  label: "name",
});
// 表单数据
const formSize = ref("default");
const ruleFormRef = ref();
const ruleForm = reactive({
  cardNum: "", // 微校卡号
  corpnName: "", // 姓名
  // corpnPhone: "", // 电话号码
  dateTime:"",// 日期
  id: "",
});
var checkUserName = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("请输入用户名）"));
  }

  var reg = /^[a-zA-Z0-9]{5,16}$/;
  if (!reg.test(value)) {
    callback(new Error("必须为5-16个数字或字母！"));
  } else {
    callback();
  }
};
var checkFullName = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("请输入姓名"));
  }

  var reg = /^[\u4e00-\u9fa5]{2,6}$/;
  if (!reg.test(value)) {
    callback(new Error("必须为2-6个汉字！"));
  } else {
    callback();
  }
};
var checkPhone = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("请输入手机号"));
  }
  setTimeout(() => {
    var reg = /^1[3456789]\d{9}$/;
    if (!reg.test(value)) {
      callback(new Error("手机号格式不对"));
    } else {
      callback();
    }
  }, 100);
};
// 表单验证
const rules = reactive({
  corpnName: [
    { required: true, message: "姓名不能为空", trigger: "blur" },
    { validator: checkFullName, trigger: "blur" },
  ],
  cardNum: [{ required: true, message: "微校卡号不能为空", trigger: "blur" }],
  // ^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$
  corpnPhone: [
    {
      required: true,
      message: "电话号码不能为空",
      trigger: "blur",
    },
    // { validator: checkPhone, trigger: "blur" },
  ],
  dateTime: [
    {
      required: true,
      message: "时间不能为空",
      trigger: "blur",
    },
    // { validator: checkPhone, trigger: "blur" },
  ],
});

// 查看员工列表
const getList = async () => {
  loading.value = true;
  let data = {
    teacherName: searchInput.keyWord, // 关键字查询
    stateTime: "",
    endTime: "",
  };
  if (searchInput.createTime) {
    data.stateTime = searchInput.createTime[0];
    data.endTime = searchInput.createTime[1];
  }
  let res = await axios({
    method: "get",
    url: api.value + "/class-schedule/schedule",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    params: data,
  });
  console.log(res, "值班管理");
  if (res.data.code == 200) {
    let maxNum = 0;
    res.data.data.forEach((item) => {
      item.list = item.classListVo.list;
      if (item.list) {
        item.list.forEach((j) => {
          j.selDel = false;
        });
      }
      item.remarks = item.classListVo.remarks;
      if (item.classListVo.list.length > maxNum) {
        maxNum = item.classListVo.list.length;
      }
    });
    tableHead.value = maxNum;
    console.log(maxNum);
    tableData.list = res.data.data;
    loading.value = false;
  } else {
    loading.value = false;
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 勾选删除功能
const selDelChange = (val, row) => {
  console.log(val, row);
  row.selDel = val;
  // console.log(tableData.list);
};
// 确定删除
const delClass = async () => {
  let arrId = [];
  tableData.list.forEach((item) => {
    if (item.list) {
      item.list.forEach((j) => {
        if (j.selDel) {
          arrId.push(j.id);
        }
      });
    }
  });
  console.log(arrId);
  let res = await axios({
    method: "post",
    url: api.value + "/class-schedule/deleteSchedule",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: arrId,
  });
  console.log(res, "房价管理");
  if (res.data.code == 200) {
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 搜索功能  改变日期和房型改变数据
const searchBtn = lodash.debounce(async () => {
  getList();
}, 300);

// 微校卡号数据 (-----------------------------------------------------)
const schoolData = async () => {
  schoolCardPage.value = 1;
  let data = {
    permissionSettingId: sessionStorage.getItem("permissionSettingId"),
    page: schoolCardPage.value,
    size: schoolCardSize.value,
    keyWord: schoolCardSearch.value,
  };
  let res = await axios({
    method: "post",
    url: api.value + "/admin/getUsersPage",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  console.log(res, "微校卡号人");
  if (res.data.code == 200) {
    schoolCardList.value = res.data.data.records;
    schoolCardTotalPage.value = res.data.data.pages;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 微校卡号搜索
const conteactMethod = (query) => {
  console.log(query);
  schoolCardSearch.value = query;
  schoolData();
};
// 加载更多微校卡号
const addschoolCardListMore = async () => {
  if (schoolCardPage.value < schoolCardTotalPage.value) {
    schoolCardPage.value++;
    // console.log(conteactListInput.value, "滚动里面");
    let data = {
      permissionSettingId: sessionStorage.getItem("permissionSettingId"),
      page: schoolCardPage.value,
      size: schoolCardSize.value,
      keyWord: schoolCardSearch.value,
    };
    let res = await axios({
      method: "post",
      url: api.value + "/admin/getUsersPage",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("user_head"),
      },
      data: data,
    });
    console.log(res, "微校卡号人员加载更多");
    if (res.data.code == 200) {
      // schoolCardList.value = res.data.data.records;
      // schoolCardTotalPage.value = res.data.data.pages;
      schoolCardList.value = [
        ...schoolCardList.value,
        ...res.data.data.records,
      ];
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  } else {
    console.log("数据全部加载完成");
  }
};
// 改变微校卡号
const schoolCardChange = async (value) => {
  console.log(value);
  let data = {
    permissionSettingId: sessionStorage.getItem("permissionSettingId"),
    page: 1,
    size: 20,
    keyWord: value,
  };
  let res = await axios({
    method: "post",
    url: api.value + "/admin/getUsersPage",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  console.log(res, "微校卡号人");
  if (res.data.code == 200) {
    let resdata = res;
    ruleForm.corpnName = res.data.data.records[0].userName;
    ruleForm.corpnPhone = res.data.data.records[0].phone;
    ruleForm.department = res.data.data.records[0].department;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 添加账号 （---------------------------------===============================）
const addClass = () => {
  dialongTitle.value = "新增值班教师";
  addDialogVisible.value = true;
  // ruleForm.corpnPhone = "";
  ruleForm.corpnName = "";
  ruleForm.cardNum = "";
  ruleForm.dateTime = "";
  ruleForm.id = "";
};
// 取消添加员工
const cancelAdd = () => {
  addDialogVisible.value = false;
  ruleFormRef.value.resetFields();
};

// 确认添加值班老师
const submitAdd = lodash.debounce(async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let data ={
      	"jsgh": ruleForm.cardNum, //微校卡号
      	"jsxm": ruleForm.corpnName,
      	"dateTime": ruleForm.dateTime //日期
      }
      let res = await axios({
        method: "post",
        url: api.value + "/class-schedule/insertSchedule",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("user_head"),
        },
        data: data,
      });
      console.log(res, "确认添加值班老师");
      if (res.data.code == 200) {
        getList();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
        addDialogVisible.value = false;
        ruleFormRef.value.resetFields();
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
}, 1000);

// 导入 (--------------------------------------------------------------)
const handleRemove = (uploadFile, uploadFiles) => {
  // console.log(uploadFile.uid, uploadFiles);
};
// 点击图片的查看按钮
const handlePreview = (file) => {
  // console.log(file);
};
// 限制上传图片的大小
const beforeAvatarUpload = (rawFile) => {
  console.log(rawFile.type);
  // if (rawFile.type !== "image/jpeg") {
  //   ElMessage.error("图片格式必须为JPG/PNG格式!");
  //   return false;
  // }
  // return true;
};
// 添加照片时往fileList列表中添加图片信息
const handleChange = async (file, fileLists) => {
  // console.log(file, "1111");
};
// 可以获取图片参数
const handleUpload = async (file) => {
  console.log(file, "22222222");
  let data = new FormData();
  data.append("file", file.file);
  let res = await axios({
    method: "post",
    url: api.value + "/class-schedule/uploadSchedule",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  console.log(res, "导入课表信息");
  if (res.data.code == 200) {
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

//导出功能
const importExcel = lodash.debounce(async () => {
  let data = {
    teacherName: searchInput.keyWord, // 关键字查询
    stateTime: "",
    endTime: "",
  };
  if (searchInput.createTime) {
    data.stateTime = searchInput.createTime[0];
    data.endTime = searchInput.createTime[1];
  }
  let res = await axios({
    method: "get",
    url: api.value + "/class-schedule/downloadSchedule",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    params: data,
    responseType: "blob",
  });
  console.log(res, "导出课表信息");
  if (res.status == 200) {
    let name = `课表数据`;
    var content = res.data;
    var datas = new Blob([content]);
    var downloadUrl = window.URL.createObjectURL(datas);
    var anchor = document.createElement("a");
    anchor.href = downloadUrl;
    anchor.download = name + ".xlsx";
    anchor.click();
    window.URL.revokeObjectURL(datas);
    ElMessage({
      type: "success",
      showClose: true,
      message: "导出成功",
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
}, 1000);

// 表格斑马纹颜色修改
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "even";
  } else if (rowIndex % 2 !== 0) {
    return "odd";
  }
  return "";
};

// 分页
const handleCurrentChange = (value) => {
  // console.log(value);
  currentPage.value = value;
  getList();
};
// 分页
const handleCurrentChange2 = (value) => {
  // console.log(value);
  recordPage.value = value;
  recordPriceData();
};

onBeforeMount(async () => {
  api.value = store.state.user.api;
  const btnflag = JSON.parse(sessionStorage.getItem("btnflag"));
  flagBtn.value = btnflag.classs;
  console.log(flagBtn.value, "按钮权限");

  const startTime = dayjs().format("YYYY-MM-DD");
  const endTime = dayjs(startTime).add(6, "day").format("YYYY-MM-DD");
  searchInput.createTime = [startTime, endTime];
  // const data = {
  //   managerId: sessionStorage.getItem("token"),
  // };
  // let res = await axios({
  //   method: "get",
  //   url: api.value + "/mhotel/house/price/queryHouseListByManagerId.action",
  //   headers: {
  //     token: sessionStorage.getItem("token"),
  //     user_head: sessionStorage.getItem("userhead"),
  //   },
  //   params: data,
  // });
  // console.log(res, "改价下拉框数据");
  // changePriceSelect.value = res.data.data;
  // recordRoomType.value = res.data.data;
  // changePirceRoomType.value = res.data.data;
  // searchInput.changePriceSelId = changePriceSelect.value[0].id;
  getList();
});
</script>

<style scoped lang="scss">
.content-box {
  width: calc(100% - 40px);
  height: calc(100% - 105px);
  margin: 20px auto;
  background-color: #fff;
  color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);

  .left {
    // width: calc(100wh - 40px);
    display: flex;
    align-items: center;
    height: 60px;
    margin: 0 30px;
    border-bottom: 1px solid #ccc;
    color: rgb(0, 0, 0);
    font-size: 18px;
    font-weight: 600;

    span {
      margin-right: 20px;
      cursor: pointer;
    }

    .is_active {
      color: rgba(111, 182, 184, 1);
    }
  }

  .middle {
    width: calc(100% - 60px);
    margin: 0 auto;
    padding:0 0 16px 0;
    color: #000;

    // border-bottom: 1px solid rgb(231, 231, 231);
    .filter {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .filter_block {
        display: flex;
        .avatar-uploader {
          margin-right: 20px;
          :deep(.el-upload-list) {
            display: none;
          }
        }
      }

      .search {
        color: #fff;
      }

      .condition {
        display: flex;
        align-items: center;
        margin: 10px 30px 10px 0;

        :deep(.el-input .el-input__inner) {
          font-size: 14px;
        }
      }
    }

    .gongneng {
      margin: 10px 0 20px 0;

      span {
        color: #fff;
      }
    }

    :deep(.cont) {
      width: 60%;
      margin: 20px auto;
    }
  }
  .scroll{
    height: calc(100% - 61px);
    display: flex;
    flex-direction: column;
  }
  .footer {
    width:calc(100% - 60px);
    flex: 1;
    margin: 0 auto ;
    overflow: auto;

    .el-table--fit {
      height: 100%;

      :deep(.el-table__header-wrapper) {
        background-color: #fff;
        font-size: 15px;

        tr {
          color: #000;
        }
      }

      :deep(.el-table__row) {
        height: 50px;
        font-size: 15px;
        color: #000;
      }

      :deep(.el-table__row td) {
        padding: 0;
        // border: 0;
        // border: 1px solid #ccc;
      }
    }
  }

  .pageSize {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 30px;

    span {
      color: #000;
    }

    .el-pagination {
      // width: 1600px;
      :deep(.el-pagination__total) {
        color: #000;
      }

      :deep(.el-pagination__goto) {
        color: #000;
      }

      :deep(.el-pagination__classifier) {
        color: #000;
      }

      :deep(.el-input__wrapper) {
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        box-shadow: none;
      }

      :deep(.el-pager li) {
        margin: 0 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }

      :deep(.el-pager li.is-active) {
        // background-color: rgba(111, 182, 184, 1);
        border: 1px solid rgba(0, 97, 255, 1);
        color: rgba(0, 97, 255, 1);
      }

      :deep(.btn-prev) {
        margin-right: 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }

      :deep(.btn-next) {
        margin-left: 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }
    }
  }
  // 添加员工弹窗样式
  :deep(.addStaff) {
    //   height: 420px;
    border-radius: 11px;
    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;
      .el-dialog__headerbtn {
        outline: none;
      }
    }
    .el-dialog__body {
      padding: 20px 20px 10px 20px;
      .el-input {
        width: 200px;
        .el-input__suffix-inner {
          color: rgba(61, 81, 232, 1);
        }
      }

      .options {
        margin: 10px 20px 20px 0;
        width: 100%;
        .el-form-item__content {
          display: flex;
          flex-direction: row-reverse;
        }
        .queding {
          color: #fff;
          margin-left: 15px;
        }
      }
    }
  }
  // 批量改价
  :deep(.roomCloseDilog) {
    // height: 540px;
    border-radius: 11px;

    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;

      .el-dialog__headerbtn {
        outline: none;
      }
    }

    .el-dialog__body {
      padding: 0;

      // 上一步页面样式
      .first {
        ul {
          width: 316px;
          height: 324px;
          list-style: none;
          padding: 0;
          margin: 0;
          border: 1px solid rgba(230, 230, 230, 1);
          box-sizing: border-box;
          overflow: auto;

          li {
            display: flex;
            justify-content: space-between;
            padding-right: 17px;
            align-items: center;
            margin-top: 5px;

            .el-icon-close {
              cursor: pointer;
              width: 10px;
              height: 10px;
            }
          }
        }
      }

      .options {
        width: 96%;
        display: flex;
        flex-direction: row-reverse;
        padding: 30px 0;

        .queding {
          margin-left: 20px;
          color: #fff;
        }
      }

      // 批量改价样式
      .last {
        .hint {
          background-color: #e6ecfa;
          border: 1px solid #053dc8;
          display: flex;
          align-items: center;
          padding: 6px 24px;
          color: #000;

          img {
            width: 16px;
            margin: 0 3px;
          }
        }

        .roomUl {
          display: flex;
          flex-direction: column;

          color: #000;

          // align-items: center;
          .title {
            width: 100px;
            text-align: right;
            color: #000;
            margin: 20px 0;
            font-weight: 600;
            font-size: 16px;
          }

          .delRoom {
            width: 80%;
            margin-left: 40px;

            .date {
              width: 80px;
              height: 100%;
              transform: translateY(6px);
            }

            .el-input__wrapper {
              max-width: 350px;
            }

            .el-table--fit {
              .el-table__header-wrapper {
                background-color: #000;
                font-size: 14px;

                tr {
                  color: #000;
                }
              }

              .el-table__row {
                height: 40px;
                font-size: 14px;
                color: #000;
              }

              .el-table__row td {
                padding: 0;
                border: 0;

                .el-input__wrapper {
                  // border: 1px solid red;
                  max-width: 100px;
                  // box-shadow: none;
                  // background-color: transparent;
                  transform: translateX(46px);

                  .el-input__inner {
                    text-align: center;
                  }
                }
              }

              .el-table__body .even {
                background-color: #fff;
              }

              .el-table__body .odd {
                background-color: rgba(233, 242, 242, 1);
              }
            }
          }
        }

        .roomTime {
          margin: 10px 0;

          .delRoom {
            display: flex;
            align-items: flex-start;

            .el-input__wrapper {
              max-width: 350px;
            }

            // 选择日期
            .addDate {
              width: 450px;

              .addTime {
                display: flex;
                align-items: center;

                .imgTime {
                  display: flex;
                  align-items: center;
                  cursor: pointer;

                  img {
                    width: 15px;
                    margin-right: 5px;
                  }
                }

                span {
                  color: #096562;
                }

                .num {
                  font-size: 10px;
                  color: #a6a6a6;
                  margin-left: 10px;
                }
              }

              .elDate {
                max-height: 180px;
                overflow: auto;

                .time_li {
                  display: flex;
                  align-items: center;
                  margin-bottom: 10px;

                  img {
                    width: 22px;
                    height: 22px;
                    margin: 0 10px;
                    transform: rotate(45deg);
                    cursor: pointer;
                  }
                }
              }
            }
          }
        }

        .textarea {
          border-bottom: 1px solid #e9eaed;
          padding-bottom: 25px;

          .delRoom {
            width: 510px;
          }
        }
      }
    }
  }

  // 改价记录
  :deep(.recordDilog) {
    // height: 600px;
    overflow: hidden;
    border-radius: 11px;

    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;

      .el-dialog__headerbtn {
        outline: none;
      }
    }

    .el-dialog__body {
      overflow: auto;
      padding: 0px 20px 10px 20px;

      .middle {
        width: 96%;
        margin: 0 auto;

        color: #000;

        // border-bottom: 1px solid rgb(231, 231, 231);
        .filter {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          margin: 10px 0 0 0;
          justify-content: start;

          .search {
            color: #fff;
          }

          .condition {
            display: flex;
            align-items: center;
            margin: 10px 30px 10px 0;

            :deep(.el-input .el-input__inner) {
              font-size: 14px;
            }

            // span {
            //   margin: 0 10px 0 0;
            // }
          }
        }

        .gongneng {
          margin: 10px 0 20px 0;

          span {
            color: #fff;
          }
        }

        :deep(.cont) {
          width: 60%;
          margin: 20px auto;
        }

        :deep(.download) {
          display: flex;
          align-items: center;
          margin: 10px;
        }

        :deep(.download span) {
          font-size: 16px;
          margin-left: 20px;
        }

        :deep(.cont .el-button) {
          margin-left: 60px;
          margin-bottom: 30px;
        }

        :deep(.cont .accomplish) {
          width: 100%;
          display: flex;
          justify-content: center;
        }

        :deep(.cont .accomplish .el-button) {
          width: 50%;
          margin: 0;
        }
      }

      .pageSize {
        margin: 10px 0 10px 0;
      }
      
      .footer {
        width: 96%;
        // height: 402px;
        margin: 10px auto 20px;

        .el-table--fit {
          height: 100%;

          .el-table__header-wrapper {
            background-color: #000;
            font-size: 15px;

            tr {
              color: #000;
            }
          }

          .el-table__row {
            height: 50px;
            font-size: 15px;
            color: #000;

            .orderNum {
              color: rgba(111, 182, 184, 1);
              cursor: pointer;
            }
          }

          .el-table__row:nth-child(2n) {
            .el-table-fixed-column--right {
              background-color: rgba(240, 243, 247, 1);
            }
          }

          .el-table__row td {
            padding: 0;
            border: 0;
          }

          .el-button--primary {
            margin-left: 5px;
          }

          .el-table__body .even2 {
            background-color: #fff;
          }

          .el-table__body .odd2 {
            background-color: rgba(240, 243, 247, 1);
          }
        }
      }
    }
  }
}

.el-input {
  width: 192px;
}
</style>
