<template>
    <el-dialog v-model="detailDialog" center width="1000" class="list-dialog" title="跟进详情">
        <div class="form_area flex" v-loading='detailLoading'>
            <div class="form_item">
                <div class="flex">
                    <div class="label">跟进方式</div>
                    <div class="value">{{ followDetailData.followUpTypeName }}</div>
                </div>
                <div class="flex">
                    <div class="label">跟进时间</div>
                    <div class="value">{{ followDetailData.followUpTime }}</div>
                </div>
                <div class="flex">
                    <div class="label">跟进主题</div>
                    <div class="value">{{ followDetailData.subject }}</div>
                </div>
                <div class="flex">
                    <div class="label">跟进描述</div>
                    <div class="value desc" v-html="followDetailData.content"></div>
                </div>
                <!-- <div class="flex">
                    <div class="label">跟进类型</div>
                    <div class="value">{{ followDetailData.resourceTypeName }}跟进</div>
                </div> -->
                <div class="flex">
                    <div class="label">{{followDetailData.resourceType =='11'?'线索名称':'客户名称'}}</div>
                    <div class="value">{{ followDetailData.resourceType === '11'?followDetailData.resourceName:followDetailData.customerName }}</div>
                </div>
                <div class="flex" v-if="followDetailData.resourceType === '30'||followDetailData.resourceType === '40'">
                    <div class="label">业务名称</div>
                    <div class="value">{{ followDetailData.resourceName }}</div>
                </div>
                <div class="flex" v-if="followDetailData.resourceType != '40'">
                    <div class="label">{{ followDetailData.resourceType === '30' ? '商机阶段' : (followDetailData.resourceType === '11'?'线索状态':'客户状态') }}</div>
                    <div class="value">{{ (followDetailData.resourceType === '30'||followDetailData.resourceType === '11') ? followDetailData.resourceStageName :
                        followDetailData.customerStatusName }}</div>
                </div>
                <div class="flex">
                    <div class="label">跟进目的</div>
                    <div class="value">{{ followDetailData.objectiveName }}</div>
                </div>
                <div class="flex">
                    <div class="label">跟进方向</div>
                    <div class="value">{{ followDetailData.inOutMarkName }}</div>
                </div>
                <div class="flex">
                    <div class="label">关联任务</div>
                    <div class="value">{{ followDetailData.taskContent }}</div>
                </div>
                <div class="flex" v-if="followDetailData.resourceType!='11'">
                    <div class="label">联系人</div>
                    <div class="value">{{followDetailData.liaisonName}}</div>
                </div>
                <div class="flex">
                    <div class="label">相关附件</div>
                    <div class="value flex" style="flex-direction: column;">
                        <span v-if="followDetailData.resourceList.length==0">--</span>
                        <a v-else style="color:#1874FF" @click="downloadFile(item)"  v-for="item in followDetailData.resourceList">{{ item.resourceName }}</a>
                    </div>
                </div>
                <div class="flex">
                    <div class="label">评论数量</div>
                    <div class="value">{{followDetailData.commentCount}}</div>
                </div>
                <div class="flex">
                    <div class="label">跟进人员</div>
                    <div class="value">{{followDetailData.followUpMemberName}}</div>
                </div>
                <div class="flex">
                    <div class="label">提醒谁看</div>
                    <div class="value">{{followDetailData.remindUserNames}}</div>
                </div>
                <div class="flex">
                    <div class="label">创建时间</div>
                    <div class="value">{{followDetailData.createTime}}</div>
                </div>
            </div>
        </div>
        <div style='padding-top:15px;text-align: right'>
            <el-button type="primary" @click="openDialog()" v-if="handleBtnRole('edit')">编辑跟进</el-button>
        </div>
    </el-dialog>
    <AddFollow ref="edit"></AddFollow>
</template>

<script setup lang="ts">
import { getFollow } from '@/api/customer/follow';
import { FollowVO } from '@/api/customer/follow/types';
import AddFollow from '@/components/Follow/add.vue'
import auth from "@/plugins/auth";
import {formateNullFieldData} from "@/api/customer";
    const detailDialog = ref(false)
    const btnRole = ref()
    const open = (data:any) => {
        followDetail(data.id)
        btnRole.value = data.btnRole
    }

    // 按钮权限判断
    const handleBtnRole = (type: string) => {
        let detailRole = btnRole.value.find(a => a.type == type)
        if(detailRole){
            return auth.hasPermi(detailRole.hasPermi)
        }
        return false
    }
    const detailLoading = ref(false)
    const followDetailData = ref<FollowVO>()
    const followDetail = (id:any) =>{
        detailLoading.value = true
        getFollow(id).then(res => {
            detailLoading.value = false
            if (res.success) {
                followDetailData.value = formateNullFieldData(res.result)
                detailDialog.value=true
            }
        })
    }
    const edit = ref()
    const openDialog = () => {
        let propData = {
            type:'edit',
            id:followDetailData.value.id,
            customerId: followDetailData.value.customerId
        }
        edit.value.open(propData)
    }
    const downloadFile = (item: any) => {
        const url = item.resourceUrl;
        let xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = function() {
            let blob = new Blob([xhr.response]);
            let downloadUrl = URL.createObjectURL(blob);
            let link = document.createElement('a');
            link.href = downloadUrl;
            link.download = item.resourceName;
            link.click();
            URL.revokeObjectURL(downloadUrl);
        };
        xhr.send();
    }
    defineExpose({
        open
    })
</script>
<style lang="scss" scoped>
.form_area .form_item .label, .form_area .form_item{
    .value {
        padding: 12px 19px !important;
        min-height: 0;
    }
    .desc{
        :deep(img){
            max-width: 100%;
            height: auto !important;
        }
        :deep(ol){
            padding-inline-start: 20px;
            margin-block-end: 0;
            margin-block-start: 0;
            li{
                list-style: decimal !important;
            }
        }
        p{
            line-height: 32px;
        }
        :deep(ul){
            padding-inline-start: 20px;
            margin-block-end: 0;
            margin-block-start: 0;
            li{
                list-style: disc !important;
            }
        }
        :deep(a){
            text-decoration: underline;
            color: #1874FF;
        }
    }
}
</style>
