<!--基本设置-->
<template>
  <div class="app-container">
    <el-form
      ref="formRef"
      style="width: 600px"
      :model="addOrUpdateForm"
      :rules="rules"
      label-position="left"
      label-width="140px"
    >
      <TagCard title="功能配置">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="是否开启快速入园" prop="type">
              <el-radio-group v-model="addOrUpdateForm.type">
                <el-radio
                  v-for="item in [
                    {label:'否',code:0},
                    {label:'是',code:1},
                  ]"
                  :key="item.code"
                  :label="item.label"
                >{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </TagCard>
      <TagCard title="页面配置">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item
              :label="`景区照片${
                '(' + addOrUpdateForm.scenicSpotImages.length + '/' + 4 + ')'
              }`"
              prop="scenicSpotImages"
            >
              <el-upload
                action="https://noise.hz-hanghui.com:8088/hanghui-warehouse/upload/picture"
                accept="image/*"
                list-type="picture-card"
                :limit="4"
                :on-success="handleChange"
                :file-list="addOrUpdateForm.scenicSpotImages"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </TagCard>
    </el-form>
    <div class="footer_btn">
      <el-button style="width: 120px" @click="onClose">重 置</el-button>
      <el-button
        type="primary"
        :loading="submitLoading"
        style="width: 120px;margin-left: 40px"
        @click="onSubmit"
      >保存配置</el-button>
    </div>
  </div>
</template>
<script>
import TagCard from '@/components/TagCard';

export default {
  components: {
    TagCard
  },
  data() {
    return {
      submitLoading: false,
      addOrUpdateForm: {
        type: '', // 是否开启快速入园
        scenicSpotImages: [] // 景区图片
      },
      // 规则
      rules: {
        type: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      }
    };
  },
  watch: {
  },
  created() {
  },
  methods: {
    handleRemove(file, fileList) {
      this.addOrUpdateForm.scenicSpotImages = fileList;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.previewImageVisible = true;
    },
    handleChange(response, file, fileList) {
      this.addOrUpdateForm.scenicSpotImages = fileList;
    },
    onClose() {
      this.submitLoading = true;
    },
    // 确认按钮
    onSubmit() {
      this.$refs.formRef.validate(async(pass) => {
        if (!pass) {
          return false;
        }
        if (this.submitLoading) {
          return;
        }
        this.submitLoading = true;
        this.$message.success(`${this.dialogTitle}成功`);
      });
    }
  }
};
</script>

<style lang="scss" >

.footer_btn {
  .el-button--primary {
    span {
      letter-spacing: 2px !important;
    }
  }
}

</style>
