<template>
    <a-modal
            :title="modalTitle"
            :width="1000"
            :visible="visible"
            :confirmLoading="confirmLoading"
            class="ant-modal2"
            @cancel="handleCancel"
    >
        <a-card :bordered="false">
            <div class="table-page-search-wrapper">
                <a-form layout="inline">
                    <a-row :gutter="48">
                        <a-col :md="8" :sm="24">
                            <a-form-item label="关键字">
                                <a-input v-model="queryParam.keyword" placeholder="请输入名称/类型名称"/>
                            </a-form-item>
                        </a-col>
                        <a-col :md="8 || 24" :sm="24">
                <span class="table-page-search-submitButtons">
                  <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                  <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
                </span>
                        </a-col>
                    </a-row>
                </a-form>
            </div>

            <div class="table-operator">
            </div>

            <s-table
                    ref="table"
                    size="default"
                    rowKey="id"
                    :columns="columns"
                    :data="loadData"
                    :alert="options.alert"
                    :customRow="options.customRow"
                    :rowSelection="options.rowSelection"
                    showPagination="auto"
            >
                <span slot="action" slot-scope="record1">
                  <template>
                    <a @click="handleView(record1)">查看</a>
                  </template>
                </span>
            </s-table>
            <detail ref="detailModal"/>
        </a-card>
        <template slot="footer">
            <a-button :loading="confirmLoading" type="primary" @click="handleCancel()">取消</a-button>
            <a-button :loading="confirmLoading" type="primary" @click="handleSelect()">确定</a-button>
        </template>
    </a-modal>
</template>

<script>
    import { STable, Ellipsis } from '@/components'
    import Detail from './Detail'
    import { getTicketExecutePage, fetchTicketExecute } from '@/api/ticket/ticketexecute'

    export default {
        name: 'TicketExecuteSelectModal',
        components: {
            STable,
            Ellipsis,
            Detail
        },
        props: {
            type: {
                type: String,
                default: 'radio'
            },
            selectedRowKey: {
                type: Array,
                default: () => {
                    return []
                }
            },
            selectedRow: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data () {
            return {
                confirmLoading: false,
                mdl: {},
                modalTitle: null,
                visible: false,
                record: null,
                // 查询参数
                queryParam: {
                },
                extraQueryParam: {
                },
                // 表头
                columns: [
                    {
                        title: '序号',
                        dataIndex: 'index',
                        customRender: (text, record, index) => {
                            return `${(this.$refs.table.localPagination.current - 1) * this.$refs.table.localPagination.pageSize + index + 1}`
                        }
                    },
                                                                                                                                                {
                                title: '编号',
                                dataIndex: 'no'
                            },
                                                                                                                                                        {
                                title: '工作票类别',
                                dataIndex: 'type'
                            },
                                                                                                                                                        {
                                title: '工作负责人',
                                dataIndex: 'chargeUserId'
                            },
                                                                                                                                                        {
                                title: '工作班人员',
                                dataIndex: 'workBanUserId'
                            },
                                                                                                                                                        {
                                title: '工作站变电站名称',
                                dataIndex: 'stationName'
                            },
                                                                                                                                                        {
                                title: '工作任务',
                                dataIndex: 'content'
                            },
                                                                                                                                                        {
                                title: '计划工作开始时间',
                                dataIndex: 'planStartTime'
                            },
                                                                                                                                                        {
                                title: '计划工作结束时间',
                                dataIndex: 'planEndTime'
                            },
                                                                                                                                                        {
                                title: '签发人签名',
                                dataIndex: 'signUserId'
                            },
                                                                                                                                                        {
                                title: '签发日期',
                                dataIndex: 'signDateTime'
                            },
                                                                                                                                                        {
                                title: '收到工作票时间',
                                dataIndex: 'receiveDateTime'
                            },
                                                                                                                                                        {
                                title: '运行值班人员签名',
                                dataIndex: 'zhibaoUserId'
                            },
                                                                                                                                                        {
                                title: '工作负责人签名',
                                dataIndex: 'signChargeUserId'
                            },
                                                                                                                                                        {
                                title: '确认工作票时间',
                                dataIndex: 'sureDateTime'
                            },
                                                                                                                                                        {
                                title: '工作负责人确认内容签名',
                                dataIndex: 'sureChargeUserId'
                            },
                                                                                                                                                        {
                                title: '工作许可人确认内容签名',
                                dataIndex: 'sureXukeUserId'
                            },
                                                                                                                                                        {
                                title: '许可开始工作时间',
                                dataIndex: 'xuekeStartDateTime'
                            },
                                                                                                                                                        {
                                title: '确认工作任务和安全措施签名',
                                dataIndex: 'sureContentSignUserId'
                            },
                                                                                                                                                        {
                                title: '原工作负责人',
                                dataIndex: 'oldChargeUserId'
                            },
                                                                                                                                                        {
                                title: '工作负责人变动时间',
                                dataIndex: 'changeDateTime'
                            },
                                                                                                                                                        {
                                title: '工作负责人变动签名',
                                dataIndex: 'changeSignUserId'
                            },
                                                                                                                                                        {
                                title: '工作人员变动情况1',
                                dataIndex: 'workUserChangeSituation'
                            },
                                                                                                                                                        {
                                title: '工作人员变动情况2',
                                dataIndex: 'workUserChangeSituationTwo'
                            },
                                                                                                                                                        {
                                title: '工作人员变动情况时间1',
                                dataIndex: 'workUserChangeSituationTime'
                            },
                                                                                                                                                        {
                                title: '工作人员变动情况时间2',
                                dataIndex: 'workUserChangeSituationTimeTwo'
                            },
                                                                                                                                                        {
                                title: '工作人员变动签名',
                                dataIndex: 'workUserChangeSituationSignUserId'
                            },
                                                                                                                                                        {
                                title: '工作票延期截止时间',
                                dataIndex: 'yqEndDateTime'
                            },
                                                                                                                                                        {
                                title: '工作票延期工作负责人签名',
                                dataIndex: 'yqChargeSignUserId'
                            },
                                                                                                                                                        {
                                title: '工作票延期工作许可人签名',
                                dataIndex: 'yqXukeSignUserId'
                            },
                                                                                                                                                        {
                                title: '工作终结时间',
                                dataIndex: 'workFinishDateTime'
                            },
                                                                                                                                                        {
                                title: '工作终结负责人签名',
                                dataIndex: 'workFinishChargeUserId'
                            },
                                                                                                                                                        {
                                title: '工作终结许可人签名',
                                dataIndex: 'workFinishXukeUserId'
                            },
                                                                                                                                                        {
                                title: '工作票终结时间',
                                dataIndex: 'ticketFinishDateTime'
                            },
                                                                                                                                                        {
                                title: '工作票终结许可人签名',
                                dataIndex: 'ticketFinishXukeUserId'
                            },
                                                                                                                                                        {
                                title: '工作票终结备注',
                                dataIndex: 'ticketFinishRemark'
                            },
                                                                                                                                                        {
                                title: '状态0：已废弃1：执行中2：已退票3：工作已终结4：工作票已终结',
                                dataIndex: 'status'
                            },
                                                                                                                                                        {
                                title: '备注',
                                dataIndex: 'remark1'
                            },
                                                                                                                                                        {
                                title: '创建日期',
                                dataIndex: 'createdTime'
                            },
                                                                                                                                                                                    {
                        title: '操作',
                        key: 'action',
                        width: '200px',
                        align: 'center',
                        scopedSlots: { customRender: 'action' }
                    }
                ],
                // 下拉框map
                                // 加载数据方法 必须为 Promise 对象
                loadData: parameter => {
                    parameter = {
                        ...parameter,
                        ...this.queryParam,
                        ...this.extraQueryParam,
                        dataScope: {
                            sortBy: 'desc',
                            sortName: 'update_time'
                        }
                    }
                    return getTicketExecutePage(Object.assign(parameter, this.queryParam))
                            .then(res => {
                                return res.data
                            })
                },
                selectedRowKeys: [],
                selectedRows: [],

                options: {
                    alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
                    rowSelection: {
                        selectedRowKeys: this.selectedRowKeys,
                        onChange: this.onSelectChange
                    }
                },
                optionAlertShow: false,
                isCreated: false
            }
        },
        created () {
            // 下拉框map
                    },
        methods: {
            tableOption () {
                if (!this.optionAlertShow) {
                    this.options = {
                        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
                        rowSelection: {
                            selectedRowKeys: this.selectedRowKeys,
                            onChange: this.onSelectChange,
                            type: this.type,
                            getCheckboxProps: record => ({
                                props: {
                                    disabled: false,
                                    name: record.id
                                }
                            })
                        },
                        customRow: (record) => {
                            return {
                                on: { // 事件
                                    click: (event) => { // 点击行
                                        // 选择对象
                                        this.mySelect([record.id], [record])
                                    },
                                    dblclick: (event) => {
                                        this.mySelect([record.id], [record])
                                        this.handleSelect()
                                    }
                                }
                            }
                        }
                    }
                    this.optionAlertShow = true
                } else {
                    this.options = {
                        alert: false,
                        rowSelection: null
                    }
                    this.optionAlertShow = false
                }
            },
            handleView (record) {
                fetchTicketExecute({ id: record.id }).then(res => {
                    const modal = this.$refs.detailModal
                    modal.base(res.data)
                })
            },
            handleOk () {
                this.$refs.table.refresh()
            },
            onSelectChange (selectedRowKeys, selectedRows) {
                this.selectedRowKeys = selectedRowKeys
                this.selectedRows = selectedRows
            },
            resetSearchForm () {
                this.queryParam = {
                }
                this.$refs.table.refresh(true)
            },
            base (record, queryParam = {}) {
                this.visible = true
                this.modalTitle = '选择信息'
                this.extraQueryParam = queryParam
                this.record = record
                if (this.isCreated) {
                    this.$refs.table.clearSelected()
                    this.options.rowSelection.type = this.type
                    this.handleOk()
                } else {
                    this.tableOption()
                    this.isCreated = true
                }
            },
            handleCancel () {
                this.visible = false
                this.confirmLoading = false
            },
            handleSelect () {
                if (this.selectedRowKeys.length === 0) {
                    this.$message.warn('请至少选择一项信息')
                } else {
                    this.confirmLoading = true
                    this.$emit('selected', this.record, this.selectedRowKeys, this.selectedRows)
                    this.confirmLoading = false
                    this.visible = false
                }
            },
            mySelect(selectedRowKeys, selectedRows) {
                if (this.type === 'radio') {
                    this.$refs.table.updateSelect(selectedRowKeys, selectedRows)
                            this.$refs.table.rowSelection.onChange(selectedRowKeys, selectedRows)
                } else {
                    let mySelectedRowKeys
                    let mySelectedRows = this.selectedRows.filter(item => item.id !== selectedRowKeys[0])
                    if (this.selectedRowKeys.includes(selectedRowKeys[0])) {
                        mySelectedRowKeys = this.selectedRowKeys.filter(item => item !== selectedRowKeys[0])
                    } else {
                        mySelectedRowKeys = [...selectedRowKeys, ...this.selectedRowKeys]
                        mySelectedRows = [...mySelectedRows, ...selectedRows]
                    }
                    this.$refs.table.updateSelect(mySelectedRowKeys, mySelectedRows)
                            this.$refs.table.rowSelection.onChange(mySelectedRowKeys, mySelectedRows)
                }

            }
        }
    }
</script>
