<!-- 归属组织 -->
<template>
 <!-- 搜索框及按钮 -->
 <div class="filter" style="min-width: 1380px; margin: 20px;" >
      <a-form   layout="inline">
        <a-form-item class="select">
          <div>
          <a-input style="width: 276px; height: 40px; border-radius: 8px" v-model:value="searchParam.name" placeholder="请输入工号/讲师姓名进行检索" />
          </div>
        </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="addTeacher()" type="primary" class="resetbtn" style="width: 130px;">
          <FolderAddOutlined /> 新增归属组织
        </a-button>
      </div>
      <a-table 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 >
                <lockLecturer :id="record.id" :title="'培训发生组织详情'">
                    <div style="color: #1890ff;">查看</div>
                </lockLecturer>
                <a-button type="link" @click="() => handleModify(record, String(record.courseform))">编辑</a-button>
                <a-button type="link" @click="() => deleteModal(record, String(record.courseform))">删除</a-button>
              </a-space>
            </template>
            </template>
            </a-table>
            <div class="tableBox ">
      <div style="float: right;">

        <a-pagination
          v-if="tableDataTotal > 10"
        :showSizeChanger="false"
        :showQuickJumper="true"
        :hideOnSinglePage="true"
        :pageSize="searchParam.pageSize"
        :current="searchParam.pageNo"
        :total="tableDataTotal"
        class="pagination"
        @change="changePagination"
      />
      </div>
    </div>
             <!-- 删除功能弹窗 -->
    <div>
      <a-modal v-model:visible="deleteInTeacherdialog" :footer="null" :closable="close"
        centered="true">
        <div class="delete">
          <div class="del_header"></div>
          <div class="del_main">
            <div class="header">
              <div class="icon1"></div>
              <span>提示</span>
            </div>
            <div class="body">
              <span>您确定要删除当前组织吗</span>
            </div>
            <div class="del_btnbox">
              <div class="del_btn btn2" @click="cancelTeacherDialog" style="margin-right: 32px">
                <div class="btnText">取消</div>
              </div>
              <div class="del_btn btn2" @click="closeDeleteTeacher">
                <div class="btnText">确定</div>
              </div>
            </div>
          </div>
        </div>
      </a-modal>
    </div>
    <!-- 抽屉 -->
    <a-drawer v-model:visible="teacherdialog" placement="right" @closa="cancelTeacherDialog" :maskClosable="true"
    width="60%"  :title="teacherdialogtitle">
    <a-form :model="formParam" :rules="rules" layout="vertical"   ref="formRef">
        <a-row :gutter="16">
          <a-col :span="24">
          <!-- <span class="line"></span><span>讲师体系基本信息</span> -->
        </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="培训发生组织编号：" name="affiliationCode">
        <a-input disabled v-model:value="formParam.affiliationCode"  class="draitem"
                  placeholder="请输入讲师体系编号" allowClear showSearch>
                  </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="培训发生组织名称：" name="affiliationName">
        <a-input  v-model:value="formParam.affiliationName"  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="code">
              <div style="display: flex;align-items: center;">
                <a-radio-group style="min-width:126px;" @change="selectRadio" v-model:value="formParam.isParent" name="radioGroup">
                  <a-radio :value="1">否</a-radio>
                  <a-radio :value="0">是</a-radio>
                </a-radio-group>
              <a-select v-model:value="formParam.code" placeholder="请选择根节点"
                :options="!formParam.isParent?PlaceOfPayList:PlaceOfPayListTwo" allowClear showSearch/>
              </div>
          </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="组织担当：" name="actValue">
            <!-- <a-select v-model:value="formParam.zzfzr" placeholder="请选择组织负责人"
                  :options="PlaceOfPayList" allowClear showSearch/> -->
              <ProjectManager :type="0" v-model:value="formParam.actValue" :placeholder="'请选择担当'" v-model:arrayList="formParam.actArray" ></ProjectManager>
          </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16" v-if="formParam.isParent">
          <a-col :span="12">
            <a-form-item label="一级审批人" name="leveOneValue">
              <!-- <a-select v-model:value="formParam.yjspr" placeholder="请选择一级审批人"
                  :options="PlaceOfPayList" allowClear showSearch/> -->
                  <ProjectManager :type="1" v-model:value="formParam.leveOneValue" :placeholder="'请选择一级审批人'" v-model:arrayList="formParam.leveOneArray" ></ProjectManager>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="二级审批人">
            <!-- <a-select v-model:value="formParam.zzfzr" placeholder="请选择二级审批人"
                  :options="PlaceOfPayList" allowClear showSearch/> -->
                  <ProjectManager :type="1" :placeholder="'请选择二级审批人'" v-model:arrayList="formParam.leveTwoArray" ></ProjectManager>
          </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12" v-if="formParam.isParent">
            <a-form-item label="三级审批人" >
              <!-- <a-select v-model:value="formParam.sjspr" placeholder="请选择三级审批人"
                  :options="PlaceOfPayList" allowClear showSearch/> -->
                  <ProjectManager :type="1" :placeholder="'请选择三级审批人'" v-model:arrayList="formParam.leveThreeArray" ></ProjectManager>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="备注" >
              <a-input v-model:value="formParam.remark" showCount :maxlength="200"
                style="width: 100%; height: 40px; border-radius: 8px" placeholder="请输入" />
            </a-form-item>
          </a-col>
        </a-row>
      <a-form-item label="选择管理组织">
        <a-row :gutter="50" style="margin-bottom: 10px;">
          <a-col :span="2">
      <!-- <a-tag color="blue" style="line-height: 40px; ">管理业务</a-tag> -->
       <a-button type="primary" @click="addContentData" style="width: 100px; height: 40px;border-radius: 8px">添加组织</a-button>
      </a-col>
      <!-- <a-col :span="20">
      <div class="add_content" @click="addContentData" >+</div>
      </a-col> -->
      </a-row>
        </a-form-item>
              <!-- 备注 remark -->
              <a-row :gutter="16" style="padding-bottom: 60px;">
          <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" placeholder="请输入" /> -->
                <a-table :dataSource="formParam?.affiliationOrgList" :columns="orgColumns"/>
            </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" :loading="buttonLoading">保存
                </a-button>
    </div>
    </a-drawer>
    <AddOrgContent :Addtitle="'选择组织'" v-model:showContent="showContent" v-model:AddContentList="formParam.affiliationOrgList" />
        </div>
</template>
<script lang="jsx">
import { reactive, toRefs, ref, watch } from "vue";
import {
  FolderAddOutlined
} from '@ant-design/icons-vue';
import { message } from "ant-design-vue";
import dialog from "@/utils/dialog";
import ProjectManager from "@/components/project/ProjectManagerLecturer";
import { queryTrainOrg,deleteTrainOrg,addReviewer,updateTrainOrg} from "../../api/organization";
import AddOrgContent from "../../components/project/AddOrgContent.vue"
import * as lecturer from "../../api/Lecturer.js";
import lockLecturer from "@/components/project/lockLecturer"
export default{
    name:"organization",
    components: {
        ProjectManager,
    FolderAddOutlined,//图标--新增
    AddOrgContent,
    lockLecturer

    },
    setup() {
      const formRef = ref();
      const state = reactive({
      vf:true,
      showContent: false,
      tableLoading:false,
      deleteInTeacherdialog:false,
      teacherdialog:false,
      teacherdialogtitle:null,
      delId:null,
      searchParam: {
        name:null,
        pageNo: "1",
        pageSize: "10"
      },
      formParam:{
        affiliationCode:null,
        affiliationName:null,
        isParent: 1,
        remark:null,
        actValue: null,
        actArray: [],
        leveOneValue: null,
        leveOneArray: [],
        leveTwoArray: [],
        leveThreeArray: [],
        code: null,
        affiliationOrgList: [],
      },
    })
    const PlaceOfPayList = ref([
      { value: '1', label: "一级审批人" },
      { value: '2', label: "二级审批人" },
      { value: '3', label: "三级审批人" },
    ])
    const PlaceOfPayListTwo = ref([
    { value: '1', label: "一级审批人" },
    ])
    const selectRadio = (val)=>{
      if(val.target.value == 1){
        state.formParam.leveOneArray = []
        state.formParam.leveTwoArray = []
        state.formParam.leveThreeArray = []
      }
      state.formParam.code = null
    }
    const columns = ref([
    {
        title: '培训发生组织编号 ',
        dataIndex: 'affiliationCode',
        key: 'affiliationCode',
        ellipsis: true,
        align: "center",
        width: 200,
      },
      {
        title: '培训发生组织名称 ',
        dataIndex: 'affiliationName',
        key: 'affiliationName',
        ellipsis: true, align: "center",
        width: 200,
      },
      {
        title: '是否为根节点（未命名） ',
        dataIndex: 'isParent',
        key: 'isParent',
        ellipsis: true, align: "center",
        width: 200,
        customRender: ({text})=>{
          return (
            text != 1 ? "是" : "否"
          )
        },
      },
      {
        title: '担当（未命名） ',
        dataIndex: 'leaderName',
        key: 'leaderName',
        ellipsis: true,
        align: "center",
        width: 200,
      },
      {
        title: '状态（未命名） ',
        dataIndex: 'type',
        key: 'type',
        ellipsis: true, align: "center",
        width: 160,
        customRender: ({text})=>{
          switch (text) {
            case '1':
              return <span>待审核</span>;
            case '2':
              return <span>审核中</span>;
            case '3':
              return <span>已完成</span>;
            case '4':
              return <span style={{ color: "red" }}>审核失败</span>;
            default:
              return <span>-</span>;
          }
        },
      },
      {
        title: '备注 ',
        dataIndex: 'remark',
        key: 'remark',
        ellipsis: true, align: "center",
        width: 160,
      },
      {
        title: '操作 ',
        dataIndex: 'operation',
        key: 'operation',
        width: 200,
        align: "center",
        fixed: 'right',
        scopedSlots: { customRender: "action" },
      },
])
const orgColumns = ref([
  {
    title: '组织名称',
    dataIndex: 'orgName',
    key: 'orgName',
  },
  {
    title: '是否被培训发生组织选择',
    dataIndex: 'isSelect',
    key: 'isSelect',
    customRender: (text) => {
      return (
        <div>
          {text.record.isSelect == 1 ? `${text.record.isSelect} (${text.record.orgName})` : "否 (-)"}
        </div>
      )
    }
  },
  {
    title: '担当',
    dataIndex: 'leaders',
    key: 'leaders',
    customRender: (text) => {
      return (
        <div>
          {text.record.leaders || '-'}
        </div>
      )
    }
  },
])
  //列表数据
  const tableData = ref([
])
//  List接口数据
const getTableDate = (obj) => {
      state.tableLoading = true
      let objA = { ...state.searchParam };
      queryTrainOrg(objA)
        .then((res) => {
          tableData.value = res.data.data.records
          state.tableDataTotal = Number(res.data.data.total);
          state.tableLoading = false
        })
    };
    getTableDate()
 // 搜索
 const searchSubmit = () => {
      getTableDate();
    };
    //重置
    const searchReset = () => {
      state.searchParam = {
        name:null,
        pageNo: 1,
        pageSize: 10,
      };
      getTableDate();
    };
      //   // 翻页
      const changePagination = (page, pageSize) => {
        state.searchParam.pageNo = page;
      // state.pageNo = page;
      state.searchParam.pageSize = pageSize;
      getTableDate();
    };
      //删除弹窗
      const deleteModal = (record) => {
        dialog({
          content: '是否确认进行删除 ?',
          ok: () => {
            lecturer.affiliationDelById(record.id).then(res=>{
              console.log(res,'res')
              message.success("删除成功")
              getTableDate();
            }).catch(err=>{
              console.log(err,'errr')
              message.error(err.msg)
            })
          }
        })
    };
     //确认删除
     const closeDeleteTeacher = () => {
      //调用删除接口
      deleteTrainOrg({kid:state.delId}).then((res) => {
        if (res.data.code == 200) {
          // message.success("删除成功");
          state.deleteInTeacherdialog = false
          getTableDate();
        }
      })
    }
     //取消按钮 清空输入的数据
     const cancelTeacherDialog = () => {
      if (state.teacherdialog = true) {
        formRef.value.resetFields();
        state.teacherdialog = false
        
      }
      cancel()
      state.deleteInTeacherdialog = false
      state.editTeacher = false
    };
    const addTeacher=()=>{
        state.teacherdialog=true ,
        state.teacherdialogtitle="新增归属组织"
        state.vf = true
        lecturer.getAffiliationCode().then(res=>{
          state.formParam.affiliationCode = res.data.data
        }).catch(()=>{
          message.error('获取归属组织编号失败')
        })
    }
    const addContentData = () => {
      state.showContent = true
    }
      //修改信息弹窗
      const handleModify = (record) => {
        lecturer.getAffiliationById(record.id).then(res=>{
          console.log(res,'resssss')
          state.formParam = res.data.data
          const actArray = res.data.data.affiliationUserList.filter(item=>item.type == 0)
          const leveOneArray = res.data.data.affiliationUserList.filter(item=>item.type == 1)
          const leveTwoArray = res.data.data.affiliationUserList.filter(item=>item.type == 2)
          const leveThreeArray = res.data.data.affiliationUserList.filter(item=>item.type == 3)
          state.formParam.actArray = actArray.map(item => {
            return {
              label: item.userName + item.userNo,
              value: item.userId,
              ...item
            };
          });
          state.formParam.actValue = state.formParam.actArray.map(item => item.label).join(',');
          state.formParam.leveOneArray = leveOneArray.map(item => {
            return {
              label: item.userName + item.userNo,
              value: item.userId,
              ...item
            };
          });
          state.formParam.leveOneValue = state.formParam.leveOneArray.map(item => item.label).join(',');
          state.formParam.leveTwoArray = leveTwoArray.map(item => {
            return {
              label: item.userName + item.userNo,
              value: item.userId,
              ...item
            };
          });
          state.formParam.leveThreeArray = leveThreeArray.map(item => {
            return {
              label: item.userName + item.userNo,
              value: item.userId,
              ...item
            };
          });
          state.teacherdialog = true;
          state.teacherdialogtitle = '修改归属组织'
          state.vf = false
        })
      // TeacherSystem(record)
    }
   const  TeacherSystem =(record)=>{
      state.formParam.affiliationCode=record.affiliationCode
      state.formParam.affiliationName=record.affiliationName
      state.formParam.remark=record.remark
    }
    const cancel=()=>{
      state.formParam={
        affiliationCode:null,
        affiliationName:null,
        isParent: 1,
        remark:null,
        actValue: null,
        actArray: [],
        leveOneValue: null,
        leveOneArray: [],
        leveTwoArray: [],
        leveThreeArray: [],
        code: null,
        affiliationOrgList: [],
      }
    }
    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,'state.formParam')
     state.formParam.affiliationUserList = [...state.formParam?.actArray,...state.formParam?.leveOneArray,...state.formParam?.leveTwoArray,...state.formParam?.leveThreeArray]
    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)
      }
    }
    dialog({
      content: '是否确认提交，一旦提交将进入（BPM系统）审核流程。',
      ok: () => {
        if (state.vf == false) {
          updateTrainOrg(state.formParam).then(response => {
            message.success("修改成功");
            state.teacherdialog = false;
            cancel()
            getTableDate();
          });
        }else {
          addReviewer(state.formParam).then((res) => {
            message.success("保存成功");
            state.teacherdialog = false;
            cancel()
            getTableDate();
          })
        }
      }
    })
   };
    const rules = {
      affiliationCode: [{ required: true, message: '',log:'培训发生组织编号不能为空' }],
      affiliationName: [{ required: true, message: '',log:'培训发生组织名称不能为空' }],
      code: [{ required: true, message: '',log:'根节点不能为空' }],
      actValue: [{ required: true, message: '',log:'组织担当不能为空' }],
      leveOneValue: [{ required: true, message: '"',log:'一级审批人不能为空' }],
    

    }
    return{
        ...toRefs(state),
        rules,
        formRef,
        columns,
        orgColumns,
        tableData,
        getTableDate,
        searchSubmit,
        selectRadio,
        PlaceOfPayList,
        PlaceOfPayListTwo,
        searchReset,
        deleteModal,
        cancelTeacherDialog,
        addTeacher,
        addContentData,
        handleModify,
        closeDeleteTeacher,
        changePagination,
        TeacherSystem,
        createTeacherDialog,
        validateField,
    }
    }
}

</script>
<style lang="scss" scoped>

.add_content{
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 50%;
  background-color: #4ea6ff;
  text-align: center;
  line-height: 40px;
  color: #ffffff;
  font-size: 26px;
}
//导出按钮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;
}

.InsideLecturer {  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
position: relative;
  .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: 20px;
      }
    }}

.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;
  line-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;
          }

</style>