<template>
  <el-dialog
    title="跟进列表"
    :visible.sync="visible"
    :before-close="handleClose"
    :multiple="true"
    :centered="false"
    :close-on-click-modal="false"
    top="2vh"
    :close-on-press-escape="false"
    append-to-body
    width="70%"
  >
    <el-card shadow="never">
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        row-key="id"
        :selection.sync="selection"
        height="calc(100vh - 350px)"
        class="dict-table"
        @cell-click="cellClick"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="openEdit('add', {})"
          >
            新建
          </el-button>
          <el-button
            size="small"
            type="danger"
            el-icon-delete
            class="ele-btn-icon"
            @click="allDelBtn"
            :disabled="selection?.length === 0"
          >
            批量删除
          </el-button>
        </template>
        <template v-slot:content="{ row }">
          <el-link type="primary" :underline="false" @click="openDetail(row)">
            {{ row.content }}</el-link
          >
        </template>
        <template v-slot:files="{ row }">
          <div v-if="row.files && row.files?.length">
            <el-link
              v-for="link in row.files"
              :key="link.id"
              type="primary"
              :underline="false"
              @click="downloadFile(link)"
            >
              {{ link.name }}</el-link
            >
          </div>
        </template>

        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="openEdit('edit', row)"
          >
            修改
          </el-link>

          <el-popconfirm
            class="ele-action"
            title="确定要删除此信息吗？"
            @confirm="remove(row)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-card>
    <AddFollowDialog ref="addFollowDialogRef" @done="reload"></AddFollowDialog>
    <followDetailDialog ref="contactDetailDialogRef"></followDetailDialog>
    <!-- 多选删除弹窗 -->
    <pop-el-modal
      :popVisible.sync="delVisible"
      content="是否确定删除？"
      @done="commitBtn"
    />
  </el-dialog>
</template>

<script>
  import AddFollowDialog from './addFollowDialog.vue';
  import popElModal from '@/components/pop-el-modal';
  import followDetailDialog from './followDetailDialog.vue';
  import { getFile } from '@/api/system/file';

  import {
    getTableList,
    deleteInformation
  } from '@/api/saleManage/businessFollow';
  export default {
    components: {
      AddFollowDialog,
      followDetailDialog,
      popElModal
    },
    data() {
      return {
        selection: [],
        current: {}, //当前选择的信息
        visible: false,
        delVisible: false,
        columns: [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center'
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'content',
            label: '跟进内容',
            slot: 'content',
            showOverflowTooltip: true,
            minWidth: 200
          },
          {
            prop: 'stageName',
            label: '跟进阶段',
            slot: 'stageName',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'agreement',
            label: '达成共识',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'linkName',
            label: '客户联系人名称',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'nextPlan',
            label: '下一步计划',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'followupTime',
            label: '跟进时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (_row, _column, cellValue) => {
              return this.$util.toDateString(cellValue);
            }
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (_row, _column, cellValue) => {
              return this.$util.toDateString(cellValue);
            }
          },
          {
            prop: 'files',
            label: '附件',
            align: 'center',
            slot: 'files',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 230,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ],

        radio: null
      };
    },

    watch: {
      visible(visible) {
        if (visible) {
          this.$nextTick(() => {
            this.reload();
          });
        }
      }
    },
    methods: {
      open(item) {
        if (item) {
          this.current = item;
        }
        this.visible = true;
      },
      openEdit(type, row) {
        this.$refs.addFollowDialogRef.open(type, row, this.current);
        this.$refs.addFollowDialogRef.$refs.form &&
          this.$refs.addFollowDialogRef.$refs.form.clearValidate();
      },
      downloadFile(file) {
        getFile({ objectName: file.storePath }, file.name);
      },
      //查看详情
      openDetail(row) {
        this.$refs.contactDetailDialogRef.open(row);
      },
      //批量删除
      allDelBtn() {
        if (this.selection?.length === 0) return;
        this.delVisible = true;
      },
      commitBtn() {
        console.log(this.selection);
        const dataId = this.selection.map((v) => v.id);
        deleteInformation(dataId).then((res) => {
          this.$message.success('删除成功！');
          this.reload();
        });
      },
      remove(row) {
        deleteInformation([row.id]).then((res) => {
          this.$message.success('删除成功！');
          this.reload();
        });
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return getTableList({
          pageNum: page,
          size: limit,
          opportunityId: this.current.id,
          ...where
        });
      },

      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ pageNum: 1, where: where });
      },

      handleNodeClick(data, node) {
        this.curNodeData = data;
        this.reload({ groupId: data.id });
      },

      // 单击获取id
      cellClick(row) {
        // this.current = row
        // this.radio = row.id
      },
      handleClose() {
        this.visible = false;
        this.current = null;
        this.radio = '';
      }
    }
  };
</script>

<style lang="scss" scoped>
  .tree_col {
    border: 1px solid #eee;
    padding: 10px 0;
    box-sizing: border-box;
    height: 500px;
    overflow: auto;
  }

  .table_col {
    padding-left: 10px;

    ::v-deep .el-table th.el-table__cell {
      background: #f2f2f2;
    }
  }

  .pagination {
    text-align: right;
    padding: 10px 0;
  }

  .btns {
    text-align: center;
    padding: 10px 0;
  }

  .topsearch {
    margin-bottom: 15px;
  }
</style>
