<template>
    <div class="testdiv">
      <div class="divborder">
          <div>
            <div class="filter">
                <label v-text="$t('1132')">产线层级</label>:
                <Cascader :data="datalevel" :value="leveldata"   trigger="click" @on-change="levelchange" change-on-select style="display:inline-block;width:200px;" ></Cascader>
            </div>
            <div class="filter">
                  <label v-text="$t('800191')">维护类型</label>:
                  <Select v-model="statistical_indicators"  label-in-value  clearable style="width:200px;" >
                      <Option  :value="1" >AM</Option>
                      <Option  :value="2" >PM</Option>
                  </Select>
            </div>
            <div class="filter">
                <label v-text="$t('900908')">时间范围</label>:
                <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm:ss" v-model="index_time"  style="width: 300px"></DatePicker>
            </div>
          </div>
        <div class="buttonall">
            <Button type="primary" icon="ios-search" @click="search(1,10)" v-text="$t('1001')">查询</Button>
            <Button type="primary" icon="md-download" @click="downpdf()">{{$t('900741')}}</Button>
        </div>
      </div>
      <div class="divborder">
          <Table
            style="margin-top:10px"
            highlight-row
            border
            @on-current-change="handleRowChange"
            :data="tableData1"
            :columns="tableColumns1"
          ></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>
          <Table
           v-if="table2"
            style="margin-top:10px"
            highlight-row
            border
            :data="tableData2"
            :columns="tableColumns2"
          ></Table>
      </div>
    </div>
</template>
<script>
import moment from 'moment'
export default {
    data () {
        return {
            datalevel: [], // 产线层级数据
            leveldata: [], // 产线层级value
            statistical_indicators: 1, // 统计指标
            index_time: '', // 时间范围
            table2: false, // table2默认隐藏
            tableData2: [], // 表格2数据
            tableColumns2: [
                {
                    type: 'index2',
                    title: this.$t('1008'), // 序号
                    key: 'xuhao',
                    align: 'center',
                    render: (h, params) => {
                        return h('span', params.index + 1)
                    },
                    width: 60
                },
                {
                    title: this.$t('200053'), // 执行人
                    align: 'center',
                    key: 'Executor'
                },
                {
                    title: this.$t('900328'), // 执行时间
                    align: 'center',
                    key: 'Executor_time'
                },
                {
                    title: this.$t('800081'), // 执行结果
                    align: 'center',
                    key: 'Executor_result'
                },
                {
                    title: this.$t('900700'), // 备件出库单号
                    align: 'center',
                    key: 'Spare_No'
                },
                {
                    title: this.$t('900292'), // 图片展示
                    align: 'center',
                    key: 'pic',
                    render: (h, params) => {
                        params.row.piclist = ['https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2186080368,3144660073&fm=15&gp=0.jpg', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1932194022,3135983609&fm=15&gp=0.jpg']
                        return h('Poptip', {
                            props: {
                                trigger: 'hover',
                                title: this.$t('1045'), // 图片
                                placement: 'bottom',
                                transfer: true,
                                left: '30%'
                            }
                        }, [
                            h('Tag', this.$t('1045')),
                            h('div', {
                                slot: 'content'
                            }, [
                                h('Carousel',
                                    {
                                        attrs: {
                                            // src:params.row.piclist,
                                            // style: 'border-radius: 2px;z-index:9999',
                                            autoplay: false,
                                            slot: 'content',
                                            style: 'border-radius: 2px;z-index:9999;width:400px;height:400px;'
                                        }
                                    },
                                    params.row.piclist.map((item) => {
                                        return h('CarouselItem', {}, [
                                            h('div', {}, [
                                                h('img', {
                                                    attrs: {
                                                        src: item,
                                                        style: 'width:100%;height:400px;'
                                                    }
                                                }, [])
                                            ])
                                        ])
                                    })
                                )
                            ]
                            )
                        ])
                    }

                }
            ], // 表格2表头
            tableData1: [], // 表格数据
            obj: {},
            tableColumns1: [
                {
                    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: 60
                },
                {
                    title: this.$t('200038'), // 工位名称
                    align: 'center',
                    key: 'station_name'
                },
                {
                    title: this.$t('200058'), // 项目内容
                    key: 'Project_content',
                    align: 'center'
                },
                {
                    title: this.$t('900672'), // 项目类型
                    align: 'center',
                    children: [
                        {
                            title: this.$t('1118'), // 勾选确定型
                            key: 'Check_type',
                            align: 'center'
                        },
                        {
                            title: this.$t('1119'), // 数值记录型
                            align: 'center',
                            children: [
                                {
                                    title: this.$t('200017'), // 单位
                                    key: 'unit',
                                    align: 'center'
                                },
                                {
                                    title: this.$t('200059'), // 上限
                                    key: 'Upper_limit',
                                    align: 'center'
                                },
                                {
                                    title: this.$t('200060'), // 下限
                                    key: 'lower_limit',
                                    align: 'center'
                                }
                            ]
                        }
                    ]
                },
                {
                    title: this.$t('200061'), // 重要度
                    key: 'Importance_degree',
                    align: 'center'
                },
                {
                    title: this.$t('800192'), // 计划用时
                    key: 'plan_usertime',
                    align: 'center'
                }
            ], // 表头
            total: 0, // 数据总量
            page: 1, // 页码
            pagesize: 10
        }
    },
    created () {
        this.initlevel()
        this.index_time = [moment(new Date().getTime() - 3600 * 1000 * 24 * 30).format('YYYY-MM-DD ') + '00:00:00', moment(new Date().getTime()).format('YYYY-MM-DD ') + '23:59:59']
    },
    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) {
            this.levelid = this.leveldata.slice(-1)
            var dataarr = []
            var params = {
                id: this.levelid
            }
            this.axios.request({
                url: 'config/UserLevel/ListMachineIdArrEx',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    dataarr = res.data.data
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
                //  resolve();
            }).then(res => {
                var data = {
                    start_time: moment(this.index_time[0]).format('YYYY-MM-DD HH:mm:ss'),
                    end_time: moment(this.index_time[1]).format('YYYY-MM-DD HH:mm:ss'),
                    mode: this.statistical_indicators,
                    id: dataarr,
                    page: page,
                    pagesize: pagesize
                }
                this.axios.request({
                    url: '/tpm/PlanResult/GetlistPlanResultItem',
                    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 {
                        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.tableData1 = this.search(this.page, this.pagesize)
        },
        handlePageSize (value) {
            this.pagesize = value
            this.tableData1 = this.search(this.page, this.pagesize)
        },
        handleRowChange (currentRow, oldCurrentRow) { // 点击之后将某一行的数据添加到obj的对象中
            this.obj = currentRow
            var data = {
                start_time: moment(this.index_time[0]).format('YYYY-MM-DD HH:mm:ss'),
                end_time: moment(this.index_time[1]).format('YYYY-MM-DD HH:mm:ss'),
                id: this.obj.id
            }
            this.axios.request({
                url: '/tpm/PlanResult/GetlistPlanOneResultItem',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.mockTableData2(res.data.data)
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
            this.table2 = true
        },
        // 渲染列表开始
        mockTableData1 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                var level = ''
                switch (Number(item.severity_level)) {
                case 1:
                    level = this.$t('950331') // 润滑
                    break
                case 2:
                    level = this.$t('950332') // 检查
                    break
                case 3:
                    level = this.$t('950333') // 紧缩
                    break
                case 4:
                    level = this.$t('950334') // 清洁
                    break
                case 5:
                    level = this.$t('950335') // 调整
                    break
                case 6:
                    level = this.$t('950336') // 更换
                    break
                }
                var valuetype = ''
                switch (Number(item.value_type)) {
                case 2:
                    valuetype = ' '
                    break
                case 1:
                    valuetype = '√'
                    break
                }
                if (item) {
                    data.push({
                        station_name: item.sectiontitle,
                        Project_content: item.content,
                        Check_type: valuetype,
                        unit: item.unit,
                        Upper_limit: item.up_limit,
                        lower_limit: item.lower_limit,
                        Importance_degree: level,
                        plan_usertime: item.standard_time,
                        id: item.planid
                    })
                }
            })
            this.tableData1 = data
        },
        mockTableData2 (tablelist) {
            var imagesurl_arr = []
            var imagesurl
            let data = []
            tablelist.forEach(item => {
                console.log(item)
                console.log(item.imgurl)
                if (item.imgurl == '') {
                    imagesurl = []
                } else {
                    imagesurl = item.imgurl.split(',')
                }
                imagesurl_arr.push(imagesurl)
                console.log(imagesurl_arr)
                var result = ''
                switch (isNaN(parseInt(item.value))) {
                case true:
                    result = this.$t('800083') // 已执行
                    break
                default:
                    result = item.value
                    break
                }
                if (item) {
                    data.push({
                        Executor: item.name,
                        Executor_time: item.time,
                        Executor_result: result,
                        Spare_No: item.record_code,
                        pic: imagesurl.length + this.$t('800129'), // 个
                        piclist: imagesurl_arr,
                        id: item.id
                    })
                }
            })
            this.tableData2 = data
        }

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

</style>
