<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div>
        <div class="filter">
          <label>{{$t('100307')}}：</label>
          <Input type="text" class="searchInput" v-model="productCode" />
        </div>
        <div class="filter">
          <label id="产线">
                {{$t('1950574')}}：
            </label>
            <Select
                v-model="chanelsearch"
                label-in-value
                clearable
                  class="searchSelect"
            >
                <Option
                    v-for="item in this.chanellst"
                    :value="item.id"
                    :key="item.id"
                >{{ item.title }}</Option>
            </Select>
        </div>
      </div>
      <div class="searchBtn">
        <Button type="primary" class="twoWord" icon="ios-search" @click="search(1,pagesize)">{{$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="axios.publicPath+'qms/upload/Submit?templateName=ProductAddtion'"
          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>
    <div class="divborder newTableDiv">
      <Table
        class="tableClass"
        width="100%"
        @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>

    <Modal class="newModalClass" :title="title1" v-model="editmodal" :styles="{width:'400px'}">
      <div class="modal_body" >
        <div>
          <div class="filter">
            <label><i>*</i>{{$t('100307')}}：</label>
            <Select
              v-model="new_productid"
              label-in-value
              clearable
              filterable
              class="searchSelect"
            >
              <Option
                v-for="item in products"
                :value="item.id"
                :key="item.id"
              >{{ item.name + "【" + item.code + "】" }}</Option>
            </Select>
          </div>
        </div>
        <div>
          <div class="filter">
              <label id="产线">
                 <i>*</i> {{$t('1950574')}}：

              </label>
              <Select
                  v-model="chanel"
                  label-in-value
                  clearable
                  class="searchSelect"
              >
                  <Option
                      v-for="item in this.chanellst"
                      :value="item.id"
                      :key="item.id"
                  >{{ item.title }}</Option>
              </Select>
          </div>
        </div>
        <div>
          <div class="filter">
            <label><i>*</i>{{$t(5500030)}}：</label>
            <Input type="number" class="searchInput" v-model="addVal" />
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button type="text" size="large" @click="cancle">{{$t('1033')}}</Button>
        <Button type="primary" size="large" v-if="type===1" :loading="loading1" @click="adddata">
          <span v-if="!loading1">{{$t('1002')}}</span>
          <span v-else>{{$t('1002')}}</span>
        </Button>
        <Button type="primary" size="large" v-if="type===2" :loading="loading2" @click="editdata">
          <span v-if="!loading2">{{$t('1003')}}</span>
          <span v-else>{{$t('1003')}}</span>
        </Button>
        <!--<Button type="primary" v-if="type===1" size="large" @click="adddata">{{$t('1002')}}</Button>
        <Button type="primary" v-if="type===2" size="large" @click="editdata">{{$t('1003')}}</Button>-->
      </div>
    </Modal>
  </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')
            },
            title1: this.$t('1002'),
            tableData1: [],
            editmodal: false,
            page: 1,
            pagesize: 10,
            chanelsearch: '',
            total: 0,
            tableColumns1: [
                {
                    type: 'selection',
                    width: 50,
                    align: 'center'
                },
                {
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    },
                    width: 70
                },
                {
                    title: this.$t('100089'),
                    key: 'productcode',
                    minWidth: 150
                },
                {
                    title: this.$t('5000009'),
                    key: 'sectoindesc',
                    minWidth: 150
                },
                {
                    title: this.$t(5500030),
                    key: 'addval',
                    minWidth: 150
                }
            ],
            productCode: '',
            productid: 0,
            new_productid: 0,
            addVal: '',
            editobj: {},
            sections: [],
            editsections: [],
            chanellst: [],
            products: [],
            chanel: 0,
            type: 1,
            loading1: false,
            loading2: false
        };
    },
    created () {
        this.initproducts();
        this.loadChanel();
        this.search(this.page, this.pagesize);
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
    },
    methods: {
    // 获取产品
        initproducts () {
            axios
                .request({
                    url: '/config/projectproduct/GetProducts',
                    method: 'get'
                })
                .then(res => {
                    this.products = res.data.data;
                    console.log(res.data);
                });
        },
        search (page, pagesize) {
            var params = {
                page: page,
                pageSize: pagesize,
                productCode: this.productCode,
                sectionid: this.chanelsearch
            };
            axios
                .request({
                    url: '/qms/ProductAddtion/Getlist',
                    params,
                    method: 'get'
                })
                .then(res => {
                    this.page = page;
                    this.pagesize = pagesize;
                    this.total = res.data.total;
                    this.mockTableData1(res.data.data);
                });

            this.obj = {};
        },
        cancle () {
            this.editobj = {};
            this.editmodal = false;
            this.type = 0;
            this.valuetype = 1;
            this.search(this.page, this.pagesize);
        },
        add () {
            this.title1 = this.$t('1002');
            this.type = 1;
            this.new_productid = 0;
            this.addVal = '';
            this.editmodal = true;
        },
        edit () {
            console.log(this.obj.sectionid + '999')
            if (
                JSON.stringify(this.obj) === '{}' ||
        this.obj === null ||
        this.obj === undefined
            ) {
                this.$Message.error(this.$t('1043'));
                return false;
            }
            this.title1 = this.$t('1003');
            this.new_productid = this.obj.productid;
            this.addVal = this.obj.addval;
            this.chanel = this.obj.sectionid;
            console.log(this.obj.sectionid + '999')
            this.type = 2;
            this.editmodal = true;
        },
        // 新增提交
        adddata () {
            if (this.new_productid == undefined || this.new_productid == 0) {
                this.$Message.error(this.$t(5500031));
                return false;
            }
            if (this.chanel == undefined || this.chanel == 0) {
                this.$Message.error(this.$t(90000016));
                return false;
            }
            if (this.addVal == undefined || this.addVal == 0) {
                this.$Message.error(this.$t(5500032));
                return false;
            }
            let data = {
                ProductId: this.new_productid,
                sectionid: this.chanel,
                Addval: this.addVal
            };
            this.loading1 = true;
            axios
                .request({
                    url: '/qms/ProductAddtion/Add',
                    data,
                    method: 'post'
                })
                .then(res => {
                    this.loading1 = false;
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t('1055'));
                        this.search(this.page, this.pagesize);
                        this.editmodal = false;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                })
                .catch(() => {
                    this.loading1 = false;
                });
        },
        // 编辑提交
        editdata () {
            let data = {
                Id: this.obj.id,
                ProductId: this.new_productid,
                sectionid: this.chanel,
                Addval: this.addVal
            };

            this.loading2 = true;
            axios
                .request({
                    url: '/qms/ProductAddtion/Modify',
                    data,
                    method: 'post'
                })
                .then(res => {
                    this.loading2 = false;
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t('1060'));
                        this.search(this.page, this.pagesize);
                        this.editmodal = false;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                })
                .catch(() => {
                    this.loading2 = false;
                });
        },
        dele () {
            if (this.selectids == undefined || this.selectids == 0) {
                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 data = {
                            ids: this.selectids
                        };
                        axios
                            .request({
                                url: '/qms/ProductAddtion/Del',
                                data,
                                method: 'post'
                            })
                            .then(res => {
                                if (res.data.ret === 1) {
                                    this.page = 1;
                                    this.selectids = [];
                                    this.search(this.page, this.pagesize);
                                    this.$Message.success(this.$t('1058'));
                                } else {
                                    this.$Message.error(this.$t(res.data.msg));
                                }
                            });
                    }
                });
            }
        },
        mockTableData1 (tablelist) {
            let data = [];
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        id: item.id,
                        productid: item.productId,
                        productcode: item.productCode,
                        productname: item.productName,
                        sectionid: item.sectionid,
                        sectoindesc: item.sectoindesc,
                        addval: item.addVal
                    });
                }
            });
            this.tableData1 = data;
        },
        loadexcel () {
            axios
                .request({
                    url: '/config/Download/GetTemplate?name=ProductAddtion',
                    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 () {
            var sectionid = 0
            if (this.chanelsearch == '' || this.chanelsearch == undefined) {
                sectionid = 0
            } else {
                sectionid = this.chanelsearch
            }
            var params = {
                productCode: this.productCode,
                sectionid: sectionid
            };
            axios
                .request({
                    url: '/qms/ProductAddtion/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(1, this.pagesize);
        },
        changePage (value) {
            this.page = value;
            this.tableData1 = this.search(this.page, this.pagesize);
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.obj = currentRow;
        },
        handleSelectRow: function (data) {
            this.selectids = [];
            for (var i in data) {
                if (this.selectids.indexOf(data[i].id) < 0) {
                    this.selectids.push(data[i].id);
                }
            }
        },
        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('950399'));
        },
        loadChanel () {
            axios
                .request({
                    url: '/qms/RepairPostionSetting/GetChanel',
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.chanellst = res.data.data;
                    } else {
                        // this.$Message.error(this.$t(res.data.msg));
                    }
                });
        }
    }
};
</script>
<style lang="less" scoped>

</style>
