<template lang="html">
    <div class="sheet_demo">
        <el-container class="container">
            <!-- aside -->
            <el-aside style="width:15%;min-width: 260px">
                <!--<el-scrollbar style="height: 100%">-->
                    <el-card id="menu_card" shadow="never" :body-style="{ padding: '0px', height: '100%' }" class="aside-card">
                        <div slot="header" class="clearfix">
                            <span>{{leftColumnTitle}}</span>
                            <el-button-group style="float: right;margin-top: -6px">
                                <el-tooltip content="新增" placement="top">
                                    <el-button icon="el-icon-plus" size="mini" type="primary" @click="menu_add_edit_show_dialog(1)"></el-button>
                                </el-tooltip>
                                <el-tooltip content="修改" placement="top">
                                    <el-button icon="el-icon-edit" size="mini" type="primary" @click="menu_add_edit_show_dialog(2)"></el-button>
                                </el-tooltip>
                                <el-dialog :title="menu_dialog_edit_add_title" :visible.sync="menu_dialog_edit" width="60%">
                                    <div>
                                        <!--============================菜单修改自定义================================-->
                                        <el-input auto-complete="off" v-model="menu_row.value"></el-input>
                                        <!--=========================================================================-->
                                    </div>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button-group>
                                            <el-button size="small" @click="menu_dialog_edit = false">取 消</el-button>
                                            <el-button size="small" type="primary" @click="menu_edit_submit">{{menu_dialog_edit_add_title}}</el-button>
                                        </el-button-group>
                                    </div>
                                </el-dialog>
                                <el-tooltip content="删除" placement="top">
                                    <el-button icon="el-icon-delete" size="mini" type="primary" @click="menu_delete"></el-button>
                                </el-tooltip>
                            </el-button-group>
                        </div>
                        <el-tree
                                :style="{height: menu_height - 55 + 'px', overflowY: 'auto'}"
                                :data="menu_list"
                                ref="treeRef"
                                node-key="id"
                                :props="defaultProps"
                                :highlight-current="true"
                                :check-on-click-node="true"
                                :accordion="true"
                                @node-click="click_menu_item"
                        >
                        </el-tree>
                        <!--<el-menu :style="{height: menu_height - 55 + 'px'}" class="aside-menu" @select="select_menu">-->
                            <!--<el-menu-item @click="click_menu_item(item)" :index="index + ''" v-for="(item, index) in menu_list" :key="index">-->
                                <!--<i class="el-icon-document"></i>-->
                                <!--<span slot="title">{{item.title}}</span>-->
                            <!--</el-menu-item>-->
                        <!--</el-menu>-->
                    </el-card>
                <!--</el-scrollbar>-->
            </el-aside>
            <!-- main -->
            <el-container class="main">
                <el-header class="main-header">
                    <el-row class="main-header-row">
                        <el-col :span="3" class="search-input-area">
                            <el-input size="small" placeholder="搜索..." @clear="query_bill_list" clearable v-model="searchParam.quick_query" @keyup.enter.native="query_bill_list">
                                <!--<el-button size="small" slot="append" icon="el-icon-search" type="primary"></el-button>-->
                            </el-input>
                        </el-col>
                        <el-col :span="4" class="search-button-area">
                            <el-button-group>
                                <el-button size="small" icon="el-icon-search" type="primary"></el-button>
                                <el-popover
                                        placement="bottom"
                                        width="300"
                                        trigger="click"
                                        v-model="bill_search_popover_visible">
                                    <el-row>
                                        <el-col :span="24">
                                            <el-form size="small" :inline="true" :model="searchParam" label-width="80px" label-position="left">
                                                <!--=======================================更多搜索自定义==========================================-->
                                                <el-form-item label="实例">
                                                    <el-input size="small" clearable v-model="searchParam.text1"></el-input>
                                                </el-form-item>
                                                <el-form-item label="实例2">
                                                    <el-input size="small" clearable v-model="searchParam.text2"></el-input>
                                                </el-form-item>
                                                <el-form-item label="实例3">
                                                    <el-input size="small" clearable v-model="searchParam.text3"></el-input>
                                                </el-form-item>
                                                <el-form-item label="实例4">
                                                    <el-input size="small" clearable v-model="searchParam.text4"></el-input>
                                                </el-form-item>
                                                <!--=============================================================================================-->
                                            </el-form>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col style="float: right; width: 140px">
                                            <el-button size="small" @click="query_bill_list" type="primary">搜索</el-button>
                                        </el-col>
                                    </el-row>
                                    <el-button size="small" type="primary" slot="reference">
                                        更多搜索
                                        <i class="el-icon-arrow-down el-icon--right"></i>
                                    </el-button>
                                </el-popover>
                            </el-button-group>
                        </el-col>
                        <el-col :span="3" class="operation-area">
                            <el-button-group class="operation-button-group">
                                <el-tooltip content="刷新" placement="top">
                                    <el-button @click="refresh" icon="el-icon-refresh" size="small" type="primary"></el-button>
                                </el-tooltip>
                                <el-tooltip content="新增" placement="top">
                                    <el-button @click="bill_add_one_dialog" icon="el-icon-plus" size="small" type="primary"></el-button>
                                </el-tooltip>
                                <el-tooltip content="删除" placement="top">
                                    <el-button @click="bill_delete_list" icon="el-icon-delete" size="small" type="primary"></el-button>
                                </el-tooltip>
                            </el-button-group>
                        </el-col>
                    </el-row>
                </el-header>
                <el-main id="bill_main">
                    <el-table
                            :highlight-current-row=true
                            :data="bill_list"
                            ref="multipleTable"
                            :border=true
                            :fit=true
                            :row-style="set_row_style"
                            :max-height="bill_height - 120"
                            style="width: 100%; overflowY: hidden"
                            @row-click="row_click"
                            @cell-dblclick="double_click_row_go_detail"
                    >
                        <!--=====================================表自定义========================================-->
                        <el-table-column  type="selection" width="40">
                        </el-table-column>
                        <el-table-column width="150" prop="bill_no" sortable :show-overflow-tooltip=true label="到货单号">
                        </el-table-column>
                        <el-table-column prop="order_no" :show-overflow-tooltip=true label="订单号">
                        </el-table-column>
                        <el-table-column prop="style_code"label="款号">
                        </el-table-column>
                        <el-table-column prop="customer_name" label="客户">
                        </el-table-column>
                        <el-table-column label="供应商">
                            <template slot-scope="scope">
                                <span class="spValue"
                                      :title="scope.row.provider_name">
                                    {{scope.row.provider_name}}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="product_line" label="生产线">
                        </el-table-column>
                        <el-table-column prop="sampling_rate" label="抽样率">
                        </el-table-column>
                        <el-table-column prop="bill_date" width="100" label="单据日期">
                        </el-table-column>
                        <el-table-column prop="bill_status" width="100" label="状态">
                            <template slot-scope="scope">
                                <span>{{scope.row.bill_status|filter_bill_status}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right"  label="操作">
                            <template slot-scope="scope">
                                <div>
                                    <!--=========两种详情页方式==============-->
                                    <el-tooltip content="新标签页" placement="top">
                                        <el-button icon="el-icon-edit" @click="go_page(scope.row.id)" type="text" size="mini"></el-button>
                                    </el-tooltip>
                                    <el-tooltip content="弹窗" placement="top">
                                        <el-button icon="el-icon-document" @click="bill_show_detail(scope.row,scope.$index)" type="text" size="mini"></el-button>
                                    </el-tooltip>
                                </div>
                            </template>
                        </el-table-column>
                        <!--====================================================================================-->
                    </el-table>
                    <el-dialog title="详情" :visible.sync="bill_detail_add_dialog" width="600px">
                        <!--===================================表详情自定义======================================-->
                        <el-form ref="form" :model="bill_query_one_detail" label-width="90px" size="mini" :inline="true">
                            <el-form-item label="bill_date">
                                <el-input v-model="bill_query_one_detail.bill_date"></el-input>
                            </el-form-item>
                            <el-form-item label="bill_no">
                                <el-input v-model="bill_query_one_detail.bill_no"></el-input>
                            </el-form-item>
                            <el-form-item label="bill_status">
                                <el-input v-model="bill_query_one_detail.bill_status"></el-input>
                            </el-form-item>
                            <el-form-item label="sampling_rate">
                                <el-input v-model="bill_query_one_detail.sampling_rate"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" style="width: 100%">
                            <el-row>
                                <el-button-group style="float: left" v-show="bill_query_one_detail.id">
                                    <el-button size="mini" type="primary" @click="bill_next(1)" icon="el-icon-arrow-left">上一条</el-button>
                                    <el-button size="mini" type="primary" @click="bill_next(2)">下一条<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                                </el-button-group>
                                <el-button-group style="float: right">
                                    <el-button size="mini" type="primary" @click="bill_save_one">保存</el-button>
                                    <el-button size="mini" @click="bill_cancel_dialog">取消</el-button>
                                </el-button-group>
                            </el-row>
                        </div>
                        <!--====================================================================================-->
                    </el-dialog>
                    <div class="pageControl">
                        <el-pagination @size-change="handleSizeChange"
                                       @current-change="handleCurrentChange"
                                       :current-page.sync="page"
                                       :page-sizes="page_sizes"
                                       :page-size="per_page"
                                       layout="total, sizes, prev, pager, next, jumper"
                                       :total="total">
                        </el-pagination>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<style src="@components/common/sheet_demo.css" scoped></style>
<script>
  import utilSingeUc from '@basicClass/util_singe_uc.js'
  // import '@components/common/sheet_demo.css'
  export default {
    mixins: [utilSingeUc],
    data() {
      return {
        defaultProps: {
          children: 'child', // 子菜单
          label: 'customer_group_name' // 表体
        }, // 左侧树形控件属性配置
        // index_api_query_list: 'https://easy-mock.com/mock/5b5189d898002960110f8699/example/query_list', // 左侧栏数据
        // index_api_query_list: 'https://easy-mock.com/mock/5b485045d8d71b716154eadc/example/menu_list', // 左侧栏数据
        // 左侧栏
        leftColumnTitle: '左侧栏', // 左侧栏标题
        index_module_name: 'mesAPI/pb_customer_group_parent',
        index_data_id: 'customer_group_id',
        // index_api_query_list: 'query_list', // 查询列表
        index_api_save_one: 'save_one', // 新增或者修改
        index_api_delete_one: 'delete_one', // 批量删除
        index_api_query_one: 'query_one',
        // 主表
        module_name: '/mesAPI/im_arrive', // 表数据
        api_query_list: 'query_list', // 查询列表
        api_save_one: 'save_one', // 新增或者修改
        api_delete_list: 'delete_list', // 批量删除
        api_query_one: 'query_one',
        detailUrl: 'im_arrive_dtl/',
        bill_not_check: {
          id: ''       // 不检查字段 默认不修改
        }
      }
    },
    methods: {
    },
    activated() {
      this.get_menu_list()
      this.query_bill_list()
    }
  }
</script>
