<template>
  <el-empty
    :description="$t('user.selectItem')"
    :image-size="100"
    v-if="!form.MenuId"
  ></el-empty>
  <template v-else>
    <h2>{{ $t(isEdit ? "edit" : "create") }}</h2>
    <el-form
      :model="form"
      :rules="rules"
      ref="dialogForm"
      label-width="150px"
      label-position="right"
    >
      <el-form-item :label="$t('user.authorityName')" prop="FeatureName">
        <el-input
          v-model="form.FeatureName"
          clearable
          :placeholder="$t('user.authorityNameRequire')"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('user.uniqueCode')" prop="UniqueCode">
        <el-input
          v-model="form.UniqueCode"
          :placeholder="$t('user.uniqueCodeRequire')"
          :disabled="form.OldUniqueCode !== ''"
        ></el-input>
        <div class="el-form-item-msg">
          {{ $t("user.uniqueCodeTip") }}
        </div>
      </el-form-item>
      <el-form-item :label="$t('user.frontAuthority')" prop="FatherCode">
        <el-select
          v-model="form.FatherCode"
          clearable
          filterable
          style="width: 100%"
        >
          <el-option
            v-for="item in authorityList"
            :key="item.Key"
            :label="item.Value"
            :value="item.Key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save" :loading="loading"
          >保 存</el-button
        >
      </el-form-item>
    </el-form>
  </template>
</template>

<script>
export default {
  data() {
    return {
      isEdit: false,
      form: {
        Id: "",
        OldUniqueCode: "",
      },
      loading: false,
      rules: {
        FeatureName: [
          {
            required: true,
            message: this.$t("user.authorityNameRequire"),
            trigger: "blur",
          },
        ],
        UniqueCode: [
          {
            required: true,
            message: this.$t("user.uniqueCodeRequire"),
            trigger: "blur",
          },
        ],
      },
      authorityList: [],
    };
  },
  mounted() {},
  methods: {
    //保存
    async save() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          var method = this.isEdit ? "ModifyUserFeature" : "CreateUserFeature";
          await this.$API.wing.post(method, this.form, () => {
            this.form.MenuId = "";
            this.$message.success(this.$t("response.operateSuccess"));
            this.$emit("success");
            this.loading = false;
          });
        } else {
          return false;
        }
      });
    },
    //表单注入数据
    setData(data, authorityList) {
      if (data.Id) {
        this.isEdit = true;
        authorityList = authorityList.filter((x) => x.Key != data.Id);
      }
      var form = JSON.parse(JSON.stringify(data));
      form.FeatureCode = form.Id;
      form.FeatureName = form.Label;
      form.OldUniqueCode = form.UniqueCode || "";
      this.form = form;
      this.authorityList = authorityList;
    },
  },
};
</script>

<style scoped>
h2 {
  font-size: 17px;
  color: #3c4a54;
  padding: 0 0 30px 0;
}
.apilist {
  border-left: 1px solid #eee;
}

[data-theme="dark"] h2 {
  color: #fff;
}
[data-theme="dark"] .apilist {
  border-color: #434343;
}
</style>
