<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('1950460')}}：</label>
                  <Select v-model="Stocking_status"  label-in-value  clearable class="searchSelect" >
                      <Option  :value=1 v-text="$t('5000006')">未替换</Option>
                      <Option  :value=2 v-text="$t('5000007')">已替换</Option>
                  </Select>
            </div>
          </div>
        <div class="searchBtn">
            <Button type="primary" class="twoWord" icon="ios-search" @click="search(1,pagesize)" >{{$t('1001')}}</Button>
            <Button type="primary" class="twoWord" icon="ios-repeat" @click="replacespart()">{{$t('950459')}}</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"
          >
          </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('950459')" v-model="detailmodal" :styles="{width:'800px',height:'500px'}" >
            <div class="modal_body" style="width:780px!important;padding-right:40px;height:500px">
                <Table style="height:100%"
                  highlight-row
                  border
                  :data="tableData2"
                  :columns="tableColumns2"
                >
                </Table>
            </div>
            <div slot="footer">
              <Button type="text" size="large" @click="detailmodal=false" v-text="$t('1033')">取消</Button>
              <Button type="primary" size="large" @click="submitreplace()" v-text="$t('1011')">确定</Button>
            </div>
      </Modal>
    </div>
</template>
<script>
export default {
    data () { // 基础数据
        return {
            datalevel: [], // 产线层级数据
            leveldata: [], // 产线层级value
            Work_order: '', // 工单号
            Stocking_status: '', // 审核状态
            page: 1, // 页码
            pagesize: 10, // 数据条数
            obj: {}, // 某一行的数据
            tableData1: [], // 表格数据
            total: 0, // 数据总条数
            replacemodal: false, // 修改模态框
            tableData2: [], // 修改模态框的数据
            selectids: '',
            detailmodal: false,
            replace_selection: [
                {
                    value: 1,
                    name: this.$t('400016')
                },
                {
                    value: 2,
                    name: this.$t('950457')
                },
                {
                    value: 3,
                    name: this.$t('950458')
                }
            ], // 替换选项下拉框
            tableColumns2: [ // 修改模态框的表头
                {
                    title: this.$t('300001'), // 备件编码
                    align: 'center',
                    key: 'code'
                },
                {
                    title: this.$t('300002'), // 备件名称
                    key: 'name',
                    align: 'center'
                },
                {
                    title: this.$t('950454'), // 备件代码
                    key: 'record_code',
                    align: 'center'
                },
                {
                    title: this.$t('1950468'), // 维修次数
                    align: 'center',
                    key: 'repair_count'
                },
                {
                    title: this.$t('950439'), // 维修上限
                    key: 'repair_upper',
                    align: 'center'
                },
                {
                    title: this.$t('300019'), // 备件单价
                    key: 'price',
                    align: 'center'
                },
                {
                    title: this.$t('1950462'), // 替换选项
                    key: 'replace_selection',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('Select', {
                            props: {
                            },
                            on: {
                                'on-change': (event) => {
                                    this.tableData2[params.index].replace_state = event
                                }
                            }
                        },
                        this.replace_selection.map((item) => {
                            return h('Option', {
                                props: {
                                    value: item.value,
                                    label: item.name
                                }
                            })
                        })
                        )
                    }
                }
            ],
            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: 'code'
                },
                {
                    title: this.$t('960432'), // 设备
                    key: 'location',
                    align: 'center'
                },
                {
                    title: this.$t('200022'), // 失效模式
                    key: 'faultmode',
                    align: 'center'
                },
                {
                    title: this.$t('950445'), // 申请人
                    key: 'user_name',
                    align: 'center'
                },

                {
                    title: this.$t('950446'), // 申请时间
                    key: 'apply_time',
                    align: 'center'
                },
                {
                    title: this.$t('1950460'), // 备货状态
                    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 = []
                    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.Stocking_status,
                page: page,
                pagesize: pagesize
            }
            this.axios.request({
                url: '/tpm/SparepartAudit/GetReplcaePagedList',
                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 = this.$t('5000007')
                    if (item.apply_state === 0) {
                        state_name = this.$t('5000006')
                    }
                    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
                    })
                }
            })
            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(',')
        },
        replacespart () {
            if (this.selectids === undefined || this.selectids === '') {
                this.$Message.error(this.$t('5000008'))
                return false
            }
            this.detailmodal = true
            var params = {
                ids: this.selectids
            }
            this.axios.request({
                url: '/tpm/SparepartAudit/GetReplaceSparepartList',
                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,
                        price: item.price,
                        record_code: item.record_code,
                        repair_count: item.repair_count,
                        repair_upper: item.repair_upper,
                        sparepart_code: item.sparepart_code
                    })
                }
            })
            this.tableData2 = data
        },
        submitreplace () {
            // let sps =[]
            // sps.push({
            //   id: 0, // TODO
            //   replace_state: 0 //TODO
            // })
            var data = {
                replace_spareparts: this.tableData2
            }
            this.axios.request({
                url: '/tpm/SparepartAudit/ReplaceSparepartList',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret == 1) {
                    this.search(1, this.pagesize)
                    this.detailmodal = false
                    this.$Message.error(this.$t(1))
                } else {
                    this.$Message.error(this.$t('' + res.data.msg))
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>

</style>
