<template>
  <div>
    <div class="login-container">
      <i class="login-img"/>
      <div class="loginDiv">
        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          auto-complete="on"
          label-position="left"
          tooltip-effect="dark"
          label-width="0px"
          style="margin-top: 8%">
          <h1 class="title">周报生成</h1>
          <div class="line"/>
          <div class="content">
            <el-date-picker
              v-model="value"
              type="week"
              format="yyyy 第 WW 周"
              placeholder="请选择周期"
              style="width:100%"
              @change="handleWeekChange"
            />
          </div>
        </el-form>
        <!--        // eltable 列表展示数据 并且可多选框选择行数据 根据选择的行数据生成周报-->
        <!--        {-->
        <!--        "ID": "04A487EA-5EB2-4EB2-AA62-33C7D67B1EF8",-->
        <!--        "计划开始时间": "2024-08-21 08:30",-->
        <!--        "计划完成时间": "2024-08-21 18:00",-->
        <!--        "工作内容": "写el-table表头筛选封装程序 查找对应案例，修改完善并测试无误",-->
        <!--        "实际开始时间": null,-->
        <!--        "实际完成时间": null,-->
        <!--        "人员编号": 19,-->
        <!--        "操作日期": "2024-08-23 17:25:16",-->
        <!--        "备注": "",-->
        <!--        "状态": "已完成",-->
        <!--        "父节点": "2798F277-22E7-44BB-BEA5-62BE04F23D04",-->
        <!--        "里程碑": null,-->
        <!--        "类型": "task",-->
        <!--        "当前进行": 0,-->
        <!--        "项目节点id": 6,-->
        <!--        "子项目节点id": 670-->
        <!--        },-->
        <el-table
          :data="tableData"
          :header-cell-style="{background:'#F5F5F5'}"
          style="width: 100%; border: 1px solid #9e9b9b"
          border
          height="420px"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55"/>
          <el-table-column type="index" align="center" label="序号" width="60px"/>
          <el-table-column align="left" label="项目名称" min-width="130px">
            <template slot-scope="scope">
              {{ scope.row.工作内容 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="计划开始" width="200px">
            <template slot-scope="scope">
              {{ scope.row.计划开始时间 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="计划结束" width="200px">
            <template slot-scope="scope">
              {{ scope.row.计划完成时间 }}
            </template>
          </el-table-column>
        </el-table>
        <el-button
          :loading="loading"
          class="signIn"
          type="primary"
          style="width:100%;"
          @click.native.prevent="createWeekReport">
          <span style="font-size: 20px!important;">生成选中周报</span>
        </el-button>
        <el-input v-model="weekReportText" :autosize="{minRows:10,maxRows:30}" type="textarea"/>
      </div>
    </div>
  </div>
</template>
<script>
// import { isvalidUsername } from '@/utils/validate'
import { editPassword } from '@/api/login'
import Cookie from 'js-cookie'

export default {
  name: 'Login',
  data() {
    const validateValue = (rules, value, callback) => {
      if (this.form.newPassword !== this.form.againPassword) {
        callback(new Error('两次输入密码不同'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        againPassword: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { required: true, trigger: 'blur', validator: validateValue }],
        Account: [{ required: true, message: '请输入考勤编号', trigger: 'blur' }],
        beforPassword: [{ required: true, message: '请输入原始密码', trigger: 'blur' }],
        newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }]
      },
      list: [],
      form: {
        againPassword: '',
        Account: '',
        beforPassword: '',
        newPassword: ''
      },
      dialogFormVisible: false,
      loginForm: {
        username: '',
        password: '',
        checked: false
      },
      loginRules: {
        // username: [{ required: true, trigger: 'blur', validator: validateUsername }]
        // password: [{ required: true, trigger: 'blur', validator: validatePass }]
      },
      loading: false,
      pwdType: 'password',
      temp1: {
        // 周期
        misCycle: ''
      },
      // 周期开始时间
      startDate: '',
      // 周期结束时间
      endDate: '',
      // 周期时间
      finalDate: '',
      userId: '',
      tableData: '',
      multipleSelection: [],
      weekReportText: '',
      value: ''
    }
  },
  // 页面加载调用获取cookie值
  mounted() {
    this.userId = Cookie.get('id')
    console.log(this.userId, 'userId')
    if (!this.userId) {
      this.$message.error('用户id获取为空，请重新登陆后再进入该页面！')
    }
  },
  methods: {
    createWeekReport() {
      console.log(this.multipleSelection)
      this.weekReportText = ''
      // 遍历数组 取index 与 item
      for (let i = 0; i < this.multipleSelection.length; i++) {
        const item = this.multipleSelection[i]
        this.weekReportText = this.weekReportText + (i + 1) + '.' + item.节点名称.replace(/^[\d,]*/, '') + ':' + item.工作内容 + '\n'
      }
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    changeUser() {
      this.loginForm.password = ''
    },
    handleWeekChange(value) {
      const startTime = new Date(value.getTime()) // 开始时间
      const endTime = new Date(value.getTime() + (24 * 60 * 60 * 1000) * 6) // 结束时间
      const timeArr = [startTime.toISOString().slice(0, 10), endTime.toISOString().slice(0, 10)]
      this.getTableData(timeArr)
    },
    getStartAndEndDate(weekStr) {
      const year = weekStr.match(/(\d{4})/)[0]
      const week = weekStr.match(/第 (\d{1,2}) 周/)[0].replace(/第 | 周/g, '')
      const startDate = new Date(year, 0, 1 + (week - 1) * 7)
      const endDate = new Date(startDate)
      endDate.setDate(startDate.getDate() + 6)
      return [startDate.toISOString(), endDate.toISOString()]
    },
    p(s) {
      return s < 10 ? '0' + s : s
    },
    // 时间
    setWeekNum() {
      console.log(this.temp1.misCycle)
      const newTime = this.temp1.misCycle.getTime()
      const day = this.temp1.misCycle.getDay()
      const oneDayTime = 24 * 60 * 60 * 1000
      const fromTime = newTime - day * oneDayTime
      const endTime = newTime + (7 - day) * oneDayTime
      const fromDate = new Date(fromTime)
      this.startDate = fromDate.getFullYear() + '-' + this.p((fromDate.getMonth() + 1)) + '-' + this.p(fromDate.getDate() + 1)
      const toDate = new Date(endTime)
      this.endDate = toDate.getFullYear() + '-' + this.p((toDate.getMonth() + 1)) + '-' + this.p(toDate.getDate())
      console.log(this.startDate)
      console.log(this.endDate)
      this.finalDate = this.startDate + '-' + this.endDate
      console.log(this.finalDate)

      this.getTableData()
    },
    getTableData(timeArr) {
      var param = []
      param[0] = ['开始时间', timeArr[0]]
      param[1] = ['结束时间', timeArr[1]]
      param[2] = ['UserID', this.userId]
      var Data = this.CreateData('11', '项目管理_详细内容_时间段_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.tableData = response.data
          console.log(this.tableData)
        } else {
          this.$message.warning('该周无对应数据，请确认进入页面前是否登陆!')
        }
      })
    },
    handleEdit() {
      this.addForm('form', [this.dialogFormVisible = true])
    },
    callOff() {
      this.dialogFormVisible = false
    },
    EditPassword(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // var param = []
          // param[0] = ['考勤编号', this.form.Account]
          // param[1] = ['原始密码', this.form.beforPassword]
          // param[2] = ['新密码', this.form.newPassword]
          // param[3] = ['返回', 5]
          // var Data = this.CreateData(
          //   '12',
          //   '账号信息_修改密码_MESWORK',
          //   param
          // )
          // this.ExecDatabase(Data).then(response => {
          //  console.log(response)
          // if (response.data.result[0].result === '1') {
          //   if (response.data.output[0].返回 === '1') {
          //     cloudEditPassword(this.form.Account, this.form.newPassword).then(response => {
          //       console.log(response, 333)
          //       if (response.data[0].result === '1') {
          //         this.$message.success('修改成功')
          //         this.dialogFormVisible = false
          //       } else {
          //         this.$message.error('编辑失败')
          //       }
          //     })
          //   } else {
          //     this.$message.error('用户名或密码不正确')
          //   }
          // } else {
          //   this.$message.error('编辑失败')
          // }
          // })
          editPassword(this.form.Account, this.form.beforPassword, this.form.newPassword, 5).then(response => {
            console.log(response)
            if (response.data.result[0].result === '1') {
              if (response.data.output[0].返回 === '1') {
                // cloudEditPassword(this.form.Account, this.form.newPassword).then(response => {
                console.log(response, 333)
                // if (response.data[0].result === '1') {
                this.$message.success('修改成功')
                this.dialogFormVisible = false
                // } else {
                //  this.$message.error('编辑失败')
                // }
                // })
              } else {
                this.$message.error('用户名或密码不正确')
              }
            } else {
              this.$message.error('编辑失败')
            }
          })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #192045;

  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #293444 inset !important;
    -webkit-text-fill-color: #fff !important;
  }

  .login-img {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("../../../static/login2.jpg") no-repeat;
    background-size: cover;
  }

  input {
    background: transparent;
    border: 1px;
    -webkit-appearance: none;
    border-radius: 0;
    padding: 12px 5px 12px 15px;
    color: $light_gray;
    height: 47px;
  }

  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: #f3b82d;
    font-size: 20px !important;
    vertical-align: middle;
    width: 30px;
    display: inline-block;

    &_login {
      font-size: 20px;
    }
  }

  .title {
    font-size: 22px;
    line-height: 30px;
    color: #ffffff;
    margin: 0 auto 20px auto;
    text-align: center;
    font-weight: bold;
    font-family: 微软雅黑Regular＆Bold;
  }

  .content {
    width: 330px;
    margin: 60px auto 0 auto;
  }

  .line {
    width: 60%;
    margin: 0 auto 25px auto;
    background-color: #ffffff;
    height: 1px;
  }

  .login-form {
    position: absolute;
    left: 0;
    top: 5%;
    //padding: 35px 35px 15px 35px;
    //margin: 120px auto;
  }

  .loginDiv {
    float: right;
    height: 464px;
    position: absolute;
    width: 1400px;
    margin: 0 auto;
    /*padding: 35px 35px 15px 35px;*/
    /*margin: 16% 0 0 57%;*/
    right: 10.25%;
    top: 0%;
    background-color: #00802d;
    //opacity: 0.3;
    border-radius: 10px;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .el-input__inner {
    border: none !important;
    font-size: 18px !important;
    color: #29335b !important;
  }

  .el-form-item {
    border: 1px solid #f3b82d;
    background: #ffffff;
    border-radius: 5px;
    color: #454545;
  }

  /*登录button*/
  .signIn {
    width: 100%;
    border: none;
    margin-top: 20px;
    border-radius: 5px;
    font-size: 18px;
    color: #29335b;
    background: -webkit-linear-gradient(left, #f5c44f, #9fd2ab); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #f5c44f, #9fd2ab); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #f5c44f, #9fd2ab); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #f5c44f, #9fd2ab); /* 标准的语法（必须放在最后） */
  }

  .remeberPassword {
    color: $dark_gray;
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }

  @media (min-width: 1024px) {
    /*根据屏幕大小确定显示的位置*/
    .login-form {
      position: absolute;
      left: 0;
      top: 8%;
    }
    .title {
      font-size: 32px !important;
      line-height: 32px;
    }
    .el-form-item {
      width: 300px;
      height: 48px;
    }
    .content {
      width: 300px;
    }
  }
  @media (min-width: 1281px) {
    .login-form {
      position: absolute;
      left: 0%;
      top: 8%;
    }
  }
}
</style>
<style>
.remeberPassword .el-checkbox__inner:hover {
  border: 1px solid #f3b82d;
}

.remeberPassword .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #f3b82d;
  border-color: #f3b82d;
}

.remeberPassword .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #fff;
}

.remeberPassword .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #f3b82d;
}

.login-container input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #29335b !important;
}
</style>
