<template>
  <div class="run-mod-box">
    <PageTable ref="elementTable" action="QueryFlexFieldElement" :columnsFn="columns" :autoFirst="false" :onSelectionChange="onSelectionChange">
      <Form :model="searchForm" ref="elementForm" slot="search-bar" label-position="top" class="ivu-form-no-margin-bottom" inline>
        <Form-item prop="ffeCode" :label="$t('module.flexField.refAttributeValue')">
          <Input type="text" maxlength="30" v-model="searchForm.ffeCode" :placeholder="$t('module.flexField.refAttributeValue')" size="small"></Input>
        </Form-item>
        <Form-item prop="ffeName" :label="$t('module.flexField.elementName')">
          <Input type="text" maxlength="30" v-model="searchForm.ffeName" :placeholder="$t('module.flexField.enterElementName')" size="small"></Input>
        </Form-item>
        <Form-item prop="ffeDesc" :label="$t('module.flexField.elementDesc')">
          <Input type="text" maxlength="30" v-model="searchForm.ffeDesc" :placeholder="$t('module.flexField.enterElementDesc')" 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()" :disabled="isDisabledDelete">{{$t('common.delete')}}</Button>
      </div>
    </PageTable>
  </div>
</template>
<script>
import FlexFieldElementEdit from "./FlexFieldElementEdit.vue";
import FlexFieldAttributeList from "./FlexFieldAttributeList.vue";
export default{
  components:{

  },
  props:{
    ffId:{
      type: String,
      default(){
        return '';
      }
    },
    ffRefBeanAttribute:{
      type: String,
      default(){
        return '';
      }
    },
  },
  data(){
    return{
      searchForm: {
        refFfId: this.ffId,
        ffeCode: "",
        ffeName: "",
        ffeDesc: "",
        enabled: "",
      },
      isDisabledDelete: false
    }
  },
  computed:{

  },
  created:function(){
    this.$emit("setTitle", this.$t('module.flexField.ffElement'));
  },
  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: this.getOperation(params.row)
              }
            });
          }
        },
        {
          title: this.$t('module.flexField.refAttributeValue'),
          key: "ffeCode",
          // sortable: "custom",
          width: 160,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.ffeCode
              }
            }, params.row.ffeCode);
          }
        },
        {
          title: this.$t('module.flexField.elementName'),
          key: "ffeName",
          // sortable: "custom",
          width: 160,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.ffeName
              }
            }, params.row.ffeName);
          }
        },
        {
          title: this.$t('module.flexField.elementDesc'),
          key: "ffeDesc",
          // width: 200,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.ffeDesc
              }
            }, params.row.ffeDesc);
          }
        },
        {
          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.userManage.affiliation"),
          key: "ffeOrgId",
          // sortable: "custom",
          width: 160,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.ffeOrgId
              }
            }, params.row.ffeOrgId);
          }
        },
      ]
    },
    search(page) {
      this.$refs["elementTable"].load(this.searchForm, page);
    },
    reset() {
      this.$refs["elementForm"].resetFields();
      this.search(1);
    },
    add() {
      new this.$pageModal(
        FlexFieldElementEdit,
        {
          props: {
            ffId: this.ffId,
            ffRefBeanAttribute: this.ffRefBeanAttribute,
          }
        }, (data) => {
          this.search();
      });
    },
    deleted() {
      let ffeIds = this.getIds();
      if (!ffeIds || ffeIds == undefined || ffeIds == "") {
        this.$Message.warning(this.$t('module.flexField.warning.selctElement'));
        return;
      }
      new $confirm(this.$t('module.flexField.warning.confirmToDelete'), this).then(() => {
        $store.dispatch("DeleteFlexFieldElement", {ffeIds: ffeIds}).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(
        FlexFieldElementEdit,
        {
          props: {
            ffId: this.ffId,
            ffeId: id,
            ffRefBeanAttribute: this.ffRefBeanAttribute,
            version: version
          }
        }, (data) => {
          this.search();
      });
    },
    editAttribute(id, version) {
      new this.$sidelipPage(
        FlexFieldAttributeList,
        {
          props: {
            ffId: this.ffId,
            ffeId: id,
            version: version
          }
        }, (data) => {
          this.search();
      });
    },
    getIds() {
      let selectedFFE = this.$refs["elementTable"].getSelectioned() || [];
      let ids = [];
      for (let ffe of selectedFFE) {
        ids.push(ffe.ffeId);
      }
      return ids.join(",");
    },
    getOperation(object){
      let operations = [];
      if(object.ffeCode != "global_code"){
        operations.push(
          {
            type: "icon",
            icon: "md-create",
            text: this.$t('common.edit'),
            handle: () => {
              this.edit(object.ffeId, object.version);
            }
          }
        );
      }
      operations.push(
        {
          type: "icon",
          icon: "gear-b",
          text: this.$t('module.flexField.fieldManage'),
          handle: () => {
            this.editAttribute(object.ffeId, object.version);
          }
        }
      );
      return operations;
    },
    onSelectionChange(selection){
      for (const key in selection) {
        const element = selection[key];
        if(element.ffeCode == "global_code"){
          this.isDisabledDelete = true;
          return;
        }
      }
      this.isDisabledDelete = false;
    },
  },
  watch:{

  },
  directives:{

  }
}
</script>
