<!--
 * @Author: zhangtq 2452618307@qq.com
 * @Date: 2024-11-27 18:11:05
 * @LastEditors: zhangtq 2452618307@qq.com
 * @LastEditTime: 2025-01-20 18:30:15
 * @FilePath: src/views/screen/components/video/ViolationForm.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<template>
  <div class="violation_container">
    <el-form
      ref="dialogForm"
      :model="dialogForm"
      label-width="120px"
      :rules="dialogRules"
    >
      <el-row style="display: flex;flex-direction: row">
        <el-form-item label="违章工程" prop="proId">
          <el-select v-model="dialogForm.proId" placeholder="请选择违章工程" clearable @change="changePro" filterable
                     :popper-append-to-body="false" class="custom-select"
          >
            <el-option v-for="item in violationProOpts" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="责任承包商" prop="consId">
          <el-select v-model="dialogForm.consId" placeholder="请选择责任承包商" clearable @change="changCons"
                     :popper-append-to-body="false" class="custom-select"
                     filterable
          >
            <el-option
              v-for="item in responsibilityContractorOpts"
              :key="item.valueUuid"
              :label="item.label"
              :value="item.valueUuid"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="承包商负责人" prop="personId">
          <el-input v-model="dialogForm.personName" placeholder="请输入承包商负责人" disabled  v-no-whitespace/>
        </el-form-item>
      </el-row>
      <el-row style="display: flex;flex-direction: row">
        <el-form-item label="违章类型" prop="violationType">
          <el-select v-model="dialogForm.violationType" placeholder="请选择违章类型" clearable filterable
                     :popper-append-to-body="false" class="custom-select"
                     @change="changeViolationType"
          >
            <el-option v-for="item in violationTypeOpts" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="负责人" prop="directorId">
          <el-select v-model="dialogForm.directorId" placeholder="请选择负责人" clearable filterable
                     :popper-append-to-body="false" class="custom-select"
                     @change="changePerson"
          >
            <el-option v-for="item in leaderOpts" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="违章时间" prop="violationTime">
          <div class="sift-main">
          <el-date-picker
            v-model="dialogForm.violationTime"
            type="date"
            placeholder="请选择违章时间"
            :append-to-body="false"
            popper-class="sift-data"
            clearable
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            :picker-options="{ disabledDate: time => time.getTime() > Date.now() }"
          />
          </div>
        </el-form-item>
      </el-row>
      <!-- 违章依据 -->
      <el-row :gutter="20">
        <el-form-item label="违章依据" prop="violationContent">
          <el-input
            type="textarea"
            v-model="dialogForm.violationContent"
            placeholder="请输入违章依据"
            clearable v-no-whitespace
            :autosize="{ minRows: 4, maxRows: 6 }"
            maxlength="300"
            style="width: 515px"
          />
        </el-form-item>
        <el-form-item label="上传图片" prop="violationPhoto">
          <el-upload
            action="#"
            accept="image/*"
            :auto-upload="false"
            list-type="picture-card"
            :file-list="dialogForm.violationPhoto"
            :limit="1"
            :class="{ disabled: true }"
            :disabled="true"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-row>
      <div style=" position: absolute;top: 90%;left: 85%;">
        <el-button type="primary" @click="submitForm('dialogForm')" v-preventReClick="5000">提交</el-button>
        <el-button @click="resetForm('dialogForm')">重置</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'violationForm',
  props: {
    changCons: {},
    changePerson: {},
    changePro: {},
    changeViolationType: {},
    dialogForm: {},
    dialogRules: {},
    leaderOpts: {},
    responsibilityContractorOpts: {},
    violationProOpts: {},
    violationTypeOpts: {}
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('submitViolationForm', this.dialogForm)
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>

// 改变input里的字体颜色

::v-deep input::-webkit-input-placeholder {
  color: #8a8a8a;
  font-size: 15px;
}

/**
  * 分页样式
 */

::v-deep .el-pagination.is-background .el-pager li {
  border: 1px solid #278996;
  background-color: transparent;
  color: whitesmoke;
  width: 50px;
  height: 40px;
  line-height: 37px;
  font-size: 20px;
  margin-right: 15px;
}

.custom-select {
  float: right;
  margin-right: 20px;
  background-color: rgb(5, 32, 75) !important;
  color: rgb(5, 32, 75);
  font-size: 14px;
}

::v-deep .el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #dadada;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

::v-deep .el-select,
::v-deep .el-input,
::v-deep .el-input__inner {
  background: rgb(5, 32, 75);
  color: #fff;
  border-radius: 5px;

}

//el-input聚焦的时候 外层的border会有一个样式
::v-deep .el-select .el-input.is-focus .el-input__inner {
  border: 0;
}

//修改的是el-input上下的小图标的颜色
::v-deep .el-select .el-input .el-select__caret {
  color: rgba(174, 197, 234, 0.8);
}

//修改总体选项的样式 最外层

::v-deep .el-select-dropdown {
  background: rgba(21, 43, 94, 0.3);
  margin: 0px;
  border: 0px;
  border-radius: 0px;
  left: 0px !important;

}

::v-deep .el-select-dropdown.el-popper {
  min-width: 215px;
  transform-origin: center top;
  z-index: 2012;
  position: absolute !important;

}

::v-deep .el-select-dropdown__list {
  background-color: rgb(5, 32, 75, 0.8) !important;
  color: #fff;
}

//修改单个的选项的样式
::v-deep .el-select-dropdown__item {
  background-color: rgb(5, 32, 75, 0.8);
  color: #fff;
}

//item选项的hover样式
::v-deep .el-select-dropdown__item.hover,
::v-deep .el-select-dropdown__item:hover {
  color: rgb(212, 215, 220);
  background-color: #146193;
}

//修改的是下拉框选项内容上方的尖角
::v-deep .el-popper .popper__arrow, .el-popper .popper__arrow::after {
  display: none;
}
::v-deep .el-select-dropdown__empty {
  color: #fff;
}

::v-deep.disabled {
  .el-upload--picture-card {
    display: none;
  }
}



/**
  * 日历样式
 */
.sift-main {
  //年、月、日的日历面板样式
  ::v-deep.sift-data {
    background: rgb(5, 32, 75, 0.9);
    //日历面板头部区域的样式
    .el-date-picker__header {
      background: unset;
    }

    // 头部lanble的样式,如(2024年3月)
    .el-date-picker__header-label {
      color: #fff;
    }

    // 切换日历的按钮样式
    .el-picker-panel__icon-btn {
      color: #fff;
    }

    // 周一二三四五的样式
    .el-date-table th {
      color: #fff;
    }
    .el-date-table td div {
      height: 0;
      padding: 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    .el-date-table td.disabled div {
      background-color: #818181;
      opacity: 1;
      cursor: not-allowed;
      color: #C0C4CC;
    }
    /* 切换到年时 */
    //除头部的日历模块区域样式  当type=date点击label的年或者月时的样式
    .el-year-table,
    .el-month-table {
      background: unset;
      //头部显示范围内的年的模块的样式
      .available {
        background: unset;
        // 里面的文字的样式
        a {
          color: #1890ff;
        }
      }

      //今年
      .today {
        a {
          color: #fff;
        }
      }

      //选中的年
      .current {
        background: unset;
        border-radius: unset;

        a {
          color: yellow;
        }
      }
    }

    /* 当type=date点击label 日 的样式 */
    // 非本月的区域样式
    .prev-month,
    .next-month {
      background: unset;
      color: #8c8c8c;
    }

    //当月的显示区域样式
    .available {
      // background: blue;
      color: whitesmoke;
    }

    .current {
      // color: green;
      // background: yellow;
      div {
        span {
          background: yellow;
          color: #000;
        }
      }
    }

    .today {
      div {
        span {
          background: #1890ff;
          color: #fff;
        }
      }
    }
  }
}
</style>
