<template>
    <div class="singleWrapper h100 table-wrapper">
        <my-table
            ref="esTable"
            :esTableObj="esTableObj"
            @btnFn="btnFn"
            @pageNumFn="pageNumFn"
            inquireFn="inquireBtn"
            @selectChangeFn="selectChangeFn"
        />
    </div>
</template>
<script>
import Data from './data.js';
import MyTable from '../../src/components/table/table';
export default {
    components: {
        MyTable
    },
    data() {
        return {
            showImportBatch: false, // 是否展示批量导入弹框
            devTypeList: [],
            factoryList: [],
            manageTypeList: [],
            meterAttrList: [],
            fixDirectList: [],
            stateList: [],
            meterParamFullList: [],
            editData: null,
            ids: [],
            makeDate: [],
            // table组件配置
            // esTableObj: {
            //     queryObj: {
            //         col: 3, //form表单要显示几列
            //         btnConcat: true, //是否在默认按钮的基础上增加新的按钮
            //         dictArr: {
            //             factoryPkid: [],
            //             meterType: [],
            //             state: [],
            //             meterAttr: [],
            //             meterManageType: []
            //         },
            //         //表单
            //         formArr: [
            //             {
            //                 name: '表号',
            //                 type: 0,
            //                 key: 'meterNo',
            //                 isShow: false
            //             },
            //             {
            //                 name: '厂商',
            //                 type: 1,
            //                 key: 'factoryPkid',
            //                 isShow: false
            //             },
            //             {
            //                 name: '户号',
            //                 type: 0,
            //                 key: 'userNo',
            //                 isShow: false
            //             },
            //             {
            //                 name: '生产日期',
            //                 type: 5,
            //                 key: 'startTime-endTime',
            //                 isShow: false
            //             },
            //             {
            //                 name: '表具类型',
            //                 type: 1,
            //                 key: 'meterType',
            //                 isShow: false
            //             },
            //             {
            //                 name: '表具型号',
            //                 type: 0,
            //                 key: 'meterModelId',
            //                 isShow: false
            //             },
            //             {
            //                 name: '表具状态',
            //                 type: 1,
            //                 key: 'state',
            //                 isShow: false
            //             },
            //             {
            //                 name: '表具管理模式',
            //                 type: 1,
            //                 key: 'meterManageType',
            //                 isShow: false
            //             }
            //         ],
            //         btnArr: [
            //             // {
            //             //     name: '新按钮',
            //             //     id: 'newbtn1',
            //             //     disabled: false
            //             // }
            //         ]
            //     },
            //     tableObj: {
            //         loading: false,
            //         btnNewLine: true, //右侧按钮是否占领100%宽度
            //         autoHeight: true, //true自适应高度  false不自适应高度
            //         offsetTop: 100, //设置table高度偏差，autoHeight为false时候才有效
            //         //右侧按钮组
            //         btnArr: [
            //             {
            //                 name: '零星开户',
            //                 id: 'lxkh',
            //                 disabled: false
            //             },
            //             {
            //                 name: '开户',
            //                 id: 'kh',
            //                 disabled: true
            //             },
            //             {
            //                 name: '过户',
            //                 id: 'gh',
            //                 disabled: true,
            //                 advance: true
            //             },
            //             {
            //                 name: '销户',
            //                 id: 'xh',
            //                 disabled: true,
            //                 advance: true
            //             },
            //             {
            //                 name: '表处理',
            //                 id: 'bcl',
            //                 disabled: true,
            //                 advance: true
            //             }
            //         ],
            //         columns: [
            //             {
            //                 type: 'selection',
            //                 width: 50
            //             },
            //             {
            //                 title: '表号',
            //                 width: 140,
            //                 key: 'meterNo'
            //             },
            //             {
            //                 title: '户号',
            //                 width: 140,
            //                 key: 'userNo'
            //             },
            //             {
            //                 title: '表具类型',
            //                 width: 140,
            //                 key: 'meterTypeValue'
            //             },
            //             {
            //                 title: '表具型号',
            //                 width: 140,
            //                 key: 'meterModelId'
            //             },
            //             {
            //                 title: '厂商',
            //                 width: 180,
            //                 key: 'factoryName'
            //             },
            //             {
            //                 title: '表具性质',
            //                 width: 100,
            //                 key: 'meterAttrValue'
            //             },
            //             {
            //                 title: '生产日期',
            //                 width: 120,
            //                 key: 'makeDate'
            //             },
            //             {
            //                 title: '表具状态',
            //                 width: 100,
            //                 key: 'stateDes'
            //             },
            //             {
            //                 title: '口径',
            //                 width: 100,
            //                 key: 'caliber'
            //             },
            //             {
            //                 title: '表具承压',
            //                 width: 100,
            //                 key: 'press'
            //             },
            //             {
            //                 title: '表向',
            //                 width: 100,
            //                 key: 'meterDirectValue'
            //             },
            //             {
            //                 title: '表程',
            //                 width: 100,
            //                 key: 'meterRange'
            //             },
            //             {
            //                 title: '液显',
            //                 width: 100,
            //                 key: 'showRange'
            //             },
            //             {
            //                 title: '倍率',
            //                 width: 100,
            //                 key: 'rate'
            //             },
            //             {
            //                 title: '最大流量',
            //                 width: 100,
            //                 key: 'maxFlowRate'
            //             },
            //             {
            //                 title: '年限',
            //                 width: 100,
            //                 key: 'years'
            //             },
            //             {
            //                 title: '操作',
            //                 width: 100,
            //                 align: 'center',
            //                 fixed: 'right',
            //                 render: (h, params) => {
            //                     const ths = this;
            //                     let ops = [];

            //                     ops.push(
            //                         h(
            //                             'span',
            //                             {
            //                                 style: {
            //                                     marginRight: '10px',
            //                                     color: '#459DEE',
            //                                     cursor: 'pointer'
            //                                 },
            //                                 on: {
            //                                     click: () => {
            //                                         ths.edit(params.row);
            //                                     }
            //                                 }
            //                             },
            //                             '编辑'
            //                         )
            //                     );

            //                     return h('div', ops);
            //                 }
            //             }
            //         ],
            //         data: [],
            //         pageObj: {
            //             total: 0,
            //             pageNum: 1,
            //             pageSize: 10
            //         }
            //     }
            // },
            // 临时
            // 查询条件
            queryConditionList: [
                {
                    name: '用户姓名',
                    type: 0,
                    key: 'userName',
                    isShow: false
                },
                {
                    name: '用户号',
                    type: 0,
                    key: 'userNo',
                    isShow: false
                },
                {
                    name: '用户类型',
                    type: 1,
                    key: 'userType',
                    isShow: false
                },
                {
                    name: '用气类型',
                    type: 1,
                    key: 'gasUseType',
                    isShow: false
                },
                {
                    name: '联系电话',
                    type: 0,
                    key: 'telephone',
                    isShow: false
                },
                {
                    name: '地址',
                    type: 0,
                    key: 'address',
                    isShow: false
                },
                {
                    name: '表具类型',
                    type: 1,
                    key: 'meterType',
                    isShow: false
                },
                {
                    name: '是否分配',
                    type: 1,
                    key: 'distribute',
                    isShow: false
                },
                {
                    name: '操作年数',
                    type: 1,
                    key: 'nYearsNotExec',
                    isShow: false
                }
            ],
            // 查询条件固定数据源
            queryConditionModel: {
                userType: [
                    {
                        key: '1',
                        value: '居民'
                    },
                    {
                        key: '2',
                        value: '非居民'
                    }
                ],
                gasUseType: [
                    {
                        key: '1',
                        value: '居民'
                    },
                    {
                        key: '2',
                        value: '非居民'
                    }
                ],
                meterType: [
                    {
                        key: '1',
                        value: '居民'
                    },
                    {
                        key: '2',
                        value: '非居民'
                    }
                ],
                distribute: [
                    {
                        key: '1',
                        value: '居民'
                    },
                    {
                        key: '2',
                        value: '非居民'
                    }
                ],
                nYearsNotExec: []
            },
            // 功能性按钮
            functionalBtn: [
                {
                    name: '生成安检计划',
                    type: 'primary',
                    id: 'createSecurityPlan'
                },
                {
                    name: '生成零散计划',
                    type: 'primary',
                    id: 'createScatteredPlan',
                    advance: true
                },
                {
                    name: '新增用户',
                    type: 'primary',
                    id: 'addUser',
                    advance: true
                },
                {
                    name: '拉黑',
                    type: 'default',
                    id: 'blacklist',
                    advance: true
                },
                {
                    name: '撤销拉黑',
                    type: 'default',
                    id: 'unblacklist',
                    advance: true
                },
                {
                    name: '排序',
                    type: 'default',
                    id: 'order',
                    advance: true
                },
                {
                    name: '同步数据',
                    type: 'default',
                    id: 'synchrodata',
                    advance: true
                }
            ],
            esTableObj: {
                // queryObj: {
                //     display: true, //是否显示form区域块
                //     dictArr: this.queryConditionModel,
                //     formArr: this.queryConditionList,
                //     btnConcat: true,
                //     col: 4
                // },
                tableObj: {
                    selectable: true,
                    loading: false,
                    btnArr: this.functionalBtn,
                    simplePage: true,
                    columns: [
                        {
                            type: 'selection',
                            minWidth: 60,
                            align: 'center'
                        },
                        {
                            title: '排序号',
                            minWidth: 80,
                            key: 'sortNo'
                        },
                        {
                            title: '是否分配',
                            minWidth: 90,
                            key: 'isDistribute'
                        },
                        {
                            title: '是否拉黑',
                            minWidth: 90,
                            key: 'blackFlag'
                        },
                        {
                            title: '用户号',
                            minWidth: 110,
                            key: 'userNo'
                        },
                        {
                            title: '用户名称',
                            minWidth: 90,
                            key: 'userName'
                        },
                        {
                            title: '用户地址',
                            minWidth: 240,
                            key: 'addressDesc'
                        },
                        {
                            title: '用户类型',
                            minWidth: 90,
                            key: 'userType'
                        },
                        {
                            title: '手机',
                            minWidth: 110,
                            key: 'mobile'
                        },
                        {
                            title: '电话',
                            minWidth: 110,
                            key: 'telephone'
                        },
                        {
                            title: '单位名称',
                            minWidth: 110,
                            key: 'unitName'
                        },
                        {
                            title: '单位性质',
                            minWidth: 90,
                            key: 'unitType'
                        },
                        {
                            title: '小区名称',
                            minWidth: 110,
                            key: 'housingEstateName'
                        },
                        {
                            title: '片区名称',
                            minWidth: 110,
                            key: 'areasName'
                        },
                        {
                            title: '管理所',
                            minWidth: 110,
                            key: 'manageOrg'
                        },
                        {
                            title: '批次',
                            minWidth: 70,
                            key: 'batchNo'
                        },
                        {
                            title: '操作',
                            key: 'action',
                            fixed: 'right',
                            minWidth: 80,
                            render: (h, params) => {
                                return h('div', [
                                    h(
                                        'Button',
                                        {
                                            props: {
                                                type: 'text',
                                                size: 'small'
                                            },
                                            class: {
                                                'text-btn': true
                                            },
                                            on: {
                                                click: () => {
                                                    this.addUserModal = true;
                                                }
                                            }
                                        },
                                        '修改'
                                    )
                                ]);
                            }
                        }
                    ],
                    data: [],
                    pageObj: {
                        total: 0,
                        pageNum: 1,
                        pageSize: 10
                    }
                }
            }
        };
    },
    mounted() {
        const self = this;
        const ths = this;

        // self.esTableObj.queryObj.dictArr = self.queryConditionModel;
        // self.esTableObj.queryObj.formArr = self.queryConditionList;
        self.esTableObj.tableObj.btnArr = self.functionalBtn;

        ths.$nextTick(function() {
            // ths.loadTable();
        });
    },
    methods: {
        loadTable(pageNum) {
            let ths = this;

            ths.esTableObj.tableObj.data = Data.arrList;
            ths.esTableObj.tableObj.pageObj.total = 10;
            ths.esTableObj.tableObj.pageObj.pageNum = 1;
            ths.loading(false);
            ths.ids = [];
        },
        loading(flag) {
            setTimeout(
                () => {
                    this.esTableObj.tableObj.loading = flag;
                },
                flag ? 0 : 500
            );
        },
        btnFn(obj) {
            let ths = this;

            switch (obj.id) {
                case 'add':
                    ths.popupObj.title = '新增表具信息';
                    // 隐藏表具状态
                    ths.formObj.formArr[4].show = false;
                    ths.editData = null;
                    ths.popupObj.show = true;
                    break;
                case 'addBatch':
                    ths.showImportBatch = true;
                    break;
                case 'delete':
                    // let params = { ids: ths.ids.join(',') };

                    // httpUtil.post('/meter/batchDelete', params, resp => {
                    //     ths.$Message.success('操作成功');

                    //     ths.loadTable();
                    // });
                    break;
                default:
                    break;
            }
        },
        pageNumFn(pageNum) {
            this.loadTable(pageNum);
        },
        inquireBtn() {
            this.loadTable();
        },
        selectChangeFn(selection) {
            let ths = this;

            ths.ids = [];
            selection.forEach(row => {
                ths.ids.push(row.id);
            });
        },
        closeFn(reload) {
            let ths = this;

            ths.showAdd = false;
            reload && ths.loadTable();
        },
        closeImportBatchFn(reload) {
            let ths = this;

            ths.showImportBatch = false;
            reload && ths.loadTable();
        },
        edit(row) {
            let ths = this;

            ths.popupObj.title = '编辑表具信息';
            // 显示表具状态
            ths.formObj.formArr[4].show = true;
            ths.editData = row;
            ths.$refs.esForm.formItem = { ...ths.editData };
            ths.$refs.esForm.formItem.meterAttr = String(
                ths.editData.meterAttr
            );
            ths.$refs.esForm.formItem.makeDateForm = ths.editData.makeDate;
            ths.$refs.esForm.formItem.meterParamPkid = Number(
                ths.editData.meterParamPkid
            );
            ths.makeDate = ths.editData.makeDate;

            ths.formItemChangeFn(
                'meterParamPkid',
                Number(ths.editData.meterParamPkid),
                ths.$refs.esForm.formItem
            );

            if (ths.editData.state === 2) {
                ths.formObj.dictArr.state = ths.stateList;
                ths.formObj.formArr[4].disabled = true;
            } else {
                ths.formObj.formArr[4].disabled = false;
                ths.formObj.dictArr.state = [];
                ths.stateList.forEach(state => {
                    // 去掉 运行 状态
                    if (state.key !== 2) {
                        ths.formObj.dictArr.state.push(state);
                    }
                });
            }
            ths.popupObj.show = true;
        },
        delete(id) {
            // let ths = this;
            // let params = { id: id };
            // httpUtil.post('/meter/delete', params, resp => {
            //     ths.$Message.success('操作成功');
            //     ths.loadTable();
            // });
        }
    },
    watch: {
        ids: function(nVal, oVal) {
            let ths = this;

            ths.esTableObj.tableObj.btnArr[0].disabled = nVal.length === 0;
        }
    }
};
</script>
