<template>
    <lj-win-index-common-list
        :title="title"
        api-name="GetL1RouteList"
        :data-reset-callback="handleDataReset"
        :data-loaded-callback="handleDataLoaded"
        :query-hard-parms="queryHardParms"
        :query-fields="queryFields"
        ref="baseWin"
        hint="路线编号/路线名称"
        :searchText="keyword"
        v-on:update:searchText="emitChangeKeyword"
        :search-actions="searchActions"
        @scan-click="handleSearchScan"
        ifShowSearchbar
        :popoOffset="[20,0]"
    >
        <!-- <mu-button slot="header_right" icon @click="handleAddClick">
            <i class="iconfont icon-ic_add"></i>
        </mu-button> -->
        <div slot="body_list">
            <div class="lj-card-item" v-for="item in allData" @click="handleCellClick(item)">
                <div>
                    <mu-row>
                        <mu-col span="3" class="lj-card-secondary-title">路线编号：</mu-col>
                        <mu-col span="9" class="lj-card-secondary-content">{{item.routecode}}</mu-col>
                        <!-- <mu-col span="4">
                            <lj-status-badge :value="item.statusstr"/>
                        </mu-col> -->
                        <mu-col span="3" class="lj-card-secondary-title">路线名称：</mu-col>
                        <mu-col span="9" class="lj-card-secondary-content">{{item.routename}}</mu-col>
                        <mu-col span="3" class="lj-card-secondary-title">建立人：</mu-col>
                        <mu-col span="3" class="lj-card-secondary-content">{{item.opemp}}</mu-col>
                        <mu-col span="3" class="lj-card-secondary-title">建立日期：</mu-col>
                        <mu-col span="3" class="lj-card-secondary-content">{{item.opdate | dateFilter}}</mu-col>
                        <mu-col span="3" class="lj-card-secondary-title">修改人：</mu-col>
                        <mu-col span="3" class="lj-card-secondary-content">{{item.modemp }}</mu-col>
                        <mu-col span="3" class="lj-card-secondary-title">修改日期：</mu-col>
                        <mu-col span="3" class="lj-card-secondary-content">{{item.moddate | dateFilter}}</mu-col>
                    </mu-row>
                </div>
            </div>
        </div>
    </lj-win-index-common-list>
</template>

<script>
    import LjSearchbar from "components/lj-searchbar";
    import LjStatusBadge from "components/lj-status-badge";
    import LjWinIndexCommonList from "components/lj-win-index-common-list";

    export default {
        components: {
            LjStatusBadge,
            LjSearchbar,
            LjWinIndexCommonList,
        },
        data() {
            return {
                bindingParms: {keyword: ""},
                allData: [],
                userFunids: [],
                queryHardParms: {},
                // queryFields: [
                //     {title: "客户", property: "keyword"},
                //     {title: "下单日期/要求交期开始", property: "begindate", type: "date"},
                //     {title: "下单日期/要求交期结束", property: "enddate", type: "date"}
                // ],
                queryFields: [
                    {
                        title: "路线编号",
                        property: "routecode",
                        initValue: "",
                        group: "单据"
                    },
                    {
                        title: "路线名称",
                        property: "routename",
                        initValue: "",
                        group: "单据"
                    },
                ],
                // queryQuick: [
                //     {
                //         title: "全部状态",
                //         property: "flag",
                //         type: 'radio3',
                //         initValue: 0,
                //         selectOptions: {
                //             options: [
                //                 {flag: -1, dscrp: "待审核"},
                //                 {flag: 1, dscrp: "在进行"},
                //                 {flag: 5, dscrp: "已完成"},
                //                 {flag: 2, dscrp: "已暂停"},
                //                 {flag: 3, dscrp: "已终止"}
                //             ], 
                //             valueMap: { text: 'dscrp', value: 'flag'},
                //             // valueMap: ["flag", "dscrp"],·
                //         }
                //     },
                // ],
                searchActions: [
                    { 
                        title: '全部',
                        property: 'keyword'
                    },
                    { 
                        title: '路线编号',
                        property: 'routecode' 
                    },
                    { 
                        title: '路线名称',
                        property: 'routename'
                    },
                ],
                keyword: ''
            }
        },
        created() {
            this.userFunids = $lj.getStorage('user').rsltFunids;
            // let pageParam = $lj.getPageParam();
            // if (pageParam) {
            //     this.winMode = pageParam.winMode;
            //     this.queryHardParms = pageParam.queryParams || {};
            // }
            $lj.addEventListener("route_refresh", function (rsp) {
                self.$refs.baseWin.refresh();
            });
        },
        methods: {
            /**搜索栏-扫描 */
            handleSearchScan(searchState) {
                $lj.openScanner((ret) => {
                    setTimeout(() => {
                        let obj = {};
                        obj[searchState] = ret.content.trim();
                        this.$refs.baseWin.handleSearchbar(obj, true);
                    }, 200);
                })
            },
            /**回调绑定值 */
            emitChangeKeyword(val) {
                this.keyword = val;
            },
            handleDataReset(response) {
                this.allData = [];
                if (response.routeList && response.routeList.length > 0) {
                    this.addList(response.routeList);
                }
            },
            handleDataLoaded(response) {
                let moreSaletasks = response.routeList;
                if (moreSaletasks.length > 0) {
                    this.addList(moreSaletasks);
                    return true;
                }
                return false;
            },
            addList(list) {
                this.allData = this.allData.concat(list);
            },
            // handleSearchbar(text) {
            //     this.$refs.baseWin.refresh(Object.assign({keyword: text}, this.queryHardParms));
            // },
            handleCellClick(mainObject) {
                // if (this.winMode === "single-select") {
                //     $lj.sendEvent("saletask_select", mainObject);
                //     $lj.closeWin();
                // } else {
                    $lj.openWin("procode-route-mx", {mainObject: mainObject});
                // }
            },
            handleAddClick() {
                $lj.openWin("procode-route-edit", {winType: 0});
            }
        },
        computed: {
            title() {
                return "工序工艺路线";
            },
            isActiveWorkplan(list) {
                return function(list) {
                    let active = -1;
                    for (const item of list) {
                        if (item.sql_rslt) {
                            active++;
                        } else {
                            break;
                        }
                    }
                    return active
                }
            }
        }
    }
</script>
<style lang="less">
    .lj-alert-text {
        color: @colorAlert;
    }
    .steps-list {
        padding-top: 4px;
        .van-steps__items {
            margin-bottom: 0;
        }
    }
</style>