<template>
    <div class="center">
        <div class="left">
            <a-card size="small" title="选择点位" style="width: 100%;">
                <a slot="extra" @click="handleQR">确认</a>
                <a-form layout="inline" @keyup.enter.native="getPointOptions">
                    <a-form-item>
                        <a-input v-model="queryParam.tagname" placeholder="输入点位名，回车查询"/>
                    </a-form-item>
                </a-form>
                <a-table
                ref="table"
                size="small"
                :scroll="{x:true}"
                bordered
                rowKey="id"
                :columns="columns"
                :dataSource="dataPoint"
                :pagination="false"
                :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                class="j-table-force-nowrap">
                </a-table>
            </a-card>
        </div>
        <div class="right">
            <j-form-container>
                <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
                    <div class="top">
                        <a-card size="small" title="选择设备" style="width: 100%;">
                            <div style="height: 100%;width:100%;display: flex;">
                                <div style="height: 100%;width:95%;">
                                    <!-- <j-form-container>
                                        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail"> -->
                                                <a-form-model-item label="设备名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentid">
                                                    <!-- bug:不能搜索 （解决：a-form-model加上slot="detail"）-->
                                                    <j-search-select-tag v-model="model.equipmentid" placeholder="请选择设备" dict="tpm_equipment,equipmentname,id"  />
                                                </a-form-model-item>
                                        <!-- </a-form-model>
                                    </j-form-container> -->
                                </div>
                                <div style="height: 100%;width:5%;padding-top:0.3%;">
                                    <a-button type="primary" icon="search" />
                                </div>
                            </div>
                        </a-card>
                    </div>
                    <div class="bottom">
                        <a-card size="small" title="设置点位信息" style="width: 100%;">
                            <a-table
                            size="small"
                            :columns="columnsR"
                            :dataSource="model.data"
                            :pagination="false"
                            :rowKey="(record, index) => { return index }"
                            bordered
                            class="j-table-force-nowrap"
                            >
                                <template slot="tagname" slot-scope="text, record,index">
                                    <!--  -->
                                    <a-form-model-item :prop="'data.'+index+'.tagname'" :rules="validatorRules.tagname" style="margin-bottom: 0px;">
                                        <!-- <a-input v-model="record.tagname"></a-input> -->
                                        {{ record.tagname }}
                                    </a-form-model-item>
                                </template>
                                <!-- <template slot="tagaddress" slot-scope="text, record,index">
                                    <a-form-model-item :prop="'data.'+index+'.tagaddress'" :rules="validatorRules.tagaddress" style="margin-bottom: 0px;">
                                        <a-input v-model="record.tagaddress"></a-input>
                                    </a-form-model-item>
                                </template> -->
                                <template slot="tagtype" slot-scope="text, record,index">
                                    <a-form-model-item :prop="'data.'+index+'.tagtype'" :rules="validatorRules.tagtype" style="margin-bottom: 0px;">
                                        <!-- <j-search-select-tag v-model="record.tagtype" placeholder="请选择点位类型" dict="tpm_tag_type"/> -->
                                        <a-select
                                        v-model="record.tagtype"
                                        showSearch
                                        :filterOption="filterOption"
                                        placeholder="请选择点位类型"
                                        :options="tagTypeOptions">
                                        </a-select>
                                    </a-form-model-item>
                                </template>
                                <template slot="energytypeid" slot-scope="text, record,index">
                                    <a-form-model-item :prop="'data.'+index+'.energytypeid'" :rules="validatorRules.energytypeid" style="margin-bottom: 0px;">
                                        <!-- <j-search-select-tag v-model="record.energytypeid" placeholder="请选择能源分类" dict="base_energy_type,name,id"/> -->
                                        <a-select
                                        v-model="record.energytypeid"
                                        showSearch
                                        :filterOption="filterOption"
                                        @change="handleChange(index)"
                                        placeholder="请选择能源分类"
                                        :options="energytypeOptions">
                                        </a-select>
                                    </a-form-model-item>
                                </template>
                                <template slot="energyitemid" slot-scope="text, record,index">
                                    <a-form-model-item :prop="'data.'+index+'.energyitemid'" :rules="validatorRules.energyitemid" style="margin-bottom: 0px;">
                                        <!-- <j-search-select-tag v-model="record.energyitemid" placeholder="请选择能耗分项" dict="base_energy_item,energyitemname,id"/> -->
                                        <a-tooltip>
                                            <template slot="title">
                                            请先选择能源分类
                                            </template>
                                            <a-select
                                            v-model="record.energyitemid"
                                            showSearch
                                            :filterOption="filterOption"
                                            placeholder="请选择能耗分项"
                                            @change="handleChange2"
                                            :options="energyitemOptions">
                                            </a-select>
                                        </a-tooltip>
                                    </a-form-model-item>
                                </template>
                                <template slot="max" slot-scope="text, record,index">
                                    <a-form-model-item :prop="'data.'+index+'.max'" :rules="validatorRules.max" style="margin-bottom: 0px;">
                                        <a-input-number v-model="record.max" placeholder="请输入上限" style="width: 100%" />
                                    </a-form-model-item>
                                </template>
                                <template slot="min" slot-scope="text, record,index">
                                    <a-form-model-item :prop="'data.'+index+'.min'" :rules="validatorRules.min" style="margin-bottom: 0px;">
                                        <a-input-number v-model="record.min" placeholder="请输入下限" style="width: 100%" />
                                    </a-form-model-item>
                                </template>
                                <template slot="delay" slot-scope="text, record,index">
                                    <a-form-model-item :prop="'data.'+index+'.delay'" :rules="validatorRules.delay" style="margin-bottom: 0px;">
                                        <a-input-number v-model="record.delay" placeholder="请输入报警延时(分钟)" style="width: 100%" />
                                    </a-form-model-item>
                                </template>
                                <template slot="param1" slot-scope="text, record,index">
                                    <a-form-model-item :prop="'data.'+index+'.param1'" :rules="validatorRules.param1" style="margin-bottom: 0px;">
                                        <a-input v-model="record.param1" placeholder="请输入其他值1"  ></a-input>
                                    </a-form-model-item>
                                </template>
                                <template slot="param2" slot-scope="text, record,index">
                                    <a-form-model-item :prop="'data.'+index+'.param2'" :rules="validatorRules.param2" style="margin-bottom: 0px;">
                                        <a-input v-model="record.param2" placeholder="请输入其他值2"  ></a-input>
                                    </a-form-model-item>
                                </template>
                                <template slot="operation" slot-scope="text, record">
                                    <span>
                                        <a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
                                            <a>删除</a>
                                        </a-popconfirm>
                                        </span>
                                </template>
                            </a-table>
                        </a-card>
                    </div>
                </a-form-model>
            </j-form-container>
        </div>
    </div>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import {ajaxGetDictItems,getDictItemsFromCache} from '@/api/api'

export default {
    name: 'TagFormPL1',
    components: {
    },
    data () {
        return {
            queryParam: {},
            // 左侧表格表头
            columns: [
                {
                    title:'点位名',
                    align:"center",
                    dataIndex: 'tagname'
                },
            ],
            // 右侧表格表头
            columnsR: [
                // {
                // title: '样品名称',
                // dataIndex: 'sampleName',
                // key: 'sampleName',
                // align: 'center',
                // scopedSlots: { customRender: 'sampleName' }
                // },
                {
                title: '点位名称',
                dataIndex: 'tagname',
                key: 'tagname',
                align: 'center',
                width: '12%',
                scopedSlots: { customRender: 'tagname' }
                },
                // {
                // title: '点位地址',
                // dataIndex: 'tagaddress',
                // key: 'tagaddress',
                // align: 'center',
                // scopedSlots: { customRender: 'tagaddress' }
                // },
                {
                title: '点位类型',
                dataIndex: 'tagtype',
                key: 'tagtype',
                align: 'center',
                width: '10%',
                scopedSlots: { customRender: 'tagtype' }
                },
                {
                title: '能源分类',
                dataIndex: 'energytypeid',
                key: 'energytypeid',
                align: 'center',
                width: '12%',
                scopedSlots: { customRender: 'energytypeid' }
                },
                {
                title: '能耗分项',
                dataIndex: 'energyitemid',
                key: 'energyitemid',
                align: 'center',
                width: '12%',
                scopedSlots: { customRender: 'energyitemid' }
                },
                {
                title: '上限',
                dataIndex: 'max',
                key: 'max',
                align: 'center',
                scopedSlots: { customRender: 'max' }
                },
                {
                title: '下限',
                dataIndex: 'min',
                key: 'min',
                align: 'center',
                scopedSlots: { customRender: 'min' }
                },
                {
                title: '报警延时(分钟)',
                dataIndex: 'delay',
                key: 'delay',
                align: 'center',
                scopedSlots: { customRender: 'delay' }
                },
                {
                title: '其他值1',
                dataIndex: 'param1',
                key: 'param1',
                align: 'center',
                scopedSlots: { customRender: 'param1' }
                },
                {
                title: '其他值2',
                dataIndex: 'param2',
                key: 'param2',
                align: 'center',
                scopedSlots: { customRender: 'param2' }
                },
                // {
                // title: '当前点位值',
                // dataIndex: 'tagvalue',
                // key: 'tagvalue',
                // align: 'center',
                // scopedSlots: { customRender: 'tagvalue' }
                // },
                // {
                // title: '获得时间',
                // dataIndex: 'logtime',
                // key: 'logtime',
                // align: 'center',
                // scopedSlots: { customRender: 'logtime' }
                // },
                {
                title: '操作',
                key: 'action',
                align: 'center',
                fixed:"right",
                scopedSlots: { customRender: 'operation' }
                }
            ],
            /* table选中keys*/
            selectedRowKeys: [],
            /* table选中records*/
            selectionRows: [],
            url: {
                add: "/tpmTag/tpmTag/saveBatch",
                getPoint: "/tpmIoserverTag/tpmIoserverTag/tagList",
                getEnergytype: "/energyType/energyType/xialaList",
                getEnergyitem: "/energyItem/energyItem/xialaList",
            },
            // 点位数据
            dataPoint: [],
            count: 1,
            model:{
                data: []
            },
            labelCol: {
                xs: { span: 24 },
                sm: { span: 2 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 22 },
            },
            validatorRules: {
                equipmentid: [
                    { required: true, message: '请选择设备!'},
                ],
                tagtype: [
                    { required: true, message: '请选择点位类型!'},
                ],
            },
            dictCode: 'tpm_tag_type',
            dictCode2: 'base_energy_type',
            dictCode3: 'base_energy_item',
            tagTypeOptions: [],
            // 能源分类
            energytypeOptions: [],
            // 能耗分项
            energyitemOptions: [],
            }
    },
    created () {
      // 获取点位数据
      this.getPointOptions()
      this.initDictData()
      // 获取能源分类
      this.getEnergytypeOptions()
    },
    methods: {
        initDictData() {
            //优先从缓存中读取字典配置
            if(getDictItemsFromCache(this.dictCode)){
            this.tagTypeOptions = getDictItemsFromCache(this.dictCode);
            return
            }

            //根据字典Code, 初始化字典数组
            ajaxGetDictItems(this.dictCode, null).then((res) => {
            if (res.success) {
                console.log(111,res)
                this.tagTypeOptions = res.result;
            }
            })
        },
        // // a-select可搜索
        // handleInput(e='') {
        //     console.log(111,e,this.tagTypeOptions)
        //     var resultArr = [];
 
        //     // 遍历数组中的每个对象
        //     for (let i = 0; i < this.tagTypeOptions.length; i++) {
        //         // 判断当前对象的name属性是否包含指定的关键字
        //         if (this.tagTypeOptions[i].label.includes(e)) {
        //             // 如果包含则将该对象添加到结果数组中
        //             resultArr.push(this.tagTypeOptions[i]);
        //         }
        //     }
        //     console.log(999,resultArr);
        //     this.tagTypeOptions = resultArr
        //     return this.tagTypeOptions
        // },
        filterOption (value, option) {
            return option.componentOptions.children[0].text.indexOf(value) >= 0
        },
        setCurrentDictOptions(tagTypeOptions){
            this.tagTypeOptions = tagTypeOptions
        },
        getCurrentDictOptions(){
            return this.tagTypeOptions
        },
        // 获取点位数据
        getPointOptions() {
            getAction(this.url.getPoint, this.queryParam).then((res) => {
                this.dataPoint = res.result.map(item => {
                    return {
                    id: item.id,
                    tagname: item.tagname
                    }
                })
            })
        },
        getEnergytypeOptions(){
            getAction(this.url.getEnergytype).then((res) => {
            console.log(111,res.result)
            this.energytypeOptions = res.result.map(item => {
                return {
                value: item.id,
                label: item.name
                }
            })
            })
        },
        getEnergyitemOptions(){
            getAction(this.url.getEnergyitem,{energytypeid:this.model.energytypeid}).then((res) => {
            this.energyitemOptions = res.result.map(item => {
                return {
                value: item.id,
                label: item.energyitemname
                }
            })
            })
        },
        handleChange(index){
            console.log(22,index)
            this.$set(this.model.data[index], "energyitemid", null);
            var energytypeid = this.model.data[index].energytypeid;
            console.log(7999,energytypeid)
            getAction(this.url.getEnergyitem,{energytypeid:energytypeid}).then((res) => {
            console.log(333,res.result)
            this.energyitemOptions = res.result.map(item => {
                return {
                value: item.id,
                label: item.energyitemname
                }
            })
            })
        },
        handleChange2(){
            // 解决选不中问题
            this.model = {...this.model}
        },
        onSelectChange(selectedRowKeys, selectionRows) {
            console.log(selectedRowKeys, selectionRows)
            this.selectedRowKeys = selectedRowKeys;
            this.selectionRows = selectionRows;
        },
        onClearSelected() {
            this.selectedRowKeys = [];
            this.selectionRows = [];
        },
        handleQR() {
            console.log(77,this.selectionRows)
            this.model.data = []
            for (let i = 0; i < this.selectionRows.length; i++) {
                const element = this.selectionRows[i];
                console.log(88,element)
                this.model.data.push({
                    key: this.count + '',
                    tagname: element.tagname,
                })
                this.count++
            }
            console.log(99,this.model.data)
        },
        remove(key) {
            console.log(key)
            const newData = this.model.data.filter(item => item.key !== key)
            this.model.data = newData
        },
        submitForm () {
            const that = this;
            // 触发表单验证
            this.$refs.form.validate(valid => {
            if (valid) {
                console.log(this.model)
                let httpurl = '';
                let method = '';
                const a = this.model.data.map(item=>{
                    var obj = item
                    obj.equipmentid = this.model.equipmentid
                    return obj
                    // return {
                    //     tagname: item.tagname,
                    //     tagaddress: item.tagaddress,
                    //     equipmentid: this.model.equipmentid
                    // }
                })
                console.log(a)
                httpurl+=this.url.add;
                method = 'post';
                httpAction(httpurl,a,method).then((res)=>{
                    if(res.success){
                        that.$message.success(res.message);
                        that.$emit('ok');
                    }else{
                        that.$message.warning(res.message);
                    }
                })
            }
            
            })
        },
    }
}
</script>

<style scoped>
.center{
    height: calc(100vh - 150px);
    width: 100%;
    display: flex;
}
.left{
    height: 100%;
    width: 25%;
    /* border: 2px solid red; */
}
.right{
    height: 100%;
    width: 75%;
    padding-left: 1%;
    /* border: 2px solid red; */
}
.top{
    height: 18%;
    width: 100%;
    display: flex;
    padding-bottom: 1%;
    /* border: 2px solid red; */
}
.bottom{
    height: calc(100vh - 284px);
    width: 100%;
    display: flex;
    /* border: 2px solid red; */
}
/* 更改a-input样式 */
::v-deep .a-input .ant-form-inline .ant-form-item{
    width: 100% !important;
}
::v-deep .ant-row{
    width: 100% !important;
}
::v-deep .ant-form-inline .ant-form-item > .ant-form-item-control-wrapper, .ant-form-inline .ant-form-item > .ant-form-item-label{
    width: 100% !important;
}
</style>
