<template>
  <!-- 评价中心 -->
  <div class="assessmentCentent whiteBlock">
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
      style="padding: 0 15px"
    >
      <el-tab-pane
        :label="$t('message.laborMange.rewardsRecord')"
        name="rewards"
      >
        <div class="rewards_wrap">
          <el-form
            :inline="true"
            size="medium"
            :model="seekForm"
            class="demo-form-inline"
          >
            <el-form-item>
              <el-input
                v-model="seekForm.searchName"
                :placeholder="$t('message.laborMange.eventOrName')"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button v-permission="{key: 'query', moduleName: '评价中心'}" type="primary" @click="onSubmit" plain>{{
                $t('message.laborMange.inquire')
              }}</el-button>
              <el-button v-permission="{key: 'pjzx_add_jl', moduleName: '评价中心'}" type="primary" @click="addInfoBtn" plain>{{
                $t('message.laborMange.newRewardInfo')
              }}</el-button>
            </el-form-item>
          </el-form>
          <el-table class="tables" :data="tableList">
            <el-table-column
              prop="eventTime"
              :label="$t('message.laborMange.occurrenceTime')"
            ></el-table-column>
            <el-table-column
              prop="workerName"
              :label="$t('message.laborMange.incentiveCrew')"
            ></el-table-column>
            <el-table-column
              prop="eventTitle"
              :label="$t('message.laborMange.eventReason')"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.eventTitle }}</div>
                <div>{{ scope.row.reason }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="awardName"
              :label="$t('message.laborMange.awards')"
            ></el-table-column>
            <el-table-column
              prop="remarks"
              :label="$t('message.laborMange.remark')"
            ></el-table-column>
            <el-table-column
              prop="fileUrl"
              :label="$t('message.laborMange.accessory')"
            >
              <template slot-scope="scope">
                <div
                  v-if="scope.row.fileUrl"
                  v-for="(item, index) in scope.row.fileList"
                  :key="index"
                >
                  <img
                    @click="showImg(fileUrl + item.url)"
                    :src="fileUrl + item.url"
                    style="height: 40px; width: 45px"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column label="">
              <template slot-scope="scope">
                <div class="tableBtns">
                  <el-button
                    type="text"
                    class="operationText"
                    @click="detailInfoBtn(scope.row)"
                    >{{ $t('message.laborMange.details') }}</el-button
                  >
                  <div class="operationText" @click="editInfoBtn(scope.row)">
                    <img
                      src="@/assets/images/icon-edit.png"
                      width="15px"
                      height="15px"
                    />
                    <span>{{ $t('message.laborMange.edit') }}</span>
                  </div>
                  <div class="operationText" @click="deleteInfoBtn(scope.row)">
                    <img
                      src="@/assets/images/icon-delete.png"
                      width="15px"
                      height="15px"
                    />
                    <span>{{ $t('message.laborMange.delete') }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="pagerBox"
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page="pagInfo.pageNo"
            :page-sizes="$store.state.PAGESIZRS"
            :page-size="pagInfo.pageSize"
            layout="total, sizes, prev, pager, next"
            :total="Number(pagInfo.total)"
            background
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('message.laborMange.badRecord')" name="badness">
        <div class="badness_wrap">
          <el-form
            :inline="true"
            size="medium"
            :model="seekForm"
            class="demo-form-inline"
          >
            <el-form-item>
              <el-select
                v-model="seriousGrade"
                :placeholder="$t('message.laborMange.pleaseChoose')"
              >
                <el-option :label="$t('message.laborMange.allDegree')" value="">
                </el-option>
                <el-option
                  :label="$t('message.laborMange.notSerious')"
                  :value="1"
                >
                </el-option>
                <el-option
                  :label="$t('message.laborMange.seriousness')"
                  :value="2"
                >
                </el-option>
                <el-option
                  :label="$t('message.laborMange.verySerious')"
                  :value="3"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="seekForm.searchName"
                :placeholder="$t('message.laborMange.eventOrName')"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button v-permission="{key: 'query', moduleName: '评价中心'}" type="primary" @click="onSubmit" plain>{{
                $t('message.laborMange.inquire')
              }}</el-button>
              <el-button v-permission="{key: 'pjzx_add_blp', moduleName: '评价中心'}" type="primary" @click="addInfoBtn" plain>{{
                $t('message.laborMange.add') +
                $t('message.laborMange.badRecord')
              }}</el-button>
            </el-form-item>
          </el-form>
          <el-table class="tables" :data="tableList">
            <el-table-column
              prop="eventTime"
              :label="$t('message.laborMange.occurrenceTime')"
            ></el-table-column>
            <el-table-column
              prop="workerName"
              :label="$t('message.laborMange.personnelInvolved')"
            ></el-table-column>
            <el-table-column
              prop="eventTitle"
              :label="$t('message.laborMange.eventReason')"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.eventTitle }}</div>
                <div>{{ scope.row.reason }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="endTime"
              :label="$t('message.laborMange.orderOfSeverity')"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.seriousGrade == 1
                    ? $t('message.laborMange.notSerious')
                    : scope.row.seriousGrade == 2
                    ? $t('message.laborMange.seriousness')
                    : $t('message.laborMange.verySerious')
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="remarks"
              :label="$t('message.laborMange.remark')"
            ></el-table-column>
            <el-table-column
              prop="fileUrl"
              :label="$t('message.laborMange.accessory')"
            >
              <template slot-scope="scope">
                <div
                  v-if="scope.row.fileUrl"
                  v-for="(item, index) in scope.row.fileList"
                  :key="index"
                >
                  <!--                  <div>{{fileUrl + item.url}}</div>-->
                  <img
                    @click="showImg(fileUrl + item.url)"
                    :src="fileUrl + item.url"
                    style="height: 40px; width: 45px"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column label="">
              <template slot-scope="scope">
                <div class="tableBtns">
                  <el-button
                    type="text"
                    class="operationText"
                    @click="detailInfoBtn(scope.row)"
                    >{{ $t('message.laborMange.details') }}</el-button
                  >
                  <div class="operationText" @click="editInfoBtn(scope.row)">
                    <img
                      src="@/assets/images/icon-edit.png"
                      width="15px"
                      height="15px"
                    />
                    <span>{{ $t('message.laborMange.edit') }}</span>
                  </div>
                  <div class="operationText" @click="deleteInfoBtn(scope.row)">
                    <img
                      src="@/assets/images/icon-delete.png"
                      width="15px"
                      height="15px"
                    />
                    <span>{{ $t('message.laborMange.delete') }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="pagerBox"
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page="pagInfo.pageNo"
            :page-sizes="$store.state.PAGESIZRS"
            :page-size="pagInfo.pageSize"
            layout="total, sizes, prev, pager, next"
            :total="Number(pagInfo.total)"
            background
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 新增 编辑 详情 弹窗 -->
    <el-dialog
      :modal-append-to-body="false"
      :title="addEditTitle"
      :visible.sync="dialogVisible"
      width="667px"
    >
      <div class="dialog_content">
        <el-form
          ref="addEditForm"
          label-width="100px"
          size="medium"
          class="dialogFormBox"
          :rules="addEditRules"
          :model="addEditInfo"
        >
          <el-form-item
            :label="$t('message.laborMange.event')"
            prop="eventTitle"
          >
            <el-input
              v-model="addEditInfo.eventTitle"
              :disabled="currentType == 'details'"
              :placeholder="$t('message.workType.placeholder')"
            ></el-input>
          </el-form-item>
          <div>
            <el-form-item
              :label="$t('message.laborMange.occurrenceTime')"
              prop="eventTime"
            >
              <el-date-picker
                :disabled="currentType == 'details'"
                v-model="addEditInfo.eventTime"
                type="date"
                value-format="yyyy-MM-dd"
                :placeholder="$t('message.laborMange.pleaseChoose')"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              :label="
                $t('message.laborMange.awards') +
                $t('message.laborMange.designation')
              "
              v-if="activeName != 'badness'"
              prop="awardName"
            >
              <el-input
                :disabled="currentType == 'details'"
                v-model="addEditInfo.awardName"
                :placeholder="$t('message.workType.placeholder')"
              ></el-input>
            </el-form-item>
            <el-form-item
              v-else
              :label="$t('message.laborMange.orderOfSeverity')"
              prop="seriousGrade"
            >
              <el-select
                :disabled="currentType == 'details'"
                v-model="addEditInfo.seriousGrade"
                :placeholder="$t('message.laborMange.pleaseChoose')"
              >
                <el-option
                  :label="$t('message.laborMange.notSerious')"
                  :value="1"
                >
                </el-option>
                <el-option
                  :label="$t('message.laborMange.seriousness')"
                  :value="2"
                >
                </el-option>
                <el-option
                  :label="$t('message.laborMange.verySerious')"
                  :value="3"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              :label="
                activeName == 'badness'
                  ? $t('message.laborMange.occurrenceEvent')
                  : $t('message.laborMange.rewardFor')
              "
              prop="reason"
            >
              <el-input
                :disabled="currentType == 'details'"
                type="textarea"
                style="width: 320px"
                :rows="2"
                :placeholder="$t('message.laborMange.placeholder2')"
                maxlength="100"
                v-model="addEditInfo.reason"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              :label="
                activeName == 'badness'
                  ? $t('message.laborMange.personnelInvolved')
                  : $t('message.laborMange.incentiveCrew')
              "
              prop="workerId"
            >
              <el-select
                :disabled="currentType == 'details'"
                v-model="addEditInfo.workerId"
                filterable
                :placeholder="$t('message.laborMange.pleaseChoose')"
                clearable
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.workerName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              :label="$t('message.laborMange.remark')"
              prop="remarks"
            >
              <el-input
                :disabled="currentType == 'details'"
                type="textarea"
                style="width: 320px"
                :rows="2"
                :placeholder="$t('message.laborMange.placeholder2')"
                maxlength="100"
                v-model="addEditInfo.remarks"
              >
              </el-input>
            </el-form-item>

            <el-form-item
              :label="$t('message.laborMange.accessory')"
              prop="fileUrl"
            >
              <el-upload
                v-if="currentType != 'details'"
                class="upload-demo"
                :action="uploadUrl"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                multiple
                :file-list="fileList"
                :limit="5"
                name="files"
              >
                <el-button size="small" type="primary" plain>{{
                  $t('message.laborMange.clickOnTheUpload')
                }}</el-button>
              </el-upload>
              <div v-else>
                <div
                  v-if="fileList.length > 0"
                  v-for="(item, index) in fileList"
                  :key="index"
                  class="accessory"
                  @click="handlePreview({ url: item.url })"
                >
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </el-form-item>
          </div>
          <div class="dialog-footer" v-show="currentType != 'details'">
            <el-button
              class="cancleBtn"
              @click="dialogVisible = false"
              icon="el-icon-circle-close"
              size="medium"
              >{{ $t('message.personnelPosition.cancel') }}
            </el-button>
            <el-button
              type="primary"
              @click="saveInfoData"
              icon="el-icon-circle-check"
              size="medium"
              >{{ $t('message.personnelPosition.determine') }}
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>

    <!-- //查看大图 -->
    <el-dialog :modal-append-to-body="false" :visible.sync="showBigImg">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import {
  getAssessmentListApi,
  getLaborManagementInfoListApi,
  addWorkerAssessmentInfoApi,
  editWorkerAssessmentInfoApi,
  deleteWorkerAssessmentInfoApi
} from '@/assets/js/api/laborPerson'
export default {
  data() {
    return {
      projectSn: '',
      uploadUrl: '',
      fileUrl: '',
      activeName: 'rewards', //tab切换
      seekForm: {
        searchName: ''
      }, // 查询条件
      seriousGrade: '',
      pagInfo: {
        //公用分页
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      tableList: [],

      currentType: 'add', //弹窗的 新增 删除 编辑 详情
      dialogVisible: false, //弹窗
      addEditTitle: this.$t('message.laborMange.newRewardInfo'),
      //弹窗信息
      addEditInfo: {
        awardName: '',
        eventTitle: '',
        eventTime: '',
        eventType: 2, // == 1 不良记录，2 奖励记录，
        seriousGrade: 1,
        fileUrl: '',
        reason: '',
        remarks: '',
        workerId: ''
      },
      addEditRules: {
        eventTitle: [
          {
            required: true,
            message: this.$t('message.personnelPosition.required'),
            trigger: 'blur'
          }
        ],
        eventTime: [
          {
            required: true,
            message: this.$t('message.personnelPosition.required'),
            trigger: 'change'
          }
        ],
        workerId: [
          {
            required: true,
            message: this.$t('message.personnelPosition.required'),
            trigger: 'change'
          }
        ]
      }, //弹窗校验
      fileList: [], //附件

      options: [],

      //查询大图
      showBigImg: false,
      dialogImageUrl: ''
    }
  },
  created() {
    this.projectSn = this.$store.state.projectSn
    this.uploadUrl = this.$store.state.UPLOADURL
    this.fileUrl = this.$store.state.FILEURL
    this.getAssessmentList()
    this.getLaborInfoList()
  },
  methods: {
    showImg(src) {
      window.open(src)
    },
    //获取 不良 奖励 记录列表信息   eventType == 1 不良记录，2 奖励记录，
    getAssessmentList() {
      if (this.activeName == 'rewards') {
        delete this.seekForm.seriousGrade
        this.seekForm.eventType = 2
      } else {
        this.seekForm.eventType = 1
        this.seekForm.seriousGrade = this.seriousGrade
      }
      let data = this.seekForm
      data.pageNo = this.pagInfo.pageNo
      data.pageSize = this.pagInfo.pageSize
      data.projectSn = this.projectSn
      data.userEnterpriseId = this.$store.state.userInfo.userEnterpriseId
      getAssessmentListApi(data).then((res) => {
        if (res.code == 200) {
          let valueArr = res.result.records

          if (valueArr.length > 0) {
            for (let i = 0; i < valueArr.length; i++) {
              valueArr[i].fileList = []
              if (valueArr[i].fileUrl) {
                valueArr[i].fileList = JSON.parse(valueArr[i].fileUrl)
              } else {
                valueArr[i].fileList = []
              }
            }
          }
          setTimeout(() => {
            this.tableList = valueArr
          }, 200)
          this.pagInfo.total = res.result.total
        }
      })
    },

    //获取 人员下拉 奖励、不良
    getLaborInfoList() {
      let data = {
        projectSn: this.projectSn,
        userEnterpriseId: this.$store.state.userInfo.userEnterpriseId
      }
      getLaborManagementInfoListApi(data).then((res) => {
        if (res.code == 200) {
          this.options = res.result
        } else {
          this.$message.error(res.message)
        }
      })
    },

    //切换Tab记录类型
    handleClick(val) {
      this.activeName = val.name
      this.pagInfo = {
        pageNo: 1,
        pageSize: 10,
        total: 0
      }
      if (this.activeName == 'rewards') {
        this.addEditTitle = this.$t('message.laborMange.newRewardInfo')
        this.addEditInfo.eventType = 2
        this.seekForm.searchName = ''
        this.seriousGrade = ''
      } else {
        this.addEditInfo.eventType = 1
        this.seriousGrade = ''
        this.seekForm.searchName = ''
        this.addEditTitle =
          this.$t('message.laborMange.add') +
          this.$t('message.laborMange.badRecord')
      }

      this.getAssessmentList()
    },

    //查询按钮
    onSubmit() {
      this.getAssessmentList()
    },

    //新增不良记录，奖励记录按钮
    addInfoBtn() {
      this.dialogVisible = true
      this.currentType = 'add'
      this.addEditInfo = {
        awardName: '',
        eventTitle: '',
        eventTime: '',
        eventType: 2, // == 1 不良记录，2 奖励记录，
        seriousGrade: 1,
        fileUrl: '',
        reason: '',
        remarks: '',
        workerId: ''
      }
      this.fileList = []
      setTimeout(() => {
        this.$refs.addEditForm.clearValidate()
      }, 200)
      if (this.activeName == 'rewards') {
        this.addEditTitle = this.$t('message.laborMange.newRewardInfo')
        this.addEditInfo.eventType = 2
      } else {
        this.addEditInfo.eventType = 1
        this.addEditTitle =
          this.$t('message.laborMange.add') +
          this.$t('message.laborMange.badRecord')
      }
    },

    //编辑按钮
    editInfoBtn(val) {
      this.addEditInfo = val
      if (val.fileUrl) {
        this.fileList = JSON.parse(val.fileUrl)
      } else {
        this.fileList = []
      }

      this.dialogVisible = true
      this.currentType = 'edit'
      setTimeout(() => {
        this.$refs.addEditForm.clearValidate()
      }, 200)
      if (this.activeName == 'rewards') {
        this.addEditTitle =
          this.$t('message.laborMange.edit') +
          this.$t('message.laborMange.rewardInfo')
      } else {
        this.addEditTitle =
          this.$t('message.laborMange.edit') +
          this.$t('message.laborMange.badRecord')
      }
    },

    //详情按钮
    detailInfoBtn(val) {
      this.addEditInfo = val
      if (val.fileUrl) {
        this.fileList = JSON.parse(val.fileUrl)
      } else {
        this.fileList = []
      }
      setTimeout(() => {
        this.$refs.addEditForm.clearValidate()
      }, 200)

      this.dialogVisible = true
      this.currentType = 'details'
      if (this.activeName == 'rewards') {
        this.addEditTitle =
          this.$t('message.laborMange.rewardInfo') +
          this.$t('message.laborMange.details')
      } else {
        this.addEditTitle =
          this.$t('message.laborMange.badRecord') +
          this.$t('message.laborMange.details')
      }
    },

    //删除按钮
    deleteInfoBtn(val) {
      this.$confirm(
        this.$t('message.laborMange.deleteHint'),
        this.$t('message.laborMange.hint'),
        {
          confirmButtonText: this.$t('message.laborMange.confirm'),
          cancelButtonText: this.$t('message.laborMange.cancel'),
          type: 'warning'
        }
      )
        .then(() => {
          let data = {
            id: val.id
          }
          deleteWorkerAssessmentInfoApi(data).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: this.$t('message.laborMange.deleteSuccess')
              })
              this.getAssessmentList()
            } else {
              this.$message.error(res.message)
            }
          })
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        })
    },

    //点击文件时
    handlePreview(file) {
      this.showBigImg = true
      this.dialogImageUrl = this.fileUrl + file.url
    },

    //附件删除成功
    handleRemove(file) {
      let url = file.url
      for (let i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].url == url) {
          //删除数据
          this.fileList.splice(i, 1)
        }
      }
    },

    //上传附件 成功
    handleSuccess(res, file) {
      let data = { name: res.data[0].filename, url: res.data[0].imageUrl }
      this.fileList.push(data)
    },

    //新增 编辑 保存
    saveInfoData() {
      this.$refs.addEditForm.validate((valid) => {
        if (valid) {
          let data = this.addEditInfo
          data.fileUrl =
            this.fileList.length > 0 ? JSON.stringify(this.fileList) : ''
          data.projectSn = this.projectSn
          if (data.fileList) {
            delete data.fileList
          }
          //奖励记录
          if (this.activeName == 'rewards') {
            data.eventType = 2
            delete data.seriousGrade
            //不良记录
          } else {
            data.eventType = 1
          }
          if (this.currentType == 'add') {
            //新增
            addWorkerAssessmentInfoApi(data).then((res) => {
              if (res.code == 200) {
                this.dialogVisible = false
                this.$message.success(res.message)
                this.getAssessmentList()
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            //编辑
            editWorkerAssessmentInfoApi(data).then((res) => {
              if (res.code == 200) {
                this.dialogVisible = false
                this.$message.success(res.message)
                this.getAssessmentList()
              } else {
                this.$message.error(res.message)
              }
            })
          }
        } else {
          return false
        }
      })
    },

    //切换条数
    sizeChange(val) {
      this.pagInfo.pageSize = val
    },
    //切换页数
    currentChange(val) {
      this.pagInfo.pageNo = val
    }
  }
}
</script>
<style lang="less" scoped>
.assessmentCentent {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.rewards_wrap {
  width: 100%;
}
.badness_wrap {
  width: 100%;
}
.accessory {
  cursor: pointer;
}
</style>
