<template>
  <el-dialog title="关联详情" width="610px" :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="referCode" label="关联ID"></el-table-column>
      <el-table-column prop="referName" label="关联名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="type" label="类型">
        <template slot-scope="{ row }">
          {{ row.type == 1 ? '员工活码' : '引流链接' }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="{ row }">
          <div class="status-class">
            <span :class="['state-point', logStatusClass[row.status]]">{{ relationSatusMap[row.status] }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" width="80">
        <template slot-scope="{ row }">
          <el-button type="text" @click="$emit('goLinkDetail', row)">查看</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 { welcomeRelationList } from '@/api/actCode';
import { _debounce } from '@/common/js/public';
export default {
  data() {
    return {
      form: {
        searchContent: '',
        welcomeId: '',
        pageNum: 1,
        pageSize: 20
      },
      loading: false,
      total: 0,
      tableData: [],
      relationSatusMap: {
        1: '启用',
        0: '删除',
        2: '废弃'
      },
      logStatusClass: { 1: 'state-point-success', 0: 'state-point-error', 2: 'state-point-warning' }
    };
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    id(val) {
      if (val) {
        this.form = { searchContent: '', welcomeId: val, pageNum: 1, pageSize: 20 };
        this.getList();
      }
    }
  },
  methods: {
    toInput: _debounce(function(e, value) {
      this.getList();
    }, 500),
    getList() {
      this.loading = true;
      welcomeRelationList(this.form)
        .then(res => {
          const { totalCount, result } = res.data.result;
          if (result) {
            this.total = totalCount;
            this.tableData = result;
          }
          //   let obj = { referCode: 'HM01421002535046766593', referId: '421002535046766593', referName: '吴苏兰', relationId: '421002538737754114', status: 1, type: 2, typeText: null };
          //   for (let i = 0; i < 50; i++) {
          //     this.tableData.push(obj);
          //   }
          //   this.total = 50;
        })
        .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>
