<template>
  <div class="run-mod-box">
    <PageTable ref="receiptSequenceTable" action="GetReceiptSequenceList" :isPage="false" :columnsFn="columns">
      <Form :model="searchForm" ref="receiptSequenceForm" slot="search-bar" label-position="top" class="ivu-form-no-margin-bottom" inline>
        <Form-item prop="receiptSeqName" :label="$t('module.receiptSequence.receiptSeqName')">
          <Input type="text" maxlength="30" v-model="searchForm.receiptSeqName" :placeholder="$t('module.receiptSequence.enterReceiptSeqName')" size="small"></Input>
        </Form-item>
      </Form>
      <div slot="handle-bar">
        <Button size="small" @click.native="search" type="warning" icon="ios-search">{{$t('common.search')}}</Button>
        <Button size="small" @click.native="reset" type="info" icon="md-sync">{{$t('common.reset')}}</Button>
      </div>
      <div slot="table-bar">
        <Button type="ghost" icon="plus-round" size="small" @click="add">{{$t('common.create')}}</Button>
        <Button type="ghost" icon="trash-a" size="small" @click="deleted()">{{$t('common.delete')}}</Button>
      </div>
    </PageTable>
  </div>
</template>
<script>
import ReceiptSequenceEdit from "./ReceiptSequenceEdit.vue";
import ReceiptSequenceRule from "./ReceiptSequenceRule.vue";
export default{
  components:{

  },
  props:{
  },
  data(){
    return{
      searchForm: {
        receiptSeqName: "",
      },
    }
  },
  computed:{

  },
  created:function(){

  },
  beforeMount:function(){

  },
  mounted:function(){

  },
  beforeDestroy:function(){

  },
  destroyed:function(){

  },
  methods:{
    columns(){
      return [
        {
          type: "selection",
          width: 45,
          // fixed: 'left',
          align: "center"
        },
        {
          title: this.$t('common.operating'),
          align: "center",
          // fixed: 'left',
          width: 75,
          render: (h, params) => {
            return h("RowTools", {
              props: {
                data: [
                  {
                    type: "icon",
                    icon: "md-create",
                    text: this.$t('common.edit'),
                    handle: () => {
                      this.edit(params.row.receiptSeqId, params.row.version);
                    }
                  },
                  {
                    type: "icon",
                    icon: "gear-b",
                    text: this.$t('module.receiptSequence.editCodeRule'),
                    handle: () => {
                      this.editCodeRule(params.row);
                    }
                  }
                ]
              }
            });
          }
        },
        {
          title: this.$t('module.receiptSequence.receiptSeqCode'),
          key: "receiptSeqCode",
          // sortable: "custom",
          align: "center",
          width: 170,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.receiptSeqCode
              }
            }, params.row.receiptSeqCode);
          }
        },
        {
          title: this.$t('module.receiptSequence.receiptSeqName'),
          key: "receiptSeqName",
          // sortable: "custom",
          align: "center",
          width: 160,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.receiptSeqName
              }
            }, params.row.receiptSeqName);
          }
        },
        {
          title: this.$t('module.receiptSequence.receiptSeqDesc'),
          key: "receiptSeqDesc",
          align: "center",
          width: 170,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.receiptSeqDesc
              }
            }, params.row.receiptSeqDesc);
          }
        },
        {
          title: this.$t('module.receiptSequence.applicableToBu'),
          key: "applicableToBuName",
          // sortable: "custom",
          align: "center",
          width: 160,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.applicableToBuName
              }
            }, params.row.applicableToBuName);
          }
        },
        {
          title: this.$t('common.status'),
          align: "center",
          key: "isAvailable",
          align: "center",
          // width: 110,
          render: (h, params) => {
            return h(
              "Tag",
              {
                props: {
                  type: "dot",
                  color: params.row.isAvailable == 1 ? "blue" : "red"
                }
              },
              params.row.isAvailable == 1 ? this.$t('common.valid') : this.$t('common.invalid')
            );
          }
        },
      ]
    },
    search(page) {
      this.$refs["receiptSequenceTable"].load(this.searchForm, page);
    },
    
    reset() {
      this.$refs["receiptSequenceForm"].resetFields();
      this.$refs["receiptSequenceTable"].load();
    },
    add() {
      new this.$pageModal(
        ReceiptSequenceEdit,
        {
          props: {
          }
        }, (data) => {
          this.$refs["receiptSequenceTable"].load();
      });
    },
    deleted() {
      let receiptSeqIds = this.getIds();
      if (!receiptSeqIds || receiptSeqIds == undefined || receiptSeqIds == "") {
        this.$Message.warning(this.$t('module.receiptSequence.selctItems'));
        return;
      }
      new $confirm(this.$t('module.receiptSequence.confirmToDelete'), this).then(() => {
        this.$store.dispatch("DeleteReceiptSequence", receiptSeqIds).then(response => {
            this.$Message.success({
              content: this.$t('module.receiptSequence.deleteSuccess'),
              duration: 3
            });
            this.$refs["receiptSequenceTable"].load();
        });
      });
    },
    edit(id, version) {
      new this.$pageModal(
        ReceiptSequenceEdit,
        {
          props: {
            receiptSeqId: id,
            version: version
          }
        }, (data) => {
          this.$refs["receiptSequenceTable"].load();
      });
    },
    editCodeRule(row) {
      new this.$sidelipPage(
        ReceiptSequenceRule,
        {
          props: {
            obj:{receiptSeqId: row.receiptSeqId,
            receiptSeqCode: row.receiptSeqCode,
            receiptSeqName: row.receiptSeqName,
            resetFrequency: row.resetFrequency,
            version: row.version}
          }
        }, (data) => {
          this.$refs["receiptSequenceTable"].load();
      });
    },
    getIds() {
      let selectedFF = this.$refs["receiptSequenceTable"].getSelectioned() || [];
      let ids = [];
      for (let ff of selectedFF) {
        ids.push(ff.receiptSeqId);
      }
      return ids.join(",");
    },
  },
  watch:{

  },
  directives:{

  }
}
</script>
