<template>
    <div>
        <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            v-if="isReceive"
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAddVisit"
            v-hasPermi="['crm:customer:addVisit']"
          >写跟进</el-button>
        </el-col>
        
      </el-row>
        <el-table border v-loading="loading" :data="customerVisitList" >
            <el-table-column label="ID" align="center" prop="visitId" />
            <el-table-column label="所属公司" align="center" prop="companyName" />
            <el-table-column label="所属员工" align="center" prop="companyUserNickName" />
            <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"
        />
        <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body> 
        <add-visit @closeVisit="closeVisit"   ref="addVisit" />
        </el-dialog>
    </div>
</template>
  
<script>
import addVisit from '../components/addVisit.vue';
    import { listCustomerVisit, getCustomerVisit, delCustomerVisit, addCustomerVisit, updateCustomerVisit, exportCustomerVisit } from "@/api/crm/customerVisit";
    export default {
        components: {addVisit },
        name: "customerVisit",
        data() {
            return {
                isReceive:false,
                customerUserStatusOptions:[],
                customerId:null,
                open:false,
                title:"",
                typeOptions:[],
                // 遮罩层
                loading: true,
                // 总条数
                total: 0,
                // 跟进表格数据
                customerVisitList: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    customerId: null,
                },
            };
        },
        created() {
            this.getDicts("crm_customer_visit_type").then((response) => {
                this.typeOptions = response.data;
            });
            this.getDicts("crm_customer_user_status").then((response) => {
                this.customerUserStatusOptions = response.data;
            });
        },
        methods: {
            closeVisit(){
                this.open=false;
            },
            handleAddVisit(){
                this.open=true;
                this.title="写跟进";
                setTimeout(() => {
                    this.$refs.addVisit.reset(this.customerId);
                }, 200);
            },
            parsePhoto(photos){
                var imgs=[];
                if(photos!=null){
                imgs=photos.split(",");
                }
                return imgs;
            },
            getData(customerId,isReceive){
                this.customerId=customerId;
                this.isReceive=isReceive;
                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>
 