<template>
  <base-dialog v-model="modalVisible" title="选择导入方式" destroy-on-close :width="400">
    <div class="method-box flex justify-around items-center">
      <div class="method" :class="{ active: !clear }" @click="setClear(false)">
        <img class="icon-img" src="../../../../assets/images/append_import.png" />
        <p>追加导入</p>
        <img src="../../../../assets/images/cur_import_method.png" class="cur" />
      </div>
      <div v-if="checkStatus === 'CHOOSE'" class="method" :class="{ active: !!clear }" @click="setClear(true)">
        <img class="icon-img" src="../../../../assets/images/clear_import.png" />
        <p>清空导入</p>
        <img src="../../../../assets/images/cur_import_method.png" class="cur" />
      </div>
    </div>
    <div class="flex items-center tip">
      <el-icon style="color: #ce372e; font-size: 16px"><warning-filled /></el-icon>
      <span>已有数据，是否继续导入？</span>
    </div>
    <template #footer>
      <div class="flex justify-end">
        <confirm-button @confirm="sureImport" @cancel="cancelImport"></confirm-button>
      </div>
    </template>

    <!-- </base-form> -->
  </base-dialog>
</template>
<script setup lang="ts">
import { ElIcon } from 'element-plus'
import BaseDialog from '@/components/element/BaseDialog.vue'
import ConfirmButton from '@/components/common/ConfirmButton.vue'
import { WarningFilled } from '@element-plus/icons-vue'
import useVModel from '@/hooks/useVModel'
const emits = defineEmits(['sure', 'cancel'])
const props = withDefaults(
  defineProps<{
    visible?: boolean
    checkStatus?: string
    clear?: boolean
  }>(),
  {
    visible: false,
    checkStatus: '',
    clear: false,
  }
)
const modalVisible = useVModel(props, 'visible')
const clear = useVModel(props, 'clear')
const setClear = (bool: boolean) => {
  clear.value = bool
}
const cancelImport = () => {
  modalVisible.value = false
}
const sureImport = () => {
  emits('sure')
}
</script>
<style lang="scss" scoped>
.tip {
  color: #666;
  font-size: 12px;
  margin-top: 15px;
  span {
    margin-left: 4px;
  }
}
.method-box {
  .method {
    width: 165px;
    height: 96px;
    background: #f5f5f5;
    border-radius: 4px;
    border: 2px solid #f5f5f5;
    cursor: pointer;
    text-align: center;
    padding-top: 20px;
    position: relative;
    transition: all 0.3s;
    .cur {
      display: none;
      position: absolute;
      right: -2px;
      top: -2px;
      z-index: 1;
      width: 26px;
      height: 26px;
    }
    .icon-img {
      width: 28px;
    }
    p {
      color: #333;
      font-size: 14px;
      font-weight: bold;
      margin-top: 4px;
    }
    &.active {
      border: 2px solid #0064ff;
      background-color: #fff;
      .cur {
        display: block;
      }
    }
  }
}
</style>
