<template>
    <div style="margin-top: 60px">
        <el-row class="table-title" type="flex">
            <el-col :span="5" class="cost-bear">
                <span></span>
                <span>合计：{{ totalPrice }}元</span>
            </el-col>
            <el-col :span="14" class="title">
                其他费用
                <el-button
                    type="text"
                    v-if="pageContent === '完工结算'"
                    @click="onAddOtherCost"
                    >添加</el-button
                >
            </el-col>
            <el-col :span="5"></el-col>
        </el-row>
        <el-table :data="addOtherCostList" border>
            <el-table-column align="center" label="费用描述">
                <template slot-scope="scope">
                    <el-input
                        :rows="2"
                        type="textarea"
                        placeholder="请输入费用描述"
                        v-model="scope.row.costRemark"
                        v-if="pageContent === '完工结算'"
                        :ref="`costRemark_${scope.$index}`"
                        :class="{
                            active: activeIndexCostRemark === scope.$index,
                        }"
                    />

                    <span v-else>{{ scope.row.costRemark }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="金额" width="280">
                <template slot-scope="scope">
                    <el-input
                        placeholder="请输入金额"
                        @blur="onAddCostChange"
                        v-model="scope.row.addCost"
                        :ref="`addCost_${scope.$index}`"
                        v-if="pageContent === '完工结算'"
                        :class="{
                            active: activeIndex === scope.$index,
                        }"
                    />

                    <span v-else>{{ scope.row.addCost }}</span>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="操作"
                width="120"
                v-if="pageContent === '完工结算'"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="danger"
                        @click="onDeleteItems(scope.$index)"
                        icon="el-icon-delete-solid"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    props: {
        pageContent: {
            type: String,
            default: () => {},
        },
        addCost: {
            type: [Number, String],
            default: () => {},
        },
        otherCostListDetailsNew: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            totalPrice: 0,
            activeIndex: '',
            addOtherCostList: [],
            activeIndexCostRemark: '',
        }
    },
    methods: {
        /* 添加 */
        onAddOtherCost() {
            const addOtherCostItems = {
                addCost: '',
                costRemark: '',
            }
            this.addOtherCostList.push(addOtherCostItems)
        },
        /* 删除 */
        onDeleteItems(index) {
            this.addOtherCostList.splice(index, 1)
            this.getSumTotalPrice()
        },

        /* 金额输入框事件 */
        onAddCostChange() {
            this.getSumTotalPrice()
        },
        /* 求和 */
        getSumTotalPrice() {
            if (this.addOtherCostList.length > 0) {
                this.totalPrice = this.addOtherCostList.reduce(
                    (sum, e) => sum + e.addCost * 1,
                    0,
                )
            } else {
                this.totalPrice = 0
            }

            this.$emit('setOtherCostPrice', this.totalPrice)
        },

        /* 确认结算之前的校验 */
        onCheckOtherCost() {
            let isCheck = true
            if (this.addOtherCostList.length > 0) {
                try {
                    this.addOtherCostList.forEach((e, index) => {
                        const regex_1 = /^(?!\s*$).{1,100}$/
                        if (!regex_1.test(e.costRemark)) {
                            this.$message.error(
                                '费用描述不能为空，且不能超过100个字符!',
                            )
                            this.activeIndexCostRemark = index
                            this.$refs[`costRemark_${index}`].focus()
                            isCheck = false
                            throw new Error()
                        } else {
                            this.activeIndexCostRemark = ''
                        }
                        const regex_2 =
                            /^(?!\s*$)(?:[1-9][0-9]{0,7}|100000000)$/

                        if (!regex_2.test(e.addCost)) {
                            this.$modal.msgError(
                                '金额不能为空，不能为小数，不能以0开头，不能大于1亿',
                            )
                            this.activeIndex = index
                            this.$refs[`addCost_${index}`].focus()
                            isCheck = false
                            throw new Error()
                        } else {
                            this.activeIndex = ''
                            this.getSumTotalPrice()
                        }
                    })
                } catch (error) {}
            }
            return isCheck
        },
    },

    watch: {
        otherCostListDetailsNew: {
            handler(newValue) {
                if (newValue.length > 0) {
                    this.addOtherCostList = [...newValue]
                }
            },
            deep: true,
        },
        addCost: {
            handler(newValue) {
                if (newValue > 0) {
                    this.totalPrice = newValue
                }
            },
            deep: true,
        },
    },
}
</script>

<style scoped lang="scss">
.table-title {
    position: relative;
    min-height: 48px;
    border: 1px solid #7e7e7e;
    background: linear-gradient(to right, #b4b3b3, #edebeb);
    align-items: center !important;
    justify-content: space-around;

    .cost-bear {
        display: flex;
        padding-left: 12px;
        font-weight: bold;
        color: red;

        span {
            width: 50%;
        }
    }

    .title {
        margin: auto 0;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 4px;
    }
}

::v-deep .active {
    .el-input__inner:focus {
        border-color: #f56c6c;
    }

    .el-textarea__inner:focus {
        border-color: #f56c6c;
    }
}
</style>
