<template>
  <div class="padding-20 page-box-row-left">
    <FormBlock :title="$t('module.configManage.configGroup')" direction="column">
      <PageTable ref="configTable" action="QueryConfigList" :columnsFn="columns" :autoFirst="false">
        <Form :model="searchForm" ref="searchForm" slot="search-bar" label-position="top" class="ivu-form-no-margin-bottom" inline>
          <Form-item prop="configName" :label="$t('module.configManage.groupName')">
            <Input type="text" maxlength="30" v-model="searchForm.configName" :placeholder="$t('module.configManage.enterGroupName')" size="small"/>
          </Form-item>
          <Form-item prop="configCode" :label="$t('module.configManage.groupCode')">
            <Input type="text" maxlength="30" v-model="searchForm.configCode" :placeholder="$t('module.configManage.enterGroupCode')" size="small"/>
          </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="deleteAll">{{$t('common.delete')}}</Button>-->
        </div>
      </PageTable>
    </FormBlock>
  </div>
</template>
<script>
import ConfigEdit from "./ConfigEdit.vue";
import ConfigItemManage from "./ConfigItemManage.vue";
// import Three from "../../../tools/getThree.js";

const columnRender = (h, getField) => {
  return h(
    "div",
    {
      attrs: {
        class: "ivu-table-cell ivu-table-cell-ellipsis",
        title: getField()
      }
    },
    getField()
  );
};

export default {
  // components: {},
  // props: {},
  data() {
    return {
      searchForm: {
        configCode: "",
        configName: ""        
      }
    };
  },
  // computed: {},
  mounted: function() {
    this.search();
  },
  // beforeMount: function() {},
  // mounted: function() {},
  // beforeDestroy: function() {},
  // destroyed: function() {},
  methods: {
    columns() {
      return [
        // {
        //   type: "selection",
        //   width: 60,
        //   // fixed: 'left',
        //   align: "center"
        // },
        {
          title: this.$t("common.operating"),
          align: "center",
          // fixed: 'left',
          width: 150,
          render: (h, params) => {
            return h("RowTools", {
              props: {
                data: [
                  {
                    type: "icon",
                    icon: "md-create",
                    text: this.$t("common.edit"),
                    handle: () => {
                      this.edit(params.row);
                    }
                  },
                  {
                    type: "icon",
                    icon: "trash-a",
                    text: this.$t("common.delete"),
                    handle: () => {
                      this.delete(params.row.id);
                    }
                  },
                  {
                    type: "icon",
                    icon: "settings",
                    text: this.$t("module.configManage.groupItemManage"),
                    handle: () => {
                      new this.$sidelipPage(ConfigItemManage, {
                        props: {
                          groupInfo: params.row
                        }
                      });
                    }
                  }
                ]
              }
            });
          }
        },
        {
          title: this.$t("module.configManage.groupName"),
          key: "configName",
          // sortable: "custom",
          width: 200,
          render: (h, params) => {
            return columnRender(h, () => params.row.configName);
          }
        },
        {
          title: this.$t("module.configManage.groupCode"),
          key: "configCode",
          // sortable: "custom",
          width: 200,
          render: (h, params) => {
            return columnRender(h, () => params.row.configCode);
          }
        },
        {
          title: this.$t("module.configManage.description"),
          key: "configValue",
          render: (h, params) => {
            return columnRender(h, () => params.row.configDesc);
          }
        },
        {
          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")
            );
          }
        }
      ];
    },
    search(page) {
      this.$refs["configTable"].load(this.searchForm, page);
    },
    reset() {
      this.$refs["searchForm"].resetFields();
      this.search(1);
    },
    add() {
      new this.$pageModal(
        ConfigEdit,
        {
          props: {}
        },
        data => {
          this.search();
        }
      );
    },
    edit(groupInfo) {
      new this.$pageModal(
        ConfigEdit,
        {
          props: {
            configInfo: groupInfo
          }
        },
        data => {
          this.search();
        }
      );
    },
    delete(id) {
      new $confirm(
        this.$t("module.flexField.warning.confirmToDelete"),
        this
      ).then(() => {
        this.$store.dispatch("DeleteConfig", { id }).then(response => {
          if (response.statusCode == '0') {
            this.$Message.success({
              content: response.msg || "Delete Success!",
              duration: 3
            });
            this.search();
          } else {
            this.$Message.warning({
              content: response.msg || "Delete Error!",
              duration: 3
            });
          }
        });
      });
    }
  }
  // watch: {},
  // directives: {}
};
</script>
