<template>
    <div class="testdiv">
        <div class="divborder newSearchDiv">
            <div class="filter">
                <label>
                    <span>刀具柜名称</span>：
                </label>
                <Input class="searchInput" type="text" v-model="name" />
            </div>
            <div class="filter">
                <label>
                    <span>{{$t(1035)}}</span>
                </label>
                <DatePicker
                    type="datetimerange"
                    format="yyyy-MM-dd HH:mm:ss"
                    v-model="index_time"
                    @on-change="getTime"
                    class="searchInput MaxWidth"
                ></DatePicker>
            </div>
            <div class="searchBtn">
                <Button
                    type="primary"
                    class="twoWord"
                    icon="ios-search"
                    @click="search()"
                >{{$t('1001')}}</Button>
                <Button
                    type="primary"
                    class="fourWord"
                    icon="ios-cloud-download"
                    @click="submitSettlement()"
                >提交结算</Button>
            </div>
        </div>
        <div class="divborder newTableDiv">
            <Table
                class="tableClass"
                @on-current-change="handleRowChange"
                highlight-row
                :data="tableData"
                :columns="tableColumns"
            ></Table>
            <div class="pageDiv">
                <div class="pageDirection">
                    <Page
                        :total="total"
                        :current="page"
                        @on-change="changePage"
                        show-elevator
                        show-sizer
                        show-total
                        @on-page-size-change="handlePageSize"
                        :page-size-opts="[10,20,30,40,100]"
                    ></Page>
                </div>
            </div>
        </div>
        <div class="divborder newTableDiv" v-show="show">
            <Table
                class="tableClass"
                @on-current-change="handleRowChange1"
                highlight-row
                :data="detailData"
                :columns="columns1"
            ></Table>
            <div class="pageDiv">
                <div class="pageDirection">
                    <Page
                        :total="total"
                        :current="page"
                        @on-change="changePage"
                        show-elevator
                        show-sizer
                        show-total
                        @on-page-size-change="handlePageSize"
                        :page-size-opts="[10,20,30,40,100]"
                    ></Page>
                </div>
            </div>
        </div>
        <Modal class="newModalClass" title="结算物料如下：" v-model="modal" :styles="{width:'700px'}">
            <div style="padding-right:40px">
                <Table
                    class="tableClass"
                    @on-current-change="handleRowChange2"
                    highlight-row
                    :data="modalData"
                    :columns="columns2"
                ></Table>
            </div>

            <div slot="footer">
                <Button type="primary" class="twoWord" @click="modal=false">取消</Button>
                <Button type="primary" class="twoWord" @click="submit()">确认</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import moment from 'moment';

export default {
    data () {
        return {
            name: '',
            page: 1,
            pagesize: 10,
            total: 0,
            tableData: [],
            tableColumns: [
                {
                    type: 'index2',
                    title: 'ID',
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    }
                },
                {
                    title: '单号',
                    key: 'billcode'
                },
                {
                    title: '工号',
                    key: 'usercode'
                },
                {
                    title: '姓名',
                    key: 'username'
                },
                {
                    title: '刀具柜名称',
                    key: 'cabinetName'
                },
                {
                    title: '供应商',
                    key: 'supplier'
                },
                {
                    title: '领用时间',
                    key: 'transtime'
                },
                {
                    title: '类型',
                    key: 'type'
                },
                {
                    title: '结算时间',
                    key: 'settletime'
                },
                {
                    title: '结算人',
                    key: 'settleUser'
                },
                {
                    title: '状态',
                    key: 'status',
                    render: (h, params) => {
                        let bg = '',
                            text = '',
                            color = '';
                        switch (params.row.status) {
                        case 1:
                            bg = 'red';
                            color = 'white';
                            text = '未结算';
                            break;
                        case 2:
                            bg = 'green';
                            color = 'white';
                            text = '已结算';
                            break;
                        case 3:
                            bg = 'yellow';
                            color = '#000';
                            text = '待结算';
                            break;
                        }
                        return h(
                            'div',
                            {
                                style: {
                                    color: color,
                                    background: bg
                                }
                            },
                            text
                        );
                    }
                }
            ],
            index_time: [],
            show: true,
            page1: 1,
            pagesize1: 10,
            total1: 0,
            detailData: [],
            columns1: [
                {
                    type: 'index2',
                    title: 'ID',
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    }
                },
                {
                    title: '料号',
                    key: 'inventoryid'
                },
                {
                    title: '品名',
                    key: 'name'
                },
                {
                    title: '规格',
                    key: 'type'
                },
                {
                    title: '数量',
                    key: 'count'
                }
            ],
            detailobj: {},
            modal: false,
            modalData: [],
            columns2: [
                {
                    type: 'index2',
                    title: 'ID',
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    }
                },
                {
                    title: '料号',
                    key: 'inventoryid'
                },
                {
                    title: '品名',
                    key: 'name'
                },
                {
                    title: '数量',
                    key: 'count'
                }
            ],
            selectobj: {}
        };
    },
    created () {
        this.index_time = [
            moment(new Date().getTime() - 3600 * 24 * 1000 * 7).format(
                'yyyy-MM-DD '
            ) + '00:00:00',
            moment(new Date().getTime()).format('yyyy-MM-DD ') + '23:59:59'
        ];
        this.search();
    },
    methods: {
        search () {
            let starttime = '',
                endtime = '';
            starttime = this.index_time[0] ? this.index_time[0] : '';
            endtime = this.index_time[1] ? this.index_time[1] : '';

            var data = {
                CabinetName: this.name,
                page: this.page,
                pagesize: this.pagesize,
                Begin: starttime,
                End: endtime,
                Id: 0
            };
            this.request(
                '/tlm/ToolCabinet/GetCabinetReceiveData',
                data,
                'post'
            ).then((res) => {
                console.log(res.data);
                if (res.data.ret == 1) {
                    // res.data = {
                    //     total: 33,
                    //     page: 1,
                    //     pagesize: 10,
                    //     ret: 1,
                    //     msg: 1,
                    //     data: [
                    //         {
                    //             id: 21288,
                    //             billcode: "7686",
                    //             usercode: "2319",
                    //             username: "曹琪",
                    //             cabinetName: "楚多刀具柜1",
                    //             cabinetcode: "cabinet1",
                    //             transtime: "2020-09-01 09:48:35",
                    //             type: "直接领用",
                    //             settletime: "0001-01-01 00:00:00",
                    //             settleUser: "",
                    //             supplier: "明泰机电",
                    //             status: 1,
                    //             uid: 0,
                    //             quantity: 0,
                    //         },
                    //         {
                    //             id: 21288,
                    //             billcode: "7686",
                    //             usercode: "2319",
                    //             username: "曹琪",
                    //             cabinetName: "楚多刀具柜1",
                    //             cabinetcode: "cabinet1",
                    //             transtime: "2020-09-01 09:48:35",
                    //             type: "直接领用",
                    //             settletime: "0001-01-01 00:00:00",
                    //             settleUser: "",
                    //             supplier: "明泰机电",
                    //             status: 2,
                    //             uid: 0,
                    //             quantity: 0,
                    //         },
                    //         {
                    //             id: 21288,
                    //             billcode: "7686",
                    //             usercode: "2319",
                    //             username: "曹琪",
                    //             cabinetName: "楚多刀具柜1",
                    //             cabinetcode: "cabinet1",
                    //             transtime: "2020-09-01 09:48:35",
                    //             type: "直接领用",
                    //             settletime: "0001-01-01 00:00:00",
                    //             settleUser: "",
                    //             supplier: "明泰机电",
                    //             status: 3,
                    //             uid: 0,
                    //             quantity: 0,
                    //         }
                    //     ],
                    // };
                    this.total = res.data.total;
                    this.tableData = res.data.data;
                }
            });
        },
        submitSettlement () {
            if (!this.detailobj.id) {
                this.$Message.error(this.$t(1043));
                return false;
            }
            if (this.detailobj.status != 1) {
                this.$Message.error('请先选择未结算的数据!');
                return false;
            }
            this.modal = true;
        },
        getTime (val) {
            this.index_time = val;
        },
        submit () {
            let data = {
                id: this.selectobj.id
            };

            this.request(
                '/changling/TlmClient/SubmitSettlement',
                data,
                'post'
            ).then((res) => {
                console.log(res.data);
                if (res.data.ret == 1) {
                    this.$Message.success(this.$t(res.data.msg))
                    this.search()
                    this.modal = false;
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            });
        },
        getReceiveDetail () {
            let data = {
                Id: this.detailobj.id,
                page: this.page1,
                pagesize: this.pagesize1
            };

            this.request(
                '/tlm/ToolCabinet/GetCabinetReceiveDetail',
                data,
                'post'
            ).then((res) => {
                console.log(res.data);
                if (res.data.ret == 1) {
                    // res.data = {
                    //     total: 1,
                    //     page: 1,
                    //     pagesize: 10,
                    //     ret: 1,
                    //     msg: 1,
                    //     data: [
                    //         {
                    //             inventoryid: "0901060011",
                    //             name: "DNMG150604 HM NC3020",
                    //             count: 1,
                    //             type: null,
                    //             mid: 21288,
                    //             price: 24.6,
                    //             supplier: "020242",
                    //             id: 21010,
                    //             project_id: 136,
                    //             status: 1,
                    //         },
                    //     ],
                    // };
                    this.total1 = res.data.total;
                    this.detailData = res.data.data;
                    this.modalData = res.data.data;
                }
            });
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
            this.getReceiveDetail();
            this.show = true;
        },
        handlePageSize (value) {
            this.pagesize = value;
            this.search();
        },
        changePage (value) {
            this.page = value;
            this.search();
        },
        handleRowChange1 (currentRow, oldCurrentRow) {
        },
        handlePageSize1 (value) {
            this.pagesize1 = value;
            this.getReceiveDetail();
        },
        changePage1 (value) {
            this.page1 = value;
            this.getReceiveDetail();
        },
        handleRowChange2 (currentRow, oldCurrentRow) {
            this.selectobj = currentRow;
        },
        request (url, data, type) {
            if (type == 'get') {
                return this.axios
                    .request({
                        url: url,
                        params: data,
                        method: type
                    })
                    .then((res) => {
                        return res;
                    })
                    .catch((error) => error);
            } else {
                return this.axios
                    .request({
                        url: url,
                        data,
                        method: type
                    })
                    .then((res) => {
                        return res;
                    })
                    .catch((error) => error);
            }
        }
    }
};
</script>

<style>
</style>
