@extends('admin.master')
@section('style')
    <link href="{{ asset('data/assets/css/bootstrap-datetimepicker.css') }}" rel="stylesheet">
    <link href="{{ asset('data/assets/css/element-ui.css') }}" rel="stylesheet">
@endsection
@section('top')
    <div class="top-breadcrumb">
        <h5>海关数据</h5>
    </div>
@endsection

@section('content')
    <div class="customs-box">
        <div class="customs-box_title">
            <p class="p1"><span>海关</span>数据</p>
            <p class="p2">全球贸易数据分析，涉及60+个国家/地区，产品信息、采购商/供应商、港口数据、交易重量/金额等，尽在其中</p>
        </div>

        <div class="customs-box_form">
            <div class="customs-box_form-item" :class="{error: errorStatus}">
                <div class="customs-box_form-item-img"><img src="{{ asset('data/assets/images/customs/icon1.png') }}" alt=""></div>
                <div class="customs-box_form-item-text">
                    <p class="p1">产品关键字</p>
                    <div class="customs-box_form-item-input">
                        <el-autocomplete style="width: 100%" v-model="product" :fetch-suggestions="productQuerySearch" placeholder="产品关键字"></el-autocomplete>
                    </div>
                    <div class="customs-box_form-item-error" v-if="errorStatus">
                        <p>至少输入一项查询</p>
                    </div>
                </div>
            </div>
            <div class="customs-box_form-item" :class="{error: errorStatus}">
                <div class="customs-box_form-item-img"><img src="{{ asset('data/assets/images/customs/icon2.png') }}" alt=""></div>
                <div class="customs-box_form-item-text">
                    <p class="p1">HS编码</p>
                    <div class="customs-box_form-item-input">
                        <el-autocomplete style="width: 100%" v-model="params.hsCode" :fetch-suggestions="hscodeQuerySearch" placeholder="HS编码"></el-autocomplete>
                    </div>
                    <div class="customs-box_form-item-error" v-if="errorStatus">
                        <p>至少输入一项查询</p>
                    </div>
                </div>
            </div>
            <div class="customs-box_form-item">
                <div class="customs-box_form-item-img"><img src="{{ asset('data/assets/images/customs/icon3.png') }}" alt=""></div>
                <div class="customs-box_form-item-text">
                    <p class="p1">采购国家/地区</p>
                    <div class="customs-box_form-item-input">
                        <country-code v-model="importerCountryCode" placeholder="采购国家/地区"></country-code>
                    </div>
                </div>
            </div>
            <div class="customs-box_form-item">
                <div class="customs-box_form-item-img"><img src="{{ asset('data/assets/images/customs/icon4.png') }}" alt=""></div>
                <div class="customs-box_form-item-text">
                    <p class="p1">供应国家/地区</p>
                    <div class="customs-box_form-item-input">
                        <country-code v-model="exporterCountryCode" placeholder="供应国家/地区"></country-code>
                    </div>
                </div>
            </div>
            <div class="customs-box_form-item" :class="{error: errorStatus}">
                <div class="customs-box_form-item-img"><img src="{{ asset('data/assets/images/customs/icon5.png') }}" alt=""></div>
                <div class="customs-box_form-item-text">
                    <p class="p1">采购商</p>
                    <div class="customs-box_form-item-input">
                        <el-autocomplete style="width: 100%" v-model="importerName" :fetch-suggestions="importerNameQuerySearch" placeholder="采购商"></el-autocomplete>
                    </div>
                    <div class="customs-box_form-item-error" v-if="errorStatus">
                        <p>至少输入一项查询</p>
                    </div>
                </div>
            </div>
            <div class="customs-box_form-item" :class="{error: errorStatus}">
                <div class="customs-box_form-item-img"><img src="{{ asset('data/assets/images/customs/icon6.png') }}" alt=""></div>
                <div class="customs-box_form-item-text">
                    <p class="p1">供应商</p>
                    <div class="customs-box_form-item-input">
                        <el-autocomplete style="width: 100%" v-model="exporterName" :fetch-suggestions="exporterNameQuerySearch" placeholder="供应商"></el-autocomplete>
                    </div>
                    <div class="customs-box_form-item-error" v-if="errorStatus">
                        <p>至少输入一项查询</p>
                    </div>
                </div>
            </div>
            <div class="customs-box_form-item">
                <div class="customs-box_form-item-img"><img src="{{ asset('data/assets/images/customs/icon7.png') }}" alt=""></div>
                <div class="customs-box_form-item-text">
                    <p class="p1">采购地址</p>
                    <div class="customs-box_form-item-input">
                        <input type="text" class="params-input" v-model="params.importerAddress" placeholder="采购地址">
                    </div>
                </div>
            </div>
            <div class="customs-box_form-item">
                <div class="customs-box_form-item-img"><img src="{{ asset('data/assets/images/customs/icon8.png') }}" alt=""></div>
                <div class="customs-box_form-item-text">
                    <p class="p1">供应地址</p>
                    <div class="customs-box_form-item-input">
                        <input type="text" class="params-input" v-model="params.exporterAddress" placeholder="供应地址">
                    </div>
                </div>
            </div>
            <div class="customs-box_form-item">
                <div class="customs-box_form-item-img"><img src="{{ asset('data/assets/images/customs/icon9.png') }}" alt=""></div>
                <div class="customs-box_form-item-text">
                    <p class="p1">起运港</p>
                    <div class="customs-box_form-item-input">
                        <input type="text" class="params-input" v-model="params.departurePort" placeholder="起运港">
                    </div>
                </div>
            </div>
            <div class="customs-box_form-item">
                <div class="customs-box_form-item-img"><img src="{{ asset('data/assets/images/customs/icon10.png') }}" alt=""></div>
                <div class="customs-box_form-item-text">
                    <p class="p1">目的港</p>
                    <div class="customs-box_form-item-input">
                        <input type="text" class="params-input" v-model="params.dischargePort" placeholder="目的港">
                    </div>
                </div>
            </div>
            <div class="customs-box_form-item">
                <div class="customs-box_form-item-img"><img src="{{ asset('data/assets/images/customs/icon11.png') }}" alt=""></div>
                <div class="customs-box_form-item-text">
                    <p class="p1">起始日期</p>
                    <div class="customs-box_form-item-input">
                        <div class="form-datetime">
                            <input type="text" class="params-input datetimepicker" :value="params.startDate" data-key="startDate" placeholder="请选择日期">
                            <i class="iconfont icon-calendar date-picker-icon"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="customs-box_form-item">
                <div class="customs-box_form-item-img"><img src="{{ asset('data/assets/images/customs/icon12.png') }}" alt=""></div>
                <div class="customs-box_form-item-text">
                    <p class="p1">结束日期</p>
                    <div class="customs-box_form-item-input">
                        <div class="form-datetime">
                            <input type="text" class="params-input datetimepicker" :value="params.endDate" data-key="endDate" placeholder="请选择日期">
                            <i class="iconfont icon-calendar date-picker-icon"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="customs-box_history" v-loading="historyLoading">
            <div class="customs-box_history-box" v-if="historyData.length">
                <span v-for="item in showHistoryData" :key="item.id" v-text="item.character" @click="handleHistoryClick(item)"></span>

                <el-dropdown v-if="historyData.length > 3" @command="handleHistoryClick">
                  <span class="el-dropdown-link">
                    更多<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="item in moreHistoryData" :key="item.id" v-text="item.character"  :command="item"></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>

                <span @click="handleClearHistory">清空记录</span>
            </div>
        </div>

        <div class="customs-box_form-btns">
            <span class="s1" @click="handleSubmit">搜索</span>
            <span class="s2" @click="handleReset">重置</span>
        </div>

        <customs-data
            ref="customsData"
            :apiurl="apiUrl"
            :params="params"
            @backsearch="handleBackSearch"
            v-if="!listStatus"
        ></customs-data>

        <div class="customs-box_tw" v-if="listStatus">
            <div class="customs-box_tw-item">
                <div class="customs-box_tw-item-img"><img src="{{ asset('data/assets/images/customs/feature1.svg') }}" alt=""></div>
                <div class="customs-box_tw-item-text">数亿+实时数据</div>
            </div>
            <div class="customs-box_tw-item">
                <div class="customs-box_tw-item-img"><img src="{{ asset('data/assets/images/customs/feature2.svg') }}" alt=""></div>
                <div class="customs-box_tw-item-text">同步最新交易信息</div>
            </div>
            <div class="customs-box_tw-item">
                <div class="customs-box_tw-item-img"><img src="{{ asset('data/assets/images/customs/feature3.svg') }}" alt=""></div>
                <div class="customs-box_tw-item-text">匹配关键联系人</div>
            </div>
            <div class="customs-box_tw-item">
                <div class="customs-box_tw-item-img"><img src="{{ asset('data/assets/images/customs/feature4.svg') }}" alt=""></div>
                <div class="customs-box_tw-item-text">建立营销旅程</div>
            </div>
        </div>
    </div>
@endsection


@section('foot')
<script src="{{ asset('data/assets/js/bootstrap-datetimepicker.min.js') }}"></script>
<script src="{{ asset('data/assets/js/customs.js') }}"></script>
<script src="{{ asset('data/assets/js/element-ui.js') }}"></script>
<script>
    var apiUrl  = "{{ config('setting.api_url') }}";
    const defaultParams = {
        "product": {
            "orList": []
        },
        "hsCode": "",
        "importerCountryCode": [],
        "exporterCountryCode": [],
        "importerName": {
            "orList": []
        },
        "exporterName": {
            "orList": []
        },
        "importerAddress": "",
        "exporterAddress": "",
        "departurePort": "",
        "dischargePort": "",
        "startDate": dayjs().subtract(6, 'month').format('YYYY-MM-DD'),
        "endDate": dayjs().format('YYYY-MM-DD'),
        "pageIndex": 1,
        "pageSize": 10
    };
    var CustomVue = new Vue({
        el: '#main-view',
        data () {
            return {
                apiUrl: apiUrl,
                product: '',
                importerCountryCode: '',
                exporterCountryCode: '',
                importerName: '',
                exporterName: '',
                errorStatus: false,
                params: _.cloneDeep(defaultParams),
                listStatus: true,
                tableData: {},
                historyLoading: false,
                historyData: [],
                productHistory: [],
                hscodeHistory: [],
                importerNameHistory: [],
                exporterNameHistory: [],
                historyStatus: false
            }
        },
        mounted: function () {
            this.getHistory()
        },
        computed: {
            showHistoryData () {
                var data = _.cloneDeep(this.historyData)
                if (data.length > 3) {
                    return _.slice(data, 0, 3)
                } else {
                    return data
                }
            },
            moreHistoryData () {
                var data = _.cloneDeep(this.historyData)
                if (data.length > 3) {
                    return _.slice(data, 3, data.length)
                }
            }
        },
        methods: {
            handleBackSearch (value) {
                var _this = this
                _this.historyData = value
                value.forEach(function (item) {
                    if (item.parameter.product.orList[0]) {
                        if (!_this.productHistory.find(function (it){return it.value === item.parameter.product.orList[0]})) {
                            _this.productHistory.push({value: item.parameter.product.orList[0]})
                        }
                    }
                    if (item.parameter.hsCode) {
                        if (!_this.hscodeHistory.find(function (it){return it.value === item.parameter.hsCode})) {
                            _this.hscodeHistory.push({value: item.parameter.hsCode})
                        }
                    }
                    if (item.parameter.importerName.orList[0]) {
                        if (!_this.importerNameHistory.find(function (it){return it.value === item.parameter.importerName.orList[0]})) {
                            _this.importerNameHistory.push({value: item.parameter.importerName.orList[0]})
                        }
                    }
                    if (item.parameter.exporterName.orList[0]) {
                        if (!_this.exporterNameHistory.find(function (it){return it.value === item.parameter.exporterName.orList[0]})) {
                            _this.exporterNameHistory.push({value: item.parameter.exporterName.orList[0]})
                        }
                    }
                })
            },
            getHistory () {
                var _this = this
                this.historyLoading = true
                axios.get(`${apiUrl}/customs/search`).then(function (res) {
                    if (res.status === 'success') {
                        _this.historyData = res.data
                        res.data.forEach(function (item) {
                            if (item.parameter.product.orList[0]) {
                                if (!_this.productHistory.find(function (it){return it.value === item.parameter.product.orList[0]})) {
                                    _this.productHistory.push({value: item.parameter.product.orList[0]})
                                }
                            }
                            if (item.parameter.hsCode) {
                                if (!_this.hscodeHistory.find(function (it){return it.value === item.parameter.hsCode})) {
                                    _this.hscodeHistory.push({value: item.parameter.hsCode})
                                }
                            }
                            if (item.parameter.importerName.orList[0]) {
                                if (!_this.importerNameHistory.find(function (it){return it.value === item.parameter.importerName.orList[0]})) {
                                    _this.importerNameHistory.push({value: item.parameter.importerName.orList[0]})
                                }
                            }
                            if (item.parameter.exporterName.orList[0]) {
                                if (!_this.exporterNameHistory.find(function (it){return it.value === item.parameter.exporterName.orList[0]})) {
                                    _this.exporterNameHistory.push({value: item.parameter.exporterName.orList[0]})
                                }
                            }
                        })
                    }
                    _this.historyLoading = false
                }).catch(function (err) {
                    _this.historyLoading = false
                })
            },
            handleHistoryClick(item) {
                this.product = item.parameter.product.orList[0]
                this.importerCountryCode = item.parameter.importerCountryCode[0]
                this.exporterCountryCode = item.parameter.exporterCountryCode[0]
                this.importerName = item.parameter.importerName.orList[0]
                this.exporterName = item.parameter.exporterName.orList[0]
                this.params = _.assign(this.params, item.parameter)
                this.historyStatus = true
            },
            handleClearHistory () {
                var _this = this
                axios.delete(`${apiUrl}/customs/search`).then(function (res) {
                    if (res.status === 'success') {
                        _this.historyData = []
                        _this.productHistory = []
                        _this.hscodeHistory = []
                        _this.importerNameHistory = []
                        _this.exporterNameHistory = []
                    }
                })
            },
            handleSubmit () {
                if (!this.historyStatus) {
                    this.errorStatus = !this.product && !this.params.hsCode && !this.importerName && !this.exporterName;
                    if (this.errorStatus) return

                    this.params.product.orList.splice(0, 1, this.product)
                    this.params.importerCountryCode.splice(0, 1, this.importerCountryCode)
                    this.params.exporterCountryCode.splice(0, 1, this.exporterCountryCode)
                    this.params.importerName.orList.splice(0, 1, this.importerName)
                    this.params.exporterName.orList.splice(0, 1, this.exporterName)
                }
                this.historyStatus = false
                EventBus.$emit('handleParamsSearch')
                this.listStatus = false
            },
            handleReset () {
                this.product = ''
                this.importerCountryCode = ''
                this.exporterCountryCode = ''
                this.importerName = ''
                this.exporterName = ''
                this.params = _.cloneDeep(defaultParams)
                this.listStatus = true
            },
            productQuerySearch (str, cb) {
                return cb(this.productHistory)
            },
            hscodeQuerySearch (str, cb) {
                return cb(this.hscodeHistory)
            },
            importerNameQuerySearch (str, cb) {
                return cb(this.importerNameHistory)
            },
            exporterNameQuerySearch (str, cb) {
                return cb(this.exporterNameHistory)
            }
        }
    });
    $('.datetimepicker').datetimepicker({
        format: 'yyyy-mm-dd',
        language: 'zh-CN',
        autoclose: true,
        orientation:'right',
        minView: 2,
        todayBtn: 1
    }).on('changeDate', function (ev) {
        CustomVue.$set(CustomVue.$data.params, ev.target.getAttribute('data-key'), ev.target.value)
    });
</script>
@endsection