<template>
  <div class="start-page-form-edite">
    <el-dialog
      :title="textOptTitle"
      :visible="true"
      :before-close="handleClose"
      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="$t('pages.startPage.form.cover')" prop="cover">
              <el-form-item prop="cover" class="upload">
                <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>

            <!-- 系统 -->
            <el-form-item
              :label="$t('pages.startPage.form.system')"
              prop="sysOrigin"
            >
              <el-select
                v-model="form.sysOrigin"
                :placeholder="$t('pages.startPage.placeholder.system')"
                style="width:100%;"
                class="filter-item"
              >
                <el-option
                  v-for="item in sysOriginPlatforms"
                  :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="$t('pages.startPage.form.type')" prop="type">
              <el-select
                v-model="form.type"
                :placeholder="$t('pages.startPage.placeholder.activityType')"
                clearable
                style="width:100%;"
                class="filter-item"
              >
                <el-option
                  v-for="item in planTypeOptions"
                  :key="item.value"
                  :label="item.displayName"
                  :value="item.value"
                >
                  <span>{{ item.displayName }}</span>
                </el-option>
              </el-select>
            </el-form-item>

            <!-- 过期时间 -->
            <el-form-item
              :label="$t('pages.startPage.form.expireTime')"
              prop="expireTime"
            >
              <el-date-picker
                v-model="form.expireTime"
                value-format="timestamp"
                :placeholder="$t('pages.startPage.placeholder.expireTime')"
                style="width:100%;"
              />
            </el-form-item>
          </el-form>
        </div>

        <!-- 操作按钮 -->
        <div slot="footer" style="text-align: right;">
          <el-button @click="handleClose()">{{
            $t("pages.startPage.action.cancel")
          }}</el-button>
          <el-button type="primary" @click="submitForm()">{{
            $t("pages.startPage.action.save")
          }}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { updateData, addData } from "@/api/start-page";
import { sysOriginPlatforms } from "@/constant/origin";
import { getElementUiUploadFile } from "@/utils";
import { appStartPagePlanTypes } from "@/constant/type";
export default {
  props: {
    row: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      appStartPagePlanTypes,
      coverUploadLoading: false,
      coverFileList: [],
      sysOriginPlatforms,
      form: {
        id: "",
        cover: "",
        type: "",
        sysOrigin: "",
        expireTime: ""
      },
      submitLoading: false,
      uploadLoading: false
    };
  },
  computed: {
    textOptTitle() {
      return this.row && this.row.id
        ? this.$t("pages.startPage.dialog.edit")
        : this.$t("pages.startPage.dialog.create");
    },
    planTypeTextMap() {
      return {
        KING_GAMES: this.$t("pages.startPage.planType.kingGames"),
        CP: this.$t("pages.startPage.planType.cp")
      };
    },
    planTypeOptions() {
      return this.appStartPagePlanTypes.map(item => ({
        ...item,
        displayName: this.planTypeTextMap[item.value] || item.name
      }));
    },
    rules() {
      const commonRules = [
        {
          required: true,
          message: this.$t("pages.startPage.validation.requiredField"),
          trigger: "blur"
        }
      ];
      return {
        cover: commonRules,
        type: commonRules,
        sysOrigin: commonRules,
        expireTime: commonRules
      };
    },
    isShowCoverUpload() {
      return !this.form.cover;
    }
  },
  watch: {
    row: {
      handler(val) {
        if (!val) {
          this.coverFileList = [];
          this.form = {
            id: "",
            cover: "",
            type: "",
            sysOrigin: "",
            expireTime: ""
          };
          return;
        }
        const form = Object.assign({}, val);
        this.coverFileList = getElementUiUploadFile(form.cover);
        this.form = Object.assign(this.form, form);
      },
      immediate: true
    }
  },
  methods: {
    uploadCover(file) {
      const that = this;
      that.coverUploadLoading = true;
      that
        .$simpleUploadFlie(file, that.$application.fileBucket.startPage)
        .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;
    },
    handleClose() {
      this.$emit("close");
    },
    submitForm() {
      const that = this;
      that.$refs.form.validate(valid => {
        if (!valid) {
          console.error("error submit!!");
          return;
        }
        const submitForm = Object.assign({}, that.form);
        that.submitLoading = true;
        if (submitForm.id) {
          updateData(submitForm)
            .then(res => {
              that.submitLoading = false;
              that.$emit("success", res);
            })
            .catch(er => {
              that.submitLoading = false;
              that.$emit("fial", er);
            });
          return;
        }
        addData(submitForm)
          .then(res => {
            that.submitLoading = false;
            that.$emit("success", res);
          })
          .catch(er => {
            that.submitLoading = false;
            console.error(er);
            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;
    }
  }
}
</style>
