<template>
    <div class="eibs-tab">
        <c-col :span="12">
            <el-form-item label="Discrepancies" prop="brdgrp.blk.docdis">
                <c-fullbox>
                    <c-input
                        type="textarea"
                        v-model="model.brdgrp.blk.docdis"
                        maxlength="50"
                        show-word-limit
                        placeholder="请输入Discrepancies"
                    ></c-input>
                    <template slot="footer">
                        <c-button
                            size="small"
                            type="primary"
                            @click="onDocdisButtxmsel"
                        >
                            ...
                        </c-button>
                    </template>
                </c-fullbox>
            </el-form-item>
        </c-col>

        <c-col :span="12">
            <el-form-item>
                <c-checkbox v-model="model.brdgrp.blk.docdisflg"
                    >discrepancies modified</c-checkbox
                >
            </el-form-item>
        </c-col>

        <c-col :span="24" style="height: 24px; margin-top: -10px">
            <el-form-item :label="model.brtp.docgrdm.docdsclab" class="messageLabel">
                <c-button  style="float:right" @click="addTableValue" type="primary">新增单据</c-button>
            </el-form-item>
        </c-col>
        <c-col :span="24" style="height: 0px">
            <el-divider></el-divider>
        </c-col>
        <c-col :span="24" style="">
            <c-table
                style="text-align: center"
                :list="TableValue"
                :paginationShow="false"
                :border="true"
            >
            <el-table-column label="1st" prop="cmail1" width="auto"></el-table-column>
            <el-table-column label="2nd" prop="cmail2" width="auto"></el-table-column>
            <el-table-column label="Document" prop="docnam" width="auto">
                <template slot-scope="scope">
                    <!-- {{scope.row.docnam}} -->
                    <c-select
                    style="width: 100%"
                    placeholder="请选择"
                    v-model="
                            scope.row.docnam
                        "
                    >
                    <el-option
                        v-for="item in codeTable"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                    </c-select>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="170px" fixed="right">
                <template slot-scope="scope">
                    <c-button @click="deleteTable(scope.row)"  type="primary">删除</c-button>
                </template>
            </el-table-column>
            </c-table>
        </c-col>
    </div>
</template>
<script>
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Brtdcr/Event";

export default {
    inject: ["root"],
    props: ["model", "codes"],
    mixins: [commonProcess],
    data() {
        return {
            TableValue:[
                {
                    id:0,
                    cmail1:"",
                    cmail2:"",
                    docnam:"10"
                },
                {
                    id:1,
                    cmail1:"",
                    cmail2:"",
                    docnam:"20"
                },
                {
                    id:2,
                    cmail1:"",
                    cmail2:"",
                    docnam:"17"
                },
            ],
            newValue:{
                    id:0,
                    cmail1:"",
                    cmail2:"",
                    docnam:""
            },
            codeTable:[
                { label: "Airway Bills", value: "1" },
                { label: "Beneficiary's Declaration", value: "2" },
                { label: "Bill of Lading Copies", value: "3" },
                { label: "Bill of Lading Originals", value: "4" },
                { label: "Certificate", value: "5" },
                { label: "Certificate of Analysis", value: "6" },
                { label: "Certificate of Origin", value: "7" },
                { label: "Certificate of Quality", value: "8" },
                { label: "Certificate of Quantity", value: "9" },
                { label: "Commercial Invoice", value: "10" },
                { label: "Courier Receipt", value: "11" },
                { label: "Draft", value: "12" },
                { label: "Export Licence", value: "13" },
                { label: "Fax Report", value: "14" },
                { label: "Inspection Cert", value: "15" },
                { label: "Insurance Policy", value: "16" },
                { label: "Packing List", value: "17" },
                { label: "Shipment Advice", value: "18" },
                { label: "Weight List", value: "19" },
                { label: "Original Bills of Lading", value: "20" },  
            ]
        };
    },
    methods: { ...Event,
        addTableValue(){
            var index = this.TableValue.length;
            var newTableValue = this.newValue;
            if(index > 0){
                newTableValue.id = this.TableValue[index - 1].id + 1;
            }
            this.TableValue.push(newTableValue);
        },
        deleteTable(row){
            for(let i = 0; i < this.TableValue.length; i++){
                if(this.TableValue[i].id == row.id){
                    this.TableValue.splice(i, 1)
                    break;
                }
            }
        }
    },
    created: function () {},
};
</script>
<style>
.messageLabel >>> .el-form-item__label {
  text-align: left;
  font-weight: bold;
  font-size: 12px;
}
</style>