<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" >
        <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="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">
            <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 == 'categoryCode'">
                {{getCategoryCode(scope.row.categoryCode)}}
              </span>
              <span v-else-if="column.prop == 'defineCode'">
                {{getDefineCode(scope.row.categoryCode)}}
              </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 + unitFomatter(scope.row.unitCode)}}-->
                {{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-if="column.prop == 'score'">
                {{scoreFormatter(scope.row)}}
              </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="categoryCode" label="类别" :rules="[{required: true, message: '请填写类别', trigger: ['blur', 'change']}]">
              <el-select style="width:100%;" v-model.trim="addData.categoryCode" clearable placeholder="请选择" @change="categoryChange" >
                <el-option v-for="item in categoryList" :label="item.label"
                           :value="item.value" :key="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="35">
          <el-col :span="20">
            <el-form-item prop="defineCode" label="定义" :rules="[{required: true, message: '请填写定义', trigger: ['blur', 'change']}]">
              <el-select style="width:100%;" v-model.trim="addData.defineCode" clearable placeholder="请选择" @change="defineChange" >
                <el-option v-for="item in needDefineList" :label="item.label"
                           :value="item.value" :key="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="35">
          <el-col :span="20">
            <el-form-item prop="specificTask" label="具体任务" :rules="[{required: true, message: '请填写具体任务', trigger: ['blur', 'change']}]">
              <el-input v-model.trim="addData.specificTask" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="35">
          <el-col :span="20">
            <el-form-item prop="time" label="时间段" :rules="[{required: true, message: '请填写时间段', trigger: ['blur', 'change']}]">
              <el-date-picker
                  v-model="addData.time"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                  value-format="yyyy-MM-dd"
                  :clearable="false"
                  :disabled="false"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
<!--        <el-row :gutter="35">-->
<!--          <el-col :span="20">-->
<!--            <el-form-item label="数量" :rules="[{required: true, message: '请填写数量', trigger: ['blur', 'change']}]">-->
<!--              <el-input-number v-model="addData.number" :min="1" :max="10" label="描述文字" ></el-input-number>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
        <el-row :gutter="35">
          <el-col :span="20">
            <el-form-item prop="initiatingDepartment"  label="任务发起单位" :rules="[{required: true, message: '请填写任务发起单位', trigger: ['blur', 'change']}]">
              <el-input v-model.trim="addData.initiatingDepartment" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="35">
          <el-col :span="20">
            <el-form-item prop="roleCode" label="担当角色" :rules="[{required: true, message: '请填写担当角色', trigger: ['blur', 'change']}]">
              <el-select style="width:100%;" v-model.trim="addData.roleCode" clearable placeholder="请选择" >
                <el-option v-for="item in needRoleList" :label="item.roleName"
                           :value="item.roleCode" :key="item.roleCode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="35">
          <el-col :span="20">
            <el-form-item prop="levelCode" label="层级" :rules="[{required: true, message: '请填写层级', trigger: ['blur', 'change']}]">
              <el-select style="width:100%;" v-model.trim="addData.levelCode" clearable placeholder="请选择" >
                <el-option v-for="item in needLevelList" :label="item.levelName"
                           :value="item.levelCode" :key="item.levelCode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="35">
          <el-col :span="20">
            <el-form-item prop="proofMaterial" 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 {
  baseUrl,
  getProfessionalFeedbackCategoryList,
  getProfessionalFeedbackDefineList,
  getProfessionalFeedbackCategoryStruct,
  getProfessionalFeedbackRoleList,
  getProfessionalFeedbackHierarchyList,
  getProfessionalFeedbackUnitList,
  getInternalInformationList,
  getProfessionalFeedbackList,
  addPositionSequenceLevel,
  submitProfessionalFeedback,
  getDictionary,
  downloadQualificationManagementMeasures,
  downloadProfessionalFeedbackAttachment, openProfessionalFeedbackAttachment
} from "@/api/userMG";
export default {
  // 注册组件
  components: {},
  data() {
    return {
      sequence: '',
      level: '',
      isToggle: false,
      importPermission: false,
      exportPermission: false,
      exportLoading: false,
      showDisabled: false,
      showAddDialog: false,
      addData: {
        categoryCode: '',
        defineCode: '',
        specificTask: '',
        time: '',
        startTime: '',
        endTime: '',
        number: '',
        unitCode: '',
        initiatingDepartment: '',
        roleCode: '',
        levelCode: '',
        proofMaterial: '',
        remarks: '',
      },
      typeList: [
      ],
      categoryList: [
      ],
      needDefineList:[],
      needRoleList:[],
      needLevelList:[],
      defineList:[
      ],
      roleList: [
      ],
      levelList: [
      ],
      unitList: [
      ],
      fileList: [],
      token: localStorage.getItem("logintoken"),
      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: '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',
      },
      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: {
    categoryChange(val) {
      let type = this.categoryList.find(item => item.value === val);
      if(type == null || type == undefined){
        this.needDefineList = []
        this.needRoleList = []
        this.needLevelList = []
      }else{
        this.needDefineList = type.defineList
      }
    },
    defineChange(val){
      let define = this.needDefineList.find(item => item.value === val);
      if(define == null || define == undefined){
        this.needRoleList = []
        this.needLevelList = []
      }else{
        this.needRoleList = define.roles;
        this.needLevelList = define.levels;
      }
    },
    downloadProfessionalFeedbackAttachment(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' ||
      fileType == 'mp4' || fileType == 'MP4' ||
      fileType == 'mp3' || fileType == 'MP3' ||
      fileType == 'avi' || fileType == 'AVI' ||
      fileType == 'wmv' || fileType == 'WMV' ||
      fileType == 'rmvb' || fileType == 'RMVB' ||
      fileType == 'rm' || fileType == 'RM' ){
        openProfessionalFeedbackAttachment({proofMaterial: filePath}, filename, fileType).then(res => {});
      }else{
        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;
    },
    scoreFormatter(val) {
        if(val.auditStatus == '1'){
          return val.score
        }else{
          return ''
        }
    },
    handleRemove(file, fileList) {
      return false;
    },
    uploadUrl: function() {
      return baseUrl+ "/qualifications-service/professional-feedbacks/uploadProfessionalFeedbackAttachment";
    },
    uploadHeaders: function() {
      return {Authorization: this.token}
    },
    handlePreview(file) {
      downloadProfessionalFeedbackAttachment({}, 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.proofMaterial = data;
    },
    // 专业回馈弹窗
    addProfessional() {
      this.showAddDialog = true;
    },
    //获取类别结构
    getCategoryStruct() {
      getProfessionalFeedbackCategoryStruct({}).then(res => {
        let {code, msg, data} = res;
        if (res.code == 200) {
          data.forEach(item => {
            let temp = this.categoryList.filter(i => i.value == item.categoryCode);
            if (temp.length == 0) {
              this.categoryList.push({
                value: item.categoryCode,
                label: item.categoryName,
                defineList: [{value: item.defineCode, label: item.defineName, roles: item.roleList, levels: item.levelList}]
              });
            } else {
              temp[0].defineList.push({value: item.defineCode, label: item.defineName, roles: item.roleList, levels: item.levelList});
            }
          });
        }
      });
    },
    // 关闭专业回馈弹窗
    closeAddDialog() {
      this.showAddDialog = false;
    },
    // 自动填充姓名
    autoFillUserNameAddDialog() {
      if (this.addData.employeeCode) {
        this.$axios.get(baseUrl + "/qualification/professional/autoFillUserName", {
          params: {
            employeeCode: this.addData.employeeCode,
          }
        }).then(res => {
          this.addData.employeeName = res.data.data.employeeName;
        }).catch(err => {
          console.log(err);
        });
      }
    },
    // 格式化日期
    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;
    },
    // 转义类别
    getCategoryCode(code) {
      return this.typeList.find(item => item.value == code).label;
    },
    // 转义定义
    getDefineCode(code) {
      return this.defineList.find(item => item.value == code).label;
    },
    // 获取类别
    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});
          });
        }
      });
    },
    //获取定义
    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});
          });
        }
      });
    },
    // 获取单位
    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});
          })
        }
      })
    },
    // 提交专业回馈
    submitAddAttr() {
      this.$refs['addData'].validate(valid => {
        if (valid) {
          let param = this.addData;
          param.startTime = this.addData.time[0];
          param.endTime = this.addData.time[1];
          param.orgCode = JSON.parse(localStorage.getItem('userdata')).orgCode
          submitProfessionalFeedback(param).then(res => {
            let {code, data, msg} = res
            if (code == '200') {
              this.$message.success(msg)
              this.addData = {
                categoryCode: '',
                defineCode: '',
                specificTask: '',
                time: '',
                startTime: '',
                endTime: '',
                number: '',
                unitCode: '',
                initiatingDepartment: '',
                roleCode: '',
                levelCode: '',
                proofMaterial: '',
                remarks: '',
              };

            } else {
              this.$message.error(msg)
            }
            this.closeAddDialog();
            this.getData();
          })
        }
      });
    },
    // 缩放查询条件
    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;
      getProfessionalFeedbackList(param).then(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;
    },
  },
  created() {
    this.getCategoryStruct();
    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%;
  background-color: orangered;
  border-color: orangered;
}
.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>
