<template>
  <div class="home">
    <!-- 任务进度条 -->
    <el-card class="task-process">
      <div class="task-item active">
        <div class="task-icon">
          <span class="circle">1</span>
        </div>
        <div class="task-text">任职申请</div>
      </div>
      <div class="line-horizontal"></div>
      <div class="task-item active">
        <div class="task-icon">
          <span class="circle">2</span>
        </div>
        <div class="task-text">学习考试</div>
      </div>
      <div class="line-horizontal"></div>
      <div class="task-item active">
        <div class="task-icon">
          <span class="circle">3</span>
        </div>
        <div class="task-text">专业回馈</div>
      </div>
      <div class="line-horizontal"></div>
      <div class="task-item active" >
        <div class="task-icon">
          <span class="circle">4</span>
        </div>
        <div class="task-text">个人行为举证</div>
      </div>
    </el-card>
    <!--内容页面-->
    <el-card class="base-info">
      <!-- 查询条件 -->
      <el-card shadow="never" class="s-query" :class="!isToggle?'s-query--is-close':''"
               style="position: relative;">
        <el-collapse-transition>
          <div v-show="isToggle">
            <el-form :model="searchData" ref="searchData" label-width="140px" label-position="left"
                     size="small">
              <el-row :gutter="35">
                <el-col :span="8">
                  <el-form-item label="证据编码" prop="companyName">
                    <el-input v-model="searchData.condition.evidenceNo" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="证据名称" prop="employeeCode">
                    <el-input v-model="searchData.condition.evidenceName" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="s-button-group s-button-group--center">
                <el-button size="medium" type="primary" class="button-md" @click="search">查询</el-button>
                <el-button size="medium" type="primary" plain class="button-md" @click="clear">清空</el-button>
              </div>
            </el-form>
          </div>
        </el-collapse-transition>
        <div v-if="!isToggle" class="s-query-toggle" @click="toggle"></div>
        <div v-else class="s-close-toggle" @click="toggle"><i class="el-icon-arrow-up"></i></div>
      </el-card>
      <!-- 查询结果 -->
      <el-card shadow="never" class="s-table">
        <div class="s-table-header">
          <div class="s-table-header__title" style="font-size: 14px;"></div>
          <div class="s-table-header__btn">
            <el-button type="primary" size="small" plain @click="addProfessional" :loading="exportLoading" :disabled="showDisabled">新增</el-button>
          </div>
        </div>
        <el-table :data="tableData" ref="doLayout" stripe v-loading="loading" @sort-change="tableSort"  :cell-style="cellStyle" >
          <template slot="empty"><el-empty :image-size="80"></el-empty></template>
          <el-table-column v-if="fixColumns.index" label="序号" :width="fixColumnsWidth.width" prop="index" header-align="center"></el-table-column>
          <el-table-column
              header-align="center"
              v-for="column in dynamicColumns"
              :key="column.prop"
              :prop="column.prop"
              :label="column.label"
              :min-width="column.width">
            <template slot-scope="scope">
            <span v-if="column.prop == 'createdAt' ">
                {{dateFormatter(scope.row.createdAt)}}
              </span>
              <span v-else-if="column.prop == 'evidenceAttachment'">
              <el-button type="text" size="small" @click="downloadPersonalBehaviorEvidenceAttachment(scope.row.evidenceAttachment)">
                {{filenameFormatter(scope.row.evidenceAttachment)}}
              </el-button>
            </span>
              <span v-else>{{scope.row[column.prop]}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="s-pagination" v-if="pageInfo.totalCount > 0">
          <div class="s-pagination__total">显示第<span
              class="s-pagination__text">{{(pageInfo.pageNo - 1) * pageInfo.pageSize + 1}}</span>条到第<span
              class="s-pagination__text">{{(pageInfo.pageNo - 1) * pageInfo.pageSize + tableData.length}}</span>条，共<span
              class="s-pagination__text">{{pageInfo.totalCount}}</span>条
          </div>
          <el-pagination class="s-pagination__list" background
                         :page-size="searchData.pageSize"
                         :page-sizes="[10, 20, 50, 100]"
                         :current-page="searchData.pageNo"
                         layout="sizes, prev, pager, next"
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :total="searchData.totalCount">
          </el-pagination>
        </div>
      </el-card>
    </el-card>

    <!--专业回馈弹窗-->
    <el-dialog v-if="showAddDialog" visible center title="新增个人行为举证" top="5vh" width="600px" :show-close="true" :before-close="closeAddDialog" :close-on-click-modal="false">
      <el-form :model="addData" ref="addData" label-width="120px" label-position="left" size="small">
        <el-row :gutter="35">
          <el-col :span="20">
            <el-form-item prop="evidenceNo" label="证据编号" :rules="[{required: true, message: '请填写证据编号', trigger: ['blur', 'change']}]">
              <el-input v-model.trim="addData.evidenceNo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="35">
          <el-col :span="20">
            <el-form-item prop="evidenceName" label="证据名称" :rules="[{required: true, message: '请填写证据名称', trigger: ['blur', 'change']}]">
              <el-input v-model.trim="addData.evidenceName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="35">
          <el-col :span="20">
            <el-form-item prop="evidenceWitness" label="证明人" :rules="[{required: false, message: '请填写证明人', trigger: ['blur', 'change']}]">
              <el-input v-model.trim="addData.evidenceWitness"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="35">
          <el-col :span="20">
            <el-form-item  prop="evidenceAttachment" label="证据附件" :rules="[{required: true, message: '请填写证据附件', trigger: ['blur', 'change']}]">
              <el-upload
                  class="custom-demo"
                  drag
                  :action="uploadUrl()"
                  :on-success="handleSuccess"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  :headers="uploadHeaders()"
                  multiple
                  :limit="1"
                  :on-exceed="handleExceed"
                  :file-list="fileList">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>
  </el-form-item>
  </el-col>
  </el-row>
  <el-row :gutter="35">
    <el-col :span="20">
      <el-form-item prop="remarks" label="备注" :rules="[{required: false, message: '请填写备注', trigger: ['blur', 'change']}]">
        <el-input v-model.trim="addData.remarks"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  </el-form>
  <span slot="footer">
    <el-button size="small" class="button-md" @click="closeAddDialog" type="primary" plain>取消</el-button>
    <el-button size="small" class="button-md" type="primary" @click="submitAddAttr">确定</el-button>
  </span>
  </el-dialog>

  </div>
</template>
<script>
import {
  addPersonalBehaviorEvidence,
  baseUrl,
  downloadPersonalBehaviorEvidenceAttachment,
  downloadProfessionalFeedbackAttachment,
  getPersonalBehaviorEvidenceList,
  openPersonalBehaviorEvidenceAttachment,
  openProfessionalFeedbackAttachment,
  submitProfessionalFeedback,
} from "@/api/userMG";
export default {
  // 注册组件
  components: {},
  data() {
    return {
      sequence: '',
      level: '',
      fileList: [],
      token: localStorage.getItem("logintoken"),
      isToggle: false,
      importPermission: false,
      exportPermission: false,
      exportLoading: false,
      showDisabled: false,
      messageInfo: '',
      fixColumns: {
        index: true,
        pro_code: true,
        company_name: true,
        ticket_no: true,
      },
      fixColumnsWidth: {
        index: 60,
        pro_code: 120,
        company_name: 120,
        ticket_no: 120,
      },
      dynamicColumns: [
        {
          prop: 'evidenceNo',
          label: '证据编码',
          width: 120,
        },
        {
          prop: 'evidenceName',
          label: '证据名称',
          width: 120,
        },
        {
          prop: 'evidenceWitness',
          label: '证据证明人',
          width: 120,
        },
        {
          prop: 'evidenceAttachment',
          label: '证据附件',
          width: 120,
        },
        {
          prop: 'remarks',
          label: '备注',
          width: 120,
        },
        {
          prop: 'createdAt',
          label: '上传日期',
          width: 120,
        },
      ],
      tableData: [
      ],
      pageInfo: {
        pageNo: 1,
        pageSize: 10,
        totalCount: 2,
      },
      searchData: {
        pageNo: 1,
        pageSize: 10,
        totalCount: 0,
        condition:{},
      },
      loading: false,
      cellStyle: {
        'text-align': 'center',
      },
      formData: {
        companyName: '',
        employeeCode: '',
        employeeName: '',
      },
      addData: {
        evidenceNo: '',         // 证据编号
        evidenceName: '',       // 证据名称
        evidenceWitness: '',    // 证明人
        evidenceAttachment: '',  // 证据附件，建议用字符串保存上传的文件名或 URL
        remarks: '',            // 备注
      },
      showAddDialog: false,
    };
  },
  methods: {
    //获取列表
    getData(){
      let param = this.searchData;
      getPersonalBehaviorEvidenceList(param).then(res => {
        let { code, data, msg } = res
        console.log(data);
        if (code == '200') {
          this.tableData = data.list;
          this.tableData.forEach((item, index) => {
            item.index = ((data.pageNum-1) * data.pageSize) + index + 1;
          })
          this.pageInfo = {
            pageNo: data.pageNum,
            pageSize: data.pageSize,
            totalCount: data.total
          };
          this.searchData.totalCount = data.total;
        }
      });
      this.loading = false;
    },
    downloadPersonalBehaviorEvidenceAttachment(filePath) {
      let filename = filePath.split('\\')[filePath.split('\\').length - 1];
      let fileType = filePath.split('.')[filePath.split('.').length - 1];
      if(fileType == 'pdf' || fileType == 'PDF' ||
          fileType == 'png' || fileType == 'PNG' ||
          fileType == 'jpg' || fileType == 'JPG' ||
          fileType == 'jpeg' || fileType == 'JPEG' ||
          fileType == 'gif' || fileType == 'GIF'){
        openPersonalBehaviorEvidenceAttachment({evidenceAttachment: filePath}, filename, fileType).then(res => {});
      }else {
        downloadPersonalBehaviorEvidenceAttachment({evidenceAttachment: filePath}, filename).then(res => {
        });
      }
    },
    filenameFormatter(filePath) {
      let filename = filePath.split('\\')[filePath.split('\\').length - 1];
      let result = ''
      filename.split('_').forEach((item, index) => {
        if(index !== 0) {
          result += item + '_'
        }
      });
      result = result.substring(0, result.length - 1);
      return result;
    },
    handleRemove(file, fileList) {
      return false;
    },
    uploadUrl: function() {
      console.log(this.token);
      return baseUrl+ "/qualifications-service/behavior-evidences/uploadPersonalBehaviorEvidenceAttachment";
    },
    uploadHeaders: function() {
      console.log(this.token);
      return {Authorization: this.token}
    },
    handlePreview(file) {
      downloadPersonalBehaviorEvidenceAttachment({}, file.name).then(res => {
      });
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return true;
    },
    handleSuccess(response, file, fileList) {
      let { code, msg, data } = response;
      this.addData.evidenceAttachment = data;
    },
    // 格式化日期
    dateFormatter(time){
      if(!time) return ''
      return  /\d{4}-\d{1,2}-\d{1,2}/g.exec(time)[0]
    },
    // 新增专业回馈
    addProfessional() {
      this.showAddDialog = true;
    },

    //
    // 新增
    add() {
      this.showAddDialog = true;
    },
    // 关闭弹窗
    closeAddDialog() {
      this.showAddDialog = false;
    },
    // 提交新增
    submitAddAttr() {
      this.$refs['addData'].validate(valid => {
        if (valid) {
          let param = this.addData;
          param.orgCode = JSON.parse(localStorage.getItem('userdata')).orgCode
          addPersonalBehaviorEvidence(param).then(res => {
            let {code, data, msg} = res
            if (code == '200') {
              this.$message.success(msg)
              this.addData = {
                evidenceNo: '',
                evidenceName: '',
                evidenceWitness: '',
                evidenceAttachment: '',
                remarks: ''
              }
            } else {
              this.$message.error(msg)
            }
          })
          this.closeAddDialog();
          this.getData();
        }
      });
    },
    handleUploadSuccess(response, file) {
      // 处理成功上传的文件
      this.addData.evidenceAttachment = file.name; // 或者可以保存文件的 URL
      console.log("File uploaded successfully:", file.name);
    },
    resetForm() {
      // 重置 addData 对象，以清空表单
      this.addData = {
        evidenceNo: '',
        evidenceName: '',
        evidenceWitness: '',
        evidenceAttachment: '',
        remarks: '',
      };
    },
    // 缩放查询条件
    toggle() {
      this.isToggle = !this.isToggle;
    },
    // 查询
    search() {
      this.loading = true;
      this.searchData.pageNo = 1;
      this.getData()
    },
    // 清空
    clear() {
      this.searchData.condition = {}
      this.searchData.pageNo = 1;
      this.loading = true;
      this.getData()
    },
    // 分页
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.searchData.pageNo = val;
      this.getData();
    },
    // 排序
    tableSort(val) {
      console.log(val);
    },

  },
  created() {
    this.getData();
  }
};
</script>
<style lang="scss" scoped>
.home {
  margin-left: 2%;
  margin-right: 2%;
  width: 96%;
}

.task-process {
  //width: 100%;
  justify-content: space-between;
  margin-top: 20px;
  padding-bottom: 20px;
  padding-left: 15%;
  //height: 65px;
  border-radius: 10px; /* 增加圆角 */
  overflow: hidden; /* 防止圆角处内容溢出 */
  background-color: white;
}

.task-item {
  float: left;
  flex-direction: column;
  align-items: center;
}

.task-icon {
  text-align: center;
  font-size: 30px;
  color: #999;
  margin-bottom: 5px;
}

.task-text {
  font-size: 14px;
  color: #666;
  width: 90px;
  text-align: center;
}

.line-horizontal {
  float: left;
  width: 15%;
  height: 1px;
  background-color: #999;
  margin: 20px 0;
  position: relative;
}

.line-horizontal::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -10px;
  border: 5px solid transparent;
  border-left-color: #999;
  transform: rotate(0deg);
}

.active .task-icon {
  color: orangered;
}

.active .task-text {
  color: orangered;
}

.circle {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #FFFFFF;
  color: #999;
  text-align: center;
  line-height: 24px;
}

.active .circle {
  background-color: orangered;
  color: #fff;
}

.page-title {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.base-info {
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 30px;
  background-color: white;
  border-radius: 10px; /* 增加圆角 */
  overflow: hidden; /* 防止圆角处内容溢出 */
}

.job-application {
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 30px;
  background-color: white;
  border-radius: 10px; /* 增加圆角 */
  overflow: hidden; /* 防止圆角处内容溢出 */
}

.application-rule {
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 30px;
  background-color: white;
  border-radius: 10px; /* 增加圆角 */
  overflow: hidden; /* 防止圆角处内容溢出 */
}

.application-item {
  padding-bottom: 10px;
}

.el-icon-success {
  color: green;
}

.el-icon-error {
  color: red;
}

.el-table__header .cell {
  color: #324C99;
  font-weight: bold;
}

.submit-btn {
  margin-top: 10px;
  margin-left: 45%;
}
.el-button--primary {
  color: #FFF;
  background-color: orangered;
  border-color: orangered;
}
.el-button--primary.is-plain {
  background: #FFF;
  color: orangered;
  border-color: orangered;
}
::v-deep .el-select-dropdown .el-select-dropdown__item.selected {
  color: orangered !important;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: orangered;
  color: #FFF;
}

::v-deep .el-range-editor.is-active, .el-range-editor.is-active:hover, .el-select .el-input.is-focus .el-input__inner {
  border-color: orangered;
}
</style>
