<template>
  <MOSTY.PageTree :pageTitle="'试卷库列表'" :searchType="'03'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
      <el-divider />
      <section class="button">
        <!-- <el-popconfirm v-if="isAqbm" confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定批量上报?"
          @confirm="handleBatchPush()">
          <template #reference>
            <el-button type="primary" :loading="batchReportLoading">
              <el-icon>
                <Upload />
              </el-icon>
              <span>批量上报</span>
            </el-button>
          </template>
        </el-popconfirm> -->
        <el-button type="primary" @click="addlist">
          <el-icon>
            <Plus />
          </el-icon>
          <span>新增</span>
        </el-button>
      </section>
    </template>
    <template #table>
      <div style="height: calc(100vh - 380px);">
        <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading" actionsW="320"
          :isSort="true" :isSelect="false" @selectionChange="handleSelectionChange" :selectable="selectable">
          <template #type="{ row }">
            <span>{{ row.typeDetail }}</span>
          </template>
          <template #pzlx="{ row }">
            {{ row.pzlx == '0' ? '随机生成' : '手动配置' }}
          </template>
          <template #status="{ row }">
            <el-tag v-if="D_BZ_PXZYK_OBJ[row.status]" :type="colorTypeObj[row.status]">{{ D_BZ_PXZYK_OBJ[row.status]
            }}</el-tag>
          </template>
          <template #actions="{ row }">
            <div class="flex just-center just-wrap">
              <el-popconfirm confirm-button-text="是" v-if="isShowReportBtn(row)" cancel-button-text="否" icon-color="red"
                title="确定要上报?" @confirm="handlePush(row)">
                <template #reference>
                  <span class="operedit" size="small">
                    <el-icon>
                      <Upload />
                    </el-icon>
                    上报</span>
                </template>
              </el-popconfirm>
              <span class="operedit" @click="editExamlib(row)" v-if="row.pzlx != '0'"><el-icon>
                  <Edit />
                </el-icon>配置试题</span>
              <span class="operedit" @click="random(row)" v-if="row.pzlx == '0'"><el-icon>
                  <Coin />
                </el-icon>随机生成</span>
              <span class="operesee" @click="showExamlib(row)"><el-icon>
                  <Compass />
                </el-icon>查看试题</span>
              <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                @confirm="handledelete(row)">
                <template #reference>
                  <span class="operdel" size="small"><el-icon>
                      <Delete />
                    </el-icon>删除</span>
                </template>
              </el-popconfirm>
            </div>

          </template>
        </MOSTY.Table>
      </div>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeSize="handleSizeChange" @changeNo="handleCurrentChange">
        </MOSTY.Pages>
      </div>
    </template>
  </MOSTY.PageTree>

  <!-- 新增 -->
  <el-dialog v-model="dialogVisible" :title="title" :before-close="CloseEvent" width="800px">
    <div style='width:750px;'>
      <el-form ref="frombt" :model="dialogForm" :rules="rules" label-width="120px" style="display: block; width:600px;">
        <el-form-item label="试卷名称：" prop="name">
          <el-input v-model="dialogForm.name" maxlength="80" placeholder="不能超过80个字" show-word-limit type="textarea"
            style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="试卷类型：" prop="type">
          <el-select class="pxdx_box" multiple v-model="dialogForm.type" placeholder='请选择试卷类型' clearable
            style="width: 500px">
            <el-option v-for="item in D_BZ_KTKYWLX" :key="item" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="试题配置类型：" prop="pzlx">
          <el-select class="pxdx_box" v-model="dialogForm.pzlx" placeholder='请选择试题配置类型' clearable style="width: 500px">
            <el-option label="随机生成" value="0" />
            <el-option label="手动配置" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="试卷出题方式：" prop="ctfs">
          <el-select class="pxdx_box" v-model="dialogForm.ctfs" clearable placeholder='请选择试卷出题方式' style="width: 500px">
            <el-option v-for="item in D_BZ_PXSSCTFS" :key="item" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item v-if="filterqx('isSgs') == 1 || filterqx('isgs') == 1" label="仅本级查看：" prop="pubpriv">
          <div style="width: 215px">
            <MOSTY.DictRidioAndSelect :dictData="[{ label: '是', value: '01' }, { label: '否', value: '02' }]"
              v-model="dialogForm.pubpriv" selectType="radio" />
          </div>
        </el-form-item> -->
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">

        <el-button type="primary" @click="saveFrom(frombt)" :loading="loading">
          <el-icon class="mr4">
            <DocumentChecked />
          </el-icon>
          保存
        </el-button>
        <el-button @click="CloseEvent"><el-icon class="mr4">
            <DocumentDelete />
          </el-icon>关闭</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 生成试题配置 -->
  <el-dialog v-model="randomShow" title="生成试题配置" custom-class="custom-dialog" :before-close="CloseEvent2"
    width="1100px">
    <el-form ref="fromRandom" :model="dialogForm" :rules="rules" label-width="200px"
      style="display: block; width:96%;max-height: 72vh;" :inline="true" label-suffix="：">
      <el-row>
        <el-col :span="22">
          <el-form-item label="是否选择业务类型" style="width: 100%">
            <el-select class="pxdx_box" v-model="from.sf" clearable @change="changeSf">
              <el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="试卷总时长" style="width: 100%">
            <el-input v-model="from.examTime" type="number" clearable>
              <template #append>分钟</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="试卷总分" style="width: 100%">
            <el-input v-model="from.examScore" readonly disabled>
              <template #append>分</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="判断题每题分" style="width: 100%">
            <el-input-number v-model="from.trueOrFalseQuestions" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="单选题每题分" style="width: 100%">
            <el-input-number v-model="from.singleChoice" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="多选题每题分" style="width: 100%">
            <el-input-number v-model="from.multipleChoice" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider />

      <el-form-item v-if="from.sf == 1" label="试题类型" style="width: calc(100% - 32px)">
        <el-checkbox-group class="type-check-list" v-model="typeCheckedList" @change="changeTypeCheckedList">
          <el-checkbox class="type-check-item" v-for="item in typeList" :key="item.type" :label="item.title"
            :value="item.type" />
        </el-checkbox-group>
      </el-form-item>

      <section class="type-list">
        <div v-show="!!it.checked" class="type-item" :class="{ 'not-yewu': from.sf != 1 }" v-for="(it, i) in itemList"
          :key="it.type">
          <!-- <template v-if="!!it.checked"> -->
          <input type="hidden" name="type" :value="from.dtoList[i].type" />
          <el-form-item label-width="13em" :label="(it.title ? '【' + it.title + '】' : it.title) + '判断题数量'"
            style="width: 96%; margin-right: 0">
            <el-input-number v-model="from.dtoList[i].pd" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>
          <el-form-item label-width="13em" :label="(it.title ? '【' + it.title + '】' : it.title) + '单选题数量'"
            style="width: 96%; margin-right: 0">
            <el-input-number v-model="from.dtoList[i].danx" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>
          <el-form-item label-width="13em" :label="(it.title ? '【' + it.title + '】' : it.title) + '多选题数量'"
            style="width: 96%; margin-right: 0">
            <el-input-number v-model="from.dtoList[i].duox" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>

        </div>
      </section>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submit(fromRandom)" :loading="loading">
          保存
        </el-button>
        <el-button @click="CloseEvent2">取消</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 详情 -->
  <div v-if="comprehensiveShow" class="dialog-box">
    <Testpaper @close="closeEven" :Row="lival" :zdlist='zdlist' />
  </div>
  <!-- 试题列表 -->
  <div v-if="examlibShow" class="dialog-box">
    <ExamlibList :isAudit="isAudit" @close="closeEven" :Row="lival" :zdlist='zdlist' />
  </div>

  <!-- 审核弹框 -->
  <sjkAuditTc v-if="isShowKtkAuditTc" :resData="auditResData" @close="sjkAuditTcClose" />

</template>

<script setup>
// 引入
import { ref, onMounted, reactive, watch, getCurrentInstance, nextTick, computed } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, deleteApi, postApi } from "@/api/tobAcco_api.js";
import Testpaper from "./testpaper.vue";
import ExamlibList from "./examlibList.vue";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { isString } from '@/utils/tools.js';
import { filterqx } from "@/utils/auth.js";
import { isShowReportButton } from './reportcom/reportTools.js';
import sjkAuditTc from "./sjkCom/sjkAuditTc.vue";

const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const { D_TB_YWLX, D_BZ_KTKYWLX, D_TB_KTTX, D_BZ_SF, D_BZ_PXSSCTFS, D_BZ_PXZYK } = proxy.$dict("D_TB_YWLX", "D_BZ_KTKYWLX", "D_TB_KTTX", "D_BZ_SF", "D_BZ_PXSSCTFS", "D_BZ_PXZYK");
const dialogVisible = ref(false);
const title = ref('')
const zdlist = ref({ D_TB_YWLX, D_BZ_KTKYWLX, D_TB_KTTX, D_BZ_SF, D_BZ_PXSSCTFS, D_BZ_PXZYK })
const randomShow = ref(false)
const comprehensiveShow = ref(false);
const fromRandom = ref(null)
const loading = ref(false);
const total = ref(0);
const frombt = ref();
const iconChange = ref(false);
const lfBoxWid = ref("40px");
const rgBoxWid = ref("calc(100% - 40px)");
const auditResData = ref({})
/** 审核弹框 */
const isShowKtkAuditTc = ref(false)
/** 选中的数组 */
const selected = ref([]);
/** 批量上报loading */
const batchReportLoading = ref(false)
const dialogForm = ref({
  pubpriv: '01', // 默认本级
});
const tableloading = ref(false);
const bigHeight = ref(); //整个高度
const examlibShow = ref(false);
const treeHeight = ref(""); // 树高度
const isAqbm = filterqx('isaqbm') == '1'
/**是否是审核 */
const isAudit = ref(false)
/** 审核对照对象 00 未上报，01 审核中，02  市公司审核完成，03  省审核中  04省公司审核完成 */
const colorTypeObj = {
  '00': '',
  '01': 'danger',
  '02': 'success',
  '03': 'danger',
  '04': 'success',
}
const D_BZ_PXZYK_OBJ = computed(() => {
  let arr = Array.isArray(D_BZ_PXZYK.value) ? D_BZ_PXZYK.value : []
  return arr.reduce((obj, item) => {
    obj[item.value] = item.label
    return obj
  }, {})
})
const from = ref({
  sf: '2',
  id: '',
  dtoList: []
})
const searchArr = reactive([
  {
    showType: "select",
    prop: "type",
    width: '250px',
    options: D_BZ_KTKYWLX,
  },
  {
    showType: "input",
    prop: "name",
    width: '250px',
    placeholder: '请输入试卷名称'
  }
]);
const typeList = ref([])
/** 选中的类型 里面是title */
const typeCheckedList = ref([])
/** 根据类型获取标题的对象 key:类型 value:标题 */
const titleByTypeObj = ref({})

typeList.value.forEach(item => {
  titleByTypeObj.value[item.type] = item.title
})
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  total: 0
});
const tableColumn = reactive([
  {
    title: "试卷名称",
    prop: "name",
  },
  {
    title: "题目数量",
    prop: "count",
  },
  {
    title: "试卷类型",
    prop: "type",
    slot: true
  },
  {
    title: "试题配置类型",
    prop: "pzlx",
    slot: true
  },
  // {
  //   title: "上报状态",
  //   prop: "status",
  //   slot: true
  // },
  { title: "操作", prop: "actions", slot: true },
])
//规则校验
const rules = reactive({
  type: [{ required: true, message: "试卷类型不能为空", trigger: "blur" }],
  name: [{ required: true, message: "试卷名称不能为空", trigger: "blur" }],
  pzlx: [{ required: true, message: "请选择配置类型", trigger: "change" }],
  ctfs: [{ required: true, message: "请选择试卷出题方式", trigger: "change" }],
});
const itemList = ref([{
  title: '',
  type: ''
}])
const tableData = ref([]);
const lival = ref();

const queryHeight = ref(null)
const totalHeights = ref(null)
const isOpen = ref(false);

//查询
function onSearch(obj) {
  listQuery.value.type = obj.type;
  listQuery.value.name = obj.name;
  listQuery.value.pageCurrent = 1;
  getTableData();
}
const CloseEvent = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      // 关闭上一次的表单校验
      frombt.value.clearValidate();
      dialogForm.value = {
        pubpriv: '01' // 默认本级查看
      }
      dialogVisible.value = false
      getTableData()
    })
    .catch(() => {
      // catch error
    })

};

const CloseEvent2 = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      fromRandom.value.clearValidate();
      randomShow.value = false
      getTableData()
    })
    .catch(() => {
      // catch error
    })

}
/** 是否显示上报按钮 */
const isShowReportBtn = (row) => {
  return isShowReportButton(row)
}
const selectable = (row) => {
  return isShowReportButton(row)
}
const handleSelectionChange = (val) => {
  selected.value = val;
};
/**推送 */
const handlePush = (row) => {
  getApi({ ids: row.id }, `/mosty-jcgl/exampaper/reporting`).then(() => {
    ElMessage.success("上报成功");
    getTableData()
  })
}
/** 上报推送 */
const reportPush = (ids, call) => {
  getApi({ ids: ids }, `/mosty-jcgl/exampaper/reporting`).then(() => {
    ElMessage.success("上报成功");
    getTableData()
  }).finally(() => {
    if (typeof call === 'function') call()
  })
}

/** 批量上报 */
const handleBatchPush = () => {
  if (!selected.value.length) {
    ElMessage.warning('请先选择数据')
    return
  }
  const ids = selected.value.map(item => item.id).join(',')
  batchReportLoading.value = true
  reportPush(ids, () => {
    batchReportLoading.value = false
  })
}
onMounted(() => {
  nextTick(() => {
    totalHeights.value = `calc(100vh - 373px)`
  })
  // 去审核
  if (route.query.id) goToAudit(route.query)
});
// 提交生成规则
const submit = (formEl) => {
  loading.value = true
  formEl.validate((valid, fields) => {
    if (!from.value.sf) {
      ElMessage.warning('请确认是否选择业务类型');
      loading.value = false;
      return;
    }
    let flag = false;
    from.value.dtoList.forEach(item => {
      item.pd = !item.pd ? 0 : item.pd
      item.danx = !item.danx ? 0 : item.danx
      item.duox = !item.duox ? 0 : item.duox
      if (item.pd > 0 || item.danx > 0 || item.duox > 0) {
        flag = true
      }
    })
    if (!flag) {
      ElMessage.warning('没有配置考题，提交失败！');
      loading.value = false;
      return;
    }
    if ((from.value.trueOrFalseQuestions || from.value.trueOrFalseQuestions == 0) || (from.value.singleChoice || from.value.singleChoice == 0) || (from.value.multipleChoice || from.value.multipleChoice == 0)) {
      from.value.isScore = '1'
      // from.value.examScore = getExamScore()
    } else {
      from.value.isScore = '2'
    }
    let data = { ...from.value }

    if (data.sf == 1) {
      // 只要选中的类型
      data.dtoList = data.dtoList.filter(item => {
        let title = titleByTypeObj.value[item.type]
        return typeCheckedList.value.includes(title)
      })
    }

    postApi(data, "/mosty-jcgl/exampaper/randomExamlib").then((res) => {
      // 关闭上一次的表单校验
      fromRandom.value.clearValidate();
      randomShow.value = false
      getTableData()
      loading.value = false
      ElMessage.success('保存成功')
      from.value.trueOrFalseQuestions = null
      from.value.singleChoice = null
      from.value.multipleChoice = null
    }).catch(() => {
      loading.value = false
    })
  })
}
// 随机生成
const random = (val) => {
  randomShow.value = true
  lival.value = val;
  from.value = val
  from.value.id = val.id
  itemList.value = [{
    title: '',
    type: '',
    checked: true
  }]
  from.value.sf = '2'
  from.value.dtoList = [
    {
      type: ''
    }
  ]
  typeCheckedList.value = []
}
// 切换是否区分类型
const changeSf = () => {
  if (from.value.sf == '2') {
    itemList.value = [{
      title: '',
      type: '',
      checked: true
    }]
    from.value.dtoList = [
      {
        type: ''
      }
    ]
  } else {
    itemList.value = typeList.value.map(item => {
      item.checked = false
      return item
    })
    let dtoList = itemList.value.map(item => {
      return {
        type: item.type
      }
    })
    from.value.dtoList = dtoList
  }
}
/** 获取试卷总分 */
const getExamScore = () => {

  let score = 0
  let arr = Array.isArray(from.value.dtoList) ? from.value.dtoList : []
  // 先简单判断下,避免出错
  let { trueOrFalseQuestions, singleChoice, multipleChoice } = from.value
  trueOrFalseQuestions = !trueOrFalseQuestions ? 0 : trueOrFalseQuestions
  singleChoice = !singleChoice ? 0 : singleChoice
  multipleChoice = !multipleChoice ? 0 : multipleChoice
  // 如果区分类型，则只计算选中的类型
  if (from.value.sf == 1) {
    arr = arr.filter(item => typeCheckedList.value.includes(titleByTypeObj.value[item.type]))
  }
  // 遍历题目
  arr.forEach(item => {
    const pd = !item.pd ? 0 : item.pd
    const danx = !item.danx ? 0 : item.danx
    const duox = !item.duox ? 0 : item.duox
    score += pd * trueOrFalseQuestions + danx * singleChoice + duox * multipleChoice
  })
  return score
}
// 监听试卷总分
watch([() => from.value.trueOrFalseQuestions, () => from.value.singleChoice, () => from.value.multipleChoice, () => from.value.dtoList], (newVal) => {
  from.value.examScore = getExamScore()
}, { deep: true })
/** 切换选中类型 */
const changeTypeCheckedList = () => {
  itemList.value = itemList.value.map(item => {
    let title = titleByTypeObj.value[item.type]
    item.checked = typeCheckedList.value.includes(title)
    return item
  })
}

//选择试卷类型
watch(
  () => listQuery.value.type,
  () => {
    getTableData();
  },
  { deep: true, immediate: true }
);
watch(D_BZ_KTKYWLX, (val) => {
  if (val && val.length > 0 && typeList.value.length == 0) {
    typeList.value = val.map(item => {
      return { title: item.label, type: item.value }
    })
    typeList.value.forEach(item => {
      titleByTypeObj.value[item.type] = item.title
    })
  }
}, { immediate: true })
// 查看已配置试题
const showExamlib = (val) => {
  lival.value = val;
  itemList.value = [{
    title: '',
    type: ''
  }]
  from.value.dtoList = [
    {
      type: ''
    }
  ]
  examlibShow.value = true;
  isAudit.value = false
}
//获取部门参数
const getdeptId = (val) => {
  listQuery.value.orgcode = val.id;
  listQuery.value.pageCurrent = 1;
  getTableData();
};

//	分页查询试卷列表
function getTableData() {
  tableloading.value = true;
  postApi(listQuery.value, "/mosty-jcgl/exampaper/getPageList").then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      total.value = res.total;
      listQuery.value.total = res.total;
    }
  }).catch(() => {
    tableData.value = [];
    tableloading.value = false;
  }).finally(() => {
    tableloading.value = false;
  });
}
//试卷编辑
function editExamlib(val) {
  lival.value = val;
  comprehensiveShow.value = true;
}
//创建
function addlist() {
  dialogForm.value = {
    pubpriv: '01'
  };
  dialogVisible.value = true;
  title.value = '新增'
}
//编辑
function show(row) {
  title.value = '编辑'
  getFromData(row.id);
  dialogVisible.value = true;
}
//查询试卷表详情
function getFromData(id) {
  getApi({}, `/mosty-jcgl/exampaper/getExampaperById/${id}`).then((res) => {
    dialogForm.value = res;
    if (typeof res.type == 'string') {
      dialogForm.value.type = dialogForm.value.type.split(',');
    }
  });
}
//	添加试卷表数据
const saveFrom = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true;
      dialogForm.value.type = dialogForm.value.type ? dialogForm.value.type.toString() : null;
      if (dialogForm.value.id) {
        postApi(dialogForm.value, '/mosty-jcgl/exampaper/edit').then((res) => {
          ElMessage.success('修改成功');
          dialogVisible.value = false;
          getTableData()
        }).finally(() => {
          loading.value = false;
          dialogForm.value.type = dialogForm.value.type && isString(dialogForm.value.type) ? dialogForm.value.type.split(',') : dialogForm.value.type;
        })
      } else {
        postApi(dialogForm.value, '/mosty-jcgl/exampaper/add').then((res) => {
          ElMessage.success('新增成功');
          dialogVisible.value = false;
          getTableData()
        }).finally(() => {
          loading.value = false;
          dialogForm.value.type = dialogForm.value.type && isString(dialogForm.value.type) ? dialogForm.value.type.split(',') : dialogForm.value.type;
        })
      }
    } else {
      ElMessage.warning("请输入必填项");
    }
  })

}
//删除试卷信息
function handledelete(row) {
  deleteApi({}, `/mosty-jcgl/exampaper/del/${row.id}`).then((res) => {
    ElMessage.success("删除成功");
    getTableData();
  });
}
function closeEven() {
  comprehensiveShow.value = false;
  examlibShow.value = false;
  getTableData();
}
//页码发生变化
const handleCurrentChange = (val) => {
  listQuery.value.pageCurrent = val;
  getTableData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
  listQuery.value.pageSize = val;
  getTableData();
};

/** 打开审核详情 */
function goToAudit(query) {
  auditResData.value = {
    id: query.id,
    rwid: query.rwid
  }
  isShowKtkAuditTc.value = true
}

const sjkAuditTcClose = () => {
  isShowKtkAuditTc.value = false
  if (route.query.id) router.replace({ path: '/safety/pxzyk/ktjmbgl' })//地址还原 避免刷新就提示审核
  getTableData();
}
</script>

<style lang="scss" scoped>
.el-form {
  margin: 0 auto;
}

.toggle {
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #0f3916;

  .el-icon {
    transform: rotate(90deg);
    transition: all 0.25s ease;
  }

  &.active {
    .el-icon {
      transform: rotate(-90deg);
    }
  }
}

.button {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 12px;
}

::v-deep .custom-dialog {
  height: 300px !important;
}

::v-deep .type-check-list {
  justify-content: start;
}

.type-check-item {
  color: #000;
}

.type-list {
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  width: 96%;
}

.type-item {
  // flex-wrap: wrap;
  width: calc(50% - 20px);
  padding: 10px;
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 7px 7px 18px 0px #dcdcdc24;

  &.not-yewu {
    width: 100%;
    border: none;
  }
}
</style>
