<template>
  <div class="padding-20 page-box-row-left">
    <FormBlock :title="$t('module.configManage.configItem')" direction="column">
      <PageTable ref="configTable" action="SearchConfigGroupItems" :customDataProcess="processTableData" :columnsFn="columns" :autoFirst="false">
        <Form :model="groupInfo" ref="searchForm" slot="search-bar" label-position="top" class="ivu-form-no-margin-bottom" inline>
          <Form-item prop="groupName" :label="$t('module.configManage.groupName')">
            <Input type="text" maxlength="30" v-model="groupInfo.configName" disabled size="small" />
          </Form-item>
          <Form-item prop="groupCode" :label="$t('module.configManage.groupCode')">
            <Input type="text" maxlength="30" v-model="groupInfo.configCode" disabled size="small" />
          </Form-item>
        </Form>
        <!--<div slot="handle-bar">
          <Button size="small" @click.native="searchGroupItems" 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 ConfigItemEdit from "./ConfigItemEdit.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()
  );
};

const ConfigItemOwnerCode = "CONFIG_OWNER";
export default {
  // components: {},
  props: {
    groupInfo: Object
  },
  // data() {
  //   return {};
  // },
  // computed: {},
  created() {
    $store
      .dispatch("GetValueSetByCode", { code: ConfigItemOwnerCode })
      .then(response => {
        this.owners = response.dataResult;
      })
      .catch(error => {
        this.$Message.warning({
          content: error.message,
          duration: 3
        });
      });
  },
  mounted: function() {
    this.searchGroupItems();
  },
  // beforeMount: function() {},
  // mounted: function() {},
  // beforeDestroy: function() {},
  // destroyed: function() {},
  methods: {
    columns() {
      const getOwnerName = owner => {
        if (!this.owners || !this.owners.length) return;
        let ownerInfo = this.owners.filter(item => item.vsiKey === owner);
        ownerInfo = ownerInfo[0] || {};
        return ownerInfo.vsiValue || "";
      };

      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);
                    }
                  }
                ]
              }
            });
          }
        },
        {
          title: this.$t("module.configManage.groupName"),
          key: "itemCode",
          // sortable: "custom",
          render: (h, params) => {
            return columnRender(h, () => params.row.itemCode);
          }
        },
        {
          title: this.$t("module.configManage.groupCode"),
          key: "itemValue",
          // sortable: "custom",
          render: (h, params) => {
            return columnRender(h, () => params.row.itemValue);
          }
        },
        {
          title: this.$t("module.configManage.owner"),
          key: "owner",
          render: (h, params) => {
            return columnRender(h, () => getOwnerName(params.row.owner));
          }
        }
      ];
    },
    processTableData(tableCom, res) {
      tableCom.currentPage = res.currentPage || res.pageNum || 1;
      tableCom.total = res.recordCount || res.total || 0;
      tableCom.tableData = [];
      // let _list = [];
      // //console.log(res.recordList);
      for (let item of res.recordList || res.records || res || []) {
        tableCom.tableData.push(item);
        // _list.push(item.userName);
      }
      this.allItems = tableCom.tableData;
    },
    searchGroupItems(page) {
      this.$refs["configTable"].load(
        { configId: this.groupInfo.id },
        page
      );
    },
    // reset() {
    //   this.$refs["searchForm"].resetFields();
    //   this.searchGroupItems(1);
    // },
    add() {
      new this.$pageModal(
        ConfigItemEdit,
        {
          props: {
            allItems: this.allItems,
            groupId: this.groupInfo.id,
            owners: this.owners
          }
        },
        data => {
          this.searchGroupItems();
        }
      );
    },
    edit(itemInfo) {
      new this.$pageModal(
        ConfigItemEdit,
        {
          props: {
            allItems: this.allItems.filter(
              item =>
                item.itemCode !== itemInfo.itemCode ||
                item.owner !== itemInfo.owner
            ),
            groupId: this.groupInfo.id,
            owners: this.owners,
            itemInfo
          }
        },
        data => {
          this.searchGroupItems();
        }
      );
    },
    delete(id) {
      new $confirm(
        this.$t("module.flexField.warning.confirmToDelete"),
        this
      ).then(() => {
        $store.dispatch("DeleteConfigItem", { id }).then(response => {
          if (response.statusCode == '0') {
            this.$Message.success({
              content: response.msg || "Delete Success!",
              duration: 3
            });
            this.searchGroupItems();
          } else {
            this.$Message.warning({
              content: response.msg || "Delete Error!",
              duration: 3
            });
          }
        });
      });
    }
  },
  watch: {},
  directives: {}
};
</script>
