<template>
  <div class="home">
    <!--内容页面-->
    <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="categoryCode">
                    <el-select  v-model="searchData.condition.categoryCode" placeholder="请选择" style="width: 100%;" >
                      <el-option
                          v-for="item in typeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="定义" prop="defineCode">
                    <el-select  v-model="searchData.condition.defineCode" placeholder="请选择" style="width: 100%;" >
                      <el-option
                          v-for="item in defineList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="任务名" prop="employeeCode">
                    <el-input v-model="searchData.condition.specificTask" 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">
          </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 == 'categoryCode'">
                {{getCategoryCode(scope.row.categoryCode)}}
              </span>
              <span v-else-if="column.prop == 'defineCode'">
                {{getDefineCode(scope.row.defineCode)}}
              </span>
              <span v-else-if="column.prop == 'startTime'">
                {{dateFormatter(scope.row.startTime)}}
              </span>
              <span v-else-if="column.prop == 'endTime' ">
                {{dateFormatter(scope.row.endTime)}}
              </span>
              <span v-else-if="column.prop == 'auditDate'">
                {{dateFormatter(scope.row.auditDate)}}
              </span>
              <span v-else-if="column.prop == 'number'">
                {{scope.row.number }}
              </span>
              <span v-else-if="column.prop == 'roleCode'">
                {{roleFormatter(scope.row.roleCode)}}
              </span>
              <span v-else-if="column.prop == 'levelCode'">
                {{levelFormatter(scope.row.levelCode)}}
              </span>
              <span v-else-if="column.prop == 'auditStatus'">
                {{statusFormatter(scope.row.auditStatus)}}
              </span>
              <span v-else-if="column.prop == 'proofMaterial'">
                <el-button type="text" size="small" @click="downloadProfessionalFeedbackAttachment(scope.row.proofMaterial)">
                  {{filenameFormatter(scope.row.proofMaterial)}}
                </el-button>
              </span>
              <span v-else>{{scope.row[column.prop]}}</span>
            </template>
          </el-table-column>
          <el-table-column
              header-align="center"
              align="center"
              fixed="right"
              width="200"
              label="操作">
            <template slot-scope="scope">
<!--              <el-button  type="text"-->
<!--                         icon="el-icon-view" size="mini" @click="view(scope.row.id)">-->
<!--                查看-->
<!--              </el-button>-->
              <el-button type="text" v-if="scope.row.auditStatus == '0'"
                         icon="el-icon-check" size="mini" @click="pass(scope.row.id)">
                通过
              </el-button>
              <el-button type="text" v-if="scope.row.auditStatus == '0'"
                         size="mini" icon="el-icon-close" @click="reject(scope.row.id)">
                驳回
              </el-button>

            </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>
  </div>
</template>
<script>
import {
  baseUrl,
  getProfessionalFeedbackCategoryList,
  getProfessionalFeedbackDefineList,
  getProfessionalFeedbackRoleList,
  getProfessionalFeedbackHierarchyList,
  getProfessionalFeedbackUnitList,
  getInternalInformationList,
  getProfessionalFeedbackList,
  getProfessionalFeedbackByRoleList,
  addPositionSequenceLevel,
  submitProfessionalFeedback,
  getDictionary,
  downloadProfessionalFeedbackAttachment,
  professionalFeedbackAuditApproval,
  professionalFeedbackAuditRejection
} from "@/api/userMG";
export default {
  // 注册组件
  components: {},
  data() {
    return {
      sequence: '',
      level: '',
      isToggle: false,
      importPermission: false,
      exportPermission: false,
      exportLoading: false,
      showDisabled: false,
      showAddDialog: false,
      addData: {
        categoryCode: '',
        specificTask: '',
        time: '',
        startTime: '',
        endTime: '',
        number: '',
        unitCode: '',
        initiatingDepartment: '',
        roleCode: '',
        levelCode: '',
        proofMaterial: '',
        remarks: '',
      },
      typeList: [
      ],
      defineList:[

      ],
      roleList: [
      ],
      levelList: [
      ],
      unitList: [
      ],
      statusList:[],
      orderCidList: [],
      orderCidList2: [],
      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: 'userNo',
          label: '申请人工号',
          width: 120,
        },
        {
          prop: 'username',
          label: '申请人',
          width: 120,
        },
        {
          prop: 'categoryCode',
          label: '类别',
          width: 120,
        },
        {
          prop: 'defineCode',
          label: '定义',
          width: 120,
        },
        {
          prop: 'specificTask',
          label: '具体任务',
          width: 120,
        },
        {
          prop: 'startTime',
          label: '开始时间',
          width: 120,
        },
        {
          prop: 'endTime',
          label: '结束时间',
          width: 120,
        },
        // {
        //   prop: 'number',
        //   label: '数量',
        //   width: 120,
        // },
        {
          prop: 'initiatingDepartment',
          label: '任务发起单位',
          width: 120,
        },
        {
          prop: 'roleCode',
          label: '担当角色',
          width: 120,
        },
        {
          prop: 'levelCode',
          label: '层级',
          width: 120,
        },
        {
          prop: 'proofMaterial',
          label: '证明材料',
          width: 120,
        },
        {
          prop: 'remarks',
          label: '备注',
          width: 120,
        },
        {
          prop: 'score',
          label: '积分',
          width: 120,
        },
        {
          prop: 'auditStatus',
          label: '状态',
          width: 120,
        },
        {
          prop: 'auditor',
          label: '审核人',
          width: 120,
        },
        {
          prop: 'auditDate',
          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: '',
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    };
  },
  methods: {
    // 通过
    pass(id) {
      this.$confirm('此操作将通过该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        professionalFeedbackAuditApproval({id:id}).then(res => {
          let { code, msg, data } = res;
          if (code == 200) {
            this.$message({
              type: 'success',
              message: '操作成功!',
            });
            this.getData();
          }else {
            this.$message({
              type: 'error',
              message: '操作失败!',
            });
          }
        })
      }).catch(() => {
      })
    },
    // 驳回
    reject(id) {
      this.$confirm('此操作将驳回该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        professionalFeedbackAuditRejection({id:id}).then(res => {
          let { code, msg, data } = res;
          if (code == 200) {
            this.$message({
              type: 'success',
              message: '操作成功!',
            });
            this.getData();
          }else {
            this.$message({
              type: 'error',
              message: '操作失败!',
            });
          }
        })
      }).catch(() => {})
    },
    // 格式化日期
    dateFormatter(time){
      if(!time) return ''
      return  /\d{4}-\d{1,2}-\d{1,2}/g.exec(time)[0]
    },
    // 单位转换
    unitFomatter(code) {
      return this.unitList.find(item => item.value == code).label;
    },
    // 角色转换
    roleFormatter(code) {
      return this.roleList.find(item => item.value == code).label;
    },
    // 层级转换
    levelFormatter(code) {
      return this.levelList.find(item => item.value == code).label;
    },
    // 状态转换
    statusFormatter(code) {
      return this.statusList.find(item => item.value == code).label;
    },
    downloadProfessionalFeedbackAttachment(filePath) {
      let filename = filePath.split('\\')[filePath.split('\\').length - 1];
      downloadProfessionalFeedbackAttachment({proofMaterial: 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;
    },
    // 转义类别
    getCategoryCode(code) {
      return this.typeList.find(item => item.value == code).label;
    },
    // 转义定义
    getDefineCode(code) {
      console.log(code)
      return this.defineList.find(item => item.value == code).label;
    },
    //获取定义
    getDefineList() {
      getProfessionalFeedbackDefineList({}).then(res => {
        let { code, msg, data } = res;
        if (res.code == 200) {
          data.forEach(item => {
            this.defineList.push({value: item.code, label: item.value});
          });
        }
      });
    },
    // 获取类别
    getTypeList() {
      getProfessionalFeedbackCategoryList({}).then(res => {
        let { code, msg, data } = res;
        if (res.code == 200) {
          data.forEach(item => {
            this.typeList.push({value: item.code, label: item.value});
          });
        }
      });
    },
    // 获取单位
    getUnitList() {
      getProfessionalFeedbackUnitList({}).then(res => {
        let { code, msg, data } = res;
        if (res.code == 200) {
          data.forEach(item => {
            this.unitList.push({value: item.code, label: item.value});
          });
        }
      })
    },
    // 获取角色
    getRoleList() {
      getProfessionalFeedbackRoleList({}).then(res => {
        let { code, msg, data } = res;
        if (res.code == 200) {
          data.forEach(item => {
            this.roleList.push({value: item.code, label: item.value});
          })
        }
      })
    },
    // 获取层级
    getLevelList() {
      getProfessionalFeedbackHierarchyList({}).then(res => {
        let { code, msg, data } = res;
        if (res.code == 200) {
          data.forEach(item => {
            this.levelList.push({value: item.code, label: item.value});
          })
        }
      })
    },
    // 获取状态
    getStatusList() {
      getDictionary({"type":"professional_status"}).then(res => {
        let { code, msg, data } = res;
        if (res.code == 200) {
          data.forEach(item => {
            this.statusList.push({value: item.code, label: item.value});
          })
        }
      })
    },
    // 缩放查询条件
    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);
    },
    //获取列表
    getData(){
      let param = this.searchData;
      param.orgCode = JSON.parse(localStorage.getItem('userdata')).orgCode
      getProfessionalFeedbackByRoleList(param).then(res => {
        console.log(res);
        let { code, data, msg } = res
        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;
    },
    // 查看
    view(id) {
      this.$router.push({
        path: '/professional/view',
        query: {
          id: id,
        },
      });
    },
    // 修改
    edit(id) {
      this.$router.push({
        path: '/professional/edit',
        query: {
          id: id,
        },
      });
    },
    // 删除
    del(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$axios.get(baseUrl + "/qualification/professional/delete", {
          params: {
            id: id,
          },
        }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          this.search();
        }).catch(err => {
          console.log(err);
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },

  },
  created() {
    this.getTypeList();
    this.getDefineList();
    this.getUnitList();
    this.getRoleList();
    this.getLevelList();
    this.getStatusList();
    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>
