<template>
  <div>
    <Form :model="modelForm" ref="editForm" class="ivu-form-no-margin-bottom" :rules="rules" :label-width="100">
      <Form-item prop="itemCode" :label="$t('module.configManage.itemCode')">
        <Input v-model="modelForm.itemCode" placeholder="" size="small" maxlength="50" />
      </Form-item>
      <Form-item prop="itemValue" :label="$t('module.configManage.itemValue')">
        <Input v-model="modelForm.itemValue" placeholder="" size="small" maxlength="1024" />
      </Form-item>
      <Form-item prop="owner" :label="$t('module.configManage.owner')">
        <Select size="small" v-model="modelForm.owner" transfer clearable>
          <Option v-for="item in owners" :title="item.vsiValue" :value="item.vsiKey" :key="item.vsiKey">{{ item.vsiValue }}</Option>
        </Select>
      </Form-item>
      <!-- <Row :gutter="20" class="code-row-bg">
        <Col span="12" style="border:none;">
        <Form-item prop="enabled" :label="$t('common.status')">
          <el-radio v-model="modelForm.enabled" :label="1">{{$t('common.valid')}}</el-radio>
          <el-radio v-model="modelForm.enabled" :label="0">{{$t('common.invalid')}}</el-radio>
        </Form-item>
        </Col>
      </Row> -->
    </Form>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    allItems: Array,
    groupId: String,
    owners: Array,
    itemInfo: {
      type: Object,
      default: {}
    },
    groupInfo: {
      type: Object,
      default: {}
    },
  },
  data() {
    //     {
    //          "id": "0e90f8c4d6c14a8c91c42529bf636206",
    //          "version": 1,
    //          "createTime": "2018-09-28T01:16:40.000+0000",
    //          "createUserId": "admin001",
    //          "itemCode": "bbbbbbb",
    //          "itemValue": "bbbbbbbb",
    //          "configId": "010e770ce6e14dba9be91b3f4d9b57db",
    //          "configName": null,
    //          "owner": "CR001",
    //          "updateUserId": "admin001",
    //          "updateTime": "2018-09-28T01:16:40.000+0000",
    //          "_index": 0,
    //          "_rowKey": 17
    //    }

    const validateCodeOwner = (code, owner, callback) => {
      // console.log(this.allItems)
      if (code && owner) {
        let sameInfo = this.allItems.filter(
          item => item.itemCode === code && item.owner === owner
        );

        if (sameInfo.length) {
          callback(
            new Error(
              this.$t("module.configManage.enterDifferentItemCodeOwner")
            )
          );
        } else {
          callback();
        }
      } else {
        callback();
      }
    };

    const validateCode = (rule, value, callback) => {
      validateCodeOwner(value, this.modelForm.owner, callback);
    };

    const validateOwner = (rule, value, callback) => {
      validateCodeOwner(this.modelForm.itemCode, value, callback);
    };

    return {
      modelForm: {
        configId: this.groupId,
        ...this.itemInfo
      },
      rules: {
        itemCode: [
          {
            required: true,
            message: this.$t("module.configManage.enterItemCode"),
            trigger: "change"
          },
          { validator: validateCode, trigger: "change" }
        ],
        itemValue: [
          {
            required: true,
            message: this.$t("module.configManage.enterItemValue"),
            trigger: "change"
          }
        ],
        // owner: [
        //   {
        //     required: true,
        //     message: this.$t("module.configManage.enterItemOwner"),
        //     trigger: "change"
        //   },
        //   { validator: validateOwner, trigger: "change" }
        // ]
      }
    };
  },
  computed: {},
  created: function() {
    if (this.itemInfo.itemCode) {
      this.$emit("SetTitle", this.$t("module.configManage.editConfigItem"));
    } else {
      this.$emit("SetTitle", this.$t("module.configManage.createConfigItem"));
    }

    this.$emit("SetPageSize", 700);
    this.$emit("SetPageActions", [
      {
        text: this.$t("common.save"),
        theme: "primary",
        handle: () => {
          this.save();
        }
      },
      {
        text: this.$t("common.close"),
        theme: "primary",
        handle: () => {
          this.$emit("Close");
        }
      }
    ]);
  },
  // beforeMount: function() {},
  // mounted: function() {
  //   this.init();
  // },
  // beforeDestroy: function() {},
  // destroyed: function() {},
  methods: {
    // init() {
    //   if (this.config.id) {
    //     this.modelForm = {
    //       configId: this.config.id,
    //       configName: this.config.configName,
    //       configCode: this.config.configCode,
    //       description: this.config.description,
    //       enabled: this.config.enabled,
    //       version: this.config.version
    //     };
    //   }
    // },
    save() {
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          $store.dispatch("SaveOrUpdateConfigGroupItem", this.modelForm).then(response => {
            if (response.statusCode == '0') {
              let content;
              if (this.itemInfo.itemCode) {
                content = this.$t("module.valueSet.warning.editSuccess");
              } else {
                content = this.$t("module.valueSet.warning.createSuccess");
              }
              this.$Message.success({
                content: content,
                duration: 3
              });
              this.$emit("Close");
            } else {
              this.$Message.warning({
                content: "保存失败！",
                duration: 3
              });
            }
          });
        } else {
          this.$Message.error({
            content: this.$t("module.valueSet.warning.formValidateFailed"),
            duration: 3
          });
          return 0;
        }
      });
    }
  },
  watch: {},
  directives: {}
};
</script>
