<template>
  <div class="headernewhandel">
    <!-- 左侧 -->
    <div :class="isshow  ? 'left' : 'noleft'">
      <el-tabs v-model="activeName" @tab-click="handleClick" v-if="isshow">
        <el-tab-pane
          label="任务详情"
          name="four"
          v-if="$route.query.taskNodeType == 'PHONE_OUTBOUND'"
        >
          <div class="nexttime" style="margin-top: 25px">
            <el-form
              ref="formlist"
              :model="formlist"
              label-width="110px"
            >
              <el-form-item label="电话" prop="patientPhone">
                <el-input
                  disabled
                  v-model="formlist.patientPhone"
                  placeholder="请输入电话"
                />
              </el-form-item>
              <br />
              <el-form-item label="通用话术名称" prop="phoneTemplateName">
                <el-input
                  disabled
                  v-model="formlist.phoneTemplateName"
                  placeholder="请输入通用话术名称"
                />
              </el-form-item>
              <br />
              <el-form-item label="重复次数" prop="phoneRedialTimes">
                <el-input
                  disabled
                  v-model="formlist.phoneRedialTimes"
                  placeholder=""
                />
              </el-form-item>
              <br />
              <el-form-item label="电话短信提醒" prop="phoneMessageRemind">
                <el-input
                  disabled
                  v-model="formlist.phoneMessageRemind"
                  placeholder=""
                />
              </el-form-item>
              <br />
              <el-form-item label="短信模板" prop="phone">
                <span class="spanname">
                  <message
                    style="width: 200px; height: 50px"
                    @on-template="messageontemplateMESSAGE"
                    :templateId="formlist.phoneMessageTemplateId"
                    :templateName="formlist.phoneMessageTemplateName"
                  >
                  </message>
                </span>
              </el-form-item>
              <br />
              <el-form-item
                label="短信模板内容"
                prop="phoneMessageTemplateContent"
              >
                <el-input
                  disabled
                  type="textarea"
                  v-model="formlist.phoneMessageTemplateContent"
                  style="width: 200px"
                  placeholder=""
                />
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="入院记录" name="first">
          <div v-html="listleft.inHospitalInfo"></div>
        </el-tab-pane>
        <el-tab-pane label="手术记录" name="second">
          <div v-html="listleft.surgicalRecord"></div>
        </el-tab-pane>
        <el-tab-pane label="出院记录" name="third">
          <div v-html="listleft.outHospitalInfo"></div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 中间 -->
    <div class="bottomheader">
      <div style="display: flex">
        <!-- 问卷模板处理 -->
        <div
          class="right"
          v-if="$route.query.taskNodeType == 'QUESTIONNAIRE_SCALE'"
        >
          <div
            class="sport"
            v-if="$route.query.taskNodeType == 'QUESTIONNAIRE_SCALE'"
          >
            问卷模板: Barthel指数评定问卷
          </div>
          <div
            class="words"
            v-if="$route.query.taskNodeType == 'QUESTIONNAIRE_SCALE'"
          >
            您好!本问卷用于评估日常生活能力，请根据自身日常实际表现选择合适的选项。
          </div>
          <div
            class="words"
            v-for="(item, index) in questiondata.questionSubjectList"
            :key="index"
          >
            {{ index + 1 }}.{{ item.questionName }}
            <span v-if="item.questionType == 'MULTIPLE_CHOICE'"
              >（单选题）</span
            >
            <span v-if="item.questionType == 'MULTIPLE_CHOICE_QUESTIONS'"
              >（多选题）</span
            >
            <span v-if="item.questionType == 'SCORING_QUESTIONS'"
              >（打分题）</span
            >
            <span v-if="item.questionType == 'COMBINATION_RADIO_SUBJECT'"
              >（组合单选题）</span
            >
            <span v-if="item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'"
              >（组合多选题）</span
            >
            <span v-if="item.questionType == 'COMBINATION_BLANKS_SUBJECT'"
              >（组合填空题）</span
            >
            <span v-if="item.questionType == 'FILL_IN_THE_BLANKS'"
              >（填空题）</span
            >
            <span v-if="item.questionType == 'COMBINATION_SCORING_SUBJECT'"
              >（组合打分题）</span
            >
            <span v-if="item.questionType == 'DATE_BLANKS_SUBJECT'"
              >（日期填空题）</span
            >
            <span v-if="item.questionType == 'TIME_BLANKS_SUBJECT'"
              >（时间填空题）</span
            >
            <el-radio-group
              v-if="
                item.questionType == 'MULTIPLE_CHOICE' ||
                item.questionType == 'COMBINATION_RADIO_SUBJECT' ||
                item.questionType == 'SCORING_QUESTIONS' ||
                item.questionType == 'COMBINATION_SCORING_SUBJECT'
              "
              v-model="questiondata[index]"
              class="custom-radio-group"
              @change="radioGroupChange($event, item)"
            >
              <el-radio
                class="custom"
                v-for="(aitem, aindex) in item.questionSubjectOptionList"
                :key="aindex"
                :label="aitem.id"
                @change="radioChange($event, aitem, index)"
                >{{ aitem.optionName }}</el-radio
              >
            </el-radio-group>
            <!-- 多选、组合多选 -->
            <el-checkbox-group
              v-model="checkeddata"
              @change="radioGroupChange($event, item, 'checkbox')"
              v-if="
                item.questionType == 'MULTIPLE_CHOICE_QUESTIONS' ||
                item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'
              "
            >
              <el-checkbox
                v-for="(aitem, aindex) in item.questionSubjectOptionList"
                :key="aindex"
                :label="aitem.id"
                @change="radioChangecheck($event, aitem, index, aindex)"
                >{{ aitem.optionName }}</el-checkbox
              >
            </el-checkbox-group>
            <!-- 填空题、组合填空 -->
            <div
              v-if="
                item.questionType == 'FILL_IN_THE_BLANKS' ||
                item.questionType == 'COMBINATION_BLANKS_SUBJECT'
              "
              class="tk"
            >
              <el-input
                v-model="item.fillBlanksAnswer"
                placeholder="请输入答案"
                type="textarea"
              />
              <!-- <el-input></el-input> -->
            </div>
            <!-- 日期填空题、 -->
            <div
              v-if="item.questionType == 'DATE_BLANKS_SUBJECT'"
              style="margin: 20px 0 10px 30px"
            >
              <el-date-picker
                @change="timepicker($event, index)"
                clearable
                v-model="item.fillBlanksAnswer"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
            <!-- 时间填空题 -->
            <div
              style="margin: 20px 0 10px 30px"
              v-if="item.questionType == 'TIME_BLANKS_SUBJECT'"
            >
              <el-time-select
                @change="timepickerselect($event, index)"
                clearable
                v-model="item.fillBlanksAnswer"
                :picker-options="{
                  start: '08:30',
                  step: '00:30',
                  end: '23:30',
                }"
                placeholder="选择时间"
              >
              </el-time-select>
            </div>
          </div>
        </div>
        <!-- 电话外呼 -->
        <div class="right" v-if="$route.query.taskNodeType == 'PHONE_OUTBOUND'">
          <div class="sport">
            <img
              src="@/assets/images/right.jpg"
              class="login-code-img"
              v-if="isshow == true"
              @click="toggleSideBar"
            />
            <img
              src="@/assets/images/bitton.jpg"
              class="login-code-img"
              v-if="isshow == false"
              @click="toggleSideBar"
            />
            话术预览
          </div>
          <Scriptpreview
            :phoneNodeContent="formlist.phoneNodeContent"
          ></Scriptpreview>
        </div>
      </div>
    </div>
    <!-- 右侧 -->
    <div
      class="right_top"
      v-if="
        $route.query.taskNodeType == 'QUESTIONNAIRE_SCALE' ||
        $route.query.taskNodeType == 'PHONE_OUTBOUND'
      "
    >
      <div style="margin-top: 20px; padding-left: 10px; width: 350px">
        <!-- 问卷 -->
        <el-form
          :inline="true"
          class="demo-form-inline"
          :model="questiondata"
          :rules="rules"
          ref="questiondata"
          v-if="$route.query.taskNodeType == 'QUESTIONNAIRE_SCALE'"
        >
          <el-form-item label="任务处理信息" prop="routeHandleRemark">
            <el-input
              type="textarea"
              placeholder="请输入任务处理信息"
              v-model="questiondata.routeHandleRemark"
            />
          </el-form-item>
        </el-form>
        <!-- 话术 -->
        <el-form
          :inline="true"
          class="demo-form-inline"
          :model="formlist"
          :rules="rulesphone"
          ref="formlist"
          v-if="$route.query.taskNodeType == 'PHONE_OUTBOUND'"
        >
          <el-form-item label="是否接通" prop="phone">
            <el-radio v-model="formlist.phoneConnectStatus" label="CONNECTED"
              >已接通</el-radio
            >
            <el-radio v-model="formlist.phoneConnectStatus" label="NOTCONNECTED"
              >未接通</el-radio
            >
          </el-form-item>

          <el-form-item label="任务处理信息" prop="routeHandleRemark">
            <el-input
              type="textarea"
              placeholder="请输入任务处理信息"
              v-model="formlist.routeHandleRemark"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
  <script>

import message from "../../system/components/message.vue";
import Scriptpreview from "../../system/components/Scriptpreviewopen.vue";
import Hamburger from '@/components/Hamburger'

import {
  selectFollowPatientInfo,
  question,
  addPatientQuestionResult,
  selectPhonePush,
} from "@/api/system/followupsee";
import { getScript } from "@/api/manage/script";
import Cookies from "js-cookie";
import { getAgencytype } from "@/api/system/agency";
import {
  selectVisitRecord,
} from "@/api/system/taskExecuteRecord";
import { selectPatientQuestionSubmit } from "@/api/system/taskExecuteRecord";


export default {
  components: {
    message,
    Scriptpreview,
    Hamburger
  },
  name: "patientdetails",

  data() {
    return {
      isshow: true,
      activeName: "",
      listleft: [],

      lookshow: false,
      phoneNodeContent: {
        scriptInfoId: null,
        flowScheme: null,
        nodes: [],
        edges: [],
      },
      optionslist: [],
      obj: {},
      radio: "1",
      checkList: [],
      checked: false,
      formlist: {},
      optionslistS: [],
      form: {
        taskNodeType: this.$route.query.taskNodeType,
        routeHandleId: Cookies.get("userId"),
        routeHandlePerson: Cookies.get("userName"),
        routeHandleRemark: null,
        patientId: this.$route.query.patientId,
        manageRouteId: this.$route.query.manageRouteId,
        manageRouteNodeId: this.$route.query.manageRouteNodeId,
        patientName: this.$route.query.patientName,
        manageRouteName: this.$route.query.manageRouteName,
        manageRouteNodeName: this.$route.query.manageRouteNodeName,
        departmentId: null,
        departmentName: null,
        diseaseTypeId: null,
        diseaseTypeName: null,
      },
      rules: {
        routeHandleRemark: [
          { required: true, message: "请输入任务处理信息", trigger: "blur" },
        ],
      },
      rulesphone: {
        routeHandleRemark: [
          { required: true, message: "请输入任务处理信息", trigger: "blur" },
        ],
      },
      radio: "B",
      id: "",
      list: [],
      type: "",
      checkeddata: [],
      questiondata: {
        totalScore: 0, //总分
        routeHandlePerson: null,
        routeHandleId: null,
      },
      parentDictCode: "",
    };
  },
  created() {
    this.id = this.$route.query.manageRouteId;
    this.info();
    this.infoleft()
    this.infolistword();
    if (this.$route.query.taskNodeType == "QUESTIONNAIRE_SCALE") {
      this.activeName = "first"
      this.questioninfo();
    } else if (this.$route.query.taskNodeType == "PHONE_OUTBOUND") {
      this.activeName = "four"
      selectPhonePush(this.$route.query.manageRouteNodeId).then((response) => {
        if (response.data) {
          this.formlist = response.data;
          this.formlist.phoneRedialTimes = response.data.phoneRedialTimes;
          this.formlist.phoneMessageRemind = response.data.phoneMessageRemind;
          this.formlist.phoneTemplateId = response.data.phoneTemplateId;
          this.formlist.phoneConnectStatus = 'CONNECTED';
          this.formlist.phoneDialMethod = response.data.phoneDialMethod
          this.formlist.phoneMessageTemplateCode = response.data.phoneMessageTemplateCode
          this.formlist.phoneMessageTemplateContent = response.data.phoneMessageTemplateContent
          this.formlist.patientPhone = response.data.patientPhone
          this.infolistMESSAGE();
          this.infolistword();
          if (this.formlist.phonePushSign == 0) {
            this.formlist.phonePushSign = "0";
          } else if (this.formlist.phonePushSign == 1) {
            this.formlist.phonePushSign = "1";
          }
        }
      });
    }
  },
  methods: {
    toggleSideBar() {
      this.isshow = !this.isshow
    },
    // 左侧列表
    infoleft() {
      var obj = {
        patientId: this.$route.query.patientId
      }
      selectVisitRecord(obj).then((res) => {
        console.log(res);
        this.listleft = res.data;
      });
    },
    scriptlook(e) {
      console.log(e, "eeeeee");
      if (e == null || e == "") {
        this.$message.error("暂无话术图");
      } else {
        this.phoneNodeContent = e;
        this.lookshow = true;
      }
    },
    // 发送短信
    infolistword() {
      var dictType = "text_message_remind";
      getAgencytype(dictType).then((res) => {
        this.optionslist = res.data;
        // this.taskinfo();
        this.formlist.phoneMessageRemind = this.optionslist.find(
          (el) => el.dictValue == this.formlist.phoneMessageRemind
        )?.dictLabel;
      });
    },

    // 短信
    messageontemplateMESSAGE(item) {
      console.log(item, "2222222");
      this.formlist.phoneMessageTemplateId = item.templateId;
      this.formlist.phoneMessageTemplateName = item.templateName;
      // this.form.messagePreview = item.templateContent;
    },
    // 重复次数
    infolistMESSAGE() {
      var dictType = "redial_times";
      getAgencytype(dictType).then((res) => {
        this.optionslistS = res.data;
        this.formlist.phoneRedialTimes = this.optionslistS.find(
          (el) => el.dictValue == this.formlist.phoneRedialTimes
        )?.dictLabel;
      });
    },
    // 日期填空题
    timepicker(e, index) {
      this.questiondata.questionSubjectList[index].fillBlanksAnswer = e;
    },
    // 时间填空题
    timepickerselect(e, index) {
      this.questiondata.questionSubjectList[index].fillBlanksAnswer = e;
    },
    radioGroupChange(e, item) { },
    // 选中某个单选框时，由radio时触发
    radioChange(e, item, index) {
      console.log(e, item, index, "选中某个单选框时");
      this.questiondata.questionSubjectList[
        index
      ].questionSubjectOptionList.forEach((el) => {
        if (el.id == item.id) {
          el.optionChooseSign = "0";
        } else {
          el.optionChooseSign = "1";
        }
      });
      console.log(this.questiondata, "this.questiondata");
      this.questiondata;
    },
    // 复选框
    radioChangecheck(e, item, index, aindex) {
      console.log(e, item, index, "选中某个复选框时");
      if (e == true) {
        this.questiondata.questionSubjectList[index].questionSubjectOptionList[
          aindex
        ].optionChooseSign = "0";
      } else {
        this.questiondata.questionSubjectList[index].questionSubjectOptionList[
          aindex
        ].optionChooseSign = "1";
      }
    },
    info() {
      selectFollowPatientInfo(this.id).then((res) => {
        this.list = res.data;
      });
    },
    // 问卷无答案
    questioninfo() {
      question(this.$route.query.templateId).then((res) => {
        this.questiondata = res.data;
        this.questiondata.questionInfoId = res.data.id;
        this.questiondata.routeHandlePerson = Cookies.get("userName");
        this.questiondata.routeHandleId = Cookies.get("userId");
        this.questiondata.patientId = this.$route.query.patientId;
        this.questiondata.manageRouteId = this.$route.query.manageRouteId;
        this.questiondata.manageRouteNodeId =
          this.$route.query.manageRouteNodeId;
        this.questiondata.patientName = this.$route.query.patientName;
        this.questiondata.manageRouteName = this.$route.query.manageRouteName;
        this.questiondata.manageRouteNodeName =
          this.$route.query.manageRouteNodeName;
        this.questiondata.taskNodeType = this.$route.query.taskNodeType;
        this.questiondata.visitRecordId = this.$route.query.visitRecordId;
        this.questiondata.totalScore = 0;
        this.questiondata.questionSubjectList.forEach((e) => {
          if (
            e.questionType == "MULTIPLE_CHOICE" ||
            e.questionType == "MULTIPLE_CHOICE_QUESTIONS" ||
            e.questionType == "SCORING_QUESTIONS" ||
            e.questionType == "COMBINATION_RADIO_SUBJECT" ||
            e.questionType == "COMBINATION_MULTIPLE_SUBJECT" ||
            e.questionType == "COMBINATION_SCORING_SUBJECT"
          ) {
            e.whetherScore = "1";
          } else {
            e.whetherScore = "0";
          }
          e.questionSubjectOptionList.forEach((el) => {
            el.questionNumber = e.questionNumber;
            if (
              e.questionType == "MULTIPLE_CHOICE_QUESTIONS" ||
              e.questionType == "COMBINATION_MULTIPLE_SUBJECT"
            ) {
              el.optionChooseSign = "1";
            }
          });
        });
      });
    },
    // 保存

    /** 提交按钮 */
    submit() {
      // return
      if (this.$route.query.taskNodeType == "QUESTIONNAIRE_SCALE") {
        // 对象.新名字=对象.原数组
        this.$delete(this.questiondata, "updateBy");
        this.$delete(this.questiondata, "updateTime");
        var score = 0;
        // 单选、多选、打分分值
        this.questiondata.questionSubjectList.forEach((e) => {
          if (e.questionSubjectOptionList?.length > 0) {
            e.questionSubjectOptionList.forEach((el) => {
              if (
                e.questionType == "MULTIPLE_CHOICE" ||
                e.questionType == "MULTIPLE_CHOICE_QUESTIONS" ||
                e.questionType == "SCORING_QUESTIONS" ||
                e.questionType == "COMBINATION_RADIO_SUBJECT" ||
                e.questionType == "COMBINATION_MULTIPLE_SUBJECT" ||
                e.questionType == "COMBINATION_SCORING_SUBJECT"
              ) {
                if (el.optionChooseSign == "0") {
                  score += el.optionScore;
                }
              }
            });
            this.questiondata.totalScore = score;
          }
        });
        this.questiondata.subjectResultDTOList =
          this.questiondata.questionSubjectList;
        this.obj = JSON.parse(JSON.stringify(this.questiondata));
        delete this.obj.questionSubjectList;
        this.obj.subjectResultDTOList.forEach((e) => {
          e.optionResultList = e.questionSubjectOptionList;
          if (e.optionResultList.optionSubmitAnswer) {
            e.optionResultList.optionSubmitAnswer =
              e.optionResultList.optionSubmitAnswer;
          }
          // this.$delete(this.obj, '0', '')
          delete e.questionSubjectOptionList;
        });
      } else if (this.$route.query.taskNodeType == "ARTIFICIAL_FOLLOW_UP") {
        console.log(this.questiondata, "questiondata");
        // 对象.新名字=对象.原数组
        this.$delete(this.questiondata, "updateBy");
        this.$delete(this.questiondata, "updateTime");
        this.questiondata.subjectResultDTOList =
          this.questiondata.questionSubjectList;
        this.obj = JSON.parse(JSON.stringify(this.questiondata));
        delete this.obj.questionSubjectList;
        this.obj.subjectResultDTOList.forEach((e) => {
          e.optionResultList = e.questionSubjectOptionList;
          if (e.optionResultList.optionSubmitAnswer) {
            e.optionResultList.optionSubmitAnswer =
              e.optionResultList.optionSubmitAnswer;
          }
          // this.$delete(this.obj, '0', '')
          delete e.questionSubjectOptionList;
        });
        // this.$delete(this.obj, 'totalScore',)
      }
      // 问卷
      if (this.$route.query.taskNodeType == "QUESTIONNAIRE_SCALE") {
        this.$refs["questiondata"].validate((valid) => {
          if (valid) {
            addPatientQuestionResult(this.obj).then((response) => {
              this.$confirm("保存成功, 是否返回上一页?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "success",
              })
                .then(() => {
                  this.$store
                    .dispatch("tagsView/delView", this.$route)
                    .then(({ visitedViews }) => {
                      this.$router.push({
                        path: "/task/followup",
                      });
                    });
                })
                .catch(() => {
                  this.$modal.msgSuccess("保存成功");
                });
            });
          }
        });
      } else if (this.$route.query.taskNodeType == "PHONE_OUTBOUND") {
        this.$refs["formlist"].validate((valid) => {
          if (valid) {
            this.form.phoneMessageRemind = this.optionslist.find(
              (el) => el.dictLabel == this.formlist.phoneMessageRemind
            )?.dictValue;
            this.form.phoneRedialTimes = this.optionslistS.find(
              (el) => el.dictLabel == this.formlist.phoneRedialTimes
            )?.dictValue;
            (this.form.departmentId = this.formlist.departmentId),
              (this.form.departmentName = this.formlist.departmentName),
              (this.form.diseaseTypeId = this.formlist.diseaseTypeId),
              (this.form.diseaseTypeName = this.formlist.diseaseTypeName),
              (this.form.routeHandleRemark = this.formlist.routeHandleRemark);
            this.form.phoneConnectStatus = this.formlist.phoneConnectStatus;
            this.form.visitRecordId = this.$route.query.visitRecordId;
            this.form.phoneDialMethod = this.formlist.phoneDialMethod
            this.form.phoneMessageTemplateCode = this.formlist.phoneMessageTemplateCode
            this.form.phoneMessageTemplateContent = this.formlist.phoneMessageTemplateContent
            this.form.phoneTemplateId = this.formlist.phoneTemplateId
            this.form.patientPhone = this.formlist.patientPhone
            var formlists = JSON.parse(JSON.stringify(this.form));

            addPatientQuestionResult(formlists).then((response) => {
              this.$confirm("保存成功, 是否返回上一页?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "success",
              })
                .then(() => {
                  this.$store
                    .dispatch("tagsView/delView", this.$route)
                    .then(({ visitedViews }) => {
                      this.$router.push({
                        path: "/task/followup",
                      });
                    });
                })
                .catch(() => {
                  this.$modal.msgSuccess("保存成功");
                });
            });
          }
        });
      }
    },
    // 取消
    cencal() {
      this.$router.push({
        path: "/task/followup",
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
  </script>
  <style lang="scss" scoped>
::v-deep {
  #vue-g6-editor #page canvas {
    width: 100% !important;
    height: 100% !important;
  }
}
::v-deep .el-form-item {
  display: inline-block;
}
::v-deep .custom-radio-group {
  width: 25%;
}
::v-deep .el-checkbox {
  width: 25%;
}
::v-deep .el-input.is-disabled .el-input__inner {
  background: #fff !important;
  color: #606266;
  width: 200px;
}

.spanname {
  pointer-events: none;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
  height: 100px;
  color: #606266;
  background: #fff;
}
::v-deep .el-textarea .el-textarea__inner {
  height: 100px;
}

.tk {
  ::v-deep .el-textarea__inner {
    margin: 20px 0 10px 30px;
    width: 55% !important;
    height: 100px;
  }
}

::v-deep .el-radio {
  padding: 10px;
}

::v-deep .el-checkbox-group {
  display: flex;
  flex-direction: column;
  padding: 10px 0px 10px 24px;
}

::v-deep .el-checkbox {
  padding: 10px 0 10px 0px;
  // padding: 10px;
}
.custom-radio-group {
  display: flex;
  flex-direction: column;
  padding: 10px 0 10px 10px;

  .custom {
    padding: 10px 0 10px 10px;
  }
}
.right {
  width: 100%;
  padding-bottom: 50px;
  .handle {
    float: right;
    margin-right: 100px;
    // position: absolute;
    right: 100px;
    margin-top: 20px;
    ::v-deep .el-textarea__inner {
      width: 500px;
      height: 250px;
    }
  }
}

.headernewhandel {
  height: calc(100vh - 84px);
  // background-color: #f1f3f5;
  display: flex;
  ::v-deep .el-tabs__item{
    padding: 0 13px;
  }

  ::v-deep .el-tabs__header {
    margin: 0 !important;
    width: 100%;
  }
  // 左侧
  .left {
    // height: calc(100vh - 212px);
    // overflow-y: auto;
    // width: 550px;
    margin-top: 20px;
    ::v-deep .el-form{
      margin-left: -14px;
    }
    ::v-deep .el-tabs__nav-wrap::after {
      height: 0px;
    }
  }
  .noleft {
    ::v-deep .el-tabs__nav-wrap::after {
      height: 0px;
    }

    width: 0%;
    margin-top: 20px;
  }
  // 中间
  .bottomheader {
    height: calc(100vh - 212px);
    overflow-y: auto;
    width: 100%;
    background-color: #fff;
    padding: 10px 20px;

    .sport {
      padding: 0px 5px 10px 0px;
      font-size: 20px;
      font-weight: 600;
      .login-code-img {
        top: 10px;
        position: relative;
      }
    }

    .words {
      font-size: 15px;
      padding: 10px 50px 10px 10px;
    }

    .sports {
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      font-size: 18px;
      font-weight: 600;
    }

    .word {
      font-size: 14px;
      font-weight: 550;
      padding: 50px 50px 10px 10px;
    }

    .videoleft {
      width: 40%;
      height: 200px;
      background: red;
    }

    .time {
      font-size: 20px;
      font-weight: 550;
      padding: 10px 50px 10px 10px;
    }
    .images {
      width: 53%;
      height: 241px;
      margin: 0 auto;
      background: red;
    }

    .attention {
      font-size: 14px;
      font-weight: 550;
      padding: 10px 50px 10px 10px;
    }
  }
  // 右侧
  .right_top {
    // width: 39%;
    width: 350px;
    ::v-deep .el-textarea__inner{
      width: 338px;
    height: 250px;
    margin-top: 10px;

    }
  }
}
</style>
