<template>
  <div class="container" :style="{ width: `${style.width}px`, height: `${style.height}px`, transform: `${style.transform}` }">
    <div class="content">
      <div class="c-left">
        <div class="left-header">
          <div>
            <img :src="titlePng" alt="logo" />
          </div>
        </div>
      </div>
      <div class="c-center">
        <div class="center-header">后悬装配线智慧系统</div>
      </div>
      <div class="c-right">
        <div class="right">
          <div class="right-head">
            <span>{{ time }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="content_main">
      <div class="content_main_calendar">
        <dv-border-box-12 class="items">
          <div style="margin: 5px 0 5px 10px">
            <span style="width: 20px;height: 10px;background: #016ce9;display: inline-block;"></span>
            <span style="color: #fff"> 联络技能</span>
          </div>
          <el-row style="margin: 20px 40px 0px 0px;color: #000000">
            <div style="display: flex;flex-wrap: wrap;height: 150px">
              <div v-for="(item, index) in ContactSkills1" :key="'ContactSkills1' + index" class="opStatus_all" style="height: 140px">
                <div style="margin: 5px auto;border-radius: 5px;text-align: center;width: 130px;padding: 3px 8px">{{item.职位}}</div>
                <div class="opStatus_single">
                  <span>姓名：</span>
                  <div class="opStatus_single_value">{{item.姓名}}</div>
                </div>
                <div class="opStatus_single">
                  <span>电话：</span>
                  <div class="opStatus_single_value">{{item.联系方式}}</div>
                </div>
                <div v-if="item.展示技能 === 1" class="opStatus_single">
                  <span>技能：</span>
                  <div class="opStatus_single_value">
                    <el-rate v-model="item.职位分数" :max="4" :disabled="true"></el-rate>
                  </div>
                </div>
                <div class="opStatus_single" style="justify-content: center;margin: 0">
                  <el-button v-if="item.姓名id === 0" size="mini" type="warning" @click="login(item)">登录</el-button>
                  <el-button v-else size="mini" type="success" @click="login_off(item)">登出</el-button>
                </div>
              </div>
            </div>
            <div style="display: flex;flex-wrap: wrap;height: 330px">
              <div v-for="(item, index) in ContactSkills2" :key="'ContactSkills2' + index" class="opStatus_all">
                <div style="margin: 5px auto;border-radius: 5px;text-align: center;width: 130px;padding: 3px 8px">{{item.职位}}</div>
                <div class="opStatus_single">
                  <span>姓名：</span>
                  <div class="opStatus_single_value">{{item.姓名}}</div>
                </div>
                <div class="opStatus_single">
                  <span>电话：</span>
                  <div class="opStatus_single_value">{{item.联系方式}}</div>
                </div>
                <div v-if="item.展示技能 === 1" class="opStatus_single">
                  <span>技能：</span>
                  <div class="opStatus_single_value">
                    <el-rate v-model="item.职位分数" :max="4" :disabled="true"></el-rate>
                  </div>
                </div>
                <div class="opStatus_single" style="justify-content: center;margin: 0">
                  <el-button v-if="item.姓名id === 0" size="mini" type="warning" @click="login(item)">登录</el-button>
                  <el-button v-else size="mini" type="success" @click="login_off(item)">登出</el-button>
                </div>
              </div>
            </div>
          </el-row>
          <el-row>
            <el-table
                ref="multipleTable"
                :data="tableData"
                :header-cell-style="{background:'#000d3a',color:'#ffffff',fontSize: '18px'}"
                element-loading-text="数据加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.2)"
                class="main"
                tooltip-effect="dark"
                height="360px"
                style="width: 100%;margin-top: 5px"
                border
                size="mini"
                @row-click="rowClick">
              <el-table-column align="center" type="index" label="序号" width="70px" />
              <el-table-column align="center" label="姓名">
                <template slot-scope="scope">
                  {{ scope.row.姓名 }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="前悬OP10" width="120px">
                <template slot-scope="scope">
                  <el-rate v-model="scope.row.前悬OP10" :max="4" @change="changeRate(scope.row, scope.column)"></el-rate>
                </template>
              </el-table-column>
              <el-table-column align="center" label="前悬OP20" width="120px">
                <template slot-scope="scope">
                  <el-rate v-model="scope.row.前悬OP20" :max="4" @change="changeRate(scope.row, scope.column)"></el-rate>
                </template>
              </el-table-column>
              <el-table-column align="center" label="后悬OP20" width="120px">
                <template slot-scope="scope">
                  <el-rate v-model="scope.row.后悬OP20" :max="4" @change="changeRate(scope.row, scope.column)"></el-rate>
                </template>
              </el-table-column>
              <el-table-column align="center" label="后悬OP30" width="120px">
                <template slot-scope="scope">
                  <el-rate v-model="scope.row.后悬OP30" :max="4" @change="changeRate(scope.row, scope.column)"></el-rate>
                </template>
              </el-table-column>
              <el-table-column align="center" label="后悬OP40" width="120px">
                <template slot-scope="scope">
                  <el-rate v-model="scope.row.后悬OP40" :max="4" @change="changeRate(scope.row, scope.column)"></el-rate>
                </template>
              </el-table-column>
              <el-table-column align="center" label="后悬OP50" width="120px">
                <template slot-scope="scope">
                  <el-rate v-model="scope.row.后悬OP50" :max="4" @change="changeRate(scope.row, scope.column)"></el-rate>
                </template>
              </el-table-column>
              <el-table-column align="center" label="后悬OP60A" width="120px">
                <template slot-scope="scope">
                  <el-rate v-model="scope.row.后悬OP60A" :max="4" @change="changeRate(scope.row, scope.column)"></el-rate>
                </template>
              </el-table-column>
              <el-table-column align="center" label="后悬OP60B" width="120px">
                <template slot-scope="scope">
                  <el-rate v-model="scope.row.后悬OP60B" :max="4" @change="changeRate(scope.row, scope.column)"></el-rate>
                </template>
              </el-table-column>
              <el-table-column align="center" label="后悬OP70" width="120px">
                <template slot-scope="scope">
                  <el-rate v-model="scope.row.后悬OP70" :max="4" @change="changeRate(scope.row, scope.column)"></el-rate>
                </template>
              </el-table-column>
              <el-table-column align="center" label="后悬OP80" width="120px">
                <template slot-scope="scope">
                  <el-rate v-model="scope.row.后悬OP80" :max="4" @change="changeRate(scope.row, scope.column)"></el-rate>
                </template>
              </el-table-column>
              <el-table-column align="center" label="后悬OP90" width="120px">
                <template slot-scope="scope">
                  <el-rate v-model="scope.row.后悬OP90" :max="4" @change="changeRate(scope.row, scope.column)"></el-rate>
                </template>
              </el-table-column>
              <el-table-column align="center" label="后悬OP100" width="120px">
                <template slot-scope="scope">
                  <el-rate v-model="scope.row.后悬OP100" :max="4" @change="changeRate(scope.row, scope.column)"></el-rate>
                </template>
              </el-table-column>
              <el-table-column align="center" label="四轮" width="120px">
                <template slot-scope="scope">
                  <el-rate v-model="scope.row.四轮" :max="4" @change="changeRate(scope.row, scope.column)"></el-rate>
                </template>
              </el-table-column>
              <el-table-column align="center" label="后悬返修" width="120px">
                <template slot-scope="scope">
                  <el-rate v-model="scope.row.后悬返修" :max="4" @change="changeRate(scope.row, scope.column)"></el-rate>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-button type="primary" size="mini" style="position: absolute;left: 45px;bottom:-3px" @click="routeJump('')">返回主页</el-button>
        </dv-border-box-12>
      </div>
    </div>
    <el-dialog :visible.sync="dialogFormVisible_login" :append-to-body="true" title="登录" center style="min-height: 200px;" width="400px">
      <el-form ref="form_login" :model="form_login" :rules="rules_login" label-position="right" label-width="110px">
        <el-form-item label="姓名" prop="姓名" style="display: inline-block">
          <el-input
              v-model="form_login.姓名"
              clearable
              size="small"
              placeholder="请输入姓名"/>
        </el-form-item>
        <el-form-item label="密码" prop="密码" style="display: inline-block">
          <el-input
              v-model="form_login.密码"
              clearable
              size="small"
              placeholder="请输入检查项"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="login_cancel('form_login')">取消</el-button>
        <el-button type="primary" size="small" @click="login_sure('form_login')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios'

export default {
  data() {
    return {
      form_login: {
        职位id: '',
        职位: '',
        姓名: '',
        密码: ''
      },
      rules_login: {
        姓名: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        密码: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      dialogFormVisible_login: false,
      titlePng: '',
      titlePng1: '',
      timer: '',
      timer1: '',
      time: 'time',
      ContactSkills1: [],
      ContactSkills2: [],
      tableData: [],
      style: {
        width: '1920',
        height: '1080',
        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
      }
    }
  },

  created() {
  },
  mounted() {
    const that = this
    // 定时器部分
    this.timer = setInterval(() => {
      this.time = this.getNowTime()
    }, 1000)
    // 页面自适应大小部分
    that.setScale()
    window.addEventListener('resize', () => {
      that.setScale()
    })

    this.getLogo()

    // 数据库读取部分
    this.getMainPlanCountInfoData()
    this.getMainPlanCountInfoData1()

    this.timer = setInterval(() => {
      this.getMainPlanCountInfoData()
      this.getMainPlanCountInfoData1()
    }, 3000)
    this.timer1 = setInterval(() => {
    }, 3000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
    clearInterval(this.timer1)
  },
  methods: {
    changeRate(row, column) {
      var param = []
      let score = row[column.label]
      const score1 = row[column.label + '_old']
      if (score === score1) score = 0
      param[0] = ['姓名id', row.id]
      param[1] = ['工位', column.label]
      param[2] = ['分数', score]
      var Data = this.CreateData('12', 'TV_联络技能_修改技能分数_HX', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '修改成功！',
            type: 'success'
          })
          this.getMainPlanCountInfoData()
          this.getMainPlanCountInfoData1()
        } else {
          this.$message.error('修改失败！')
        }
      })
    },
    login(row) {
      this.form_login.职位id = row.ID
      this.form_login.职位 = row.职位
      this.dialogFormVisible_login = true
    },
    login_sure(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['职位ID', this.form_login.职位id]
          param[1] = ['账号', this.form_login.姓名]
          param[2] = ['密码', this.form_login.密码]
          var Data = this.CreateData('11', 'TV_联络技能_登录_HX', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === 1) {
              this.$message({
                message: response.data[0].msg,
                type: 'success'
              })
              this.dialogFormVisible_login = false
              this.getMainPlanCountInfoData()
            } else {
              this.$message.error(response.data[0].msg)
            }
          })
        } else {
          return false
        }
      })
    },
    login_cancel(formName) {
      this.dialogFormVisible_login = false
      this.$refs[formName].resetFields()
    },
    login_off(row) {
      var param = []
      param[0] = ['ID', row.ID]
      var Data = this.CreateData('12', 'TV_联络技能_退出_HX', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '退出成功！',
            type: 'success'
          })
          this.dialogFormVisible_login = false
          this.getMainPlanCountInfoData()
        } else {
          this.$message.error('退出失败！')
        }
      })
    },
    rowClick(row) {},
    zeroFill(i) {
      if (i >= 0 && i <= 9) {
        return '0' + i
      } else {
        return i
      }
    },
    getNowTime() {
      const date = new Date()
      const month = this.zeroFill(date.getMonth() + 1)
      const day = this.zeroFill(date.getDate())
      const hour = this.zeroFill(date.getHours())
      const minute = this.zeroFill(date.getMinutes())
      const second = this.zeroFill(date.getSeconds())
      return (
        date.getFullYear() +
          '-' +
          month +
          '-' +
          day +
          ' ' +
          hour +
          ':' +
          minute +
          ':' +
          second
      )
    },
    getScale() {
      const w = window.innerWidth / this.style.width
      const h = window.innerHeight / this.style.height
      return { x: w, y: h }
    },
    setScale() {
      const scale = this.getScale()
      this.style.transform = 'scaleY(' + scale.y + ') scaleX(' + scale.x + ') translate(-50%, -50%)'
    },
    getMainPlanCountInfoData() {
      const data = this.CreateData1('11', 'TV_联络技能_查询_HX')
      this.ExecDatabase(data).then((res) => {
        if (res.data.length > 0) {
          this.ContactSkills1 = res.data.filter((item) => { return item.展示技能 === 0 })
          this.ContactSkills2 = res.data.filter((item) => { return item.展示技能 === 1 })
          this.ContactSkills2.forEach((item) => {
            if (item['姓名id'] !== 0) {
              const zhiwei = item['职位']
              item['职位分数'] = parseInt(item[zhiwei])
            } else {
              item['职位分数'] = 0
            }
          })
        }
      })
    },
    getMainPlanCountInfoData1() {
      const data = this.CreateData1('11', 'TV_联络技能_查询人员_HX')
      this.ExecDatabase(data).then((res) => {
        if (res.data.length > 0) {
          this.tableData = res.data
        }
      })
    },
    routeJump(val, state) {
      if (val.indexOf('/') !== -1) {
        val = val.substring(1)
      }
      this.$router.push({
        path: '/'
      })
      this.$router.go(0)
    },
    getLogo() {
      axios.get('../../logo.png', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
      axios.get('../../十字图片.jpg', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng1 = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
    }
  },
  computed: {},
  watch: {},
  props: {},
  directives: {
    scroll: {
      bind(
        el,
        {
          value: { delay, speed } = {
            delay: 0,
            speed: 50
          }
        }
      ) {
        //  delay 延迟  //speed滚动速度
        // 数据少不滚动
        // 无缝滚动
        let scrollInterval
        setTimeout(() => {
          scrollInterval = setInterval(goScroll, speed)
        }, delay)
        el.addEventListener('mouseenter', () => {
          clearInterval(scrollInterval)
        })
        el.addEventListener('mouseleave', () => {
          scrollInterval = setInterval(goScroll, speed)
        })

        function goScroll() {
          const scrollTotalHeight = JSON.parse(JSON.stringify(el.scrollTop))
          el.scrollTop++
          if (scrollTotalHeight === el.scrollTop) {
            el.scrollTop = 0
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
  background-color: #000d3a;
  color: white;

  .content {
    width: 100%;
    height: 6%;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 5px 0 20px 0;
    border-bottom: 2px solid #3d4a61;
    .c-left {
      width: 25%;
      background-color: #000d3a;
      .left-header {
        background-color: #000d3a;
        display: flex;
        align-items: center;
        margin-top: 20px;
        img {
          margin-left: 50px;
          height: 50px;
        }
        span {
          font-size: 3.5rem;
          margin-left: 1rem;
        }
      }
    }

    .c-center {
      width: 50%;
      background-color: #000d3a;
      box-sizing: border-box;
      .center-header {
        background-color: #000d3a;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50px;
        font-weight: bold;
        letter-spacing: 15px;
      }
    }

    .c-right {
      width: 25%;
      background-color: #000d3a;
      .right-header {
        background-color: #000d3a;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 4rem;
      }
    }
  }
}
.right {
  width: 100%;
  height: 100%;
  background-color: #000d3a;
  padding-left: 1.5%;
  box-sizing: border-box;
  .right-head {
    height: 8%;
    display: flex;
    justify-content: flex-end;
    span {
      margin: 36px 25px 25px 25px;
      font-weight: 700;
      font-size: 35px;
      color: #fff;
    }
  }

  .main {
    height: 90%;
    .top {
      width: 100%;
      height: 35%;

      .cook-list {
        width: 100%;
        height: 80%;
        display: flex;
        flex-wrap: wrap;
      }
      .spot-check {
        span {
          font-size: 1rem;
        }
      }
    }

    .center {
      width: 100%;
      height: 35%;

      .center-main {
        width: 100%;
        height: 90%;
        .center-left {
          height: 100%;
          .left-top {
            height: 50%;
            display: flex;

            div {
              width: 33.33%;
              height: 100%;
            }
          }
          .left-bottom {
            height: 50%;
          }
        }

        .center-right {
          width: 40%;
          height: 100%;
          > span {
            color: #fff;
          }

          ::v-deep .row-item {
            .ceil {
              padding: 0;
            }
          }
        }
      }
      .year-plan {
        span {
          font-size: 1rem;
        }
      }
    }

    .bottom {
      width: 100%;
      height: 33%;
      .bottom-top {
        display: flex;
        width: 100%;
        height: 45%;
        .andong-left {
          width: 60%;
          height: 100%;
          > span {
            color: #fff;
          }

          .analyse {
            width: 100%;
            height: 90%;
          }
        }

        .andong-right {
          width: 40%;
          height: 100%;
          > span {
            color: #fff;
          }

          .call {
            width: 100%;
            height: 90%;
          }
        }
      }
      .bottom-bottom {
        width: 100%;
        height: 44.5%;

        ::v-deep .header-item {
          font-size: 6px;
          padding: 0;
        }
        ::v-deep .row-item {
          font-size: 4px;
          padding: 0;
          .ceil {
            padding: 0;
          }
        }
      }
    }
  }
}
.content_main {
  .content_main_calendar {
    margin: 20px 20px;
    .items {
      height: 940px;
      padding: 1rem;
      box-sizing: border-box;
      .item-head {
        height: 10rem;
        display: grid;
        grid-template-columns: repeat(3, 33.3%);
        grid-template-rows: repeat(2, 50%);
        justify-items: center;
        align-content: center;
        box-sizing: border-box;
        padding-bottom: 1rem;

        background: linear-gradient(90deg, #043079 50%, transparent 0)
        repeat-x,
        linear-gradient(90deg, #043079 50%, transparent 0) repeat-x,
        linear-gradient(0deg, #043079 50%, transparent 0) repeat-y,
        linear-gradient(0deg, #043079 50%, transparent 0) repeat-y;
        background-size: 0px 10px, 20px 10px, 10px 0px, 10px 0px;
        background-position: 0 0, 0 100%, 0 0, 100% 0;

        animation: linearGradientMove 0.3s infinite linear;
      }
      .opStatus_all {
        background-color: #a9dbff;
        border-radius: 10px;
        font-size: 16px;
        border: 1px solid #a9dbff;
        width: 210px ;
        height: 160px;
        margin-left: 45px;
        margin-bottom: 5px;
      }
      .opStatus_single {
        display: flex;
        justify-content: flex-start;
        margin: 5px 0 10px 10px;
      }
      .opStatus_single_value {
        width: 130px;
        background-color: #aaaaaa;
        text-align: left;
        padding: 0 3px;
        color: #000d3a;
        border-radius: 3px;
      }
      @keyframes linearGradientMove {
        100% {
          background-position: -20px 0, 20px 100%, 0 20px, 100% -20px;
        }
      }

      .item-content {
        box-sizing: border-box;
        margin-top: 50px;
        box-sizing: border-box;

        .bg {
          width: 100%;
          height: 100%;
          background-size: 100% 100%;
        }

        .btns {
          position: absolute;
          margin-left: 1rem;
          z-index: 999;

          div {
            border: 2px solid #244d71;
            background-color: #000d3a;
            color: #ffffff;
            padding: 0.5rem 2rem;
            margin: 0.5rem 0;
            font-size: 1.2rem;
          }
        }
      }

      .item-head > div {
        display: flex;
        align-items: center;
        width: 15rem;

        img {
          height: 4.5rem;
          width: 4.5rem;
          object-fit: cover;
        }

        .data {
          display: flex;
          flex-direction: column;

          .data-value {
            font-size: 1.5rem;
            font-weight: bold;
          }
        }
      }
    }
  }
}
::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}
::v-deep .el-table td, .el-table th.is-leaf {
  border: 1px solid #7b8eb4;
  font-size: 16px;
}
::v-deep.el-table tbody tr:hover > td {
  background-color: transparent !important
}
::v-deep .el-table tr {
  background-color: transparent !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  color: rgb(255, 255, 255) !important;
}
::v-deep .el-table td, .el-table th {
  padding: 8px 0 !important;
}
</style>
