<template>
  <div>
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div class="filter">
        <label>{{$t(100395)}}：</label>
        <Cascader
          :data="datalevel"
          :value="leveldata"
          v-model="sectionid"
          trigger="click"
          change-on-select
           class="searchSelect"
        ></Cascader>
      </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()">{{$t('1002')}}</Button>
        <Button type="warning" class="twoWord" icon="ios-create-outline" @click="edit()">{{$t('1003')}}</Button>
        <Button type="error" class="twoWord intervalRight" icon="md-close-circle" @click="dele()">{{$t('1004')}}</Button>
        <Button type="primary" class="fourWord" 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" class="fourWord" icon="md-cloud-upload">{{$t('1006')}}</Button>
        </Upload>
        <Button type="primary" class="fourWord" icon="ios-cloud-download" @click="Export()">{{$t('1007')}}</Button>
      </div>
    </div>
    <div class="divborder newTableDiv">
      <Table
        class="tableClass"
        @on-current-change="handleRowChange"
        @on-selection-change="selecttrchange"
        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>
    <Modal class="newModalClass" :title="modaltitle" v-model="modal1" :styles="{width:'650px'}">
      <div class="filter">
        <label><i>*</i>{{$t(100395)}}：</label>
        <Select
          v-model="detailobj.line"
          @on-change="initstation(detailobj.line)"
          label-in-value
          clearable
         class="searchSelect"
        >
          <Option
            v-for="item in lines"
            :value="item.id"
            :key="item.id"
          >{{ item.id > 0 ? item.title :'' }}</Option>
        </Select>
      </div>
      <div class="filter">
        <label><i>*</i>{{$t(930064)}}：</label>
        <Select v-model="detailobj.section" label-in-value clearable class="searchSelect">
          <Option
            v-for="item in stations"
            :value="item.id"
            :key="item.id"
          >{{ item.id > 0 ? item.title :'' }}</Option>
        </Select>
      </div>
      <div class="filter">
        <label><i>*</i>{{$t(101109)}}：</label>
        <Select v-model="detailobj.cellId" label-in-value clearable class="searchSelect">
          <Option
            v-for="item in cells"
            :value="item.id"
            :key="item.id"
          >{{ item.id > 0 ? item.item :'' }}</Option>
        </Select>
      </div>
      <div class="filter">
        <label><i>*</i>{{$t(101111)}}：</label>
        <Input class="searchInput" type="number" v-model="detailobj.index"  />
      </div>
      <!-- <div class="filter">
        <label>{{$t(100395)}}:</label>
        <Cascader
          :data="datalevel"
          :value="leveldata"
          v-model="sectionid"
          trigger="click"
          change-on-select
          style="display:inline-block;width:200px;"
        ></Cascader>
      </div>-->
      <div slot="footer">
        <Button type="text" size="large" @click="cancel">{{$t('1033')}}</Button>
        <Button type="primary" v-if="type===1" size="large" @click="saveAdd">{{$t('1002')}}</Button>
        <Button type="primary" v-if="type===2" size="large" @click="saveEdit">{{$t('1011')}}</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import axios from '@/libs/api.request';

export default {
    data () {
        return {
            action:
        axios.publicPath + 'qms/upload/submit?templateName=WorkCellStation',
            headers: {
                token: localStorage.getItem('token'),
                timestamp: localStorage.getItem('timestamp'),
                nonce: localStorage.getItem('nonce'),
                sign: localStorage.getItem('sign')
            },
            modaltitle: '',
            productid: '', // 产品
            products: [],
            sectionid: [], // 通道层级
            datalevel: [],
            leveldata: [],
            lines: [],
            stations: [],
            delelistobj: [], // 删除的所有对象
            tableRowObj: {}, // 克隆
            total: 0,
            page: 1,
            pagesize: 10,
            detailobj: { id: 0, cellId: 0, cell: '', index: 0, line: 0, section: 0 },
            tableData: [],
            tableColumns: [
                {
                    type: 'selection',
                    width: 50,
                    align: 'center'
                },
                {
                    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(101109),
                    key: 'cell'
                },
                {
                    title: this.$t(101110),
                    key: 'nextCell'
                },
                {
                    title: this.$t(101111),
                    key: 'index'
                },
                {
                    title: this.$t(100395),
                    key: 'sectionDesc'
                }
            ],
            // 模态框数据
            modal1: false,
            productid1: '',
            materialid: '',
            cells: [],
            sectionid1: [],
            number: 0,
            type: 0
        };
    },
    created () {
        this.initcells();
        this.initlevel();
        this.initline();
        this.search(1, 10);
        // 格式化表格样式
        this.tableColumns = this.$time.initTableTitle(this.tableColumns)
    },
    methods: {
        initproducts () {
            // 获取产品
            axios
                .request({
                    url: '/config/projectproduct/GetProducts',
                    method: 'get'
                })
                .then(res => {
                    this.products = res.data.data;
                });
        },
        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;
                });
        },
        initline () {
            // 获取通道层级
            axios
                .request({
                    url: 'config/ProjectLevelSection/GetLine',
                    method: 'get'
                })
                .then(res => {
                    this.lines = res.data.data;
                });
        },
        initstation (line) {
            this.stations = [];

            axios
                .request({
                    url: 'config/ProjectLevelSection/GetStation?line=' + line,
                    method: 'get'
                })
                .then(res => {
                    this.stations = res.data.data;
                });
        },
        selecttrchange (value) {
            this.delelistobj = value;
        },
        initcells () {
            // 根据产品获得物料
            axios
                .request({
                    url: '/qms/WorkCell/Items',
                    method: 'get'
                })
                .then(res => {
                    this.cells = res.data.data;
                });
        },
        routechange () {
            // 监听产品变化
            this.initcells();
        },

        search (page, pagesize) {
            // 查询
            let selct = 0;
            if (this.sectionid.length > 0) {
                selct = this.sectionid[this.sectionid.length - 1];
            }
            var params = {
                section: selct,
                page: page,
                pagesize: pagesize
            };
            axios
                .request({
                    url: '/qms/WorkCellStation/GetList',
                    params,
                    method: 'get'
                })
                .then(res => {
                    this.page = page;
                    this.pagesize = pagesize;
                    this.total = res.data.total;
                    this.mockTableData1(res.data.data);
                });
            this.detailobj = {};
            this.tableRowObj = {};
            this.obj = {};
        },
        mockTableData1 (tablelist) {
            // 渲染表格
            let data = [];
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        id: item.id,
                        index: item.index,
                        line: item.line,
                        sectionDesc: item.sectionDesc,
                        section: item.section,
                        cellId: item.cellId,
                        cell: item.cell,
                        nextCell: item.nextCell
                    });
                }
            });
            this.tableData = data;
        },
        add () {
            this.type = 1; // 添加
            this.modal1 = true;
            this.modaltitle = this.$t('1002')
            this.detailobj = { id: 0, cellId: 0, cell: '', index: '', line: 0, section: 0 }
        },
        edit () {
            // 编辑
            this.detailobj = this.$time.deepClone(this.tableRowObj);
            if (this.detailobj.id == undefined || this.detailobj.id == 0) {
                this.$Message.error(this.$t('1014'));
                return;
            }
            this.initstation(this.detailobj.line);
            this.type = 2; // 修改
            this.modaltitle = this.$t('1003')
            this.modal1 = true;
        },
        dele () {
            if (this.delelistobj.length < 1) {
                this.$Message.error(this.$t('1017'));
                return false;
            }
            this.confirm();
        },
        confirm () {
            // 确认删除
            this.$Modal.confirm({
                title: this.$t('1018'),
                content: '',
                width: '290px',
                closable: true,
                okText: this.$t('1004'),
                onOk: () => {
                    var arr = [];
                    this.delelistobj.forEach(item => {
                        arr.push(item.id);
                    });
                    var data = {
                        ids: arr
                    };
                    this.axios
                        .request({
                            url: '/qms/WorkCellStation/Del',
                            data,
                            method: 'post'
                        })
                        .then(res => {
                            if (res.data.ret === 1) {
                                this.$Message.success(this.$t('1'));
                                this.search(1, this.pagesize);
                                this.delelistobj = [];
                            } else {
                                this.$Message.error(this.$t(res.data.msg));
                            }
                        });
                },
                onCancel: () => {
                    return false;
                }
            });
        },
        saveAdd () {
            // 保存
            if (this.detailobj.section == undefined || this.detailobj.section == 0) {
                this.$Message.error(this.$t('1950580'));
                return;
            }
            if (this.detailobj.cellId == undefined || this.detailobj.cellId == 0) {
                this.$Message.error(this.$t('5500040'));
                return;
            }
            if (this.detailobj.index == undefined || this.detailobj.index == 0) {
                this.$Message.error(this.$t('5500041'));
                return;
            }
            var data = {
                cell: this.detailobj.cellId,
                section: this.detailobj.section,
                index: this.detailobj.index
            };

            axios
                .request({
                    url: '/qms/WorkCellStation/Add',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t('1055'));
                        this.search(this.page, this.pagesize);
                        this.modal1 = false;
                        this.detailobj = {};
                        this.search(this.page, this.pagesize);
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        saveEdit () {
            // 保存
            var data = this.detailobj;
            var data = {
                id: this.detailobj.id,
                cell: this.detailobj.cellId,
                section: this.detailobj.section,
                index: this.detailobj.index
            };
            axios
                .request({
                    url: '/qms/WorkCellStation/Modify',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t('90000054'));
                        this.search(this.page, this.pagesize);
                        this.modal1 = false;
                        this.detailobj = {};
                        this.search(this.page, this.pagesize);
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        cancel () {
            this.modal1 = false;
        },
        loadexcel () {
            // 下载模板
            axios
                .request({
                    url: '/config/download/GetTemplate?name=WorkCellStation',
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        window.location.href = axios.publicPath + '' + res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        Export () {
            // 导出
            let selct = 0;
            if (this.sectionid.length > 0) {
                selct = this.sectionid[this.sectionid.length - 1];
            }
            axios
                .request({
                    url: '/qms/WorkCellStation/ExportExcel?section=' + selct,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        window.location.href = axios.publicPath + '' + res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        /** 表格处理 */
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
            this.tableRowObj = this.$time.deepClone(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);
        },
        handleFormatError (file) {
            this.$Message.error(this.$t('950396') + file.name + this.$t('950397'))
        },
        handleSuccess (res, file) {
            if (res.ret == 1) {
                this.$Message.success(this.$t('950398'));
                this.search(this.page, this.pagesize);
            } else {
                if ((res.msg + '').indexOf(',') != -1) {
                    inittip(res.msg);
                } else {
                    this.$Message.error(this.$t(res.msg));
                }
            }
        },
        handleError () {
            this.$Message.error(this.$t('2010006') + '!');
        }
    }
};
</script>

<style>
</style>
