<template>
  <div class="edit-role">
    <el-dialog
      :title="title"
      :visible="true"
      :modal-append-to-body="true"
      :append-to-body="true"
      width="550px"
      top="50px"
      :before-close="handleClose"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <div style="height: 500px;overflow: auto;">
        <el-form
          ref="dataForm"
          :rules="rules"
          :model="formData"
          style="width: 400px; margin-left:50px;"
        >
          <el-form-item :label="$t('pages.appVersionManager.form.platform')" prop="platform">
            <el-select
              v-model="formData.platform"
              :disabled="!isAdd"
              clearable
              style="width: 100%"
              class="filter-item"
              @change="changeSelectPlatform"
            >
              <el-option
                v-for="(item, index) in platformOrigins"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('pages.appVersionManager.form.channel')" prop="channel">
            <el-select
              v-model="formData.channel"
              :disabled="!isAdd"
              clearable
              style="width: 100%"
              class="filter-item"
            >
              <el-option
                v-for="(item, index) in selectedPlatform.channels"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('pages.appVersionManager.form.version')" prop="version">
            <el-input v-model.trim="formData.version" :placeholder="$t('pages.appVersionManager.placeholder.version')" />
          </el-form-item>
          <el-form-item :label="$t('pages.appVersionManager.form.buildVersion')" prop="buildVersion">
            <el-input v-model="formData.buildVersion" v-number :placeholder="$t('pages.appVersionManager.placeholder.buildVersion')" />
          </el-form-item>
          <el-form-item :label="$t('pages.appVersionManager.form.forceUpdate')" prop="forceUpdate">
            <el-select
              v-model="formData.forceUpdate"
              clearable
              style="width: 100%"
              class="filter-item"
            >
              <el-option :label="$t('pages.appVersionManager.word.no')" :value="false" />
              <el-option :label="$t('pages.appVersionManager.word.yes')" :value="true" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('pages.appVersionManager.form.appType')" prop="appType">
            <el-select
              v-model="formData.appType"
              clearable
              style="width: 100%"
              class="filter-item"
            >
              <el-option :label="$t('pages.appVersionManager.appType.chat')" :value="'CHAT'" />
              <el-option :label="$t('pages.appVersionManager.appType.worship')" :value="'WORSHIP'" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('pages.appVersionManager.form.review')" prop="review">
            <el-select
              v-model="formData.review"
              clearable
              style="width: 100%"
              class="filter-item"
            >
              <el-option :label="$t('pages.appVersionManager.word.no')" :value="false" />
              <el-option :label="$t('pages.appVersionManager.word.yes')" :value="true" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('pages.appVersionManager.form.patch')" prop="patch">
            <el-select
              v-model="formData.patch"
              clearable
              style="width: 100%"
              class="filter-item"
            >
              <el-option :label="$t('pages.appVersionManager.word.no')" :value="false" />
              <el-option :label="$t('pages.appVersionManager.word.yes')" :value="true" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="更新描述" prop="updateDescribe">
            <el-input
              v-model.trim="formData.updateDescribe"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              placeholder="请输入更新描述"
            />
          </el-form-item> -->
          <el-form-item :label="$t('pages.appVersionManager.form.apkSize')" prop="apkSize">
            <el-input v-model.trim="formData.apkSize" :placeholder="$t('pages.appVersionManager.placeholder.apkSize')" />
          </el-form-item>
          <el-form-item :label="$t('pages.appVersionManager.form.downloadUrl')" prop="downloadUrl">
            <el-input v-model.trim="formData.downloadUrl" :placeholder="$t('pages.appVersionManager.placeholder.downloadUrl')" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">
          {{ $t('pages.appVersionManager.action.cancel') }}
        </el-button>
        <el-button
          :loading="submitLoading"
          type="primary"
          @click="handleSubmit"
        >
          {{ $t('pages.appVersionManager.action.submit') }}
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { platformOrigins } from '@/constant/type'
import { addAppVersion, updateAppVersion } from '@/api/app-manager'
export default {
  name: 'AppVersionEdit',
  props: {
    updateData: {
      type: Object,
      default: null
    },
    sysOrigin: {
      type: String,
      default: null
    }
  },
  data() {
    // const validateUpdateDescribe = (rule, value, callback) => {
    //   if (!value || value.trim().length === 0) {
    //     callback(new Error('必填项不可为空'))
    //   } else if (value && value.length > 500) {
    //     callback(new Error('最大 500 字符'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      platformOrigins,
      selectedPlatform: {},
      formData: {
        id: '',
        platform: '',
        channel: '',
        version: '',
        appType: 'CHAT',
        buildVersion: '',
        forceUpdate: true,
        review: false,
        patch: false,
        updateDescribe: '',
        apkSize: '',
        downloadUrl: '',
        sysOrigin: ''
      },
      rules: {
        platform: [
          { required: true, message: this.$t('pages.appVersionManager.validation.requiredField'), trigger: 'blur' }
        ],
        channel: [
          { required: true, message: this.$t('pages.appVersionManager.validation.requiredField'), trigger: 'blur' }
        ],
        version: [{ required: true, message: this.$t('pages.appVersionManager.validation.requiredField'), trigger: 'blur' }],
        buildVersion: [{ required: true, message: this.$t('pages.appVersionManager.validation.requiredField'), trigger: 'blur' }],
        forceUpdate: [{ required: true, message: this.$t('pages.appVersionManager.validation.requiredField'), trigger: 'blur' }],
        review: [{ required: true, message: this.$t('pages.appVersionManager.validation.requiredField'), trigger: 'blur' }],
        // updateDescribe: [{ required: true, trigger: 'blur', validator: validateUpdateDescribe }],
        apkSize: [{ required: true, message: this.$t('pages.appVersionManager.validation.requiredField'), trigger: 'blur' }],
        downloadUrl: [{ required: true, message: this.$t('pages.appVersionManager.validation.requiredField'), trigger: 'blur' }],
        patch: [{ required: true, message: this.$t('pages.appVersionManager.validation.requiredField'), trigger: 'blur' }]
      },
      submitLoading: false
    }
  },
  computed: {
    isAdd() {
      return this.updateData === null
    },
    title() {
      return this.isAdd
        ? this.$t('pages.appVersionManager.dialog.addVersion', { sysOrigin: this.sysOrigin })
        : this.$t('pages.appVersionManager.dialog.editVersion', { sysOrigin: this.updateData.sysOrigin })
    }
  },
  watch: {
    updateData: {
      immediate: true,
      deep: true,
      handler(newVal) {
        Object.assign(this.formData, newVal)
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    changeSelectPlatform(val) {
      this.selectedPlatform = {}
      this.formData.channel = ''
      this.selectedPlatform = this.platformOrigins.filter(item => item.value === val)[0] || {}
    },
    handleSubmit() {
      const that = this
      that.$refs.dataForm.validate(valid => {
        if (valid) {
          that.formData.updateDescribe = 'App version update'
          that.submitLoading = true
          if (that.isAdd) {
            that.formData.sysOrigin = that.sysOrigin
            addAppVersion(that.formData).then(res => {
              that.submitLoading = false
              this.$emit('success', 'create')
            }).catch(er => {
              that.submitLoading = false
              console.error(er)
              this.$emit('fail')
            })
            return
          }
          updateAppVersion(that.formData).then(res => {
            that.submitLoading = false
            this.$emit('success', 'update')
          }).catch(er => {
            that.submitLoading = false
            console.error(er)
            this.$emit('fail')
          })
        } else {
          console.error('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
