/*
 * @description: 费用-内部培训组件
 * @Author: CP
 * @Date: 2020-11-26 15:12:47
 * @FilePath: \cld\global\vue\fee\receipt_train_component.js
 */

Vue.component("train", {
    props: ['train','trainExplain'],
    computed: {
        trainTotal: function () {
            return trainPrice(this.train);
        }
    },
    template:
        `
<div>
 
<div class="seTable">
    <table class="table table-bordered table-condensed table-hover mb-0">
        <tbody>
            <tr>
                <th colspan="2" class="taC" id="neibupeixun">内部培训费用</th>
            </tr>

            <tr v-for="item in train" >
                <th>{{ item.name }}</th>
                <td width="200" class="taR">￥<input type="number" v-model="item.price"  pattern="[0-9]" step="0.01"
                        min="0" class="span2"></td>
            </tr>
            
            
            <tr>
                <th class="taR">合计</th>
                <td class="colGreen taR">￥{{ trainTotal }}</td>
            </tr>
            <tr class="warning">
                <td class="taR"><b>内部培训费用合计</b></td>
                <td class="colGreed taR"><b style="font-size: 24px">￥{{ trainTotal }}</b>
                </td>
            </tr>
            <tr>
                <th colspan="2" class="taC">报销说明</th>
            </tr>
            <tr>
                <th colspan="2" v-for="item in trainExplain" >
                <textarea required rows="6" style="width: 99%" v-model="item.trainExplain" placeholder="内部培训费用说明"></textarea>
                </th>
            </tr>
        </tbody>
    </table>
</div>
<div class="seCensor receipt-censor">
    <div class="title">报销单填写说明</div>
    <div class="detail">
        <p>1 此项费用，仅用于纵横内部培训；</p>
        <p>2 用于客户的培训费用，请创建“培训班结算”。</p>
    </div>
</div>

</div>
    `
})