<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户跟踪查询</title>
    <meta name="author" content="JIAL">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="HandheldFriendly" content="true">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="icon" href="/static/image/JNlogo.png" type="image/x-icon">
    <link rel="stylesheet" href="/plugins/element-ui/index.css">
    <!-- import CSS -->
    <link rel="stylesheet" href="/static/bizquery/css/index.css">
</head>
<body>
<div class="container" id="index-app">
    <div class="center-container">
        <div class="table-box">
            <span th:text="${employeeId}" style="display: none" ref="employeeIdSpan"></span>
            <div>正在访问客户跟踪查询界面，登入的用户为: <span th:text="${employeeName}"></span></div>
            <h3>该页面可以根据客户名称查询该客户与公司发生业务的相关信息，方便各位判断是否可以作为新客户进行开发。</h3>
            <el-form >
                <el-form-item>
                    <el-input v-model="var1" placeholder="请输入客户名称" maxlength="20" type="text" auto-complete="off" clearable>
                    </el-input>
                    <el-select v-model="timeValue" placeholder="请选择时间">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button type="primary" @click="queryList">点击查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table
                :data="tableData"
                border
                :row-style="{height: '0px'}"
                :cell-style="{padding: '2px 0px 1px 0px', 'text-align': 'left'}"
                :header-cell-style="{ background: '#eef1f6', color: '#606266', 'text-align': 'left' }">
            <el-table-column
                    prop="kunnr"
                    label="客户编号">
            </el-table-column>
            <el-table-column
                    prop="name1"
                    label="客户名称">
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-dialog title="详细情况" :visible.sync="dialogTableVisible">
        <template>
            <el-descriptions :column="1" :label-style="LS" border>
                <el-descriptions-item label="最近下单日期">{{detail.latestOrderDate}}</el-descriptions-item>
                <el-descriptions-item label="最近发货日期">{{detail.latestShippingDate}}</el-descriptions-item>
                <el-descriptions-item label="最近报价日期">{{detail.latestQuotationDate}}</el-descriptions-item>
                <el-descriptions-item label="最近合同日期" >{{detail.latestContractDate}}</el-descriptions-item>
                <el-descriptions-item label="最近投标日期" >{{detail.latestBidDate}}</el-descriptions-item>
                <el-descriptions-item label="目前在跟踪的业务员数量" >{{detail.salespersonCount}}</el-descriptions-item>
                <el-descriptions-item label="参保人数" >{{detail.insuredCount}}</el-descriptions-item>
            </el-descriptions>
        </template>
    </el-dialog>
</div>


<script src="/plugins/vue/vue.js"></script>
<script src="/plugins/element-ui/index.js"></script>
<script src="/plugins/calendar/calendar.js"></script>
<script src="/plugins/axios/axios.min.js"></script>
<script src="/plugins/axios/request.js"></script>
<script src="/static/bizquery/js/index.js"></script>

<script>
    new Vue({
        el: '#index-app',
        data() {
            return {
                var1 : "",
                options: [
                    {value: '1', label: '一年以内'},
                    {value: '2', label: '两年以内'},
                    {value: '3', label: '三年以内'},
                ],
                timeValue: '1',
                tableData: null,
                gridData: "",
                dialogTableVisible: false,
                LS: {
                    'color': '#000',
                    'text-align': 'left',
                    'font-weight': '600',
                    'height': '40px',
                    'background-color': '#d6dbe1',
                    'min-width' : '50px',
                    'width': '150px',
                    'word-break': 'keep-all',
                    'whiteSpace': 'pre-wrap'
                },
                detail: {
                    latestOrderDate: '',
                    latestShippingDate: '',
                    salespersonCount: '',
                    latestQuotationDate: '',
                    insuredCount: '',
                    latestContractDate: '',
                    latestBidDate: ''

                },
                employeeId: /*[[${employeeId}]]*/ ''

            }

        },
        computed: {

        },
        created() {

        },
        mounted() {

        },
        methods: {
            async init () {

            },
            handleClick(row) {
                console.log(row.kunnr)
                console.log(row.name1)
                const employeeId = this.$refs.employeeIdSpan.innerText;
                const params = {
                    employeeId: employeeId,
                    name : row.name1,
                    kunnr : row.kunnr,
                    time : this.timeValue
                }
                console.log(params)
                queryDetailByParams(params).then(res => {
                    if (String(res.code) === '1') {
                        console.log(res.data)
                        this.detail.latestOrderDate = res.data.latestOrderDate !== '0' ? res.data.latestOrderDate : '无数据';
                        this.detail.salespersonCount = res.data.salespersonCount !== '0' ? res.data.salespersonCount : '无数据';
                        this.detail.latestQuotationDate = res.data.latestQuotationDate !== '0' ? res.data.latestQuotationDate : '无数据';
                        this.detail.latestShippingDate = res.data.latestShippingDate !== '0' ? res.data.latestShippingDate : '无数据';
                        this.detail.latestContractDate = res.data.latestContractDate !== '0' ? res.data.latestContractDate : '无数据';
                        this.detail.latestBidDate = res.data.latestBidDate !== '0' ? res.data.latestBidDate : '无数据';
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
                queryInsuredCountByName(params).then(res => {
                    if (String(res.code) === '1') {
                        this.detail.insuredCount = res.data.insuredCount !== '' ? res.data.insuredCount : '无数据';
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
                this.dialogTableVisible = true
            },

            queryList() {
                console.log("开始调用查询")
                const name = this.var1
                console.log("名称+" + name)
                const params = {
                    name : name
                }
                console.log(params)

                if(this.var1 !== "") {
                    queryListByName(params).then(res => {
                        if (String(res.code) === '1') {
                            console.log(res.data)
                            this.tableData = res.data || []
                        } else if (String(res.code) === '0') {
                            this.$message({
                                showClose: true,
                                message: res.msg,
                                type: 'error'
                            });
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                }else {
                    this.$message('请输入客户名称进行查询');
                    this.tableData = ""
                }
            }
        }
    })
</script>
</body>
</html>