<template>
  <div class="tableComStyle">
    <div class="searchFormStyle">
       <Form @submit.native.prevent inline ref="searchForm" :model="searchForm" class="inline">
         <Form-item label="名称" prop="name">
            <Input v-model="searchForm.name" class="comWidth" placeholder="请输入名称" />
        </Form-item>
        <Form-item label="作者" prop="author">
            <Input v-model="searchForm.author" class="comWidth" placeholder="请输入作者" />
        </Form-item>
        <FormItem class="btnGroupStyle">
          <div>
            <Button class="btnStyle" @click="reset()">重置</Button>
            <Button type="primary" class="btnStyle" @click="query">查询</Button>
          </div>
        </FormItem>
      </Form>
    </div>
    <div class="tableGroupStyle">
      <div class="toolBarStyle">
        <h3>查询数据</h3>
        <div>
          <Button type="primary" class="btnStyle" @click="add">新增</Button>
          <slot></slot>
        </div>
      </div>
      <Table
        :columns="columns"
        :data="tableData"
        class="tableStyle"
      />
      <Page
        :total="total"
        v-if="total > 0"
        show-elevator
        show-sizer
        class="pageStyle"
        :current="searchForm.pageNo"
        :pageSize="searchForm.pageSize"
        @on-change="changePageNo"
        @on-page-size-change="changePageSize"
      />
    </div>
    <Modal v-model="showPagesUrl" title="页面地址列表" width="900">
        <Table
          :columns="urlTableColumns"
          :data="urlTableData"
          class="tableStyle"
        />
        <span slot="footer"></span>
    </Modal>
    <addOrEditNavigator
      v-model="showAddOrEdit"
      :navigatorConfig="navigatorConfig"
      @close="closeAddOrEdit"
    />
  </div>
</template>
<script>
import { columns, urlTableColumns } from '@/config/navigatorCol.config'
import navigatorApi from '@api/navigator.api'
import addOrEditNavigator from './components/addOrEditNavigator'
export default {
  components: {
    addOrEditNavigator
  },
  data() {
    return {
      showPagesUrl: false,
      searchForm: {
        pageSize: 20,
        pageNo: 1,
        name: '',
        author: ''
      },
      tableData: [],
      urlTableData: [],
      columns: [],
      urlTableColumns: [],
      total: 0,
      navigatorConfig: null, // 新增、编辑的配置
      showAddOrEdit: false
    }
  },
  created() {
    this.columns = columns(this);
    this.urlTableColumns = urlTableColumns(this);
    this.$nextTick(() => {
      this.query();
    })
  },
  methods: {
    async query() {
      const res = await navigatorApi.getList(this.searchForm);
      this.total = res.total || 0;
      this.tableData = res.data || []

    },
    closeAddOrEdit(refresh){
      this.showAddOrEdit = false;
      this.navigatorConfig = null;
      if (refresh) {
        this.query();
      }
    },
    add() {
      this.navigatorConfig = null;
      this.showAddOrEdit = true;
    },
    changePageSize(size) {
      // 变更每页条数
      this.searchForm.pageNo = 1;
      this.searchForm.pageSize = size;
      this.query();
    },
    changePageNo(page) {
      // 变更页码
      this.searchForm.pageNo = page;
      this.query();
    },
    showAddr(row) {
      // 查看地址列表
      let configs = row.navigatorData || [];
      let arr = [];
      for (let i = 0; i < configs.length; i++) {
        let obj = {};
        obj.id = i + 1;
        obj.configName = configs[i].name;
        obj.pageName = configs[i].pageName;
        obj.pageUrl = configs[i].pageType == 1 ? '' : configs[i].pageUrl;
        arr.push(obj)
      }
      this.urlTableData = arr;
      this.showPagesUrl = true;
    },
    preview(row) {
      // 预览，默认预览第一个导航页面
      console.log(row);
    },
    edit(row) {
      // 编辑
      this.navigatorConfig = row;
      this.showAddOrEdit = true;
    },
    delete(row) {
      // 删除
      this.$Modal.confirm({
        title: '提示',
        content: `是否删除导航 ${row.name}`,
        onOk: async () => {
          const deleteRes = await navigatorApi.deleteNavigator({
            id: row.id
          });
          this.$toast('删除成功');
          this.query();
        }
      })
    },
    reset() {
      // 重置表单
      // this.resetForm('searchForm');
      this.$refs.searchForm.resetFields();
      this.searchForm.pageSize = 20;
      this.searchForm.pageNo = 1;
      this.searchForm.name = '';
      this.searchForm.author = '';
      this.$nextTick(() => {
        this.query();
      })
    },
  }
}
</script>
<style scoped lang="less">
@padding: 25px;
.tableStyle {
  margin-top: 15px;
}
.inline {
  display: inline-block;
}
.comWidth {
  width: 200px;
}

.tableComStyle {
  height: 100%;
  background: #f5f5f5;
  padding: 15px;
  // min-height: 1000px;
  .searchFormStyle {
    text-align: left;
    clear: both;
    background-color: #fff;
    padding: @padding;
    min-height: 70px;
    font-size: 0;
    .btnGroupStyle{
      button{
        margin-right: 6px;
      }
    }
    /deep/ .ivu-form-item{
      margin-bottom: 0;
    }
    /deep/ .ivu-form-item-label {
      font-weight: bold;
      display: inline-block;
    }

    /deep/.ivu-form-item-content {
      display: inline-block;
    }
  }
   .tableGroupStyle {
      background: #fff;
      padding: @padding;
      margin-top: 15px;
      .toolBarStyle {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .pageStyle {
        margin-top: 20px;
        width: 100%;
        text-align: right;
      }
  }
}
</style>