<template>
  <div @click="openDrawer">
    <slot></slot>
  </div>
  <a-drawer :visible="visible" class="drawerStyle addinvistDrawer" width="900px" title="添加评估" placement="right">
    <div class="drawerMain">
      <div class="header">
        <div class="headerTitle">{{assessmentId?'编辑评估':'添加评估'}}</div>
        <img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
             @click="closeDrawer"/>
      </div>
      <div class="contentMain">
        <div class="main">
          <div class="main_left">
            <AssessmentAll v-model:id="formData.assessmentId" v-model:name="formData.assessmentName"/>
          </div>
        </div>
      </div>
      <div class="main_btns">
        <button class="btn1" @click="closeDrawer">取消</button>
        <button class="btn2" @click="confirm">确定</button>
      </div>
    </div>
  </a-drawer>
</template>
<script setup>
import {defineEmits, defineProps, ref, watch} from "vue";
import {Form, message} from "ant-design-vue";
import AssessmentAll from "@/components/drawers/AssessmentAll.vue";

const props = defineProps({
  assessmentId: String,
  assessmentName: String,
  disabled:{
    type:Boolean,
    default:false
  }
})
const visible = ref(false)
const formData = ref({
  assessmentId: '',
  assessmentName: '',
})
const emit = defineEmits({})
const rulesRef = ref({
  assessmentId: [
    {
      required: true,
      message: '请选择评估',
    },
  ],
  assessmentName: [
    {
      required: true,
      message: '请选择评估',
    },
  ],
});

const {resetFields, validate} = Form.useForm(formData, rulesRef);
watch(props,()=>{
  formData.value.assessmentId = props.assessmentId
  formData.value.assessmentName = props.assessmentName
})
const closeDrawer = () => {
  visible.value = false
  resetFields()
};

async function confirm() {
  await validate().catch(({errorFields}) => {
    message.warning(errorFields[0].errors.join());
    throw Error("数据校验不通过")
  });
  emit('update:assessmentId', formData.value.assessmentId)
  emit('update:assessmentName', formData.value.assessmentName)
  closeDrawer()
}

function openDrawer() {
  if(props.disabled) return
  visible.value = true
}

defineExpose({openDrawer})
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa !important;
}

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

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

    .contentMain {
      .main {
        width: 100%;

        .main_left {
          padding-right: 30px;
          margin-top: 32px;

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

            .fi_input {
              margin-right: 20px;
            }

            .btns {
              margin-right: 20px;
              padding: 0px 26px 0px 26px;
              height: 38px;
              background: #4ea6ff;
              border-radius: 8px;
              //border: 1px solid rgba(64, 158, 255, 1);
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 14px;
              flex-shrink: 0;
              cursor: pointer;

              .search {
                width: 15px;
                height: 17px;
                background-image: url("../../assets/images/courseManage/search0.png");
                background-size: 100% 100%;
              }

              .btnText {
                font-size: 14px;
                font-weight: 400;
                color: #ffffff;
                line-height: 36px;
                margin-left: 5px;
              }
            }

            .btnsn {
              padding: 0px 26px 0px 26px;
              height: 38px;
              background: #ffffff;
              border-radius: 8px;
              border: 1px solid rgba(64, 158, 255, 1);
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 14px;
              flex-shrink: 0;
              cursor: pointer;

              .search {
                width: 16px;
                height: 18px;
                background-image: url("../../assets/images/courseManage/reset1.png");
                background-size: 100% 100%;
              }

              .btnText {
                font-size: 14px;
                font-weight: 400;
                color: #4ea6ff;
                line-height: 36px;
                margin-left: 5px;
              }
            }
          }

          .main_notice {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 3px;
            height: 40px;
            background-color: #e9f6fe;

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

              .title {
                color: rgba(0, 0, 0, 0.65);
                margin-right: 17px;
              }

              .data {
                color: #4ea6ff;
              }

              .notice_icon {
                width: 14px;
                height: 14px;
                margin-right: 9px;
                margin-left: 9px;
                background-image: url(@/assets/images/coursewareManage/gan.png);
                background-size: 100% 100%;
              }
            }

            .mntc_right {
              cursor: pointer;
            }
          }
        }
      }
    }

    .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>
