<template>
  <basic-container>
    <avue-crud :option="option"  :span-method="spanMethod" :table-loading="loading" :page.sync="page" :data="data" ref="crud" v-model="form"
      :permission="permissionList" :before-open="beforeOpen" :before-close="beforeClose" @row-del="rowDel"
      @row-update="rowUpdate" @row-save="rowSave" @search-change="searchChange" @search-reset="searchReset"
      @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
      @refresh-change="refreshChange" @on-load="onLoad" @tree-load="treeLoad">
      <template slot-scope="{row}" slot="num">
        <div v-for="item1 in row.detailList.map(item => item.period + item.timeFrame)" >{{item1}}</div>
      </template>
      <template slot-scope="{row}" slot="count">
        <div v-for="item2 in row.detailList.map(item1 => item1.numberNum)" >{{item2}}</div>
      </template>
      <template slot-scope="{row}" slot="people">
        <div :class="item1.apmNum == item1.numberNum ? 'cla' : ''"  v-for="item1 in row.detailList" >{{item1.apmNum}}</div>
      </template>
      <template slot-scope="{row}"
                slot="hosId">
        <span v-text='row.createDeptName'></span>
      </template>
      <template slot-scope="{row}" slot="menu">
        <el-button type="text"  @click="handleRegister(row)" :disabled="Date.parse(new Date(row.apmDay)) <= selectDay ? true : false">修改</el-button>
      </template>
      <template slot-scope="scope" slot="menuLeft">
      <el-button  type="primary"
        icon="el-icon-plus"
        size="small" @click="addNumber">添加号源</el-button>
    </template>
    </avue-crud>
    <el-drawer
      :visible.sync="isNumber"
      :append-to-body="true"
      @close="closeDraw"
      custom-class="number_box"
      :wrapperClosable="false"
      >
      <div slot="title" class="title_box">
        <div class="title_txt">
          <div class="txt">{{title}}</div>
        </div>
        <div class="sub_txt">{{subtitle}}</div>
      </div>
      <div class="tab_box" v-if="isShow">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane  :label="item.dictValue" :name="item.dictValue" v-for="item in tabArr" :key="item.dictValue">
            <div class="form_box">
              <avue-form ref="addFrom" :option="item.addOption" v-model="item.addForm"></avue-form>
            </div>
            
          </el-tab-pane>
        </el-tabs>
        <div class="hos_box" v-show="isShowHos" style="margin-right:10px">投放医院</div> <el-select v-show="isShowHos"  v-model="deptName" placeholder="请选择医院">
          <el-option
            v-for="item in hospitalArr"
            :key="item.id"
            :label="item.deptName"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div v-show="!isShow">
        <el-calendar v-model="calValue">
          <template
          slot="dateCell"
          slot-scope="{date, data}">
          <p :class="[Date.parse(new Date(data.day)) <= selectDay  ? 'selected' : 'select',dayArr.find(item => item == data.day) ? 'isSelected' : '']" @click="clickCalc(data.day)">
             {{ data.day.slice(-2) }}
          </p>
        </template>
        </el-calendar>
      </div>
      <div class="button_box" >
        <el-button @click="closeDraw">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </div>
      <div class="button_box" v-show="!isShow">
        <el-button @click="closeDraw">取消</el-button>
        <el-button type="primary" @click="clickSubmit">提交</el-button>
      </div>
    </el-drawer>
  </basic-container>
</template>

<script>
import {getNumList,getExamProject,addExamProject,getHosList,examProjectDetail,getDays} from "@/api/booknumber/booknumber";
import {getUserInfo,getList} from '@/api/system/user'
import { mapGetters } from "vuex";
export default {
  data() {
    
    return {
      deptName:"",
      form: {},
      selectionList: [],
      query: {},
      calValue:new Date(),
      title:'投放号源',
      subtitle:'请先设置时段以及对应号源数量后选择该号源投放日期。',
      loading: true,
      parentId: 0,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      isShow:true,
      addForm: {
        addData: []
      },
      addForm1: {
        addData: []
      },
      selectDay:'',
      addOption:{},
      addOption1:{},
      activeName: '',
      isNumber:false,
      option: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: false,
        editBtn:false,
        delBtn:false,
        addBtn:false,
        selection: true,
        saveBtn:false,
        updateBtn:false,
        cancelBtn:false,
        dialogType: 'drawer',
        dialogClickModal: false,
        column: [
          {
            label: "体检项目",
            prop: "project",
          },
          {
            label: "日期",
            prop: "apmDay",
            html: true,
            formatter: value => {
              return `<div>${value.apmDay.substring(0, 10)}</div>`
            }
          },
          // {
          //   label: "日期",
          //   prop: "releaseTime",
          //   type: "date",
          //   format: "yyyy-MM-dd",
          //   valueFormat: "yyyy-MM-dd",
          //   search: true,
          //   viewDisplay:false,
          //   hide:true,
          //   searchValue:new Date().getFullYear() + '-' + ((new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : ((new Date().getMonth() + 1))) + '-' + (new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()),
          //   searchClearable:false
          // },
          {
            label: "日期",
            prop: "releaseTime",
            type: "daterange",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            searchRange: true,
            search: true,
            hide: true,
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期',
          },
          {
            label:'医院',
            prop:'hosId',
            type:'select',
            // hide: true,
            viewDisplay:false,
            props: {
              label: 'deptName',
              value: 'id'
            },
            slot:true,
            dicUrl: '/api/blade-system/dept-hospital/list-hospital',
            search:true
          },
          {
            label: "体检项目",
            prop: "projectName",
            type: "select",
            hide: true,
            dicData:[
                {
                    label:'全部',
                    value:'全部'
                },
            ],
            search: true,
            searchValue:'全部',
            viewDisplay:false,
          },
          {
            label:'放号时段',
            prop:"num",
            slot:true,
            overHidden:true
          },
          {
            label: "号源数量",
            prop: "count",
            slot:true
          },
          {
            label: "预约人数",
            prop: "people",
            slot:true
          },
        ]
      },
      data: [],
      count:0,
      dayArr:[],
      depId:'',
      tabArr:[],
      tabsArr:[],
      roleName:'',
      isSelect:false,
      hospitalArr:[],
      isEdit:false,
      valTime:'',
      isShowHos:false,
      tabArr1:[],
      deadline:''
    };
  },
  computed: {
   
  },
  mounted() {
    if(this.userInfo.role_name !== 'hospital'){
      // this.isShowHos = true
      this.selectDay = new Date().getTime();
      this.option.column.find(item => item.prop == "hosId").search = true
    }else{
      this.selectDay = new Date().getTime() + 3600 * 1000 * 24 * (this.deadline - 1)
      // this.isShowHos = false
      this.option.column.find(item => item.prop == "hosId").search = false
    }
    var validateTime = (rule, value, callback)=>{
      if (value == this.valTime) {
        callback(new Error('该放号时段已被设置,请重新选择放号时段'));
      } else {
        this.valTime = value
        callback();
      }
    };
    var validateTime1 = (rule, value, callback)=>{
      if (value == this.valTime) {
        callback(new Error('该放号时段已被设置,请重新选择放号时段'));
      } else {
        this.valTime = value
        callback();
      }
    };
    getExamProject().then(res =>{
      res.data.data.map((item,index) =>{
        this.option.column.find(item => item.prop == "projectName").dicData.push({
          label:item.dictValue,
          value:item.dictValue,
        })
         this.tabArr.push({
            dictValue:item.dictValue,
            dictKey:item.dictKey,
            addOption:{
              submitBtn:false,
              emptyBtn:false,
              column: [
                {
                  label:'上午',
                  prop: 'addData',
                  type: 'dynamic',
                  span:24,
                  children: {
                    align: 'center',
                    headerAlign: 'center',
                    column: [
                      {
                        label: "时段设置",
                        prop:'timerange',
                        type: 'timerange',
                        format:'hh:mm a',
                        valueFormat:'HH:mm',
                        popperClass:'time',
                        rules: [
                          {
                            required: true,
                            message: '请选择放号时段',
                            trigger: 'blur'
                          },
                          { validator: validateTime, trigger: 'blur' }
                        ]
                      },
                      {
                        label:'放号数量',
                        prop:'num',
                        controlsPosition:'',
                        type:'number',
                        min:0,
                        max:20,
                        span:10,
                        rules: [
                          {
                            required: true,
                            message: '请选择放号数量',
                            trigger: 'blur'
                          }
                        ]
                      }
                    ]
                  }
                },
                {
                  label:'下午',
                  prop: 'addData1',
                  type: 'dynamic',
                  span:24,
                  children: {
                    align: 'center',
                    headerAlign: 'center',
                    column: [
                      {
                        label: "时段设置",
                        prop:'timerange',
                        type: 'timerange',
                        format:'hh:mm a',
                        valueFormat:'HH:mm',
                        popperClass:'time',
                        rules: [
                          {
                            required: true,
                            message: '请选择放号时段',
                            trigger: 'blur'
                          },
                          { validator: validateTime1, trigger: 'blur' }
                        ]
                      },
                      {
                        label:'放号数量',
                        prop:'num',
                        controlsPosition:'',
                        type:'number',
                        min:0,
                        max:20,
                        span:10,
                        rules: [
                          {
                            required: true,
                            message: '请选择放号数量',
                            trigger: 'blur'
                          }
                        ]
                      }
                    ]
                  }
                },
              ]
            },
            addForm:{
              addData:[],
              addData1:[]
            }
         })
        this.tabArr1 = this.tabArr;
      })
    });
    getDays().then(res =>{
      console.log(res)
      this.deadline = res.data.data[0].dictValue
    })
  },
  computed:{
    ...mapGetters(["userInfo", "permission"]),
  },
  methods: {
    clickCalc(day){
      let tmp = this.dayArr.find(item => item == day)
      if(!tmp){
        this.dayArr.push(day)
      }else{
        this.dayArr = this.dayArr.filter(item => item != tmp)
      }
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
    },
    beforeOpen(done, type) {
      done();
    },
     searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    // 点击新增按钮
    addNumber(){
      this.activeName = this.tabArr[0].dictValue;
      this.isNumber = true;
      this.isShow = true;
      this.isEdit = false
      this.deptName = '';

      this.tabArr = this.tabArr1
      this.tabArr.map(item =>{
        item.addForm={
              addData: [
                {
                  timerange: '08:00am,08:30am',
                  num: 0
                },
                {
                  timerange: '08:30am,09:00am',
                  num: 0
                },
                {
                  timerange: '09:00am,09:30am',
                  num: 0
                },
                {
                  timerange: '09:30am,10:00am',
                  num: 0
                }
              ],
              addData1: [
                {
                  timerange: '13:00,13:30',
                  num: 0
                },
                {
                  timerange: '13:30,14:00',
                  num: 0
                },
                {
                  timerange: '14:00,14:30',
                  num: 0
                },
                {
                  timerange: '14:30,15:00',
                  num: 0
                }
              ],
            }
      })
      if(this.userInfo.role_name !== "hospital"){
        this.selectDay = new Date().getTime();
        this.isShowHos = true
        // this.tabArr.map(item =>{
        //   // item.addOption.column.find(item1 => item1.prop == "select").display = true
        // })
        
      }else{
        console.log(this.deadline)
          this.selectDay = new Date().getTime() + 3600 * 1000 * 24 * (this.deadline - 1);
          // console.log(new Date(this.selectDay))
          this.isShowHos = false
          // this.tabArr.map(item =>{
          //   // item.addOption.column.find(item1 => item1.prop == "select").display = false
          // })
        
      }
    },
    // 点击修改按扭
    handleRegister(row){
      console.log(row)
      this.isEdit = true;
      this.deptName = row.createDept
      this.tabArr = this.tabArr1
      let values = {
          createDept:row.createDept,
          project:row.project,
          apmDay:row.apmDay.substr(0,10)
      }
      this.dayArr = []
      this.dayArr.push(row.apmDay.substr(0,10))
      examProjectDetail(values).then(res =>{
        let data = res.data.data;
        this.isNumber = true;
        this.isShow = true;
        this.activeName = data[0].project;
        // let val = this.tabArr.find(item => item.dictValue == this.activeName);
        
        this.tabArr.map(item => {
            if(this.userInfo.role_name !== 'hospital'){
              // item.addOption.column.find(item => item.prop == "select").display = true;
              this.isShowHos = true;
              this.selectDay = new Date().getTime();
            }else{
              this.isShowHos = false
              this.selectDay = new Date().getTime() + 3600 * 1000 * 24 * (this.deadline - 1);
              // item.addOption.column.find(item => item.prop == "select").display = false
            }
            if(item.dictValue == this.activeName){
            item.addForm.addData = [];
            item.addForm.addData1 = [];
            data[0].createDept = "1623571646250143746"
            item.addForm.select = data[0].createDept;
            data.map(item1 =>{
              if(item1.period == '上午'){
                item1.timeFrame = item1.timeFrame.replace('-','am,').concat('am')
                item.addForm.addData.push({
                  num:item1.numberNum,
                  timerange:item1.timeFrame
                })
              }else{
                let index = item1.timeFrame.indexOf(":");
                let index1 = item1.timeFrame.indexOf("-");
                let tmp = (parseInt(item1.timeFrame.slice(0,item1.timeFrame.indexOf(":"))) + 12) + item1.timeFrame.slice(item1.timeFrame.indexOf(":"));
                let tmp1 = tmp.substring(0,index1 + 2) + (parseInt(tmp.substring(index1 + 2,tmp.indexOf(":",index + 2))) + 12) + tmp.substring(tmp.indexOf(":",index + 2))
                item1.timeFrame = tmp1.replace('-',',')
                item.addForm.addData1.push({
                  num:item1.numberNum,
                  timerange:item1.timeFrame
                })

              }
            })
            return
          }else{
            item.addForm.addData = []
            item.addForm.addData1 = []
            item.addForm.addData.push(
                {
                  timerange: '08:00am,08:30am',
                  num: 0
                },
                {
                  timerange: '08:30am,09:00am',
                  num: 0
                },
                {
                  timerange: '09:00am,09:30am',
                  num: 0
                },
                {
                  timerange: '09:30am,10:00am',
                  num: 0
                }
            )
            item.addForm.addData1.push(
              {
                  timerange: '13:00,13:30',
                  num: 0
                },
                {
                  timerange: '13:30,14:00',
                  num: 0
                },
                {
                  timerange: '14:00,14:30',
                  num: 0
                },
                {
                  timerange: '14:30,15:00',
                  num: 0
                }
            )
            return
          }
        })
        this.tabArr = this.tabArr.filter(item => item.dictValue == this.activeName)
          
      })
    },
    handleClick(tab, event){
      let tmp = this.tabArr.find(item => item.dictValue == tab.label);
      // tmp.addForm = {
      //         addData: [
      //           {
      //             timerange: '08:00am,08:30am',
      //             num: 1
      //           },
      //           {
      //             timerange: '08:30am,09:00am',
      //             num: 1
      //           },
      //           {
      //             timerange: '09:00am,09:30am',
      //             num: 1
      //           },
      //           {
      //             timerange: '09:30am,10:00am',
      //             num: 1
      //           }
      //         ],
      //         addData1: [
      //           {
      //             timerange: '13:00,13:30',
      //             num: 1
      //           },
      //           {
      //             timerange: '13:30,14:00',
      //             num: 1
      //           },
      //           {
      //             timerange: '14:00,14:30',
      //             num: 1
      //           },
      //           {
      //             timerange: '14:30,15:00',
      //             num: 1
      //           }
      //         ]
      //       }
    },
    
    handleSubmit(value,done){
      this.count = 0;
      this.tabArr.map(item =>{
        item.addForm.addData.map(item1 => this.count += item1.num)
        item.addForm.addData1.map(item1 => this.count += item1.num)
      })
      if(this.userInfo.role_name !== "hospital"){
        if(this.deptName == ''){
          this.$message.error('请选择医院')
          return
        }
      }else{
        console.log(this.userInfo)
        this.deptName = this.userInfo.dept_id 
      }
      
      if(this.tabArr[0].addForm.addData.length == 0 && this.tabArr[1].addForm.addData.length == 0 
        && this.tabArr[2].addForm.addData.length == 0 && this.tabArr[0].addForm.addData1.length == 0
        &&  this.tabArr[1].addForm.addData1.length == 0 && this.tabArr[2].addForm.addData1.length == 0){
        this.$message.error('请至少添加一条数据');
        done()
      }else if(this.count == 0){
        this.$message.error('号源数量不可为0');
        done()
      }else{
        if(this.isEdit){
          this.$confirm(`是否对此时段号源进行增加号源数量变更？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            customClass:'dialog_box'
          }).then(() => {
            this.isShow = true;
            this.title = '放号日期';
            this.subtitle = '请选择配置号源投放的具体日期。'
            this.clickSubmit()
            // done()
          }).catch((err) => {   
            console.log(err)      
            // done()
          });
        }else{
          this.dayArr = []
          this.$confirm(`该天投放号源为${this.count}人次, 是否确认?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            customClass:'dialog_box'
          }).then(() => {
            this.isShow = false;
            this.title = '放号日期';
            this.subtitle = '请选择配置号源投放的具体日期。'
            done()
          }).catch(() => {  
            done()
          });
        }
        
      }
    },
    // 提交放号
    clickSubmit(){
      // this.tabArr.find(item => {
      //   console.log('ces =>', item.addForm.select)
      // })
      let values = {
        dayList:this.dayArr,
        createDept:this.deptName,
      }
      let configListVOS = []
      this.tabArr.map(item =>{
        configListVOS.push({
          createDept:values.createDept,
          project:item.dictValue,
          detailList:[]
        })
      })
      if(this.isEdit){
        this.tabArr.map(item =>{
          configListVOS.map(item1 =>{
              if(item1.project == item.dictValue){
                item.addForm.addData.map(item2 =>{
                    item1.detailList.push({
                      period:'上午',
                      timeFrame:item2.timerange.replace(",","-").replaceAll('am',''),
                      numberNum:item2.num,
                    })
                })
                item.addForm.addData1.map(item3 =>{
                  let startTime = (parseInt(item3.timerange.substr(0,2)) - 12) + item3.timerange.substr(2,3);
                  let endTime = (parseInt(item3.timerange.substr(6,7)) - 12) + item3.timerange.substr(8,9)
                    item1.detailList.push({
                      period:'下午',
                      timeFrame:startTime + '-' + endTime,
                      numberNum:item3.num,
                    })
                })
              }
          })
        })
        values.configListVOS = configListVOS
      }else{
        this.tabArr.map(item =>{
          configListVOS.map(item1 =>{
              if(item1.project == item.dictValue){
                item.addForm.addData.map(item2 =>{
                  if(item2.num !== 0){
                    item1.detailList.push({
                      period:'上午',
                      timeFrame:item2.timerange.replace(",","-").replaceAll('am',''),
                      numberNum:item2.num,
                    })
                  }
                })
                item.addForm.addData1.map(item3 =>{
                  let startTime = (parseInt(item3.timerange.substr(0,2)) - 12) + item3.timerange.substr(2,3);
                  let endTime = (parseInt(item3.timerange.substr(6,7)) - 12) + item3.timerange.substr(8,9)
                  if(item3.num !== 0){
                    item1.detailList.push({
                      period:'下午',
                      timeFrame:startTime + '-' + endTime,
                      numberNum:item3.num,
                    })
                  }
                })
              }
          })
        })
        configListVOS = configListVOS.filter(item => item.detailList.length !== 0);
        values.configListVOS = configListVOS
      }
      console.log(values)
      addExamProject(values).then(res =>{
        console.log(res)
       if(res.data.code == 200){
        this.$message.success('放号成功');
        this.onLoad(this.page)
        this.isNumber = false
       }
      })
    },
    closeDraw(){
      this.isNumber = false
    },
    
    beforeClose(done) {
      done();
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      const { releaseTime,project,createDept } = this.query;
      let values = {};
      this.hospitalArr = []
      // this.userInfo.role_name = "hospital"
      if(this.userInfo.role_name !== "hospital"){
        getHosList().then(res =>{
          this.hospitalArr = res.data.data;
          this.option.column[2].search =  true;
          this.option.column[2].dicData = this.hospitalArr;
        })
      }else{
        this.query.hosId = this.userInfo.dept_id
      }
       if(releaseTime){
          values = {
            startTime:this.query.releaseTime[0],
            endTime:this.query.releaseTime[1],
            project:this.query.projectName == '全部' ? '' : this.query.projectName,
            createDept:this.query.hosId
          };
        }else{
          values = {
            // startTime : new Date().getFullYear() + '-' + ((new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : ((new Date().getMonth() + 1))) + '-' + (new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()),
            // endTime : new Date().getFullYear() + '-' + ((new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : ((new Date().getMonth() + 1))) + '-' + (new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()),
            startTime:'',
            endTime:'',
            createDept:this.query.hosId,
            project:''
          }
        }
        getNumList(page.currentPage, page.pageSize,values).then(res =>{
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
        })
    },
  }
};
</script>

<style lang='scss' scoped>
::v-deep .el-tabs__content{
  height: 550px;
}
::v-deep .cla{
  color: #F93A4A;
}
::v-deep .avue-input-number{
        width: 40% !important;
      }
::v-deep .el-calendar-day{
    display: flex;
    align-items: center;
    justify-content: center;
  }
 ::v-deep .selected{
    background: #EBEEF5;
    cursor: not-allowed;
    pointer-events:none;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
 ::v-deep .select{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  ::v-deep .isSelected{
    background: #1677FF;
  }
</style>
<style lang="scss">
.dialog_box{
    right: 10%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.el-drawer__wrapper{
  .number_box{
    width: 45% !important;
    overflow: hidden !important;
    .el-drawer__body{
      overflow: hidden;
    }
    .title_box{
      // padding: 0 40px;
      // margin-top: 40px;
      .title_txt{
        display: flex;
        height: 30px;
        align-items: center;
        justify-content: space-between;

        .txt{
          color: rgba(0,0,0,.85);
          font-weight: 500;
          line-height: 24px;

        }
        .img_box{
          img{
            width: 30px;
            height: 30px;
          }
        }
      }
      .sub_txt{
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        line-height: 16px;
      }
    }
    .tab_box{
      margin-top: 40px;
      padding: 0 40px;

      .hos_box{
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        margin-bottom: 20px;
      }

      .monment_txt{
        margin: 15px 0 20px 0;
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #333333;
      }
      .form_box{
        height: 650px;
        overflow: scroll;
      }
      
    }

    .button_box{
      width: 100%;
      height: 90px;
      background: #FFFFFF;
      box-shadow: 0px -8px 16px 1px rgba(32,50,101,0.15);
      position: absolute;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
 
}
 
</style>
