<template>
  <div>
    <search-table @search="reload"></search-table>
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      height="calc(100vh - 365px)"
      full-height="calc(100vh - 116px)"
      tool-class="ele-toolbar-form"
      :selection.sync="selection"
      :page-size="20"
      @columns-change="handleColumnChange"
      :cache-key="cacheKeyUrl + queryType"
      :initLoad="false"
    >
      <template v-slot:followupCount="{ row }">
        <el-link
          type="primary"
          :underline="false"
          @click="handleAddOrEdit(row, 'view')"
        >
          {{ row.followupCount }}
        </el-link>
      </template>
    </ele-pro-table>

    <viewDialog ref="viewDialogRef"></viewDialog>
  </div>
</template>

<script>
  import tabMixins from '@/mixins/tableColumnsMixin';
  import dictMixins from '@/mixins/dictMixins';
  import viewDialog from './viewDialog.vue';
  import searchTable from './searchTable.vue';
  import { groupByContact } from '@/api/saleManage/contact.js';

  export default {
    mixins: [dictMixins, tabMixins],
    components: {
      searchTable,
      viewDialog
    },
    props: {
      queryType: {
        default: 0,
        type: Number
      }
    },
    data() {
      return {
        // 加载状态
        loading: false,
        cacheKeyUrl: 'eos-be72e790-followList-myList',
        columnsVersion: 1
      };
    },
    computed: {
      columns() {
        // 当columnsVersion变化时会重新计算,用作更新列配置
        const version = this.columnsVersion;
        return [
          {
            width: 60,
            label: '序号',
            type: 'index',
            columnKey: 'index',
            align: 'center'
          },
          {
            minWidth: 200,
            prop: 'contactName',
            label: '客户名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            minWidth: 150,
            prop: 'userName',
            label: '负责人',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            minWidth: 150,
            prop: 'deptName',
            label: '负责人部门',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            minWidth: 150,
            prop: 'followupCount',
            label: '跟进次数',
            align: 'center',
            slot: 'followupCount',
            showOverflowTooltip: true
          },
          {
            minWidth: 200,
            prop: 'beginTime',
            label: '开始跟进时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            minWidth: 200,
            prop: 'lastTime',
            label: '最近一次跟进时间',
            align: 'center',
            showOverflowTooltip: true
          }
        ];
      }
    },
    created() {},
    methods: {
      //新增、修改
      handleAddOrEdit(row = {}) {
        this.$nextTick(() => {
          this.$refs.viewDialogRef.open({
            contactId: row.contactId,
            deptIds: row.deptIds,
            beginTime: row.beginTime,
            endTime: row.endTime,
            deptId:row.deptId,
            userId:row.userId
          });
        });
      },

      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return groupByContact({
          pageNum: page,
          size: limit,
          ...where,
          queryType: this.queryType
        });
      },

      /* 刷新表格 */
      reload(where = {}) {
        this.$refs.table.reload({ page: 1, where });
      }
    }
  };
</script>

<style lang="scss" scoped>
  :deep(.el-link--inner) {
    margin-left: 0px !important;
  }

  .sys-organization-list {
    height: calc(100vh - 264px);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    overflow: auto;
  }

  .sys-organization-list :deep(.el-tree-node__content) {
    height: 40px;

    & > .el-tree-node__expand-icon {
      margin-left: 10px;
    }
  }
</style>
