<template>
  <div>
    <el-container class="scrollbar" v-if="ishow">
      <el-header>
        <div class="flex between">
          <div class="flex" style="width: 28%">
            <p>实训项目</p>
            <el-select
              v-model="value1"
              placeholder="请选择"
              class="select"
              :disabled="projectPermissions != 0"
              @change="selectProject"
              style="flex: 1"
            >
              <el-option
                v-for="item in value"
                :key="item.projectId"
                :label="item.projectName"
                :value="item.projectId"
              ></el-option>
            </el-select>
          </div>
          <div class="countDownBox">
            <div style="margin-left: -40px;">
              <div :sendSync="sendSync" :autoStart="autoStart" :defaultVal="defaultVal">
                实训{{text}}时间
                <span class="timeSpan">{{day}}</span>天
                <span class="timeSpan">{{hour}}</span>小时
                <span class="timeSpan">{{minutes}}</span>分
                <span class="timeSpan">{{seconds}}</span>秒
              </div>
            </div>
          </div>
          <div class="countDownBox">
            <div>
              总得分：
              <span class="gradeSpan">{{grade}}</span>
            </div>
          </div>
          <div>
            <el-button
              style="backgroundColor: #202020;color: #d0d0d0;font-size:14px;"
              v-show="projectPermissions == 0"
              @click="reload"
            >重新开始</el-button>
            <el-button class="submit-btn" style="margin-right:7px" @click="Submit()" :disabled="isSubmit">提交</el-button>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="30%">
          <div class="aside-header">
            <div class="header_h flex">
              <i class="el-icon-s-order"></i>
              <p>实验目标</p>
            </div>
            <div class="font_css">
              <div class="experimentalGoal">
                <div class="break-all" v-html="experimentalGoal"></div>
              </div>
            </div>
          </div>
          <div class="aside-footer">
            <div class="header_h flex">
              <i class="el-icon-s-management"></i>
              <p>实验任务</p>
            </div>
            <div>
              <el-row>
                <el-col :span="24">
                  <el-card shadow="hover">
                    <el-table :data="tableData" :stripe="true" height="405">
                      <el-table-column type="index"></el-table-column>
                      <el-table-column prop="judgmentPointsName" label="判分标准" align="center"></el-table-column>
                      <el-table-column prop="right" label="完成结果" align="center">
                        <template slot-scope="scope">
                          <i
                            v-if="scope.row.right=='0'"
                            class="el-icon-check"
                            style="color:green;font-size:20px"
                          ></i>
                          <i
                            v-else-if="scope.row.right=='-1'"
                            class="el-icon-close"
                            style="color:red;font-size:20px"
                          ></i>
                        </template>
                      </el-table-column>
                      <el-table-column prop="score" label="得分" align="center"></el-table-column>
                    </el-table>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-aside>
        <el-main>
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="案例" name="first">
              <div class="break-all" v-html="caseDescription"></div>
            </el-tab-pane>
            <el-tab-pane label="实验要求" name="second">
              <el-collapse v-model="activeNames">
                <el-collapse-item v-for="(loop, index) in points" :key="index">
                  <template slot="title">
                    <i class="el-icon-s-ticket"></i>
                    <span style="font-size:16px">{{loop.judgmentPointsName}}</span>
                  </template>
                  <div class="break-all" v-html="loop.experimentalRequirements"></div>
                </el-collapse-item>
              </el-collapse>
            </el-tab-pane>
            <el-tab-pane label="实验提示" name="fifth" >
              <div class="break-all" v-html="experimentSuggests"></div>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
    <!-- </div> -->

    <div
      :style="ishow ? {position: 'fixed', left: '85%',top:'50%'} : {position: 'fixed',top:'50%'}"
    >
      <div @click="step()">
        <img src="../assets/img/left.png" alt class="m_step" v-if="ishow" />
        <img src="../assets/img/right.png" alt class="n_step" v-if="!ishow" />
      </div>
    </div>
  </div>
</template>

<script>
import newmain from "../util/newMain";
import axios from "axios";
import * as $ from "jquery";
import { get } from "http";
//返回格式化时间，传参例如："yyyy-MM-dd hh:mm:ss"
function formatDate(fmt,date) {
  var date = date ? date : new Date()
  var o = { 
    "M+" : date.getMonth()+1,                 //月份 
    "d+" : date.getDate(),                    //日 
    "h+" : date.getHours(),                   //小时 
    "m+" : date.getMinutes(),                 //分 
    "s+" : date.getSeconds(),                 //秒 
    "q+" : Math.floor((date.getMonth()+3)/3), //季度 
    "S"  : date.getMilliseconds()             //毫秒 
  }; 
  if(/(y+)/.test(fmt)) {
          fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length)); 
  }
  for(var k in o) {
      if(new RegExp("("+ k +")").test(fmt)){
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
      }
  }
  return fmt; 
}
export default {
  data() {
    return {
      systemId: this.$config.systemId,
      test: [],
      ishow: false,
      grade: "00",
      exampleData: "",
      codeid: "",
      codeIds: [],
      judgmentPointsIds: [],
      text: "",
      isStart: false,
      globalTimer: null, //获取setInterval对象值
      millisecond: 0,
      countVal: this.defaultVal, //获取初始值
      pauseTime: 0,
      day: 0,
      seconds: 0,
      minutes: 0,
      hour: 0,
      createTime: "", //开始时间
      actEndTime: "", //倒计时结束时间
      value1: "", //选中后绑定的对象
      value: [],
      experimentalGoal: "", //实验目标
      caseDescription: "", //案例描述
      experimentSuggests: "", //实验提示
      judgmentPointsName: "", //	判分点名称
      points: [],
      activeNames: [],
      tableData: [],
      activeName: "first",
      schoolId: '',
      studentId: "",
      courseId: "",
      projectId: "",
      assessmentId: "",
      projectPermissions: 0, //项目权限(0、练习 1、考核 2、竞赛)
      isSubmit: false,
      entryTime: formatDate('yyyy-MM-dd hh:mm:ss'),
      startTime: '',
      stopTime: '',
      isSelected: false,
      userId: '',
      workbenchCus: this.workbench,
      isRecovery: false
    };
  },
  watch: {
    countVal: {
      deep: true,
      handler: function(val, oldVal) {
        let vm = this;
        if (vm.needSendSunc) {
          vm.passToParent(val);
        }
      }
    },
    needSendSunc: {
      deep: true,
      handler: function(val) {
        let vm = this;
        if (val) {
          vm.passToParent(vm.countString);
        }
      }
    }
  },
  props: {
    sendSync: {
      type: Boolean,
      default: false
    },
    autoStart: {
      type: Boolean,
      default: false
    },
    defaultVal: {
      type: Number,
      default: null
    },
    codeId: {
      type: Number,
      default: 0
    },
    workbench: {
      type: Array,
      default: []
    }
  },
  computed: {
    needSendSunc: function() {
      return this.sendSync;
    },
    // 倒计时
    second: function() {
      return this.num(this.seconds);
    },
    minute: function() {
      return this.num(this.minutes);
    }
  },
  mounted() {
    this.schoolId = this.getCookie("schoolId");
    this.assessmentId = this.getCookie("assessmentId");
    this.userId = this.getCookie("userId");
    this.studentId = this.getCookie("studentId");
    this.projectId = this.getCookie("projectId");
      // this.courseId = this.getCookie("courseId");
    this.startTime = this.getCookie("startTime") ? new Date(this.getCookie("startTime")).getTime() : ''
    this.stopTime = this.getCookie("stopTime") ? new Date(this.getCookie("stopTime")).getTime() : ''

    this.projectPermissions = this.projectId ? 1 : 0
    if(this.projectId){
      this.getQueryProject();
    }else{
      this.getProjects();
      let codeCache = localStorage.getItem('codeCache')
      if(codeCache){
        codeCache = JSON.parse(codeCache)
        if(codeCache.systemId && codeCache.systemId == this.$config.systemId){
          this.$confirm('是否要继续上次的实验？', '提示', {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'success'
          }).then(() => {
            this.value1 = codeCache.projectId
            this.workbenchCus = codeCache.workbench
            this.isRecovery = true
            this.selectProject()
            let codeIds = []
            codeCache.workbench.map(n => codeIds.push(n.code.codeId))
            codeIds = codeIds.filter(n => n)
            this.codeIds = codeIds
            this.$emit('recoveryCode',codeCache.workbench1)
          }).catch(() => {
            localStorage.removeItem('codeCache')
          })
        }
      }
    }
    this.assessmentId && this.projectId && this.checkVer()
    this.codeId && this.codeIds.push(this.codeId)
    //兄弟组件传值
    newmain.$on("codeid", val => {
      this.codeid = val;
      let codeId = this.codeid;
      this.codeIds.push(codeId);
    });
    // 更改tableData
    newmain.$on("updateJud", item => {
      let list = this.tableData
      list.map(n => {
        if(n.judgmentPointsId == item.id) n.isError = item.isError
      })
      this.tableData = list
    });
  },
  methods: {
    checkVer() {
      let data = {
        userId: this.userId,
        id: this.assessmentId
      }
      this.$get(this.api.qualifications,data).then(res => {
        if(res.message == 'false'){
          this.isSubmit = true;
          newmain.$emit("isSubmit", this.isSubmit);
        }
      });
    },
    //重新开始
    reload() {
      this.$post(this.api.DeleteCodes, this.codeIds).then(res => {
        this.getClearTime()
        localStorage.removeItem('codeCache')
        this.codeIds = []
        this.isSubmit = false
        newmain.$emit("isSubmit", this.isSubmit)
        let workbench = this.workbench
        workbench.map(n => {
          n.code = {
            code: '',
            codeId: ''
          }
        })
        this.$emit('recoveryCode',workbench)
        let tableData = this.tableData
        tableData.map(n => {
          delete n.score
          delete n.right
        })
        this.tableData = JSON.parse(JSON.stringify(tableData))
        this.startCountFn()
      });
    },
    Submit() {
      if(!this.codeIds.length) return this.$message.error('请先完成实验')
      this.$confirm("此操作将视为结束考试, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          this.actEndTime = new Date().getTime();
          this.getClearTime();
          //提交代码与判分点进行判断
          this.$post(this.api.Submit, {
            // projectPermissions: 0,
            createTime: this.startTime,
            endTime: this.stopTime,
            projectId: this.projectId,
            projectPermissions: this.projectPermissions,
            // assessmentId: 1,
            assessmentId: this.assessmentId ? this.assessmentId : '',
            codeIds: this.codeIds,
            judgmentPointsIds: this.judgmentPointsIds,
            // studentId: 54,
            studentId: this.studentId,
            record: {
              courseId: 1,
              // courseId: this.courseId,
              projectId: this.projectId,
              createTime: this.startTime,
              endTime: this.stopTime,
              startTime: this.entryTime
            }
          })
            .then(res => {
              localStorage.removeItem('codeCache')
              this.isSubmit = true
              newmain.$emit("isSubmit", this.isSubmit);
              let list = res.message
              let workbench = this.workbenchCus.length ? this.workbenchCus : this.workbench
              let result = []
              workbench.map(n => {
                result.push(list.find(e => e.judgmentPointsId == n.judgmentPointsId))
              })
              let tableData = this.tableData
              result.map(n => {
                if(tableData.find(e => e.judgmentPointsId == n.judgmentPointsId).isError){
                  n.score = 0
                  n.right = -1
                }
              })
              this.tableData = result
              //计算总分
              var s = 0;
              this.tableData.forEach(element => {
                this.test = element.score;
                s += this.test;
                this.grade = s;
              });
            })
            .catch(err => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交"
          });
        });
    },

    // 倒计时
    timeFormat(param) {
      return param < 10 ? "0" + param : param;
    },

    //控制面板
    step() {
      $(".m_step").toggleClass("n_step");
      this.ishow = !this.ishow;
    },
    // 清除时间
    getClearTime() {
      clearInterval(this.globalTimer);
      clearInterval(this.countVal);
      this.globalTimer = "";
      if(this.projectPermissions != 0){
        this.countVal = "";
        this.day = "00";
        this.seconds = "00";
        this.minutes = "00";
        this.hour = "00";
      }else{
        this.text = '所用'
      }
    },

    handleData(project,type){
      if(!this.isSelected){
        this.value = project;
        this.value1 = project[0].projectId;
      }
      this.projectId = type == 2 ? project[0].projectId : this.projectId
      if(type == 2) this.getQueryProject(0,1)
      this.projectPermissions = type == 1 ? project[0].projectPermissions : this.projectPermissions
      this.$emit("tell", this.value1, this.projectPermissions,this.isRecovery ? this.workbenchCus : []);
      this.experimentalGoal = project[0].experimentalGoal;
      this.caseDescription = project[0].caseDescription;
      this.experimentSuggests = project[0].experimentSuggests;
      this.actEndTime = project[0].endTime;
      this.isRecovery = false
    },
    getQueryProject(projectId,type) {
      //项目名称+实验目标+案例描述+实验提示+实验要求
      this.$get(this.api.QueryProject, {
        // studentId: 54,
        // projectId: 305,
        // assessmentId: 1,
        studentId: this.studentId,
        projectId: projectId ? projectId : this.projectId,
        assessmentId: this.assessmentId
      })
        .then(res => {
          if(!type){
            this.handleData(res.message.project,1)
            this.projectId = res.message.project[0].projectId
          }
          this.points = res.message.points;
          this.tableData = res.message.points;
          let arr1 = this.tableData;
          let result1 = arr1.map(e => e.judgmentPointsId);
          this.judgmentPointsIds = this.judgmentPointsIds.concat(result1);

          if (this.projectPermissions == "1") {
            this.text = "剩余";
            var interval = setInterval(() => {
              // 获取当前时间，同时得到活动结束时间数组
              let newTime = new Date().getTime();
              // 对结束时间进行处理渲染到页面
              let endTime = new Date(this.actEndTime).getTime();
              let obj = null; // 如果活动未结束，对时间进行处理
              if (endTime - newTime > 0) {
                let time = (endTime - newTime) / 1000; // 获取天、时、分、秒
                let day = parseInt(time / (60 * 60 * 24));
                let hou = parseInt((time % (60 * 60 * 24)) / 3600);
                let min = parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
                let sec = parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
                obj = {
                  day: this.timeFormat(day),
                  hou: this.timeFormat(hou),
                  min: this.timeFormat(min),
                  sec: this.timeFormat(sec)
                };
              } else {
                // 活动已结束，全部设置为'00'
                obj = {
                  day: "00",
                  hou: "00",
                  min: "00",
                  sec: "00"
                };
                clearInterval(interval);
              }
              this.day = obj.day;
              this.hour = obj.hou;
              this.minutes = obj.min;
              this.seconds = obj.sec;
            }, 1000);
          } else if (this.projectPermissions == "0") {
            this.text = "已用";
            // 获取当前时间
            this.createTime = new Date().getTime();
            //自动开始
            if (this.autoStart) {
              this.startCountFn();
            }
          }
        })
        .catch(err => {});
    },
    getProjects(){
      let data = {
          systemId: this.systemId,
          // schoolId: this.schoolId
          schoolId: ''
      }
      this.$get(`${this.api.queryTestProject}`,data).then(res => {
          this.handleData(res.message,2)
      }).catch(res => {});
    },
    selectProject(){
      this.isSelected = true
      this.assessmentId = ''
      this.judgmentPointsIds = []
      this.codeIds = []
      this.getQueryProject(this.value1)
      this.isSubmit = false
      this.countVal = 0
      newmain.$emit("isSubmit", this.isSubmit)
    },
    counterFn(counterTime) {
      let leave1 = counterTime % (24 * 3600 * 1); //计算天数后剩余的毫秒数
      let leave2 = leave1 % (3600 * 1); //计算小时数后剩余的毫秒数
      let leave3 = leave2 % (60 * 1); //计算分钟数后剩余的毫秒数
      let day = Math.floor(counterTime / (24 * 3600 * 1)); //计算相差天数
      let hour = Math.floor(leave1 / (3600 * 1)); //计算相差小时
      let minutes = Math.floor(leave2 / (60 * 1)); //计算相差分钟
      let seconds = Math.round(leave3 / 1); //计算相差秒
      day = day >= 10 ? day : "0" + day;
      hour = hour >= 10 ? hour : "0" + hour;
      minutes = minutes >= 10 ? minutes : "0" + minutes;
      seconds = seconds >= 10 ? seconds : "0" + seconds;
      this.day = day;
      this.hour = hour;
      this.minutes = minutes;
      this.seconds = seconds;
    },

    startCountFn() {
      if (!this.isStart) {
        this.countVal = this.countVal ? this.countVal : 0;
        let timer = setInterval(() => {
          this.counterFn(this.countVal++);
        }, 1000);
        this.globalTimer = timer;
        this.isStart = true;
      }
    },
    passToParent(data) {
      this.$emit("getDataFromChild", data);
    },
    getCookie(cookie_name) {
      //获取cookie中指定key的value
      var allcookies = document.cookie; //索引长度，开始索引的位置
      var cookie_pos = allcookies.indexOf(cookie_name); // 如果找到了索引，就代表cookie存在,否则不存在

      if (cookie_pos != -1) {
        // 把cookie_pos放在值的开始，只要给值加1即可
        //计算取cookie值得开始索引，加的1为“=”
        cookie_pos = cookie_pos + cookie_name.length + 1; //计算取cookie值得结束索引
        var cookie_end = allcookies.indexOf(";", cookie_pos);

        if (cookie_end == -1) {
          cookie_end = allcookies.length;
        } //得到想要的cookie的值
        var value = unescape(allcookies.substring(cookie_pos, cookie_end));
      }
      return value;
    }
  }
};
</script>

<style lang="scss" scoped>
.break-all{
  word-break: break-all;
}
.m_step {
  height: 150px;
  cursor: pointer;
  display: block !important;
}
.n_step {
  height: 150px;
  cursor: pointer;
  display: block !important;
}
//el-main
.el-main {
  width: 60%;
  background-color: #fff;
  color: #333;
  padding: 0;
  font-size: 16px;
  margin: 0px 20px 10px 10px;
  white-space: pre-wrap;
  background: #fff url(../assets/img/bg1.png) top right no-repeat;
}

::v-deep .el-collapse-item__wrap {
  border-bottom: none;
}
::v-deep .el-collapse-item__header {
  border-bottom: none;
}
::v-deep .el-tabs__content {
  margin: 0 20px;
}
::v-deep .el-icon-s-ticket:before {
  font-size: 16px;
  padding: 5px;
  color: $main-color;
}
::v-deep .el-collapse-item__arrow {
  margin: 0 5px 0 0;
}
::v-deep .el-icon-arrow-right:before {
  // content: "\e78f";
  font-size: 12px;
  padding: 1px;
  margin-left: 10px;
  background-color: $main-color;
  border-radius: 50%;
  color: #ffffff;
}
::v-deep .el-tabs__item {
  font-size: 16px;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
  border-left: none;
}
::v-deep .el-tabs--card > .el-tabs__header {
  border-bottom: none;
}
::v-deep .el-collapse {
  border-bottom: none;
  border-top: none;
  height: 500px;
  overflow: hidden;
  overflow-y: auto;
}
::v-deep .el-tabs__item.is-active {
  color: #fff;
  background-color: $main-color;
}
::v-deep .el-tabs__header {
  padding: 5px 20px;
}

//el-aside
.el-aside {
  color: #333;
}

.el-aside ::v-deep [class*=" el-icon-"],
[class^="el-icon-"] {
  line-height: 40px;
  font-size: 16px;
}
.aside-header {
  margin: 0px 10px 10px 10px;
  background-color: #fff;
}
.aside-footer {
  margin: 0px 10px 10px 10px;
  background-color: #fff;
}
.header_h {
  height: 50px;
  background: url(../assets/img/header.png) 0 0/100% 100% no-repeat;
  justify-content: center;
}
.header_h i {
  color: #fff;
}
.header_h p {
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  padding-left: 10px;
}
/deep/.el-card{
  border: 0;
  border-radius: 0;
}
//表格
::v-deep .el-card__body {
  padding: 0;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #eef7ff;
}
::v-deep .el-table td,
.el-table th.is-leaf {
  border-bottom: 0;
}
::v-deep .el-table th > .cell {
  font-weight: 100;
}
::v-deep .el-table thead {
  color: #ffffff;
  font-size: 10px;
  th{
    padding: 5px 0;
  }
}
::v-deep .el-table th,
.el-table tr {
  background-color: #badfff;
}
::v-deep .el-table {
  font-size: 12px;
  color: #202020;
}

/deep/.el-collapse-item__content{
  padding-left: 10px;
  padding-right: 10px;
}

//.el-header
.el-header {
  color: #333;
  padding: 0 12px 0 20px;
}
.between {
  justify-content: space-between;
}
//字体样式
.font_css {
  margin: 0 10px;
  text-indent: 2em;
  font-size: 14px;
  padding: 10px 0;
}
//改变placeholder的样式
.select ::v-deep input::-webkit-input-placeholder {
  color: #333;
}
.select ::v-deep input::-moz-input-placeholder {
  color: #333;
}
.select ::v-deep input::-ms-input-placeholder {
  color: #333;
}
//下拉框的icon
.select ::v-deep .el-input__icon {
  line-height: 60px;
}
//下拉框
.select ::v-deep .el-select__caret:before {
  content: "\e78f";
  font-size: 16px;
  padding: 3px;
  background-color: $main-color;
  border-radius: 50%;
  color: #ffffff;
}
.select ::v-deep .el-input--suffix .el-input__inner {
  color: #333;
  font-size: 14px;
  border-radius: 30px;
  border: none;
  background-color: #fff;
  margin-left: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  // white-space: pre-line;
}

.select ::v-deep .el-input {
  padding: 10px 0;
}
//实训时间、得分
.countDownBox {
  font-size: 16px;
  margin: 0 10px;
  padding: 20px 0;
}
.timeSpan {
  color: #333333;
  padding: 5px 15px;
  font-size: 14px;
  background: #ffffff;
  border-radius: 18px;
  margin: 0 5px;
  text-align: center;
}
.gradeSpan {
  color: #878787;
  padding: 10px;
  font-size: 14px;
  background: #e0e0e0;
  border-radius: 6px;
  text-align: center;
}
//重新开始、提交
.el-header ::v-deep .el-button {
  background-color: $main-color;
  color: #fff;
  border: none;
  margin: 5px 0px 5px 5px;
  font-size: 16px;
}
.el-header .submit-btn{
  padding-left: 30px;
  padding-right: 30px;
  background: $main-color url(../assets/img/btn.png) 0 0/100% 100% no-repeat;
}
.el-header ::v-deep .el-button:hover,
.el-button:focus,
.el-button:active {
  background-color: $main-color;
  color: #fff;
}

//公共类
::v-deep .el-container {
  height: 80%;
}
.el-container.is-vertical {
  background-color: #f5f5f5;
  width: 85%;
  height: 70%;
  position: fixed;
  top: 200px;
  bottom: 20px;
  left: 0;
}

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

// 滚动条的宽度
.scrollbar ::-webkit-scrollbar {
  width: 2px; // 横向滚动条
  height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
.scrollbar ::-webkit-scrollbar-thumb {
  background-color: $main-color;
  border-radius: 3px;
  box-shadow: inset 0 0 5px #dddddd;
}
.scrollbar ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px #dddddd;
  border-radius: 0;
  background: #dddddd;
}
</style>