<template>
  <div class="pay-application-edit-form">
    <el-dialog
      :title="title"
      :visible="true"
      :modal-append-to-body="true"
      :append-to-body="true"
      :before-close="handleClose"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="550px"
      top="50px"
    >
      <el-form
        ref="form"
        v-loading="submitLoading"
        style="width: 400px; margin-left:50px;"
        :model="form"
        :rules="localizedRules"
      >
        <el-form-item v-if="!isEdit" :label="$t('pages.payApplication.form.type')" prop="appCode">
          <el-select
            v-model="form.appCode"
            :placeholder="$t('pages.payApplication.placeholder.system')"
            style="width: 100%"
            class="filter-item"
            collapse-tags
            @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="app名称" prop="appName">
          <el-input v-model.trim="form.appName" type="primary" placeholder="请输入app名称" :disabled="true" />
        </el-form-item> -->
        <el-form-item :label="$t('pages.payApplication.form.androidLink')" prop="androidLink">
          <el-input v-model.trim="form.androidLink" type="primary" :placeholder="$t('pages.payApplication.placeholder.androidLink')" />
        </el-form-item>
        <el-form-item :label="$t('pages.payApplication.form.iosLink')" prop="iosLink">
          <el-input v-model.trim="form.iosLink" type="primary" :placeholder="$t('pages.payApplication.placeholder.iosLink')" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">{{ $t('pages.payApplication.action.cancel') }}</el-button>
        <el-button type="primary" @click="submitForm()">{{ $t('pages.payApplication.action.save') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { deepClone, getElementUiUploadFile } from '@/utils'
import { payChannelGroups } from '@/constant/type'
import { addPayApplication, updatePayApplication } from '@/api/sys-pay'
import { mapGetters } from 'vuex'
export default {
  name: 'PayAppEditForm',
  props: {
    row: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      payChannelGroups,
      form: {
        id: '',
        appName: '',
        appCode: '',
        androidLink: '',
        iosLink: ''
      },
      submitLoading: false,
      iconUploadLoading: false,
      iconFileList: []
    }
  },
  computed: {
    ...mapGetters(['permissionsSysOriginPlatforms']),
    isEdit() {
      return !!(this.form && this.form.id)
    },
    title() {
      return this.form && this.form.id ? this.$t('pages.payApplication.dialog.editApplication') : this.$t('pages.payApplication.dialog.addApplication')
    },
    localizedRules() {
      const requiredRule = { required: true, message: this.$t('pages.payApplication.validation.requiredField'), trigger: 'blur' }
      return {
        appName: [requiredRule],
        appCode: [requiredRule],
        androidLink: [requiredRule],
        iosLink: [requiredRule]
      }
    },
    formChannelIconNotEmpty() {
      return !!(this.form.channelIcon && this.form.channelIcon.length > 0)
    }
  },
  watch: {
    row: {
      handler(newVal) {
        if (newVal && newVal.id) {
          this.form = deepClone(newVal)
          this.iconFileList = getElementUiUploadFile(newVal.channelIcon)
        }
      },
      immediate: true
    }
  },
  created() {
  },
  methods: {
    changeSysOrigin(val) {
      const value = this.permissionsSysOriginPlatforms.filter(item => item.value === val)[0]
      this.form.appName = value.label
    },
    handleClose() {
      this.$emit('close')
    },
    submitForm() {
      const that = this
      that.$refs.form.validate(valid => {
        if (!valid) {
          console.error('submit error!')
          return
        }
        that.submitLoading = true
        if (that.isEdit) {
          updatePayApplication(that.form).then(res => {
            that.submitLoading = false
            that.handleClose()
            that.$emit('success', { event: 'UPDATE', form: that.form })
          }).catch(er => {
            that.submitLoading = false
            console.error(er)
            that.$emit('fail', { event: 'UPDATE', form: that.form })
          })
          return
        }

        addPayApplication(that.form).then(res => {
          that.submitLoading = false
          that.handleClose()
          that.$emit('success', { event: 'ADD', form: that.form })
        }).catch(er => {
          that.submitLoading = false
          console.error(er)
          that.$emit('fail', { event: 'ADD', form: that.form })
        })
      })
    },
    handleIconFileRemove(file, fileList) {
      this.form.channelIcon = ''
      this.iconUploadLoading = false
    },
    iconFileUpload(file) {
      const that = this
      that.iconUploadLoading = true
      that.$simpleUploadFlie(file, that.$application.fileBucket.svgasource).then(res => {
        that.iconUploadLoading = false
        that.form.channelIcon = that.$getAccessImgUrl(res.name)
      }).catch(er => {
        that.iconUploadLoading = false
      })
    }
  }
}
</script>
