<template>
    <div>
        <div class="divborder newSearchDiv">
            <div class="filter">
                <label>{{$t(100391)}}：</label>
                <Select v-model="materialName" clearable filterable class="searchSelect">
                    <Option
                        v-for="item in materials"
                        label-in-value
                        :value="item.name"
                        :key="item.id"
                    >{{ item.name }} [{{item.pn}}]</Option>
                </Select>
            </div>
            <div class="filter">
                <label>{{$t(200054)}}：</label>
                <Select v-model="status" clearable class="searchSelect">
                    <Option :value="1">{{$t(8075)}}</Option>
                    <Option :value="2">{{$t(8076)}}</Option>
                    <Option :value="3">{{$t(8077)}}</Option>
                </Select>
            </div>
            <div class="filter">
                <label>{{$t(900908)}}：</label>
                <DatePicker
                    type="datetimerange"
                    format="yyyy-MM-dd HH:mm:ss"
                    :clearable="false"
                    v-model="index_time"
                    class="searchInput MaxWidth  "
                ></DatePicker>
            </div>
            <div class="searchBtn">
                <Button type="primary" class="twoWord" icon="ios-search" @click="search(1,10)">{{$t('1001')}}</Button>
                <Button type="success" class="twoWord" icon="ios-create-outline" @click="check()">{{$t(700119)}}</Button>
            </div>
        </div>
        <div class="divborder newTableDiv">
            <Table
                 class="tableClass"
                @on-current-change="handleRowChange"
                highlight-row
                :data="tableData1"
                :columns="tableColumns1"
            ></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="$t(700119)" v-model="modal">
            <div class="filter">
                <RadioGroup v-model="checkStatus">
                    <Radio label="2">{{$t(700114)}}</Radio>
                    <Radio label="3">{{$t(700115)}}</Radio>
                </RadioGroup>
            </div>
            <div class="filter">
                <label>{{$t(1030)}}：</label>
                <Input type="text" class="searchInput" v-model="remark" />
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="closeadd()">{{$t('1033')}}</Button>
                <Button type="primary" size="large" @click="checkPost()">{{$t('1011')}}</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import moment from 'moment';

export default {
    data () {
        return {
            materialName: '',
            materials: [],
            status: '',
            index_time: [],
            detailobj: {},
            modal: false,
            checkStatus: '',
            remark: '',
            total: 0,
            page: 1,
            pagesize: 10,
            tableData1: [],
            tableColumns1: [
                {
                    type: 'index2',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    },
                    width: '70px'
                },
                {
                    title: this.$t(100391),
                    key: 'material_name'
                },
                {
                    title: this.$t(700100),
                    key: 'reviewer'
                },
                {
                    title: this.$t(700101),
                    key: 'review_time'
                },
                {
                    title: this.$t(1030),
                    key: 'review_remark'
                },
                {
                    title: this.$t(200054),
                    key: 'statusCN',
                    align: 'center',
                    render: (h, params) => {
                        let bgColor = '';
                        if (params.row.status == 3) {
                            bgColor = '#D9001B';
                        } else if (params.row.status == 2) {
                            bgColor = '#70B603';
                        } else {
                            bgColor = '#FFA500';
                        }
                        return h(
                            'div',
                            {
                                style: {
                                    color: '#fff',
                                    backgroundColor: bgColor
                                }
                            },
                            params.row.statusCN
                        );
                    }
                }
            ]
        };
    },
    created () {
        this.getMaterial();
        this.index_time = [
            moment(new Date().getTime() - 3600 * 1000 * 24 * 7).format(
                'YYYY-MM-DD '
            ) + '00:00:00',
            moment(new Date().getTime()).format('YYYY-MM-DD ') + '23:59:59'
        ];
        this.search(1, 10);
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
    },
    methods: {
        getMaterial () {
            //
            let data = {
                pn: '', // 物料编号
                name: '', // 供应商id
                count: 999 // 显示数量
            };
            this.request('/config/Material/GetMaterialData', data, 'get').then(
                res => {
                    // console.log(res.data);
                    if (res.data.ret == 1) {
                        this.materials = res.data.data;
                    }
                }
            );
        },
        search (page, pagesize) {
            let starttime = this.index_time[0];
            let endtime = this.index_time[1];

            let data = {
                page: page,
                pagesize: pagesize,
                material: this.materialName,
                part_no: '',
                status: this.status,
                starttime: starttime,
                endtime: endtime
            };
            this.request('/tlm/ToolScrap/GetPagedList', data, 'post').then(
                res => {
                    // console.log(res.data);
                    if (res.data.ret == 1) {
                        this.total = res.data.total;
                        this.mockTableData1(res.data.data);
                    }
                }
            );
        },
        mockTableData1 (tablelist) {
            let data = [];
            if (tablelist.length > 0) {
                tablelist.forEach(item => {
                    if (item) {
                        let status = '';
                        if (item.status == 3) {
                            status = this.$t(950443);
                        } else if (item.status == 2) {
                            status = this.$t(950320);
                        } else {
                            status = this.$t(960562);
                        }
                        data.push({
                            material_name: item.material_name,
                            material_id: item.material_id,
                            reviewer: item.reviewer,
                            review_time: item.review_time,
                            review_remark: item.review_remark,
                            statusCN: status,
                            status: item.status,
                            id: item.id
                        });
                    }
                });
            }
            this.tableData1 = data;
        },
        check () {
            if (this.detailobj.id) {
                if (this.detailobj.status != 1) {
                    this.$Message.error(this.$t(8100));
                    return false;
                } else {
                    this.modal = true;
                }
            } else {
                this.$Message.error(this.$t(1017));
                return false;
            }
            // this.modal = true;
        },
        checkPost () {
            var data = {
                id: this.detailobj.id,
                status: this.checkStatus,
                remark: this.remark
            };

            // return false;
            this.request('/tlm/ToolScrap/AuditToolScrap', data, 'post').then(
                res => {
                    if (res.data.ret == 1) {
                        this.modal = false;
                        this.$Message.success(this.$t(900345));
                        this.search(1, 10);
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                }
            );
        },
        closeadd () {
            this.modal = false;
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
            // console.log(currentRow);
        },
        handlePageSize (value) {
            this.pagesize = value;
            this.tableData1 = this.search(this.page, this.pagesize);
        },
        changePage (value) {
            this.page = value;
            this.tableData1 = this.search(this.page, this.pagesize);
        },
        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 lang="less" scoped>
</style>
