<template>
    <el-dialog
    class="entryDialog classCUploadDialog"
       title="申报数据导出"
       :visible.sync="datasExportVisible"
       :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="dataSource">
                 <el-select
                   type="text"
                   v-model="selectTemplateFormData.dataSource"
                   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 {
         datasExportVisible:false,
         selectTemplateFormData:{
            dataSource:''
         },
         selectTemplateFormRules: {
            dataSource: [
               { required: true, message: '请选择模板类型', trigger: 'change' }
             ],
         }
         };
       },
       watch: {
           showDialog(val) {
               if (val) {
                   this.datasExportVisible = val
                   this.selectTemplateFormData.dataSource=""
               }
           },
     },
     created() {
     },
       methods: {
       startDownload(){
         this.$refs.selectTemplateForm.validate((valid) => {
             if (valid) {
               this.$emit('startDatasExport', this.selectTemplateFormData.dataSource)
           } else {
               return false;
             }
           });
       },
   
       cancelDownload(){
          this.datasExportVisible = false
          this.selectTemplateFormData.dataSource=""
          this.$emit('cancelDatasExport')
       }
       },
     };
     </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>