<template>
    <div class="testdiv">
        <div class="divborder newSearchDiv" style="margin:0px;">
            <div class="filter">
                <label>{{$t('100088')}}：</label>
                <Select v-model="productname" clearable class="searchSelect" @on-change="getLine">
                    <!--  -->
                    <Option
                        v-for="item in products"
                        :value="item.id"
                        :key="item.code"
                    >{{ item.name }}({{item.code}})</Option>
                </Select>
            </div>
            <div class="filter">

                <label>{{$t(500006)}}：</label>
                <Select v-model="lineid" clearable class="searchSelect">

                    <Option
                        v-for="item in lines"
                        label-in-value
                        :value="item.route"
                        :key="item.id"
                    >{{ item.text }}</Option>
                </Select>
            </div>
            <div class="filter">

                <label>{{$t(600042)}}：</label>
                <Select v-model="toolNum" clearable class="searchSelect">

                    <Option
                        v-for="item in toolList"
                        :value="item.text"
                        :key="item.text"
                    >{{ item.cutter_number }}</Option>
                </Select>
            </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="md-add-circle" @click="add()">刀补</Button>
                <!-- <Button type="warning" icon="ios-create-outline" @click="edit()">{{$t('1003')}}</Button> -->
                <!-- <Button type="error" icon="md-close-circle" @click="dele()">{{$t('1004')}}</Button>
                <Button type="primary" icon="md-download" @click="loadexcel()">{{$t('1005')}}</Button>
                <Upload
                    style="display:inline-block"
                    ref="upload"
                    :action="action"
                    name="excel-file"
                    :headers="headers"
                    :show-upload-list="false"
                    :on-format-error="handleFormatError"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :format="['xlsx']"
                >
                    <Button type="primary" icon="md-cloud-upload">{{$t('1006')}}</Button>
                </Upload>
                <Button type="primary" icon="ios-cloud-download" @click="Export()">{{$t('1007')}}</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="编辑刀补" v-model="addmodal" :styles="{width:'650px'}">
            <!-- <p slot="header">
                <span v-if="type===1">{{$t('1002')}}</span>
                <span v-if="type===2">{{$t('1003')}}</span>
            </p>-->
            <div>
                <div class="filter">
                    <label>{{$t('100088')}}：</label>
                    <Select
                        v-model="detailobj.productId"
                        clearable
                       class="searchSelect"
                        @on-change="getLine"
                        disabled
                    >
                        <!--  -->
                        <Option
                            v-for="item in products"
                            :value="item.id"
                            :key="item.code"
                        >{{ item.name }}({{item.code}})</Option>
                    </Select>
                </div>
                <div class="filter">

                    <label>{{$t(500006)}}：</label>
                    <Select v-model="detailobj.lineid" clearable class="searchSelect" disabled>

                        <Option
                            v-for="item in lines"
                            label-in-value
                            :value="item.route"
                            :key="item.id"
                        >{{ item.text }}</Option>
                    </Select>
                </div>
                <div class="filter">

                    <label>{{$t(600042)}}：</label>
                    <Input type="text" class="searchInput" v-model="detailobj.toolNum" disabled />

                </div>

                <div class="filter">
                    <label>长度H：</label>
                    <Input type="text" class="searchInput" v-model="detailobj.length" disabled />
                    <Icon type="md-arrow-forward" />
                    <Input type="text" class="searchInput" v-model="editobj.length" />
                </div>
                <div class="filter">
                    <label>磨损D：</label>
                    <Input type="text" class="searchInput" v-model="detailobj.abrasion" disabled />
                    <Icon type="md-arrow-forward" />
                    <Input type="text" class="searchInput" v-model="editobj.abrasion" />
                </div>
                <div class="filter">
                    <label>半径R：</label>
                    <Input type="text" class="searchInput" v-model="detailobj.radius" disabled />
                    <Icon type="md-arrow-forward" />
                    <Input type="text" class="searchInput" v-model="editobj.radius" />
                </div>
            </div>
            <div slot="footer">
                <Button type="text" class="twoWord" size="large" @click="closeadd()">{{$t('1033')}}</Button>
                <Button
                    type="primary" class="twoWord"
                    v-if="type===1"
                    size="large"
                    @click="adddata()"
                >{{$t('1002')}}</Button>
                <Button
                    type="primary"
                    v-if="type===2"
                    size="large"
                    @click="editdata()"
                >{{$t('1003')}}</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import axios from '@/libs/api.request';
export default {
    name: 'productmanagement', // 组件不刷新
    data () {
        return {
            action:
                axios.publicPath +
                'tlm/Upload/Submit?templateName=TechToolList',
            headers: {
                token: localStorage.getItem('token'),
                timestamp: localStorage.getItem('timestamp'),
                nonce: localStorage.getItem('nonce'),
                sign: localStorage.getItem('sign')
            },
            products: [], // 产品
            productname: '',
            addproductid: 0,
            lines: [],
            lineid: '',
            toolNum: '', // 刀位号
            toolList: [],
            // 模态框变量
            toolNum1: 0,
            category: '',
            materialName: '',
            all: [],
            loading: true,
            selection: [],
            editSelection: {},
            stretchLong: '',
            uptolerance: '',
            downtolerance: '',
            ratedLife: '',
            remark: '',
            tableData1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            addmodal: false,
            editmodal: false,
            detailobj: {},
            editobj: {},
            type: 0,
            tool_code: '',
            editLines: [],
            editPreLines: [],
            editStations: [],
            editPreStations: [],
            editResults: [],
            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(1132),
                    key: 'cutter_number'
                },
                {
                    title: this.$t(100308),
                    key: 'category_name'
                },
                {
                    title: this.$t(600042),
                    key: 'material_name'
                },
                {
                    title: '刀长',
                    key: 'part_no'
                },
                {
                    title: '磨损',
                    key: 'supplier'
                },
                {
                    title: '半径',
                    key: 'quantity'
                },
                {
                    title: '设备状态',
                    key: 'reach_length'
                }
            ],
            editobj: {}
        };
    },
    created () {
    // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
        this.iniproducts();
        // this.inilines();

        this.productname = this.$route.query.productId;
        this.inilines(this.productname);
        this.lineid = this.$route.query.route;
        if (this.productname && this.lineid) {
            this.search(1, 10);
            this.getToolNum();
            // this.getModalTable();
            // this.getModalTable();
        }
    },
    methods: {
        iniproducts () {
            var params = {
                name: '',
                count: 50
            };
            axios
                .request({
                    url: '/config/ProjectProduct/GetProductsByCode',
                    params,
                    method: 'get'
                })
                .then((res) => {
                    // console.log(res.data.data);
                    this.products = res.data.data;
                });
        },
        inilines (id) {
            axios
                .request({
                    url: '/tlm/Technology/GetRoutes?productid=' + id,
                    method: 'get'
                })
                .then((res) => {
                    // console.log(res.data.data);
                    if (res.data.ret == 1) {
                        this.lines = res.data.data;
                    }
                });
        },
        getLine (value) {
            this.productname = value;

            this.inilines(this.productname);
            this.lineid = '';
        },
        getToolNum () {
            let params = {
                productid: this.productname,
                route: this.lineid
            };
            axios
                .request({
                    url: '/tlm/TechTool/GetCutterNumbers',
                    params,
                    method: 'get'
                })
                .then((res) => {
                    console.log(res.data);
                    if (res.data.ret == 1) {
                        this.toolList = res.data.data;
                    }
                    // this.total = res.data.total;
                    // this.mockTableData1(res.data.data);
                });
        },
        search (page, pagesize) {
            var data = {
                product_id: '' + this.productname,
                route: '' + this.lineid,
                cutter_number: this.toolNum,
                page: page,
                pagesize: pagesize
            };
            axios
                .request({
                    url: '/tlm/TechTool/GetPagedList',
                    data,
                    method: 'post'
                })
                .then((res) => {
                    console.log(res.data.data);
                    if (res.data.ret == 1) {
                        this.total = res.data.total;
                        this.mockTableData1(res.data.data);
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                        this.tableData1 = [];
                    }
                });
            this.getToolNum();
        },
        mockTableData1 (tablelist) {
            let data = [];
            tablelist.forEach((item) => {
                if (item) {
                    data.push({
                        cutter_number: item.cutter_number,
                        category_name: item.category_name,
                        material_name: item.material_name,
                        material_id: item.material_id,
                        part_no: item.part_no,
                        supplier: item.supplier,
                        quantity: item.quantity,
                        reach_length: item.reach_length,
                        upper_tolerance: item.upper_tolerance,
                        down_tolerance: item.down_tolerance,
                        remark: item.remark,
                        rated_life: item.rated_life,
                        fromLineId: item.fromLineId,
                        result: item.result,
                        resultStatus: item.resultStatus,
                        eventNo: item.eventNo,
                        id: item.id,
                        tool_code: item.tool_code
                    });
                }
            });
            this.tableData1 = data;
        },
        add () {
            // if (!this.detailobj.id) {
            //   this.$Message.error('请先选择数据');
            //   return;
            // }
            // 设备卡控
            // if(this.detailobj.state !=1){
            //      this.$Message.error('只有在设备非运行状态下才可以修改');
            //     return
            // }
            this.toolNum1 = 0;
            this.category = '';
            this.materialName = '';
            this.stretchLong = '';
            this.uptolerance = '';
            this.downtolerance = '';
            this.ratedLife = '';
            this.remark = '';
            this.type = 1;
            this.loading = true;
            this.selection = [];
            // this.renderTable(this.all);
            // this.loading = false;
            this.addmodal = true;
        },
        closeadd () {
            this.addmodal = false;
            // this.search(1, 10);
            this.detailobj = {};
        },
        adddata () {
            if (
                this.toolNum1 == undefined ||
                this.toolNum1 == '' ||
                this.toolNum1 == 0
            ) {
                this.$Message.error('请输入刀位号');
                return false;
            }

            let arr = [];

            if (this.selection.length > 0) {
                for (let i = 0; i < this.selection.length; i++) {
                    let obj = {};
                    obj.part_no = this.selection[i].part_no;
                    obj.quantity = this.selection[i].quantity;
                    arr.push(obj);
                }
            } else {
                this.$Message.error('请选择物料');
                return false;
            }

            let data = {
                location: this.toolNum1,
                reach_length: this.stretchLong,
                upper_tolerance: this.uptolerance,
                down_tolerance: this.downtolerance,
                remark: this.remark,
                rated_life: this.ratedLife,
                product_id: '' + this.productname,
                route: '' + this.lineid,
                Materials: arr,
                tool_code: this.tool_code
            };
            console.log(data);
            // return false;
            axios
                .request({
                    url: '/tlm/TechTool/Add',
                    data,
                    method: 'post'
                })
                .then((res) => {
                    console.log(res.data);
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t('1055'));
                        // this.addmodal = false;
                        this.search(this.page, this.pagesize);
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
            console.log(this.detailobj);
        },
        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);
        }

    }
};
</script>
<style lang="less" scoped>

.flex {
    display: flex;
    height: 40px;
    line-height: 40px;
}
.modalTable {
    // width: 680px;
    height: 400px;
    overflow: auto;
    margin: 0 auto;
}
</style>
