<template>
  <div class="app-container" style="padding-top: 10px">
    <el-form ref="query" size="small" :inline="true">
      <el-form-item label="年度：">
        <el-date-picker
          v-model="dateRange"
          style="width: 150px"
          type="year"
          placeholder="选择年"
          :clearable="false"
          format="yyyy 年"
          value-format="yyyy"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div style="text-align: right; margin-bottom: 10px">
      <el-button type="primary" @click="handleResetPwd" v-if="isDisplay"
        >邮件通知</el-button
      >
      <el-button type="primary" @click="dialogVisible = true" v-if="isDisplay">创 建</el-button>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%"
      border
      height="calc(100% - 150px)"
    >
      <el-table-column label="序号" align="center" width="80">
        <template slot-scope="scope">
          <span>{{
            scope.$index + 1 + (queryParams.pageNum - 1) * queryParams.pageSize
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <div
            v-for="(item, index) in scope.row.children"
            :key="index"
            class="border_box"
          >
            {{ initType(item.dutyType) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="分值" align="center">
        <template slot-scope="scope">
          <div
            v-for="(item, index) in scope.row.children"
            :key="index"
            class="border_box"
          >
            {{ item.scoreWeight }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{
            scope.row.status
              ? scope.row.status === 1
                ? '进行中'
                : '已完成'
              : '--'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="评分时间" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{
            scope.row.startTime ? formatTime(scope.row.startTime) : '--'
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="look(scope.row)"
            >查看</el-button
          >
          <el-button type="text" size="small" @click="edit(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
      title="新建"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="700px"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :before-close="cancle"
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :inline="true">
        <el-form-item label="评分开始时间：" prop="createTime">
          <el-date-picker
            v-model="ruleForm.createTime"
            type="year"
            placeholder="选择年"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="submit">生 成</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  postAssessmentRatingOtherList,
  batchAddRatingOther,
  sendMailFile,
  approveTypeUserList1
} from '@/api/allApi/index.js'
import { getInfo } from '@/api/login'

import IsEditDialog from './isEditDialog.vue'
import moment from 'moment'

export default {
  name: 'PostCheckWebIndex',
  components: {
    IsEditDialog
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: 1
      },
      dateRange: '',
      total: 0,
      loading: false,
      dialogVisible: false,
      ruleForm: {
        createTime: '',
        startTime: ''
      },
      tableData: [],
      rules: {
        createTime: [
          {
            required: true,
            message: '请选择评分开始时间',
            trigger: 'change'
          }
        ]
      },
      emailQuery: {
        content: '',
        serviceId: '998',
        serviceType: 'assessment_rating_other_1'
      },
      userId: '',
      isDisplay: false
    }
  },

  mounted() {
    this.initYear()
    if (this.$route.query.type) {
      this.queryParams.type = Number(this.$route.query.type)
    }
    this.getList()
    this.initGetuserInfo()
  },

  methods: {
    initYear() {
      let _now = new Date()
      let currentYear = _now.getFullYear()
      this.dateRange = `${currentYear}`
    },
    /** 查询岗位列表 */
    getList() {
      this.loading = true
      const dateRange = [`${this.dateRange}-01-01`, `${this.dateRange}-12-31`]
      postAssessmentRatingOtherList(
        this.addDateRange(this.queryParams, dateRange)
      ).then((response) => {
        this.tableData = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    async initApproveTypeUserList() {
      const res = await approveTypeUserList1()
      if (res.code !== 200) return this.$message.error(res.msg)
      this.isDisplay = res.data.some((item) => item === this.userId)
    },
    async initGetuserInfo() {
      getInfo().then((res) => {
        console.log(res, 99999)
        this.userId = res.user.userId
        this.initApproveTypeUserList()
      })
    },
    initTime(val) {
      let date = new Date(val)
      let new_year = date.getFullYear() // 取当前的年份
      let month = date.getMonth()
      let new_month = month + 1 // 取当前的月份
      let mon = ''
      let day = 0
      if (month > 12) {
        new_month -= 12 // 月份减
        new_year++ // 年份增
      }
      let firstDay = new Date(new_year, new_month, 1) // 取当年当月中的第一天
      let lastDay = new Date(firstDay.getTime() - 1000 * 60 * 60 * 24).getDate() // 获取当月最后一天日期
      if (firstDay.getMonth() < 10) {
        mon = '0' + firstDay.getMonth()
      } else {
        mon = firstDay.getMonth()
      }
      if (lastDay < 10) {
        day = '0' + lastDay
      } else {
        day = lastDay
      }
      this.dateRange = [
        firstDay.getFullYear() +
          '-' +
          mon +
          '-' +
          '0' +
          firstDay.getDate() +
          '\xa0' +
          '00:00:00',
        firstDay.getFullYear() + '-' + mon + '-' + day + '\xa0' + '23:59:59'
      ]
      return [
        firstDay.getFullYear() +
          '-' +
          mon +
          '-' +
          '0' +
          firstDay.getDate() +
          '\xa0' +
          '00:00:00',
        firstDay.getFullYear() + '-' + mon + '-' + day + '\xa0' + '23:59:59'
      ]
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.initYear()
      this.handleQuery()
    },
    changeType(type) {
      this.queryParams.type = type
      this.getList()
    },
    cancle() {
      this.ruleForm.createTime = ''
      this.$refs.ruleForm.resetFields()
      this.dialogVisible = false
    },
    formatTime(time) {
      return moment(time).format('YYYY-MM-DD')
    },
    initType(val) {
      switch (val) {
        case 1:
          return '工作态度'
        case 2:
          return '部门协作'
        case 3:
          return '廉洁从业'
        case 4:
          return '主要工作完成情况'
      }
    },
    // 查看
    look(row) {
      if (this.queryParams.type === 1) {
        this.$router.push(
          `/examineCompetition/assessmentEditOrLook?id=${row.id}&type=1`
        )
      } else {
        this.$router.push(
          `/examineCompetition/produceScore?id=${row.id}&type=1`
        )
      }
    },
    // 编辑
    edit(row) {
      if (this.queryParams.type === 1) {
        this.$router.push(
          `/examineCompetition/assessmentEditOrLook?id=${row.id}&type=2`
        )
      } else {
        this.$router.push(
          `/examineCompetition/produceScore?id=${row.id}&type=2`
        )
      }
    },
    handleResetPwd() {
      this.$confirm('确认给职能部门发邮件吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await sendMailFile(this.emailQuery)
          if (res.code !== 200) return this.message.error(res.msg)
          this.$message({
            type: 'success',
            message: '发送成功!'
          })
          this.getList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消发送'
          })
        })
    },
    submit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.ruleForm.type = this.queryParams.type
          this.ruleForm.startTime = this.formatTime(this.ruleForm.createTime)
          delete this.ruleForm.createTime
          const res = await batchAddRatingOther(this.ruleForm)
          this.ruleForm = {
            createTime: '',
            startTime: ''
          }
          if (res.code !== 200) return this.$message.error(res.msg)
          this.dialogVisible = false
          this.getList()
          this.$message.success('生成成功!')
        } else {
          this.ruleForm = {
            createTime: '',
            startTime: ''
          }
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tab_box {
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 15px;
  padding-bottom: 10px;

  span {
    margin-right: 20px;
    font-weight: 700;
    cursor: pointer;
  }

  .active {
    padding-bottom: 10px;
    border-bottom: 3px solid #1890ff;
  }
}

::v-deep .el-table--medium .el-table__cell {
  padding: 0;
}

::v-deep .el-table td.el-table__cell div {
  padding-left: 0;
  padding-right: 0;
}
::v-deep .el-table .cell.el-tooltip {
  padding: 0;
}

.border_box {
  padding: 5px 0;
  margin: 0;
  box-sizing: border-box;
  border-bottom: 1px solid #dfe6ec;
}
</style>