<template>
  <div class="appedit">
    <div class="header">
      <div class="headerTitle">编辑讲师费审批</div>
      <img
          style="width: 29px; height: 29px; cursor: pointer"
          src="../../assets/images/basicinfo/close.png"
          @click="closeDrawer"
        />
    </div>
    <div class="content">
      <div class="title">
        <div class="line"></div>
        <div class="text">基本信息</div>
      </div>
      <div class="desc">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="培训发生组织编号">{{formData?.code||'-'}}</a-descriptions-item>
          <a-descriptions-item label="培训发生组名称">{{formData?.trainOrgName||'-'}}</a-descriptions-item>
          <a-descriptions-item label="是否为根节点">{{formData?.isParent==1?'否':'是'}}</a-descriptions-item>
          <a-descriptions-item label="组织担当">{{formData?.act||'-'}}</a-descriptions-item>
          <a-descriptions-item label="状态">
            {{{0:'待确认' ,1:'待提交' ,2:'审核中', 3:'审核通过', 4:'审核拒绝'}[formData?.status]}}
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <div class="title">
        <div class="line"></div>
        <div class="text">基本信息</div>
      </div>
      <div class="desc">
        <div class="input_box">
          <div class="input">
            <a-input style="height:40px;border-radius:8px;" v-model:value="params.userNoName" placeholder="请输入工号/讲师名称进行搜索" allowClear />
          </div>
          <div class="input">
            <a-range-picker style="height:40px;border-radius:8px;" @change="dateChange" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" v-model:value="dateValue" />
          </div>
          <div class="input">
            <a-button style="margin-right: 15px;height:40px;border-radius:8px;" type="primary" @click="search">搜索</a-button>
            <a-button style="height:40px;border-radius:8px;" type="primary" @click="reset">重置</a-button>
          </div>
        </div>
        <div style="margin-bottom: 20px;">
          <a-button @click="searchResetPrevious()" type="primary" class="langbtn" style="width: 150px; height: 40px; border-radius: 8px" >
          重新汇总讲师费
          </a-button>
        </div>
        <div class="table">
          <a-table
            :columns="columns"
            :dataSource="dataList"
            :loading="loading"
            :scroll="{ x: 'max-content' }"
            :pagination="pagination"
          >
            <template #appEdit="{ record }">
              <a-button type="link" :disabled="record.createFrom==1  ?false :true" @click="edit(record)">编辑</a-button>
              <a-button type="link" @click="recome(record)">移除</a-button>
            </template>
          </a-table>
        </div>
      </div>
    </div>
    <div class="btnn">
      <button class="btn2" @click="closeDrawer">取消</button>
      <button class="btn2" @click="paramsDrawer">提交</button>
    </div>
  </div>
  <a-drawer v-model:visible="teacherdialog" placement="right" @closa="cancelTeacherDialog" :maskClosable="true" dropdown-style="drawaer"
    width="60%" title="编辑讲师费">
    <a-form :model="formParam" :rules="rules" layout="vertical" ref="formRef" >
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="讲师名称" name="name">
            <SearchTeacher @tlevel="tlevelChange" v-model:id="formParam.teacherId" v-model:value="formParam.name" v-model:orgId="formParam.orgId" v-model:lable="formParam.orgName" v-model:user="formParam.userNo"
              v-model:system="tSystemNames" v-model:payrollPlaceCode="formParam.payrollPlaceId"
              v-model:payrollPlaceName="formParam.payrollPlace" v-model:level="formParam.tlevelId" ></SearchTeacher>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="讲师工号" name="userNo">
            <a-input class="draitem"  v-model:value="formParam.userNo"  disabled
              placeholder="请输入讲师工号" allowClear showSearch> 
            </a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="讲师组织" name="orgName">
            <a-popover>
              <template #content>
                {{ formParam.orgName }}.
              </template>
              <a-input disabled v-model:value="formParam.orgName" class="draitem"
                placeholder="自动带出讲师的组织,展示主要部分,鼠标浮上去展示所有" allowClear showSearch>
              </a-input>
            </a-popover>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="讲师体系" name="tsystemName">
            <a-input disabled v-model:value="tSystemNames.systemName" class="draitem"
              placeholder="自动带出讲师的体系" allowClear showSearch>
            </a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="讲师级别"  name="tlevelName">
            <a-input disabled v-model:value="formParam.tlevelName" class="draitem"
              placeholder="自动带出讲师级别" allowClear showSearch>
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="讲师发薪地"  name="payrollPlace ">
            <a-input disabled v-model:value="formParam.payrollPlace" class="draitem"
              placeholder="自动带出讲师发薪地" allowClear showSearch >
            </a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="费用类型"  name="courseType">
            <a-select class="draitem" v-model:value="formParam.courseType" placeholder="请选择费用类型"
              :options="courseTypeList">
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="课程名称"  name="courseName ">
            <a-input v-model:value="formParam.courseName"  placeholder="请输入面授课名称" class="draitem">
            </a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="授课/课程日期 :" name="teachingDate">
            <a-date-picker class="draitem" v-model:value="teachingDate" style="width:100%" format="YYYY-MM-DD"
            placeholder="请选择课程日期"  />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="授课时长" name="teachingTime">
            <a-input v-model:value="formParam.teachingTime" style="width:80%; height: 40px; border-radius: 8px; "
              @blur="clearNonNumber" placeholder="0" allowClear showSearch suffix="分钟">
            </a-input>
            <span style="margin-left: 5px ;" v-if="formParam.teachingTime != null">{{
              (formParam.teachingTime / 60).toFixed(2) }}小时</span>
            <span style="margin-left: 5px ;" v-if="formParam.teachingTime == null">0.00小时</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="参训人数" name="studys">
            <a-input  v-model:value="formParam.studys" class="draitem" @blur="clearstudysNumber" 
              placeholder="0 " allowClear showSearch  >
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="评分" name="score">
            <a-input class="draitem" v-model:value="formParam.score"  placeholder="0" 
              @blur="clearscoreNumber" allowClear >
            </a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="课酬基准" name="levelPay">
            <a-input v-model:value="formParam.levelPay" placeholder="可手动更改"
              @blur="clearlevelPayNumber"
              allowClear  class="draitem">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="计划费用" name="expense">
            <a-input class="draitem" v-model:value="formParam.expense"  placeholder="" allowClear   disabled
              showSearch>
            </a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="应发费用" name="payableExpense">
            <a-input  v-model:value="formParam.payableExpense" class="draitem"
              placeholder="0 " allowClear>
            </a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="备注">
            <a-textarea v-model:value="formParam.remark" showCount :maxlength="200"
              style="width: 100%; height: 100px; border-radius: 8px ;margin-bottom:50px" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
      <div :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }">
        <a-button  class="drabtn"  @click="cancelTeacherDialog">取消</a-button>
        <a-button   class="drabtn" type="primary" @click="createTeacherDialog">保存
        </a-button>
      </div>
  </a-drawer>
  <a-modal
    :visible="modalVisible"
    :footer="null"
    :title="null"
    :centere="true"
    :closable="false"
    style="margin-top: 400px"
    :zIndex="9"
    @cancel="close"
  >
    <div class="delete">
      <div class="del_header"></div>
      <div class="del_main">
        <div class="header">
          <div class="del-icons">
            <img src="@/assets/images/coursewareManage/QR.png" alt=""/>
          </div>
          <span>提示</span>
          <div class="close_exit" @click="close"></div>
        </div>
        <div class="body">
          <div style="margin-top: 30px;">
            <span>自动添加的讲师费不可直接编辑，需在数据源头进行修改</span>
          </div>
        </div>
        <div class="del_btnbox">
          <div class="del_btn btn2" @click="close">
            <div class="btnText">取消</div>
          </div>
          <div class="del_btn btn2" @click="handleConfirm">
            <div class="btnText">复制课程名称</div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script lang="jsx">
import { ref, reactive,toRefs,watch,onMounted,computed } from 'vue'
import { submitApproval,updateTeacherFee,getTeacherFeeDetail,withdrawRecord,queryById,queryExpnseByBillId,CreateSummaryAgain, } from "../../api/lecturerFeeManagement";
import SearchTeacher from "@/components/project/SearchTeacher";
import { useRouter,useRoute } from 'vue-router'
import dialog from '@/utils/dialog'
import dayjs from "dayjs";
import { message } from 'ant-design-vue';
export default {
  components: {
    SearchTeacher,
  },
  setup () {
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      params: {
        pageNo: 1,
        pageSize: 10,
        total: 100,
        userNoName: null,
        startTime: null,
        endTime: null,
      },
      paramsId: route.query.id,
      copyName: null,
      modalVisible: false,
      tSystemNames:{
        systemName:null,
        systemId: null,
        levelVoList: []
      },
      teachingDate:null,
      formData: {

      },
      formParam: {
        teachingDate:null ,
        teachingTime:null,
        name: null,
        userNo: null,
        payrollPlace: null,
        payrollPlaceId: null,
        orgName:null,
        tsystemName:null,
        tlevelId:null,
        courseType: null,
        courseName:null,
        studys:null,
        teacherlevelPay:null,
        score:null,
        levelPay:null,
        payableExpense:null,
        expense:null,
        remark:null,
      },
      teacherdialog: false,
      dateValue: [],
      dataList: [],
      loading: false,
    })
    onMounted(()=>{
      queryById({id: state.paramsId}).then(res=>{
        state.formData = res.data.data
      })
      getTableList()
    })
    const getTableList = () => {
      state.loading = true
      queryExpnseByBillId({
        id: state.paramsId,
        pageNo: state.params.pageNo,
        pageSize: state.params.pageSize,
        name: state.params.userNoName,
        startTime: state.params.startTime,
        endTime: state.params.endTime
      }).then(res => {
        state.dataList = res.data.data.records
        state.params.total = Number(res.data.data.total);
        state.loading = false
      })
    }
    const dateChange = (e) => {
      if(e){
        state.params.startTime = e[0];
        state.params.endTime = e[1];
      }else{
        state.params.startTime = null;
        state.params.endTime = null;
      }
    }
    const pagination = computed(() => ({
      total: state.params.total,
      showSizeChanger: false,
      showQuickJumper:true,
      current: state.params.pageNo,
      pageSize: state.params.pageSize,
      onChange: paginationChange,
    }));
    const paginationChange = (e,pageSize) => {
      state.params.pageNo = e;
      state.params.pageSize = pageSize
      getTableList();
    };
    const close = () => {
      state.modalVisible = false;
      state.copyName = null;
    }
    const search = () => {
      state.params.pageNo = 1
      getTableList()
    }
    const reset = () => {
      state.params.userNoName = null
      state.params.startTime = null
      state.params.endTime = null
      state.dateValue = []
      search()
    }
    const searchResetPrevious = () => {
      dialog({
        content: '正在重新汇总数据，请稍后...',
        ok: () => {
          CreateSummaryAgain().then(res=>{
            search();
          }).catch(err=>{
            message.error(err.data.msg)
          })
        }
      })
    }
    const handleConfirm = () => {
      navigator.clipboard.writeText(state.copyName).then(() => {
        message.success('复制成功')
        close()
      }).catch(() => {
        message.error('复制失败,请重新尝试')
      });
    }
    const clearlevelPayNumber = () => {
      state.formParam.levelPay = state.formParam?.levelPay.replace(/\D/g, '');
      state.formParam.expense = state.formParam?.levelPay*state.formParam?.teachingTime
    }
    const  clearscoreNumber= () => {
      state.formParam.score = state.formParam?.score?.replace(/\D/g, '');
    }
    const clearstudysNumber = () => {
      state.formParam.studys = state.formParam?.studys?.replace(/\D/g, '');
    }
    const clearNonNumber = () => {
      state.formParam.teachingTime = state.formParam?.teachingTime?.replace(/\D/g, '');
      state.formParam.expense = state.formParam?.levelPay*state.formParam?.teachingTime
    }
    const courseTypeList = ref([
      { value: '0', label: "在线" },
      { value: '1', label: "面授 " },
      { value: '2', label: "授课 " },
      { value: '3', label: "课程开发" },
      { value: '4', label: "作业员如模培训" },
    ])
    const formRef = ref();
    const tlevelChange = (e) => {
      state.formParam.tlevelName = e?.tlevelName
      state.formParam.tlevelId = e?.tlevelId
    }
    watch(()=>state.formParam.name,(val)=>{
      state.formParam.userNo = val?.split('/')[1]
    })
    async function validateField(name) {
      return new Promise((resolve) => {
        formRef.value.validateFields([name])
          .then(() => {
            resolve(false);
          })
          .catch(() => {
            resolve(true);
          });
      });
    }
    const createTeacherDialog = async () => {
      console.log(state.formParam,'formParam')
      state.formParam.expense = String(state.formParam.expense)
      state.formParam.teachingDate=state.teachingDate ? dayjs(state.teachingDate).format("YYYY-MM-DD").toString() : ""
      state.formParam.tsystemName = state.tSystemNames.systemName
      state.formParam.tsystemId = state.tSystemNames.systemId
      const formItemNames = Object.keys(rules);
      for(let i=0;i<formItemNames.length;i++){
        const result = await validateField(formItemNames[i]);
        if (result) {
          return message.error(rules[formItemNames[i]][0].log)
        }
      }
      state.formParam = {...state.formParam,...state.tSystemNames}
      state.formParam.name = state.formParam?.name?.split('/')[0]
      dialog({
        content: '是否确定提交',
        ok: ()=>{
          updateTeacherFee(state.formParam).then(res => {
            message.success("修改成功");
            state.teacherdialog = false;
            search()
          });
        }
      })
    };
    const cancelTeacherDialog = () => {
      formRef.value.resetFields();
      state.teacherdialog = false
      cancel()
    };
    const cancel = () => {
      state.formParam ={
        name:null,
        userNo:null,
        orgName:null,
        tsystemName:null,
        tlevelId:null,
        payrollPlace:null,
        courseType: null,
        courseName:null,
        teachingDate:null,
        teachingTime:null,
        studys:null,
        teacherlevelPay:null,
        score:null,
        levelPay:null,
        payableExpense:null,
        expense:null,
        remark:null,
      }
      state.teachingDate=null
      state.tSystemNames = {
        systemName:null,
        systemId: null,
        levelVoList: []
      }
    }
    const rules = {
      name: [{ required: true, message:'',log: '讲师不能为空' }],
      userNo: [{ required: true, message: '',log:'讲师工号不能为空' }],
      orgName: [{ required: true, message: '',log:'讲师组织不能为空' }],
      tsystemName: [{ required: true, message:'',log: '讲师体系不能为空' }],
      tlevelName: [{ required: true, message:'',log: ' 讲师级别 不能为空' }],
      payrollPlace: [{ required: true, message:'',log: '讲师发薪地 不能为空' }],
      courseType: [{ required: true, message: '',log:'费用类型不能为空' }],
      courseName: [{ required: true, message:'',log: '课程名称不能为空' }],
      teachingDate: [{ required: true, message:'',log: '授课日期不能为空' }],
      teachingTime: [{ required: true, message:'',log: ' 授课时长不能为空' }],
      studys: [{ required: true, message: '',log:' 参训人数不能为空' }],
      score: [{ required: true, message:'',log: ' 评分不能为空' }],
      levelPay: [{ required: true, message:'',log: '课酬基准 不能为空' }],
      expense: [{ required: true, message: '',log:'计划费用不能为空' }],
    }
    const closeDrawer = () => {
      reset()
      router.push({
        path: '/lecturerfeemanagement',
        query:{activeKey:true}
      })
    }
    const paramsDrawer = () => {
      dialog({
        content: '是否确定提交',
        ok: ()=>{
          submitApproval().then(res=>{
            closeDrawer()
          })
        }
      })
    }
    const edit = (record) => {
      console.log(record,'record')
      if(record.id == 2){
        state.modalVisible = true;
        state.copyName = record.name
        return
      }
      state.teacherdialog = true
      getTeacherFeeDetail({id : record.id||6}).then((res) => {
        state.formParam=res.data.data
        state.formParam.courseType = String(res.data.data.courseType)
        state.formParam.levelPay = String(res.data.data.levelPay)
        state.tSystemNames.systemName = res.data.data.tsystemName
        state.tSystemNames.systemId = res.data.data.tsystemId
        state.tSystemNames.systemCode = res.data.data.systemCode
        state.tSystemNames.levelVoList = res.data.data.levelVoList
        state.formParam.tlevelName = res.data.data.tlevelName
        state.formParam.tlevelId = res.data.data.tlevelId
        state.formParam.name = res.data.data.name+'/'+res.data.data.userNo
        state.teachingDate = dayjs(res.data.data.teachingDate)
      }).catch((err) => {
        console.log("详情", err);
      });
    }
    const recome = (record) => {
      console.log(record,'record')
      dialog({
        content: '确定要移除此条数据吗？',
        ok: () => {
          withdrawRecord({
            billId: 0,
	          ids: [record.id]
          }).then(res=>{
            message.success('移除成功')
            search()
          }).catch(err=>{
            message.error(err.msg)
          })
        }
      })
    }
    const columns = ref([
      {
        title: '讲师姓名 ',
        dataIndex: 'name',
        key: 'name',
        elipsis: true,
        align: "center",
        width: 200,
      },
      {
        title: '讲师工号',
        dataIndex: 'userNo',
        key: 'userNo',
        align: "center",
        elipsis: true,
        width: 200,
      },
      {
        title: '所属组织 ',
        dataIndex: 'orgName',
        key: 'orgName',
        elipsis: true,
        align: "center",
        width: 300,
        scopedSlots: { customRender: "teacherOrg" },
      },
      {
        title: '讲师体系',
        dataIndex: 'trainOrgName',
        key: 'trainOrgName',
        elipsis: true,
        align: "center",
        width: 200,
      },
      {
        title: '讲师等级',
        dataIndex: 'trainOrgName',
        key: 'trainOrgName',
        elipsis: true,
        align: "center",
        width: 200,
      },
      {
        title: '发薪地',
        dataIndex: 'trainOrgName',
        key: 'trainOrgName',
        elipsis: true,
        align: "center",
        width: 200,
      },
      {
        title: '课程类型',
        dataIndex: 'trainOrgName',
        key: 'trainOrgName',
        elipsis: true,
        align: "center",
        width: 200,
      },
      {
        title: '课程名称',
        dataIndex: 'trainOrgName',
        key: 'trainOrgName',
        elipsis: true,
        align: "center",
        width: 200,
      },
      {
        title: '授课/开发课程日期',
        dataIndex: 'teachingSystem',
        key: 'teachingSystem',
        elipsis: true,
        align: "center",
        width: 200,
      },
      {
        title: '授课/开发课程时长 ',
        dataIndex: 'teachingEnter',
        key: 'teachingEnter',
        elipsis: true,
        align: "center",
        width: 200,
      },
      {
        title: '参训人数 ',
        dataIndex: 'trainOrgName',
        key: 'trainOrgName',
        elipsis: true,
        align: "center",
        width: 200,
      },
      {
        title: '评分 ',
        dataIndex: 'trainOrgName',
        key: 'trainOrgName',
        elipsis: true,
        align: "center",
        width: 200,
      },
      {
        title: '课程基准 ',
        dataIndex: 'trainOrgName',
        key: 'trainOrgName',
        elipsis: true,
        align: "center",
        width: 200,
      },
      {
        title: '计划费用 ',
        dataIndex: 'expense',
        key: 'expense',
        elipsis: true,
        align: "center",
        width: 200,
      },
      {
        title: '应发费用 ',
        dataIndex: 'payableExpense',
        key: 'payableExpense',
        elipsis: true,
        align: "center",
        width: 200,
      },
      {
        title: '操作 ',
        dataIndex: 'operation',
        key: 'operation',
        elipsis: true,
        align: "center",
        fixed: "right",
        width: 200,
        slots: { customRender: "appEdit" },
      },
    ])

    return {
      ...toRefs(state),
      columns,
      closeDrawer,
      paramsDrawer,
      edit,
      rules,
      recome,
      validateField,
      tlevelChange,
      createTeacherDialog,
      cancelTeacherDialog,
      formRef,
      courseTypeList,
      clearlevelPayNumber,
      clearscoreNumber,
      clearstudysNumber,
      clearNonNumber,
      close,
      handleConfirm,
      search,
      dateChange,
      getTableList,
      reset,
      searchResetPrevious,
      pagination,
      paginationChange,
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .ant-select-single:not(.ant-select-customize-input) .ant-select-selector{
  height: 40px !important;
  line-height: 40px;
  border-radius: 8px
}
::v-deep  .ant-select:not(.ant-select-customize-input) .ant-select-selector{
  border-radius:8px;
  height:40px;
}
::v-deep .ant-descriptions-bordered .ant-descriptions-item-label{
  width: 200px;
}
.delete {
  min-width: 424px;
  background: #ffffff;
  box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
  border-radius: 4px;
  position: absolute;
  left: 50%;
  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-icons {
        width: 16px;
        height: 16px;
        position: relative;
        margin-right: 10px;

        img {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0px;
          left: 0px;
          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%;
      }

    }
    .title{
      padding: 0 30px;
      margin-top: 34px;
    }

    .body {
      width: 100%;
      padding: 0 30px;
      margin: 34px auto 56px auto;
      margin-top: 10px;
      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;
      }

    }
  }
}
.draitem{
  width: 100%;
  height: 40px !important; 
  border-radius: 8px;
  line-height: 40px;
}
.drabtn{
  height:40px;
  width:80px;
  border-radius:8px;
  margin-right:20px
}
.appedit {
  width: 100%;
  // margin: 0px 32px 0px 32px;
  overflow-x: auto;
  display: flex;
  flex-direction: column;

  .header {
    padding: 0px 32px;
    height: 73px;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // background-color: red;
    margin-bottom: 20px;
    flex-shrink: 0;

    .headerTitle {
      font-size: 18px;
      font-weight: 600;
      color: #333333;
      line-height: 25px;
      // margin-left: 24px;
    }
  }
  .content{
    margin: 0px 32px;
    padding-right: 20px;
    .title{
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .line{
        width: 5px;
        height: 15px;
        background: #4ea6ff;
        margin-right: 10px;
      }
      .text{

      }
    }
    .desc{
      margin-bottom: 30px;
      .input_box{
        display: flex;
        margin-bottom: 20px;
        .input{
          margin-right: 20px;
        }
      }
      .table{
        // padding-bottom: 70px;
      }
    }
  }

  .btnn {
    padding: 0px 32px;
    min-height: 70px;
    border-top: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: end;
    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);

    .btn1 {
      width: 100px;
      height: 40px;
      border: 1px solid #4ea6ff;
      border-radius: 8px;
      color: #4ea6ff;
      background-color: #fff;
      cursor: pointer;
    }

    .btn2 {
      cursor: pointer;
      width: 100px;
      height: 40px;
      background: #4ea6ff;
      border-radius: 8px;
      border: 0;
      margin-left: 15px;
      color: #fff;
    }
  }
}
</style>