<template>
  <a-modal
    :visible="true"
    :width="820"
    :title="$t('site.form.站点编辑')"
    @cancel="handcancel(thethis)"
    :footer="null"
  >
    <a-spin :spinning="false">
      <a-form-model
        ref="ruleForm"
        :model="form"
        v-bind="formLayout"
        :rules="rules"
      >
        <a-form-model-item style="display: none">
          <a-input
            allow-clear
            autocomplete="off"
            v-decorator="['operateType']"
            type="hidden"
          />
        </a-form-model-item>
        <a-row class="form-row" :gutter="[16, 0]">
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-model-item label="Id" prop="id">
              <a-input placeholder="Id" v-model="form.id"  />
            </a-form-model-item>
          </a-col>

          <a-col :lg="12" :md="12" :sm="24">
            <a-form-model-item label="Code" prop="code">
              <a-input placeholder="Code" v-model="form.code" />
            </a-form-model-item>
          </a-col>

          <a-col :lg="12" :md="12" :sm="24">
            <a-form-model-item :label="$t('site.form.名字')" prop="name">
              <a-input :placeholder="$t('site.form.名字')" v-model="form.name" allow-clear />
            </a-form-model-item>
          </a-col>

          <a-col :lg="12" :md="12" :sm="24">
            <a-form-model-item :label="$t('site.form.图标')" prop="Logo">
              <div>
                <UploadFile
                  @getImgUrl="getLogoUrl"
                  :img-clear="imgClear"
                  :imgUrl="form.logo"
                  :that="this"
                  :fileType="1"
                />
              </div>
              <!-- <p :style="{color:'red'}">请选择图片！</p> -->
            </a-form-model-item>
          </a-col>

          <a-col :lg="12" :md="12" :sm="24">
            <a-form-model-item :label="$t('site.form.域名')" prop="domainUrl">
              <a-input
                :placeholder="$t('site.form.域名')"
                v-model="form.domainUrl"
                allow-clear
              />
            </a-form-model-item>
          </a-col>

          <a-col :lg="12" :md="12" :sm="24">
            <a-form-model-item :label="$t('site.form.首页地址')" prop="indexUrl">
              <a-input
                :placeholder="$t('site.form.首页地址')"
                v-model="form.indexUrl"
                allow-clear
              />
            </a-form-model-item>
          </a-col>

          <a-col :lg="12" :md="12" :sm="24">
            <a-form-model-item :label="$t('site.form.排序')" prop="sort">
              <a-input-number
                :placeholder="$t('site.form.排序')"
                :min="0"
                :max="2147483647"
                v-model="form.sort"
              />
            </a-form-model-item>
          </a-col>

          <!-- 备注配置 -->
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-model-item :label="$t('site.form.备注')" prop="remark">
              <a-textarea v-model="form.remark" allow-clear />
            </a-form-model-item>
          </a-col>
          <!-- 提交和重置 -->
          <a-col :lg="24" :md="24" :sm="24" :style="{ textAlign: 'center' }">
            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button type="primary" @click="on_Submit"> {{$t("提交")}} </a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>
<script>
import UploadFile from "@/common/components/Commonality/Form/components/UploadFile.vue";
import {
  formLayout,
  rules,
  form,
  isHaveData,
  clearInfo,
  getImgUrl,
  handcancel,
  submit,
} from "@/baseConfigComponents/components/Site/Modify/modify.js";
export default {
  props: ["data", "that", "refresh"],
  mounted() {
    isHaveData(this);
  },
  data() {
    this.thethis = this;
    return {
      // 布局
      formLayout,
      // 表单初始格式
      form,
      // 验证规则
      rules,
      imgClear: false, // 图片清空参数
      imgUrl: "",
    };
  },

  methods: {
    // 重置表单元素
    clearInfo,
    // 图片路径
    getLogoUrl(imgUrl, obj) {
      console.log(imgUrl);
      obj.form.logo = imgUrl;
    },
    // 关闭
    handcancel,

    // 提交（更改）表单
    on_Submit(type) {
      var that = this;
      // 提示框确认
      this.$confirm({
        title: "确认提交？",
        okText: "提交",
        cancelText: "取消",
        onOk() {
          // 点击确定
          that.info = { ...that.form };
          that.$refs.ruleForm.validate((valid) => {
            if (valid) {
              submit(that.info).then(() => {
                that.$message.success("操作成功");
                that.$emit("refresh");
                that.clearInfo(that);
                that.handcancel(that);
              });
            }
          });
        },
        onCancel() {},
      });
    },
  },

  components: {
    UploadFile,
  },
};
</script>
