<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv">
      <div>
        <div class="filter">
          <label>{{$t('960446')}}：</label>
          <Input class="searchInput" type="text" v-model="code" />
        </div>
        <div class="filter">
          <label>{{$t('9800001')}}：</label>
          <Input class="searchInput" type="text" v-model="brand" />
        </div>
        <div class="filter">
          <label>{{$t('300000')}}：</label>
          <Cascader
            :data="typelevel"
            :value="typeleveldata"
            @on-change="typechange"
            trigger="click"
            change-on-select
             class="searchSelect"
          ></Cascader>
        </div>
        <div class="filter">
          <label>{{$t('950377')}}：</label>
          <Select v-model="mid" label-in-value clearable  class="searchSelect">
            <Option v-for="item in midlist" :value="item.id" :key="item.id">{{ item.name }}</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" icon="ios-checkmark-circle-outline" @click="edit(1)">{{$t('960447')}}</Button>
        <Button type="error" class="fourWord" icon="ios-alert-outline" @click="edit(2)">{{$t('960448')}}</Button>
      </div>
    </div>
    <div class="divborder newTableDiv">
      <Table
      class="tableClass"
        highlight-row
        border
        @on-selection-change="handleSelectRow"
        :data="tableData1"
        :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>
    </div>
    <Modal class="newModalClass" v-model="modal" :styles="{width:'680px'}">
      <p slot="header">
        <span v-if="type===1">{{$t('960447')}}</span>
        <span v-if="type===2">{{$t('960448')}}</span>
      </p>
      <div class="modal_body" style="padding-right:40px;height:300px!important;">
        <Table max-height="200" highlight-row border :data="tableData2" :columns="tableColumns2"></Table>
        <div class="filter" v-if="type===2" style="margin-top:10px;">
          <label style="width:150px!important;">{{$t('960443')}}：</label>
          <Select v-model="name" clearable filterable class="searchSelect MaxWidth">
            <Option v-for="item in titleList" :value="item" :key="item">{{item}}</Option>
          </Select>
        </div>
        <div class="filter"  style="margin-top:10px;display:flex;margin-bottom: 30px;">
            <label style="width:150px!important;">{{$t('1030')}}：</label>
            <Input
              type="textarea"
              v-model="remark"
              class="searchInput MaxWidth"
              :autosize="{minRows: 3,maxRows: 3}"
            />
        </div>
      </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 {
            titleList: [],
            name: '', // 审核流程
            remark: '',
            type: 0, // 采购类型
            modal: false,
            midlist: [], // 用户列表
            typelevel: [], // 备件类型数据
            typeleveldata: [], // 备件类型value
            code: '', // 备件编号
            brand: '', // 供应商
            mid: 0, // 责任人
            page: 1, // 页码
            pagesize: 10, // 数据条数
            obj: {}, // 某一行的数据
            tableData1: [], // 表格数据
            tableData2: [], // 表格数据2
            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('960450'), // 库存阈值
                    key: 'max_sku',
                    align: 'center'
                },
                {
                    title: this.$t('960452'), // 采购数量
                    key: 'count',
                    align: 'center',
                    render: (h, params) => {
                        return h('InputNumber', {
                            props: { value: params.row.count,
                                type: 'number',
                                min: 0
                            },
                            on: {
                                input: value => {
                                    t.tableData2[params.index].count = value
                                }
                            }
                        })
                    }
                }
            ], // 表格数据2
            total: 0, // 数据总条数
            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('300001'), // 备件编号
                    align: 'center',
                    key: 'code'
                },
                {
                    title: this.$t('300002'), // 备件名称
                    key: 'title',
                    align: 'center'
                },
                {
                    title: this.$t('300000'), // 备件类型
                    key: 'type',
                    align: 'center'
                },
                {
                    title: this.$t('9800001'), // 供应商
                    key: 'brand',
                    align: 'center'
                },
                {
                    title: this.$t('300016'), // 当前库存
                    key: 'sku',
                    align: 'center'
                },
                {
                    title: this.$t('960449'), // 安全库存
                    key: 'mini_sku',
                    align: 'center'
                },
                {
                    title: this.$t('960450'), // 库存阈值
                    key: 'max_sku',
                    align: 'center'
                },
                {
                    title: this.$t('960451'), // 上周期消耗
                    key: 'last_week',
                    align: 'center'
                },
                {
                    title: this.$t('950377'), // 责任人
                    key: 'mid_name',
                    align: 'center'
                }
            ] // 表头
        }
    },
    created () {
    // 生命周期
        this.inittype()
        this.initmidlist()
        this.search(1, 10)
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
        this.tableColumns2 = this.$time.initTableTitle(this.tableColumns2)
    },
    methods: {
        initTitle () {
            this.axios
                .request({
                    url: 'tpm/PartsProcurement/GetApprovalProcessTitle',
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.titleList = res.data.data
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        initmidlist () {
            var params = {}
            this.axios
                .request({
                    // 初始化负责人
                    url: '/config/projectuser/GetAllUserByCurrentProjectId',
                    params,
                    method: 'get'
                })
                .then(res => {
                    this.midlist = res.data.data
                })
        },
        // 备件类型变化
        typechange (value) {
            this.typeleveldata = value
        },
        // 初始化备件类型
        inittype () {
            this.axios
                .request({
                    url: '/tpm/SparepartType/SparepartListType',
                    method: 'get'
                })
                .then(res => {
                    this.typelevel = res.data.data.children
                })
        },
        levelchange (value) {
            this.leveldata = value
        },
        search (page, pagesize) {
            var typeid =
        this.typeleveldata.length < 1
            ? 0
            : this.typeleveldata[this.typeleveldata.length - 1]
            var data = {
                page: page,
                pagesize: pagesize,
                mid: this.mid,
                brand: this.brand,
                typeid: typeid,
                code: this.code
            }
            this.axios
                .request({
                    url: '/tpm/PartsProcurement/SparepartInfo',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.total = res.data.total
                        this.tableData1 = res.data.data
                        // this.mockTableData1(res.data.data);
                        this.page = res.data.page
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        edit (type) {
            if (this.tableData2.length === 0) {
                this.$Message.error(this.$t('5000019'))
                return
            }
            this.initTitle()
            this.type = type
            this.remark = ''
            this.modal = true
        },
        editmodelcancel () {
            // 编辑模态框取消
            this.modal = false
        },
        editdata () {
            var data = {}
            var list = []
            this.tableData2.forEach(element => {
                list.push({ code: element.code, count: element.count })
                // TODO count
            })
            // TODO name
            data = { list: list, name: this.name, type: this.type, remark: this.remark }
            this.axios
                .request({
                    url: '/tpm/PartsProcurement/SparepartPush',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t('1'))
                        this.search(1, this.pagesize)
                        this.modal = false
                        this.tableData2 = []
                    } 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.tableData2 = data
            console.log(data)
        }
    }
}
</script>
<style lang="less" scoped>
</style>
