<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>