<template>
    <div class="samplesComponent">
        <DoorView title="样品取样地点">
            <div slot="main">
                <el-form v-if="$route.query.status == 1" :model="model" :rules="model.rules" ref="form" size="small">
                    <el-table :data="model.newTableData" v-loading="tabloding">
                        <el-table-column align="left" label="序号" prop="number">
                            <template slot-scope="scope">
                                {{scope.row.number = scope.$index + 1}}
                            </template>
                        </el-table-column>
                        <el-table-column align="left" prop="address" label="取样地点">
                            <template slot-scope="scope">
                                <el-form-item v-if="scope.row.edit" class="addressItem" style="margin: 0" :prop="'newTableData.' + scope.$index + '.address'" :show-message="false" :rules="model.rules.address">
                                    <el-input v-focus maxlength="64" v-model="scope.row.address"></el-input>
                                </el-form-item>
                                <el-form-item v-else class="addressItem" style="margin: 0">
                                      <span>{{scope.row.address}}</span>  
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column align="left" prop="isDef" label="是否默认">
                            <template slot-scope="scope">
                                <el-switch v-show="scope.row.edit" v-model="scope.row.isDef" @change="switchChange(scope.row.isDef,scope.$index)">
                                </el-switch>
                                <el-switch v-show="!scope.row.edit" v-model="scope.row.isDef" @change="switchChange(scope.row.isDef,scope.$index)">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="120px" align="left" class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                                <el-link v-show="!scope.row.edit" @click="jumpDetails(scope.row,scope.$index)" type="primary">编辑</el-link>
                                <el-link v-show="scope.row.edit" @click="saveSampleAddress(scope.row)" type="primary">保存</el-link>
                                <el-popconfirm v-if="scope.row.id" title="确认删除该条记录？" @onConfirm="deleteSampleAddress(scope.row.id)">
                                    <el-link type="primary" slot="reference">删除</el-link>
                                </el-popconfirm>
                                <el-popconfirm v-else title="确认删除该条记录？" @onConfirm="deleteDetails(scope.row,scope.$index)">
                                    <el-link type="primary" slot="reference">删除</el-link>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form>
                <el-form v-else :model="model" :rules="model.rules" ref="form" size="small">
                    <el-table :data="model.newTableData">
                        <el-table-column align="left" label="序号" prop="number">
                            <template slot-scope="scope">
                                {{scope.row.number = scope.$index + 1}}
                            </template>
                        </el-table-column>
                        <el-table-column align="left" prop="address" label="取样地点">
                            <template slot-scope="scope">
                                <el-form-item v-show="scope.row.edit" style="margin: 0" :prop="'newTableData.' + scope.$index + '.address'" :show-message="false" :rules="model.rules.address">
                                    <el-input maxlength="64" v-focus v-model="scope.row.address"></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column align="left" prop="isDef" label="是否默认">
                            <template slot-scope="scope">
                                <el-switch v-model="scope.row.isDef" @change="switchChange(scope.row.isDef,scope.$index)">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="120px" align="left" class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                                <el-popconfirm title="确认删除该条记录？" @onConfirm="deleteDetails(scope.row,scope.$index)">
                                    <el-link type="primary" slot="reference">删除</el-link>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form>
                <el-row class="newConstruction">
                    <div @click="newSampling">
                        <span>+</span>
                        <span>添加取样地点</span>
                    </div>
                </el-row>
            </div>
        </DoorView>
    </div>
</template>

<script>
import DoorView from "@/components/YuComponents/DoorView.vue";
export default {
    name: 'samplesComponent',
    props: {
        tableData: {
            type: Array,
            default: () => {
                return [{
                    address: '',
                    isDef: false,
                    number: null,
                    edit: true
                }]
            }
        },
        //父组件重新渲染方法
        hongxin: {
            type: Function,
            default: () => {
                return function () {}
            }
        }
    },
    data() {
        return {
            model: {
                newTableData: [], //新建表格数据
                rules: {
                    address: [{
                        required: true,
                        trigger: "blur"
                    }]
                }
            },
            tabloding: false
        }
    },
    components: {
        DoorView
    },
    directives: {
        focus: {
            inserted: function (el) {
                el.querySelector('input').focus()
            }
        }
    },
    mounted() {
        // this.$nextTick(() => {
        //     this.$refs.getFocus.focus()
        // })
    },
    methods: {
        oncellClick(event) {
            this.$nextTick(function () {
                // $(event.target).children(".destion").children("input").focus();
                console.log(event.target.parentNode.parentNode.parentNode.parentNode.children[1]);
            })
        },
        jumpDetails(record, index) {
            // console.log(document.querySelectorAll('.addressItem')[index]);
            // console.log(index);
            this.model.newTableData = this.model.newTableData.map((item, idx) => {
                if (index == idx) {
                    item.edit = true
                }
                return item
            })
        },
        //新增取样地点
        newSampling() {
            let add = this.model.newTableData && this.model.newTableData.length ? this.model.newTableData.length + 1 : 1
            this.model.newTableData.push({
                address: '地点' + add,
                isDef: false,
                number: null,
                edit: true
            })
        },
        //默认开关切换
        switchChange(edit, index) {
            if (edit) {
                this.model.newTableData = this.model.newTableData.map((item, idx) => {
                    if (index == idx) {
                        item.isDef = edit
                    } else {
                        item.isDef = false
                    }
                    return item
                })
            }
        },

        // saveSampleAddress(){

        // },
        //编辑 保存
        async saveSampleAddress(query) {
            this.tabloding = true
            let valids = false
            this.$refs["form"].validate(valid => {
                valids = valid
                if (!query.address) {
                    this.$message.warning('样品取样地点不能为空')
                    return
                } else {
                    valids = true
                }
            })
            query.sampleId = this.$route.query.id || null
            if (valids) {
                const res = await this.$api.sampleTemplateManagement.saveSampleAddress(query).then(response => {
                    if (response.code === 200) {
                        this.hongxin()
                    }
                })
                    this.tabloding = false
            }
        },
        //编辑删除
        async deleteSampleAddress(query) {
            const res = await this.$api.sampleTemplateManagement.deleteSampleAddress(query).then(response => {
                if (response.code === 200) {
                    this.hongxin()
                }
            })
        },
        // 删除 无id
        deleteDetails(record, index) {
            this.model.newTableData.splice(index, 1)
        },
    },
    watch: {
        tableData() {
            this.model.newTableData = this.tableData
        }
    }
}
</script>

<style lang="scss">
.newConstruction {
    width: 100%;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    cursor: pointer;
}
</style>
