<template>
    <div>
        <el-table v-loading="loading" :data="customerVisitList" >
            <el-table-column label="ID" align="center" prop="visitId" />
            <el-table-column label="客户编码" align="center" prop="customerCode" />
            <el-table-column label="客户名称" align="center" prop="customerName" />
            <el-table-column label="跟进类型" width="150" align="center" prop="visitType" >
                <template slot-scope="scope">
                    <el-tag prop="status" v-for="(item, index) in typeOptions"    v-if="scope.row.visitType==item.dictValue">{{item.dictLabel}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="跟进阶段" width="150" align="center" prop="customerUserStatus" >
                <template slot-scope="scope">
                    <el-tag prop="status" v-for="(item, index) in customerUserStatusOptions"    v-if="scope.row.customerUserStatus==item.dictValue">{{item.dictLabel}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="跟进内容" align="center" prop="content" />
            <el-table-column label="跟进照片" align="center" prop="photos" width="200px">
            <template slot-scope="scope">
              <el-image  v-for="(img) in parsePhoto(scope.row.photos)"
                style="width: 30px; height: 30px;margin-right:5px"
                :src="img" 
                :preview-src-list="parsePhoto(scope.row.photos)">
              </el-image>
            </template>
          </el-table-column>
            <el-table-column label="跟进时间" align="center" prop="createTime" />
            <el-table-column label="下次联系时间" align="center" prop="nextTime" width="180">
                <template slot-scope="scope">
                <span>{{ parseTime(scope.row.nextTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
        </el-table>
        <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
        />

    </div>
</template>
  
<script>
    import { listCustomerVisit, getCustomerVisit, delCustomerVisit, addCustomerVisit, updateCustomerVisit, exportCustomerVisit } from "@/api/crm/customerVisit";
    export default {
        name: "customerVisit",
        data() {
            return {
                customerUserStatusOptions:[],
                typeOptions:[],
                // 遮罩层
                loading: true,
                // 总条数
                total: 0,
                // 跟进表格数据
                customerVisitList: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    customerId: null,
                },
            };
        },
        created() {
            this.getDicts("sys_crm_customer_visit_type").then((response) => {
                this.typeOptions = response.data;
            });
            this.getDicts("sys_crm_customer_user_status").then((response) => {
                this.customerUserStatusOptions = response.data;
            });
        },
        methods: {
            parsePhoto(photos){
                var imgs=[];
                if(photos!=null){
                imgs=photos.split(",");
                }
                return imgs;
            },
            getData(customerId){
                this.queryParams.customerId=customerId;
                this.queryParams.pageNum=1;
                this.getList();
            },
            getList() {
                this.loading = true;
                listCustomerVisit(this.queryParams).then(response => {
                    this.customerVisitList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
        }
    };
</script>
<style lang="scss" scoped> 
</style>
 