<template>
  <div class="user-special-id-form-edit">
    <el-drawer
      :title="textOptTitle"
      :visible="true"
      :before-close="handleClose"
      :close-on-press-escape="false"
      :wrapper-closable="false"
      :modal-append-to-body="true"
      :append-to-body="true"
      custom-class="drawer-auto-layout"
    >

      <div class="drawer-form">
        <el-form ref="form" :model="form" :rules="formRules" label-width="100px">
          <el-form-item :label="$t('pages.specialIdRoleManagement.form.system')" prop="sysOrigin">
            {{ sysOrigin }}
          </el-form-item>
          <el-form-item :label="$t('pages.specialIdRoleManagement.form.user')" prop="userId">
            <account-input v-model="form.userId" :sys-origin="sysOrigin" class="filter-item" :placeholder="$t('pages.specialIdRoleManagement.filter.userId')" />
          </el-form-item>
          <el-form-item :label="$t('pages.specialIdRoleManagement.form.newAccount')" prop="account">
            <el-input v-model.trim="form.account" :placeholder="$t('pages.specialIdRoleManagement.placeholder.newAccount')" class="input-with-select" maxlength="10" />
          </el-form-item>
          <el-form-item prop="expiredDays">
            <el-tooltip slot="label" class="item" effect="dark" placement="top-start">
              <div slot="content">
                <div>{{ $t('pages.specialIdRoleManagement.tooltip.expiredDays') }}</div>
              </div>
              <i class="el-icon-question">{{ $t('pages.specialIdRoleManagement.form.expiredDays') }}</i>
            </el-tooltip>
            <el-input v-model.trim="form.expiredDays" v-number min="0" max="3650" :placeholder="$t('pages.specialIdRoleManagement.placeholder.expiredDays')" class="input-with-select" maxlength="4" />
          </el-form-item>
          <el-form-item :label="$t('pages.specialIdRoleManagement.form.remark')" prop="remark">
            <el-input v-model.trim="form.remark" type="textarea" resize="none" :rows="3" :placeholder="$t('pages.specialIdRoleManagement.placeholder.remark')" maxlength="100" show-word-limit />
          </el-form-item>
          <el-form-item :label="$t('pages.specialIdRoleManagement.form.customizeField')">
            <el-button type="text" @click="clickCustomizeField()">{{ $t('pages.specialIdRoleManagement.action.viewOrSetCustomField') }}</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="drawer-footer">
        <el-button @click="handleClose()">{{ $t('common.cancel') }}</el-button>
        <el-button type="primary" :loading="submitLoading" :disabled="searchDisabled" @click="submitForm()">{{ $t('common.save') }}</el-button>
      </div>
    </el-drawer>

    <customize-field-dialog
      v-if="customizeFieldDialogVisable"
      :customize-field="form.customizeField"
      @close="customizeFieldDialogVisable=false"
      @submit="customizeFieldDialogSubmit"
    />
  </div>
</template>
<script>
import CustomizeFieldDialog from './customize-field-dialog'
import { deepClone } from '@/utils'
import { mapGetters } from 'vuex'
import { saveOrUpdate } from '@/api/user-special-id'
export default {
  components: { CustomizeFieldDialog },
  props: {
    row: {
      type: Object,
      require: false,
      default: () => {}
    },
    sysOrigin: {
      type: String,
      require: false,
      default: ''
    }
  },
  data() {
    const commonRules = [
      { required: true, message: this.$t('pages.specialIdRoleManagement.validation.requiredField'), trigger: 'blur' }
    ]

    return {
      customizeFieldDialogVisable: false,
      searchDisabled: false,
      userInfo: {},
      submitLoading: false,
      form: {
        id: '',
        sysOrigin: '',
        userId: '',
        account: '',
        expiredDays: '',
        customizeField: {},
        remark: ''
      },
      formRules: {
        userId: commonRules,
        account: commonRules,
        expiredDays: { required: true, message: this.$t('pages.specialIdRoleManagement.validation.expiredDays'), trigger: 'blur' }
      },
      sourceTypeList: [],
      selectType: {},
      isLoadSourceTypeList: false,
      listTypeLoading: false,
      badgeRestaurants: [{ 'value': '0', 'label': this.$t('pages.specialIdRoleManagement.word.permanent') }]
    }
  },
  computed: {
    textOptTitle() {
      return this.row && this.row.id ? this.$t('pages.specialIdRoleManagement.dialog.edit') : this.$t('pages.specialIdRoleManagement.dialog.add')
    },
    isUpdate() {
      return this.row != null && this.row.userSpecialId != null
    },
    ...mapGetters(['permissionsSysOriginPlatforms'])
  },
  watch: {
    row: {
      handler(newVal) {
        if (!newVal) {
          return
        }
        this.form = deepClone(newVal.userSpecialId)
      },
      immediate: true
    }
  },
  methods: {
    clickCustomizeField() {
      this.customizeFieldDialogVisable = true
    },
    customizeFieldDialogSubmit(fieldObj) {
      this.customizeFieldDialogVisable = false
      this.form.customizeField = fieldObj
    },
    handleClose() {
      this.$emit('close')
    },
    submitForm() {
      const that = this
      that.$refs.form.validate(valid => {
        if (!valid) {
          console.error('error submit!!')
          return
        }
        that.submitLoading = true
        if (!that.form.sysOrigin) {
          that.form.sysOrigin = that.sysOrigin
        }
        saveOrUpdate(that.form).then(res => {
          that.$message.success(that.$t('pages.specialIdRoleManagement.message.operationSuccess'))
          that.submitLoading = false
          that.$emit('success')
        }).catch(er => {
          that.submitLoading = false
          that.$emit('fail')
        })
      })
    }
  }
}
</script>
<style scoped lang="scss">
.props-activity-reward-config-edit {
  .form-edit {
    max-height: 600px;
    overflow: auto;
    .dr-content {
      padding: 5px 0px 5px 20px;
    }
    .sort {
      border-radius: 50%;
      width: 30px;
      height: 30px;
      background: #f7f6f5;
      margin: auto;
      text-align: center;
      line-height: 29px;
      font-weight: bold;
    }
    .del {
      font-size: 30px;
      color: #F56C6C;
      cursor: pointer;
    }
    .save {
      font-size: 30px;
      color: #FF9326;
      cursor: pointer;
    }
  }
}
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

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

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>
