<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
        <div class="filter">
           <label>{{$t(1950510)}}：</label>
            <Cascader
            :data="datalevel"
            :value="leveldata"
            trigger="click"
            change-on-select
            class="searchSelect"
            @on-change="changelevel"
            ></Cascader>
        </div>
         <div class="searchBtn">
          <Button type="primary" class="twoWord" icon="ios-search" @click="tosearch()">{{$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="ios-cloud-download" @click="Export()">{{$t('1007')}}</Button>
         </div>
    </div>
    <div class="divborder newTableDiv">
      <Table
         class="tableClass"
        @on-current-change="handleRowChange"
        highlight-row
        :data="tableData1"
        @on-selection-change="handleSelectRow"
        :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>
      <Modal class="newModalClass" :title="$t('1002')" v-model="addmodal" :styles="{width:'700px'}">
        <div class="modal_body">
        <div class="filter">
            <label><i>*</i>{{this.$t('1950510')}}：<span></span></label>
            <Cascader
              :data="datalevel1"
              :value="leveldata1"
              trigger="click"
              change-on-select
              class="searchSelect"
              @on-change="changelevel1"
            ></Cascader>
        </div>
        <div class="filter">
            <label><i>*</i>{{this.$t('99100038')}}：<span></span></label>
            <Input class="searchInput" type="number" min=1 v-model="parameno" />
        </div>
        <div class="filter">
            <label><i>*</i>{{this.$t('99100039')}}：<span></span></label>
            <Input class="searchInput" type="text" v-model="paramename" />
        </div>
        <div class="filter">
            <label>{{this.$t('99100040')}}：</label>
            <RadioGroup v-model="isRequired">
              <Radio :label="1" style="width:50px;">{{$t('1000020')}}</Radio>
              <Radio :label="2" style="width:50px;">{{$t('1000021')}}</Radio>
            </RadioGroup>
        </div>
        <div class="filter">
            <label><i>*</i>{{this.$t('950101')}}：<span></span></label>
            <Select v-model="parametype" class="searchSelect" @on-change="changeparametype">
                <Option value="1">{{$t('5500000')}}</Option>
                <Option value="2">{{$t('5500001')}}</Option>
            </Select>
        </div>
        <div class="filter" v-show="typeshow">
            <label><i>*</i>{{this.$t('5500002')}}：<span></span></label>
            <Select v-model="paramecheck" label-in-value :max-tag-count="5" clearable multiple class="searchSelect nowropStyle" >
              <Option v-for="item in parameters" :value="item.dkey" :key="item.dkey">{{ item.dval }}</Option>
          </Select>
        </div>
      </div>
      <div slot="footer">
            <Button type="text" size="large" @click="addmodal = false">{{$t('1033')}}</Button>
            <Button type="primary" size="large" @click="adddata()">{{$t('1011')}}</Button>
        </div>
      </Modal>

      <!-- 编辑 -->
      <Modal class="newModalClass" :title="$t('1003')" v-model="editmodal" :styles="{width:'700px'}">
        <div class="modal_body">
        <div class="filter">
            <label><i>*</i>{{this.$t('1950510')}}：<span></span></label>
           <div class="filter" style="width:440px">{{section_name}}</div>
        </div>
        <div class="filter">
            <label><i >*</i>{{this.$t('99100038')}}：<span></span></label>
            <Input class="searchInput" type="number" min=1 v-model="parameno2" />
        </div>
        <div class="filter">
            <label><i >*</i>{{this.$t('99100039')}}：<span></span></label>
            <Input class="searchInput" type="text" v-model="paramename2" />
        </div>
        <div class="filter">
            <label>{{this.$t('99100040')}}：</label>
            <RadioGroup v-model="isRequired2">
              <Radio :label="1" style="width:50px;">{{$t('1000020')}}</Radio>
              <Radio :label="2" style="width:50px;">{{$t('1000021')}}</Radio>
            </RadioGroup>
        </div>
        <div class="filter">
            <label><i>*</i>{{this.$t('950101')}}：<span></span></label>
            <Select v-model="parametype2" class="searchSelect" @on-change="changeparametype2">
                <Option :value="1">{{$t('5500000')}}</Option>
                <Option :value="2">{{$t('5500001')}}</Option>
            </Select>
        </div>
        <div class="filter" v-show="typeshow2">
            <label><i>*</i>{{this.$t('5500002')}}：<span></span></label>
             <Select v-model="paramecheck2" label-in-value :max-tag-count="5" clearable multiple class="searchSelect nowropStyle" >
              <Option v-for="item in parameters2" :value="item.dkey" :key="item.dkey">{{ item.dval }}</Option>
          </Select>
            <!-- <input class="publicinput" style="width:440px" type="text" v-model="paramecheck2" :placeholder="$t('5500003')"> -->
        </div>
      </div>
      <div slot="footer">
            <Button type="text" size="large" @click="editmodal = false">{{$t('1033')}}</Button>
            <Button type="primary" size="large" @click="editdata()">{{$t('1011')}}</Button>
        </div>
      </Modal>

    </div>
  </div>
</template>
<script>
import axios from '@/libs/api.request'
export default {
    name: 'productmanagement', // 组件不刷新
    data () {
        return {
            datalevel: [], // 产线层级插件所需数据
            leveldata: [], // 产线层级选中数据
            levelid: 0, // 产线层级选中的section_id

            datalevel1: [], // 产线层级插件所需数据
            leveldata1: [], // 产线层级选中数据
            levelid1: 0, // 产线层级选中的section_id
            parameno: '',
            paramename: '',
            parametype: '',
            paramecheck: '',
            typeshow: false,
            isRequired: 1,

            datalevel2: [], // 产线层级插件所需数据
            leveldata2: [], // 产线层级选中数据
            levelid2: 0, // 产线层级选中的section_id
            parameno2: '',
            paramename2: '',
            parametype2: '',
            paramecheck2: '',
            typeshow2: false,
            isRequired2: 1,

            tableData1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            addmodal: false,
            editmodal: false,
            editobj: {},
            selectids: [],
            parameters: [],
            parameters2: [],
            section_name: '',
            tableColumns1: [
                {
                    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: '90px'
                },
                {
                    title: this.$t('1950510'),
                    key: 'section_name',
                    align: 'center'
                },
                {
                    title: this.$t('99100038'),
                    key: 'serial_number',
                    align: 'center'
                },
                {
                    title: this.$t('99100039'),
                    key: 'name',
                    align: 'center'
                },
                {
                    title: this.$t('99100040'),
                    key: 'is_required_name',
                    align: 'center'
                },
                {
                    title: this.$t('950101'),
                    key: 'category_name',
                    align: 'center'
                },
                {
                    title: this.$t('5500002'),
                    key: 'parameter_names',
                    align: 'center'
                },
                {
                    title: this.$t('920139'),
                    key: 'updator',
                    align: 'center'
                },
                {
                    title: this.$t('920138'),
                    key: 'updatetime',
                    align: 'center'
                }
            ]
        }
    },
    created () {
        this.initlevel()
        this.search()
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
    },
    methods: {
        changelevel (data) {
            this.levelid = data[data.length - 1];
        },
        changelevel1 (data) {
            this.levelid1 = data[data.length - 1];
        },
        changelevel2 (data) {
            this.levelid2 = data[data.length - 1];
        },
        changeparametype (e) {
            this.paramecheck = ''
            if (e === '2') {
                this.typeshow = true;
            } else {
                this.typeshow = false;
            }
        },
        changeparametype2 (e) {
            this.paramecheck2 = ''
            if (e === 2) {
                this.typeshow2 = true;
            } else {
                this.typeshow2 = false;
            }
        },
        initlevel () {
            // 初始化产线层级
            axios
                .request({
                    url: 'config/ProjectLevelSection/GetSectionTree',
                    method: 'get'
                })
                .then(res => {
                    const arr = [];
                    this.datalevel = res.data.data;
                    this.datalevel1 = res.data.data;
                    this.datalevel2 = res.data.data;
                    arr.push(res.data.data[0].value);
                    this.leveldata = arr;
                    this.leveldata1 = arr;
                    this.leveldata2 = arr;
                });
        },
        handleSelectRow: function (data) {
            this.selectids = []
            for (var i in data) {
                this.selectids.push(data[i].id)
            }
        },
        tosearch () {
            this.page = 1
            this.search()
        },
        search () {
            var params = {
                sectionId: this.levelid,
                page: this.page,
                pagesize: this.pagesize
            }
            axios
                .request({
                    url: '/qms/SendTestParameter/GetPageParameters',
                    params,
                    method: 'get'
                })
                .then(res => {
                    this.total = res.data.total
                    this.mockTableData1(res.data.data)
                })
        },
        mockTableData1 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        section_id: item.section_id,
                        section_name: item.section_name,
                        serial_number: item.serial_number,
                        name: item.name,
                        is_required_name: item.is_required === 1 ? this.$t('1000020') : this.$t('1000021'),
                        is_required: item.is_required,
                        category_name: item.category === 1 ? this.$t('5500000') : this.$t('5500001'),
                        category: item.category,
                        parameters: item.parameters,
                        parameter_names: item.parameter_names,
                        id: item.id,
                        updator: item.updator,
                        updatetime: item.update_time
                    })
                }
            })
            this.tableData1 = data
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow
        },
        handlePageSize (value) {
            this.pagesize = value
            this.tableData1 = this.search()
        },
        changePage (value) {
            this.page = value
            this.tableData1 = this.search()
        },
        iniparameters (type) {
            axios
                .request({
                    url: '/config/Dict/GetDictByCat?cat=SendTestParameter',
                    method: 'get'
                })
                .then(res => {
                    if (type === 1) {
                        this.parameters = res.data.data
                    } else {
                        this.parameters2 = res.data.data
                    }
                })
        },
        add () {
            this.addmodal = true
            this.leveldata1 = []
            this.levelid1 = 0
            this.parameno = ''
            this.paramename = ''
            this.parametype = ''
            this.paramecheck = ''
            this.typeshow = false
            this.isRequired = 1
            this.iniparameters(1)
        },

        adddata () {
            var parameno = this.parameno
            var paramename = this.paramename.trim()
            var parametype = this.parametype
            var paramecheck = this.paramecheck
            var allsuppliers = ''
            if (paramecheck !== undefined && paramecheck.length > 0) {
                var arry = []
                for (var item in paramecheck) {
                    arry.push(paramecheck[item])
                }
                allsuppliers = arry.join(',')
            } else {
                allsuppliers = ''
            }
            if (this.levelid1 === 0) {
                this.$Message.error(this.$t('1037'))
                return false
            }
            if (parameno === '' || paramename === '' || parametype === '') {
                this.$Message.error(this.$t('600652'))
                return false
            }
            if (this.parametype === '2' && paramecheck === '') {
                this.$Message.error(this.$t('600652'))
                return false
            }
            let data = {
                section_id: this.levelid1,
                serial_number: parameno,
                name: paramename,
                is_required: this.isRequired,
                category: parametype,
                parameters: allsuppliers
            }
            axios.request({
                url: '/qms/SendTestParameter/AddParameters',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.$Message.success(this.$t('1055'))
                    this.addmodal = false
                    this.search()
                    this.parametype = ''
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        dele () {
            if (this.selectids === undefined || this.selectids === '' || this.selectids === [] || this.selectids.length == 0) {
                this.$Message.error((this.$t('1017')))
                return false
            } else {
                var ids = []
                this.selectids.forEach(ele => {
                    ids.push(ele)
                })
                var data = {
                    ids: ids
                }
                this.$Modal.confirm({
                    title: this.$t('1018'),
                    content: '',
                    width: '290px',
                    closable: true,
                    okText: this.$t('1004'),
                    onOk: () => {
                        axios.request({
                            url: '/qms/SendTestParameter/DeleteParameters',
                            data: data,
                            method: 'post'
                        }).then(res => {
                            if (res.data.ret === 1) {
                                this.$Message.success(this.$t('1058'))
                                this.page = 1
                                this.search()
                                this.detailobj = {}
                                this.selectids = []
                            } else {
                                this.$Message.error(this.$t(res.data.msg))
                            }
                        })
                    }
                })
            }
        },
        edit () {
            if (this.detailobj === undefined || this.detailobj.id === undefined) {
                this.$Message.error((this.$t('1017')))
                return false
            }
            this.editmodal = true
            this.levelid2 = this.detailobj.section_id
            this.parameno2 = this.detailobj.serial_number
            this.paramename2 = this.detailobj.name
            this.parametype2 = this.detailobj.category
            // this.paramecheck2 = this.detailobj.paramecheck
            this.isRequired2 = this.detailobj.is_required
            if (this.detailobj.category === 2) {
                this.typeshow2 = true
            } else {
                this.typeshow2 = false
            }
            this.iniparameters(2)
            this.section_name = this.detailobj.section_name
            this.paramecheck2 = this.detailobj.parameters.split(',')
        },
        editdata () {
            var parameno = this.parameno2
            var paramename = this.paramename2.trim()
            var parametype = this.parametype2
            var paramecheck = this.paramecheck2
            var allsuppliers = ''
            if (paramecheck !== undefined && paramecheck.length > 0) {
                var arry = []
                for (var item in paramecheck) {
                    arry.push(paramecheck[item])
                }
                allsuppliers = arry.join(',')
            } else {
                allsuppliers = ''
            }

            if (this.levelid2 === 0 || parameno === '' || paramename === '' || parametype === '') {
                this.$Message.error(this.$t('600652'))
                return false
            }
            if (this.parametype2 === 2 && allsuppliers === '') {
                this.$Message.error(this.$t('600652'))
                return false
            }
            let data = {
                section_id: this.levelid2,
                serial_number: parameno,
                name: paramename,
                is_required: this.isRequired2,
                category: parametype,
                parameters: allsuppliers,
                id: this.detailobj.id
            }
            axios.request({
                url: '/qms/SendTestParameter/UpdateParameters',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.$Message.success(this.$t('1060'))
                    this.editmodal = false
                    this.search()
                    this.parametype2 = ''
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },

        Export () {
            let params = {
                sectionId: this.levelid
            }
            axios.request({
                url: '/qms/SendTestParameter/ExportParameters',
                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))
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>

</style>
