<template>
  <div>
    <el-dialog title="驾驶员违规记录模板下载" width="800px" :model-value="props.modelValue" @close="closeDialog">
      <div class="head">
        <div>
          <el-button type="primary" @click="downloadTemplate('02', '驾驶员违规记录（超速模板）-批量导入模板')"><el-icon>
              <Download />
            </el-icon>超速驾驶</el-button>
          <el-button type="primary" @click="downloadTemplate('03', '驾驶员违规记录（疲劳驾驶模板）-批量导入模板')"><el-icon>
              <Download />
            </el-icon>疲劳驾驶</el-button>
          <el-button type="primary" @click="downloadTemplate('04', '驾驶员违规记录（群众举报模板）-批量导入模板')"><el-icon>
              <Download />
            </el-icon>群众举报</el-button>
        </div>
        <div>
          <el-button type="primary" @click="downloadTemplate('05', '驾驶员违规记录（违章信息模板）-批量导入模板')"><el-icon>
              <Download />
            </el-icon>违章信息</el-button>
          <el-button type="primary" @click="downloadTemplate('06', '驾驶员违规记录（车辆交通事故）-批量导入模板')"><el-icon>
              <Download />
            </el-icon>交通事故</el-button>
          <el-button type="primary" @click="downloadTemplate('07', '驾驶员违规记录（酒驾）-批量导入模板')"><el-icon>
              <Download />
            </el-icon>酒后驾驶</el-button>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog" type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>关闭
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import { defineProps, defineEmits } from "vue";
import { downloadTemplate } from "@/utils/tools.js";
const emits = defineEmits(["changeClose"]);
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  }
});
// 关闭
const closeDialog = () => {
  emits("changeClose", false);
};
</script>

<style lang="scss" scoped>
.head {

  >div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
  }
}

::v-deep .el-dialog__body {
  height: 150px !important;
}
</style>
