<template>
    <el-dialog
    class="entryDialog classCUploadDialog"
       title="导入模板下载"
       :visible.sync="downloadTemplateVisible"
       :show-close="false"
       width="60%"
       :close-on-click-modal="false"
     >
      <div>
     <el-form class="fedexFormStyle"
           ref="selectTemplateForm"
           :model="selectTemplateFormData"
           :rules="selectTemplateFormRules"
           label-position="left"
           size="small"
         >
       <Formitem label="模板类型" prop="type">
                 <el-select
                   type="text"
                   v-model="selectTemplateFormData.type"
                   clearable
                   placeholder=""
                 >
                   <el-option
                    v-for="(item, index) in $store.getters.dict.TEMPLATE_TYPE"
                    :key="index"
                    :label="item.itemChineseName"
                    :value="item.itemValue"
                   ></el-option>
                 </el-select>
               </Formitem>
     </el-form>
     </div>
       <div class="dialogOption entrySave revokeOperation">
         <el-button
           class="entrySaveButton entrySaveButton-background revokeSubmitBtn"
           type="primary"
           @click="startDownload"
           >确定</el-button>
           <el-button
           class="entrySaveButton"
           @click="cancelDownload"
           >关闭</el-button>
       </div>
   </el-dialog>
   </template>
     
     <script>
     export default {
       props: {
         showDialog: {
           type: Boolean,
           default: false,
         }
       },
       data() {
         return {
         downloadTemplateVisible:false,
         selectTemplateFormData:{
           type:''
         },
         selectTemplateFormRules: {
           type: [
               { required: true, message: '请选择模板类型', trigger: 'change' }
             ],
         }
         };
       },
       watch: {
           showDialog(val) {
               if (val) {
                   this.downloadTemplateVisible = val
               }
           },
     },
     created() {
        this.selectTemplateFormData.type=""
     },
       methods: {
       startDownload(){
         this.$refs.selectTemplateForm.validate((valid) => {
             if (valid) {
               console.log('datas==', this.selectTemplateFormData)
               this.fileDownload
                .downLoadZip(
                "api",
                "declareDataModel",
                "申报数据模板.xlsx",
                "xlsx",
                "get",
                {type: this.selectTemplateFormData.type}
                )
                .finally(() => {
                this.cancelDownload()
                });
              
           } else {
               return false;
             }
           });
       },
   
       cancelDownload(){
          this.downloadTemplateVisible = false
          this.selectTemplateFormData.type=""
          this.$emit('cancelDownload')
       }
       },
     };
     </script>
     
     <style lang="scss" scoped>
     @import "@/assets/styles/variables.scss";
     .modelItem {
       width: 100%;
       .modelItem-title {
         display: flex;
         justify-content: space-between;
         margin-bottom: 5px;
         font-size: 14px;
         font-weight: 600;
         color: #333;
       }
     }
     .revokeOperation{
     margin-bottom:25px;
     .revokeSubmitBtn{
       margin-right: 30px;
     }
   }
     </style>