<template>
  <el-container id="index" style="width:89%;height: 840px;">
    <div class="header" :style="{ height: 80 + 'px'}">
      <!-- 时间 -->
      <div class="localTime colorPink" :style="{'font-size': 20 + 'px'}">{{ '2024/03/08' }} {{ '周五' }} {{
          '11:02'
        }}
      </div>
      <!-- 标题 -->
      <span class="title font-bold colorText"
            :style="{'font-size': 24 + 'px',color:'white'}">各部门情况</span>
    </div>
    <div class="layoutHome">
      <el-row>
        <el-col :span="5" class="rg-table">
          <div class="rg-table-box" style="width:100%;height: 900px;padding: 5px;overflow-y: auto;">
            <div v-for="(item,index) in ks">
              <Template :data="data" :deptName="item" :type="'ks'" :users="totalUsers[item]"
                        :myStyle="{headImgWidth:'100%'}"/>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="rg-table-box" style="width:100%;height: 900px;padding: 5px;overflow-y: auto;">
            <div v-for="(item,index) in ks">
              <Template :data="cqData" :deptName="item" :type="'cq'" :users="cqUsers[item]||0" :myStyle="{headImgWidth:'100%'}" @initDetail="initDetail"/>
            </div>
          </div>
        </el-col>
        <el-col :span="14">
          <el-container style="padding-top: 0px">
            <el-main>
              <div class="mytable">
                <vxe-grid
                  id="id"
                  ref="xGrid"
                  border
                  resizable
                  keep-source
                  :align="'center'"
                  :height="height"
                  :auto-resize="true"
                  :columns="tableColumn"
                  :data="list"
                  :custom-config="{ storage: true }"
                  highlight-current-row
                  highlight-hover-row
                  show-overflow
                  :scroll-y="{enabled: true}"
                >
                  <template #default="{row,column}">
                    <el-progress
                      type="line"
                      define-back-color="white"
                      :show-text="false"
                      :stroke-width="15"
                      :percentage="row[column.property]"
                      :color="row.gx==='计划'?'blue':'green'"
                    ></el-progress>
                  </template>
                </vxe-grid>
              </div>
            </el-main>
          </el-container>
        </el-col>
      </el-row>
    </div>
  </el-container>
</template>

<script>
import XEUtils from 'xe-utils'
import Template from "@/views/dashboard/components/Template.vue";

export default {
  name: 'Kstj',
  components: {Template},
  data() {
    return {
      // 管理室-配送,准备室-资料接收编制计划,
      ks: ['管理室', '准备室', '1作业区', '2作业区', '3作业区', '4作业区', '5作业区', '6作业区'],
      data: {},
      cqData: {},
      totalUsers: {},
      cqUsers: {},
      height: '750px',
      list: [],
      tableColumn: [],
      '管理室': [
        {field: 'dcCh', title: '船号', minWidth: "70",},
        {field: 'dcPl', title: '批量', minWidth: "50",},
        {field: 'dcFd', title: '分段', minWidth: "50",},
        {field: 'tzbh', title: '套料图号', minWidth: "70",},
        {field: 'sl', title: '数量', minWidth: "50",},
        {field: 'start', title: '接收时间', minWidth: "90",},
        {field: 'end', title: '回报时间', minWidth: "90",},
      ],
      '准备室': [
        {field: 'dcCh', title: '船号', minWidth: "70",},
        {field: 'dcPl', title: '批量', minWidth: "50",},
        {field: 'dcFd', title: '分段', minWidth: "50",},
        {field: 'tzbh', title: '套料图号', minWidth: "70",},
        {field: 'sl', title: '数量', minWidth: "50",},
        {field: 'start', title: '接收时间', minWidth: "90",},
        {field: 'end', title: '回报时间', minWidth: "90",},
      ],
      '作业区': [
        {field: 'dcCh', title: '船号', minWidth: "70",},
        {field: 'dcPl', title: '批量', minWidth: "50",},
        {field: 'dcFd', title: '分段', minWidth: "50",},
        {field: 'sbbh', title: '加工设备', minWidth: "50",},
        {field: 'gx', title: '工序', minWidth: "50",},
        {field: 'sl', title: '数量', minWidth: "50",},
        {field: 'start', title: '接收时间', minWidth: "110",},
        {field: 'end', title: '回报时间', minWidth: "110",},
      ],
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initDetail(item){
      this.tableColumn=this[item.ks]
      if (item.ks.indexOf('作业区')>-1){
        this.tableColumn=this['作业区']
      }
      this.loadData(item)
    },
    loadData(item){
      const list=[]
      const num=XEUtils.random(0,100)
      for (let i = 0; i < num; i++) {
        const data={
          dcCh:'TK110-4',
          dcPl:'096',
          dcFd:'9202',
          gx:'切割',
          sl:'3',
          sbbh:'龙门1',
          tzbh:'B001S2TX001',
          start:XEUtils.toDateString(new Date(),'yyyy/MM/dd HH:mm'),
          end:XEUtils.toDateString(new Date(),'yyyy/MM/dd HH:mm'),
        }
        list.push(data)
      }
      this.list=list
    },
    initData(){
      let i =0
      for (const item of this.ks) {
        if (!this.data[item]){
          this.data[item]=[]
        }
        if (!this.cqData[item]){
          this.cqData[item]=[]
        }
        if (!this.cqUsers[item]){
          this.cqUsers[item]=0
        }
        let totalUser=XEUtils.random(1,10)
        this.totalUsers[item]=totalUser
        if ('准备室'===item){
          totalUser=1
          this.totalUsers[item]=totalUser
        }
        for (let j = 0; j < totalUser; j++) {
          ++i
          const cq=XEUtils.random(0, 1);
          const data={
            ks:item,
            yhdm:'李'+j,
            name:'李'+j,
            headImage:'static/img/btn_hr.e600324c.jpg',
            gzl:XEUtils.random(0, 100),
            cq:cq
          }
          if (cq){
            this.cqUsers[item]+=1
            this.cqData[item].push(data)
          }else {
            this.data[item].push(data)
          }
        }
      }
    }
  }
}
</script>

<style scoped>
#index {
  color: darkturquoise;
  width: 100%;
  height: 100%;
  background: url("../../assets/bg3.png") left top no-repeat;
  background-size: 100% 100%;
  position: fixed;
  overflow: hidden;
}

.layoutHome {
  position: absolute;
  top: 7.7%;
  width: 100%;
  height: 100%;
}

.header {
  position: relative;
  top: 0.5vw;
  width: 100%;
  background: url("../../assets/title.png") no-repeat;
  background-size: 100%;
  text-align: center;
  margin: 0;
}

.title {
  position: absolute;
  left: 43%;
  margin-top: 0.4%;
  font-weight: bold;
}

.localTime {
  position: absolute;
  right: 1%;
  top: 35%;
}

.rg-table-box::-webkit-scrollbar {
  /*整体样式*/
  width: 0;
}

.rg-table-box::-webkit-scrollbar-track {
  /*轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;
}
.rg-table-box::-webkit-scrollbar-thumb {
  /*滚动条小方块*/
  border-radius: 10px;
  background-color: #2e75d3;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
</style>
