<template>
  <div class="notice-editor-wrap">
    <bread-crumb
      :curmbFirst="curmbFirst"
      :curmbSecond="curmbSecond"
      :curmbThird="curmbThird"
      :jumPathThird="jumPathThird"
    ></bread-crumb>

    <div class="add-content screenSet" id="screenSet">
      <el-form
        ref="formData"
        :model="formData"
        :rules="rules"
        label-width="160px"
        class="basic-form"
      >
        <el-form-item label="所属职称：" prop="titleCode">
          <el-select
            size="small"
            v-model:value="formData.titleCode"
            placeholder="请选择职称"
          >
            <el-option
              v-for="item in gradeList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学科名称：" prop="name">
          <el-col :span="13">
            <el-input
              size="small"
              v-model:value="formData.name"
              maxlength="20"
              placeholder="请输入学科名称"
              style="width: 70%"
            ></el-input>
            <span class="word-num"
              >{{ formData.name.replace(/\s+/g, '').length }}/20</span
            >
          </el-col>
        </el-form-item>
        <el-row>
          <el-col :span="13">
            <el-button type="primary" size="small" @click="addSecondList"
              >添加二级分类</el-button
            >
          </el-col>
        </el-row>
        <template
          v-for="(item, index) in formData.titleTestSubjectSecondModelList"
          :key="index"
        >
          <h4 style="margin-top: 10px; font-weight: 600">
            第{{ index + 1 }}个二级分类：
          </h4>
          <div class="list-block">
            <el-form-item
              label="二级分类名称："
              :prop="`titleTestSubjectSecondModelList.${index}.name`"
              :rules="secondNameRules"
            >
              <el-col :span="13">
                <el-input
                  size="small"
                  v-model:value="item.name"
                  maxlength="20"
                  placeholder="请输入二级分类名称"
                  style="width: 70%"
                ></el-input>
                <span class="word-num"
                  >{{ item.name.replace(/\s+/g, '').length }}/20</span
                >
              </el-col>
            </el-form-item>
            <!-- <el-form-item label="二级分类代码："
                  :prop="`titleTestSubjectSecondModelList.${index}.code`"
                  :rules="secondCodeRules">             -->
            <el-form-item label="二级分类代码：">
              <el-col :span="13">
                <el-input
                  size="small"
                  v-model:value="item.code"
                  maxlength="8"
                  placeholder="请输入二级分类代码"
                  style="width: 70%"
                ></el-input>
                <span class="word-num"
                  >{{ item.code.replace(/\s+/g, '').length }}/8</span
                >
              </el-col>
            </el-form-item>
            <div class="checkbox-item">
              <el-checkbox
                v-model:value="item.checkedCourse"
                @change="changeCourse(item.checkedCourse, index)"
                style="margin-left: 15px"
                >配置课程</el-checkbox
              >
            </div>
            <div class="list-block-item" v-if="item.checkedCourse">
              <p class="item-title">配置课程</p>
              <el-form-item
                label="是否已在项目配置课程："
                :prop="`titleTestSubjectSecondModelList.${index}.openFlag`"
                :rules="{
                  required: true,
                  message: '请选择是否已在项目配置课程',
                  trigger: 'change',
                }"
              >
                <el-col :span="13">
                  <el-radio-group v-model:value="item.openFlag">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-col>
              </el-form-item>
              <el-form-item
                v-if="item.openFlag"
                label="选择项目："
                :prop="`titleTestSubjectSecondModelList.${index}.projectId`"
                :rules="{
                  required: true,
                  message: '请选择项目',
                  trigger: 'change',
                }"
              >
                <el-select
                  size="small"
                  v-model:value="item.projectId"
                  filterable
                  placeholder="请选择项目"
                >
                  <el-option
                    v-for="item in projectList"
                    :key="item.projectId"
                    :label="item.projectName"
                    :value="item.projectId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                v-else
                label="选择预计上线时间："
                :prop="`titleTestSubjectSecondModelList.${index}.predictTime`"
                :rules="{
                  required: true,
                  message: '请选择预计上线时间',
                  trigger: 'change',
                }"
              >
                <el-date-picker
                  v-model:value="item.predictTime"
                  type="month"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择月"
                >
                </el-date-picker>
              </el-form-item>
              <i
                class="el-icon-delete icon-delete"
                @click="deleteCourseConfig(index)"
              ></i>
            </div>
            <div class="checkbox-item">
              <el-checkbox
                v-model:value="item.checkedQue"
                @change="changeQue(item.checkedQue, index)"
                style="margin-left: 15px"
                >配置题库</el-checkbox
              >
            </div>
            <div class="list-block-item" v-if="item.checkedQue">
              <p class="item-title">题库通用信息</p>
              <el-row>
                <el-col :span="11">
                  <el-form-item label="题库配图：">
                    <el-upload
                      v-model:value="item.directoryImageUrl"
                      class="bg-uploader"
                      action="#"
                      :show-file-list="false"
                      :before-upload="beforeUploadPic"
                    >
                      <img
                        v-if="item.directoryImageUrl"
                        @mouseover.stop="item.imgMouseOver = true"
                        :src="item.directoryImageUrl"
                        class="bg-img"
                      />
                      <img
                        v-if="!item.directoryImageUrl"
                        class="bg-img"
                        src="../../assets/image/small.png"
                        @click="getCurrentIndex(index)"
                      />
                      <div
                        class="img-delete"
                        v-show="item.imgMouseOver"
                        @click.stop="deleteImg(item.directoryImageUrl, index)"
                        @mouseout.stop="item.imgMouseOver = false"
                      >
                        <i class="el-icon-delete"></i>
                      </div>
                      <div class="limit-text">
                        <p>尺寸:686*160</p>
                        <p>限制大小: 500Kb</p>
                        <p>支持.jpg,.png格式</p>
                      </div>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="13">
                  <el-form-item label="题库介绍：">
                    <el-input
                      size="small"
                      type="textarea"
                      :autosize="{ minRows: 5 }"
                      placeholder="请输入入口简介"
                      v-model:value="item.directoryIntro"
                      maxlength="200"
                      style="width: 83%"
                    ></el-input>
                    <span class="word-num"
                      >{{
                        item.directoryIntro.replace(/\s+/g, '').length
                      }}/200</span
                    >
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item
                label="可解锁商品："
                :prop="`titleTestSubjectSecondModelList.${index}.nolockPro`"
                :rules="{
                  required: true,
                  message: '请选择可解锁商品',
                  trigger: 'change',
                }"
              >
                <el-cascader
                  v-model:value="item.nolockPro"
                  :options="options"
                  :props="{
                    value: 'goodsType',
                    label: 'goodsTypeName',
                    children: 'cardsList',
                  }"
                  size="small"
                ></el-cascader>
              </el-form-item>
              <i
                class="el-icon-delete icon-delete"
                @click="deleteQC(index)"
              ></i>
              <el-row>
                <el-col :span="13">
                  <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="small"
                    @click="addQuestionS(index)"
                    :disabled="item.directoryList.length >= 4"
                    >新增子题库</el-button
                  >
                </el-col>
              </el-row>
              <div v-for="(item2, index2) in item.directoryList" :key="index2">
                <div class="list-block-item set-bg">
                  <p class="item-title">配置子题库</p>
                  <el-row>
                    <el-col :span="11">
                      <el-form-item
                        label="选择题库："
                        :prop="`titleTestSubjectSecondModelList.${index}.directoryList.${index2}.resourceId`"
                        :rules="{
                          required: true,
                          message: '请选择题库',
                          trigger: 'change',
                        }"
                      >
                        <el-select
                          v-model:value="item2.resourceId"
                          filterable
                          size="small"
                          clearable
                          placeholder="请选择题库"
                          :popper-append-to-body="false"
                          @change="
                            changeQBValue(item2.resourceId, index2, index)
                          "
                        >
                          <el-option
                            v-for="(directory, d) in secondDirectoryList"
                            :key="directory.id"
                            :label="directory.directoryName"
                            :value="directory.id"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="13">
                      <el-form-item
                        label="前端题库名称："
                        :prop="`titleTestSubjectSecondModelList.${index}.directoryList.${index2}.content1`"
                        :rules="directoryNameRules"
                      >
                        <el-input
                          v-model:value="item2.content1"
                          type="text"
                          placeholder="默认取关联题库的名称，可修改"
                          size="small"
                          style="width: 80%"
                          maxlength="25"
                        >
                        </el-input>
                        <span class="word-num"
                          >{{
                            item2.content1.replace(/\s+/g, '').length
                          }}/25</span
                        >
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item
                    label="收费："
                    :prop="`titleTestSubjectSecondModelList.${index}.directoryList.${index2}.freeFlag`"
                    :rules="{
                      required: true,
                      message: '请选择收费项',
                      trigger: 'change',
                    }"
                  >
                    <el-radio-group v-model:value="item2.freeFlag">
                      <el-radio label="0">免费</el-radio>
                      <el-radio label="1">收费</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item
                    label="可免费体验题数："
                    v-if="item2.freeFlag == 1"
                    :prop="`titleTestSubjectSecondModelList.${index}.directoryList.${index2}.content2`"
                    :rules="freeContentRules"
                  >
                    <el-input
                      type="number"
                      v-model:value="item2.content2"
                      placeholder="请输入自然数"
                      style="width: 200px"
                    >
                      <template v-slot:append>道</template>
                    </el-input>
                  </el-form-item>
                  <i
                    v-show="index2 !== 0"
                    class="el-icon-delete icon-delete"
                    @click="deleteSecondQB(item2, index2, index)"
                  ></i>
                </div>
              </div>
            </div>
            <i
              v-show="index !== 0"
              class="el-icon-delete icon-delete"
              @click="deleteSecondList(index)"
            ></i>
          </div>
        </template>
        <el-form-item style="margin-top: 30px">
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="goBack">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import BreadCrumb from '@/components/breadcrumb.vue'
import { openLoading, closeLoading, deepCopy } from '@/utils/utils'
import * as commonUtil from '@/utils/utils'
import { doUpload, getFilePath } from '../../utils/qiniu-util'
// import { checkNormalInt } from '@/utils/followup/followupUtils/checkField';

let checkProjectStr = (rule, value, callback) => {
  if (value.indexOf('\\') != -1) {
    //存在
    callback(new Error('请勿输入字符“ \\ ”'))
  } else if (value.indexOf('.') != -1) {
    callback(new Error('请勿输入字符“ . ”'))
  } else {
    callback()
  }
}
let checkNormalInt = (rule, value, callback) => {
  const val = parseFloat(value)
  const isInteger = Number.isInteger(val)
  // if((isInteger && val > 0) || checkNeedRule(val)){
  if (!value || (isInteger && val >= 0)) {
    callback()
  } else {
    callback(new Error(`请输入大于等于0的正整数`))
  }
}
export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      curmbFirst: '教培项目',
      curmbSecond: '学科管理',
      jumPathThird: '/subject-manager',
      curmbThird: '新建学科',
      detailInfo: {}, // 接口返回
      formData: {
        // deleteFlag: 0,
        id: 0,
        name: '',
        seqNo: 0,
        status: 2,
        titleCode: '',
        titleTestSubjectSecondModelList: [
          {
            code: '',
            // deleteFlag: 0,
            id: 0,
            name: '',
            openFlag: 1,
            predictTime: '',
            seqNo: 1,
            subjectFirstId: '',
            projectId: '',
            checkedCourse: false, //新增字段-配置课程
            checkedQue: false, //新增字段-配置题库
            directoryImageUrl: '', //新增字段-题库配图
            directoryIntro: '', //新增字段-题库介绍
            nolockPro: [], //新增字段-可解锁商品
            goodsType: 0, //新增字段-商品类型
            cardType: 0, //新增字段-卡类型
            imgMouseOver: false, //新增字段
            titleTestSubjectSecondResourceModelList: [
              {
                // deleteFlag: 0,
                id: 0,
                resourceId: 0,
                seqNo: 1,
                subjectSecondId: 0,
                type: 1,
              },
            ],
            directoryList: [
              {
                type: 2, //关联资源类型，1项目，2题库
                subjectSecondId: 0, //二级分类id
                seqNo: 1,
                resourceId: '', //关联资源id
                id: 0,
                freeFlag: '1', //题库是否免费：0免费1收费
                content1: '', //题库分类名称
                content2: '', //表示免费体检题数
              },
            ],
          },
        ],
      },
      gradeList: [], // 职称列表
      projectList: [], // 项目列表
      copyLockList: [],
      options: [],
      secondDirectoryList: [], //题库列表
      activeIndexImg: null,
      rules: {
        titleCode: [
          { required: true, message: '请输入选择职称', trigger: 'change' },
        ],
        name: [
          { required: true, message: '请输入学科名称', trigger: 'blur' },
          {
            min: 1,
            max: 20,
            message: '输入长度为1-20的科学名称',
            trigger: 'blur',
          },
          { validator: checkProjectStr, trigger: 'blur' },
        ],
      },
      secondNameRules: [
        { required: true, message: '请输入二级分类名称', trigger: 'blur' },
        {
          min: 1,
          max: 20,
          message: '输入长度为1-20的二级分类名称',
          trigger: 'blur',
        },
        { validator: checkProjectStr, trigger: 'blur' },
      ],
      freeContentRules: [
        {
          required: true,
          message: '请输入免费体验题数',
          trigger: ['blur', 'change'],
        },
        { validator: checkNormalInt, trigger: ['blur', 'change'] },
      ],
      directoryNameRules: [
        {
          required: true,
          message: '请输入前端题库名称',
          trigger: ['blur', 'change'],
        },
        {
          min: 1,
          max: 25,
          message: '输入长度为1-25的前端题库名称',
          trigger: ['blur', 'change'],
        },
      ],
      // secondCodeRules: [
      //   // { required: true, message: "请输入二级分类代码", trigger: "blur" },
      //   // { min: 1, max: 8, message: "输入长度为1-8的二级分类代码", trigger: "blur" },
      // ]
    }
  },
  created() {
    const { id } = this.$route.query
    if (id) {
      this.curmbThird = '编辑学科'
      this.getSubjectDetail(id)
    }
    this.getGradeList()
    this.getProjectList()
    this.getGoodsTypeList()
    this.getsecondDirectoryList()
  },
  mounted() {
    commonUtil.resizeHeight()
  },
  methods: {
    // 学科详情
    getSubjectDetail(id) {
      openLoading(this)
      this.GET(`portal/titleTest/info/${id}`).then((res) => {
        closeLoading(this)
        if (res.code == '000000') {
          console.log('_______data_______', res.data)
          this.detailInfo = res.data
          this.onReset()
        }
      })
    },
    // 获取职称列表
    getGradeList() {
      openLoading(this)
      this.GET('portal/titleTest/grade/list').then((res) => {
        closeLoading(this)
        if (res.code == '000000') {
          const { titleGradeModelList = [] } = res.data
          this.gradeList = titleGradeModelList
        }
      })
    },
    // 获取项目列表
    getProjectList() {
      openLoading(this)
      this.GET('portal/titleTest/cme/list').then((res) => {
        closeLoading(this)
        if (res.code == '000000') {
          this.projectList = res.data
        }
      })
    },
    //获取商品分类
    getGoodsTypeList() {
      openLoading(this)
      this.GET('trade/goods/manager/queryGoodsType').then((res) => {
        closeLoading(this)
        if (res.code == '000000') {
          this.copyLockList = deepCopy(res.data)
          let data = res.data
          this.options = this.getProSelect(data)
        }
      })
    },
    getProSelect(data) {
      for (let i = 0; i < data.length; i++) {
        data[i].cardsList.map((item) => {
          item['goodsType'] = item.cardType
          item['goodsTypeName'] = item.cardTypeName
          item['leaf'] = true
        })
      }
      return data
    },
    //获取题库列表
    getsecondDirectoryList() {
      openLoading(this)
      this.GET(`onlineexam/brushExamTitleDirectory?directoryType=1`).then(
        (res) => {
          closeLoading(this)
          if (res.code == '000000') {
            this.secondDirectoryList = res.data
          }
        }
      )
    },
    // 添加二级分类
    addSecondList() {
      let item = {
        code: '',
        // deleteFlag: 0,
        id: 0,
        name: '',
        openFlag: 1,
        predictTime: '',
        seqNo: 1,
        subjectFirstId: '',
        projectId: '',
        checkedCourse: false, //新增字段-配置课程
        checkedQue: false, //新增字段-配置题库
        directoryImageUrl: '', //新增字段-题库配图
        directoryIntro: '', //新增字段-题库介绍
        nolockPro: [], //新增字段-可解锁商品
        goodsType: 0, //新增字段-商品类型
        cardType: 0, //新增字段-卡类型
        imgMouseOver: false, //新增字段
        titleTestSubjectSecondResourceModelList: [
          {
            // deleteFlag: 0,
            id: 0,
            resourceId: 0,
            seqNo: 1,
            subjectSecondId: 0,
            type: 1,
          },
        ],
        directoryList: [
          {
            type: 2, //关联资源类型，1项目，2题库
            subjectSecondId: 0, //二级分类id
            seqNo: 1,
            resourceId: '', //关联资源id
            id: 0,
            freeFlag: '1', //题库是否免费：0免费1收费
            content1: '', //题库分类名称
            content2: '', //表示免费体检题数
          },
        ],
      }
      this.formData.titleTestSubjectSecondModelList.push(item)
    },
    // 删除二级分类
    deleteSecondList(index) {
      this.$confirm('确定删除此二级分类吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.formData.titleTestSubjectSecondModelList.splice(index, 1)
        })
        .catch(() => {})
    },
    //提交
    onSubmit() {
      this.$refs['formData'].validate((valid) => {
        if (!valid) {
          return false
        }
        const params = deepCopy(this.formData)

        let item = {}
        for (
          let i = 0;
          i < params.titleTestSubjectSecondModelList.length;
          i++
        ) {
          item = params.titleTestSubjectSecondModelList[i]

          //新增处理-配置课程
          if (!item.checkedCourse) {
            item.openFlag = 0
            item.projectId = ''
            item.predictTime = ''
            item.titleTestSubjectSecondResourceModelList = []
          } else {
            let id = item.projectId
            item.titleTestSubjectSecondResourceModelList[0]['resourceId'] =
              id || 0
            delete item.projectId
          }
          //新增处理-配置题库
          if (!item.checkedQue) {
            item.directoryImageUrl = ''
            item.directoryIntro = ''
            item.nolockPro = []
            item.goodsType = 0
            item.cardType = 0
            item.directoryList = []
          } else {
            item.goodsType = item.nolockPro[0]
            item.cardType = item.nolockPro[1]
            for (let item2 of item.directoryList) {
              if (item2.freeFlag == 0) {
                item2.content2 = ''
              }
              if (!item2) {
                item2.resourceId = 0
              }
            }
          }
          // 添加或重置排序字段
          item.seqNo = i + 1
        }

        // params.createdName = this.$store.state.reservationManage.userName;
        openLoading(this)
        this.POST('portal/titleTest/insertOrUpdate', params).then((res) => {
          closeLoading(this)
          if (res.code == '000000') {
            this.$message.success('提交成功')
            setTimeout(() => {
              this.goBack()
            }, 2000)
          }
        })
      })
    },
    goBack() {
      this.$router.back()
    },
    // 重置
    onReset() {
      if (this.detailInfo.id) {
        const result = deepCopy(this.detailInfo)
        const modelList = []
        for (let item of result.secondSubjectModelList) {
          if (item.resourceModelList && item.resourceModelList[0]) {
            item.projectId = item.resourceModelList[0]['resourceId']
            item.titleTestSubjectSecondResourceModelList =
              item.resourceModelList
            delete item.resourceModelList
          } else {
            item.projectId = ''
            item.titleTestSubjectSecondResourceModelList = [
              {
                // deleteFlag: 0,
                id: 0,
                resourceId: 0,
                seqNo: 1,
                subjectSecondId: 0,
                type: 1,
              },
            ]
          }
          //新增处理逻辑
          item.checkedCourse = false
          item.checkedQue = false
          item.nolockPro = []
          if (item.projectId || item.predictTime) {
            item.checkedCourse = true
          } else {
            item.openFlag = 1
          }
          if (item.goodsType && item.cardType) {
            item.nolockPro = [Number(item.goodsType), Number(item.cardType)]
            item.checkedQue = true
          }
          item.imgMouseOver = false

          modelList.push(item)
        }
        result.titleTestSubjectSecondModelList = modelList
        delete result.secondSubjectModelList
        this.formData = result
      } else {
        this.formData = {
          // deleteFlag: 0,
          id: 0,
          name: '',
          seqNo: 0,
          status: 2,
          titleCode: '',
          titleTestSubjectSecondModelList: [
            {
              code: '',
              // deleteFlag: 0,
              id: 0,
              name: '',
              openFlag: 1,
              predictTime: '',
              seqNo: 1,
              subjectFirstId: '',
              projectId: '',
              checkedCourse: false, //新增字段-配置课程
              checkedQue: false, //新增字段-配置题库
              directoryImageUrl: '', //新增字段-题库配图
              directoryIntro: '', //新增字段-题库介绍
              nolockPro: [], //新增字段-可解锁商品
              goodsType: 0, //新增字段-商品类型
              cardType: 0, //新增字段-卡类型
              imgMouseOver: false, //新增字段
              titleTestSubjectSecondResourceModelList: [
                {
                  // deleteFlag: 0,
                  id: 0,
                  resourceId: 0,
                  seqNo: 1,
                  subjectSecondId: 0,
                  type: 1,
                },
              ],
              directoryList: [
                {
                  type: 2, //关联资源类型，1项目，2题库
                  subjectSecondId: 0, //二级分类id
                  seqNo: 1,
                  resourceId: '', //关联资源id
                  id: 0,
                  freeFlag: '1', //题库是否免费：0免费1收费
                  content1: '', //题库分类名称
                  content2: '', //表示免费体检题数
                },
              ],
            },
          ],
        }
      }
    },
    changeCourse(value, indexL0) {
      if (!value) {
        this.deleteCourseConfig(indexL0)
      }
    },
    changeQue(value, indexL0) {
      if (!value) {
        this.deleteQC(indexL0)
      }
    },
    //课程配置的删除操作
    deleteCourseConfig(indexL0) {
      this.$confirm('确定删除当前二级分类的课程配置吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.formData.titleTestSubjectSecondModelList[
            indexL0
          ].checkedCourse = false
        })
        .catch(() => {
          this.formData.titleTestSubjectSecondModelList[
            indexL0
          ].checkedCourse = true
        })
    },
    //题库配置的删除操作
    deleteQC(indexL0) {
      this.$confirm('确定删除当前二级分类的题库配置吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.formData.titleTestSubjectSecondModelList[
            indexL0
          ].checkedQue = false
        })
        .catch(() => {
          this.formData.titleTestSubjectSecondModelList[
            indexL0
          ].checkedQue = true
        })
    },
    getCurrentIndex(indexL0) {
      this.activeIndexImg = indexL0
    },
    beforeUploadPic(file) {
      let fileLimit = {
        width: 686,
        height: 160,
        size: 0.5,
        sizeText: '500Kb',
        key: 'directoryImageUrl',
        more: 'directoryImageUrl',
        show: 'uploadImgMessage1',
      }
      this.beforeAvatarUpload(file, fileLimit)
    },
    //上传图片校验
    beforeAvatarUpload(file, fileLimit) {
      let vm = this
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < fileLimit.size
      if (!isJPG && !isPNG) {
        this.$message.error('图片不符合规范，请根据规范上传图片')
        // return;
      }
      if (!isLt2M) {
        this.$message.error('图片不符合规范，请根据规范上传图片 ')
        // return;
      }
      let _img = new FileReader()
      _img.readAsDataURL(file)
      _img.onload = function (theFile) {
        let image = new Image()
        image.src = theFile.target.result
        image.onload = function () {
          let _this = this
          if (
            // false
            _this.width != fileLimit.width ||
            _this.height != fileLimit.height
          ) {
            vm.$message.error('图片不符合规范，请根据规范上传图片')
          } else {
            openLoading(vm)
            doUpload(
              vm,
              file,
              getFilePath(file, null),
              'preview4',
              'progress1',
              1
            ).then(function (path) {
              closeLoading(vm)
              console.log(path)
              vm.formData.titleTestSubjectSecondModelList[vm.activeIndexImg][
                fileLimit.key
              ] = path.fullPath
              // vm.formData[fileLimit.more] = {
              //   attachmentName: path.name,
              //   attachmentExt: path.ext,
              //   attachmentSize: path.size
              // };
              vm.$message.success('上传成功')
            })
          }
        }
      }
      return isJPG && isLt2M
    },
    //删除图片
    deleteImg(img, indexL0) {
      this.formData.titleTestSubjectSecondModelList[indexL0].directoryImageUrl =
        ''
      this.formData.titleTestSubjectSecondModelList[
        indexL0
      ].imgMouseOver = false
    },
    //新增子题库
    addQuestionS(activeIndex) {
      let seqLength =
        this.formData.titleTestSubjectSecondModelList[activeIndex].directoryList
          .length
      let obj = {
        type: 2, //关联资源类型，1项目，2题库
        subjectSecondId: 0, //二级分类id
        seqNo: seqLength + 1,
        resourceId: '', //关联资源id
        id: 0,
        freeFlag: '1', //题库是否免费：0免费，1收费
        content1: '', //题库分类名称
        content2: '', //表示免费体检题数
      }
      if (seqLength >= 4) {
        this.$message.warning('最多只能增加4个子题库')
        return
      }
      this.formData.titleTestSubjectSecondModelList[
        activeIndex
      ].directoryList.push(obj)
    },
    formatDirectory(value) {
      let directoryName = ''
      for (let i = 0; i < this.secondDirectoryList.length; i++) {
        if (this.secondDirectoryList[i].id == value) {
          directoryName = this.secondDirectoryList[i].directoryName
        }
      }
      return directoryName
    },
    changeQBValue(value, indexL1, indexL0) {
      let directoryName = this.formatDirectory(value)
      this.formData.titleTestSubjectSecondModelList[indexL0].directoryList[
        indexL1
      ].content1 = directoryName
    },
    //删除子题库
    deleteSecondQB(obj1, indexL1, indexL0) {
      this.$confirm('确定删除此子题库吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.formData.titleTestSubjectSecondModelList[
            indexL0
          ].directoryList.splice(indexL1, 1)
        })
        .catch(() => {})
    },
  },
}
</script>

<style lang="scss" scoped>
.notice-editor-wrap {
  background: #fff;
}
.prot-dialog-tips-1 {
  text-align: center !important;
}
.add-content {
  padding: 30px 0;
}
.list-block {
  position: relative;
  padding: 20px 10px 10px;
  border: 1px solid #cdcdcd;
  border-radius: 5px;
  margin-top: 25px;
  margin-bottom: 20px;
}
.checkbox-item {
  margin-bottom: 22px;
}
.list-block-item {
  position: relative;
  padding: 10px;
  border: 1px solid #cdcdcd;
  border-radius: 5px;
  margin-top: 15px;
  margin-bottom: 15px;
  .icon-delete {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 30px;
    color: red;
    cursor: pointer;
  }
  .item-title {
    margin: 5px 0 15px;
  }
  &.set-bg {
    background-color: #f1f1f1;
  }
}
.icon-delete {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 30px;
  color: red;
  cursor: pointer;
}
.bg-uploader {
  img {
    float: left;
  }
  .bg-img {
    width: 84px;
    height: 100px;
  }
  .bg-video {
    float: left;
    width: 84px;
    height: 100px;
  }
  .img-delete {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 84px;
    height: 100px;
    background: #000;
    opacity: 0.7;
    z-index: 999;
    i {
      color: #fff;
      margin-top: 39px;
      margin-left: 0px;
    }
  }
  .limit-text {
    float: left;
    margin-left: 10px;
    margin-top: -10px;
    p {
      font-size: 12px;
      color: #999;
    }
  }
}
</style>

<style>
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #449284;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #449284;
  border-color: #449284;
}
.required-label .el-form-item__label::before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
</style>
