<template>
    <div>
        <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 class="filter">
                    <label>{{$t('600009')}}：</label>
                    <Select
                        v-model="program_no"
                        label-in-value
                        clearable
                        class="searchSelect"
                        style="margin-left:10px;"
                    >
                        <Option v-for="item in programList" :value="item" :key="item">{{ item }}</Option>
                    </Select>
                </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" @click="add()">{{$t('1039')}}</Button>
                <Button type="success" class="twoWord" @click="edit()">配置</Button>
                <Button type="success" class="fourWord" @click="edit()">刀位配置</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 class="newModalClass" v-model="ordermodal" :styles="{width:'700px'}">
                <p slot="header">
                    <span v-if="type===1">{{$t('1002')}}</span>
                    <span v-if="type===2">{{$t('1003')}}</span>
                </p>
                <div class="modal_body">
                    <div class="filter">
                        <label>
                            <i>*</i>
                            {{$t('600036')}}：
                        </label>
                        <Input class="searchInput" type="text" v-model="addobj.name" />
                    </div>
                </div>
                <div slot="footer">
                    <Button type="text" size="large" @click="ordermodal=false">{{$t('1033')}}</Button>

                </div>
        </Modal>
        <Modal class="newModalClass" v-model="configmodal" :styles="{width:'700px'}">
                <p slot="header">
                    <span v-if="type===1">{{$t('1002')}}</span>
                    <span v-if="type===2">{{$t('1003')}}</span>
                </p>
                <div class="modal_body">
                    <div class="filter">
                        <label>
                            <i>*</i>
                            {{$t('600036')}}：
                        </label>
                        <Input class="searchInput" type="text" v-model="addobj.name" />
                    </div>
                </div>
                <div slot="footer">
                    <Button type="text" size="large" @click="configmodal=false">{{$t('1033')}}</Button>

                </div>
        </Modal> -->
    </div>
</template>

<script>
import axios from '@/libs/api.request'
export default {
    data () {
        return {
            datalevel: [],
            leveldata: [],
            sectionid: '',
            program_no: '',
            programList: [],
            tableData1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            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(600009),
                    key: 'programno'
                },

                {
                    title: '刀位顺序',
                    key: 'isSort'
                }
            ],
            detailobj: {},
            ordermodal: false,
            configmodal: false
        };
    },
    created () {
        this.initlevel()
        this.search();
    },
    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];
            this.getProgramList(this.sectionid)
        },
        getProgramList (sectionid) {
            var params = {
                sectionid: sectionid,
                type: 2 // 未配置刀具程序号
            };
            axios
                .request({
                    url:
                        '/tools/ToolConfigV2/getProgramListByCutterLocationConfig?sectionid=' + sectionid + '&type=2',
                    params,
                    method: 'get'
                })
                .then((res) => {
                    console.log(res.data);
                });
        },
        search () {
            var params = {
                sectionid: this.sectionid,
                program_no: this.program_no,
                page: this.page,
                pagesize: this.pagesize
            };
            axios
                .request({
                    url: '/tools/ToolConfigV2/GetUnConfigProgramList',
                    params,
                    method: 'get'
                })
                .then((res) => {
                    this.total = res.data.total;
                    this.tableData1 = res.data.data;
                    // this.mockTableData1(res.data.data);
                });
        },
        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);
            // this.editIndustrychange();
        }
    }
};
</script>

<style>
</style>
