<template>
  <div class="child-container">
    <div class="table-list">
      <div class="search-box">
        <gridsTitle title="查询条件" />
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          label-width="95px"
          class="search-from"
        >
          <el-form-item label="培训名称：" prop="traningName">
            <el-input v-model="queryParams.traningName" clearable></el-input>
          </el-form-item>
          <el-form-item label="课程类型：" prop="courseType">
            <el-select v-model="queryParams.courseType" clearable>
              <el-option
                :label="sex.dictLabel"
                :value="sex.dictValue"
                v-for="sex in dict.courseType"
                :key="sex.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="培训时间：">
            <el-date-picker
              v-model="timeData"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changePicker"
            >
            </el-date-picker>
          </el-form-item>

          <div class="search-btn">
            <el-button icon="el-icon-my-reset" size="mini" @click="resetQuery"
              >重置</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
          </div>
        </el-form>
      </div>
      <div class="table-box">
        <gridsTitle title="培训记录列表" />
        <div class="table-data">
          <el-table v-loading="loading" :data="tableList" height="90%">
            <el-table-column
              type="index"
              label="序号"
              width="55"
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="培训名称"
              align="center"
              prop="traningName"
            />
            <el-table-column
              label="培训开始时间"
              align="center"
              prop="begainTime"
            >
              <template slot-scope="scope">
                <span>{{
                  parseTime(scope.row.begainTime, "{y}-{m}-{d}")
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="培训结束时间" align="center" prop="duty">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.endTime, "{y}-{m}-{d}") }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="培训组织单位"
              align="center"
              prop="traningUnit"
            />

            <el-table-column label="课程类型" align="center" prop="courseType">
              <template slot-scope="scope">
                {{ filterDict(scope.row.courseType, "courseType") }}
              </template>
            </el-table-column>
            <el-table-column label="培训学时" align="center" prop="classHour" />
            <el-table-column
              label="学习方式"
              align="center"
              prop="learningStyle"
            >
              <template slot-scope="scope">
                {{ filterDict(scope.row.learningStyle, "learningStyle") }}
              </template>
            </el-table-column>
            <el-table-column
              label="参与总人数"
              align="center"
              prop="countNumber"
            >
            </el-table-column>
            <el-table-column
              label="省局监管人员参与人数"
              align="center"
              prop="countDeptNumber"
            >
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.current"
            :limit.sync="queryParams.size"
            @pagination="getList"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { dictList } from "@/api/jcy";
import { getList } from "@/api/inspectorTrain";
import gridsTitle from "../components/gridsTitle";
export default {
  components: {
    gridsTitle,
  },
  data() {
    return {
      //字典
      dict: {},
      inspectorId: null,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      //接口条件
      timeData: null,
      queryParams: {
        traningName: undefined,
        courseType: undefined,
        begainTime: undefined,
        endTime: undefined,
        current: 1,
        size: 10,
      },
      //表格数据
      tableList: [],
    };
  },
  created() {
    this.getDict("learningStyle,courseType");
  },

  methods: {
    changePicker(e) {
      if (e) {
        this.queryParams.begainTime = e[0];
        this.queryParams.endTime = e[1];
      } else {
        this.queryParams.begainTime = undefined;
        this.queryParams.endTime = undefined;
      }
    },
    /**过滤字典 */
    filterDict(value, type) {
      if (this.dict[type] == undefined) {
        return value;
      }
      let dictLable = this.dict[type].filter((item) => item.dictValue == value);
      return dictLable.length > 0 ? dictLable[0].dictLabel : "未知";
    },
    /**获取字典列表 */
    getDict(typeList) {
      let query = {
        list: typeList,
      };
      dictList(query).then((res) => {
        if (res.status == 200) {
          for (let key in res.result) {
            this.dict[key] = res.result[key];
          }
        }
        this.getList();
      });
    },

    /**获取表格数据 */
    getList() {
      this.loading = true;
      getList(this.queryParams).then((res) => {
        this.tableList = res.result.records;
        this.total = res.result.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.current = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.timeData = null;
      this.queryParams.begainTime = undefined;
      this.queryParams.endTime = undefined;
      this.handleQuery();
    },
  },
};
</script>

<style lang="scss" scoped>
.child-container {
  height: 100%;
  & > div {
    height: 100%;
  }
  // 表格部分
  .table-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    .search-box {
      .search-from {
        padding: 15px;
      }
      .search-btn {
        position: relative;
        left: 50%;
        bottom: 0;
        transform: translateZ(-50%);
      }
    }
    .table-box {
      flex: 1;
      margin-top: 10px;
      .table-data {
        height: calc(100% - 40px);
        box-sizing: border-box;
        padding: 15px;
        position: relative;
        .paginBox {
          position: absolute;
          bottom: 15px;
          width: 100%;
          width: 98%;
          margin: 0;
        }
      }
    }
    & > div {
      width: 100%;
      border-radius: 6px;
      background-color: #fff;
    }
  }
  .table-top-btn {
    margin-bottom: 15px;
  }
  // 结束
}
::v-deep .search-from {
  .el-form-item__label {
    font-size: 14px;
    font-weight: 500;
    color: #4d5158;
  }
  .el-select,
  .el-input {
    width: 300px;
  }
}
//弹出框
.my-dialog-title {
  font-size: 16px;
  font-weight: 550;
  color: #333333;
  background: #e9eff7;
  padding: 10px 0 10px 16px;
}
.my-dialog-content {
  padding-left: 40px;

  .content-head {
    font-size: 14px;
    font-weight: 400;
    color: #8e8e8e;
    line-height: 24px;
  }
  .contentAdd {
    display: flex;
    align-items: center;
    margin-top: 10px;
    span {
      font-size: 14px;
      font-weight: 500;
      color: #4d5158;
      margin-right: 4px;
    }
    .itemContent {
      width: 40%;
      margin: 0 4px;
    }
    .contentIcon {
      font-size: 22px;
      color: #22c98d;
      margin-left: 4px;
      cursor: pointer;
    }
    .deleteIcon {
      font-size: 22px;
      color: #f76359;
      margin-left: 4px;
      cursor: pointer;
    }
  }
}
.manner {
  padding-left: 19px;
  display: flex;
  align-items: center;
  margin-top: 10px;
  span {
    font-size: 14px;
    font-weight: 500;
    color: #4d5158;
    margin-right: 4px;
  }
  .inputM {
    width: 78.5%;
    margin-left: 4px;
  }
}
::v-deep .el-select {
  width: 100%;
}
.my-dialog-footer ::v-deep .el-button {
  padding: 8px 10px !important;
}
.my-dialog-footer ::v-deep .el-button--primary {
  background: #ff9822 !important;
  border: 1px solid #ff9822;
}
.upload-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  .row-lable {
    font-size: 14px;
  }
}
.upload-list {
  & > div {
    margin-bottom: 10px;
  }
  & > :last-child {
    margin-bottom: 0;
  }
}
</style>
