<template>
  <el-dialog title="关联详情" width="600px" :visible.sync="dialogVisible" @close="$emit('update:dialogVisible', false)">
    <div class="daily-set-content boder-box">
      <div class="flex flex-space-between m-b-16">
        <el-input placeholder="请输入链接名称/ID" class="w-260" v-model="form.searchContent" @keyup.native="value => toInput(value, searchInput)" clearable @clear="getList"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
      </div>
    </div>
    <el-table class="select-table" ref="multipleTable" v-loading="loading" :data="tableData" height="450" tooltip-effect="dark">
      <el-table-column prop="releationId" label="链接ID" show-overflow-tooltip></el-table-column>
      <el-table-column prop="referName" label="链接名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="" label="操作" width="80">
        <template slot-scope="{ row }">
          <el-button type="text" @click="$emit('goLinkDetail', row.referId)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="text-right margin-pg" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size.sync="form.pageSize" :current-page.sync="form.pageNum" layout="prev, pager, next" :total="total"> </el-pagination>
  </el-dialog>
</template>

<script>
import { guidePageRelation } from '@/api/actCode';
import { _debounce } from '@/common/js/public';
export default {
  data() {
    return {
      form: {
        searchContent: '',
        pageId: '',
        pageNum: 1,
        pageSize: 20
      },
      loading: false,
      total: 0,
      tableData: []
    };
  },
  props: {
    pageId: {
      type: String,
      default: ''
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    pageId(val) {
      if (val) {
        this.form = { searchContent: '', pageId: val, pageNum: 1, pageSize: 20 };
        this.getList();
      }
    }
  },
  methods: {
    toInput: _debounce(function(e, value) {
      this.getList();
    }, 500),
    getList() {
      this.loading = true;
      guidePageRelation(this.form)
        .then(res => {
          const { totalCount, result } = res.data.result;
          if (result) {
            this.total = totalCount;
            this.tableData = result;
          }
        })
        .finally(_ => {
          this.loading = false;
        });
    },
    handleSizeChange(val) {
      this.form.pageNum = 1;
      this.form.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.form.pageNum = val;
      this.getList();
    }
  }
};
</script>

<style type="text/scss" lang="scss" scoped>
.margin-pg {
  margin: 20px 0 0 0;
}
</style>
