<template>
  <div class="run-mod-box">
    <PageTable ref="ruleTable" action="GetReceiptSequenceRuleList" :columnsFn="columns" :initParam="initParam" :isPage="false">
      <Form :model="searchForm" ref="flexFieldForm" slot="search-bar" label-position="top" class="ivu-form-no-margin-bottom" inline>
        <Form-item prop="receiptSeqCode" :label="$t('module.receiptSequence.receiptSeqCode')">
          <Input type="text" maxlength="30" v-model="searchForm.receiptSeqCode" :placeholder="$t('module.receiptSequence.enterReceiptSeqCode')" readonly size="small"></Input>
        </Form-item>
        <Form-item prop="receiptSeqName" :label="$t('module.receiptSequence.receiptSeqName')">
          <Input type="text" maxlength="30" v-model="searchForm.receiptSeqName" :placeholder="$t('module.receiptSequence.enterReceiptSeqName')" readonly size="small"></Input>
        </Form-item>
        <!-- <Form-item prop="resetFrequency" :label="$t('module.receiptSequence.resetFrequency')">
          <Input type="text" maxlength="30" v-model="searchForm.resetFrequency" :placeholder="$t('module.receiptSequence.enterReceiptSeqName')" readonly size="small"></Input>
        </Form-item> -->
        <Form-item prop="resetFrequency" :label="$t('module.receiptSequence.resetFrequency')">
          <Select size="small" v-model="searchForm.resetFrequency" disabled>
            <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>
        <Form-item prop="receiptSeqName">
          <Button  type="ghost" icon="" size="small" @click="applyResult(param)">{{$t('module.receiptSequence.applyResult')}}</Button>
          <Input class="inputPosition"   type="text" maxlength="30" v-model="searchForm.applyResult" size="small"></Input>
        </Form-item>
      </Form>
      <div slot="table-bar">
        <Button type="ghost" icon="plus-round" size="small" @click="addOrUpdate()">{{$t('common.create')}}</Button>
        <Button type="ghost" icon="trash-a" size="small" @click="deleted()">{{$t('common.delete')}}</Button>
      </div>
    </PageTable>
  </div>
</template>
<script>
import ReceiptSequenceRuleEdit from "./ReceiptSequenceRuleEdit.vue";
export default{
  components:{

  },
  props:{
    obj:{
      type: Object,
      default(){
        return {};
      }
    },
  },
  data(){
    return{
      segmentList: [],
      searchForm: {
        receiptSeqCode: this.obj.receiptSeqCode,
        receiptSeqName: this.obj.receiptSeqName,
        resetFrequency: this.obj.resetFrequency,
        applyResult: "",
      },
      initParam: {
        receiptSeqCode: this.obj.receiptSeqCode,
      },

    }
  },
  computed:{

  },
  created:function(){
    $store.dispatch("GetValueSetByCode", { code: 'RULE_SEGMENT' }) .then(response => { 
      this.segmentList = response.dataResult;
    });
  },
  beforeMount:function(){

  },
  mounted:function(){

  },
  beforeDestroy:function(){

  },
  destroyed:function(){

  },
  methods:{
    columns(){
      return [
        {
          type: "selection",
          width: 45,
          // fixed: 'left',
          // type: 'index',
        },
        {
          title: this.$t('module.receiptSequence.No'),
          width: 45,
          key: 'ruleSegmentOrder',
          align: "center",
        },
        {
          title: this.$t('common.operating'),
          align: "center",
          // fixed: 'left',
          width: 50,
          render: (h, params) => {
            return h("RowTools", {
              props: {
                data: [
                  {
                    type: "icon",
                    icon: "md-create",
                    text: this.$t('common.edit'),
                    handle: () => {
                      this.addOrUpdate(params.row.ruleId);
                    }
                  },
                ]
              }
            });
          }
        },
        {
          title: this.$t('module.receiptSequence.field'),
          key: "ruleSegmentField",
          // sortable: "custom",
          width: 120,
          align: "center",
          render: (h, params) => {
            return h('div', {
              attrs: {
                  title: params.row.ruleSegmentField
                }
              },
              this.getValue(params.row.ruleSegmentField)
            )
          }
        },
        {
          title: this.$t('module.receiptSequence.fieldValue'),
          key: "ruleSegmentFieldValue",
          // sortable: "custom",
          align: "center",
          width: 120,
          render: (h, params) => {
            return h('div', {
              attrs: {
                title: params.row.ruleSegmentFieldValue
              }
            }, params.row.ruleSegmentFieldValue);
          }
        },
        {
          title: this.$t('module.receiptSequence.dateFormat'),
          key: "datePattern",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.datePattern
              }
            }, params.row.datePattern);
          }
        },
        
        {
          title: this.$t('module.receiptSequence.digit'),
          key: "seqLength",
          // sortable: "custom",
          align: "center",
          width: 150,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.seqLength
              }
            }, params.row.seqLength);
          }
        },
        {
          title: this.$t('module.receiptSequence.stepSize'),
          key: "seqIncrement",
          // sortable: "custom",
          align: "center",
          width: 150,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.seqIncrement
              }
            }, params.row.seqIncrement);
          }
        },
        {
          title: this.$t('module.receiptSequence.startValue'),
          key: "seqStartValue",
          align: "center",
          minMidth: 150,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.seqStartValue
              }
            }, params.row.seqStartValue);
          }
        },
      ]
    },
    addOrUpdate(ruleId) {
      new this.$pageModal(
        ReceiptSequenceRuleEdit,
        {
          props: {
            ruleId: ruleId,
            receiptSeqCode: this.obj.receiptSeqCode,
          }
        }, (data) => {
          if(data.action == "close") return;
          this.search();
      });
    },
    deleted() {
      let itemIds = this.getIds();
      if (!itemIds || itemIds == undefined || itemIds == "") {
        this.$Message.warning(this.$t('module.receiptSequence.selctItems'));
        return;
      }
      new $confirm(this.$t('module.receiptSequence.confirmToDelete'), this).then(() => {
        $store.dispatch("DeleteReceiptSequenceRule", itemIds).then(response => {
            this.$Message.success({
              content: this.$t('module.receiptSequence.deleteSuccess'),
              duration: 3
            });
            this.search();
        });
      });
    },
    getIds() {
      let selectedItems = this.$refs["ruleTable"].getSelectioned() || [];
      let ids = [];
      for (let item of selectedItems) {
        ids.push(item.ruleId);
      }
      return ids.join(",");
    },
    applyResult(param){
      $store.dispatch("ApplyResult", this.obj.receiptSeqCode).then(response => {
        if(response.status == 200){
          this.searchForm.applyResult = response.data.dataResult;
        }else{
          this.$Message.warning({
            content: response.statusText,
            duration: 3
          })
        }
        
      })
    },
    search(page) {
      this.$refs["ruleTable"].load(this.searchForm, page);
      this.searchForm.applyResult = ''
    },
    getValue(code){
      for(let item of this.segmentList){
        if(item.vsiKey == code){
          return item.vsiValue
        }
      }
    }
  },
  watch:{

  },
  directives:{

  }
}
</script>
<style scoped>
  .inputPosition{
      position: absolute;
      width: 200px;
      left: 76px;
      top: 5px;
    }
</style>
