<template>
    <lj-win-index-common-list
        :title="title"
        api-name="GetL1Saletask"
        :addable="true"
        :data-reset-callback="handleDataReset"
        :data-loaded-callback="handleDataLoaded"
        :query-hard-parms="queryHardParms"
        :query-fields="queryFields"
        @add-click="handleAddClick"
        ref="baseWin"
        hint="订单号/客户名称/商品/相关号"
        :searchText="keyword"
        v-on:update:searchText="emitChangeKeyword"
        :query-quick="queryQuick"
        :search-actions="searchActions"
        @scan-click="handleSearchScan"
        ifShowSearchbar
    >
        <div slot="body_list">
            <div class="marginTop-5px"></div>
            <lj-text :datas="saleInfo" v-if="saleInfo && ifSummary"/>
            <div class="lj-card-item marginTop-8px" 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="5" class="lj-card-secondary-content">{{item.taskcode}}</mu-col>
                        <mu-col span="2">
                            <div v-if="item.consignedqty > 0" class="lj-alert-text">已接单</div>
                            <!-- <lj-status-badge :value="item.ifAffirm | affirmFilter"/> -->
                        </mu-col>
                        <mu-col span="2">
                            <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">{{ isShowCusname(item) }}</mu-col>
                        <mu-col span="3" class="lj-card-secondary-title">业务员：</mu-col>
                        <mu-col span="9" class="lj-card-secondary-content">{{item.assign_emp}}</mu-col>
                        <mu-col span="3" class="lj-card-secondary-title">订货日期：</mu-col>
                        <mu-col span="3" class="lj-card-secondary-content">{{item.taskdate | dateFilter}}</mu-col>
                        <mu-col span="3" class="lj-card-secondary-title">交货日期：</mu-col>
                        <mu-col span="3" class="lj-card-secondary-content">{{item.requiredate | dateFilter}}</mu-col>
                        <mu-col span="3" class="lj-card-secondary-title" v-if="userFunids.indexOf(122) < 0">金额：</mu-col>
                        <mu-col span="3" class="lj-card-secondary-content lj-sharp-red-text" v-if="userFunids.indexOf(122) < 0">
                            {{item.moneysign}}{{item.msttakeamt}}
                        </mu-col>
                        <mu-col span="3" class="lj-card-secondary-title" v-if="userFunids.indexOf(122) < 0">订金：</mu-col>
                        <mu-col span="3" class="lj-card-secondary-content lj-sharp-red-text" v-if="userFunids.indexOf(122) < 0">
                            {{item.moneysign}}{{item.damt}}
                        </mu-col>
                    </mu-row>
                    <div class="lj-card-summary">
                        <div class="lj-card-summary-light-text">
                            <i class="iconfont icon-cart lj-card-summary-icon"></i>
                            <span class="lj-card-secondary-content">共{{item.sumqty}}件商品，其中包括</span>
                        </div>
                        <template v-if="item.mtrlstr_1">
                            <div class="lj-divider"></div>
                            <mu-row>
                                <mu-col span="1" style="text-align: right;">
                                    <li></li>
                                </mu-col>
                                <mu-col>
                                    <div class="lj-card-secondary-content"> 
                                        {{item.mtrlstr_1}}
                                    </div>
                                    <div class="lj-card-secondary-content lj-card-summary-light-text" v-if="userFunids.indexOf(122) < 0">
                                        {{item.qtystr_1}}
                                    </div>
                                </mu-col>
                            </mu-row>
                        </template>
                        <template v-if="item.mtrlstr_2">
                            <mu-row>
                                <mu-col span="1" style="text-align: right;">
                                    <li></li>
                                </mu-col>
                                <mu-col>
                                    <div class="lj-card-secondary-content">
                                        {{item.mtrlstr_2}}
                                    </div>
                                    <div class="lj-card-secondary-content lj-card-summary-light-text" v-if="userFunids.indexOf(122) < 0">
                                        {{item.qtystr_2}}
                                    </div>
                                </mu-col>
                            </mu-row>
                        </template>

                    </div>
                    <div class="lj-card-tag-text lj-card-summary-light-text flex">
                        <div class="lj-card-tag">
                            <i class="iconfont icon-grid lj-card-summary-icon"></i>
                            {{item.typename}}
                        </div>
                        <div class="lj-card-tag">
                            <i class="iconfont icon-cash lj-card-summary-icon"></i>
                            {{item.banktypestr}}
                        </div>
                    </div>
                    <van-steps
                        class="steps-list"
                        v-if="item.workplanCheckList && item.workplanCheckList.length"
                        :active="isActiveWorkplan(item.workplanCheckList)"
                        active-color="#4caf50"
                        inactive-color="#D1D1D6"
                    >
                        <van-step
                            v-for="(itm, idx) in item.workplanCheckList" :key="idx"
                        >
                            {{ itm.content }}
                        </van-step>
                    </van-steps>
                </div>
            </div>
        </div>
    <!-- </lj-win-index-common> -->
    </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";
    import LjText from "./lj-text"

    export default {
        components: {
            LjStatusBadge,
            LjSearchbar,
            LjWinIndexCommonList,
            LjText
        },
        data() {
            return {
                bindingParms: {keyword: ""},
                allData: [],
                userFunids: [],
                queryHardParms: {},
                // queryFields: [
                //     {title: "客户", property: "keyword"},
                //     {title: "下单日期/要求交期开始", property: "begindate", type: "date"},
                //     {title: "下单日期/要求交期结束", property: "enddate", type: "date"}
                // ],
                queryFields: [
                    {
                        title: "订单号",
                        property: "taskcode",
                        initValue: "",
                        group: "单据"
                    },
                    {
                        title: "客户名称",
                        property: "custname",
                        initValue: "",
                        group: "单据"
                    },
                    {
                        title: "业务员名称",
                        property: "assignEmp",
                        initValue: "",
                        group: "单据"
                    },
                    {
                        title: "相关号",
                        property: "relcode",
                        initValue: "",
                        group: "单据"
                    },
                    {
                        title: "商品编号",
                        property: "mtrlcode",
                        initValue: "",
                        group: "商品"
                    },
                    {
                        title: "生产批号",
                        property: "mtrlcuscode",
                        initValue: "",
                        group: "商品"
                    },
                    {
                        title: "开始",
                        property: "begindate",
                        type: "date",
                        group: "下单日期/要求交期"
                    },
                    {
                        title: "结束",
                        property: "enddate",
                        type: "date",
                        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: 'taskcode' 
                    },
                    { 
                        title: '客户',
                        property: 'custname'
                    },
                    { 
                        title: '商品编号',
                        property: 'mtrlcode'
                    },
                    { 
                        title: '相关号',
                        property: 'relcode'
                    },
                    { 
                        title: '生产批号',
                        property: 'mtrlcuscode'
                    },
                ],
                keyword: '',
                saleInfo: []
            }
        },
        created() {
            this.userFunids = $lj.getStorage('user').rsltFunids;
            let pageParam = $lj.getPageParam();
            if (pageParam) {
                this.winMode = pageParam.winMode;
                this.queryHardParms = pageParam.queryParams || {};
            }
        },
        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.saletaskList && response.saletaskList.length > 0) {
                    this.addList(response.saletaskList);
                }
                if (response.saleinfo && response.saleinfo.length > 0) {
                    for(let i = 0;i < response.saleinfo.length;i++) {
                        response.saleinfo[i].mainvalue = Number(response.saleinfo[i].mainvalue);
                    }
                    this.saleInfo = response.saleinfo;
                }
            },
            handleDataLoaded(response) {
                let moreSaletasks = response.saletaskList;
                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("saletask-detail", {mainObject: mainObject});
                }
            },
            handleAddClick() {
                if (!$lj.checkPower(7112)) {
                    alert("您没有销售订单建单权限，请检查");
                    return;
                }
                $lj.openWin("saletask-edit");
            }
        },
        computed: {
            title() {
                if (this.winMode === 'single-select') {
                    return "销售订单选择";
                } else {
                    return "销售订单";
                }
            },
            isActiveWorkplan(list) {
                return function(list) {
                    let active = -1;
                    for (const item of list) {
                        if (item.sql_rslt) {
                            active++;
                        } else {
                            break;
                        }
                    }
                    return active
                }
            },
            ifSummary(){
                 if ($lj.checkPower(122) && $lj.getStorage('user').empid != 0) {
                        return false;  
                 }
                 else{
                     return true;
                 }
            },
            isShowCusname(data) {
                let empid = $lj.getStorage("userInfo").empid;
                return function (data) {
                    let msg = "";
                    if (empid != 0 && $lj.checkPower(1210)) {
                        msg = data.cuscode;
                    } else {
                        msg = data.cusname;
                    }
                    return msg;
                }
            },
        }
    }
</script>
<style lang="less">
    .lj-alert-text {
        color: @colorAlert;
    }
    .steps-list {
        padding-top: 4px;
        .van-steps__items {
            margin-bottom: 0;
        }
    }
    .marginTop-5px {
        margin-top: 5px;
    }
    .marginTop-8px {
        margin-top: 8px;
    }
</style>