<template>
  <a-modal
    :visible="true"
    :width="700"
    title="表单"
    @cancel="handcancel(thethis)"
    :footer="null"
    :maskClosable="false"

  >
    <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-card
          class="card"
          :title="data ? '更改' : '新增'"
          :bordered="false"
          size="small"
        >
          <a-row class="form-row" :gutter="[16, 0]">
            <!-- 项目配置 -->
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item label="项目" prop="adevrtGamePlate">
                <a-select
                  placeholder="请选择项目"
                  v-model="form.adevrtGamePlate"
                  :style="{ width: '90px' }"
                >
                  <a-select-option :value="10019">ludo </a-select-option>
                  <a-select-option value="okey" :disabled="true">okey </a-select-option>
                  <a-select-option value="baloot" :disabled="true">
                    baloot
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <!-- 广告位置配置 -->
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item
                label="广告位置"
                class="advertPosition"
                prop="advertPosition"
              >
                <a-select
                  v-model="form.advertPosition"
                  placeholder="请选择广告位置"
                  style="width: 180px"
                  v-decorator="[
                    'advertPosition',
                    {
                      rules: [{ required: true, message: '必须的' }],
                    },
                  ]"
                >
                  <a-select-option :value="1">大厅 </a-select-option>
                  <a-select-option :value="2">Events </a-select-option>
                  <a-select-option :value="3">ChatRoom-Explore </a-select-option>
                  <a-select-option :value="4">ChatRoom-Hot </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <!-- 广告语言 -->
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item label="语言" prop="language">
                <a-radio-group v-model="form.language">
                  <a-radio :value="1"> English </a-radio>
                  <a-radio :value="2"> Arabic </a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>

            <!-- 设配类型配置 -->
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item label="设配类型" prop="deviceType">
                <a-radio-group v-model="form.deviceType">
                  <a-radio :value="1"> IOS </a-radio>
                  <a-radio :value="2"> Android </a-radio>
                </a-radio-group>
                <!-- <a-checkbox-group v-model="form.deviceType">
          <a-checkbox value="ios" name="type">IOS </a-checkbox>
          <a-checkbox value="android" name="type">Android </a-checkbox>
        </a-checkbox-group> -->
              </a-form-model-item>
            </a-col>

            <!-- softWare配置 -->
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item label="通用范围" class="softwareHD" prop="softwareHD">
                <a-select
                  v-model="form.softwareHD"
                  placeholder="请选择通用范围"
                  style="width: 150px"
                >
                  <a-select-option :value="2">HD </a-select-option>
                  <a-select-option :value="1">主包</a-select-option>
                  <a-select-option :value="0">ALL </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <!-- 名称 -->
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item label="名称" prop="name">
                <a-input placeholder="名称" v-model="form.name" />
              </a-form-model-item>
            </a-col>

            <!-- H5地址配置 -->
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item label="跳转地址" prop="h5Url">
                <a-input v-model="form.h5Url" />
              </a-form-model-item>
            </a-col>

            <!-- 图片（icon）配置 -->
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item label="图片" prop="imgUrl">
                <div>
                  <UploadFile
                    @getImgUrl="getImgUrl"
                    :img-clear="imgClear"
                    :img-url="imgUrl"
                    :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="最小版本" prop="minVersion">
                <a-input
                  placeholder="请输入版本号"
                  v-model="form.minVersion"
                  :style="{ width: '150px' }"
                />
              </a-form-model-item>
            </a-col>

            <!-- 最大版本号 -->
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item label="最大版本" prop="maxVersion">
                <a-input
                  placeholder="请输入版本号"
                  v-model="form.maxVersion"
                  :style="{ width: '150px' }"
                />
              </a-form-model-item>
            </a-col>

            <!-- 展示范围 -->
            <!-- 展示最小范围 -->
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item
                label="范围最小值"
                v-if="form.advertPosition == 3 || form.advertPosition == 4"
              >
                <a-input-number :min="0" :max="2147483647" v-model="form.showMinRange" />
              </a-form-model-item>
            </a-col>
            <!-- 展示最大范围 -->
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item
                label="范围最大值"
                v-if="form.advertPosition == 3 || form.advertPosition == 4"
              >
                <a-input-number :min="0" :max="2147483647" v-model="form.showMaxRange" />
              </a-form-model-item>
            </a-col>

            <!-- 排序 -->
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item label="排序" prop="sort">
                <a-input-number :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="状态" prop="status">
                <a-switch
                  checked-children="开"
                  un-checked-children="关"
                  v-model="form.status"
                />
              </a-form-model-item>
            </a-col>

            <!-- 描述配置 -->
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item label="描述" prop="describe">
                <a-input v-model="form.describe" type="textarea" />
              </a-form-model-item>
            </a-col>

            <!-- 备注配置 -->
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item label="备注" prop="remark">
                <a-input v-model="form.remark" type="textarea" />
              </a-form-model-item>
            </a-col>

            <!-- 提交和重置 -->
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-button type="primary" @click="on_Submit">
                  {{ data ? "更改" : "提交" }}
                </a-button>
                <a-button style="margin-left: 10px" @click="clearInfo(thethis)">
                  重置
                </a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>
<script>
import { uploadFile } from "@/common/api/upload.js";
import UploadFile from "@/common/components/MyForm/UploadFile.vue";
import {
  formLayout,
  rules,
  isHaveData,
  clearInfo,
  getImgUrl,
  handcancel,
  LimitLength,
} from "@/common/components/MyForm/utils/utils.js";
export default {
  props: ["data", "that"],
  mounted() {
    this.data
      ? (this.form = this.data) &&
        (this.form.status = !this.form.status) &&
        (this.form.adevrtGamePlate == 1 ? (this.form.adevrtGamePlate = 10019) : 1) &&
        (this.imgUrl = this.form.imgUrl)
      : "";
  },
  data() {
    this.thethis = this;
    return {
      // 布局
      formLayout,
      // 表单初始格式
      form: {
        id: 0,
        adevrtGamePlate: 10019,
        advertPosition: undefined,
        language: "",
        deviceType: "",
        softwareHD: "",
        minVersion: "",
        maxVersion: "",
        name: "",
        h5Url: "",
        imgUrl: "",
        showMinRange: 0,
        showMaxRange: 0,
        status: true,
        remark: "",
      },
      // 验证规则
      rules: {
        adevrtGamePlate: [rules.required],
        advertPosition: [rules.required],
        language: [rules.required],
        deviceType: [rules.required],
        softwareHD: [rules.required],
        name: [rules.required],
        h5Url: [rules.required],
        imgUrl: [rules.required],
        minVersion: [rules.required],
        maxVersion: [rules.required],
        status: [rules.required],
        sort: [rules.required],
        describe: [rules.LimitLength(0, 2)],
        remark: [rules.LimitLength(0, 512)],
      },
      imgClear: false, // 图片清空参数
      imgUrl: "",
    };
  },

  methods: {
    // 重置表单元素
    clearInfo,
    // 图片路径
    getImgUrl,
    // 关闭
    handcancel,

    // 提交（更改）表单
    on_Submit(type) {
      var that = this;
      // 提示框确认
      this.$confirm({
        title: "确认提交？",
        okText: "提交",
        cancelText: "取消",
        onOk() {
          // 点击确定
          that.info = { ...that.form };
          that.$refs.ruleForm.validate((valid) => {
            if (valid) {
              console.log(that.info);
              that.handcancel(that);
            }
            console.log(valid);
          });
        },
        onCancel() {},
      });
    },
  },

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