<template>
  <div class="panel-body">
    <div class="status_status">
      <div class="machine-status-item">
        <Select v-model="mode" size="large" style="width:70px;" class="fs15" @on-change="changeMode($event)">
          <Option :value="1" :key="1">AM</Option>
          <Option :value="2" :key="2">PM</Option>
          <Option :value="3" :key="3">CMP</Option>
        </Select>
      </div>

      <div class="andon_info">
    <div class="divborder newSearchDiv">
        <div class="list">
          <div class="clear" v-for="(lineItem,key) in statusData.machineStateList" :key="key" style="cursor:pointer;">
            <div class="title mb15 pl15">{{lineItem.line}}</div>
            <div class="clear">
              <div v-for="(machineItem,key) in lineItem.machine" :key="key" :class="['machineStateList','weihustatus'+machineItem.state]">
                <div class="t">
                  <div style="height:25%;text-align:bottom">
                    {{machineItem.section_name}}
                  </div>
                  <div style="height:25%;text-align:bottom">
                    {{machineItem.name}}
                  </div>
                  <div style="height:50%;text-align:top;line-height: 40px;font-size:25px;">
                    <span v-if="machineItem.state === 1">{{$t(100200)}}</span>
                    <span v-else-if="machineItem.state === 2">{{$t(1133)}}</span>
                    <span v-else-if="machineItem.state === 3">{{$t(1134)}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

      <!-- <div v-for="(item, index) in statusData.status" class="machine-status-item">
        <div class="machine-status-icon" :style="{backgroundColor: statusStyle[item.status].color}">
          <Icon :type="statusStyle[item.status].icon" />
        </div>
        <div class="machine-status-info">
          <span class="machine-status-count">{{item.count}} 台 </span>
          <span class="machine-status-name">{{$t(item.name)}}</span>
        </div>
      </div> -->
    </div>
    <!-- <my-trees :list="statusData.sectionTree"></my-trees> -->

    <div class="divborder mt20" id="echart" style="height:350px"></div>
    <div class="divborder status_list newSearchDiv">
      <p style="font-size:18px;font-weight:bold">{{$t(900738)}}</p>
      <div class="filter">
        <label>{{$t(1132)}}：</label>
        <Cascader :data="datalevel" :value="leveldata" trigger="click"  class="searchSelect"
          @on-change="changelevel"></Cascader>
          <!-- <div class="searchBtn"> -->
            <div class="searchBtn" style="display:inline-flex;margin:0px;">
            <Button type="primary"  class="twoWord" icon="ios-search" @click="search(1,10)" style="margin-left:30px;">{{$t('1001')}}</Button>
            </div>
          <!-- </div> -->
      </div>
    </div>
    <div class="divborder newTableDiv">
      <Table  class="tableClass" :data="statusData.list" :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 echarts from 'echarts'
import axios from '@/libs/api.request'
import myTrees from '_c/tpm-status/status.vue'
export default {
    components: {
        myTrees
    },
    data () {
        return {
            // 数据源容器
            statusData: {
                // sectionTree: [],
                // status: [],
                machineStateList: [],
                list: [],
                chartList: []
            },
            lastSelectedLine: -1,
            mode: 1,
            leveldata: [], // 产线层级插件所需数据
            datalevel: [], // 产线层级选中数据
            levelid: 0, // 产线层级选中的section_id
            total: 0, // 刀位列表total
            page: 1, // 刀位列表当前页数
            pagesize: 10, // 刀位列表pagesize
            // 状态map
            statusStyle: {
                0: {
                    color: '#23343c',
                    icon: 'md-help-circle'
                },
                1: {
                    color: '#d9534f',
                    icon: 'md-warning'
                },
                2: {
                    color: '#f0ad4e',
                    icon: 'ios-create'
                },
                3: {
                    color: '#D5575D',
                    icon: 'ios-construct'
                },
                4: {
                    color: '#337ab7',
                    icon: 'ios-fastforward'
                },
                5: {
                    color: '#2caf8c',
                    icon: 'md-checkbox'
                },
                6: {
                    color: '#5cb85c',
                    icon: 'md-checkbox'
                },
                7: {
                    color: '#5cb85c',
                    icon: 'md-checkbox'
                },
                8: {
                    color: '#5cb85c',
                    icon: 'md-thumbs-up'
                }
            },
            // 状态树相关 后期删掉
            list: [], // 格式见页尾

            // 列表
            tableColumns1: [{ // 列表字段属性集合
                type: 'index2',
                title: this.$t(1008),
                key: 'xuhao',
                render: (h, params) => {
                    return h('span', {
                        style: {
                            display: (params.row.station === '') ? 'none' : 'inline-block'
                        }
                    }, params.index + 1)
                },
                width: 80
            },
            {
                title: this.$t(200003),
                key: 'station',
                width: 240

            },
            {
                title: this.$t(1041),
                key: 'machinetitle',
                width: 120
            },
            {
                title: this.$t(200051),
                key: 'num',
                width: 120
            },
            {
                title: this.$t(200052),
                key: 'utime',
                width: 120
            },
            {
                title: this.$t(200053),
                key: 'name',
                width: 240
            },
            {
                title: this.$t(200054),
                key: 'status',
                width: 70
            },
            {
                title: this.$t(1038),
                key: 'action',
                align: 'center',
                render: (h, params) => {
                    return h('div', [
                        h('Button', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            style: {
                                marginRight: '5px',
                                display: (params.row.station === '') ? 'none' : 'inline-block'
                            },
                            on: {
                                click: () => {
                                    if (this.lastSelectedLine === -1) { // 之前没有点击过
                                        let planInfo = this.statusData.list[params.index] != undefined ? this.statusData.list[
                                            params.index].planInfo : undefined
                                        if (planInfo != undefined && planInfo.length > 0) {
                                            planInfo.forEach(item => {
                                                this.statusData.list.splice(params.index + 1, 0, {
                                                    station: '',
                                                    machinetitle: '',
                                                    num: item.content,
                                                    utime: item.utime,
                                                    name: '',
                                                    status: ''
                                                })
                                            })
                                            this.lastSelectedLine = params.index // 记录点击的行数
                                        }
                                    } else {
                                        if (params.index === this.lastSelectedLine) { // 再次点击了同样的行
                                            let planInfo = this.statusData.list[params.index] != undefined ? this.statusData.list[
                                                params.index].planInfo : undefined
                                            // 删除之前你添加的行
                                            this.statusData.list.splice(params.index + 1, planInfo.length)
                                            this.lastSelectedLine = -1 // 清空记录点击的行数
                                        } else {
                                            // 先删除之前添加的
                                            let oldPlanInfo = this.statusData.list[this.lastSelectedLine].planInfo
                                            this.statusData.list.splice(this.lastSelectedLine + 1, oldPlanInfo.length)
                                            // 重新计算index！！！
                                            let index = params.index > this.lastSelectedLine ? params.index - oldPlanInfo.length
                                                : params.index
                                            let planInfo = this.statusData.list[index].planInfo
                                            // 再增加现在需要展示的
                                            if (planInfo != undefined && planInfo.length > 0) {
                                                planInfo.forEach(item => {
                                                    this.statusData.list.splice(index + 1, 0, {
                                                        station: '',
                                                        machinetitle: '',
                                                        num: item.content,
                                                        utime: item.utime,
                                                        name: '',
                                                        status: ''
                                                    })
                                                })
                                                this.lastSelectedLine = index // 记录点击的行数
                                            } else {
                                                this.lastSelectedLine = -1
                                            }
                                        }
                                    }
                                }
                            }
                        }, this.$t(200054))

                    ])
                }
            }
            ]
        }
    },
    created () {
        this.getStatus()
        this.getList()
        this.initlevel()
        this.initEchart()
        this.search()
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
    },
    methods: {
        getStatus () {
            // 获取status相关数据
            axios.request({
                url: 'tpm/plan/GetMachinePlanState?modetype=' + this.mode,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.statusData.machineStateList = res.data.data
                    // this.statusData.status = res.data.data.status
                    // this.statusData.sectionTree = this.buildList(res.data.data.sectionTree)
                } else {
                    this.statusData.machineStateList = []
                    // this.statusData.status = []
                    // this.statusData.sectionTree = []
                }
            })
        },
        buildList (data) { // 整理statusTree数据
            let arr = []
            if (data != undefined && data.length > 0) {
                let firstParent = {} // 顶层
                let lastArr = []
                data.forEach(item => {
                    if (item.pid === 0) {
                        firstParent = item
                    }
                    if (item.isleaf === true) {
                        if (lastArr.indexOf(item.pid) < 0) {
                            lastArr.push(item.pid)
                        }
                    }
                })
                arr.push(this.findcList(firstParent, data, lastArr, this.statusStyle))
            }
            return arr
        },
        findcList (first, data, lastArr, statusStyle) {
            let temp = {}
            temp.name = first.name
            temp.level = ((first.isleaf === false && lastArr.indexOf(first.id) >= 0) || first.isleaf === true) ? 'last'
                : 'parent'
            temp.isshow = true
            temp.isleaf = first.isleaf
            temp.color = first.isBindMachine === 0 && first.isleaf === true ? statusStyle[0].color : (statusStyle[first.machineStatus] !=
            undefined ? statusStyle[first.machineStatus] : statusStyle[0])
                .color
            temp.cList = []
            data.forEach(item => {
                if (item.pid === first.id) {
                    temp.cList.push(this.findcList(item, data, lastArr, statusStyle))
                }
            })
            return temp
        },
        getList () {
            // 获取列表数据
            axios.request({
                url: '/tpm/Plan/GetlistPlanstatus?mode=' + this.mode,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.statusData.list = res.data.data
                } else {
                    this.statusData.list = []
                }
            })
        },
        handleLoadData (item, callback) {
            setTimeout(() => {
                const data = [{
                    id: 1,
                    station: '',
                    machinetitle: '',
                    num: '',
                    utime: 'abc',
                    name: '',
                    status: ''
                },
                {
                    id: 2,
                    station: '',
                    machinetitle: '',
                    num: '',
                    utime: 'abc',
                    name: '',
                    status: ''
                }
                ]
                callback(data)
            }, 2000)
        },
        changeMode (val) {
            this.getStatus()
            this.getList()
            this.initEchart()
        },
        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
            })
        },
        changelevel (data) { // 切换产线层级，触发事件
            // 请求数据
            // let params = {
            //     sectionid: this.levelid,
            //     type: 1
            // }
            // this.levelid = data[data.length - 1]
            // axios.request({
            //     url: '/tools/ToolConfigV2/getProgramListByCutterLocationConfig',
            //     params,
            //     method: 'get'
            // }).then(res => {
            //     this.program_list = res.data.data
            // })
        },
        changePage (value) { // 换页事件
            this.page = value
            this.statusData.list = this.search(this.page, this.pagesize)
        },
        handleRowChange (currentRow, oldCurrentRow) { // 选中一条数据，触发事件
            this.obj = currentRow
        },
        handlePageSize (value) { // 切换分页页数，触发事件
            this.pagesize = value
            this.statusData.list = this.search(1, this.pagesize)
        },
        search (page, pagesize) { // 点击查询，触发事件
            var params = {
                sectionID: this.levelid,
                mode: this.mode
            }
            axios.request({
                url: '/tpm/Plan/GetlistPlanstatus',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.total = res.data.total
                    var arr = []
                    var vm = this
                    res.data.data.forEach(item => {
                        var obj = {}
                        obj = item
                        obj.status = vm.$t(item.status)
                        arr.push(obj)
                    })
                    this.statusData.list = arr
                    console.log(this.statusData.list)
                } else {
                    this.statusData.list = []
                }
            })
        },
        initEchart () {
            axios.request({
                url: '/tpm/Plan/GetPlanForm?mode=' + this.mode,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.statusData.chartList = res.data.data
                    let name = [],
                        total1 = [],
                        total2 = []
                    this.statusData.chartList.forEach(ele => {
                        name.push(ele.daytime)
                        total1.push(ele.total1)
                        total2.push(ele.total2)
                    })
                    this.drawChart(name, total1, total2)
                } else {
                    this.statusData.chartList = []
                }
            })
        },
        drawChart (name, total1, total2) {
            var myChart = echarts.init(document.getElementById('echart'))
            var option = {
                title: {
                    text: this.$t(800090),
                    subtext: '',
                    textStyle: {
                        fontSize: 18
                    },
                    subtextStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: [this.$t(800091), this.$t(800092)]
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {
                            show: true,
                            readOnly: false
                        },
                        magicType: {
                            show: true,
                            type: ['line', 'bar']
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                calculable: true,
                xAxis: [{
                    type: 'category',
                    data: name
                }],
                yAxis: [{
                    name: this.$t(1102),
                    type: 'value'
                }],
                series: [{
                    name: this.$t(800091),
                    type: 'bar',
                    barMaxWidth: 70,
                    data: total1
                },
                {
                    name: this.$t(800092),
                    type: 'bar',
                    barMaxWidth: 70,
                    data: total2
                }
                ]
            }
            myChart.setOption(option)
        }

    }
}
</script>
<style lang="less" scoped>
  .status_status,
  .status_tree,
  .status_list {
    clear: both;
    width: 100%;
  }

  .panel-body {
    // padding: 15px;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  .panel-body .ivu-icon {
    font-size: 24px;
  }

  .machine-status-item {
    margin: 0 20px 10px 0;
    position: relative;
    // height: 70px;
    // float: left;
    min-width: 100px;
  }

  .machine-status-icon {
    position: absolute;
    top: 0;
    display: inline-block;
    margin-right: 0 !important;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 24px;
    color: white;
  }

  .machine-status-info {
    display: inline-block;
    background: #eee;
    text-align: center;
    width: 110px;
    height: 60px;
    margin-left: 60px !important;
    padding-top: 5px;
  }

  .machine-status-count {
    font-size: 20px;
    display: block;
  }

  .machine-status-name {
    font-size: 14px;
    display: block;
  }
  .andon_info .list .machineStateList.weihustatus1{
      background-color: rgb(92, 184, 92);
  }
  .andon_info .list .machineStateList.weihustatus3{
      background-color: rgb(213, 87, 93);
  }
  .andon_info .list .machineStateList.weihustatus2{
      background-color: rgb(240, 173, 78);
  }
</style>
