<template>
    <el-dialog
        :visible.sync="isShareRecodeDialogShow"
        :close-on-click-modal="false"
        :modal-append-to-body="true"
        :append-to-body="true"
        :title="`${customInfo.CompanyName}——沟通记录`"
        class="share-list-dialog"
        @close="closeDia"
    >
        <div class="dialog-cotainer">
            <div class="add-box" v-if="allowEdit">
                <p class="label">沟通描述</p>
                <el-input
                    type="textarea"
                    placeholder="请输入沟通描述"
                    v-model="recordContent"
                    :rows="3"
                />
                <div v-if="allowEdit" style="margin-top:10px">
                    <el-button type="primary" @click="addNewRecord">保存</el-button>
                </div>
            </div>
            <div class="table-box">
                <p class="label" >历史沟通</p>
                <el-table 
                    border 
                    :data="recordList"
                    :row-class-name="tableRowClassName"
                    v-loading="tableLoading">
                    <el-table-column v-for="column in tableColumns" :key="column.key"
                        :prop="column.key"
                        :label="column.label"
                        :min-width="column.minWidth"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column 
                        v-if="allowEdit"
                        label="操作"
                        align="center"
                        width="120"
                    >
                    <template slot-scope="{row,$index}">
                        <el-button type="text" size="small" style="color:#409eff;"
                            @click="markRecord(row,$index)"
                        >{{row.Mark?'取消标记':'标记'}}</el-button>
                        <el-button type="text" size="small" style="color:red;"
                            @click="deleteRecord(row)"
                        >删除</el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="foot-container" v-if="!allowEdit">
            <el-button type="primary" @click="closeDia">知道了</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { customInterence } from '@/api/api.js'
export default {
    props:{
        isShareRecodeDialogShow:{
            type:Boolean,
            default:false
        },
        allowEdit:{ //是否允许编辑历史记录
            type:Boolean,
            default:true
        },
        customInfo:{ //客户信息
            type:Object,
            default:()=>{return {}}
        }
    },
    data() {
        return {
            tableColumns:[{
                label:'沟通描述',
                key:'Content',
                minWidth:350
            },{
                label:'创建人',
                key:'SysAdminName'
            },{
                label:'创建时间',
                key:'CreateTime',
                minWidth:150
            }],
            recordContent:'',
            recordList:[],
            tableLoading:false,
        };
    },
    watch:{
        isShareRecodeDialogShow(val){
            if(val){
                this.recordContent=''
                this.getRecordList()
            }
        }
    },
    methods: {
        getRecordList(){
            this.tableLoading = true
            console.log(this.customInfo)

            let CompanyType = this.$route.path==='/overseasCustomList' ? this.customInfo.Source : 2;
            customInterence.getRecordList({
                CompanyId:this.customInfo.CompanyId,
                CompanyType
            }).then(res=>{
                if(res.Ret!==200) return 
                this.recordList = res.Data
                this.tableLoading = false
            })
        },
        tableRowClassName({row}){
            if(row.Mark){
                return 'mark-row'
            }
            return ''
        },
        addNewRecord(){
            if(!this.recordContent.length){
                this.$message.warning('请输入沟通描述')
                return
            }
            let CompanyType = this.$route.path==='/overseasCustomList' ? this.customInfo.Source : 2;
            customInterence.addRecord({
                CompanyId:this.customInfo.CompanyId,
                Content:this.recordContent,
                CompanyType
            }).then(res=>{
                if(res.Ret!==200) return 
                this.$message.success('添加成功')
                this.recordContent = ''
                this.getRecordList()
            })
        },
        deleteRecord(data){
            this.$confirm('沟通记录删除后不可恢复，确认删除吗？','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type:'warning',
                appendToBody:false
            }).then(()=>{
                //删除
                customInterence.deleteRecord({
                    CompanyServiceRecordId:data.CompanyServiceRecordId
                }).then(res=>{
                    if(res.Ret!==200) return 
                    this.$message.success('删除成功')
                    this.getRecordList()
                })
            })
        },
        markRecord(data,index){
            customInterence.markRecord({
                CompanyServiceRecordId:data.CompanyServiceRecordId,
                Status:data.Mark?0:1
            }).then(res=>{
                if(res.Ret!==200) return 
                this.$message.success(`${data.Mark?'取消标记':'标记'}成功`)
                this.getRecordList()
            })

        },
        closeDia(){
            this.$emit('close')
        }
    },
};
</script>

<style  lang="scss">
.share-list-dialog{
    .dialog-cotainer{
        padding:10px 40px;
        .label{
            margin-bottom: 10px;
        }
        .add-box{
            margin-bottom: 30px;
        }
        .table-box{
            .el-table{
                max-height:300px;
                overflow-y: auto !important;
                /* border-bottom: 1px solid #EBEEF5; */
                &::before{
                    height: 0;
                }
                .el-table__empty-block{
                    border-bottom: 1px solid #EBEEF5;
                }
                .mark-row{
                    background: #FEF0F0;
                    &:hover>td{
                        background-color: #FEF0F0 !important;
                    }
                }
            }
        }
    }
    .foot-container{
        text-align: center;
        padding: 40px 0;
    }
}
</style>
