<template>
  <a-drawer
    :visible="addfaceteachVisible"
    class="drawerStyle addfaceteachDrawer"
    width="90%"
    title="添加面授"
    placement="right"
    @after-visible-change="afterVisibleChange"
  >
    <div class="drawerMain">
      <div class="header">
        <div v-if="edit" class="headerTitle">编辑面授</div>
        <div v-else class="headerTitle">添加面授</div>
        <img
          style="width: 29px; height: 29px; cursor: pointer"
          src="../../assets/images/basicinfo/close.png"
          @click="closeDrawer"
        />
      </div>
      <div class="contentMain">
        <div class="main_left">
          <div class="main_item">
            <div class="signbox">
              <div class="sign">
                <img
                  src="@/assets/images/coursewareManage/asterisk.png"
                  alt=""
                />
              </div>
              <span style="margin-right: 3px">任务名称：</span>
            </div>
            <div class="btnbox">
              <a-input
                v-model:value="courseName"
                style="width: 400px; height: 40px; border-radius: 8px;"
                placeholder="请输入课程任务名称"
                :maxlength="20"
              />
            </div>
          </div>
          <div class="main_item">
            <div class="signbox">
              <div class="sign">
                <img
                  src="@/assets/images/coursewareManage/asterisk.png"
                  alt=""
                />
              </div>
              <span style="margin-right: 3px">选择课程：</span>
            </div>
            <div class="btnbox">
              <button class="xkbtn" @click="showDrawerSelFacet">
                {{ chooseCourse ? "重选" : "选择" }}面授课
              </button>
              <div v-if="chooseCourse">
                <a-tag closable color="processing" @close="logC">
                  <span style="font-size: 14px; line-height: 33px">{{
                    chooseCourseName
                  }}</span>
                </a-tag>
              </div>
            </div>
            <!-- 选择面授侧弹窗 -->
            <div>
              <sel-facet
                v-model:selfacetVisible="selfacetvisible"
                v-model:chooseCourse="chooseCourse"
                v-model:chooseCourseName="chooseCourseName"
              />
            </div>
            <!-- 选择面授侧弹窗 -->
          </div>
        
          <div class="main_item">
            <div class="signbox">
              <div class="sign">
                <img
                  src="@/assets/images/coursewareManage/asterisk.png"
                  alt=""
                />
              </div>
              <span style="margin-right: 3px">授课教师：</span>
            </div>
            <div class="select"  style="width: 400px;">
              <!--              <a-auto-complete placeholder="选择老师" :value="memberValue.label" style="width: 364px"-->
              <!--                               :options="options" @change="handleChange2" @search="handleSearch"></a-auto-complete>-->
              <ProjectManager
                v-model:value="memberValue.value"
                v-model:name="memberValue.label"
              ></ProjectManager>
            </div>
          </div>
          <div class="main_item">
            <div class="signbox">
              <div class="sign">
                <img
                  src="@/assets/images/coursewareManage/asterisk.png"
                  alt=""
                />
              </div>
              <span style="margin-right: 3px">面授时间：</span>
            </div>
            <div class="select" >
              <a-range-picker style="width: 400px;"
                :show-time="{ format: 'HH:mm' }"
                :disabled-date="disabledDate" :disabled-time="disabledRangeTime" 
                format="YYYY/MM/DD HH:mm"
                v-model:value="chooseTime"
                :placeholder="['      开始时间', '        结束时间']"
              />
            </div>
          </div>
          <div class="main_item">
            <div class="signbox">
              <div class="sign">
                <img
                  src="@/assets/images/coursewareManage/asterisk.png"
                  alt=""
                />
              </div>
              <span style="margin-right: 3px">面授时长：</span>
            </div>
            <div class="select">
              <a-input-number
                :min="0"
                :max="300"
                :precision="0"
                style="width: 400px; height: 40px; border-radius: 8px;"
                v-model:value="duration"
              ></a-input-number>
              <span style="margin-left: 5px; width: 30px">分</span>
            </div>
          </div>
          <div class="main_item">
            <div class="signbox">
              <div class="sign">
              
              </div>
              <span style="margin-right: 3px">上课地点：</span>
            </div>
            <div class="select">
              <a-input
                v-model:value="address"
                style="width: 400px; height: 40px; border-radius: 8px;"
                placeholder="请输入上课地址"
                :maxlength="100"
              />
            </div>
          </div>
          <div class="main_item2">
            <div class="signbox">
              <span style="margin-right: 3px">面授说明：</span>
            </div>
            <div class="textarea">
              <a-textarea
                v-model:value="description"
                placeholder="请输入说明"
                allow-clear
                show-count
                :maxlength="200"
                :rows="6"
              />
            </div>
          </div>
          <div class="main_item2">
            <div class="signbox">
              <span style="margin-right: 3px">考勤设置：</span>
            </div>
            <div class="kqszbox">
              <div class="qdqtbox">
                <div class="qdbtn">
                  <div class="btntext">签到</div>
                </div>
              </div>
              <div class="setbox">
                <div class="timerbox">
                  <span>开始前：</span>
                  <a-input-number
                    :min="0"
                    :max="300"
                    :precision="0"
                    style="
                      width: 100px;
                      height: 32px;
                      border-radius: 8px;
                      overflow: hidden;
                    "
                    v-model:value="before"
                  ></a-input-number>
                  <span style="color: #999999; margin-left: 8px">分钟</span>
                </div>
                <div class="timerbox">
                  <span>开始后：</span>
                  <a-input-number
                    :min="0"
                    :max="300"
                    :precision="0"
                    style="
                      width: 100px;
                      height: 32px;
                      border-radius: 8px;
                      overflow: hidden;
                    "
                    v-model:value="afterStartValue"
                  ></a-input-number>
                  <span style="color: #999999; margin-left: 8px">分钟</span>
                </div>
              </div>
            </div>
          </div>
          <!--
          <div class="main_item">
            <div class="signbox">
              <span style="margin-right: 3px">完成标准设置：</span>
            </div>
            <div class="btnbox">
              <a-checkbox
                v-model:checked="onlySign"
                @click="onlySign = !onlySign"
                >仅签到</a-checkbox
              >
            </div>
          </div>
          <div class="main_item">
            <div class="signbox">
              <span style="margin-right: 3px">其他设置：</span>
            </div>
            <div class="btnbox">
              <a-checkbox
                v-model:checked="completeLeave"
                @click="completeLeave = !completeLeave"
                >学员请假后记为任务完成
              </a-checkbox>
            </div>
          </div>
           -->

          <div class="main_item">
            <div class="signbox">
              <span style="margin-right: 3px">现场参与：</span>
            </div>
            <div class="btnbox">
              <a-checkbox
                v-model:checked="innerPersion"
                @click="innerPersion = !innerPersion"
                >允许项目内人员临时到场参加
              </a-checkbox>
            
            </div>
            <div class="btnbox">
            
              <a-checkbox
                v-model:checked="outPersion"
                @click="outPersion = !outPersion"
                >允许项目外人员临时到场参加
              </a-checkbox>
            </div>
          </div>
          <div class="main_item2">
            <div class="signbox">
              <span style="margin-right: 3px">评估：</span>
            </div>
            <div class="btnbox2">
              <a-checkbox
                v-model:checked="needEval"
                @click="needEval = !needEval"
                >需要评估</a-checkbox
              >
            </div>
          </div>
          <div v-if="needEval" class="main_item">
            <div class="signbox"></div>
            <div class="btnbox">
              <button class="xkbtn" @click="showAssessment">选择评估</button>
              <div v-if="assessmentName">
                <a-tag closable color="processing" @close="logA">
                  <span style="font-size: 14px; line-height: 33px">{{
                    assessmentName
                  }}</span>
                </a-tag>
              </div>
              <AssessmentList
                v-model:assessmentVisible="assessmentVisible"
                v-model:assessmentId="assessmentId"
                v-model:assessmentName="assessmentName"
              />
            </div>
          </div>
        </div>
        <div class="main_right">
          <div class="main_item">
            <div class="signbox">
              <span style="margin-right: 3px">配置作业：</span>
            </div>
            <div class="btnbox" @click="showDrawerAddHomework">
              <button class="xkbtn">配置</button>
            </div>

            <!-- 添加作业侧弹窗 -->
            <div>
              <add-homework
                v-model:addhomeworkVisible="addhomeworkvisible"
                @getWork="getWork"
                :faceLevel="true"
                v-model:EditWorkId="EditWorkId"
                v-model:workName="workName"
              />
            </div>
            <!-- 添加作业侧弹窗 -->
          </div>
          <div v-if="EditWorkId > 0" class="main_item">
            <div class="signbox">
              <span style="margin-right: 3px">已选作业：</span>
            </div>
            <div class="btnbox" @click="showDrawerAddHomework">
              <a-tag closable color="processing" @close="logW">
                <span style="font-size: 14px; line-height: 33px">{{
                  workName
                }}</span>
              </a-tag>
            </div>


          </div>
          <div class="main_item">
            <div class="signbox">
              <span style="margin-right: 3px">配置考试：</span>
            </div>
            <div class="btnbox" @click="showDrawerAddTest">
              <button class="xkbtn">配置</button>
            </div>
            <!-- 添加考试侧弹窗 -->
            <div>
              <add-test
                v-model:addtestVisible="addtestvisible"
                v-model:EditTestId="EditTestId"
                v-model:testName="testName"
                :faceLevel="true"
              />
            </div>
            <!-- 添加考试侧弹窗 -->
          </div>
          <div v-if="EditTestId > 0" class="main_item">
            <div class="signbox">
              <span style="margin-right: 3px">已选考试：</span>
            </div>
            <div class="btnbox">
              <a-tag closable color="processing" @close="logT">
                <span style="font-size: 14px; line-height: 33px">{{
                  testName
                }}</span>
              </a-tag>
            </div>
          </div>
        	<div class="mbl_items">
							<div class="item_nam">
							<span style="margin-right: 10px"></span>
							</div>
							<div class="item_inp">
							<FJUpload v-model:value="attach" @changevalue="changevalue"/>
							</div>
						</div>
        </div>
      </div>
      <div class="main_btns">
        <button class="btn1" @click="exitAdd">取消</button>
        <button class="btn2" @click="updateFaceTeach">确定</button>
      </div>
    </div>
  </a-drawer>
</template>
<script>
import { reactive, toRefs, ref } from "vue";
import SelFacet from "../../components/drawers/SelFacet.vue";
import AddHomework from "../../components/drawers/AddHomework.vue";
import AddTest from "../../components/drawers/AddTest.vue";
import { ProjectEditTask, RouterEditTask } from "@/api/indexTask";
// import * as method from "../../api/method"
import { message } from "ant-design-vue";
import { getMemberInfo } from "@/api/index1";
import { debounce } from "lodash-es";
import { queryFaceDetailById, editPlan } from "../../api/indexFace";
import dayjs from "dayjs";
import AssessmentList from "@/components/drawers/AssessmentList.vue";

// import { toDate } from "../../api/method";、
import { addTempTask } from "../../api/indexTaskadd";
import ProjectManager from "@/components/project/ProjectManagerNew";
import FJUpload from "@/components/common/FJUpload";
import { detail } from "../../api/indexCourse";
import { queryAppraiseDetailById } from "../../api/indexInvist";
import { queryWorkDetailById } from "@/api/indexWork";
import { queryExaminationDetailById } from "@/api/indexExam";
import {FILE_UPLOAD_URL} from "@/api/config";
export default {
  name: "AddFaceteach",
  components: {
    SelFacet,
    AddHomework,
    AddTest,
    AssessmentList,
    ProjectManager,
    FJUpload,
  },
  props: {
    addfaceteachVisible: {
      type: Boolean,
      default: false,
    },
    EditFaceId: {
      // 要编辑的workId
      type: Number,
      default: null,
    },
    edit: {
      //  是否为编辑
      type: Boolean,
      default: null,
    },
    projectId: {
      type: Number,
      default: null,
    },
    chooseStageId: {
      type: Number,
      default: null,
    },
    routerTaskId: {
      type: Number,
      default: 0,
    },
    isLevel: {
      // 是否是关卡页面触发
      type: Number,
      default: null,
    },

    projectTaskId: {
      // 要编辑的projectId
      type: Number,
      default: null,
    },
    routerId: {
      type: Number,
      default: null,
    },
    isactive: {
      type: Number,
      default: null,
    },
    projectTemplateId: {
      type: Number,
      default: null,
    },
    projectName: {
      type: String,
      default: null,
    },
  },
  setup(props, ctx) {
    const options = ref([]);
    const state = reactive({
      loading: false,
      selfacetvisible: false,
      addhomeworkvisible: false,
      addtestvisible: false,
      memberValue: {
        value: "",
        label: "",
      },
      fetching: false,
      totalPages: 0,
      currentPage: 1,
      tableDataTotal: 100,
      memberId: 0,
      pageSize: 10,
      courseName: "",
      duration: null,
      address: null,
      before: null,
      afterStartValue: null,
      description: "",
      chooseTime: [],
      fileList: [],
      chooseCourse: null, //选择的在线课程
      chooseCourseName: null, //选择的在线课程
      assessmentId: null,
      EditTestId: null,
      EditWorkId: null,
      workName: null,
      testName: null,
      assessmentVisible: false,
      needEval: false,
      onlySign: false,
      completeLeave: false,
      innerPersion: false,
      outPersion: false,
      assessmentName: null,
      isClick: false,
      attach:"",

    });
    const clear = () => {
      state.courseName = "";
      state.memberValue = {};
      state.duration = null;
      state.address = null;
      state.before = null;
      state.afterStartValue = null;
      state.chooseTime = [];
      state.description = "";
      state.onlySign = false;
      state.completeLeave = false;
      state.innerPersion = false;
      state.outPersion = false;
      state.chooseCourse = null;
      state.EditTestId = null;
      state.assessmentId = null;
      state.assessmentName ="";
      state.EditWorkId = null;
      state.EditEvalId = null;
      state.applyFlag = "";
      state.needEval = false;
      state.attach="";
    };
    const closeDrawer = () => {
      ctx.emit("update:addfaceteachVisible", false);
      ctx.emit("update:edit", false);
      localStorage.setItem("stageId", props.chooseStageId);
      localStorage.setItem("chapterId", props.isactive);
      state.fileList = [];
      clear();
    };
    const afterVisibleChange = (bool) => {
      if (bool && props.edit) {
        // 该页面显示同时 edit为true 时，发送查询请求,
        queryFaceTeach();
      }
    };

    const logC = (e) => {
      state.chooseCourse = null;
      state.chooseCourseName = null;
      console.log(e);
    };
    const logW = (e) => {
      state.EditWorkId = null;
      console.log(e);
    };
    const logT = (e) => {
      state.EditTestId = null;
      console.log(e);
    };
    const logA = (e) => {
      state.assessmentId = null;
      state.assessmentName ="";
      console.log(e);
    };

    const showDrawerSelFacet = () => {
      state.selfacetvisible = true;
    };
    const showDrawerAddHomework = () => {
      state.addhomeworkvisible = true;
    };
    const showDrawerAddTest = () => {
      state.addtestvisible = true;
    };
	// 删除文件返回参数
  const changevalue = (e) => {
			let arr = state.attach.split(',')
			let newarr = []
			for(let i=0;i<arr.length;i++){
				if(i!==e){
				newarr.push(arr[i])
				}
			}
			if(newarr.length==0){
				state.attach = "";
			}else{
				state.attach = newarr.toString()
			}
			console.log('changevalue', e, newarr,  state.attach)
		}
    //查询面授
    const queryFaceTeach = () => {
      queryFaceDetailById(props.EditFaceId).then((res) => {
        console.log("获取到了面授课开课详情", res.data.data);
        let result = res.data.data;
        state.courseName = result.name;
        state.description = result.description;
        state.memberValue = { value: result.teacherId, label: result.teacher };
        state.duration = result.duration;
        if (result.beginTime && result.endTime) {
          state.chooseTime = [
            dayjs(result.beginTime, "YYYY-MM-DD HH-mm"),
            dayjs(result.endTime, "YYYY-MM-DD HH-mm"),
          ];
        } else {
          state.chooseTime = [];
        }
        state.address = result.address;
        state.before = result.beforeStart;
        state.afterStartValue = result.afterStart;
      
        let arrss =result.attach.split(',')
					let str = ''
					for (let i = 0; i < arrss.length; i++) {
						i == arrss.length - 1 ? str += arrss[i].slice(arrss[i].lastIndexOf('/') + 1) : str += arrss[i].slice(arrss[i].lastIndexOf('/') + 1) + ','
					}
					console.log(str)
					state.attach = str;
        state.onlySign =
          result.completeType.split(",")[0] == "1" ? true : false;
        state.completeLeave =
          result.completeType.split(",")[1] == "1" ? true : false;
        state.chooseCourse = result.offcourseId;
        state.innerPersion =
          result.projectMember.split(",")[0] == "1" ? true : false;
        state.outPersion =
          result.projectMember.split(",")[1] == "1" ? true : false;
        state.EditTestId = result.testId;
        state.EditWorkId = result.homeWorkId;
        state.assessmentId = result.evaluateId;
        state.needEval = result.evalFlag == 1? true:false;
        console.log("==state.needEval ==",state.needEval );
        if(result.offcourseId){
          detail({offcourseId:result.offcourseId}).then((res)=>{
          state.chooseCourseName =res.data.data.name;
          console.log(" state.chooseCourseName", state.chooseCourseName);

        });
        }
        if(result.evalFlag == 1 && result.evaluateId){
          queryAppraiseDetailById({assessmentId:result.evaluateId}).then((res)=>{
          state.assessmentName =res.data.data.assessmentName;
        });
        }
        if(result.homeWorkId){
          queryWorkDetailById({workId:result.homeWorkId}).then((res)=>{
          state.workName = res.data.data.workName;
        });
        }
        if(result.testId){
          queryExaminationDetailById({ examinationId: result.testId }).then((res)=>{
          state.testName = res.data.data.examinationName;
        });
        }
       
        console.log("state=======", state);
      });
    };

    // 点击取消按钮
    const exitAdd = () => {
      closeDrawer();
    };

    //新建或编辑面授
    // 新增任务
    const updateFaceTeach = () => {
      if (
        state.courseName == "" ||
        state.chooseCourse == null ||
        state.memberValue == {} ||
        state.chooseTime == [] ||
        state.duration == "" 

      ) {
        message.destroy();
        return message.warning("请输入必填字段");
      } else {
        if(state.isClick){
          message.destroy();
          message.error("请勿频繁点击")
          return
        }
        state.isClick = true;
        let type = state.onlySign ? "1," : "0,";
        let t = state.completeLeave ? "1" : "0";
        let p = state.innerPersion ? "1," : "0,";
        let p1 = state.outPersion ? "1" : "0";
        let obj = {
          teacherId: state.memberValue.value,
          teacher: state.memberValue.label,
          address: state.address,
          applyFlag: state.applyFlag,
    
          afterStart: state.afterStartValue || 0,
          beforeStart: state.before || 0,
          beginTime: parseInt(
            new Date(state.chooseTime[0].$d).getTime() / 1000
          ),
          completeType: type.concat(t),
          description: state.description,
          endTime: parseInt(new Date(state.chooseTime[1].$d).getTime() / 1000),
          evalFlag: state.needEval && state.assessmentId > 0 ? 1 : 0,
          evaluateId: state.assessmentId,
          homeWorkId: state.EditWorkId,
          name: state.courseName,       
          projectMember: p.concat(p1),
          offcourseId: state.chooseCourse,
          offcoursePlanId: props.EditFaceId > 0 ? props.EditFaceId : 0,
          testId: state.EditTestId,
          duration: state.duration,
          attach:state.attach,
      
        };
        console.log("obj============", obj, "6" + "9");
        console.log("222222222");

        editPlan(obj)
          .then(async (res) => {
            message.destroy();
            // message.success(`添加成功`);
            await updateTask(res);
            ctx.emit("changeData", false);
            state.isClick = false;
            closeDrawer();
          })
          .catch((e) => {
            console.log(e);
            state.isClick = false;
            message.destroy();
            // message.error(`添加失败`);
          });
      }
    };

    //更新任务列表
    // 新增编辑或新增项目任务
    const updateTask = async (res) => {
      console.log("props.isLevel=====", props.isLevel);
    
      if (props.isLevel == 1) {
        if(!props.isactive){
          message.destroy();
          return message.warning("请先选中关卡");
        }
        let editObj1 = {
          chapterId: props.isactive,
          courseId: res.data.data.offcoursePlanId,
          name: res.data.data.name,
          duration: res.data.data.duration,
          routerId: props.routerId,
          routerTaskId: props.routerTaskId || 0,
          type: 2,
        };
        await RouterEditTask(editObj1)
          .then(() => {
            //message.success(`${props.edit ? "编辑" : "新增"}关卡任务成功`);

            // state.addLoading = false;
            closeDrawer();
          })
          .catch(() => {
            //message.error(`${props.edit ? "编辑" : "新增"}关卡任务失败`);
          });
      } else if (props.isLevel == 2) {
        let editObj = {
          courseId: res.data.data.offcoursePlanId,
          duration: res.data.data.duration,
          name: res.data.data.name,
          projectId: props.projectId,
          projectTaskId: props.projectTaskId || 0,
          stageId: props.chooseStageId || 0,
          type: 2,
        };
        // 新增编辑或新增项目
        await ProjectEditTask(editObj)
          .then(() => {
            console.log("props.EditFaceId", props.EditFaceId);
            // message.success(`${props.edit ? "编辑" : "新增"}阶段任务成功`);
          })
          .catch(() => {
            //message.error(`${props.EditFaceId ? "编辑" : "新增"}阶段任务失败`);
          });
      } else if (props.isLevel == 3) {
        console.log("dddddddddddd33333333");
        await addTempTask({
          courseId: res.data.data.offcoursePlanId,
          name: res.data.data.name,
          duration: res.data.data.duration,
          projectTemplateId: props.projectTemplateId,
          projectTaskId: props.projectTaskId || 0,
          stageId: props.chooseStageId || 0,
          type: 2,
        })
          .then(() => {
            //message.success(`${props.EditFaceId ? "编辑" : "新增"}阶段任务成功` );
          })
          .catch(() => {
            //message.error(`${props.EditFaceId ? "编辑" : "新增"}阶段任务失败`);
          });
      }
    };

  
    const showAssessment = () => {
      state.assessmentVisible = true;
    };
 
    // 员工滚动
    const templateScroll = (e) => {
      console.log("滚动", e);
      const { target } = e;
      const scrllHeight = target.scrollHeight - target.scrollTop;
      const clientHeight = target.clientHeight;
      // console.log("scrllHeight", scrllHeight, clientHeight);
      if (scrllHeight === 0 && clientHeight === 0) {
        state.currentPage = 1;
      } else if (scrllHeight - clientHeight == 0) {
        // 下拉到底部时
        if (state.currentPage < state.totalPages) {
          // 如果滑到底部，则加载下一页
          state.currentPage++;
          // queryMember();
        }
      }
    };
    // 获取员工
    const queryMember = () => {
      if (!state.memberValue || !state.memberValue.label) return;
      let obj = {
        keyWord: state.memberValue.label,
        id: 0,
        org: 0,
        pageNo: state.currentPage,
        pageSize: state.pageSize,
      };
      getMemberInfo(obj)
        .then((res) => {
          let data = res.data.data.rows;
          state.totalPages = res.data.data.total;
          for (let i in data) {
            options.value.push({
              value: data[i].id,
              label: data[i].realName,
            });
          }
        })
        .catch((err) => {
          console.log(err)
          message.destroy();
          // message.error("获取员工失败" + err);
        });
    };
    const handleSearch = debounce((memberValue) => {
      console.log("fetching user", memberValue);
      options.value = [];
      state.fetching = true;
      state.currentPage = 1;
      state.memberValue.label = memberValue;
      queryMember();
      state.fetching = false;
    }, 300);
    const handleChange2 = (value, label) => {
      console.log(`selected ${value}`);
      state.memberId = value;
      // console.log(label)
      state.memberValue = label;
    };
    const handleFocus = () => {
      queryMember();
    };
    const range = (start, end) => {
			const result = [];

			for (let i = start; i < end; i++) {
				result.push(i);
			}

			return result;
		};
      	const disabledDate = (current) => {
			// Can not select days before today and today
			console.log('1111', dayjs().endOf('day'))
			return current && current < dayjs().startOf('day');
		};

		const disabledDateTime = () => {
			return {
				disabledHours: () => range(0, 24).splice(4, 20),
				disabledMinutes: () => range(30, 60),
				disabledSeconds: () => [55, 56],
			};
		};
    
    return {
      ...toRefs(state),
      FILE_UPLOAD_URL,
      showDrawerSelFacet,
      showDrawerAddHomework,
      showDrawerAddTest,
      afterVisibleChange,
      closeDrawer,
      updateFaceTeach,
      exitAdd,
      updateTask,
      disabledDateTime,
      clear,
      changevalue,
      showAssessment,
      disabledDate,
   
      // change,
      options,
      handleFocus,
      handleSearch,
      handleChange2,
      templateScroll,
      logC,
      logT,
      logW,
      logA,
    };
  },
};
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa !important;
}

.addfaceteachDrawer {
  .drawerMain {
    .header {
      height: 73px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;

      .headerTitle {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
        line-height: 25px;
        margin-left: 24px;
      }
    }

    .contentMain {
      display: flex;
      justify-content: space-between;

      .main_left {
        height: 1080px;
        padding-right: 30px;
        flex: 1;
        border-right: 1px solid #e8e8e8;

        .main_item {
          display: flex;
          align-items: center;
          margin-top: 32px;
          margin-bottom: 32px;

          .signbox {
            width: 120px;
            display: flex;
            justify-content: end;
            align-items: center;

            .sign {
              margin-right: 5px;
            }
          }

          .btnbox {
            display: flex;
            flex: 1;
            align-items: center;
       
            .xkbtn {
              cursor: pointer;
              width: 130px;
              height: 40px;
              background: #4ea6ff;
              border-radius: 8px;
              border: 0;
              margin-right: 8px;
              color: #fff;
            }
          }
        }
  
        .main_item2 {
          display: flex;
          align-items: flex-start;
          margin-bottom: 32px;

          .textarea {
            width: 400px;

            .ant-input {
              width: 100%;
            }

            .ant-input-textarea-show-count {
              position: relative;
            }

            .ant-input-textarea-show-count::after {
              position: absolute;
              right: 10px;
              bottom: 0px;
            }

            .ant-input {
              border-radius: 8px;
            }
          }

          .signbox {
            width: 120px;
            display: flex;
            justify-content: end;
            align-items: center;
          }

          .kqszbox {
            .qdqtbox {
              margin-left: 5px;
              cursor: pointer;
            }

            .qdbtn,
            .qtbtn {
              width: 75px;
              height: 24px;
              background: rgba(56, 139, 225, 0.16);
              border-radius: 2px;
              border: 1px solid #387df7;
              display: flex;
              align-items: center;
              justify-content: center;

              .btntext {
                color: #387df7;
              }
            }

            .setbox {
              display: flex;
              flex-wrap: wrap;
              margin-top: 10px;
              // margin-bottom: 24px;

              .timerbox {
                margin-top: 6px;
                margin-right: 32px;
                display: flex;
                align-items: center;
                flex-wrap: nowrap;
              }
            }
          }

          .btnbox2 {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;

            .xkbtn {
              cursor: pointer;
              width: 130px;
              height: 40px;
              background: #4ea6ff;
              border-radius: 8px;
              border: 0;
              margin-right: 16px 8px 32px 0;
              color: #fff;
            }
          }
        }
      }

      .main_right {
        width: 400px;

        .main_item {
          display: flex;
          align-items: center;
          margin-top: 32px;
          margin-bottom: 32px;

          .signbox {
            width: 120px;
            display: flex;
            justify-content: end;
            align-items: center;
          }

          .btnbox {
            display: flex;
            flex: 1;
            align-items: center;
            overflow: hidden;
            text-overflow: ellipsis;
            .xkbtn {
              cursor: pointer;
              width: 130px;
              height: 40px;
              background: #4ea6ff;
              border-radius: 8px;
              border: 0;
              margin-right: 8px;
              color: #fff;
            }
          }
        }
        .mbl_items {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                margin-bottom: 10px;

                .item_nam {
                  width: 100px;
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                  white-space: nowrap;

                  .asterisk_icon {
                    width: 10px;
                    height: 10px;
                    margin-right: 5px;
                    margin-top: -15px;
                  }
                }

                .item_inp {
                  flex: 1;
                  position: relative;

                  .inp_num {
                    position: absolute;
                    left: 398px;
                    top: 10px;
                  }
                  .accessory{
                    margin-left: 54px;
                  }
                }
             	 }
            .tips{
              font-size: 12px;
              margin-top: 10px;
             
            }
            .mbl_items12{
              width: 373px;
              margin-left:-13px;
            }
      }
    }

    .main_btns {
      height: 72px;
      width: 100%;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);

      .btn1 {
        width: 100px;
        height: 40px;
        border: 1px solid #4ea6ff;
        border-radius: 8px;
        color: #4ea6ff;
        background-color: #fff;
        cursor: pointer;
      }

      .btn2 {
        cursor: pointer;
        width: 100px;
        height: 40px;
        background: #4ea6ff;
        border-radius: 8px;
        border: 0;
        margin-left: 15px;
        color: #fff;
      }
    }
  }
}
</style>
