<!-- 结束实验dialog  -->
<template>
  <van-dialog
    class="BaseApp-dialog BaseApp-dialog--small"
    v-model:show="cmptVisible"
    :showCancelButton="false"
    :showConfirmButton="false">
    <div class="CloseExperimentDialog-wrapper">
      <img
        class="CloseExperimentDialog-icon"
        src="@/assets/image/equipment/experiment_end.png"
        alt="" />
      <div class="CloseExperimentDialog-title">确定要结束试验？</div>
      <div class="CloseExperimentDialog-content">
        本实验标准建议,外壳温度不超过170℃,并且在试验过程中及试验后6小时内无解体、无破裂,无起火,电池和电池组即符合本项要求。
      </div>
      <van-checkbox-group
        class="CloseExperimentDialog-checked-wrapper"
        v-model="formData.reasonIdList"
        shape="square">
        <van-checkbox v-for="item in reasonList" :key="item.value" :name="item.value">
          {{ item.label }}
        </van-checkbox>
      </van-checkbox-group>
      <div class="CloseExperimentDialog-btn-wrapper">
        <div class="BaseApp-btn BaseApp-btn--red" @click="close">否</div>
        <div class="BaseApp-btn BaseApp-btn--primary" @click="submit">是</div>
      </div>
    </div>
  </van-dialog>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick, reactive, defineEmits } from 'vue';
const emit = defineEmits(['close', 'submit']);

let cmptVisible = ref(true);
let formData = reactive({
  reasonIdList: []
});
let reasonList = reactive([
  { value: 'is_disintegrate', label: '解体' },
  { value: 'is_rupture', label: '破裂' },
  { value: 'is_fire', label: '起火' }
]);

const close = () => {
  emit('close');
  cmptVisible.value = false;
};

const submit = () => {
  emit('submit', formData);
  cmptVisible.value = false;
};

onMounted(() => {});

onBeforeUnmount(() => {});
</script>

<style lang="less" scoped>
.CloseExperimentDialog-dialog {
  width: 475px;
  height: 475px;
}

.CloseExperimentDialog-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 300px;
  padding: 40px 65px;
  .CloseExperimentDialog-icon {
    width: 66px;
    height: 66px;
  }
  .CloseExperimentDialog-title {
    margin-top: 20px;
    font-weight: 400;
    font-size: 28px;
    color: #3a3a3a;
    line-height: 50px;
  }
  .CloseExperimentDialog-content {
    margin: 10px;
    font-weight: 400;
    font-size: 18px;
    color: #808080;
    line-height: 28px;
  }
  .CloseExperimentDialog-checked-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin: 35px 0;
  }
  .CloseExperimentDialog-btn-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
  }
}
</style>
