<template>
  <div>
    <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="ruleSegmentField" :label="$t('module.receiptSequence.field')">
            <Select v-model="modelForm.ruleSegmentField" size="small" @on-change="segmentChange">
              <Option v-for="item in segmentList" :title="item.vsiValue" :value="item.vsiKey" :key="item.vsiKey">{{ item.vsiValue }}</Option>
            </Select>
          </Form-item>
        </Col>
        <Col span="12" style="border:none;">
          <Form-item prop="ruleSegmentFieldValue" :label="$t('module.receiptSequence.fieldValue')">
            <Input placeholder="" size="small" v-model="modelForm.ruleSegmentFieldValue" :disabled="segmentFieldValueNoEdit" maxlength="50"></Input>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
        <Col span="12" style="border:none;">
          <Form-item prop="datePattern" :label="$t('module.receiptSequence.dateFormat')">
            <Input :placeholder="$t('module.receiptSequence.enterCorrectFormat')" size="small" v-model="modelForm.datePattern" :disabled="datePatternNoEdit" @on-blur="dataChange" maxlength="50"></Input>
          </Form-item>
        </Col>
        <Col span="12" style="border:none;">
          <Form-item prop="seqLength" :label="$t('module.receiptSequence.digit')">
            <Input placeholder="" size="small" v-model="modelForm.seqLength" :disabled="seqLengthNoEdit" maxlength="50"></Input>
            <!-- <InputNumber size="small" v-model="modelForm.seqLength" :min="0" :disabled="seqLengthNoEdit" style="width: 100%"></InputNumber> -->
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
        <Col span="12" style="border:none;">
          <Form-item prop="seqIncrement" :label="$t('module.receiptSequence.stepSize')">
            <Input placeholder="" size="small" v-model="modelForm.seqIncrement" :disabled="seqIncrementNoEdit" maxlength="50"></Input>
            <!-- <InputNumber size="small" v-model="modelForm.seqIncrement" :min="0" :disabled="seqIncrementNoEdit" style="width: 100%"></InputNumber> -->
          </Form-item>
        </Col>
        <Col span="12" style="border:none;">
          <Form-item prop="seqStartValue" :label="$t('module.receiptSequence.startValue')">
            <Input placeholder="" size="small" v-model="modelForm.seqStartValue" :disabled="seqStartValueNoEdit" maxlength="50"></Input>
            <!-- <InputNumber size="small" v-model="modelForm.seqStartValue" :min="0" :disabled="seqStartValueNoEdit" style="width: 100%"></InputNumber> -->
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
        <Col span="12" style="border:none;">
          <Form-item prop="ruleSegmentOrder" :label="$t('module.receiptSequence.sort')">
            <Input placeholder="" size="small" v-model="modelForm.ruleSegmentOrder" maxlength="50"></Input>
            <!-- <InputNumber size="small" v-model="modelForm.ruleSegmentOrder" :min="0" style="width: 100%"></InputNumber> -->
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    ruleId: {
      type: String,
      default() {
        return "";
      }
    },
    receiptSeqCode: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    const ruleSegmentFieldValid = (rule, value, callback) => {
      if(!this.segmentFieldValueNoEdit){
        if (value === null) {
          callback(new Error(this.$t('module.receiptSequence.enterFieldValue')));
        } else if (value.length > 50) {
          callback(new Error(this.$t('module.receiptSequence.fieldValueMaxLength')));
        } else if (!new RegExp("^([a-zA-z0-9]|_)+$").test(value)) {
          callback(new Error(this.$t('module.receiptSequence.consistOfFieldValue')));
        }
      }
      callback();
    };
    const seqLengthValid = (rule, value, callback) => {
      if(!this.seqLengthNoEdit){
        if (value === null) {
          callback(new Error(this.$t('module.receiptSequence.enterDigit')));
        }else if(!new RegExp('^[0-9]+$').test(Number(value))){
          callback(new Error(this.$t('module.receiptSequence.onlyNumber')))
        }
      }
        callback();
    };
    const datePatternValid = (rule, value, callback) => {
      if(!this.datePatternNoEdit){
        if (value === null) {
          callback(new Error(this.$t('module.receiptSequence.enterDateFormat')));
        }
      }
        callback();
    };
    const seqIncrementValid = (rule, value, callback) => {
      if(!this.seqIncrementNoEdit){
        if (value === null) {
          callback(new Error(this.$t('module.receiptSequence.enterStepSize')));
        }else if(!new RegExp('^[0-9]+$').test(value)){
          callback(new Error(this.$t('module.receiptSequence.onlyNumber')))
        }
      }
        callback();
    };
    const seqStartValueValid = (rule, value, callback) => {
      if(!this.seqStartValueNoEdit){
        if (value === null) {
          callback(new Error(this.$t('module.receiptSequence.enterStartValue')));
        }else if(!new RegExp('^[0-9]+$').test(Number(value))){
          callback(new Error(this.$t('module.receiptSequence.onlyNumber')))
        } 
      }
        callback();
    };
    const ruleSegmentOrderValid = (rule, value, callback) => {
        if (value === null) {
          callback(new Error(this.$t('module.receiptSequence.enterSort')));
        }else if(!new RegExp('^[0-9]+$').test(Number(value))){
          callback(new Error(this.$t('module.receiptSequence.onlyNumber')))
        } 
        callback();
    };
    return {
      modelForm: {
        ruleSegmentField: null,
        ruleSegmentFieldValue: null,
        datePattern: null,
        seqIncrement: null,
        seqStartValue: null,
        seqLength: null,
        ruleId: this.ruleId,
        receiptSeqCode: this.receiptSeqCode,
        ruleSegmentOrder: null,
      },
      segmentList: [],
      segmentFieldValueNoEdit: true,//段值
      datePatternNoEdit: true,//日期格式
      seqLengthNoEdit: true,//位数
      seqIncrementNoEdit: true,//步长
      seqStartValueNoEdit: true,//开始值
      rule: {
        // ruleSegmentFieldValue: [{ required: !this.segmentFieldValueNoEdit, validator: ruleSegmentFieldValid, trigger: "blur" }],
        ruleSegmentFieldValue: [{ validator: ruleSegmentFieldValid, trigger: "blur" }],
        datePattern: [{ validator: datePatternValid, trigger: "blur" }],
        seqIncrement: [{ validator: seqIncrementValid, trigger: "blur" }],
        seqLength: [{ validator: seqLengthValid, trigger: "blur" }],
        seqStartValue: [{ validator: seqStartValueValid, trigger: "blur" }],
        ruleSegmentField: [{ required: true, message: this.$t("module.receiptSequence.enterRuleSegmentField"), trigger: "blur" }],
        ruleSegmentOrder: [{ validator: ruleSegmentOrderValid, message: this.$t("module.receiptSequence.enterSort"), trigger: "blur" }],
      }
    };
    
  },
  computed: {},
  created: function() {
    if (!!this.ruleId) {
      this.$emit("SetTitle", this.$t("module.receiptSequence.updateRule"));
      $store.dispatch("GetReceiptSequenceRuleDetail", {ruleId:this.ruleId}).then(response => {
        this.modelForm = response[0];
        this.segmentChange(response[0].ruleSegmentField);
      })
    } else {
      this.$emit("SetTitle", this.$t("module.receiptSequence.addRule"));
    }
    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", { action: "close" });
        }
      }
    ]);
    $store.dispatch("GetValueSetByCode", { code: 'RULE_SEGMENT' }) .then(response => { 
      this.segmentList = response.dataResult;
    });
    
  },
  beforeMount: function() {},
  mounted: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    save() {
      //排序非空校验
      // if(!this.modelForm.ruleSegmentOrder){
      //   this.$Message.error({
      //     content: this.$t('module.receiptSequence.enterSort'),
      //     duration: 3
      //   });
      //   return
      // }
      // //选择固定字符校验表单
      // if(this.modelForm.ruleSegmentField == "FIX_CHAR"){
      //   let value = this.modelForm.ruleSegmentFieldValue;
      //   if(!value){
      //     this.$Message.error({
      //       content: this.$t('module.receiptSequence.enterFieldValue'),
      //       duration: 3
      //     });
      //     return
      //   }else if (value.length > 50) {
      //     this.$Message.error({
      //       content: this.$t('module.receiptSequence.fieldValueMaxLength'),
      //       duration: 3
      //     });
      //     return
      //   } else if (!new RegExp("^([a-zA-z0-9]|_)+$").test(value)) {
      //     this.$Message.error({
      //       content: this.$t('module.receiptSequence.consistOfFieldValue'),
      //       duration: 3
      //     });
      //     return
      //   }
      // };
      // //选择日期校验表单
      // if(this.modelForm.ruleSegmentField == "DATE_PATTERN"){
      //   let value = this.modelForm.datePattern;
      //   if(!value){
      //     this.$Message.error({
      //       content: this.$t('module.receiptSequence.enterDateFormat'),
      //       duration: 3
      //     });
      //     return
      //   }
      // };
      // //选择序列号校验表单
      // if(this.modelForm.ruleSegmentField == "SEQENCE_NO"){
      //   let seqLengthValue = this.modelForm.seqLength;
      //   let seqIncrementValue = this.modelForm.seqIncrement;
      //   let seqStartValueValue = this.modelForm.seqStartValue;
      //   if(!seqLengthValue){
      //     this.$Message.error({
      //       content: this.$t('module.receiptSequence.enterDigit'),
      //       duration: 3
      //     });
      //     return
      //   }else if (!seqIncrementValue) {
      //     this.$Message.error({
      //       content: this.$t('module.receiptSequence.enterStepSize'),
      //       duration: 3
      //     });
      //     return
      //   } else if (!seqStartValueValue) {
      //     this.$Message.error({
      //       content: this.$t('module.receiptSequence.enterStartValue'),
      //       duration: 3
      //     });
      //     return
      //   }else if(!(new RegExp('^[0-9]+$').test(Number(seqLengthValue)) && new RegExp('^[0-9]+$').test(Number(seqIncrementValue)) && new RegExp('^[0-9]+$').test(Number(seqStartValueValue)))){
          
      //     this.$Message.error({
      //       content: this.$t('module.receiptSequence.onlyNumber'),
      //       duration: 3
      //     });
      //     return
      //   }
      // };
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          if (!!this.ruleId) {
            $store
              .dispatch("UpdateReceiptSequenceRule", this.modelForm)
              .then(response => {
                if(response.data.statusCode && response.statusCode == "-1"){
                  this.$Message.error({
                    content: response.data.msg,
                    duration: 3
                  });
                  return
                }
                this.$Message.success({
                  content: this.$t('module.receiptSequence.editSuccess'),
                  duration: 3
                });
                this.$emit("Close", { action: "update" });
              });
          } else {
            $store.dispatch("CreateReceiptSequenceRule", this.modelForm).then(response => {
              if(response.data.statusCode && response.data.statusCode == "-1"){
                this.$Message.error({
                  content: response.data.msg,
                  duration: 3
                });
                return
              }
                this.$Message.success({
                  content: this.$t('module.receiptSequence.createSuccess'),
                  duration: 3
                });
                this.$emit("Close", { action: "create" });
              });
          }
        }else{
          this.$Message.error({
            content: this.$t('common.formValidateFailed'),
            duration: 3
          });
          return 0;
        }
      })

    },
    segmentChange(data){
      if(data == "DATE_PATTERN"){
        this.segmentFieldValueNoEdit = true;//段值
        this.modelForm.ruleSegmentFieldValue = "";
        this.datePatternNoEdit = false;//日期格式
        this.seqLengthNoEdit = true;//位数
        this.modelForm.seqLength = null;
        this.seqIncrementNoEdit = true;//步长
        this.modelForm.seqIncrement = null;
        this.seqStartValueNoEdit = true;//开始值
        this.modelForm.seqStartValue = null;
      }else if(data == "SEQENCE_NO"){//**********************************正整数 */
        this.segmentFieldValueNoEdit = true;//段值
        this.modelForm.ruleSegmentFieldValue = "";
        this.datePatternNoEdit = true;//日期格式************************下拉框
        this.modelForm.datePattern = "";
        this.seqLengthNoEdit = false;//位数
        this.seqIncrementNoEdit = false;//步长
        this.seqStartValueNoEdit = false;//开始值
      }else if(data == "FIX_CHAR"){
        this.segmentFieldValueNoEdit = false;//段值
        this.datePatternNoEdit = true;//日期格式
        this.modelForm.datePattern = "";
        this.seqLengthNoEdit = true;//位数
        this.modelForm.seqLength = null;
        this.seqIncrementNoEdit = true;//步长
        this.modelForm.seqIncrement = null;
        this.seqStartValueNoEdit = true;//开始值
        this.modelForm.seqStartValue = null;
      }
    },
    dataChange(){
      // console.log(new Date().format('yyyy-MM-dd'))
      //  if(new Date().format(this.modelForm.datePattern) && this.modelForm.datePattern != new Date().format(this.modelForm.datePattern)){
      //    console.log(new Date().format(this.modelForm.datePattern))
      //    console.log("成功了")
      //  }; 
    },
  },
  watch: {},
  directives: {}
};
</script>
