<template>
    <div class="testdiv">
        <div class="divborder newSearchDiv" style="margin:0px;">
            <div>
                <div class="filter">
                    <label>{{$t(1132)}}：</label>
                    <!-- <Input class="searchInput" type="text" v-model="chinaname" /> -->
                    <Cascader
                        :data="datalevel"
                        :value="leveldata"
                        trigger="hover"
                        style="display:inline-block;width:200px;"
                        @on-change="changeLevel"
                    ></Cascader>
                </div>
            </div>
            <div class="searchBtn">
                <Button
                    type="primary"
                    class="twoWord"
                    icon="ios-search"
                    @click="search(1,10)"
                >{{$t('1001')}}</Button>
                <Button type="primary" class="fourWord" icon="ios-trash" @click="empty()" style="margin-left:30px">{{$t('1039')}}</Button>
                <Button type="primary" icon="ios-shuffle" class="fourWord" @click="changeTool()">刀具更换</Button>
            </div>
        </div>
        <div class="divborder newTableDiv">
            <Table
                @on-current-change="handleRowChange"
                highlight-row
                :data="tableData1"
                :columns="tableColumns1"
                class="tableClass"
            ></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
            :title="$t(600034)"
            v-model="addmodal"
            :styles="{width:'750px'}"
            class="newModalClass"
        >
            <div class="modal_body">
                <div class="filter">
                    <label>
                        <i>*</i>
                        {{$t('600046')}}：
                    </label>
                    <Input class="searchInput" type="text" v-model="addobj.surplus_life" />
                </div>
                <div class="filter">
                    <label style="width:200px">{{$t('600047')}}：</label>
                    <Input class="searchInput" type="text" v-model="addobj.residual_life" />
                </div>
                <div class="filter">
                    <label>{{$t('600048')}}：</label>
                    <DatePicker
                        class="searchInput"
                        type="datetime"
                        dateChange
                        :value="addobj.now_time"
                        format="yyyy-MM-dd HH:mm:ss"
                        @on-change="dateChange"
                    ></DatePicker>
                </div>
                <div class="filter">
                    <label style="width:200px">{{$t(950182)}}：</label>
                    <Input class="searchInput" type="text" v-model="addobj.lastCycleTime" />
                </div>

                <p>
                    <i style="color:red;margin-right:5px">*</i>
                    {{$t('600050')}}：
                </p>
                <div style="display:flex;justify-content: space-between;">
                    <div
                        class="reason"
                        v-for="(item,i) in reasonList"
                        @click="changeReason(i)"
                        :class="{active:reasonIndex==i}"
                    >{{item.name}}</div>
                </div>
                <!-- <div class="imgBox" v-show="reasonIndex!=0">
                    <div class="uploadMax">
                        <img :src="reasonImg" alt />
                        <input
                            type="file"
                            name
                            ref="fileIntimg"
                            id
                            @change="unloadimg"
                            accept="image/png, image/gif, image/jpeg"
                        />
                    </div>
                    <p style="width:155px;text-align:center">更换原因图片</p>
                </div>-->
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="addmodal=false" v-text="$t(1033)">取消</Button>
                <Button type="primary" size="large" v-text="$t(1011)" @click="editPost()">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import axios from '@/libs/api.request';
export default {
    name: 'Businessmanagement', // 组件不刷新
    data () {
        return {
            morecondition: false,
            datalevel: [],
            leveldata: [],
            sectionid: 0,
            tableData1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            addmodal: false,
            editmodal: false,
            addobj: {},
            detailobj: {},
            // 克隆对象
            tableRowObj: {},
            loadimg: require('../../../static/images/xiangjitwo.png'),
            editloadimg: require('../../../static/images/xiangjitwo.png'),
            tableColumns1: [
                {
                    type: 'index2',
                    title: this.$t(1008),
                    key: 'xuhao',
                    width: 80,
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    }
                },
                {
                    title: this.$t(1040),
                    key: 'machine_code'
                },
                {
                    title: this.$t(1041),
                    key: 'machine_name'
                },
                {
                    title: this.$t(200003),
                    key: 'section_dsc'
                },
                {
                    title: this.$t(600005),
                    key: 'spindle_name'
                },
                {
                    title: this.$t(600006),
                    key: 'cutter_location_name'
                },
                {
                    title: '配置程序号',
                    key: 'programno'
                },
                {
                    title: this.$t(600036),
                    key: 'tool_name'
                },
                {
                    title: this.$t(600007),
                    key: 'drawingcode'
                },
                {
                    title: this.$t(8093),
                    key: 'ratedlife'
                },
                {
                    title: this.$t(600038),
                    key: 'use_life'
                },
                {
                    title: this.$t(600039),
                    key: 'percent',
                    render: (h, params) => {
                        let bg = '';
                        switch (params.row.surplus_type) {
                        case 'danger':
                            bg = 'wrong';
                            break;
                        case 'success':
                            bg = 'success';
                            break;
                        case 'warning':
                            bg = 'active';
                            break;
                        }
                        //  <Progress :percent="100" :stroke-width="20" text-inside />
                        return h('Progress', {
                            props: {
                                status: bg,
                                percent: params.row.percent,
                                textInside: true,
                                strokeWidth: 20
                                // strokeColor:bg
                            }
                        });
                    },
                    width: 120
                },
                {
                    title: '剩余寿命件数',
                    key: 'surplus_life',
                    width: 120
                },
                {
                    title: this.$t(600040),
                    key: 'cyc_time_str',
                    width: 120
                },
                {
                    title: '实际剩余寿命',
                    key: 'predictedResiduallife',
                    width: 120,
                    render: (h, params) => {
                        let str = '';
                        str =
                            params.row.predictedResiduallife == -1
                                ? 'NA'
                                : params.row.predictedResiduallife;
                        return h('div', str);
                    }
                },
                {
                    title: this.$t(1030),
                    key: 'description'
                }
            ],
            reasonList: [
                {
                    value: 'SM',
                    name: '计数寿命到'
                },
                {
                    value: 'MS',
                    name: '磨损'
                },
                {
                    value: 'BR',
                    name: '崩刃'
                },
                {
                    value: 'DD',
                    name: '断刃'
                },
                {
                    value: 'HX',
                    name: '换型'
                },
                {
                    value: 'ZL',
                    name: '产品质量问题'
                }
            ],
            reasonIndex: -1,
            reasonImg: ''
        };
    },
    created () {
        this.initlevel();
        this.search();
        this.addobj.change_reason = this.reasonList[0].value;
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1);
    },
    mounted () {
        setInterval(() => {
            this.search();
        }, 1000 * 60 * 3);
    },
    methods: {
        initlevel () {
            // 初始化产线层级
            axios
                .request({
                    url: 'config/ProjectLevelSection/GetSectionTree',
                    method: 'get'
                })
                .then((res) => {
                    const arr = [];
                    this.datalevel = res.data.data;
                    arr.push(res.data.data[0].value);
                    this.leveldata = arr;
                });
        },
        changeLevel (data) {
            this.sectionid = data[data.length - 1];
        },
        empty () {
            this.leveldata = [];
            this.sectionid = '';
            this.search();
        },
        search () {
            var params = {
                sectionid: this.sectionid,
                page: this.page,
                pagesize: this.pagesize
            };
            axios
                .request({
                    url: '/tools/ToolLife/getToolLifeList',
                    params,
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.total = res.data.total;
                        this.tableData1 = res.data.data;
                        // this.mockTableData1(res.data.data);
                        // this.detailobj = {}
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        mockTableData1 (tablelist) {
            let data = [];
            tablelist.forEach((item) => {
                if (item) {
                    data.push({
                        id: item.id,
                        chinesename: item.chinesename,
                        chinesepinyin: item.chinesepinyin,
                        province: item.province,
                        provinceTitle: item.provinceTitle,
                        city: item.city,
                        cityTitle: item.cityTitle,
                        county: item.county,
                        countyTitle: item.countyTitle,
                        detailaddress: item.detailaddress,
                        contact: item.contact,
                        telephone: item.telephone,
                        email: item.email,
                        industry: item.industry,
                        industry_first: item.industry_first,
                        industry_second: item.industry_second,
                        description: item.description,
                        website: item.website,
                        litpic: item.litpic,
                        identificat: item.identification,
                        companycode: item.companycode
                    });
                }
            });
            this.tableData1 = data;
        },
        changeTool () {
            if (this.detailobj.id == null) {
                this.$Message.error(this.$t(90000081));
            } else {
                // this.detailobj = this.$time.deepClone(this.tableRowObj);
                this.reasonIndex = -1;
                this.addobj.residual_life = this.detailobj.residual_life;
                this.checkProgramNo();
            }
        },
        checkProgramNo () {
            let params = {
                id: this.detailobj.id
            };
            axios
                .request({
                    url: '/tools/ToolLife/checkProgramNo',
                    params,
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        // console.log(res.data.data);
                        this.addobj = res.data.data;
                        this.addmodal = true;
                    } else {
                        window_warning(this.$t(101000));
                    }
                });
        },
        dateChange (date, type) {
            this.addobj.now_time = date;

            axios
                .request({
                    url: '/tools/ToolLife/checkProgramNo',
                    params: { id: this.detailobj.id, changetime: date },
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        // console.log(res.data.data);
                        this.addobj.lastCycleTime = res.data.data.lastCycleTime;

                        // this.addmodal = true;
                    } else {
                        window_warning(this.$t(101000));
                    }
                });
        },
        changeReason (i) {
            this.reasonIndex = i;
            this.addobj.change_reason = this.reasonList[i].value;
        },
        unloadimg () {
            // 上传照片
            const file = this.$refs.fileIntimg.files[0];
            const data = new FormData();
            data.append('file', file);
            axios
                .request({
                    url: '/tools/upload/UploadImage',
                    data,
                    method: 'post'
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t(100378));
                        this.reasonImg = axios.publicPath + res.data.data;
                        // this.addobj.supplierimg = axios.publicPath + res.data.data;
                    } else {
                        this.$Message.error(res.data.msg);
                    }
                })
                .catch((err) => {
                    this.$Message.error(err.msg);
                });
        },
        editPost () {
            let data = {};
            var reg1 = /^-?[0-9]+[0-9]*$/;

            if (
                this.addobj.surplus_life == '' ||
                !reg1.test(this.addobj.surplus_life)
            ) {
                this.$Message.error(this.$t('600291'));
                return false;
            }

            //   var reg2 = /^[0-9]+[0-9]*$/;
            //   if (
            //     this.addobj.residual_life == '' ||
            //             !reg2.test(this.addobj.residual_life)
            //   ) {
            //     this.$Message.error(this.$t('600292'));
            //     return false;
            //   }
            if (this.addobj.change_reason == '') {
                this.$Message.error(this.$t('600293'));
                return false;
            }

            if (this.addobj.change_time == '') {
                this.$Message.error(this.$t('101087'));
                return false;
            }

            data = this.addobj;
            // console.log(this.addobj);

            axios
                .request({
                    url: '/tools/ToolLife/toolChangeEdit',
                    data,
                    method: 'post'
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        // console.log(res.data);
                        this.addmodal = false;
                        this.search(1, 10);
                        // this.addobj = res.data.data;
                        // this.addmodal = true;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },

        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);
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
            this.tableRowObj = this.$time.deepClone(currentRow);
        }
    }
};
</script>
<style  scoped>
.flex {
    display: flex;
    justify-content: space-between;
}
.reason {
    flex: 1;
    height: 50px;
    border-radius: 5px;
    background-color: #f0f0f0;
    text-align: center;
    line-height: 50px;
    border: 1px solid #ccc;
    cursor: pointer;
    margin: 10px;
}
.active {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}
</style>
