<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv">
      <div>
        <div class="filter">
          <label>{{$t('960453')}}：</label>
          <Input class="searchInput" type="text" v-model="order_code" />
        </div>
        <div class="filter">
          <label>{{$t('960454')}}：</label>
          <Select v-model="order_status" label-in-value clearable class="searchSelect">
            <Option :value="1" :key="1">{{ $t('960457') }}</Option>
            <Option :value="2" :key="2">{{ $t('960458') }}</Option>
            <Option :value="3" :key="3">{{ $t('960459') }}</Option>
          </Select>
        </div>
        <div class="filter">
          <label>{{$t('960455')}}：</label>
          <Select v-model="order_type" label-in-value clearable class="searchSelect">
            <Option :value="1" :key="1">{{ $t('960560') }}</Option>
            <Option :value="2" :key="2">{{ $t('960561') }}</Option>
          </Select>
        </div>
        <div class="filter">
          <label>{{$t('960456')}}：</label>
          <Select v-model="approve_status" label-in-value clearable class="searchSelect">
            <Option :value="1" :key="1">{{ $t('960562') }}</Option>
            <Option :value="2" :key="2">{{ $t('960563') }}</Option>
            <Option :value="3" :key="3">{{ $t('960564') }}</Option>
            <Option :value="4" :key="4">{{ $t('960565') }}</Option>
          </Select>
        </div>
      </div>
      <div class="searchBtn">
        <Button type="primary" class="twoWord" icon="ios-search" @click="search(1,pagesize)">{{$t('1001')}}</Button>
        <Button type="warning" class="twoWord intervalRight" icon="ios-create-outline" @click="edit">{{$t('1003')}}</Button>
        <Button
          type="primary" class="fourWord"
          icon="ios-checkmark-circle-outline"
          @click="confirmClick()"
        >{{$t('960566')}}</Button>

      </div>
    </div>
    <div class="divborder newTableDiv">
      <Table
       class="tableClass"
        highlight-row
        border
        @on-selection-change="handleSelectRow"
        @on-current-change="handleRowChange"
        :data="tableData1"
        :columns="tableColumns1"
      >
        <template slot-scope="{ row, index }" slot="action">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="show(index)"
          >{{$t("960571")}}</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" v-model="modal" :styles="{width:'700px'}">
      <p slot="header">
        <span>{{$t('960571')}}</span>
      </p>
      <div class="modal_body" style="padding-right:40px;">
        <Table max-height="190" highlight-row border :data="tableData2" :columns="tableColumns2"></Table>
      </div>
      <div slot="footer">
        <Button type="text" size="large" @click="modelcancel" v-text="$t('1033')">取消</Button>
      </div>
    </Modal>
    <Modal class="newModalClass" v-model="editmodal" :styles="{width:'700px'}">
      <p slot="header">
        <span>{{$t('1003')}}</span>
      </p>
      <div class="modal_body" style="padding-right:40px;">
        <Table max-height="190" highlight-row border :data="tableData3" :columns="tableColumns3"></Table>
      </div>
      <div slot="footer">
        <Button type="text" size="large" @click="editmodelcancel" v-text="$t('1033')">取消</Button>
        <Button type="primary" size="large" @click="editdata()" v-text="$t('1011')">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
    data () {
        let t = this
        // 基础数据
        return {
            order_code: '',
            order_status: 0,
            order_type: 0,
            approve_status: 0,
            modal: false,
            editmodal: false,
            page: 1, // 页码
            pagesize: 10, // 数据条数
            obj: {}, // 某一行的数据
            tableData1: [], // 表格数据
            tableData2: [], // 表格数据
            tableData3: [], // 表格数据
            chooseData: [], // 选中数据
            total: 0, // 数据总条数
            tableColumns3: [
                {
                    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('300001'), // 备件编号
                    align: 'center',
                    key: 'code'
                },
                {
                    title: this.$t('300002'), // 备件名称
                    key: 'title',
                    align: 'center'
                },
                {
                    title: this.$t('960450'), // 库存阈值
                    key: 'max_sku',
                    align: 'center'
                },
                {
                    title: this.$t('960452'), // 采购数量
                    key: 'count',
                    align: 'center',
                    render: (h, params) => {
                        return h('Input', {
                            props: { value: params.row.count, type: 'number' },
                            on: {
                                input: val => {
                                    t.tableData3[params.index].count = val
                                }
                            }
                        })
                    }
                }
            ],
            tableColumns2: [
                {
                    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('300001'), // 备件编号
                    align: 'center',
                    key: 'code'
                },
                {
                    title: this.$t('300002'), // 备件名称
                    key: 'title',
                    align: 'center'
                },
                {
                    title: this.$t('300016'), // 当前库存
                    key: 'sku',
                    align: 'center'
                },
                {
                    title: this.$t('960450'), // 库存阈值
                    key: 'max_sku',
                    align: 'center'
                },
                {
                    title: this.$t('300084'), // 数量
                    key: 'count',
                    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('960453'), // 采购单号
                    align: 'center',
                    key: 'order_code'
                },
                {
                    title: this.$t('960455'), // 采购类型
                    key: 'order_type_name',
                    align: 'center'
                },
                {
                    title: this.$t('960571'),
                    slot: 'action',
                    width: 150,
                    align: 'center'
                },
                {
                    title: this.$t('960567'), // 采购金额
                    key: 'cost',
                    align: 'center'
                },
                {
                    title: this.$t('960454'), // 采购状态
                    key: 'order_status_name',
                    align: 'center'
                },
                {
                    title: this.$t('960456'), // 审核状态
                    key: 'approve_status_name',
                    align: 'center'
                },
                {
                    title: this.$t('960568'), // 审核节点
                    key: 'approve_node',
                    align: 'center'
                },
                {
                    title: this.$t('960569'), // 提交人
                    key: 'user',
                    align: 'center'
                }
            ] // 表头
        }
    },
    created () {
    // 生命周期
        this.search(1, 10)
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
        this.tableColumns2 = this.$time.initTableTitle(this.tableColumns2)
        this.tableColumns3 = this.$time.initTableTitle(this.tableColumns3)
    },
    methods: {
        search (page, pagesize) {
            var data = {
                page: page,
                pagesize: pagesize,
                order_code: this.order_code,
                order_status: this.order_status,
                order_type: this.order_type,
                approve_status: this.approve_status
            }
            this.axios
                .request({
                    url: '/tpm/PartsProcurement/SparepartOrderInfo',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.total = res.data.total
                        this.tableData1 = res.data.data
                        this.page = res.data.page
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        confirmClick () {
            var error = ''
            this.chooseData.forEach(item => {
                if (item.order_status !== 2) {
                    error += item.order_code + ':' + this.$t('960570')
                }
            })
            if (error === '') {
                this.chooseData.forEach(item => {
                    this.confirm(item)
                })
            } else {
                this.$Message.error(this.$t(error))
            }
        },
        confirm (item) {
            var params = { id: item.id }
            this.axios
                .request({
                    url: '/tpm/PartsProcurement/SparepartOrderConfirm',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret !== 1) {
                        this.$Message.error(item.order_code + ':' + this.$t(res.data.msg))
                    }
                    this.search(1, this.pagesize)
                })
        },
        edit () {
            var order_code = this.obj.order_code
            if (order_code === undefined || order_code === 0 || order_code === null) {
                this.$Message.error(this.$t('1017'))
                return
            }
            if (this.obj.approve_status !== 1 && this.obj.approve_status !== 4) {
                this.$Message.error(this.$t('960572'))
                return false
            }
            this.editmodal = true
            var params = { page: 1, pagesize: 9999, ordercode: order_code }
            this.axios
                .request({
                    url: '/tpm/PartsProcurement/SparepartOrderDetail',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.tableData3 = res.data.data
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        editdata () {
            var data = { data: this.tableData3 }
            this.axios
                .request({
                    url: '/tpm/PartsProcurement/SparepartModifyOrderDetail',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t('1'))
                        this.search(1, this.pagesize)
                        this.editmodal = false
                        this.tableData3 = []
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        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)
        },
        handleSelectRow: function (data) {
            this.chooseData = data
        },
        handleRowChange (currentRow, oldCurrentRow) {
            // 点击之后将某一行的数据添加到obj的对象中
            this.obj = currentRow
        },
        editmodelcancel () {
            // 编辑模态框取消
            this.editmodal = false
            this.tableData3 = []
        },
        modelcancel () {
            this.modal = false
            this.tableData2 = []
        },
        show (index) {
            this.modal = true
            var nowdata = this.tableData1[index]
            var params = { page: 1, pagesize: 9999, ordercode: nowdata.order_code }
            this.axios
                .request({
                    url: '/tpm/PartsProcurement/SparepartOrderDetail',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.tableData2 = res.data.data
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        }
    }
}
</script>
<style lang="less" scoped>
</style>
