<template>
  <div class="testdiv">
    <!-- 按钮 -->
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div class="filter">
          <label>{{$t('920144')}}</label>
        <Input class="searchInput"  type="text" v-model="name" />
      </div>
       <div class="searchBtn">
      <Button type="primary" class="twoWord"  icon="ios-search" @click="searchclick">{{$t('1001')}}</Button>
      <Button type="success" class="twoWord"  icon="md-add-circle" @click="showmodal(1)">{{$t('1002')}}</Button>
      <Button type="warning" class="twoWord"  icon="ios-create-outline" @click="showmodal(2)">{{$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-arrow-round-down" @click="loadexcel()" >{{$t('1005')}}</Button>
      <Upload style="display:inline-block;margin:0 10px;"
          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 class="fourWord" icon="md-arrow-round-up" type="primary" >{{$t('800044')}}</Button>
      </Upload>
       </div>
    </div>
      <!-- 表格 -->
      <div class="divborder newTableDiv" >
        <Table
          class="tableClass"
          highlight-row
          :data="tableData"
          :columns="tableColumns"
          @on-current-change="handleRowChange"
        ></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
        :title="$t('960419')"
        v-model="modal"
        :styles="{width:'400px'}"
        class="newModalClass"
      >
        <div class="modal_body">
          <div>
            <div class="filter">
              <label>{{$t('960418')}}：</label>
              <RadioGroup v-model="level" @on-change="handleradiochange">
                <Radio label="1" :disabled="allowChange">
                  <span>{{this.$t('200141')}}</span>
                </Radio>
                <Radio label="2" :disabled="allowChange">
                  <span>{{this.$t('200142')}}</span>
                </Radio>
                <Radio label="3" :disabled="allowChange">
                  <span>{{this.$t('200143')}}</span>
                </Radio>
              </RadioGroup>
            </div>
            <div class="filter">
              <label><i>*</i>{{$t('960417')}}：</label>
              <Input class="searchInput" type="text" v-model="obj.name" />
            </div>
            <div class="filter">
              <label><i>*</i>{{$t('960416')}}：</label>
              <Select
                v-model="obj.parent"
                label-in-value
                clearable
                class="searchSelect"
                :disabled="blparent"
              >
                <Option v-for="item in parentData" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
            </div>
            <div class="filter">
              <label><i>*</i>{{$t('960415')}}：</label>
              <Select
                v-model="obj.process_code"
                label-in-value
                clearable
                :disabled="blprocess"
                class="searchSelect"
              >
                <Option
                  v-for="item in processData"
                  :value="item.code"
                  :key="item.code"
                >{{ item.name }}</Option>
              </Select>
            </div>
            <div class="filter">
              <label><i>*</i>{{$t('960414')}}：</label>
              <Select
                v-model="obj.usergroup"
                label-in-value
                clearable
                :disabled="blgroup"
                class="searchSelect"
              >
                <Option v-for="item in groupData" :value="item.id" :key="item.id">{{ item.title }}</Option>
              </Select>
            </div>
            <div class="filter">
              <label>{{$t('9900078')}}：</label>
              <Select
                v-model="obj.second_usergroup"
                label-in-value
                clearable
                :disabled="blgroup"
                class="searchSelect"
              >
                <Option v-for="item in groupDatasecond" :value="item.id" :key="item.id">{{ item.title }}</Option>
              </Select>
            </div>
            <div class="filter">
              <label>{{$t('9900079')}}：</label>
              <Select
                v-model="obj.errorlevel"
                label-in-value
                clearable
                :disabled="blgroup"
                class="searchSelect"
              >
                <Option v-for="(value,key) in errorlevels" :value="key" :key="key">{{value}}</Option>
              </Select>
            </div>
          </div>
        </div>
        <div slot="footer">
          <Button type="text" size="large" @click="cancleModal">{{$t('1033')}}</Button>
          <Button type="primary" v-if="edittype===1" size="large" @click="handledata">{{$t('1002')}}</Button>
          <Button type="primary" v-if="edittype===2" size="large" @click="handledata">{{$t('1003')}}</Button>
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
import axios from '@/libs/api.request'

export default {
    data () {
        return {
            name: '',
            treeData: [], // 树
            parentData: [], // 父级异常
            processData: [], // 流程
            groupData: [], // 流程
            groupDatasecond: [],
            cruentObj: {}, // 当前对象
            // 表格使用字段
            cloneObj: {}, // 深拷贝赋值的对象
            total: 0,
            page: 1,
            pagesize: 10,
            action: this.axios.publicPath + 'tpm/Upload/Submit?templateName=AndonExpectionType', // 上传excel
            headers: { // 上传请求头添加
                token: localStorage.getItem('token'),
                timestamp: localStorage.getItem('timestamp'),
                nonce: localStorage.getItem('nonce'),
                sign: localStorage.getItem('sign')
            },
            tableData: [],
            tableColumns: [
                {
                    type: 'index2',
                    title: this.$t(1008),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h('span', params.index + (this.page - 1) * this.pagesize + 1)
                    },
                    width: 80
                },
                {
                    title: this.$t('960411'),
                    key: 'first'
                },
                {
                    title: this.$t('960412'),
                    key: 'second'
                },
                {
                    title: this.$t('960413'),
                    key: 'third'
                },
                {
                    title: this.$t('960415'),
                    key: 'process_name'
                },
                {
                    title: this.$t('960414'),
                    key: 'usergroup_name'
                },
                {
                    title: this.$t('9900078'),
                    key: 'secondusergroup_name'
                },
                {
                    title: this.$t('9900079'),
                    key: 'errorlevelname'
                }
            ],
            level: '3',
            obj: {},
            edittype: 0,
            blprocess: false,
            blgroup: false,
            blparent: false,
            modal: false,
            errorlevels: {
                1: 'L1',
                2: 'L2',
                3: 'L3'
            },
            allowChange:false,
        }
    },
    created () {
        this.search()
        this.getProcessData()
        this.getAllUserGroups()
        this.getAllSecondUserGroups()
        // 格式化表格样式
        this.tableColumns = this.$time.initTableTitle(this.tableColumns)
    },
    methods: {
        loadexcel () {
            var params = {
                name: 'AndonExpectionType'
            }
            this.axios.request({
                url: '/config/download/GetTemplate',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret == 1) {
                    window.location.href = this.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.$Message.success(this.$t('950398'))
                this.search()
            } else {
                if ((res.msg + '').indexOf(',') != -1) {
                    inittip(res.msg)
                } else {
                    this.$Message.error(this.$t(res.msg))
                }
            }
        },
        handleError () { // 导入失败函数
            this.$Message.error(this.$t('950399'))
        },
        search () {
            var data = {
                name: this.name,
                page: this.page,
                pagesize: this.pagesize
            }
            axios
                .request({
                    url: '/tpm/AndonBaseSetting/GetExpectionTypeData',
                    data,
                    method: 'post'
                })
                .then(res => {
                    this.total = res.data.total
                    this.tableData = res.data.data
                })
        },
        showmodal (type) {
            this.edittype = type
            if (type === 2) {
                this.allowChange = true
                this.obj = this.$time.deepClone(this.cloneObj)
                var data = this.obj
                if (JSON.stringify(data) === '{}') {
                    this.$Message.error(this.$t('1043'))
                    return false
                }
                this.level = data.level
                this.handleradiochange(data.level)
                this.level = '' + data.level
                this.obj.name = data.title
                this.obj.process_code = data.process_code
                this.obj.parent = data.parent
                this.obj.usergroup = data.usergroup
                this.obj.second_usergroup = data.second_usergroup
                this.obj.errorlevel = data.errorlevel
                this.obj.id = data.id
                this.obj.errorlevel = '' + data.errorlevel
            } else {
                this.allowChange = false
                this.obj = {}
                this.getParent(this.level)
                this.obj.id = 0
            }
            this.modal = true
        },
        cancleModal () {
            this.modal = false
            this.level = '3'
            this.obj = {}
            this.parentData = []
        },
        validData () {
            if (this.obj.level == '3' || this.obj.level == '2') {
                if (
                    this.obj.usergroup == undefined ||
          this.obj.usergroup == 0 ||
          this.obj.process_code == undefined ||
          this.obj.process_code == null ||
          this.obj.process_code == ''

                ) {
                    this.$Message.error(this.$t('9000136'))
                    return false
                }
            }

            if (
                this.obj.name === undefined ||
        this.obj.name === null ||
        this.obj.name === ''
            ) {
                this.$Message.error(this.$t('9000136'))
                return false
            }
            return true
        },
        searchclick () {
            this.page = 1
            this.search()
        },
        handledata () {
            if (this.validData()) {
                switch (this.edittype) {
                case 1:
                    this.add()
                    break
                case 2:
                    this.edit()
                    break
                default:
                    console.log('Error')
                    break
                }
            }
        },
        add () {
            var data = this.obj
            data.id = undefined
            data.level = this.level
            axios
                .request({
                    url: '/tpm/AndonBaseSetting/AddExpectionTypeData',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t(1055))
                        this.search()
                        this.obj = {}
                        this.modal = false
                    } else {
                        this.$Message.error(this.$t(1056) + this.$t(res.data.msg))
                        this.search()
                    }
                })
        },
        edit () {
            var data = this.obj
            data.level = this.level
            if (this.level == 1) {
                data.second = ''
                data.third = ''
                data.process_code = ''
                data.process_name = ''
            }
            axios
                .request({
                    url: '/tpm/AndonBaseSetting/ModifyExpectionTypeData',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t(1060))
                        this.search()
                        this.obj = {}
                        this.modal = false
                    } else {
                        this.$Message.error(this.$t(1061) + this.$t(res.data.msg))
                        this.search()
                    }
                })
        },
        del () {
            if (JSON.stringify(this.obj) === '{}') {
                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: () => {
                        var params = { id: this.obj.id }
                        axios
                            .request({
                                url: '/tpm/AndonBaseSetting/DeleteExpectionTypeData',
                                params,
                                method: 'get'
                            })
                            .then(res => {
                                if (res.data.ret === 1) {
                                    this.$Message.success(this.$t('1058'))
                                    this.page = 1
                                    this.search()
                                } else {
                                    this.$Message.error(this.$t(res.data.msg))
                                    this.search()
                                }
                            })
                    }
                })
            }
        },
        getParent (id) {
            // this.parentData = [];
            var params = { parent: id - 1 }
            axios
                .request({
                    url: '/tpm/AndonBaseSetting/GetExpectionTypeByParent',
                    params,
                    method: 'get'
                })
                .then(res => {
                    this.parentData = res.data.data
                })
        },
        getAllUserGroups () {
            axios
                .request({
                    url: '/config/ProjectUserGroup/GetAllUserGroups',
                    method: 'get'
                })
                .then(res => {
                    this.groupData = res.data.data
                })
        },
        getAllSecondUserGroups () {
            axios
                .request({
                    url: '/config/ProjectUserGroup/GetAllUserGroups',
                    method: 'get'
                })
                .then(res => {
                    this.groupDatasecond = res.data.data
                })
        },
        getProcessData () {
            var params = {
                name: this.name,
                page: 1,
                pagesize: 9999
            }
            axios
                .request({
                    url: '/tpm/AndonBaseSetting/GetInfoProcessData',
                    params,
                    method: 'get'
                })
                .then(res => {
                    this.processData = res.data.data
                })
        },
        handleradiochange (id) {
            this.blprocess = true
            this.blgroup = true
            this.blparent = true
            // if (id == '2') {
            //   this.blparent = false
            //   this.blprocess = false
            // }
            if (id == '3' || id == '2') {
                this.blparent = false
                this.blprocess = false
                this.blgroup = false
            }
            this.getParent(id)
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.obj = currentRow
            this.cloneObj = this.$time.deepClone(currentRow)
        },
        handlePageSize (value) {
            this.pagesize = value
            this.tableData = this.search()
        },
        changePage (value) {
            this.page = value
            this.tableData = this.search()
        }
    }
}
</script>
<style lang="less" scoped>

</style>
