<template>
    <div class="testdiv">
      <div class="divborder">
          <div>
            <div class="filter">
                <label v-text="$t('1950474')">采购单号查询</label>:
                <input class="publicinput" type="text" :placeholder="$t('1950478')"  v-model="order_code">
            </div>
            <div class="filter">
                  <label v-text="$t('700095')">审核状态</label>:
                  <Select v-model="order_status"  label-in-value  clearable style="width:160px;" >
                      <Option  :value="1" v-text="$t('1950475')">未审核</Option>
                      <Option  :value="2" v-text="$t('950440')">审核中</Option>
                      <Option  :value="3" v-text="$t('1950476')">已通过</Option>
                      <Option  :value="4" v-text="$t('950442')">未通过</Option>
                  </Select>
            </div>
          </div>
        <div class="buttonall">
            <Button type="primary" icon="ios-search" @click="search(1,10)" >{{$t('1001')}}</Button>
            <Button type="primary" icon="ios-checkmark-circle-outline" @click="confirm1">{{$t('950320')}}</Button>
            <Button type="error" icon="ios-alert-outline" @click="confirm2">{{$t('1950477')}}</Button>
        </div>
      </div>
      <div class="divborder">
          <Table
            highlight-row
            border
            @on-selection-change="selectRowChange"
            @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)" v-text="$t('950253')"></Button>
        </template>
          </Table>
          <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
              <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 v-model="detailmodal" :styles="{top: '40px',width:'650px'}">
        <p slot="header">
          <span>{{$t('960571')}}</span>
        </p>
        <div class="modal_body" style="width:650px!important;padding:0 20px;height:180px!important;">
          <Table max-height="190" highlight-row border :data="tableData2" :columns="tableColumns2"></Table>
        </div>
        <div slot="footer">
          <Button type="primary" size="large" @click="detailmodal=false" v-text="$t('1011')">取消</Button>
        </div>
      </Modal>
    </div>
</template>
<script>
import moment from 'moment'
export default {
    data () { // 基础数据
        return {
            order_code: '', // 采购单号查询
            order_status: 0, // 审核状态
            page: 1, // 页码
            pagesize: 10, // 数据条数
            obj: {}, // 某一行的数据
            tableData1: [], // 表格数据
            total: 0, // 数据总条数
            paramsx: {}, // 深拷贝
            token: '', // url传递到页面的token
            ids: [], // 选中多条数据的id的集合
            detailmodal: false, // 详情列表默认隐藏
            tableData2: [], // 模态框表格
            status: 0, // 点中按钮的状态
            passstatus: true, // 通过状态
            // notpassstatus:true, //通过状态
            tableColumns2: [
                {
                    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('960452'), // 采购数量
                    key: 'count',
                    align: 'center'
                }
            ], // 表格数据2
            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_No'
                },
                {
                    title: this.$t('960455'), // 采购类型
                    key: 'type',
                    align: 'center'
                },
                {
                    title: this.$t('960567'), // 采购金额
                    key: 'money',
                    align: 'center'
                },
                {
                    title: this.$t('1950481'), // 采购详情
                    slot: 'action',
                    width: 150,
                    align: 'center'
                },
                {
                    title: this.$t('960569'), // 提交人
                    key: 'submitter',
                    align: 'center'
                },

                {
                    title: this.$t('1950479'), // 提交时间
                    key: 'submit_time',
                    align: 'center'
                },
                {
                    title: this.$t('950447'), // 审核状态
                    key: 'Audit_status',
                    align: 'center'
                }
            ] // 表头
        }
    },
    created () { // 生命周期
        // console.log(this.$route.query)
        this.paramsx = this.$time.deepClone(this.$time.deepClone(this.$route.query))
        this.token = this.paramsx.token
    },
    mounted () {
        this.search(1, 10)
    },
    methods: {
        search (page, pagesize) {
            var data = {
                order_code: this.order_code,
                approve_status: this.order_status,
                token: this.token,
                page: page,
                pagesize: pagesize
            }
            this.axios.request({
                url: 'tpm/PartsProcurement/SparepartOrderInfoNoToken',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.total = res.data.total
                    this.mockTableData1(res.data.data)
                    this.page = res.data.page
                } else {
                    window_warning(this.$t(res.data.msg))
                }
            })
        },
        // 渲染列表开始
        mockTableData1 (tablelist) {
            let data = []

            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        order_No: item.order_code,
                        type: item.order_type_name,
                        money: item.cost,
                        submitter: item.user,
                        submit_time: moment(item.edit_time * 1000).format('YYYY-MM-DD HH:mm:ss'),
                        Audit_status: item.approve_status == 1 ? this.$t('960562') : (item.approve_status == 2 ? this.$t('960563') : (item.approve_status == 3 ? this.$t('960564') : this.$t('960565'))),
                        id: item.planid,
                        approve_status: item.approve_status
                    })
                }
            })
            this.tableData1 = data
        },
        pass () {
            var data = {
                approve_status: '3',
                orders: this.ids,
                token: this.token
            }
            // data = this.ids
            this.axios.request({
                url: 'tpm/PartsProcurement/AuditOrders',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret == 1) {
                    this.$Message.success(this.$t('1'))
                    this.search(1, 10)
                } else {
                    window_warning(this.$t(res.data.msg))
                }
            })
        },
        Notpass () {
            var data = {
                approve_status: '4',
                orders: this.ids,
                token: this.token
            }
            this.axios.request({
                url: 'tpm/PartsProcurement/AuditOrders',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret == 1) {
                    this.$Message.success(this.$t('1'))
                    this.search(1, 10)
                } else {
                    window_warning(this.$t(res.data.msg))
                }
            })
        },
        selectRowChange (value) { // 当前页面选中了那些数据
            this.passstatus = true
            // this.notpassstatus=true
            var pass_boo = true
            var data = []
            value.forEach(item => {
                data.push(item.order_No)
                pass_boo = (!!((item.approve_status == 1 || item.approve_status == 2)))
                this.passstatus = pass_boo
            })
            this.ids = data
            // console.log(this.ids)
        },
        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
        },
        show (index) {
            this.detailmodal = true
            var nowdata = this.tableData1[index]
            var data = { page: 1, pagesize: 9999, order_code: nowdata.order_No, token: this.token }
            this.axios
                .request({
                    url: '/tpm/PartsProcurement/SparepartOrderDetailNoToken',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.tableData2 = res.data.data
                    } else {
                        window_warning(this.$t(res.data.msg))
                    }
                })
        },
        confirm1 () { // 审核通过确认模态框
            if (!this.passstatus) {
                window_warning(this.$t('5000023'))
                return false
            }
            // console.log(277722)
            // return false;
            this.$Modal.confirm({
                title: this.$t('5000020'),
                content: '<p>' + this.$t('5000021') + '</p>',
                onOk: () => {
                    this.pass()
                },
                onCancel: () => {

                }
            })
        },
        confirm2 () { // 审核驳回确认模态框
            console.log(222)
            if (!this.passstatus) {
                window_warning(this.$t('5000024'))
                return false
            }
            // console.log(222)
            // return false;
            this.$Modal.confirm({
                title: this.$t('5000020'),
                content: '<p>' + this.$t('5000022') + '</p>',
                onOk: () => {
                    this.Notpass()
                },
                onCancel: () => {

                }
            })
        }
    }
}
</script>
<style lang="less" scoped>

</style>
