<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
    <div class="filter">
      <label id="返工后工位">{{$t('920145')}}：</label>
      <!-- <Select v-model="type" label-in-value clearable style="width:160px;">
        <Option v-for="item in typelist" :value="item.id" :key="item.id">{{ item.title }}</Option>
      </Select> -->
       <Input class="searchInput"  type="text" clearable v-model="key"  />
    </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="del()">{{$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(950116)" v-model="addmodal" :styles="{width:'720px'}">
      <div class="modal_body">
        <div>
          <div class="filter">
            <label id="分类">
             <i>*</i>{{$t('900514')}}：

            </label>
            <Select
              v-model="addtype"
              @on-change="dropDown(addtype)"
              label-in-value

              class="searchSelect"
            >
              <Option
                v-for="item in this.typelist"
                :value="item.id"
                :key="item.id"
              >{{ item.title }}</Option>
            </Select>
          </div>
          <div class="filter">
            <label id="分类">
              <i>*</i>{{$t('600648')}}：

            </label>
            <Select
              v-model="addrefer"
              label-in-value
              class="searchSelect"
            >
              <Option
                v-for="item in typerefer"
                :value="item.id"
                :key="item.id"
              >{{ item.name }}</Option>
            </Select>
          </div>

          <div class="filter">
             <label id="原因">
              <i>*</i>{{$t('950228')}}：

            </label>
              <Input class="searchInput" type="text" v-model="addReason"  />
          </div>
        </div>
      </div>
      <div></div>
      <div slot="footer">
        <Button type="text" size="large" @click="cancle()">{{$t(1033)}}</Button>
        <Button type="primary" size="large" @click="asyncSave()">{{$t(1011)}}</Button>
      </div>
    </Modal>
     <Modal class="newModalClass" :title="$t(950116)" v-model="editmodal" :styles="{width:'720px'}">
      <div class="modal_body">
        <div>
          <div class="filter">
            <label id="分类">
              <i>*</i>{{$t('900514')}}：

            </label>
            <Select
              v-model="detailobj.type"
              @on-change="dropDown(detailobj.type)"
              label-in-value
             class="searchSelect"
            >
              <Option
                v-for="item in this.typelist"
                :value="item.id"
                :key="item.id"
              >{{ item.title }}</Option>
            </Select>
          </div>
          <div class="filter">
            <label id="分类">
              <i>*</i>{{$t('900514')}}：

            </label>
            <Select
              v-model="detailobj.refer"
              label-in-value
              class="searchSelect"
            >
              <Option
                v-for="item in this.typerefer"
                :value="item.id"
                :key="item.id"
              >{{ item.name }}</Option>
            </Select>
          </div>

          <div class="filter">
             <label id="原因">
              <i>*</i>{{$t('950228')}}：

            </label>
              <Input class="searchInput" type="text" v-model="detailobj.reason"  />
          </div>
        </div>
      </div>
      <div></div>
      <div slot="footer">
        <Button type="text" size="large" @click="cancle()">{{$t(1033)}}</Button>
        <Button type="primary" size="large" @click="asyncEdit()">{{$t(1011)}}</Button>
      </div>
    </Modal>

    <div class="divborder newTableDiv">
      <Table
        class="tableClass"
        @on-current-change="handleRowChange"
         @on-selection-change="selecttrchange"
        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')
            },
            key: '',
            total: 0,
            page: 1,
            pagesize: 10,
            type: 1,
            tableData1: [],
            detailobj: {},
            // 克隆对象
            tableRowObj: {},
            delelistobj: [], // 删除的所有对象
            addmodal: false,
            editmodal: false,
            action: axios.publicPath + 'qms/upload/submit?templateName=ReworkReason',
            addtype: 1,
            addrefer: 0,
            addReason: '',
            typelist: [
                { id: 1, title: this.$t('900942') },
                { id: 2, title: this.$t('400016') }
            ],
            typerefer: [],
            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(900514),
                    key: 'typeDesc'
                },
                {
                    title: this.$t(920145),
                    key: 'referDesc'
                },
                {
                    title: this.$t(950228),
                    key: 'reason'
                }
            ]
        };
    },
    created () {
        this.search();
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
    },
    methods: {
        search () {
            var params = {
                keyword: this.key,
                page: this.page,
                pagesize: this.pagesize
            };
            axios
                .request({
                    url: '/qms/ReworkReference/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,
                        type: item.type,
                        typeDesc: item.typeDesc,
                        referDesc: item.referDesc,
                        refer: item.refer,
                        reason: item.reason
                    })
                }
            })
            this.tableData1 = data
        },
        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)
        },
        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'))
        },
        selecttrchange (value) {
            this.delelistobj = value
        },
        dropDown (type) {
            var params = {
                type: type
            };
            axios
                .request({
                    url: '/qms/ReworkReferenceType/GetItem',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.typerefer = res.data.data;
                    }
                });
        },
        add () {
            this.addmodal = true;
            this.dropDown(1);
        },
        edit () {
            this.editmodal = true;
            this.detailobj = this.$time.deepClone(this.tableRowObj)
            this.dropDown(this.detailobj.type)
        },
        cancle () {
            this.addmodal = false;
            this.editmodal = false;
        },
        asyncSave () {
            if (this.addtype == 0 || this.addrefer == 0 || this.addrefer == undefined || this.addReason == undefined || this.addReason == '') {
                this.$Message.error(this.$t('200232'))
                return false
            }
            var data = {
                type: this.addtype,
                refertype: this.addrefer,
                name: this.addName,
                reason: this.addReason
            }
            axios
                .request({
                    url: '/qms/ReworkReference/Add',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t(1055))
                        this.page = 1
                        this.search()
                        this.addtype = 1
                        this.addrefer = ''
                        this.addReason = ''
                        this.addmodal = false
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        asyncEdit () {
            console.log(this.detailobj);
            if (this.detailobj.type == 0 || this.detailobj.refer == undefined || this.detailobj.refer == '' || this.detailobj.reason == undefined || this.detailobj.reason == '') {
                this.$Message.error(this.$t(930054))
                return false
            }
            var data = {
                id: this.detailobj.id,
                type: this.detailobj.type,
                refertype: this.detailobj.refer,
                reason: this.detailobj.reason
            }
            axios
                .request({
                    url: '/qms/ReworkReference/Modify',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t(1060))
                        this.page = 1
                        this.search()
                        this.editmodal = false
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        del () {
            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/ReworkReference/Del',
                        data,
                        method: 'post'
                    }).then(res => {
                        if (res.data.ret === 1) {
                            this.page = 1
                            this.search()
                            this.$Message.success(this.$t('1'))
                            this.delelistobj = []
                        } else {
                            this.$Message.error(this.$t(res.data.msg))
                        }
                    })
                },
                onCancel: () => {
                    return false
                }
            })
        },
        loadexcel () {
            axios
                .request({
                    url: '/config/download/GetTemplate?name=ReworkReason',
                    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))
                    }
                })
        },
        downexcel () {
            axios
                .request({
                    url: '/qms/ReworkReference/ExportExcel?keyword=' + this.key,
                    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))
                    }
                })
        }
    }
};
</script>
