<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
        <div class="filter">
          <label>{{$t('1950574')}}：</label>
          <Cascader
            :data="datalevel"
            :value="leveldata"
            change-on-select
            class="searchSelect"
            @on-change="changelevel"
            ></Cascader>
        </div>
        <div class="filter">
            <label>{{$t('5000044')}}：</label>
            <Select
                v-model="code"
                label-in-value
                clearable
                class="searchSelect"
                >
            <Option :value="1" v-text="$t('900999')">OEE</Option>
            <Option :value="2" v-text="$t('5000045')">准时交付率</Option>
            <Option :value="3" v-text="$t('5000046')">客户投诉数</Option>
            <Option :value="4" v-text="$t('5000047')">零事故天数</Option>
            <Option :value="5" v-text="$t('500125')">产量达成率</Option>
            <Option :value="6" v-text="$t('500109')">实际产量</Option>
            <Option :value="7" v-text="$t('500123')">合格率</Option>
            <Option :value="8" v-text="$t('5000048')">报废率</Option>
            <Option :value="9" v-text="$t('5000049')">返工数</Option>
            <Option :value="10" v-text="$t('5000050')">OEE八大损失分布</Option>
            </Select>
        </div>
      <div class="filter">
                <label>{{$t(900908)}}：</label>
                <DatePicker
                    class="searchInput middleWidth"
                    type="daterange"
                    v-model="startTime"
                    placeholder=""
                    @on-change="selectdate"
                ></DatePicker>
            </div>
        <div>
          <div class="searchBtn">
            <Button type="primary" class="twoWord" icon="ios-search" @click="search(1,10)">{{$t('1001')}}</Button>
            <Button type="warning" class="twoWord" icon="ios-create-outline" @click="edit()">{{$t('1003')}}</Button>
            <!-- <Button type="primary" icon="md-download" @click="exportxls()">{{$t('1007')}}</Button> -->
          </div>
        </div>
        </div>

        <Modal
          :title="$t('1003')"
          v-model="editmodal"
          :styles="{width:'600px'}"
          @on-ok="commitEdit"
          class="newModalClass"
        >
          <div class="filter">
            <label><i>*</i>{{$t(950386)}}：</label>
            <Input
              class="searchInput"
              type="text"
              id="input1"
              v-model="detailobj.targetVal"
            />
          </div>
          <div class="filter">
            <label><i>*</i>{{$t(950408)}}：</label>
            <Input
              class="searchInput"
              type="text"
              id="input1"
              v-model="detailobj.actVal"
            />
          </div>
          <div slot="footer">
              <Button type="text" size="large" @click="editmodal=false" v-text="$t('1033')">取消</Button>
              <Button type="primary" size="large" @click="commitEdit" v-text="$t('1011')">确定</Button>
          </div>
        </Modal>
        <div class="divborder newTableDiv">
        <Table
        class="tableClass"
        @on-current-change="handleRowChange"
        highlight-row
        :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>
  </div>
</template>
<script>
import axios from '@/libs/api.request'
import moment from 'moment'
export default {
    name: 'Businessmanagement', // 组件不刷新
    data () {
        return {
            datalevel: [], // 产线层级插件所需数据
            leveldata: [], // 产线层级选中数据
            levelid: 0, // 产线层级选中的section_id
            code: 0, // 统计指标
            startTime: '', // 时间范围
            editmodal: false,
            tableData1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            detailobj: {},
            tableColumns1: [
                {
                    type: 'index2',
                    title: this.$t(1008),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        )
                    },
                    width: '80px'
                },
                {
                    title: this.$t(100395),
                    key: 'title'
                },
                {
                    title: this.$t(5000044),
                    key: 'rateDesc'
                },
                {
                    title: this.$t(600532),
                    key: 'date'
                },
                {
                    title: this.$t(950386),
                    key: 'targetVal'
                },
                {
                    title: this.$t(950408),
                    key: 'actVal'
                }
            ]
        }
    },
    created () {
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
        // 时间赋值
        var date = new Date()
        var dtStart = this.timestampToTime(date.getTime() - 3600 * 1000 * 24 * 7)
        var dtEnd = this.timestampToTime(date.getTime())
        this.startTime = [dtStart, dtEnd]
        this.selectdate(this.startTime)
        // this.inittime();
        this.search(1, 10)
        this.initlevel() // 初始化产线层级
    },
    methods: {
        initlevel () {
            // 初始化产线层级
            axios
                .request({
                    url: 'config/ProjectLevelSection/GetSectionTree',
                    method: 'get'
                })
                .then(res => {
                    const arr = []
                    this.datalevel = res.data.data
                    arr.push(res.data.data[0].value)
                    this.leveldata = arr
                })
        },
        inittime () {
            // 时间赋值
            var date = new Date()
            var dtStart = this.timestampToTime(date.getTime() - 3600 * 1000 * 24 * 7)
            var dtEnd = this.timestampToTime(date.getTime())
            this.startTime = [dtStart, dtEnd]
        },
        changelevel (data) {
            // 切换产线层级，触发事件
            // 请求数据
            this.levelid = data[data.length - 1]
        },
        timechange (value) {
            this.startTime = value
        },
        handleFormatError (file) {
            this.$Message.error(this.$t('950396') + file.name + this.$t('950397'))
        },
        handleSuccess (res, file) {
            if (res.ret == 1) {
                this.$Message.success(this.$t('950398'))
            } else {
                if ((res.msg + '').indexOf(',') != -1) {
                    inittip(res.msg)
                } else {
                    this.$Message.error(this.$t('' + res.msg))
                }
            }
        },
        handleError () {
            this.$Message.error(this.$t('2010006') + '!')
        },
        search (page, pagesize) {
            var data = {
                page: page,
                pageSize: pagesize,
                section: this.levelid,
                type: this.code,
                begin: this.dtStart,
                end: this.dtEnd
            }
            if (data.begin === '') {
                this.$Message.error(this.$t(1143))
                return
            }
            axios
                .request({
                    url: '/dashboard/DashboardTotal/GetRate',
                    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
                    }
                })

            this.detailobj = ''
        },
        mockTableData1 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        id: item.id,
                        section: item.section,
                        title: item.Title,
                        rateDesc: item.RateDesc,
                        date: item.Date,
                        targetVal: item.TargetVal,
                        actVal: item.ActVal,
                        rateType: item.RateType
                    })
                }
            })
            this.tableData1 = data
        },
        handlePageSize (value) {
            this.pagesize = value
            this.tableData1 = this.search(this.page, this.pagesize)
        },
        changePage (value) {
            this.page = value
            this.tableData1 = this.search(this.page, this.pagesize)
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow
        },
        selectdate (e) {
            this.dtStart = e[0]
            this.dtEnd = e[1]
        },
        commitEdit () {
            if (this.detailobj.id === undefined) {
                this.$Message.error(this.$t(90000081))
                return
            }
            var data = this.detailobj
            axios
                .request({
                    url: '/dashboard/DashboardTotal/UpdRate',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t(90000054))
                        this.editmodal = false
                        this.search(1, 10)
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                    this.search(1, 10)
                })
        },
        timestampToTime (timeStampe) {
            var date = new Date(timeStampe) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-'
            var M =
        (date.getMonth() + 1 < 10
            ? '0' + (date.getMonth() + 1)
            : date.getMonth() + 1) + '-'
            var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
            // var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getDate()) + ':'
            // var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':'
            // var s = (date.getSeconds() < 10 ? '0' + (date.getMinutes()) : date.getMinutes())
            return Y + M + D
        },
        edit () {
            if (this.detailobj.id == null) {
                this.$Message.error(this.$t(90000081))
                return
            }
            this.editmodal = true
        },
        exportxls () {
            var data = {
                page: this.page,
                pageSize: this.pagesize,
                section: this.levelid,
                type: 1,
                begin: this.dtStart,
                end: this.dtEnd
            }

            axios
                .request({
                    url: '/dashboard/DashboardTotal/GetRate',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        window.location.href = axios.publicPath + '' + res.data.data
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        }
    }
}
</script>
<style lang="less" scoped>

</style>
