<template>
  <div class="run-modal-style">
    <Form :model="modelForm" ref="editForm" class="ivu-form-no-margin-bottom" :rules="rule" :label-width="90">
      <Form-item prop="ffeCode" :label="$t('module.flexField.refAttributeValue')">
        【{{ffRefBeanAttribute}}】{{$t('module.flexField.equal')}} 
        <Input placeholder="" size="small" v-model="modelForm.ffeCode" maxlength="50" style="width:240px"></Input>
      </Form-item>
      <Form-item prop="ffeName" :label="$t('module.flexField.elementName')">
        <Input placeholder="" size="small" v-model="modelForm.ffeName" maxlength="50"></Input>
      </Form-item>
      <Form-item :label="$t('module.flexField.elementDesc')">
        <Input placeholder="" size="small" v-model="modelForm.ffeDesc" maxlength="100"></Input>
      </Form-item>
      <Row :gutter="20" class="code-row-bg">
        <Col span="12" style="border:none;">
          <Form-item prop="ffeType" :label="$t('module.flexField.elementType')">
            <Select size="small" v-model="modelForm.ffeType" disabled>
              <Option :title="$t('common.valid')" :value="1" :key="1">{{$t('module.flexField.global')}}</Option>
              <Option :title="$t('common.invalid')" :value="0" :key="0">{{$t('module.flexField.non-global')}}</Option>
            </Select>
          </Form-item>
        </Col>
        <Col span="12" style="border:none;">
          <Form-item prop="ffeOrgId" :label="$t('module.userManage.affiliation')">
            <select-org :org-id="modelForm.ffeOrgId" :org-name="modelForm.ffeOrgName" @change="onOrgChange"></select-org>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
        <Col span="12" style="border:none;">
          <Form-item prop="enabled" :label="$t('common.status')">
            <Select size="small" v-model="modelForm.enabled">
              <Option :title="$t('common.valid')" :value="1" :key="1">{{$t('common.valid')}}</Option>
              <Option :title="$t('common.invalid')" :value="0" :key="0">{{$t('common.invalid')}}</Option>
            </Select>
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>
<script>
export default{
  components:{
  },
  props:{
    ffId:{
      type: String,
      default(){
        return '';
      }
    },
    ffeId:{
      type: String,
      default(){
        return '';
      }
    },
    ffRefBeanAttribute:{
      type: String,
      default(){
        return '';
      }
    },
    version:{
      type: String,
      default(){
        return '';
      }
    },
  },
  data(){
    return{
      modelForm: {
        refFfId: this.ffId,
        ffeId: this.ffeId,
        ffeCode: "",
        ffeName: "",
        ffeDesc: "",
        ffeOrgId: "",
        ffeOrgName: "",
        ffeType: 0,
        enabled: 1,
      },
      rule: {
        ffeCode: [{ required: true, message: this.$t('module.flexField.enterRefAttValue'), trigger: "blur" }],
        ffeName: [{ required: true, message: this.$t('module.flexField.enterElementName'), trigger: "blur" }],
      },
    }
  },
  computed:{

  },
  created:function(){
    if(this.ffeId){
      this.$emit('SetTitle', this.$t('common.edit'));
    }else{
      this.$emit('SetTitle', this.$t('common.create'));
    }
    this.$emit('SetPageSize', 700);
    this.$emit('SetPageActions', [
      {
        text: this.$t('common.confirm'),
        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.ffeId){
        $store.dispatch("GetFlexFieldElementDetail", { ffeId: this.ffeId }).then(response => {
          this.modelForm = {
            ffId: response.refFfId,
            ffeId: response.ffeId,
            ffeCode: response.ffeCode,
            ffeName: response.ffeName,
            ffeDesc: response.ffeDesc,
            ffeOrgId: response.ffeOrgId,
            ffeOrgName: "",
            ffeType: response.ffeType,
            enabled: response.enabled,
            version: this.version
          };
        });
      }
    },
    save() {
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          if (this.ffeId) {
            $store.dispatch("UpdateFlexFieldElement", this.modelForm).then(response => {
              if (response.statusCode == "0") {
                this.$Message.success({
                  content: this.$t('module.valueSet.warning.editSuccess'),
                  duration: 3
                });
                this.$emit('Close');
              } else {
                this.$Message.warning({
                  content: response.msg,
                  duration: 3
                });
              }
            });
          } else {
            $store.dispatch("AddFlexFieldElement", this.modelForm).then(response => {
              if (response.statusCode == "0") {
                this.$Message.success({
                  content: this.$t('module.valueSet.warning.createSuccess'),
                  duration: 3
                });
                this.$emit('Close');
              } else {
                this.$Message.warning({
                  content: response.msg,
                  duration: 3
                });
              }
            });
          }
        } else {
          this.$Message.error({
            content: this.$t('module.valueSet.warning.formValidateFailed'),
            duration: 3
          });
          return 0;
        }
      });
    },
    onOrgChange(org) {
      this.modelForm.ffeOrgId = org.orgId;
      this.modelForm.ffeOrgName = org.orgName;
    }
  },
  watch:{

  },
  directives:{

  }
}
</script>