/**
 * @description 串号修改记录组件
 */
Vue.component('component-serial-modify-record', {
    template: `
        <div id="component-serial-modify-record">
            <el-dialog title="串号修改记录" :modal-append-to-body="false" :visible.sync="dialogVisible" @closed="dialogClose">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column label="序号" width="60">
                        <template slot-scope="scope">
                            <span>{{scope.$index + 1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="add_time" label="修改时间" width="170">
                    </el-table-column>
                    <el-table-column prop="operator_type" label="修改来源" width="80">
                    </el-table-column>
                    <el-table-column prop="operator_name" label="修改人">
                    </el-table-column>
                    <el-table-column align="left" label="原串号" class="serial" width="290">
                        <template slot-scope="scope">
                            <p><span>主串号：</span>{{scope.row.old_main_serial_number}}</p>
                            <p><span>辅助串号1：</span>{{scope.row.old_auxiliary_serial_number_one || '---'}}</p>
                            <p><span>辅助串号2：</span>{{scope.row.old_auxiliary_serial_number_two || '---'}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column align="left" label="新串号" class="serial" width="290">
                        <template slot-scope="scope">
                            <p><span>主串号：</span>{{scope.row.main_serial_number}}</p>
                            <p><span>辅助串号1：</span>{{scope.row.auxiliary_serial_number_one || '---'}}</p>
                            <p><span>辅助串号2：</span>{{scope.row.auxiliary_serial_number_two || '---'}}</p>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="limit"
                    :current-page="page"
                    :total="total"
                    :hide-on-single-page="true"
                    @current-change="currentChange">
                </el-pagination>
            </el-dialog>
        </div>
    `,
    data() {
        return {
            page: 1,             //页数
            limit: 6,            //每页行数
            total: 0,            //数据总数
            tableData: [],       //当前页数据
            dialogVisible: false //窗口显示控制
        }
    },
    methods: {
        /**
         * @description 弹出关闭
         */
        dialogClose() {
            this.page = 1
            this.total = 0
            this.tableData = []
        },
        /**
         * @description 分页组件切换事件
         * @param {Number} currentPage 当前分页数
         */
        currentChange(currentPage) {
            this.page = currentPage
            this._getTableData()
        },
        /**
         * @description 获取列表数据
         * @private
         */
        _getTableData() {
            this.sendRequest('Retail/Customer/serialModifyRecord', {
                data: {
                    id: this.id,
                    page: this.page,
                    limit: this.limit
                },
                success: (response) => {
                    if (response.status == 1) {
                        const data = response.data
                        this.tableData = data.list
                        this.total = data.count
                    } else {
                        this.$message.error(response.message)
                    }
                }
            })
        }
    },
    watch: {
        /**
         * @description 监听父组件显示控制变量的变化
         */
        visible() {
            this.dialogVisible = this.visible
            this._getTableData()
        },
        /**
         * @description 监听当前组件的显示控制变量的变化
         */
        dialogVisible() {
            this.$emit('update:visible', this.dialogVisible)
        }
    },
    props: [
        'visible',  //父组件的显示控制
        'id'        //修改记录ID
    ]
})