<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
       <div class="filter">
          <label>
            {{$t('950219')}}：
          </label>
          <Cascader
            :data="datalevel"
            :value="leveldata"
            v-model="sectionidsearch"
            trigger="hover"
            @on-change="loadPositionSearch"
           class="searchSelect"
          ></Cascader>
        </div>
      <div class="filter">
        <label id="返工后工位">{{$t('950220')}}：</label>
        <Select v-model="station" label-in-value clearable class="searchSelect">
          <Option v-for="item in SStaionlist" :value="item.id" :key="item.id">{{ item.title }}</Option>
        </Select>
      </div>

      <div class="searchBtn">
        <Button type="primary" class="twoWord" icon="ios-search" @click="search()">{{$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="asyncDelete()">{{$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="downexcel()">{{$t('1007')}}</Button>
      </div>
    </div>

    <Modal class="newModalClass" :title="$t(930052)" v-model="addmodal" :styles="{width:'600px'}">
      <div class="modal_body" >
        <div class="filter">
          <label>
           <i>*</i>{{$t('950219')}}：
          </label>
          <Cascader
            :data="datalevel"
            :value="leveldata"
            v-model="sectionid"
            trigger="hover"
            @on-change="loadPosition"
            class="searchSelect"
          ></Cascader>
        </div>
        <div class="filter">
          <label id="返工后工位">
            <i>*</i> {{$t('950220')}}：
          </label>
          <Select v-model="stationAdd" label-in-value clearable class="searchSelect">
            <Option v-for="item in stationlist" :value="item.id" :key="item.id">{{ item.title }}</Option>
          </Select>
        </div>
      </div>
      <div></div>
      <div slot="footer">
        <Button type="text" size="large" @click="addmodal=false" v-text="$t(1033)">取消</Button>
        <Button type="primary" size="large" @click="asyncAdd" v-text="$t(1011)">确定</Button>
      </div>
    </Modal>
    <Modal class="newModalClass" :title="$t(930053)" v-model="editmodal" :styles="{width:'600px'}">
      <div class="modal_body">
        <div class="filter">
          <label>
            <i>*</i>{{$t('950219')}}：
          </label>
          <Select v-model="detailobj.prestation" label-in-value class="searchSelect">
            <Option
              v-for="item in stationlistModify"
              :value="item.id"
              :key="item.id"
            >{{ item.title }}</Option>
          </Select>
        </div>
        <div class="filter">
          <label id="返工后工位">
            <i>*</i>{{$t('950220')}}：
          </label>
          <Select v-model="detailobj.station" label-in-value class="searchSelect">
            <Option
              v-for="item in stationlistModify"
              :value="item.id"
              :key="item.id"
            >{{ item.title }}</Option>
          </Select>
        </div>
      </div>
      <div></div>
      <div slot="footer">
        <Button type="text" size="large" @click="editmodal=false" v-text="$t(1033)">取消</Button>
        <Button type="primary" size="large" @click="asyncEdit" v-text="$t(1011)">确定</Button>
      </div>
    </Modal>
    <div class="divborder newTableDiv">
      <Table
        class="tableClass"
        @on-current-change="handleRowChange"
        @on-selection-change="handleSelectRow"
        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>
  </div>
</template>
<script>
import axios from '@/libs/api.request'
export default {
    data () {
        return {
            headers: {
                token: localStorage.getItem('token'),
                timestamp: localStorage.getItem('timestamp'),
                nonce: localStorage.getItem('nonce'),
                sign: localStorage.getItem('sign')
            },
            prestation: 0,
            station: 0,
            prestationAdd: 0,
            stationAdd: 0,
            action:
        axios.publicPath +
        'qms/upload/submit?templateName=ReworkPositionSetting',
            preSStaionlist: [],
            SStaionlist: [],
            stationlist: [],
            stationlistModify: [],
            tableData1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            addmodal: false,
            editmodal: false,
            detailobj: {},
            // 克隆对象
            tableRowObj: {},
            leveldata: [],
            datalevel: [],
            sectionid: [],
            sectionidsearch: [],
            tableColumns1: [
                {
                    type: 'selection',
                    width: 50,
                    align: 'center'
                },
                {
                    type: 'index2',
                    title: this.$t(1008),
                    key: 'xuhao',
                    width: 70,
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        )
                    }
                },
                {
                    title: this.$t(5000009),
                    key: 'lineDesc'
                },
                {
                    title: this.$t(950219),
                    key: 'preSationDesc'
                },
                {
                    title: this.$t(950220),
                    key: 'stationDesc'
                }
            ],
            selectids: []
        }
    },
    created () {
        this.search()
        this.initlevel()
        // this.initPreStaion();
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
    },
    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
                })
        },
        search () {
            var params = {
                prestion: this.prestation,
                station: this.station,
                page: this.page,
                pagesize: this.pagesize
            }
            axios
                .request({
                    url: '/qms/RepairPostionSetting/Getlist',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.total = res.data.total
                        this.mockTableData1(res.data.data)
                        this.detailobj = {}
                        this.page = res.data.page
                    }
                })
        },
        mockTableData1 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        id: item.id,
                        line: item.line,
                        lineDesc: item.lineDesc,
                        prestation: item.preStation,
                        preSationDesc: item.preSationDesc,
                        station: item.staion,
                        stationDesc: item.stationDesc
                    })
                }
            })
            this.tableData1 = data
        },
        add () {
            this.addmodal = true
        },
        edit () {
            this.detailobj = this.tableRowObj
            if (this.detailobj.id === undefined) {
                this.$Message.error(this.$t(930054))
                return false
            }
            this.editmodal = true
            var params = {
                line: this.detailobj.line
            }
            axios
                .request({
                    url: '/config/ProjectLevelSection/GetStation',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.stationlistModify = res.data.data
                    } else {
                        // this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        asyncAdd () {
            let pre = this.sectionid[this.sectionid.length - 1]
            var data = {
                Station: this.stationAdd,
                PreStation: pre
            }
            if (data.PreStation === undefined || data.Station === undefined || data.PreStation === 0 || data.Station === 0) {
                this.$Message.error(this.$t(930055))
                return false
            }
            if (data.PreStation == data.Station) {
                this.$Message.error(this.$t(930056))
                return false
            }
            axios
                .request({
                    url: '/qms/RepairPostionSetting/Add',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t(1055))
                        this.page = 1
                        this.pagesize = 10
                        this.search()
                        this.station = 0
                        this.stationAdd = 0
                        this.sectionid = []
                        this.addmodal = false
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        asyncEdit () {
            if (
                this.detailobj.prestation === 0 ||
        this.detailobj.prestation === undefined ||
        this.detailobj.station === 0 ||
        this.detailobj.station === undefined
            ) {
                this.$Message.error(this.$t(930055))
                return false
            }
            var data = {
                Id: this.detailobj.id,
                Station: this.detailobj.station,
                PreStation: this.detailobj.prestation
            }
            axios
                .request({
                    url: '/qms/RepairPostionSetting/Modify',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t(90000054))
                        this.page = 1
                        this.pagesize = 10
                        this.search()
                        this.station = 0
                        this.editmodal = false
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        asyncDelete () {
            if (this.selectids === undefined || this.selectids === null || this.selectids === []) {
                this.$Message.error((this.$t('1017')))
                return false
            } else {
                this.$Modal.confirm({
                    title: this.$t('1018'),
                    content: '',
                    width: '290px',
                    closable: true,
                    okText: this.$t('1004'),
                    onOk: () => {
                        let parameter = {
                            ids: this.selectids
                        }
                        axios.request({
                            url: '/qms/RepairPostionSetting/del',
                            data: parameter,
                            method: 'post'
                        }).then(res => {
                            if (res.data.ret === 1) {
                                this.page = 1
                                this.selectids = []
                                this.search()
                                this.$Message.success(this.$t('1058'))
                            } else {
                                this.$Message.error(this.$t(res.data.msg))
                            }
                        })
                    }
                })
            }
        },
        handleSelectRow: function (data) {
            this.selectids = []
            for (var i in data) {
                if (this.selectids.indexOf(data[i].id) < 0) {
                    this.selectids.push(data[i].id)
                }
            }
        },
        loadPosition (v) {
            this.stationAdd = 0
            this.stationlist = []
            var params = {
                line: v[v.length - 2]
            }
            axios
                .request({
                    url: '/config/ProjectLevelSection/GetStation',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.stationlist = res.data.data
                    } else {
                        // this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        loadPositionSearch (v) {
            this.station = 0
            this.prestation = 0
            if (v.length < 2) {
                return false
            }
            this.prestation = v[v.length - 1]
            var params = {
                line: v[v.length - 2]
            }
            axios
                .request({
                    url: '/config/ProjectLevelSection/GetStation',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.SStaionlist = res.data.data
                    } else {
                        // this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        downexcel () {
            var params = {
                prestion: this.prestation,
                station: this.station
            }
            axios
                .request({
                    url: '/qms/RepairPostionSetting/ExporExcel',
                    params,
                    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))
                    }
                })
        },
        handlePageSize (value) {
            this.pagesize = value
            this.tableData1 = this.search()
        },
        changePage (value) {
            this.page = value
            this.tableData1 = this.search()
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow
            this.tableRowObj = this.$time.deepClone(currentRow)
        },
        initPreStaion () {
            var params = {
                preStation: 0
            }
            axios
                .request({
                    url: '/qms/RepairPostionSetting/GetPreStaion',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.preSStaionlist = res.data.data
                    } else {
                    }
                })
        },
        loadStaion (staion) {
            this.station = 0
            var params = {
                preStation: staion
            }
            axios
                .request({
                    url: '/qms/RepairPostionSetting/GetStaion',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.SStaionlist = res.data.data
                    } else {
                    }
                })
        },
        loadexcel () {
            axios
                .request({
                    url: '/config/download/GetTemplate?name=ReworkPositionSetting',
                    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))
                    }
                })
        },
        handleFormatError (file) {
            this.$Message.error(this.$t('950396') + file.name + this.$t('950397'))
        },
        handleSuccess (res, file) {
            if (res.ret === 1) {
                this.page = 1
                this.search()
                this.$Message.success(this.$t('950398'))
            } else {
                if ((res.msg + '').indexOf(',') != -1) {
                    inittip(res.msg)
                } else {
                    this.$Message.error(this.$t(res.msg))
                }
            }
        },
        handleError () {
            this.$Message.error(this.$t('950399'))
        }
    }
}
</script>
