<template>
  <div class="game-form-edite">
    <el-dialog
      :title="textOptTitle"
      :visible="true"
      :modal-append-to-body="true"
      :append-to-body="true"
      :before-close="handleClose"
      :close-on-click-modal="false"
      width="550px"
      top="50px"
    >
      <div v-loading="submitLoading">
        <div class="form-contetn">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="110px"
            style="margin-right: 50px;"
          >
            <!-- 封面 -->
            <el-form-item label="封面" prop="cover">
              <el-upload
                :disabled="coverUploadLoading"
                :file-list="coverFileList"
                :class="{ 'upload-but-hide': !isShowCoverUpload }"
                action=""
                list-type="picture-card"
                :http-request="uploadCover"
                :show-file-list="!isShowCoverUpload"
                :on-remove="handleCoverFileRemove"
                accept="image/*"
              >
                <i
                  slot="default"
                  v-loading="coverUploadLoading"
                  class="el-icon-plus"
                />
              </el-upload>
            </el-form-item>

            <!-- 系统 -->
            <el-form-item label="系统">
              <el-select
                v-model="form.sysOrigin"
                placeholder="选择系统"
                style="width:100%;"
                class="filter-item"
                disabled
                @change="changeSysOrigin"
              >
                <el-option
                  v-for="item in permissionsSysOriginPlatforms"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                  <span style="float: left;">
                    <sys-origin-icon :icon="item.value" :desc="item.value"
                  /></span>
                  <span style="float: left;margin-left:10px">{{
                    item.label
                  }}</span>
                </el-option>
              </el-select>
            </el-form-item>

            <!-- 游戏源 -->
            <el-form-item label="游戏源" prop="gameOrigin">
              <el-select
                v-model="form.gameOrigin"
                placeholder="游戏源"
                style="width:100%;"
                class="filter-item"
              >
                <el-option
                  v-for="item in gameOrigins"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <!-- 客户端 -->
            <el-form-item label="游戏源" prop="clientOrigin">
              <el-select
                v-model="form.clientOrigin"
                placeholder="客户端"
                style="width:100%;"
                class="filter-item"
              >
                <el-option
                  v-for="item in clientOrigins"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <!-- 是否自研 -->
            <el-form-item label="是否自研" prop="self">
              <el-select
                v-model="form.self"
                placeholder="是否自研"
                clearable
                style="width:100%;"
                class="filter-item"
              >
                <el-option label="是" :value="true" />
                <el-option label="否" :value="false" /> </el-select
              >自研游戏下架会影响到其他系统
            </el-form-item>

            <!-- 自研游戏Code -->
            <el-form-item
              v-if="form.self"
              label="自研游戏Code"
              prop="selfGameCode"
            >
              <el-input
                v-model.trim="form.selfGameCode"
                type="text"
                placeholder="请输入自研游戏Code"
                minlength="1"
                maxlength="150"
                show-word-limit
              />
            </el-form-item>

            <!-- 游戏ID -->
            <el-form-item label="游戏ID" prop="gameId">
              <el-input
                v-model.trim="form.gameId"
                type="text"
                placeholder="请输入游戏ID"
                minlength="1"
                maxlength="150"
                show-word-limit
              />
            </el-form-item>

            <!-- 游戏分类 -->
            <el-form-item label="游戏分类" prop="category">
              <el-select
                v-model="form.category"
                placeholder="游戏分类"
                style="width:100%;"
                class="filter-item"
              >
                <el-option
                  v-for="item in categories"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <!-- 名称 -->
            <el-form-item label="名称" prop="name">
              <el-input
                v-model.trim="form.name"
                type="text"
                placeholder="请输入名称"
                minlength="1"
                maxlength="150"
                show-word-limit
              />
            </el-form-item>

            <!-- 编号 -->
            <el-form-item label="编号" prop="gameCode">
              <el-input
                v-model.trim="form.gameCode"
                type="text"
                placeholder="请输入编号"
                minlength="1"
                maxlength="150"
                show-word-limit
              />
            </el-form-item>

            <!-- 金额 -->
            <el-form-item label="金额" prop="gameCode">
              <el-input
                v-model.trim="form.amounts"
                type="text"
                placeholder="金币必须是整数多个逗号隔改"
                minlength="1"
                maxlength="150"
                show-word-limit
              />
            </el-form-item>

            <!-- 是否全屏 -->
            <el-form-item label="是否全屏" prop="fullScreen">
              <el-select
                v-model="form.fullScreen"
                placeholder="是否全屏"
                clearable
                style="width:100%;"
                class="filter-item"
              >
                <el-option label="是" :value="true" />
                <el-option label="否" :value="false" />
              </el-select>
            </el-form-item>

            <!-- 游戏模式 -->
            <el-form-item label="游戏模式" prop="gameMode">
              <el-select
                v-model="form.gameMode"
                placeholder="游戏模式"
                clearable
                style="width:100%;"
                class="filter-item"
              >
                <el-option
                  v-for="item in gameModeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <!-- 宽 -->
            <el-form-item label="宽" prop="width">
              <el-input
                v-model.trim="form.width"
                type="text"
                placeholder="宽度"
              />
            </el-form-item>

            <!-- 高 -->
            <el-form-item label="高" prop="height">
              <el-input
                v-model.trim="form.height"
                type="text"
                placeholder="高度"
              />
            </el-form-item>

            <!-- 状态 -->
            <el-form-item label="状态" prop="showcase">
              <el-select
                v-model="form.showcase"
                placeholder="状态"
                clearable
                style="width:100%;"
                class="filter-item"
              >
                <el-option label="下架" :value="false" />
                <el-option label="上架" :value="true" />
              </el-select>
            </el-form-item>

            <!-- 排序 -->
            <el-form-item label="排序" prop="sort">
              <el-input-number
                v-model.trim="form.sort"
                v-number
                style="width: 100%;"
                :min="0"
                :max="99999"
                placeholder="降序排列(数字越大越靠前)"
              />
            </el-form-item>

            <!-- 区域 -->
            <el-form-item label="区域" prop="regionList">
              <el-select
                v-model="form.regionList"
                v-loading="loading"
                multiple
                clearable
                placeholder="请选择"
                style="width:100%;"
                class="filter-item"
              >
                <el-option
                  v-for="(item, index) in regions"
                  :key="index"
                  :label="item.regionName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" style="text-align: right;">
          <el-button @click="handleClose()">取消</el-button>
          <el-button type="primary" @click="submitForm()">保存</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { saveOrUpdateGameConfig, regionConfigTable } from "@/api/sys";
import { getElementUiUploadFile } from "@/utils";
import { mapGetters } from "vuex";
export default {
  props: {
    row: {
      type: Object,
      default: null
    },
    listquery: {
      type: String,
      default: null
    }
  },
  data() {
    const commonRules = [
      { required: true, message: "必填字段", trigger: "blur" }
    ];
    return {
      gameOrigins: [
        { value: "BAISHUN", name: "Baishun" },
        { value: "LINGXIAN", name: "LingXian" },
        { value: "HOTGAME", name: "HOTGAME" },
        { value: "YOMI", name: "YOMI" }
      ],
      clientOrigins: [
        { value: "ANDROID", name: "安卓" },
        { value: "IOS", name: "苹果" },
        { value: "COMMON", name: "通用" }
      ],

      // 游戏分类
      categories: [
        { value: "FISH_CLASS", name: "Fish Class" },
        { value: "SLOTS_CLASS", name: "Slots Class" },
        { value: "GREEDY_CLASS", name: "Greedy Class" },
        { value: "RACE_SERIES", name: "Race Series" },
        { value: "OTHER", name: "Others" },
        { value: "HIDDEN", name: "hidden" },
        { value: "CASUAL", name: "Casual" }
      ],

      // 游戏模式
      gameModeList: [{ value: "CHAT_ROOM", name: "语聊房" }],

      coverUploadLoading: false,
      coverFileList: [],
      regions: [],
      loading: false,
      form: {
        id: "",
        sysOrigin: "YOLO",
        name: "",
        gameId: "",
        category: "", //游戏分类
        gameCode: "",
        cover: "",
        amounts: "",
        showcase: false,
        sort: 0,
        height: "",
        width: "",
        fullScreen: "",
        gameMode: "",
        clientOrigin: "COMMON",
        regionList: [],

        gameOrigin: "",
        self: "",
        selfGameCode: ""
      },
      submitLoading: false,
      uploadLoading: false,
      rules: {
        cover: commonRules,
        sysOrigin: commonRules,
        gameOrigin: commonRules,
        name: commonRules,
        gameId: commonRules,
        category: commonRules,
        showcase: commonRules,
        sort: commonRules,
        amounts: commonRules,
        clientOrigin: commonRules,
        fullScreen: commonRules,
        self: commonRules
      }
    };
  },
  computed: {
    textOptTitle() {
      return this.row && this.row.id ? "修改" : "新增";
    },
    isShowCoverUpload() {
      return !this.form.cover;
    },
    ...mapGetters(["permissionsSysOriginPlatforms"])
  },
  watch: {
    row: {
      handler(val) {
        this.listRegion();
        if (!val) {
          return;
        }
        const form = Object.assign({}, val);
        if (form.regions) {
          form.regionList = form.regions.split(",");
        }
        this.coverFileList = getElementUiUploadFile(form.cover);
        this.form = Object.assign(this.form, form);
        if (this.form.selfGameCode) {
          this.form.self = true;
          return;
        }
        this.form.self = false;
      },
      immediate: true
    }
  },
  methods: {
    uploadCover(file) {
      const that = this;
      that.coverUploadLoading = true;
      that
        .$simpleUploadFlie(file, that.$application.fileBucket.other)
        .then(res => {
          that.coverUploadLoading = false;
          that.form.cover = that.$getAccessImgUrl(res.name);
        })
        .catch(er => {
          that.coverUploadLoading = false;
        });
    },
    handleCoverFileRemove(file, fileList) {
      this.form.cover = "";
      this.coverUploadLoading = false;
    },
    listRegion() {
      const that = this;
      that.loading = true;
      that.form.sysOrigin = that.listquery;
      regionConfigTable({ sysOrigin: that.form.sysOrigin })
        .then(res => {
          that.regions = res.body || [];
          that.loading = false;
        })
        .catch(er => {
          that.loading = false;
        });
    },
    handleClose() {
      this.$emit("close");
    },
    changeSysOrigin() {
      this.listRegion();
    },
    submitForm() {
      const that = this;
      that.$refs.form.validate(valid => {
        if (!valid) {
          console.error("error submit!!");
          return;
        }
        if (that.form.self && !that.form.selfGameCode) {
          that.$opsMessage.info("必须填写自研游戏code");
        }
        const submitForm = Object.assign({}, that.form);
        that.submitLoading = true;
        const amountsArrays = submitForm.amounts.split(",");
        submitForm.amounts = amountsArrays
          .filter(item => !isNaN(parseFloat(item)) && isFinite(item))
          .join(",");
        saveOrUpdateGameConfig(submitForm)
          .then(res => {
            that.submitLoading = false;
            that.$emit("success", res);
          })
          .catch(er => {
            that.submitLoading = false;
            that.$emit("fial", er);
          });
      });
    }
  }
};
</script>

<style scoped lang="scss">
.form-contetn {
  max-height: 550px;
  overflow: auto;
}
.form-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .label {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .label {
      color: #ddd;
    }
  }
}

.el-input ::v-deep .el-input__count {
  background-color: transparent !important;
  position: relative !important;
  bottom: -27px !important;
}
</style>
