<!-- 讲师费统计页面 -->
<template>
    <div style="margin: 20px;">
    <!-- 搜索框及按钮 -->
    <div class="filter" >
      <a-form layout="inline">
          <a-form-item  class="select">
            <a-select style="width: 235px" v-model:value="searchParam.trainOrgId" placeholder="请选择资源归属" allowClear
              :options="TrainOrglist" 
              v-on:keydown.enter="enterPressHadlerSearch"/>
          </a-form-item>
          <a-form-item class="select " >
            <a-date-picker picker="month" style="width: 235px; height: 40px; border-radius: 8px" v-model:value="searchdate"
              :placeholder="[ '请选择汇总周期']" @change="searchTimeChange" format="YYYY-MM" valueFormat="YYYY-MM"
              v-on:keydown.enter="enterPressHadlerSearch" />
          </a-form-item >  
            <!-- <a-form-item  class="select">
              <a-month-picker  placeholder="重新汇总上月周期" @change="onChange" style="width: 260px; height: 40px; border-radius: 8px" v-model:value="searchdate"  />
          </a-form-item> -->
          <div style="display: flex; margin-bottom: 20px">
            <a-button @click="searchSubmit()" type="primary" class="resetbtn">查询 </a-button>
            <!-- <div class="btn btn1" @click="searchReset" style="background:rgba(64, 158, 255, 0);" > -->
            <!-- <div class="search"></div> -->
            <a-button class="resetbtn " @click="searchReset">重置</a-button>
          </div>
        </a-form>
        <div style="width: 100%;"></div>   
        <div style="display: flex; margin-bottom: 20px">
          <a-button @click="searchResetPrevious()" type="primary" class="langbtn" style="width: 150px; height: 40px; border-radius: 8px" >
            <FolderAddOutlined /> 重新汇总上月讲师费
          </a-button>
          <!-- <div     style="line-height: 40px; margin-left: 14px;" >当前页面汇总金额：<span style="line-height: 40px; font-size: 24px; color: rgb(207, 34, 34) ;font-weight: 600;">1,230,490</span>元     当前总汇总金额：<span style="line-height: 40px; font-size: 24px; color: rgb(207, 34, 34) ;font-weight: 600;">9,230,490</span>元</div> -->
        </div>
      <!-- 表格 -->
      <div style="padding: 10px 0">
        <a-table :header-cell-style="{ 'text-align': 'center' }" style="border: 1px solid #f2f6fe" :columns="columns"
          :data-source="tableData" :loading="tableLoading" @expand="expandTable" :pagination="false">
          <template #bodyCell="{ record, column }">
            <template v-if="column.key === 'operation'">
              <a-space >
                <a-button type="link" @click="() => handleLook(record, String(record.courseform))">查看</a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </div>

    </div>
    <!-- 翻页 -->
    <div class="tableBox ">
      <div  class="pa">
        <a-pagination v-if="tableDataTotal > 10" :showSizeChanger="true" :showQuickJumper="false"
          :hideOnSinglePage="true" :pageSize="searchParam.pageSize" :current="searchParam.pageNo" :total="tableDataTotal"
          class="pagination" @change="changePagination" />
      </div>
    </div>
    <!-- 二级页面弹窗组件 -->

    <a-modal :visible="teacherdialog"  @ok="closeModal2" :footer="null" :closable="false"  wrapClassName="CreatePath" 
        >
        <div class="out">
          <div class="top">
          <!-- <img class="topimg" src="../../assets/images/courseManage/add1.png" /> -->
        <div class="topc">{{teacherdialogtitle }}</div>
          <div @click="cancelTeacherDialog" style="margin-left: 850px; cursor: pointer">
            <img
              style="width: 20px; height: 20px"
              src="../../assets/images/basicinfo/close.png"
            />
          </div>
        </div>
        <div class="LecturerFeeStatistics">
          <div class="filter">
            <div class="filterItems">
              <div style=" margin-right: 20px ;">周期 : {{ summaryDate }}</div>
              <div>资源归属 :{{ resbgTxt }}</div>
              <div style="width:100%; height:1px"></div>
              <div class="select">
                <a-input v-model:value="queryFeeMonthly.teacherNo" style="width: 230px; height: 40px; border-radius: 8px"
                  placeholder="请输入工号/姓名检索" allowClear showSearch>
                </a-input>
              </div>
              <div class="select">
                <a-select style="width: 230px" v-model:value="queryFeeMonthly.trainOrgId" placeholder="发薪地"
                  :options="TrainOrglist">
                </a-select>
              </div>
              <div class="select">
                <a-select style="width: 230px" placeholder="请选择所属组织" v-model:value="queryFeeMonthly.departId"
                  :options="getOrganizationList">
                </a-select>
              </div>
              <div class="del_btnbox" style="margin-top: 0px ;">
                <a-button class="del_btn btn1" @click="searchFeeMonthlya">搜索</a-button>
                <a-button class="del_btn btn2" @click="handleFeeMonthly">导出
                </a-button>
              </div>
              <a-table :header-cell-style="{ 'text-align': 'center' }" style="border: 1px solid #f2f6fe"
                :columns="columnsFeeDetail" :data-source="tableDataFeeDetail" :loading="tableLoading"
                @expand="expandTable" :pagination="false">
                <template #bodyCell="{ record, column }">
                  <template v-if="column.key === 'operationa'">
                    <a-space style="display:flex ;justify-content: space-around;">
                      <a-button type="link" @click="() => handleLooka(record, String(record.courseform))">查看</a-button>
                    </a-space>
                  </template>
                </template>
              </a-table>
            </div>
          </div>
          <!-- 二级列表翻页 -->
          <div class="tableBox ">
            <div style="float: right;">
              <a-pagination v-if="tableDataFeeDetailTotal > 10" :showSizeChanger="true" :hideOnSinglePage="true"
                :pageSize="pageSize" v-model:current="queryFeeMonthly.pageNo" :total="tableDataFeeDetailTotal"
                class="pagination" @change="changeFeeDetailPagination" />
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 三级页面弹窗组件 -->
    <a-modal :visible="teacherdialoga"  @ok="closeModal2" :footer="null" :closable="false"  wrapClassName="CreatePath" 
        >
        <div class="out">
          <div class="top">
          <!-- <img class="topimg" src="../../assets/images/courseManage/add1.png" /> -->
        <div class="topc">讲师费月度统计--明细</div>
          <div @click="cancelTeacherDialoga" style="margin-left: 850px; cursor: pointer">
            <img
              style="width: 20px; height: 20px"
              src="../../assets/images/basicinfo/close.png"
            />
          </div>
        </div>
        <div class="LecturerFeeStatistics">
          <div class="filter">
            <div class="filterItems">
              <div style=" margin-right: 20px ;">周期 : {{ summaryDate }}</div>
              <div>资源归属 :{{ resbgTxt }}</div>
              <div style="width:100%; height:1px"></div>
              <a-table :header-cell-style="{ 'text-align': 'center' }" style="border: 1px solid #f2f6fe"
                :columns="columnstableDetailList" :data-source="tableDetailList" @expand="expandTable"
                :pagination="false">
                <template #bodyCell="{ record, column }">
                  <template v-if="column.key === 'operationa'">
                    <a-space style="display:flex ;justify-content: space-around;  ">
                      <a-button type="link" @click="() => handleLooka(record, String(record.courseform))">操作</a-button>
                    </a-space>
                  </template>
                </template>
              </a-table>
              <div style="width:100%; height:1px"></div>
              <div>讲师费明细</div>
              <a-table :header-cell-style="{ 'text-align': 'center' }" style="border: 1px solid #f2f6fe"
                :columns="columnstableFeeList" :data-source="tableFeeList" @expand="expandTable" :pagination="false">
                <template #bodyCell="{ record, column }">
                  <template v-if="column.key === 'operationc'">
                    <a-space style="display:flex ;justify-content: space-around;  ">
                      <a-button type="link" @click="() => handleLooka(record, String(record.courseform))">操作</a-button>
                    </a-space>
                  </template>
                </template>
              </a-table>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
  <MonthlyStatistics v-model:visible="opendrawer" :id="drawerId" ></MonthlyStatistics>
</template>
<script lang="jsx">
import { reactive, toRefs, ref, watch } from "vue";
import { message } from "ant-design-vue";
import dayjs from "dayjs";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { getOrganization } from "../../api/Teaching";
import {  queryTeacherFeeMonthly, getTeacherFeeDetailListByTeacherNo, getTeacherFeeListByTeacherNo,TeacherFeeTotalList,createMonthSummary} from "../../api/lecturerFeeStatistics"
;
import {expenseSummaryList,getTrainOrg,CreateMonthSummary} from "../../api/lecturerFeeManagement";
import dialog from '@/utils/dialog'
import MonthlyStatistics from './MonthlyStatistics'
export default {
  name: "LecturerFeeStatistics",
  components: {
    MonthlyStatistics,
  },
  setup() {
    const store = useStore();
    const router = useRouter();
    const state = reactive({
      opendrawer: false,
      drawerId: '',
      summaryDate: null,
      resbgTxt: null,
      tableDataTotal: -1,//table列表总条数,
      tableDataFeeDetailTotal: -1, // 二级列表总条数
      currentPage2: 1,
      pageSize2: 10,
      pageSize: 10,
      teacherdialog: false,
      teacherdialoga: false,
      teacherdialogtitle: null,
      searchdate: null, //选择时间
      // startTime: null, //开始时间
      // endTime: null, //结束时间
      searchParam: {
        pageNo: "1",
        pageSize: "10",
        summaryDate: null, //选择时间
        // startDate: null,
        // endDate: null,
      },
      queryFeeMonthly: {
        teacherNo: null,
        trainOrgId: null,
        departId: null,
        pageNo: "1",
        pageSize: "10"
      },
      queryTeacherFeeDetail: {
        teacherNo: null,
        teachingDate: null
      },
      querytableFee: {
        teacherNo: null,
        teachingDate: null,
        pageNo: '1',
        pageSize: '10',
      }
    })
    watch(
    )
    const columns = ref([
      {
        title: '编号 ',
        dataIndex: 'trainOrgId',
        key: 'trainOrgId',
        ellipsis: true,
        align: "center",
        width:'100px',
      },
      {
        title: '资源归属 ',
        dataIndex: 'trainOrgName',
        key: 'trainOrgName',
        ellipsis: true,
        align: "center",
        width: '200px',
      },
      {
        title: '汇总周期 ',
        dataIndex: 'summaryDate',
        key: 'summaryDate',
        ellipsis: true,
        align: "center",
        width:'60px'
      },
      {
        title: '汇总日期 ',
        dataIndex: 'summaryTime',
        key: 'summaryTime',
        ellipsis: true,
        align: "center",
        width: '88px',
      },
      {
        title: '汇总金额 ',
        dataIndex: 'summaryTotal',
        key: 'summaryTotal',
        ellipsis: true,
        align: "center",
        width: '60px',
      },
      {
        title: '操作 ',
        dataIndex: 'operation',
        key: 'operation',
        ellipsis: true,
        align: "center",
        fixed: "right",
        width: '60px',
        scopedSlots: { customRender: "action" },
      },
    ])
    //列表数据
    const tableData = ref([
    ])
    // 搜索
    const searchSubmit = () => {
      state.searchParam.pageNo = 1
      getTableDate();
    };
     //修改时间
     const searchTimeChange = (e, date) => {
      // console.log(date);
      // console.log(state.searchdate );
      // state.searchdate =date;
      // // console.log(date, state.searchParam.startDate, state.searchParam.endDate);
    };
    //二级页面搜索
    const searchFeeMonthlya = () => {
      TeacherSystem()
    }
    //  List接口数据
    const getTableDate = (obj) => {
      state.tableLoading = true
      let objA = { ...state.searchParam };
      objA.summaryDate = state.searchdate ? dayjs(state.searchdate).format("YYYY-MM") : "",
      console.log(objA)
      expenseSummaryList(objA)
        .then((res) => {
          tableData.value = res.data.data.records
          state.tableDataTotal = Number(res.data.data.total);
          state.tableLoading = false
        })
    };
    getTableDate()
    //重新汇总上月数据
    const searchResetPrevious=()=>{
      dialog({
        content: '正在重新汇总上月数据，请稍后手动刷新列表...',
        ok: () => {
          CreateMonthSummary().then(res=>{
            console.log(res,'ersssss')
            getTableDate();
          })
        }
      })
    }
     //重置
     const searchReset = () => {
      state.searchdate=null,
        state.searchParam = { 
          pageNo: "1",
        pageSize: "10",
        summaryDate: null,
        trainOrgId: null,
        };
        getTableDate();
      };
    //   // 翻页
    const changePagination = (page, pageSize) => {
      state.searchParam.pageNo = page;
      // state.pageNo = page;
      state.searchParam.pageSize = pageSize;
      getTableDate();
    };
    //二级列表翻页
    const changeFeeDetailPagination = (page, pageSize) => {
      state.queryFeeMonthly.pageNo = page;
      state.currentPage2 = page;
      state.pageSize2 = pageSize;
      TeacherSystem()
    };
    //讲师信息弹窗
    const handleModify = (record) => {
      state.teacherdialog = true;
      state.teacherdialogtitle = '月度统计详情'
      TeacherSystem()
    }
    const TrainOrglist = ref([
    ])
    //获取培训发生组织
    const TrainOrglista = () => {
      getTrainOrg().then((res) => {
        console.log(res,'ressss')
        if (res.data.code === 200) {
          let arr = res.data.data.records;
          let array = [];
          arr?.map((value) => {
            let obj = {
              value: value.id,
                label: value.affiliationName,
            };
            array.push(obj);
          });
          TrainOrglist.value = array;
        }
        console.log("获取发薪地",TrainOrglist);
      })
    }
    TrainOrglista()
    //获取所属组织
    const getOrganizationList = ref([
      //   { value: 0, systemName: "讲师体系" },
    ]);
    //获取所属组织
    const getOrganizationLista = () => {
      // console.log('getOrganizationList')
      getOrganization().then((res) => {
        if (res.data.code === 200) {
          let arr = res.data.data.records;
          let array = [];
          arr?.map((value) => {
            let obj = {
              value: value.affiliationCode,
              label: value.affiliationName,
            };
            array.push(obj);
          });
          getOrganizationList.value = array;
        }
      })
    }
    getOrganizationLista()
    //二级页面取消按钮
    const cancelTeacherDialog = () => {
      if (state.teacherdialog = true) {
        state.teacherdialog = false
        cancel()
      }
    };
    //三级页面取消按钮
    const cancelTeacherDialoga = () => {
      state.teacherdialoga = false
    };
    //清空数据
    const cancel = () => {
      state.queryFeeMonthly = {
        teacherNo: null,
        trainOrgId: null,
        departId: null,
        pageNo: "1",
        pageSize: "10"
      }
    }
    //表格内查看数据操作
    const handleLook = (record) => {
      // let id = record.id
      // const trainOrgId = record.trainOrgId
      state.opendrawer = true
      state.drawerId = record.id
      // router.push({ path: '/MonthlyStatistics', query: { id,trainOrgId,name:'' } })
      // state.teacherdialog = true;
      // state.teacherdialogtitle = '讲师费月度统计详情'
      // state.summaryDate = record.summaryDate;
      // state.resbgTxt = record.resbgTxt
      // state.queryFeeMonthly.summaryDate = record.summaryDate
      // TeacherSystem()
    }
    const tableDataFeeDetail = ref([
    ])
    //详情 
    const TeacherSystem = () => {
      queryTeacherFeeMonthly(state.queryFeeMonthly).then((res) => {
        // state.formParam=Object.assign({} ,res.data.data)
        state.formParam = res.data.data
        state.tableDataFeeDetailTotal = Number(res.data.data.total);
        tableDataFeeDetail.value = res.data.data.records
      })
        .catch((err) => {
          console.log("详情", err);
        });
    }
    //二级页面列表
    const columnsFeeDetail = ref([
      {
        title: '讲师工号',
        dataIndex: 'teacherNo',
        key: 'teacherNo',
        ellipsis: true,
        width: 150,
      },
      {
        title: '讲师姓名 ',
        dataIndex: 'teacherName',
        key: 'teacherName',
        ellipsis: true,
        width: 150,
      },
      {
        title: '所属组织 ',
        dataIndex: 'teacherOrg',
        key: 'teacherOrg',
        ellipsis: true,
        width: 150,
      },
      {
        title: '讲师发薪地 ',
        dataIndex: 'teacherpayrollPlace',
        key: 'teacherpayrollPlace',
        ellipsis: true,
        width: 150,
      },
      {
        title: '授课时长(系统 , H) ',
        dataIndex: 'teachingTime',
        key: 'teachingTime',
        ellipsis: true,
        width: 150,
      },
      {
        title: '授课时长统计 ',
        dataIndex: 'teachingTime',
        key: 'teachingTime',
        ellipsis: true,
        width: 150,
      },
      {
        title: '课酬基准 ',
        dataIndex: 'teacherlevelPay',
        key: 'teacherlevelPay',
        ellipsis: true,
        width: 150,
      },
      {
        title: '计划费用 ',
        dataIndex: 'expense',
        key: 'expense',
        ellipsis: true,
        width: 150,
      },
      {
        title: '应发费用 ',
        dataIndex: 'payableExpense',
        key: 'payableExpense',
        ellipsis: true,
        width: 150,
      },
      {
        title: '操作 ',
        dataIndex: 'operationa',
        key: 'operationa',
        ellipsis: true,
        width: 300,
        scopedSlots: { customRender: "action" },
      },
    ])
    //二级页面表格内查看数据操作
    const handleLooka = (record) => {
      state.teacherdialoga = true
      state.queryTeacherFeeDetail = {
        teacherNo: record.teacherNo,
        teachingDate: state.queryFeeMonthly.summaryDate,
      }
      state.querytableFee = {
        teacherNo: record.teacherNo,
        teachingDate: state.queryFeeMonthly.summaryDate,
        pageNo: '1',
        pageSize: '10',
      }
      teacherFeeDetailList()
      teacherFeeList()
    }
    //三级页面 A 列表 getTeacherFeeDetailListByTeacherNo
    const tableDetailList = ref([

    ])
    const teacherFeeDetailList = () => {
      getTeacherFeeDetailListByTeacherNo(state.queryTeacherFeeDetail).then((res) => {
        tableDetailList.value = res.data.data
      }
      )
    }
    //三级a列表
    const columnstableDetailList = ref([
      {
        title: '讲师工号',
        dataIndex: 'teacherNo',
        key: 'teacherNo',
        ellipsis: true,
        width: 150,
      },
      {
        title: '讲师姓名 ',
        dataIndex: 'teacherName',
        key: 'teacherName',
        ellipsis: true,
        width: 150,
      },
      {
        title: '培训发生组织 ',
        dataIndex: 'trainOrg',
        key: 'trainOrg',
        ellipsis: true,
        width: 150,
      },
      {
        title: '讲师发薪地 ',
        dataIndex: 'teacherpayrollPlace',
        key: 'teacherpayrollPlace',
        ellipsis: true,
        width: 150,
      },
      {
        title: '授课时长统计(系统 , H) ',
        dataIndex: 'teachingTime',
        key: 'teachingTime',
        ellipsis: true,
        width: 150,
      },
      {
        title: '授课时长统计(录入 , H) ',
        dataIndex: 'inputteachingTime',
        key: 'inputteachingTime',
        ellipsis: true,
        width: 150,
      },
      {
        title: '授课时长统计(导入 , H) ',
        dataIndex: 'importteachingTime',
        key: 'importteachingTime',
        ellipsis: true,
        width: 150,
      },
      {
        title: '课酬基准 ',
        dataIndex: 'teacherlevelPay',
        key: 'teacherlevelPay',
        ellipsis: true,
        width: 150,
      },
      {
        title: '计划费用 ',
        dataIndex: 'expense',
        key: 'expense',
        ellipsis: true,
        width: 150,
      },
      {
        title: '应发费用 ',
        dataIndex: 'payableExpense',
        key: 'payableExpense',
        ellipsis: true,
        width: 150,
      },
    ])
    //三级页面 B 列表 getTeacherFeeListByTeacherNo
    const tableFeeList = ref([])
    const teacherFeeList = () => {
      getTeacherFeeListByTeacherNo(state.querytableFee).then((res) => {
        tableFeeList.value = res.data.data.records
        console.log("获取tableFeeList", tableFeeList);
      }
      )
    }
    //三级b列表
    const columnstableFeeList = ref([
      {
        title: '讲师级别',
        dataIndex: 'levelName',
        key: 'levelName',
        ellipsis: true,
        width: 150,
      },
      {
        title: '认证状态 ',
        dataIndex: 'certStatus',
        key: 'certStatus',
        ellipsis: true,
        width: 150,
        customRender: (value) => {
          return (
            <div>
              {value.record.certStatus == 0 || value.record.certStatus == 1
                ? {
                  "0": "未认证",
                  "1": "已认证",
                }[value.record.certStatus + ""] || ""
                : "-"}
            </div>
          )
        }
      },
      {
        title: '费用类型 ',
        dataIndex: 'courseType',
        key: 'courseType',
        ellipsis: true,
        width: 150,
        customRender: (value) => {
          return (
            <div>
              {value.record.courseType == "0" || value.record.courseType == "1" || value.record.courseTypeype == "2" || value.record.courseTypeype == "3" || value.record.courseTypeype == "4"
                ? {
                  "0": "在线",
                  "1": "面授",
                  "2": "授课",
                  "3": "课程开发",
                  "4": "作业员如模培训",
                }[value.record.courseType + ""] || ""
                : "-"}
            </div>
          )
        }
      },
      {
        title: '课程名称 ',
        dataIndex: 'teachingDate',
        key: 'teachingDate',
        ellipsis: true,
        width: 150,
      },
      {
        title: '授课日期 ',
        dataIndex: 'teachingDate',
        key: 'teachingDate',
        ellipsis: true,
        width: 150,
      },
      {
        title: '课程开发日期',
        dataIndex: 'courseDevelopTime',
        key: 'courseDevelopTime',
        ellipsis: true,
        width: 150,
      },
      {
        title: '培训发生组织',
        dataIndex: 'trainOrg',
        key: 'trainOrg',
        ellipsis: true,
        width: 150,
      },
      {
        title: '参训学员人数',
        dataIndex: 'studentNum',
        key: 'studentNum',
        ellipsis: true,
        width: 150,
      },
      {
        title: '授课满意度 ',
        dataIndex: 'courseAssess',
        key: 'courseAssess',
        ellipsis: true,
        width: 150,
      },
      {
        title: '授课时长(H) ',
        dataIndex: 'teachingTime',
        key: 'teachingTime',
        ellipsis: true,
        width: 150,
      },
      {
        title: '课程开发时长 ',
        dataIndex: 'courseDevelopDate',
        key: 'courseDevelopDate',
        ellipsis: true,
        width: 150,
      },
      {
        title: '操作 ',
        dataIndex: 'operationc',
        key: 'operationc',
        ellipsis: true,
        width: 300,
        scopedSlots: { customRender: "action" },
      },
    ])
    // 二级页面导出
    const handleFeeMonthly = () => {
      window.open(
        `${process.env.VUE_APP_BASE_API}/teacher/fee/exportTeacherMonthlyFee?pageNo=${state.currentPage2
        }&pageSize=${state.pageSize2}
        &userNo=${state.queryFeeMonthly.trainOrgId ? state.queryFeeMonthly.trainOrgId : ""}
        &teacherNo=${state.queryFeeMonthly.teacherNo ? state.queryFeeMonthly.teacherNo : ""}
        &departId=${state.queryFeeMonthly.departId ? state.queryFeeMonthly.departId : ""}`)
    }
    //回车
    const enterPressHadlerSearch = e => {
  console.log("e",e);
    if (e.keyCode === 13) {
      searchSubmit()

    }
};
    return {
      ...toRefs(state), 
      router,
      enterPressHadlerSearch,
      searchReset,
      searchTimeChange,
      handleFeeMonthly,
      TeacherSystem,
      handleLook,
      handleLooka,
      cancel,
      cancelTeacherDialog,
      cancelTeacherDialoga,
      handleModify,
      changePagination,
      changeFeeDetailPagination,
      getTableDate,
      searchSubmit,
      searchFeeMonthlya,
      tableData,
      columns,
      TrainOrglist,
      TrainOrglista,
      tableDataFeeDetail,
      columnsFeeDetail,
      getOrganizationList,
      getOrganizationLista,
      tableDetailList,
      teacherFeeDetailList,
      tableFeeList,
      teacherFeeList,
      columnstableDetailList,
      columnstableFeeList,
      searchResetPrevious,

    }
  },
};
</script>
<style lang="scss" scoped>
//导出按钮icon
.daochu {
  width: 16px;
  height: 18px;
  background-image: url("../../assets/images/coursewareManage/export1.png");
}

//弹窗内详情样式
.display1 {
  display: inline-block;
  width: 200px;
}

// .display0{
// display:inline-block ;
// width:200px ;
// text-align:center }
//弹窗内确认取消按钮布局
.del_btnbox {
  display: flex;
  margin: 30px auto;
  justify-content: center;

  .del_btn {
    width: 100px;
    height: 40px;
    background: rgba(64, 158, 255, 0);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;

    .btnText {
      font-size: 14px;
      font-weight: 400;
      line-height: 40px;
    }
  }

  .btn1 {
    border: 1px solid rgba(64, 158, 255, 1);
    color: #4ea6ff;
    margin-right: 14px;
  }

  .btn2 {
    background-color: #4ea6ff;
    color: #ffffff;
  }
}

.ant-table-cell-fix-right {
  width: 300px !important;
}

.ant-table-tbody>tr>td {
  text-align: center;
}

.ExternalLecturer {  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .filter {
    margin-left: 38px;
    margin-right: 38px;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
      .select {
        margin-right: 20px;
        margin-bottom: 10px;
      }
    }}

.delete {
  z-index: 9999;
  width: 424px;
  background: #ffffff;
  box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
  border-radius: 4px;
  position: absolute;
  left: 30%;
  top: 10%;
  // transform: translate(-50%, -50%);

  .del_header {
    position: absolute;
    width: calc(100%);
    height: 40px;
    background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
        rgba(78, 166, 255, 0) 100%);
  }

  .del_main {
    width: 100%;
    position: relative;

    .header {
      display: flex;
      align-items: center;
      padding-top: 20px;
      padding-left: 26px;
      font-size: 16px;

      .del-icon {
        width: 16px;
        height: 16px;
        margin-right: 10px;
        background-image: url(@/assets/images/coursewareManage/notice.png);
        background-size: 100% 100%;
      }

      .icon {
        width: 16px;
        height: 16px;
        margin-right: 10px;
        background-image: url(@/assets/images/coursewareManage/QR.png);
        background-size: 100% 100%;
      }

      .close_exit {
        position: absolute;
        right: 42px;
        cursor: pointer;
        width: 20px;
        height: 20px;
        background-image: url(@/assets/images/coursewareManage/close.png);
        background-size: 100% 100%;
      }
    }

    .body {
      width: 100%;
      margin: 34px auto 56px auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .del_btnbox {
      display: flex;
      margin: 30px auto;
      justify-content: center;

      .del_btn {
        width: 100px;
        height: 40px;
        background: rgba(64, 158, 255, 0);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 14px;
        flex-shrink: 0;
        cursor: pointer;

        .btnText {
          font-size: 14px;
          font-weight: 400;
          line-height: 40px;
        }
      }

      .btn1 {
        border: 1px solid rgba(64, 158, 255, 1);
        color: #4ea6ff;
      }

      .btn2 {
        background-color: #4ea6ff;
        color: #ffffff;
      }
    }
  }
}

.CreatePath {
  .out {
    z-index: 9999;
    display: block;
    position: absolute;
    top: 90px;
    width: 1080px !important;
    height: 650px;
    overflow: auto;
    background-color: #fff;

    box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
    left: 50%;
    top: 300px;
    transform: translate(-50%, -50%);

    .top {
      width: 100%;
      height: 68px;

      background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
          rgba(78, 166, 255, 0) 100%);
      display: flex;
      align-items: center;

      .topimg {
        width: 18px;
        height: 18px;
        margin-left: 27px;
        margin-top: -2px;
      }

      .topc {
        color: #000000;
        font-size: 16px;
        margin-left: 8px;
      }
    }

    .mid {
      width: 100%;
      height: 100%;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;

      .d {
        // margin-top: 8px;
        // color: #ff4e4e;
        margin-left: -5px;
      }
    }
  }
}

// 重置样式
.resetbtn {
  width: 100px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  flex-shrink: 0;
  cursor: pointer;
}

//展开收起样式
.moreidbtn {
  border: none;
  color: #4ea6ff;
  width: 80px
}

//小竖线
.line{
  float:left; width: 3px; height: 25px; background: #4ea6ff;border-radius: 30%; margin-right: 5px;
}
//抽屉功能
.drawaer
/* 改变所有 a-tree-select 输入框的高度 */
.ant-tree-select .ant-select-selection {
  height: 40px;
  line-height: 40px;
  /* 确保文字垂直居中 */
}
.draitem{
 width: 100%;
  height: 40px !important; 
  border-radius: 8px;
  line-height: 40px;
}
.drabtn{
  height:40px;
  width:80px;
  border-radius:8px;
  margin-right:20px
}
::v-deep  .ant-select:not(.ant-select-customize-input) .ant-select-selector{
  border-radius:8px;
  height:40px;
}
.ant-col-12{
  height:90px;
}
.item_inp {
            flex: 1;
            text-align: center ;
            .i_upload_img {
              width: 100px;
              height: 100px;
              border-radius: 8px;
            }

            .i_upload {
              width: 100px;
              height: 100px;
              border: 1px solid #4ea6ff;
              border-radius:50%;
              text-align: center;
              align-items: center;
              cursor: pointer;

              .addimg {
                position: relative;

                .heng {
                  position: absolute;
                  top: 50px;
                  left: 25px;
                  width: 50px;
                  border: 1px solid #4ea6ff;
                }

                .shu {
                  position: absolute;
                  top: 25px;
                  left: 50px;
                  height: 50px;
                  border: 1px solid #4ea6ff;
                }
              }
            }

            .ant-upload.ant-upload-select-picture-card {
              border: 0px !important;
              border-radius: 50%!important;
            }
          }
          .ant-upload.ant-upload-select-picture-card {
            border: 0px !important;
              border-radius: 50%!important;
          }
          .tableBox {
padding-bottom: 20px;
margin: 20px 38px 30px;
::v-deep .ant-select-dropdown{
 display: inline-block;
}
::v-deep .ant-select-selection-item{
margin-left: 3px;
}
::v-deep .ant-pagination-options-size-changer.ant-select{
width: 84px;
}
.pa {
width: 100%;
display: flex;
justify-content: right;
}
}
</style>
  