<template>
    <!-- 共享客户列表-备注 -->
    <!-- 逻辑与客户列表-备注基本相同，将权限判断做成了可配置项 -->
    <el-dialog 
        :visible.sync="isRemarkLook" 
        :close-on-click-modal="false" 
        :modal-append-to-body="true"
        :append-to-body="true"
        @close="closeDia" width="800px" v-dialogDrag center>
        <div slot="title" style="display:flex;alignItems:center;">
            <img :src="$icons.auth" style="color:#fff;width:16px;height:16px;marginRight:5px;">
            <span style="fontSize:16px;">备注</span>
        </div>
        <template>
            <div v-if="Role!=='admin'">
                <el-input type="textarea" :rows="3" placeholder="请输入文字" v-model="lookRemarkTextarea">
                </el-input>
                <div class="look-remark-commit" @click="lookRemarkAdd">保存</div>
            </div>
            <el-table :data="lookRemarkList" border max-height="300"  v-loading="tableLoading"
                style="width: 100%; margin-top: 20px;margin-bottom: 20px">
                <el-table-column label="备注内容" key="Remark" align="center">
                    <template slot-scope="scope">{{scope.row.Remark}}</template>
                </el-table-column>
                <el-table-column label="客户类型" align="center" key="ProductName"
                    v-if="lookRemarkItem.IsShared">
                    <template slot-scope="scope">{{scope.row.ProductName}}</template>
                </el-table-column>
                <el-table-column label="创建时间" key="CreateTime" align="center">
                    <template slot-scope="scope">{{scope.row.CreateTime}}</template>
                </el-table-column>
                <el-table-column label="操作" align="center" v-if="Role!=='admin'">
                    <template slot-scope="{row}">
                        <el-button type="text" size="small" style="color:red;" v-if="row.ButtonDel"
                            @click="deleteRecord(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <div style="padding:20px 0;"></div>
    </el-dialog>
</template>

<script>
import { customInterence } from '@/api/api.js'
export default {
    props:{
        isRemarkLook:{
            type:Boolean,
            default:false
        },
        lookRemarkItem:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        canEdit:{//是否可新增备注
            type:Boolean,
            default:true
        }
    },
    data() {
        return {
            lookRemarkList:[],//备注列表
            lookRemarkTextarea:'',
            tableLoading:false,
        };
    },
    watch:{
        isRemarkLook(newval){
            if(newval){
                this.lookRemarkTextarea=''
                this.getRemarkList()
            }
        }
    },
    computed:{
        Role(){
            return localStorage.getItem('Role') || ''
        }
    },
    methods: {
        //新增备注
        lookRemarkAdd(){
            if(!this.lookRemarkTextarea.length){
                return this.$message.warning("请输入备注内容")
            }
            customInterence.addCustomRemark({
                CompanyId:this.lookRemarkItem.CompanyId,
                Remark:this.lookRemarkTextarea
            }).then(res=>{
                if(res.Ret!==200) return 
                this.$message.success('保存成功')
                this.lookRemarkTextarea=''
                this.getRemarkList()
            })
        },
        //获取备注列表
        getRemarkList(){
            this.tableLoading = true
            customInterence.lookRemarkAuth({
                CompanyId:this.lookRemarkItem.CompanyId
            }).then(res=>{
                if(res.Ret!==200) return 
                this.lookRemarkList = res.Data||[]
                this.tableLoading = false
            })
        },
        //删除备注
        deleteRecord(data){
            this.$confirm('备注删除后不可恢复，确认删除吗？','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type:'warning',
                appendToBody:false
            }).then(()=>{
                customInterence.deleteRemark({
                    RemarkId:data.RemarkId
                }).then(res=>{
                    if(res.Ret!==200) return 
                    this.$message.success("删除成功")
                    this.getRemarkList()
                })
            })
        },
        closeDia(){
            this.$emit('close')
        }
    },
};
</script>

<style scoped lang="scss">
.look-remark-commit{
    width: 426px;
    height: 41px;
    background: #409EFF;
    margin:  30px auto;
    text-align: center;
    line-height: 41px;
    color: #fff;
    box-shadow: 0px 2px 6px 1px rgba(64, 158, 255, 0.05);
    border-radius: 4px 4px 4px 4px;
    cursor: pointer;
}
</style>