<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;padding-left:10px;">
       <div class="searchBtn">
      <Button type="success" class="twoWord" icon="md-add-circle" @click="edit(1)">{{$t('1002')}}</Button>
      <Button type="warning" class="twoWord" icon="ios-create-outline" @click="edit(2)">{{$t('1003')}}</Button>
      <Button type="error" class="twoWord" icon="md-close-circle" @click="dele()">{{$t('1004')}}</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
        :title="$t('960445')"
        v-model="editmodal"
        :styles="{width:'500px'}"
        class="newModalClass bottlenckmodal"
      >
        <div class="modal_body">
          <div class="filter">
            <label>
              <i>*</i>{{this.$t('9900071')}}：
            </label>
            <Cascader
              v-show="type===1"
              :data="datalevel"
              :value="leveldata"
              trigger="click"
              change-on-select
              class="searchInput"
              @on-change="handlelevelchange"
            ></Cascader>
            <div class="filter" v-show="type===2">{{editobj.machine_name}}</div>
          </div>
          <div class="filter">
            <label>{{this.$t('960573')}}：</label>
            <RadioGroup v-model="editobj.station_type" class="radio">
              <Radio :label=1><span>{{$t('960574')}}</span></Radio>
              <Radio :label=2><span>{{$t('960575')}}</span></Radio>
            </RadioGroup>
          </div>
          <div class="filter">
            <label>{{this.$t('9900072')}}：</label>
            <Input
              class="searchInput"
              type="number"
              min="0"
              v-model="editobj.qualified_time"
            />
          </div>
          <div class="filter">
            <label>{{this.$t('9900073')}}：</label>
            <Input
              class="searchInput"
              type="number"
              min="0"
              v-model="editobj.selfdeal_time"
            />
          </div>
          <div class="filter">
            <label>{{this.$t('9900076')}}：</label>
            <Input
              class="searchInput"
              type="number"
              min="0"
              v-model="editobj.kicktank_time"
            />
          </div>
          <div class="filter">
            <label>{{this.$t('9900077')}}：</label>
            <Input
              class="searchInput"
              type="number"
              min="0"
              v-model="editobj.change_cycle"
            />
          </div>
          <div class="filter">
            <label>{{$t('9900081')}}：</label>
            <Input
              class="searchInput"
              type="number"
              min="0"
              v-model="editobj.speed_time"
            />
          </div>
          <div class="filter">
            <label>{{this.$t('9900074')}}：</label>
            <Select
              v-model="editobj.default_error_id"
              label-in-value
              clearable
              class="searchSelect"
            >
              <Option v-for="item in defaulterrors" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </div>
        </div>
        <div slot="footer">
          <Button type="text" size="large" @click="cancel" v-text="$t(1033)">取消</Button>
          <Button type="primary" v-if="type===1" size="large" @click="editdata()">{{$t('1002')}}</Button>
          <Button type="primary" v-if="type===2" size="large" @click="editdata()">{{$t('1003')}}</Button>
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
import axios from '@/libs/api.request'
export default {
    name: 'bottleneckmanagement', // 组件不刷新
    data () {
        return {
            keyword: '',
            tableData1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            detailobj: {},
            editmodal: false,
            editobj: {},
            defaulterrors: [],
            selectids: [],
            type: 0,
            datalevel: [],
            leveldata: [],
            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('9900071'),
                    key: 'machine_name'
                },
                {
                    title: this.$t('9900072'),
                    key: 'qualified_time'
                },
                {
                    title: this.$t('9900073'),
                    key: 'selfdeal_time'
                },
                {
                    title: this.$t('9900076'),
                    key: 'kicktank_time'
                },
                {
                    title: this.$t('9900077'),
                    key: 'change_cycle'
                },
                {
                    title: this.$t('9900074'),
                    key: 'default_error_name'
                }
            ]
        }
    },
    created () {
        this.search(1, 10)
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
    },
    methods: {
        initlevel () {
            axios
                .request({
                    url: 'config/ProjectLevelSection/GetSectionTree',
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        const arr = []
                        this.datalevel = res.data.data
                        arr.push(res.data.data[0].value)
                        this.leveldata = arr
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        handlelevelchange (value, selectedData) {
            this.leveldata = value
        },
        cancel () {
            this.editmodal = false
        },
        handleSelectRow: function (data) {
            var ids = []
            for (var i in data) {
                ids.push(data[i].id)
            }
            this.selectids = ids
            // this.selectids = ids.join(',')
        },
        search (page, pagesize) {
            var params = {
                page: page,
                pagesize: pagesize
            }
            axios
                .request({
                    url: '/tpm/AndonStationConfig/GetPagedStationConfig',
                    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({
                        machine_id: item.machine_id,
                        section_id: item.section_id,
                        machine_name: item.machine_name,
                        qualified_time: item.qualified_time,
                        selfdeal_time: item.selfdeal_time,
                        kicktank_time: item.kicktank_time,
                        speed_time: item.speed_time,
                        change_cycle: item.change_cycle,
                        default_error_id: item.default_error_id,
                        default_error_name: item.default_error_name,
                        id: item.id,
                        station_type: item.station_type
                    })
                }
            })
            this.tableData1 = data
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow
        },
        handlePageSize (value) {
            this.pagesize = value
            this.tableData1 = this.search(this.page, this.pagesize)
        },
        changePage (value) {
            this.page = value
            this.tableData1 = this.search(this.page, this.pagesize)
        },
        intdefaulterrors () {
            var params = { level: 2 }
            axios
                .request({
                    params,
                    url: '/tpm/Andon/GetErrorsByLevel',
                    method: 'get'
                })
                .then(res => {
                    this.defaulterrors = res.data.data
                })
        },
        dele () {
            if (this.selectids.length === 0 || this.selectids === '') {
                this.$Message.error(this.$t('1017'))
                return false
            } else {
                this.$Modal.confirm({
                    title: this.$t('1018'),
                    width: '290px',
                    content: '',
                    closable: true,
                    okText: this.$t('1004'),
                    onOk: () => {
                        var data = {
                            ids: this.selectids
                        }
                        axios
                            .request({
                                url:
                  '/tpm/AndonStationConfig/DeleteConfigs',
                                data,
                                method: 'post'
                            })
                            .then(res => {
                                if (res.data.ret === 1) {
                                    this.$Message.success(this.$t('1058'))
                                    this.page = 1
                                    this.search(this.page, this.pagesize)
                                    this.selectids = ''
                                    this.detailobj = {}
                                } else {
                                    this.$Message.error(this.$t(res.data.msg))
                                }
                            })
                    }
                })
            }
        },
        edit (type) {
            if (type === 2) {
                if (this.detailobj === undefined || this.detailobj.id === undefined) {
                    this.$Message.error(this.$t('1017'))
                    return false
                }
            }
            this.initlevel()
            this.intdefaulterrors()
            this.editmodal = true
            this.type = type
            this.editobj.qualified_time = this.detailobj.qualified_time
            this.editobj.selfdeal_time = this.detailobj.selfdeal_time
            this.editobj.kicktank_time = this.detailobj.kicktank_time
            this.editobj.change_cycle = this.detailobj.change_cycle
            this.editobj.default_error_id = this.detailobj.default_error_id
            this.editobj.machine_name = this.detailobj.machine_name
            this.editobj.station_type = this.detailobj.station_type
            this.editobj.speed_time = this.detailobj.speed_time
        },
        editdata () {
            let data = {
                section_id: this.leveldata[this.leveldata.length - 1],
                qualified_time: this.editobj.qualified_time,
                selfdeal_time: this.editobj.selfdeal_time,
                kicktank_time: this.editobj.kicktank_time,
                speed_time: this.editobj.speed_time,
                change_cycle: this.editobj.change_cycle,
                default_error_id: this.editobj.default_error_id,
                id: this.type === 2 ? this.detailobj.id : 0,
                station_type: this.editobj.station_type
            }
            axios
                .request({
                    url: '/tpm/AndonStationConfig/AddUpdateConfig',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(
                            this.type === 1 ? this.$t('1055') : this.$t('1060')
                        )
                        this.editmodal = false
                        this.search(this.page, this.pagesize)
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        }
    }
}
</script>
<style lang="less" scoped>
.bottlenckmodal{
  label{
    width: 160px!important;
  }
  .radio{
    label{
      width: 100px!important;
    }
  }
}

</style>
