<template>
  <div class="run-modal-style">
    <Form :model="modelForm" ref="editForm" class="ivu-form-no-margin-bottom" :rules="rule" :label-width="100">
      <Row :gutter="20" class="code-row-bg">
        <Col span="12" style="border:none;">
          <Form-item prop="receiptSeqCode" :label="$t('module.receiptSequence.receiptSeqCode')">
            <Input placeholder="" size="small" v-model="modelForm.receiptSeqCode" maxlength="50"></Input>
          </Form-item>
        </Col>
        <Col span="12" style="border:none;">
          <Form-item prop="receiptSeqName" :label="$t('module.receiptSequence.receiptSeqName')">
            <Input placeholder="" size="small" v-model="modelForm.receiptSeqName" maxlength="50"></Input>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
        <Col span="12" style="border:none;">
          <Form-item prop="applicableToBu" :label="$t('module.receiptSequence.applicableToBu')">
            <!-- <select-org :orgName="modelForm.applicableToBu"></select-org> -->
            <Input v-model="modelForm.applicableToBuName" icon="ios-world" placeholder="请选择组织" size="small" style="width: 100%" @click.native="select()" readonly></Input>
          </Form-item>
        </Col>
        <Col span="12" style="border:none;">
          <Form-item prop="resetFrequency" :label="$t('module.receiptSequence.resetFrequency')">
            <Select size="small" v-model="modelForm.resetFrequency">
              <Option :title="$t('module.receiptSequence.resetFrequencyOption.everyDay')" value="DAILY" key="DAILY">{{$t('module.receiptSequence.resetFrequencyOption.everyDay')}}</Option>
              <Option :title="$t('module.receiptSequence.resetFrequencyOption.everyMonth')" value="MONTHLY" key="MONTHLY">{{$t('module.receiptSequence.resetFrequencyOption.everyMonth')}}</Option>
              <Option :title="$t('module.receiptSequence.resetFrequencyOption.everyYear')" value="YEARLY" key="YEARLY">{{$t('module.receiptSequence.resetFrequencyOption.everyYear')}}</Option>
              <Option :title="$t('module.receiptSequence.resetFrequencyOption.never')" value="NEVER" key="NEVER">{{$t('module.receiptSequence.resetFrequencyOption.never')}}</Option>
            </Select>
          </Form-item>
        </Col>
      </Row>
      <Form-item :label="$t('module.receiptSequence.receiptSeqDesc')">
        <Input type="textarea" :rows="3" placeholder="" size="small" v-model="modelForm.receiptSeqDesc" maxlength="100"></Input>
      </Form-item>
      <Row :gutter="20" class="code-row-bg">
        <Col span="12" style="border:none;">
          <Form-item prop="isAvailable" :label="$t('common.status')">
            <el-radio v-model="modelForm.isAvailable" :label="1">{{$t('common.valid')}}</el-radio>
            <el-radio v-model="modelForm.isAvailable" :label="0">{{$t('common.invalid')}}</el-radio>
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>
<script>
import SelectOrgTree from "./SelectOrgTree.vue";
export default{
  components:{
  },
  props:{
    receiptSeqId:{
      type: String,
      default(){
        return '';
      }
    },
    version:{
      type: String,
      default(){
        return '';
      }
    },
  },
  data(){
    return{
      modelForm: {
        receiptSeqId: this.receiptSeqId,
        receiptSeqCode: "",
        receiptSeqName: "",
        applicableToBu: "",
        applicableToBuName: "",
        resetFrequency: "NEVER",
        receiptSeqDesc: "",
        isAvailable: 1,
      },
      rule: {
        receiptSeqCode: [{ required: true, message: this.$t('module.receiptSequence.enterReceiptSeqCode'), trigger: "blur" }],
        receiptSeqName: [{ required: true, message: this.$t('module.receiptSequence.enterReceiptSeqName'), trigger: "blur" }],
      },
    }
  },
  computed:{

  },
  created:function(){
    if(this.receiptSeqId){
      this.$emit('SetTitle', this.$t('module.receiptSequence.editReceiptSequence'));
    }else{
      this.$emit('SetTitle', this.$t('module.receiptSequence.createReceiptSequence'));
    }
    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.receiptSeqId){
        $store.dispatch("GetReceiptSequenceDetail", this.receiptSeqId).then(response => {
          this.modelForm = {
            receiptSeqId: response.receiptSeqId,
            receiptSeqCode: response.receiptSeqCode,
            receiptSeqName: response.receiptSeqName,
            applicableToBu: response.applicableToBu,
            applicableToBuName: response.applicableToBuName,
            resetFrequency: response.resetFrequency,
            receiptSeqDesc: response.receiptSeqDesc,
            isAvailable: parseInt(response.isAvailable),
            version: this.version
          };
        });
      }
    },
    save() {
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          if (this.receiptSeqId) {
            $store.dispatch("UpdateReceiptSequence", this.modelForm).then(response => {
                this.$Message.success({
                  content: this.$t('module.receiptSequence.editSuccess'),
                  duration: 3
                });
                this.$emit('Close');
            });
          } else {
            $store.dispatch("CreateReceiptSequence", this.modelForm).then(response => {
                this.$Message.success({
                  content: this.$t('module.receiptSequence.createSuccess'),
                  duration: 3
                });
                this.$emit('Close');
            });
          }
        } else {
          this.$Message.error({
            content: this.$t('common.formValidateFailed'),
            duration: 3
          });
          return 0;
        }
      });
    },
    select() {
      new this.$pageModal(
        SelectOrgTree,
        {
          props: {
            // orgId: this.orgId,
            // orgName: this.orgName
          }
        }, (data) => {
          this.modelForm.applicableToBu = data.orgId;
          this.modelForm.applicableToBuName = data.orgName;
          this.orgName = data.orgName;
        }
      );
    },
  },
  watch:{

  },
  directives:{

  }
}
</script>
