<template>
  <el-dialog
    :title="$t('pages.ipDeviceHandle.dialog.title')"
    :visible="true"
    :modal-append-to-body="true"
    :append-to-body="true"
    width="30%"
    :before-close="handleClose"
  >
    <el-form
      ref="form"
      v-loading="loading"
      :model="form"
      :rules="formRules"
      label-width="80px"
    >
      <el-form-item
        v-loading="loadingIpDeviceStatus"
        :label="$t('pages.ipDeviceHandle.form.action')"
        prop="deviceListBlock"
      >
        <el-select v-model="form.deviceListBlock">
          <el-option :label="$t('pages.ipDeviceHandle.option.noRestriction')" :value="null" />
          <el-option :label="$t('pages.ipDeviceHandle.option.addToBlacklist')" :value="true" />
          <el-option :label="$t('pages.ipDeviceHandle.option.addToWhitelist')" :value="false" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit()">{{ $t('pages.ipDeviceHandle.action.submit') }}</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { ipDeviceHandle } from "@/api/approval";
import { getUserIpDevice } from "@/api/app-user";
import { mapGetters } from "vuex";
export default {
  name: "AccountHandle",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    userId: {
      type: String,
      required: true
    }
  },
  data() {
    const commonRules = [
      { required: true, message: this.$t('pages.ipDeviceHandle.validation.required'), trigger: "blur" }
    ];
    return {
      loading: false,
      loadingIpDeviceStatus: true,
      form: {
        userId: "",
        deviceListBlock: ""
      },
      formRules: {
        // deviceListBlock: commonRules
      }
    };
  },
  computed: {
    ...mapGetters(["buttonPermissions"])
  },
  watch: {
    userId: {
      handler(newVal) {
        if (newVal) {
          this.form.userId = newVal;
          this.loadIpDeviceStatus(newVal);
        }
      },
      immediate: true
    }
  },
  methods: {
    loadIpDeviceStatus(userId) {
      const that = this;
      that.loadingIpDeviceStatus = true;
      getUserIpDevice(userId)
        .then(res => {
          const deviceListBlock =
            res && res.body && res.body.deviceListBlock !== undefined
              ? res.body.deviceListBlock
              : null;
          that.form.deviceListBlock = deviceListBlock;

          that.loadingIpDeviceStatus = false;
        })
        .catch(() => {
          that.loadingIpDeviceStatus = false;
        });
    },
    handleClose() {
      this.$emit("close");
    },
    submit() {
      const that = this;
      that.$refs.form.validate(valid => {
        if (!valid) {
          console.error("error submit!!");
          return false;
        }
        that.form.userId = that.userId;

        that.loading = true;
        console.log("that.form:", that.form);

        ipDeviceHandle(that.form)
          .then(res => {
            that.loading = false;
            that.$emit("success", Object.assign({}, that.form));
            that.handleClose();
          })
          .catch(err => {
            that.loading = false;
            that.$emit("fial", err);
            that.handleClose();
          });
      });
    }
  }
};
</script>
