<template>
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <el-form
        :inline="true"
        size="medium"
        :model="searchForm"
        ref="searchForm"
      >
        <el-form-item label="" prop="eduType">
          <el-select
            v-model="searchForm.eduType"
            :placeholder="$t('message.laborDev.allType')"
            filterable
            clearable
          >
            <el-option
              :label="item"
              :value="index + 1"
              v-for="(item, index) in educateTypeList"
              :key="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="eduCourseName">
          <el-input
            v-model="searchForm.eduCourseName"
            :placeholder="$t('message.laborDev.searchTranTopic')"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="loadCardData">
            {{ $t("message.personnelPosition.beaconManage.query") }}
          </el-button>
          <el-button type="warning" plain @click="resetForm">
            {{ $t("message.personnelPosition.beaconManage.refresh") }}
          </el-button>
          <!-- 添加安全教育培训 -->
          <el-button type="primary" @click="addPoint">
            {{ $t("message.laborDev.addSafeTrain") }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_wrap whiteBlock">
      <el-table class="tables" :data="pointList">
        <el-table-column
          type="index"
          width="50"
          align="center"
          :label="$t('message.personnelPosition.beaconManage.table.index')"
        ></el-table-column>
        <el-table-column
          prop="eduTime"
          :label="$t('message.laborDev.trainDate')"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="eduType"
          :label="$t('message.laborDev.educateType')"
          align="center"
        >
          <template slot-scope="scope">
            <div @click="handleDetail(scope.row.id)" class="pointer">  
              {{ educateTypeList[scope.row.eduType - 1] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="eduCourseName"
          :label="$t('message.laborDev.trainTopic')"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="eduClasshour"
          :label="$t('message.laborDev.trainTime')"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="eduTeacher"
          :label="$t('message.laborDev.trainPerson')"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="workernum"
          :label="$t('message.laborMange.numberOfPeople')"
          align="center"
        ></el-table-column>
        <!-- <el-table-column
          prop="eduContent"
          :label="$t('message.laborDev.remarks')"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="eduPhoto"
          :label="$t('message.laborDev.remarks')"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.eduPhoto" alt="附件" srcset="" />
          </template>
        </el-table-column> -->
        <el-table-column
          :label="$t('message.personnelPosition.beaconManage.table.operation')"
          align="center"
          width="300"
        >
          <template slot-scope="scope">
            <div class="tableBtns">
              <div @click="uploadPoint(scope.row)" class="operationText">
              <img
                  src="@/assets/images/icon_upload.png"
                  width="15px"
                  height="15px"
                />
                <span><a :href="uploadaurl" class="uploadpoint">下载</a></span>
              </div>
              <div @click="editPoint(scope.row)" class="operationText">
                <img
                  src="@/assets/images/icon-edit.png"
                  width="15px"
                  height="15px"
                />
                <span>{{
                  $t("message.personnelPosition.beaconManage.table.edit")
                }}</span>
              </div>
              <div @click="removePoint(scope.row)" class="operationText">
                <img
                  src="@/assets/images/icon-delete.png"
                  width="15px"
                  height="15px"
                />
                <span>{{
                  $t("message.personnelPosition.beaconManage.table.delete")
                }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagerBox"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="$store.state.PAGESIZRS"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total"
        background
      ></el-pagination>
    </div>
    <!-- 添加卡片弹框 -->
    <el-dialog
      :modal-append-to-body="false"
      :title="cardDialogTitle"
      :visible.sync="cardDialog"
      width="1167px"
    >
      <div class="dialog_content">
        <el-form
          size="medium"
          :model="cardForm"
          ref="cardForm"
          :rules="cardFormRules"
          :inline="true"
          label-width="120px"
          class="dialogFormBox dialogFormBox2"
        >
          <el-form-item
            :label="$t('message.laborDev.educateType')"
            prop="eduType"
          >
            <el-select
              v-model="cardForm.eduType"
              :placeholder="$t('message.laborDev.allType')"
            >
              <el-option
                :label="item"
                :value="index + 1"
                v-for="(item, index) in educateTypeList"
                :key="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('message.laborDev.trainTopic')"
            prop="eduCourseName"
          >
            <el-input
              v-model="cardForm.eduCourseName"
              :placeholder="$t('message.personnelPosition.please_enter')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('message.laborDev.trainDate')"
            prop="eduTime"
          >
            <el-date-picker
              v-model="cardForm.eduTime"
              type="date"
              :placeholder="$t('message.laborMange.pleaseSelectADate')"
              value-format="yyyy-MM-dd"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            :label="$t('message.laborDev.trainDateTime')"
            prop="eduDateTime"
          >
            <el-time-select
              class="startTime"
              placeholder="起始时间"
              v-model="cardForm.eduStartTime"
              :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '18:30',
                maxTime: cardForm.eduEndTime
              }">
            </el-time-select>
            <el-time-select
              class="endTime"
              placeholder="结束时间"
              v-model="cardForm.eduEndTime"
              :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '18:30',
                minTime: cardForm.eduStartTime
              }">
            </el-time-select>
          </el-form-item>
          <el-form-item
            :label="$t('message.laborDev.trainPerson')"
            prop="eduTeacher"
          >
            <el-input
              v-model="cardForm.eduTeacher"
              :placeholder="$t('message.personnelPosition.please_enter')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('message.laborDev.trainTime')"
            prop="eduClasshour"
          >
            <el-input
              v-model="cardForm.eduClasshour"
              :placeholder="$t('message.personnelPosition.please_enter')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.laborDev.trainPersonNum')">
            <el-input :value="cardForm.list.length" disabled></el-input>
          </el-form-item>
          <!-- 签到信息 -->
          <el-form-item :label="$t('message.laborDev.signInInfo')" prop="list">
            <el-button type="primary" @click="selectWorkerDialog = true" style="margin-right: 200px">
              {{ $t("message.laborDev.selectWorker") }}
            </el-button>
          </el-form-item>
          <!-- 教学视频上传 -->
          <el-form-item :label="$t('message.laborDev.trainVideo')" prop="uploadAttachments" >
            <div class="videoUpload">
              <el-upload
                name="files"
                :action="$store.state.UPLOADURL"
                multiple
                :file-list="fileList"
                :on-success="handleSuccess"
                :before-upload="beforeUpload"
                :show-file-list="false"
              >
                <el-button type="primary">教学视频上传</el-button>
              </el-upload>
              <template v-if="cardForm.uploadAttachments"> 
                <video width="120" height="80" controls autoplay style="margin-left: 10px">
                  <source :src="$store.state.FILEURL + cardForm.uploadAttachments" type="video/mp4">
                  <source :src="$store.state.FILEURL + cardForm.uploadAttachments" type="video/ogg">
                  <source :src="$store.state.FILEURL + cardForm.uploadAttachments" type="video/x-ms-wmv">
                  您的浏览器不支持 video 标签。
                </video>
              </template>
            </div>
          </el-form-item>
          <!-- 培训照片 -->
          <el-form-item :label="$t('message.laborDev.photo')" prop="photo" >
            <div class="form-photo" >
              <el-upload
                v-for="i in 3" :key="i"
                name="files"
                class="photoUpload"
                :action="$store.state.UPLOADURL"
                :show-file-list="false"
                :on-success="file => handleUpload(file, i)"
                >
                <img v-if="picName(i)" :src="picUrl(i)" 
                  class="photo" />
                <template v-else> 
                  <i  class="el-icon-plus avatar-uploader-icon"></i>
                  <span>培训{{i === 1 ? '前' : i === 2 ? '中' : '后'}}</span>
                </template>
              </el-upload>
            </div>
          </el-form-item>
          <el-table
            class="tables dialogTable"
            :data="cardForm.list"
            height="300"
          >
            <!-- <el-table-column type="index" width="50" align="center"
                                        :label="$t('message.personnelPosition.beaconManage.table.index')"></el-table-column> -->
            <el-table-column :label="$t('message.laborMange.compellation')">
              <template slot-scope="scope">{{ scope.row.workerName }}</template>
            </el-table-column>
            <el-table-column prop="sex" :label="$t('message.laborMange.sex')">
              <template slot-scope="scope">{{
                scope.row.sex == 1
                  ? $t("message.laborMange.man")
                  : $t("message.laborMange.female")
              }}</template>
            </el-table-column>
            <!-- <el-table-column
              prop="idCard"
              :label="$t('message.laborMange.IdNumber')"
            >
            </el-table-column> -->
            <el-table-column prop="age" :label="$t('message.laborMange.age')">
            </el-table-column>
            <el-table-column
              prop="teamName"
              :label="$t('message.laborMange.team')"
            >
            </el-table-column>
            <el-table-column
              prop="isQualified"
              :label="$t('message.laborDev.isQualified')"
            >
              <template slot-scope="scope">
                <el-select
                  @change="changeQualified(scope.$index, scope.row.isQualified)"
                  class="tableInput"
                  v-model="scope.row.isQualified"
                  :placeholder="$t('message.laborDev.allType')"
                >
                  <el-option
                    :label="$t('message.laborMange.qualified')"
                    :value="1"
                  >
                  </el-option
                  ><el-option
                    :label="$t('message.laborMange.disqualification')"
                    :value="2"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="score" :label="$t('message.laborDev.score')">
              <!-- (value,scope.row.$index) -->
              <template slot-scope="scope">
                <el-input
                  @input="changeScore(scope.$index, scope.row.score)"
                  class="tableInput"
                  v-model="scope.row.score"
                  :placeholder="$t('message.personnelPosition.please_enter')"
                ></el-input>
              </template>
            </el-table-column>

            <el-table-column
              :label="
                $t('message.personnelPosition.beaconManage.table.operation')
              "
              align="center"
              width="100"
            >
              <template slot-scope="scope">
                <div class="tableBtns">
                  <div
                    @click="deleteSelectWorker(scope.$index)"
                    class="operationText"
                  >
                    <img
                      src="@/assets/images/icon-delete.png"
                      width="15px"
                      height="15px"
                    />
                    <span>{{
                      $t("message.personnelPosition.beaconManage.table.delete")
                    }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="dialog-footer">
            <el-button
              class="cancleBtn"
              @click="cardDialog = false"
              icon="el-icon-circle-close"
              size="medium"
              >{{ $t("message.personnelPosition.cancel") }}
            </el-button>
            <!-- 取消 -->
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="saveCardFn"
              size="medium"
              >{{ $t("message.personnelPosition.determine") }}
            </el-button>
            <!-- 确定 -->
          </div>
        </el-form>
      </div>
    </el-dialog>
    <!-- 选择工人弹框 -->
    <el-dialog
      :modal-append-to-body="false"
      :title="$t('message.laborDev.selectWorker')"
      :visible.sync="selectWorkerDialog"
      width="967px"
    >
      <div class="dialog_content">
        <selectWorker
          :personType="1"
          :show = "selectWorkerDialog"
          @getData="getWorkerData"
          v-if="selectWorkerDialog"
          @close="closeSelectWorkerDialog"
        ></selectWorker>
      </div>
    </el-dialog>

     <!-- 详情查看 -->
    <el-dialog
      :modal-append-to-body="false"
      title="培训详情"
      :visible.sync="detailDialog"
      width="980px"
    >
      <el-descriptions title="培训信息" :column="2">
        <el-descriptions-item label="教育类型">{{cardForm.eduType}}</el-descriptions-item>
        <el-descriptions-item label="培训主题">{{cardForm.eduCourseName}}</el-descriptions-item>
        <el-descriptions-item label="培训日期">{{cardForm.eduTime}}</el-descriptions-item>
        <el-descriptions-item label="培训时间"> {{cardForm.eduStartTime + '至' +cardForm.eduEndTime}} </el-descriptions-item>
        <el-descriptions-item label="培训人">{{cardForm.eduTeacher}}</el-descriptions-item>
        <el-descriptions-item label="培训课时"> {{cardForm.eduClasshour}} </el-descriptions-item>
        <el-descriptions-item label="教学视频"> 
          <template v-if="cardForm.uploadAttachments"> 
            <video width="120" height="80" controls autoplay style="margin-left: 10px">
              <source :src="$store.state.FILEURL + cardForm.uploadAttachments" type="video/mp4">
              <source :src="$store.state.FILEURL + cardForm.uploadAttachments" type="video/ogg">
              <source :src="$store.state.FILEURL + cardForm.uploadAttachments" type="video/x-ms-wmv">
              您的浏览器不支持 video 标签。
            </video>
          </template>  
        </el-descriptions-item>
        <el-descriptions-item label="培训照片"> 
          <img :src="$store.state.FILEURL + cardForm.eduBeforePhoto" width="120" height="80">
          <img :src="$store.state.FILEURL + cardForm.eduInPhoto" width="120" height="80">
          <img :src="$store.state.FILEURL + cardForm.eduAfterPhoto" width="120" height="80">
        </el-descriptions-item>
        <el-descriptions-item label="培训人数" w> {{cardForm.list.length}} </el-descriptions-item>
      </el-descriptions>

      <el-table
        class="tables dialogTable"
        :data="cardForm.list"
        height="300"
      >
        <el-table-column :label="$t('message.laborMange.compellation')">
          <template slot-scope="scope">{{ scope.row.workerName }}</template>
        </el-table-column>
        <el-table-column prop="sex" :label="$t('message.laborMange.sex')">
          <template slot-scope="scope">{{
            scope.row.sex == 1
              ? $t("message.laborMange.man")
              : $t("message.laborMange.female")
          }}</template>
        </el-table-column>
        <el-table-column prop="age" :label="$t('message.laborMange.age')"> </el-table-column>
        <el-table-column prop="idcardnumber" width="200" align="center" :label="$t('message.laborMange.IdNumber')" > </el-table-column>
        <el-table-column  prop="teamName" :label="$t('message.laborMange.team')" > </el-table-column>
        <el-table-column prop="isQualified" :label="$t('message.laborDev.isQualified')" >
          <template slot-scope="scope">
            {{scope.row.isQualified === 1 ? "合格" : '不合格'}}
          </template>
        </el-table-column>
        <el-table-column prop="score" :label="$t('message.laborDev.score')"></el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>
<script>
import selectWorker from "@/components/selectWorker";
import { getWorkerInfoListApi } from "@/assets/js/api/personnelPosition.js";
import {
  workerSafeEducationListApi,
  workerSafeEducationAddApi,
  workerSafeEducationDetailApi,
  workerSafeEducationEditApi,
  workerSafeEducationDeleteApi,
} from "@/assets/js/api/laborPerson.js";
export default {
  components: { selectWorker },
  data() {
    const validateConfig = {
      required: true,
      message: this.$t("message.personnelPosition.mandatory"),
      trigger: "blur",
    }

    return {
      uploadaurl:'',
      fileList:[],
      searchForm: {
        eduType: "",
        eduCourseName: "",
      },
      pointList: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      cardDialogTitle: "",
      cardDialog: false,
      cardForm: {
        uploadAttachments:"",
        eduAddr: "",
        eduClasshour: 0,
        eduContent: "",
        eduCourseName: "",
        eduPhoto: "",
        eduBeforePhoto: "",
        eduInPhoto: "",
        eduAfterPhoto: "",
        eduTeacher: "",
        eduTime: "",
        eduStartTime: '',
        eduEndTime: '',
        eduType: 1,
        list: [],
        workernum: 0,
        projectSn: this.$store.state.projectSn,
      },
      cardFormRules: {
        eduCourseName: [validateConfig],
        eduTime: [validateConfig],
        list: [validateConfig],
        uploadAttachments: [validateConfig],
      },
      isAdd: false,
      allPersonList: [],
      educateTypeList: this.$t("message.laborDev.educateTypeList"),
      selectWorkerDialog: false,
      detailDialog: false,
    };
  },
  mounted() {
    this.loadAllPerson();
    this.loadCardData();
    let xxx = this.$store.state.FILEURL
    console.log('url',xxx)
  },
  methods: {
     picName(i){
      // console.log('========',this.cardForm[ `edu${i === 1 ? 'Before': i === 2 ? 'In' : 'After'}Photo` ])
      return this.cardForm[ `edu${i === 1 ? 'Before': i === 2 ? 'In' : 'After'}Photo` ]
    },
      picUrl(i){
        return this.$store.state.FILEURL + this.cardForm[ `edu${i === 1 ? 'Before': i === 2 ? 'In' : 'After'}Photo` ]
    },
    handleUpload(res, num) {
      console.log('添加成功',res)
      const imageUrl = res.data[0].imageUrl
      // console.log(res.data[0].imageUrl)
      this.cardForm[`edu${num === 1 ? 'Before': num === 2 ? 'In' : 'After'}Photo`] = imageUrl
      console.log(this.eduPhoto1,this.eduPhoto2,this.eduPhoto3, num);
    },
    handleSuccess(file,fileList){
      console.log('成功的file',file)
      this.cardForm.uploadAttachments = file.data[0].filename
      if(file.status == "SUCCESS"){
        this.$message({  message: '视频上传成功', type: 'success' });
      }else{
        this.$message({  message: '上传失败，请重新上传！',  type: 'error' });
      }
    },
    beforeUpload(file){
      const videoTypes = ['video/mp4','application/x-mpegURL','video/x-ms-wmv','video/x-msvideo','video/x-flv','video/x-ms-wmv']
      const type = file.type
      const flag = videoTypes.includes(type)
      if (!flag) {
        this.$message({ message: '只能上传视频', type: 'error' });
      }
      return flag
    },
    changeScore(index, value) {
      console.log("changeScore", value, index);
      var json = this.cardForm.list[index];
      this.$set(json, "score", value);
      this.$set(this.cardForm.list, index, json);

      this.$forceUpdate();
    },
    changeQualified(index, value) {
      // console.log('changeQualified',value,index)
      //   console.log(this.cardForm.list)
      var json = this.cardForm.list[index];
      this.$set(json, "isQualified", value);
      // this.cardForm.list[index]=json
      this.$set(this.cardForm.list, index, json);
      // console.log(this.cardForm)
      this.$forceUpdate();
    },
    deleteSelectWorker(index) {
      this.cardForm.list.splice(index, 1);
    },
    closeSelectWorkerDialog() {
      this.selectWorkerDialog = false;
    },
    getWorkerData(data) {
      //去重，已经添加过的人员就不添加了

      var arr = this.cardForm.list;
      var arr2 = [];
      data.forEach((item2) => {
        if (arr.length > 0) {
          var onoff = true;
          arr.forEach((item) => {
            if (item.id == item2.id) {
              onoff = false;
            }
            if (item.workerId == item2.id) {
              onoff = false;
            }
          });
          if (onoff) {
            item2.isQualified = "";
            item2.score = "";
            arr2.push(item2);
          }
        } else {
          item2.isQualified = "";
          item2.score = "";
          arr2.push(item2);
        }
      });

      this.cardForm.list = arr.concat(arr2);
      //   this.cardForm.workernum = this.cardForm.list.length;
    },
    //获取所有人员
    loadAllPerson() {
      getWorkerInfoListApi({
        projectSn: this.$store.state.projectSn,
        userEnterpriseId: this.$store.state.userInfo.userEnterpriseId,
      }).then((res) => {
        this.allPersonList = res.result;
      });
    },
    addPoint() {
      // 清空图片
      this.cardForm.eduBeforePhoto= "";
      this.cardForm.eduInPhoto= "";
      this.cardForm.eduAfterPhoto= "";
      this.isAdd = true;
      this.cardDialog = true;
      this.$nextTick(() => {
        this.$refs["cardForm"].resetFields();
        delete this.cardForm.id;
      });

      this.cardDialogTitle = this.$t("message.laborDev.add2");
    },
    editPoint(item) {
      this.isAdd = false;
      this.cardDialogTitle = this.$t("message.laborDev.btn_edit"); //编辑
      this.cardDialog = true;
      workerSafeEducationDetailApi({
        id: item.id,
        projectSn: this.$store.state.projectSn,
      }).then((res) => {
        if(res.result.workerSafeEducation != null){
          this.cardForm = res.result.workerSafeEducation;
        }if(res.result.list != null){
          this.cardForm.list = res.result.list;
        }
      });
    },
    // 下载材料
    uploadPoint(item){
      console.log('item',item)
      if(item.uploadAttachments != null){
        this.uploadaurl = this.$store.state.FILEURL + item.uploadAttachments
      }else{
        this.$message({
          message: '当前没有相关材料！',
          type: 'error'
        });
        this.uploadaurl = window.location
      }
    },
    removePoint(item) {
      this.$confirm(
        this.$t("message.personnelPosition.beaconManage.table.confirmText") +
          "【" +
          item.eduCourseName +
          "】?",
        this.$t("message.personnelPosition.beaconManage.table.Tips"),
        {
          type: "warning",
        }
      ).then(() => {
        workerSafeEducationDeleteApi({ id: item.id }).then((res) => {
          this.loadCardData();
          this.$message.success(
            this.$t("message.personnelPosition.delete_success")
          ); //删除成功!
        });
      });
    },
    //获取卡片列表
    loadCardData() {
      workerSafeEducationListApi({
        projectSn: this.$store.state.projectSn,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        eduType: this.searchForm.eduType,
        eduCourseName: this.searchForm.eduCourseName,
        userEnterpriseId: this.$store.state.userInfo.userEnterpriseId,
      }).then((res) => {
        console.log(res.result);
        this.pointList = res.result.records;
        this.total = res.result.total;
      });
    },
    //添加或编辑卡片
    saveCardFn() {
      this.$refs["cardForm"].validate((valid) => {
        if (valid) {
          if (this.cardForm.list.length == 0) {
            this.$message.error(this.$t("message.laborMange.errorHint"));
            return;
          }
          this.cardForm.workernum = this.cardForm.list.length;
          var json = this.cardForm;
          var arr = [];
          console.log(json.list);
          json.list.forEach((element) => {
            var item = {
              isQualified: element.isQualified,
              score: element.score,
              workerId: this.isAdd ? element.id : element.workerId,
              projectSn: this.$store.state.projectSn,
            };
            if (!this.isAdd) {
              item.eduId = this.cardForm.id;
              item.id = element.id;
            }
            arr.push(item);
          });
          json.list = arr;
          if (this.isAdd) {
            console.log(json);
            workerSafeEducationAddApi(json).then((res) => {
              this.cardDialog = false;
              this.loadCardData();
              this.$message.success(
                this.$t("message.personnelPosition.add_success")
              ); //添加成功！
            });
          } else {
            // console.log(this.cardForm)
            workerSafeEducationEditApi(this.cardForm).then((res) => {
              this.cardDialog = false;
              this.loadCardData();
              this.$message.success(
                this.$t("message.personnelPosition.edit_success")
              ); //编辑成功！
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs["searchForm"].resetFields();
      this.loadCardData();
    },
    handleDetail(id) {
      // console.log('--------------id',id)
      this.detailDialog = true
      workerSafeEducationDetailApi({
        id: id,
        projectSn: this.$store.state.projectSn,
      }).then((res) => {
        console.log('获取详情',res)
        if(res.result.workerSafeEducation != null){
          this.cardForm = res.result.workerSafeEducation;
        }if(res.result.list != null){
          this.cardForm.list = res.result.list;
        }
        console.log('点击当前行获取详情',this.cardForm);
        if(this.cardForm.eduType == 1){
          this.cardForm.eduType ='入场安全教育'
        }else if(this.cardForm.eduType == 2){
          this.cardForm.eduType ='日常安全教育'
        }else if(this.cardForm.eduType == 3){
          this.cardForm.eduType ='每日安全交底'
        }else if(this.cardForm.eduType == 4){
          this.cardForm.eduType ='VR安全教育'
        }else if(this.cardForm.eduType == 5){
          this.cardForm.eduType ='班前教育'
        }else if(this.cardForm.eduType == 6){
          this.cardForm.eduType ='日常教育（日常违规教育'
        }else if(this.cardForm.eduType == 7){
          this.cardForm.eduType ='每日交底（方案交底）'
        }else if(this.cardForm.eduType == 8){
          this.cardForm.eduType ='每日交底（安全技术交底）'
        }else if(this.cardForm.eduType == 9){
          this.cardForm.eduType ='每日交底（大工程交底）'
        }
      });
    },

    //查看条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.loadCardData();
    },
    //查看页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.loadCardData();
    },
  },
};
</script>
<style lang="less" scoped>
.uploadpoint{
  text-decoration: none;
  color:black;
}
.uploadBtn{
  display: inline-block;
  margin-left: 10px;
}
.dialogFormBox2 {
  width: 95% !important;
}
.dialogTable {
  min-height: auto;
}
.tableInput {
  width: 100px !important;
  /deep/ .el-input {
    width: 100% !important;
  }
}
/deep/ .el-dialog {
  margin: 0 !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.form-photo{
  display: flex;
  flex-wrap: wrap;
  .photoUpload{
    margin-right: 10px;
    .photo{
      width: 100%;
      height: 100%;
    }
  }
}

/deep/.photoUpload .el-upload {
  position: relative;
  width: 80px;
  height: 80px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  span{
    position: relative;
    bottom: 36px;
  }
}
.avatar-uploader-icon {
  font-size: 20px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.startTime, .endTime{
  width: 170px !important;
  /deep/.el-input__inner{
    width: 150px;
  }
}
/deep/.el-date-editor{
  width: 120px;
}
.videoUpload{
  width: 320px;
  display: flex;
  // align-items: center;
  >div{
    margin-left: 10px;
  }
}
/deep/.el-descriptions-item{
  width: 200px
}
.pointer{
  cursor: pointer;
}
</style>
