<template>
    <div class="sampleCustomInformationCom">
        <DoorView title="样品自定义信息">
            <div slot="main">
                <el-form v-if="$route.query.status == 1" :model="model" :rules="model.rules" ref="form" size="small">
                    <el-table v-loading="tabloding" :data="model.newTableData" row-key="key">
                        <el-table-column align="left" label="序号">
                            <template slot-scope="scope">
                                {{scope.row.number = scope.$index + 1}}
                            </template>
                        </el-table-column>
                        <el-table-column align="left" prop="fieldName" label="字段名称">
                            <template slot-scope="scope">
                                <el-form-item v-show="scope.row.edit" style="margin: 0" :prop="'newTableData.' + scope.$index + '.fieldName'" :show-message="false" :rules="model.rules.fieldName">
                                    <el-input v-model="scope.row.fieldName"></el-input>
                                </el-form-item>
                                <span v-show="!scope.row.edit">{{scope.row.fieldName}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="left" prop="required" label="是否必填">
                            <template slot-scope="scope">
                                <el-switch v-show="scope.row.edit" v-model="scope.row.required">
                                </el-switch>
                                <el-switch v-show="!scope.row.edit" disabled v-model="scope.row.required">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column align="left" prop="fieldType" label="输入类型">
                            <template slot-scope="scope">
                                <span v-show="!scope.row.edit">{{scope.row.fieldTextName}}</span>
                                <el-select v-show="scope.row.edit" @change="typeSwitchChange(scope.row.fieldType,scope.$index)" v-model="scope.row.fieldType" placeholder="请选择">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column align="left" prop="valueAttributes" label="name">
                            <template slot="header">
                                <span>输入属性</span>
                                <el-tooltip class="item" placement="top">
                                    <div slot="content">
                                        <div v-for="(item,index) in tooltipContentData" :key="index">
                                            {{item.name}}
                                        </div>
                                    </div>
                                    <i class="el-icon-warning"></i>
                                </el-tooltip>
                            </template>
                            <template slot-scope="scope">
                                <div v-show="scope.row.edit">
                                    <el-form-item v-if="scope.row.fieldType != 4" style="margin: 0" :prop="'newTableData.' + scope.$index + '.valueAttributes'" :show-message="false" :rules="model.rules.valueAttributes">
                                        <el-select style="width:180px" v-if="scope.row.fieldType == 2" v-model="scope.row.valueAttributes" placeholder="请选择">
                                            <el-option v-for="(item,index) in dictionaryList" :key="index" :label="item.optionName" :value="item.optionName">
                                            </el-option>
                                        </el-select>
                                        <el-input style="width:180px" maxlength="1" v-else-if="scope.row.fieldType == 3" @change="typeNumberCheck(scope.row.valueAttributes,scope.$index)"  v-model="scope.row.valueAttributes"></el-input>
                                        <el-input style="width:180px" v-if="!scope.row.fieldType" maxlength="64" v-model="scope.row.valueAttributes"></el-input>
                                        <el-input style="width:180px" v-if="scope.row.fieldType == 1" maxlength="64" v-model="scope.row.valueAttributes"></el-input>
                                    </el-form-item>
                                    <el-date-picker v-if="scope.row.fieldType == 4" style="width:180px" v-model="scope.row.valueAttributes" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </div>
                                <span v-show="!scope.row.edit">{{scope.row.valueAttributes}}</span>
                            </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-if="!scope.row.edit" @click="jumpDetails(scope.row,scope.$index)" type="primary">编辑</el-link>
                                <el-link v-else @click="saveSampleCustomizeInfo(scope.row,scope.$index)" type="primary">保存</el-link>
                                <el-popconfirm v-if="scope.row.id" title="确认删除该条记录？" @onConfirm="deleteSampleCustomizeInfo(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 v-loading="tabloding" :data="model.newTableData">
                        <el-table-column align="left" label="序号">
                            <template slot-scope="scope">
                                {{scope.row.number = scope.$index + 1}}
                            </template>
                        </el-table-column>
                        <el-table-column align="left" prop="fieldName" label="字段名称">
                            <template slot-scope="scope">
                                <el-form-item style="margin: 0" :prop="'newTableData.' + scope.$index + '.fieldName'" :show-message="false" :rules="model.rules.fieldName">
                                    <el-input v-model="scope.row.fieldName"></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column align="left" prop="required" label="是否必填">
                            <template slot-scope="scope">
                                <el-switch v-model="scope.row.required">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column align="left" prop="fieldType" label="输入类型">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.fieldType" @change="typeSwitchChange(scope.row.fieldType,scope.$index)" placeholder="请选择">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column align="left" prop="valueAttributes" label="name">
                            <template slot="header">
                                <span>输入属性</span>
                                <el-tooltip class="item" placement="top">
                                    <div slot="content">
                                        <div v-for="(item,index) in tooltipContentData" :key="index">
                                            {{item.name}}
                                        </div>
                                    </div>
                                    <i class="el-icon-warning"></i>
                                </el-tooltip>
                            </template>
                            <template slot-scope="scope">
                                <div v-show="scope.row.edit">
                                    <el-form-item v-if="scope.row.fieldType != 4" style="margin: 0" :prop="'newTableData.' + scope.$index + '.valueAttributes'" :show-message="false" :rules="model.rules.valueAttributes">
                                        <el-select style="width:180px" v-if="scope.row.fieldType == 2" v-model="scope.row.valueAttributes" placeholder="请选择">
                                            <el-option v-for="(item,index) in dictionaryList" :key="index" :label="item.optionName" :value="item.optionName">
                                            </el-option>
                                        </el-select>
                                        <el-input style="width:180px" v-else-if="scope.row.fieldType == 3" @change="typeNumberCheck(scope.row.valueAttributes,scope.$index)" maxlength="1" v-model="scope.row.valueAttributes"></el-input>
                                        <el-input style="width:180px" v-if="!scope.row.fieldType" maxlength="64"  v-model="scope.row.valueAttributes"></el-input>
                                        <el-input style="width:180px" v-if="scope.row.fieldType == 1" maxlength="64" v-model="scope.row.valueAttributes"></el-input>
                                    </el-form-item>
                                    <el-date-picker v-if="scope.row.fieldType == 4" style="width:180px" v-model="scope.row.valueAttributes" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </div>
                                <span v-show="!scope.row.edit">{{scope.row.valueAttributes}}</span>
                            </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 []
            }
        },
        //父组件重新渲染方法
        hongxin: {
            type: Function,
            default: () => {
                return function () {}
            }
        }
    },
    data() {
        return {
            model: {
                rules: {
                    fieldName: [{
                        required: true,
                        trigger: "blur"
                    }],
                    valueAttributes: [{
                        required: true,
                        trigger: "change"
                    }],
                },
                newTableData: [],
            },
            //新建表格数据
            //输入类型
            options: [{
                value: 1,
                label: '文本'
            }, {
                value: 2,
                label: '选项'
            }, {
                value: 3,
                label: '数值'
            }, {
                value: 4,
                label: '日期'
            }],
            tooltipContentData: [{
                    name: '输入类型为文本时，请输入最大字符长度；'
                },
                {
                    name: '输入类型为选项时，请输入字典项的code；'
                },
                {
                    name: '输入类型为数值时，请输入保留小数位数；'
                },
                {
                    name: '输入类型为日期时，可不填此项；'
                }
            ],
            dictionaryList:[], //字典选项数据
            tabloding:false
        }
    },
    components: {
        DoorView
    },
    methods: {
        typeNumberCheck(value,index){
            if(isNaN(value)){
                // this.$set(this.newTableData[index],'valueAttributes',null)
                console.log(this.model.newTableData[index],'375');
                this.model.newTableData[index].valueAttributes = null
                // console.log(value,'2');
            }
        },
        //编辑
        jumpDetails(record, index) {
            this.model.newTableData = this.model.newTableData.map((item, idx) => {
                if (index == idx) {
                    item.edit = true
                }
                return item
            })
        },
        //删除  新建 无id 删除
        deleteDetails(record, index) {
            this.model.newTableData.splice(index, 1)
        },
        //编辑删除
        async deleteSampleCustomizeInfo(query) {
            const res = await this.$api.sampleTemplateManagement.deleteSampleCustomizeInfo(query).then(response => {
                if (response.code === 200) {
                    this.hongxin()
                }
            })
        },
        typeSwitchChange(value, index) {
            if (value) {
                this.$set(this.model.newTableData[index], 'valueAttributes', '')
            }
        },
        //编辑单条保存
        async saveSampleCustomizeInfo(query = {}, index) {
            let valids = false
            this.$refs["form"].validate(valid => {
                valids = valid
                if (!query.fieldName) {
                    this.$message.warning('字段名称不能为空')
                    return
                } else if (!query.valueAttributes && query.valueAttributes !== 0 && query.fieldType != 4) {
                    this.$message.warning('输入属性不能为空')
                    valids = false
                    return
                } else {
                    valids = true
                }
            })
            query.sampleId = this.$route.query.id || null
            if (valids) {
                this.tabloding = true
                const res = await this.$api.sampleTemplateManagement.saveSampleCustomizeInfo(query).then(response => {
                    if (response.code === 200) {
                        this.hongxin()
                    }
                })
                    this.tabloding = false
            }
        },
        //编辑保存
        saveDetails(record, index) {
            this.$set(this.model.newTableData[index], 'edit', false)
        },
        //新增取样地点
        newSampling() {
            this.model.newTableData.push({
                fieldName: '',
                fieldType: null,
                number: null,
                required: false,
                valueAttributes: '',
                edit: true
            })
            console.log(this.model.newTableData);
        },
        //样品模板详情--自定义信息--选项--字典项列表
        async listSampleCustomizeInfoDictOption(){
            const res = await this.$api.sampleTemplateManagement.listSampleCustomizeInfoDictOption().then(response => {
                if(response.code === 200){
                    this.dictionaryList = response.data
                }
            })
        },
    },
    watch: {
        tableData() {
            this.model.newTableData = this.tableData
        }
    },
    created(){
        this.listSampleCustomizeInfoDictOption()
    }
}
</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>
