<template>
    <div class="jc-card-wrapper" :class="{'card-stop': item.flag == 4}" @click="$emit('callFuntion',item)">
        <header>
            <van-cell
                class="lj-card__header card-header lj-cell-left"
                :title="item | filterTitle"
            >
                <template #label>
                    <div class="jc-card-label">
                        <!-- <lj-tag-double value="类别" :doubleValue="item.mattresstypeid | enumFilter(mattresstypeEnum)"></lj-tag-double> -->
                        <span class="title" v-if="item.mattressname">编码：{{ item.mattresscode }}</span>
                        <van-badge v-if="item.child_count > 0" content="主规格" color="#2196f3"></van-badge>
                        <van-badge v-if="item.parentid > 0" content="副规格" color="#90cef1"></van-badge>
                    </div>
                </template>
                <template #default>
                    <div class="card-default flx-col flx-end ">
                        <lj-status-badge class="card-status" style="font-size: 10px;" :value="item | filterFlag" :statusDic="statusDic"/>
                        <div :class="item.xd_flag == 1 ? 'lj-primary-text' : 'lj-alert-text'" style="font-size: 10px;">{{item | xdflagFilter}}</div>
                        <!-- <div class="count-down" v-if="item.diffSeconds > 0">
                            {{ item.diffSeconds | filterDate | filterTime }}
                        </div> -->
                    </div>
                </template>
            </van-cell>
        </header>
        <main>
            <mu-row>
                <mu-col span="2" class="lj-card-secondary-title">宽：</mu-col>
                <mu-col span="2" class="lj-card-secondary-content">{{item.mattress_width}}</mu-col>
                <mu-col span="2" class="lj-card-secondary-title">长：</mu-col>
                <mu-col span="2" class="lj-card-secondary-content">{{item.mattress_length}}</mu-col>
                <mu-col span="2" class="lj-card-secondary-title">高：</mu-col>
                <mu-col span="2" class="lj-card-secondary-content">{{item.mattress_height}}</mu-col>
            </mu-row>
            <mu-row>
                <mu-col span="2" class="lj-card-secondary-title">类别：</mu-col>
                <mu-col span="2" class="lj-card-secondary-content">{{item.mattresstypeid | enumFilter(mattresstypeEnum)}}</mu-col>
                <mu-col span="2" class="lj-card-secondary-title">总重量：</mu-col>
                <mu-col span="2" class="lj-card-secondary-content">{{item.sum_weight}}</mu-col>
            </mu-row>

            <mu-row>
                <mu-col span="2" class="lj-card-secondary-title">登记人：</mu-col>
                <mu-col span="10" class="lj-card-secondary-content">{{item.createby}}  {{item.createtime | dateFilter}}</mu-col>
            </mu-row>
        </main>
        <footer class="footer-result" >
            <div class="flx-1  flx-start">
                <lj-tag-double value="部门" type="primary" :doubleValue="item.deptid | enumFilter(deptEnum)"></lj-tag-double>
            </div>
            <div class="flx-shrink" v-if="priceable">
                <span class="subtitle">部门售价</span>
                ￥{{ item.dept_cost | moneyFilter }}
            </div>
        </footer>
    </div>
</template>

<script>
    import LjStatusBadge from "components/lj-status-badge";
    import LjTagDouble from "components/lj-tag-double";
    // import EvmxItem from "./event-evmx-item.vue";

    export default {
        name: "outware-scllplan-item",
        components: {
            LjStatusBadge,
            LjTagDouble,
            // EvmxItem,
        },
        props: {
            item: {
                // 传入数据
                type: Object
            },
            deptEnum: {
                // 部门枚举
                type: Array,
                default: () => ([])
            },
            mattresstypeEnum: {
                // 床网类型枚举
                type: Array,
                default: () => ([])
            }
        },
        data() {
            return {
                showCount: 0,
                // selectMode: false
                statusDic: {
                    "待财审": {color: "red"},
                    "已财审": {color: "green1"},
                    // "待上诉": {color: "orange"},
                    // "申诉中": {color: "indigo"},
                    // "待裁定": {color: "green1"},
                    // // "待审核": {color: "green1"},
                    // "处理完": {color: "teal"},
                    // "已终止": {color: "gray1"},
                },
                active: 0,
                interval: null, // 计时器
                flagStatus: "",
                priceable: false
            }
        },
        computed: {
            // isDuty() {
            //     let arr = [];
            //     arr = this.item.pic_group.split(",");
            //     return arr;
            // },
            // isDutyIcon() {
            //     let icon ="";
            //     switch (this.item.pic_group_type) {
            //         case 0: // 个人
            //             icon = "icon-Profile_light";
            //             break;
            //         case 1: // 工作中心
            //             icon = "icon-2User_light";
            //             break;
            //         case 2: // 工段
            //             icon = "icon-3User_light";
            //             break;
            //         case 3: // 部门
            //             icon = "icon-department";
            //             break;
            //     }
            //     return icon;
            // },
            isControlText() {
                let txt ="";
                console.log(' this.item.flag :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.item.flag));
                switch (this.item.flag) {
                    case 0:
                        txt = "发起调查";
                        break;
                    case 1:
                        txt = "发表意见";
                        break;
                    case 2:
                        txt = "发起申诉";
                        break;
                }
                return txt;
            },
            isControlCls() {
                let cls = "";
                switch (this.item.flag) {
                    case 0:
                        cls = "status-0";
                        break;
                    case 1:
                        cls = "status-1";
                        break;
                    case 2:
                        if (this.item.countdown > 0) {
                            cls = "status-2";
                        }
                        break;
                }
                return cls
            },
            isSumAmt() {
                let amt = 0;
                if (!this.item.hasOwnProperty('result') || !this.item.result.length) return 0;
                this.item.result.forEach(el => {
                    amt += Number(el.amt)
                });
                return amt
            },
            isSumPoint() {
                let amt = 0;
                if (!this.item.hasOwnProperty('result') || !this.item.result.length) return 0;
                this.item.result.forEach(el => {
                    amt += Number(el.point)
                });
                return amt
            },
        },
        created () {
            this.computedSurplusTime();

            let user = $lj.getStorage('user');
            this.priceable = user.usermode == 0;
        },
        methods:{
            computedSurplusTime () {
                if (this.interval) {
                    clearInterval(this.interval)
                }
                // 转化为对应的秒数
                // this.item.diffSeconds = this.item.countdown || 0;
                let diffSeconds = this.item.countdown || 0;
                this.$set(this.item, 'diffSeconds', diffSeconds)
                // console.log(' this.item.diffSeconds :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.item.diffSeconds));
                // 当时间每过1秒 秒数差距应该 - 1
                if (this.item.diffSeconds > 0) {
                    this.interval = setInterval(() => {
                        this.item.diffSeconds -= 1
                    }, 1000)
                }
            },
            terminationCD() {
                if (this.interval) {
                    clearInterval(this.interval)
                }
            }
        },
        filters: {
            filterTitle(item) {
                return item.mattressname || item.mattresscode
            },
            filterTime(value) {
                if (!value) {
                    return ''
                }

                // value 不是时间格式 时：分： 秒
                if (value.indexOf(':') === -1) {
                    return "剩余:" + value
                }

                let result = ''
                const arr = value.split(':')
                // 对小时、分钟、0秒数 补0
                if (parseInt(arr[0]) < 10) {
                    result = '0' + arr[0]
                } else {
                    result = arr[0]
                }

                if (parseInt(arr[1]) < 10) {
                    result = result + ':0' + arr[1]
                } else {
                    result = result + ':' + arr[1]
                }

                if (parseInt(arr[2]) < 10) {
                    result = result + ':0' + arr[2]
                } else {
                    result = result + ':' + arr[2]
                }
                return "剩余:" + result
            },
            filterDate(newV) {
                let text = "";
                if (newV > 86400) {
                    // 当前的秒数 / 3600，向下取整，获取到转化的小时数
                    const hours = Math.floor(newV / 3600) % 24
                    // 当大于1天时间，显示n天
                    text = parseInt(newV / 86400) + '天' + hours + '小时';
                } else {
                // 当前的秒数 / 3600，向下取整，获取到转化的小时数
                    const hours = Math.floor(newV / 3600)
                    // 当前秒数 / 60，向下取整
                    // 获取到所有分钟数 3600 / 60 = 60分钟
                    // 对60取模，超过小时数的分钟数
                    const minutes = Math.floor(newV / 60) % 60
                    // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
                    const seconds = newV % 60
                    // 拼装数据
                    text = hours + ':' + minutes + ':' + seconds;
                }
                return text
            },
            filterFlag(item) {
                let text = "";
                switch (Number(item.flag)) {
                    case 0:
                        text = "待财审";
                        break;
                    case 1:
                        text = "已财审";
                        break;
                    default:
                        text = "";
                        break;
                }
                return text
            },
            xdflagFilter(item) {
                let text = "";
                switch (Number(item.xd_flag)) {
                    case 0:
                        text = "待业务下单";
                        break;
                    case 1:
                        text = "已业务下单";
                        break;
                    default:
                        text = "";
                        break;
                }
                return text
            },
            ymDateFilter(data) {
                return data.toString().substring(0,4) + "年" + data.toString().substring(4,6) + "月"
            },
            enumFilter(data, arr) {
                let name = "";
                arr.forEach(itm => {
                    if (Number(itm.value) == Number(data)) {
                        name = itm.label;
                    }
                });
                return name
            }
        }
    }
</script>
<style lang="less">
    @import "~assets/css/lj-style-variable";
    @import "~assets/css/lj-base";

    .jc-card-wrapper {
        position: relative;
        overflow: hidden;
        margin: 10px;
        margin-top: 6px;
        // box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05); // 较为自然投影
        border-radius: 4px;
        background-color: #fff;

        &.card-stop {
            // background: @light-fill-tertiary;
            -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
            filter: grayscale(100%);
        }

        > header {
            position: relative;
            &::after {
                position: absolute;
                box-sizing: border-box;
                content: ' ';
                pointer-events: none;
                right: 16px;
                bottom: 0;
                left: 16px;
                border-bottom: 1px solid @light-separator-transparent-secondary;
                -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
            }
        }
        .evmx-ellipsis {
            margin: 0 auto;
            width: 48px;
            height: 16px;
            background-color: @light-fill-quarternary;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
            opacity: 0.6;

            .iconfont {
                font-size: 16px;
                color: @light-label-secondary;
            }
        }
        > main {
            display: flex;
            flex-direction: column;

            // .result-box {
            //     padding: 5px 10px;
            //     position: relative;
                
            //     &::after {
            //         position: absolute;
            //         box-sizing: border-box;
            //         content: ' ';
            //         pointer-events: none;
            //         right: 16px;
            //         top: 0;
            //         left: 16px;
            //         border-top: 1px solid @light-separator-transparent-secondary;
            //         -webkit-transform: scaleY(0.5);
            //         transform: scaleY(0.5);
            //     }

            //     main {
            //         background-color: rgba(255, 69, 58, 0.05);
            //         border-radius: 4px;

            //         .result-header {
            //             text-align: center;
            //             margin-top:5px;
            //             padding:5px 0 5px 0;
            //             color: @light-system-red;
            //             font-size:12px;
            //         }
            //     }
            //     .departmentname {
            //         // display: block;
            //         // font-size: 14px;
            //         color: @light-label-tertiary;
            //     }
            //     .result-dscrp {
            //         margin-left: 16px;
            //         margin-bottom: 4px;
            //         font-size: 12px;
            //         color: @light-label-secondary;
            //         .title {
            //             font-size: 12px;
            //             color: @light-label-tertiary;
            //         }
            //     }
            // }
            .lj-card-secondary-title {
                font-weight: normal;
                color: @light-label-secondary;
            }
        }
        > footer {
            position: relative;
            display: flex;
            padding: 4px 10px;

            .subtitle {
                padding-right: 2px;
                font-size: 12px;
                color: @light-label-tertiary;
            }

            &::before {
                position: absolute;
                box-sizing: border-box;
                content: ' ';
                pointer-events: none;
                right: 16px;
                top: 0;
                left: 16px;
                border-bottom: 1px solid @light-separator-transparent-secondary;
                -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
            }
            // &.footer-result {
            //     .result-header {
            //         flex: 1;
            //         text-align: center;
            //         color: @light-label-secondary;
            //         font-size:12px;
            //     }
            // }

            // .left-part {
            //     flex: 1;
            //     display: inline-block;
            //     margin: auto 0;
            //     // align-items: center;


            //     // .tag-ul {
            //     //     display: inline-block;
                    
            //         .iconfont {
            //             font-size: 12px;
            //             padding-right: 1px;
            //         }
            //     // }
            //     .van-tag {
            //         float: left;
            //     }
            //     .duty-tag {
            //         margin-top: 1px;
            //         margin-bottom: 1px;
            //         background-color: rgba(255, 69, 58, 0.2);
            //         color: @light-system-red;
            //         border: 1px solid rgba(255, 69, 58, 0.2);
            //     }
            //     .duty-tag-item {
            //         margin-left: 2px;
            //         margin-top: 1px;
            //         margin-bottom: 1px;
            //         background-color: @light-barkground-secondary;
            //         border: 1px solid rgba(255, 69, 58, 0.05);
            //         color: @light-system-red;
            //     }
            // }
            // .right-part {
            //     flex-shrink: 0;
            //     display: inline-flex;
            //     align-items: center;
            // }
            .footer-btn {
                width: 80px;
                font-size: 12px;
                // padding-left: 15px;
                // padding-right: 15px;

                &.status-0 {
                    background-color: @light-barkground-secondary;
                    border-color: rgba(0, 122, 255, 0.4);
                    color: @musePrimary;
                    box-shadow: 0px 2px 4px rgba(0, 122, 255, 0.2);
                }
                &.status-1 {
                    background-color: @light-barkground-secondary;
                    border-color: @light-fill-primary;
                    color: @light-label-primary;
                    box-shadow: 0px 2px 4px rgba(120, 120, 128, 0.16);
                }
                &.status-2 {
                    background-color: rgba(88, 86, 214, 0.1);
                    border-color: @light-system-indigo;
                    color: @light-system-indigo;
                    box-shadow: 0px 2px 4px rgba(88, 86, 214, 0.2);
                }
            }
        }
    }

</style>