<template>
  <div class="run-mod-box">
    <PageTable ref="attributeTable" action="QueryFlexFieldAttribute" :columnsFn="columns" :autoFirst="false">
      <Form :model="searchForm" ref="attributeForm" slot="search-bar" label-position="top" class="ivu-form-no-margin-bottom" inline>
        <Form-item prop="ffeaCode" :label="$t('module.flexField.attrCode')">
          <Input type="text" maxlength="30" v-model="searchForm.ffeaCode" :placeholder="$t('module.flexField.enterAttrCode')" size="small"></Input>
        </Form-item>
        <Form-item prop="ffeaName" :label="$t('module.flexField.attrName')">
          <Input type="text" maxlength="30" v-model="searchForm.ffeaName" :placeholder="$t('module.flexField.enterAttrName')" size="small"></Input>
        </Form-item>
        <Form-item prop="ffeaUseColumn" :label="$t('module.flexField.columnName')">
          <Input type="text" maxlength="30" v-model="searchForm.ffeaUseColumn" :placeholder="$t('module.flexField.enterColumnName')" size="small"></Input>
        </Form-item>
        <Form-item prop="enabled" :label="$t('common.status')">
          <Select size="small" v-model="searchForm.enabled">
            <Option :title="$t('common.valid')" :value="1" :key="1">{{$t('common.valid')}}</Option>
            <Option :title="$t('common.invalid')" :value="0" :key="0">{{$t('common.invalid')}}</Option>
          </Select>
        </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 FlexFieldAttributeEdit from "./FlexFieldAttributeEdit.vue";
export default{
  components:{

  },
  props:{
    ffeId:{
      type: String,
      default(){
        return '';
      }
    },
  },
  data(){
    return{
      searchForm: {
        refFfeId: this.ffeId,
        ffeaCode: "",
        ffeaName: "",
        ffeaUseColumn: "",
        enabled: "",
      },
    }
  },
  computed:{

  },
  created:function(){
    this.$emit("setTitle", this.$t('module.flexField.ffAttribute'));
  },
  beforeMount:function(){

  },
  mounted:function(){
    this.search();
  },
  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: 65,
          render: (h, params) => {
            return h("RowTools", {
              props: {
                data: [
                  {
                    type: "icon",
                    icon: "md-create",
                    text: this.$t('common.edit'),
                    handle: () => {
                      this.edit(params.row.ffeaId, params.row.version);
                    }
                  }
                ]
              }
            });
          }
        },
        {
          title: this.$t('module.flexField.attrCode'),
          key: "ffeaCode",
          // sortable: "custom",
          width: 200,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.ffeaCode
              }
            }, params.row.ffeaCode);
          }
        },
        {
          title: this.$t('module.flexField.attrName'),
          key: "ffeaName",
          // sortable: "custom",
          width: 200,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.ffeaName
              }
            }, params.row.ffeaName);
          }
        },
        {
          title: this.$t('module.flexField.columnName'),
          key: "ffeaUseColumn",
          width: 200,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.ffeaUseColumn
              }
            }, params.row.ffeaUseColumn);
          }
        },
        {
          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.associatedVs'),
          key: "refValueSet",
          // sortable: "custom",
          // width: 160,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.refValueSet
              }
            }, params.row.refValueSet);
          }
        },
      ]
    },
    search(page) {
      this.$refs["attributeTable"].load(this.searchForm, page);
    },
    reset() {
      this.$refs["attributeForm"].resetFields();
      this.search(1);
    },
    add() {
      new this.$pageModal(
        FlexFieldAttributeEdit,
        {
          props: {
            ffeId: this.ffeId,
          }
        }, (data) => {
          this.search();
      });
    },
    deleted() {
      let ffeaIds = this.getIds();
      if (!ffeaIds || ffeaIds == undefined || ffeaIds == "") {
        this.$Message.warning(this.$t('module.flexField.warning.selctFlexField'));
        return;
      }
      new $confirm(this.$t('module.flexField.warning.confirmToDelete'), this).then(() => {
        $store.dispatch("DeleteFlexFieldAttribute", {ffeaIds: ffeaIds}).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(
        FlexFieldAttributeEdit,
        {
          props: {
            ffeId: this.ffeId,
            ffeaId: id,
            version: version
          }
        }, (data) => {
          this.search();
      });
    },
    getIds() {
      let selectedFFEA = this.$refs["attributeTable"].getSelectioned() || [];
      let ids = [];
      for (let ffea of selectedFFEA) {
        ids.push(ffea.ffeaId);
      }
      return ids.join(",");
    },
  },
  watch:{

  },
  directives:{

  }
}
</script>
