<template>
  <div class="run-mod-box">
    <PageTable ref="flexFieldTable" action="QueryFlexField" :columnsFn="columns">
      <Form :model="searchForm" ref="flexFieldForm" slot="search-bar" label-position="top" class="ivu-form-no-margin-bottom" inline>
        <Form-item prop="ffName" :label="$t('module.flexField.name')">
          <Input type="text" maxlength="30" v-model="searchForm.ffName" :placeholder="$t('module.flexField.enterName')" 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 FlexFieldEdit from "./FlexFieldEdit.vue";
import FlexFieldElementList from "./FlexFieldElementList.vue";
export default{
  components:{

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

  },
  created:function(){

  },
  beforeMount:function(){

  },
  mounted:function(){

  },
  beforeDestroy:function(){

  },
  destroyed:function(){

  },
  methods:{
    columns(){
      return [
        {
          type: "selection",
          width: 55,
          // fixed: 'left',
          align: "center"
        },
        {
          title: this.$t('common.operating'),
          align: "center",
          // fixed: 'left',
          width: 110,
          render: (h, params) => {
            return h("RowTools", {
              props: {
                data: [
                  {
                    type: "icon",
                    icon: "md-create",
                    text: this.$t('common.edit'),
                    handle: () => {
                      this.edit(params.row.ffId, params.row.version);
                    }
                  },
                  {
                    type: "icon",
                    icon: "gear-b",
                    text: this.$t('module.flexField.elementManage'),
                    handle: () => {
                      this.editElement(params.row.ffId, params.row.ffRefBeanAttribute);
                    }
                  }
                ]
              }
            });
          }
        },
        {
          title: this.$t('module.flexField.code'),
          key: "ffCode",
          // sortable: "custom",
          align: "center",
          width: 120,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.ffCode
              }
            }, params.row.ffCode);
          }
        },
        {
          title: this.$t('module.flexField.name'),
          key: "ffName",
          // sortable: "custom",
          align: "center",
          width: 120,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.ffName
              }
            }, params.row.ffName);
          }
        },
        {
          title: this.$t('module.flexField.desc'),
          key: "ffDesc",
          align: "center",
           width: 150,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.ffDesc
              }
            }, params.row.ffDesc);
          }
        },
        {
          title: this.$t('common.status'),
          align: "center",
          key: "enabled",
          width: 110,
          render: (h, params) => {
            return h(
              "Tag",
              {
                props: {
                  type: "dot",
                  color: params.row.enabled == 1 ? "blue" : "red"
                }
              },
              params.row.enabled == 1 ? this.$t('common.valid') : this.$t('common.invalid')
            );
          }
        },
        {
          title: this.$t('module.flexField.orgAlias'),
          key: "ffRefOrgAttribute",
          // sortable: "custom",
          width: 150,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.ffRefOrgAttribute
              }
            }, params.row.ffRefOrgAttribute);
          }
        },
        {
          title: this.$t('module.flexField.refFieldAlias'),
          key: "ffRefBeanAttribute",
          width: 150,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.ffRefBeanAttribute
              }
            }, params.row.ffRefBeanAttribute);
          }
        },
      ]
    },
    search(page) {
      this.$refs["flexFieldTable"].load(this.searchForm, page);
    },
    reset() {
      this.$refs["flexFieldForm"].resetFields();
      this.search(1);
    },
    add() {
      new this.$pageModal(
        FlexFieldEdit,
        {
          props: {
          }
        }, (data) => {
          this.search();
      });
    },
    deleted() {
      let ffIds = this.getIds();
      if (!ffIds || ffIds == undefined || ffIds == "") {
        this.$Message.warning(this.$t('module.flexField.warning.selctFlexField'));
        return;
      }
      new $confirm(this.$t('module.flexField.warning.confirmToDelete'), this).then(() => {
        this.$store.dispatch("DeleteFlexField", {ffIds: ffIds}).then(response => {
          if (response.statusCode == "0") {
            this.$Message.success({
              content: response.msg,
              duration: 3
            });
            this.search();
          }else{
            this.$Message.warning({
              content: response.msg,
              duration: 3
            });
          }
        });
      });
    },
    edit(id, version) {
      new this.$pageModal(
        FlexFieldEdit,
        {
          props: {
            ffId: id,
            version: version
          }
        }, (data) => {
          this.search();
      });
    },
    editElement(id, ffRefBeanAttribute) {
      new this.$sidelipPage(
        FlexFieldElementList,
        {
          props: {
            ffId: id,
            ffRefBeanAttribute: ffRefBeanAttribute
          }
        }, (data) => {
          this.search();
      });
    },
    getIds() {
      let selectedFF = this.$refs["flexFieldTable"].getSelectioned() || [];
      let ids = [];
      for (let ff of selectedFF) {
        ids.push(ff.ffId);
      }
      return ids.join(",");
    },
  },
  watch:{

  },
  directives:{

  }
}
</script>
