<template>
    <div class="testdiv">
      <div class="divborder newSearchDiv">
          <div>
            <div class="filter">
                <label>{{$t('1132')}}：</label>
                <Cascader :data="datalevel" :value="leveldata"   trigger="click" @on-change="levelchange" change-on-select class="searchSelect" ></Cascader>
            </div>
            <div class="filter">
                <label>{{$t('900337')}}</label>：
                <Input class="searchInput" type="text"   v-model="Work_order" />
            </div>
            <div class="filter">
                  <label>{{$t('700095')}}：</label>
                  <Select v-model="Audit_status"  label-in-value  clearable class="searchSelect" >
                      <Option  :value=1 v-text="$t('950440')">审核中</Option>
                      <Option  :value=2 v-text="$t('950441')">备货中</Option>
                      <Option  :value=3 v-text="$t('950442')">未通过</Option>
                      <Option  :value=4 v-text="$t('500097')">已完成</Option>
                  </Select>
            </div>
          </div>
        <div class="searchBtn">
            <Button type="primary" class="twoWord intervalRight" icon="ios-search" @click="search(1,pagesize)" >{{$t('1001')}}</Button>
            <Button type="primary" class="fourWord intervalRight" icon="ios-checkmark-circle-outline" @click="apply(2)">{{$t('950320')}}</Button>
            <Button type="error" class="fiveWord" icon="ios-alert-outline"  @click="apply(3)">{{$t('950443')}}</Button>
        </div>
      </div>
      <div class="divborder newTableDiv">
          <Table
          class="tableClass"
            highlight-row
            border
            @on-current-change="handleRowChange"
            :data="tableData1"
            :columns="tableColumns1"
            @on-selection-change="handleSelectRow"
          >
          <template slot-scope="{ row }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="show(row.id)">{{$t('300017')}}</Button>
        </template>
          </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="$t('5000000')" v-model="detailmodal"   :styles="{width:'800px'}" >
            <div class="modal_body" style="padding-right:40px;">
                <Table
                  highlight-row
                  border
                  :data="tableData2"
                  :columns="tableColumns2"
                  max-height='250'
                >
                </Table>
            </div>
            <div slot="footer">
                <Button type="primary" size="large" @click="detailmodal=false" v-text="$t('1011')">确定</Button>
            </div>
      </Modal>
    </div>
</template>
<script>
export default {
    data () { // 基础数据
        return {
            datalevel: [], // 产线层级数据
            leveldata: [], // 产线层级value
            Work_order: '', // 工单号
            Audit_status: 0, // 审核状态
            page: 1, // 页码
            pagesize: 10, // 数据条数
            obj: {}, // 某一行的数据
            tableData1: [], // 表格数据
            total: 0, // 数据总条数
            selectids: '',
            detailmodal: false, // 细节模态框
            tableData2: [], // 模态框table
            tableColumns2: [
                {
                    title: this.$t('1950461'), // 备件代码
                    align: 'center',
                    key: 'code'
                },
                {
                    title: this.$t('300002'), // 备件名称
                    key: 'name',
                    align: 'center',
                    width: 250
                },
                {
                    title: this.$t('300016'), // 当前库存
                    key: 'Stock',
                    align: 'center'
                },
                {
                    title: this.$t('950455'), // 申请数量
                    key: 'number',
                    align: 'center'
                }
            ], //
            tableColumns1: [
                {
                    type: 'selection',
                    width: 50,
                    align: 'center'
                },
                {
                    type: 'index2',
                    title: this.$t('1008'), // 序号
                    key: 'xuhao',
                    align: 'center',
                    render: (h, params) => {
                        return h('span', params.index + (this.page - 1) * this.pagesize + 1)
                    },
                    width: 80
                },
                {
                    title: this.$t('900337'), // 工单号
                    align: 'center',
                    key: 'work_order'
                },
                {
                    title: this.$t('960432'), // 设备
                    key: 'location',
                    align: 'center'
                },
                {
                    title: this.$t('200022'), // 失效模式
                    key: 'faultmode',
                    align: 'center'
                },
                {
                    title: this.$t('950444'),
                    slot: 'action',
                    width: 150,
                    align: 'center'
                },
                // {
                // title: this.$t('950444'), //申请备件
                // key: 'spare_parts',
                // align: 'center'
                // },
                {
                    title: this.$t('950445'), // 申请人
                    key: 'user_name',
                    align: 'center'
                },
                {
                    title: this.$t('950446'), // 申请时间
                    key: 'apply_time',
                    align: 'center'
                },
                {
                    title: this.$t('950447'), // 审核状态
                    key: 'apply_state_name',
                    align: 'center'
                }
            ] // 表头
        }
    },
    created () { // 生命周期
        this.initlevel()
        this.search(1, 10)
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
        this.tableColumns2 = this.$time.initTableTitle(this.tableColumns2)
    },
    methods: {
    // 初始化产线层级
        initlevel () {
            this.axios.request({
                url: 'config/ProjectLevelSection/GetSectionTree',
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    const arr = []
                    if (res.data.data.length > 0) {
                        this.datalevel = res.data.data
                        arr.push(res.data.data[0].value)
                        this.leveldata = arr
                    }

                    //   this.search(1, 10)
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        levelchange (value) {
            this.leveldata = value
        },
        search (page, pagesize) {
            var params = {
                sectionId: this.leveldata.length === 0 ? 0 : this.leveldata[this.leveldata.length - 1],
                code: this.Work_order,
                status: this.Audit_status,
                category: 1, // 备件审核
                page: page,
                pagesize: pagesize
            }
            this.axios.request({
                url: '/tpm/SparepartAudit/GetAuditPagedList',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.total = res.data.total
                    this.mockTableData1(res.data.data)
                    this.page = res.data.page
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        // 渲染列表开始
        mockTableData1 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    var state_name = ''
                    if (item.apply_state === 1) {
                        state_name = this.$t('950440')
                    } else if (item.apply_state === 2) {
                        state_name = this.$t('500097')
                    } else if (item.apply_state === 3) {
                        state_name = this.$t('950442')
                    }
                    data.push({
                        id: item.id,
                        code: item.code,
                        machine_id: item.machine_id,
                        location: item.location,
                        apply_state: item.apply_state,
                        apply_time: item.apply_time,
                        user_name: item.user_name,
                        faultmode: item.faultmode,
                        apply_state_name: state_name,
                        work_order: item.work_order
                    })
                }
            })
            this.tableData1 = data
        },
        changePage (value) {
            this.page = value
            // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
            this.search(this.page, this.pagesize)
        },
        handlePageSize (value) {
            this.pagesize = value
            this.search(this.page, this.pagesize)
        },
        handleRowChange (currentRow, oldCurrentRow) { // 点击之后将某一行的数据添加到obj的对象中
            this.obj = currentRow
        },
        handleSelectRow: function (data) {
            var ids = []
            for (var i in data) {
                ids.push(data[i].id)
            }
            this.selectids = ids.join(',')
        },
        show (index) {
            this.detailmodal = true
            var params = {
                id: index
            }
            this.axios.request({
                url: '/tpm/SparepartAudit/GetSparepartApplyList',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret == 1) {
                    this.mockTableData2(res.data.data)
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        // 渲染列表开始
        mockTableData2 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        id: item.id,
                        code: item.code,
                        name: item.name,
                        Stock: item.sku,
                        number: item.apply_count
                    })
                }
            })
            this.tableData2 = data
        },
        apply (state) {
            if (this.selectids === undefined || this.selectids === '') {
                this.$Message.error((this.$t('1017')))
                return false
            }
            var data = {
                state: state,
                ids: this.selectids
            }
            this.axios.request({
                url: '/tpm/SparepartAudit/SetSparepartApplyState',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.$Message.success(this.$t('1064'))
                    this.search(1, this.pagesize)
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>

</style>
