<template>
  <div class="feed-summary-container">
    <div v-if="!show" class="feed-summary-inner">
      <div class="left-side-menu">
        <project-side-menu ref="profitloss" :menuTree="menuTreeList" :menuOptions="menuOptions" :unique-opened="false" v-model="defaultActive"
          @select="select">
          <template slot="措施费-1">
            <img src="@/assets/images/projectCostLedger/icon_cost_detail_4.svg" alt="">
            <div class="project-sub-menu-title-text">措施费</div>
          </template>
        </project-side-menu>
      </div>
      <div class="profitloss">
        <div class="search">
          <el-select v-model="expenseDate" @change="changetime" style="width: 140px;">
            <el-option v-for="item in dateoptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-button v-if="!isall && !isinput" type="primary" size="small" @click="addcost">添加实际成本</el-button>
          <el-button v-if="!isall && isinput" type="primary" size="small" @click="addinputs">保存</el-button>
        </div>
        <dsk-skeleton v-if="tableLoading"></dsk-skeleton>
        <!--汇总-->
        <div class="meafixed-table" v-if="isall">
          <el-table element-loading-text="Loading" :data="tableData" row-key="id" v-horizontal-scroll="'hover'" default-expand-all :max-height="tableHeight" v-if="tableData.length > 0 &&!tableLoading"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}" border highlight-current-row :cell-class-name="tored" :header-cell-class-name="tored"
            :header-cell-style="{ background:'#f0f3fa',color: 'rgba(35,35,35,0.8)'}">
            <el-table-column label="序号" width="60" align="left" type="index"></el-table-column>
            <el-table-column label="名称" width="220" prop="expenseName">
              <template slot-scope="scope">{{scope.row.expenseName || '--'}}</template>
            </el-table-column>
            <el-table-column label="数量" prop="expenseValue">
              <template slot-scope="scope">{{scope.row.expenseValue || '--'}}</template>
            </el-table-column>
            <el-table-column label="占比" prop="proportion">
              <template slot-scope="scope">{{scope.row.proportion || '--'}}</template>
            </el-table-column>
            <el-table-column label="本月工程量" prop="quantity">
              <template slot-scope="scope">{{scope.row.quantity || '--'}}</template>
            </el-table-column>
          </el-table>
        </div>
        <!--单条-->
        <div class="meafixed-table" v-else>
          <el-table element-loading-text="Loading" ref="edittable" :data="tableData" row-key="id"
                    :header-cell-style="{ background:'#f0f3fa',color: 'rgba(35,35,35,0.8)'}"
                    v-horizontal-scroll="'hover'"  :max-height="tableHeight"
                    v-if="tableData.length > 0 &&!tableLoading"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}" border highlight-current-row
                    :cell-class-name="tored1" :header-cell-class-name="tored1">
            <el-table-column label="序号" width="60" align="left" type="index" fixed="left"></el-table-column>
            <el-table-column label="清单内容" width="130" prop="itemContent" fixed="left">
              <template slot-scope="scope">{{scope.row.itemContent || '--'}}</template>
            </el-table-column>
            <el-table-column label="工作内容、做法/规格型号/施工现场配置说明" width="300" prop="workContent">
              <template slot-scope="scope">{{scope.row.workContent || '--'}}</template>
            </el-table-column>
            <el-table-column label="单位" width="130" prop="unit">
              <template slot-scope="scope">{{scope.row.unit || '--'}}</template>
            </el-table-column>
            <el-table-column label="工程量" width="130" prop="quantity">
              <template slot-scope="scope">{{scope.row.quantity || '--'}}</template>
            </el-table-column>
            <el-table-column label="不含税单价" width="130" prop="unitPriceExcludingTax">
              <template slot-scope="scope">{{scope.row.unitPriceExcludingTax || '--'}}</template>
            </el-table-column>
            <el-table-column label="使用时间" width="130" prop="usageTime">
              <template slot-scope="scope">{{scope.row.usageTime || '--'}}</template>
            </el-table-column>
            <el-table-column label="不含税合价" width="130" prop="amountExcludingTax">
              <template slot-scope="scope">{{scope.row.amountExcludingTax || '--'}}</template>
            </el-table-column>
            <el-table-column label="税率（%）" width="130" prop="taxRate">
              <template slot-scope="scope">{{scope.row.taxRate || '--'}}</template>
            </el-table-column>
            <el-table-column label="含税合价" width="130" prop="amountIncludingTax">
              <template slot-scope="scope">{{scope.row.amountIncludingTax || '--'}}</template>
            </el-table-column>
            <el-table-column label="摊销比例（%）" width="130" prop="amortizationRatio">
              <template slot-scope="scope">{{scope.row.amortizationRatio || '--'}}</template>
            </el-table-column>
            <el-table-column label="摊销后不含税合价" width="150" prop="amountExcludeTaxAmortized">
              <template slot-scope="scope">{{scope.row.amountExcludeTaxAmortized || '--'}}</template>
            </el-table-column>
            <el-table-column label="摊销后含税合价" width="150" prop="amountIncludeTaxAmortized">
              <template slot-scope="scope">{{scope.row.amountIncludeTaxAmortized || '--'}}</template>
            </el-table-column>
            <el-table-column label="税金（元）" width="130" prop="taxAmount">
              <template slot-scope="scope">{{scope.row.taxAmount || '--'}}</template>
            </el-table-column>
            <el-table-column label="成本科目" width="130" prop="costSubject">
              <template slot-scope="scope">{{scope.row.costSubject || '--'}}</template>
            </el-table-column>
            <el-table-column label="税金类型" width="130" prop="taxType">
              <template slot-scope="scope">{{scope.row.taxType || '--'}}</template>
            </el-table-column>
            <el-table-column label="本月工程量" width="130" prop="projectVolume">
              <template slot-scope="scope">
                <template v-if="isinput">
                  <el-input @blur="projectValue" v-model="scope.row.projectVolume "></el-input>
                </template>
                <template v-else>{{scope.row.projectVolume || '--'}}</template>
              </template>
            </el-table-column>
            <el-table-column label="截止本月工程量" width="130" prop="currentProjectVolume">
              <template slot-scope="scope">{{scope.row.suncurrentProjectVolume || '--'}}</template>
            </el-table-column>
            <el-table-column label="本月成本发生比例" width="150" prop="monthCostRate">
              <template slot-scope="scope">
                <template v-if="isinput">
                  <el-input v-model="scope.row.monthCostRate "></el-input>
                </template>
                <template v-else>{{scope.row.monthCostRate?scope.row.monthCostRate+'%':'--'}}</template>
              </template>
            </el-table-column>
            <el-table-column label="成本合价" width="130" prop="costEffective">
              <template slot-scope="scope">
                <template v-if="isinput">
                  <el-input v-model="scope.row.costEffective "></el-input>
                </template>
                <template v-else>{{scope.row.costEffective || '--'}}</template>
              </template>
            </el-table-column>
            <el-table-column label="本月差值" width="130" prop="difference">
              <template slot-scope="scope">{{$decimalFormat(scope.row.difference)}}</template>
            </el-table-column>
            <el-table-column label="截止本月差值" width="130" prop="sumDifference">
              <template slot-scope="scope">{{$decimalFormat(scope.row.sumDifference)}}</template>
            </el-table-column>

            <el-table-column label="备注" width="130" prop="remarks">
              <template slot-scope="scope">{{scope.row.remarks || '--'}}</template>
            </el-table-column>
            <!--<el-table-column label="是否推送" width="130">-->
              <!--<template slot-scope="scope">{{scope.row.pushTime?'是':'否'}}</template>-->
            <!--</el-table-column>-->
            <!--<el-table-column label="操作" width="130" fixed="right">-->
              <!--<template slot-scope="scope">-->
                <!--<span class="wordprimary" @click="pushwork(scope.row)">推送工程量</span>-->
              <!--</template>-->
            <!--</el-table-column>-->
          </el-table>
        </div>

      </div>
      <!--推送工程量-->
      <el-dialog class="pro-news" :visible.sync="dialogVisible" width="480px">
        <div class="poptitle">
          <span>推送工程量</span>
        </div>
        <el-form class="popform" label-width="120px" :model="queryParam" ref="ruleForm">
          <el-form-item label="分包项目名称" class="row">
            <el-input type="text" v-model="queryParam.projectName" placeholder="请输入分包项目名称"></el-input>
          </el-form-item>
          <el-form-item label="本月实际工程量" class="row">
            <el-input type="text" placeholder="请输入本月实际工程量" v-model="queryParam.projectVolume"></el-input>
          </el-form-item>
          <el-form-item label="需推送工程量" class="row">
            <el-input type="text" placeholder="请输入需推送工程量" v-model="queryParam.submitProjectVolume"></el-input>
            <span class="msgs" v-if="queryParam.submitProjectVolume>queryParam.currentProjectVolume">
              <font color="#FF3C3C">注：推送工程量不得大于实际产生的总工程量</font>
            </span>
          </el-form-item>
          <el-form-item label="IPM项目编码" class="row">
            <el-input type="text" placeholder="请输入IPM项目编码" v-model="queryParam.ipmProjectCode"></el-input>
          </el-form-item>
          <el-form-item label="IPM合同编码" class="row">
            <el-input type="text" placeholder="请输入IPM合同编码" v-model="queryParam.ipmContractCode"></el-input>
          </el-form-item>
          <el-form-item label="IPM作业编码" class="row">
            <el-input type="text" placeholder="请输入IPM作业编码" v-model="queryParam.ipmBizCode"></el-input>
          </el-form-item>
        </el-form>
        <div class="popbot">
          <div class="btn btn_cancel h32" @click="dialogVisible = false">取消</div>
          <div class="btn btn_primary h32" @click="savepro">确定推送</div>
        </div>
      </el-dialog>
      <!--添加实际成本-->
      <el-dialog class="pro-news" :visible.sync="cbVisible" width="480px" :close-on-click-modal="false" >
        <div class="poptitle">
          <span>填写实际成本</span>
        </div>
        <el-form class="popform" label-width="72px" style="height: 100px">
          <el-form-item label="成本年份" class="row">
            <el-date-picker size="small" style="width: 368px"
              v-model="chooseDate"
              type="month"
              placeholder="请选择所需添加的成本月份" @change="changeDate"
              value-format="yyyy-MM"
              :picker-options="pickerOptions">
              </el-date-picker>
          </el-form-item>
        </el-form>
        <div class="popbot">
          <div class="btn btn_cancel h32" @click="cbVisible = false">取消</div>
          <div class="btn btn_primary h32" @click="inputnum">确定</div>
        </div>
      </el-dialog>

    </div>
    <div class="no-data">
      <div class="no-data-box" v-if="show">
        <img :src="noData" alt="暂未获取物料数据（每月20号获取）" />
        <span>暂未获取物料数据（每月20号获取）</span>
      </div>
    </div>
  </div>
</template>
<script>
  import ProjectSideMenu from '@/views/projectCostLedger/detail/components/ProjectSideMenu'
  import {
    getActualMonthsApi,
    getCostMeasureslist,
    getMeasureslist,
    getSummarydata,
    projectVolume,
    pushProjectvolume,
    saveBatch
  } from '@/api/projectCostLedger'
  import { cloneDeep } from 'lodash-es'
  import DskSkeleton from "@/components/DskSkeleton";

  // 可编辑字段
  const editPropNames = [
    "projectVolume",
    "monthCostRate",
    "costEffective",
  ];

  export default {
  name: "MeasureItems",
  props: {
    // 项目ID
    projectId: {
      type: String,
      required: true,
      default: ""
    },
    // 详情信息
    projectDetailInfo: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    projectDetailInfo: {
      handler(newValue) {
        this.comProjectDetailInfo = newValue ? cloneDeep(newValue) : {};
        this.init(newValue.projectId);
      },
      deep: true
    },
    projectId: {
      handler(newValue) {
        this.comProjectId = newValue;
      }
    }
  },
  components: {
    ProjectSideMenu,
    DskSkeleton
  },
  data() {
    return {
      noData: require("@/assets/images/detail/noData.png"),
      // 加载数据列表
      tableLoading: true,
      pickerOptions: {
        disabledDate(time) {
          let istrue = true;
          let month = new Date().getMonth() + 1;
          let year = new Date().getFullYear();
          let times = (year + 5) + '-' + month + '-01 ' + '00:00:00';
          istrue = new Date().getTime() < time.getTime() && time.getTime() < new Date(times).getTime();
          return !istrue;
        },
      },
      menuOptions: {
        nodeName: "itemContent",
        nodeValue: "id",
      },
      comProjectDetailInfo: this.projectDetailInfo ? cloneDeep(this.projectDetailInfo) : {},
      comProjectId: this.projectId,
      defaultActive: "",
      menuTreeList: [],
      id: 0,
      expenseDate: '',
      tableData: [],
      originTableDataList: [],  //源数据列表
      isall: true,//是否汇总
      dialogVisible: false,
      queryParam: {},//推送工程量数据
      dateoptions: [],
      cbVisible:false,
      chooseDate:"",
      isinput:false,//是否填写
      tableHeight: window.innerHeight - 355,
      nowheight:null,
      resizeTimer:null,
      show:false,
    };
  },
  //可访问data属性
  created() {
    this.init(this.comProjectId);
    this.getHeight()
  },
  //计算集
  computed: {},
    beforeDestroy() {
      this.clearResizeTimer()
      if (this.observer) {
        this.observer.disconnect()
      }
    },
    //方法集
    methods: {
      projectValue(){
        // for(var i=0; i<this.tableData.length; i++){
        //   let value=0
        //   for(var j=0; j<this.tableData[i].children.length; j++){
        //     value+=Number(this.tableData[i].children[j].projectVolume)
        //   }
        //   this.tableData[i].projectVolume=value
        //   console.log(value)
        // }
      },
      async getHeight(list){
      this.nowheight = new ResizeObserver(entries => {
        this.clearResizeTimer();
        this.resizeTimer = setTimeout(() => {
          this.maxHeight();
        }, 1000);
      });
      await this.$nextTick();
      this.nowheight.observe(document.querySelector('.profitloss'));
    },
    maxHeight(){
      const domhei = document.querySelector('.profitloss').offsetHeight - 36 - 16 - 32
      const conhei = document.querySelector('.meafixed-table').offsetHeight - 32
      // const height = window.getComputedStyle(dom).height;
      console.log(domhei)
      this.tableHeight = domhei
      // console.log(height)
    },
    clearResizeTimer() {
      clearTimeout(this.resizeTimer);
      this.resizeTimer = null;
    },
    getGDT(){
      let gdt = document.querySelector('.el-table__body-wrapper')
      let w1 = document.querySelector('.el-table__fixed-right-patch')
      let w2 = document.querySelector('.el-table__fixed-right')
      if(gdt){
        let outheight = gdt.scrollHeight
        let inheight = gdt.clientHeight
        if(outheight>inheight){
          if (w1) {
            w1.setAttribute('style', `width: 16px;height:40px`)
          }
          if (w2) {
            w2.setAttribute('style', `right: 16px;width:130px`)
          }
        }else{
          if (w1) {
            w1.setAttribute('style', `width: 0;height:40px`)
          }
          if (w2) {
            w2.setAttribute('style', `right: 0;width:130px`)
          }
        }
      }
    },
    tored({column}){
      if(column.property=='quantity'){
        return 'tored'
      }
    },
    tored1({column}){
      let arr = ['submitProjectVolume','suncurrentProjectVolume','projectVolume','currentProjectVolume','costEffective','monthCostRate']
      if(arr.includes(column.property)&&this.isinput){
        return 'tored'
      }
    },
    async getactualMonths() {
      try {
        const params = {
          projectId: this.comProjectId,
          id: this.id
        };
        let res = await getActualMonthsApi(params);
        let data = res.data
        let arr = []

        let month = new Date().getMonth() +1
        let year = new Date().getFullYear()
        let thismonth = year + (month>= 9? month:'0'+ month)
        let hasmonth = false
        data.forEach(item => {
          if(item == thismonth){
            hasmonth = true
          }
          if(item){
            let li = {value:item,label:item.substring(0, 4) + '-' + item.substring(4, 6)}
            arr.push(li)
          }
        });
        if(!hasmonth){
          let li = {value:thismonth,label:thismonth.substring(0, 4) + '-' + thismonth.substring(4, 6)}
          arr.unshift(li)
        }
        if (arr && arr.length > 0) {
          this.expenseDate = arr[0].value;
        }
        this.dateoptions = arr
      } catch (error) {
      }
    },
    async select(menuPath) {
      this.defaultActive = menuPath
      this.id = menuPath;
      this.getactualMonths();
      // let month = this.expenseDate.replace('-', "");
      this.getDatas(menuPath)
    },
    async getDatas(menuPath){
      try {
        let param = {
          projectId: this.projectId,
          id: this.id,
          month: this.expenseDate
        };
        this.tableLoading = true;
        if (menuPath == 0) {//费用汇总
          this.isall = true;
          // const formData = new FormData();
          // formData.append("projectId", this.projectId);
          // formData.append("month", this.expenseDate);
          // const res = await getSummarydata(formData);
          // this.tableData = res.data;
        } else {//各个子项
          this.isall = false;
          // const res = await getCostMeasureslist(param);
          // this.tableData = res.data;
        }
        const res = await getCostMeasureslist(param);
        this.tableData = cloneDeep(res.data);
        this.originTableDataList =cloneDeep(res.data);
        this.isinput = false
        // await this.$nextTick()
        this.$nextTick(()=>{
          setTimeout(()=>{
            this.getGDT()
          },500)
        })
      } catch (error) {
        console.log(error);
      } finally {
        this.tableLoading = false;
      }
    },
    async getListData(menuPath){
      let param = {
        projectId: this.projectId,
        id: this.id,
        month: this.expenseDate
      };
      const res = await getCostMeasureslist(param);
      this.tableData = cloneDeep(res.data);
      this.originTableDataList =cloneDeep(res.data);
    },
    async init(detail = '') {
      try {
        const projectId = detail;
        if (!projectId) return;
        await this.getFeedSummaryMenuTree(projectId);
        this.getactualMonths();
      } catch (error) {

      } finally {
        this.tableLoading = false;
      }
    },
    async getFeedSummaryMenuTree(params) {
      try {
        const result = await getMeasureslist(params);
        if (result.code == 200) {
          if(result.data.length === 0){
            this.show=true;
          }
          let arr = {};
          arr.itemContent = '措施费';
          arr.id = 0;
          let child = result.data;
          let li = {};
          li.itemContent = '费用汇总';
          li.id = 0;
          child.unshift(li);
          arr.children = child;
          const _tempArray = [arr];
          this.menuTreeList = _tempArray;
          await this.$nextTick();
          this.$refs['profitloss'].$refs['customElMenu'].open(_tempArray[0].id);
          this.defaultActive = child[0].id;
          this.select(child[0].id);
        }
      } catch (error) {
        console.log(error);
      }
    },
    changetime(val) {
      this.getDatas(this.id)
    },
    //推送工作量
    pushwork(row) {
      this.queryParam = {
        id: row.id,
        projectName: '',
        submitProjectVolume: '',
        ipmProjectCode: '',
        ipmContractCode: '',
        ipmBizCode: '',
      };
      projectVolume(row.id).then(res => {
        if (res.data) {
          let datas = res.data;
          this.queryParam.projectVolume = datas.projectVolume;
          this.queryParam.currentProjectVolume = datas.currentProjectVolume;
          this.queryParam.ipmProjectCode = datas.ipmProjectCode;
          this.queryParam.ipmContractCode = datas.ipmContractCode;
          this.queryParam.ipmBizCode = datas.ipmBizCode;
        }
      });
      this.dialogVisible = true;
    },
    //确认推送
    savepro() {
      pushProjectvolume(this.queryParam).then(res => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.dialogVisible = false;
          this.select(this.id);
        } else {
          this.$message.error(res.msg);
        }
      });

    },
    addcost() {
      this.cbVisible = true
    },
    // 差异化比对
    differentCompare() {
      const originData = this.originTableDataList;
      /**
       * @type {Array<object>}
       */
      let data = cloneDeep(this.tableData);
      // 差异数据
      const different = this.getDeepDifferentData(data, originData);
      return cloneDeep(different);
    },
      // 深度差异化对比
    getDeepDifferentData(data = [], originData = [], tempArray = []) {
        const len = data.length;
        for (let index = 0; index < len; index++) {
          const item = data[index];
          // 源数据
          const originItem = originData[index];
          // 查看可编辑字段是否存在任意一处 数据不同
          const hasDifferent = editPropNames.some(prop => {
            // 两个皆为无效值 返回false
            if (!parseFloat(item[prop]) && !parseFloat(originItem[prop])) return false;
            return item[prop] != originItem[prop];
          });
          console.log(hasDifferent,"hasDifferenthasDifferenthasDifferent")
          // 浅层级
          if (hasDifferent) {
            tempArray.push({
              ...item,
              id: item.actualId,
              planMeasureId: item.id,
              monthCostRate: item.monthCostRate?parseInt(item.monthCostRate.replace('%','')):null,
              month: this.expenseDate
            });
          }
          // 递归深层级
          if (item?.children?.length) {
            this.getDeepDifferentData(item.children, originItem.children, tempArray);
          }
        }
        return tempArray;
      },
    addinputs(){
      let resultData = this.differentCompare();
      // 有差异
      if (resultData.length) {
        saveBatch(resultData).then(res=>{
          if(res.code == 200){
            this.$message.success(res.msg)
            this.isinput = false
            this.getDatas(this.id);
          }else{
            this.$message.error(res.msg)
          }
        })
      }
    },
    changeDate(){
      let choseDate = this.chooseDate.replace('-','')
      let hasdate = false
      this.dateoptions.forEach(item=>{
        if(item.value == choseDate){
          hasdate = true
        }
      })
      if(!hasdate){
        let li = {value:choseDate,label:this.chooseDate}
        this.dateoptions.push(li)
        this.expenseDate = choseDate
        //   arr.unshift(li)
      }
      this.getListData(this.id);
    },
    inputnum(){
      this.cbVisible = false
      this.isinput = true
      this.$refs.edittable.bodyWrapper.scrollLeft=Number(2220)
    }
  },
}
</script>
<style lang="scss" scoped>
.feed-summary-container {
  width: 100%;
  height: 100%;

  .meafixed-table{
    // 解决拖拽表格滚动条，错位问题
    ::v-deep .el-table__header-wrapper{
      padding-right: 16px!important; // 滚动条宽度
    }
    ::v-deep .el-table--border th.el-table__cell.gutter:last-of-type {
      display: block!important;
      width: 16px!important;
    }
  }


  ::v-deep .tored{
    /*background: rgb(255,236,236) !important;*/
  }
  .feed-summary-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    .left-side-menu {
      width: 220px;
      min-width: 220px;
      height: 100%;
    }
    .profitloss {
      width: calc(100% - 220px);
      height: 100%;
      background: #fff;
      padding: 16px;
    }
  }

  .no-data {
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #999999;
    text-shadow: 0px 0px 10px rgba(0, 37, 106, 0.10000000149011612);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #eeeeee;
    .no-data-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 64px;
        height: 79px;
        margin-bottom: 16px;
      }
    }
  }

  .search {
    display: flex;
    justify-content: space-between;
  }
  ::v-deep .pro-news {
    .el-dialog__body {
      padding: 24px 0 0;
    }

    .el-dialog__headerbtn {
      top: 20px;
      right: 20px;
      z-index: 3;
    }

    .poptitle {
      line-height: 56px;
      border-bottom: 1px solid #eee;
      height: 56px;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;

      > span {
        padding-left: 20px;
        font-weight: bold;
        font-size: 16px;
        color: #232323;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        width: 385px;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .popform {
      padding: 24px 20px 0;

      .row {
        margin-bottom: 16px;
        position: relative;
        .checkcb {
          position: absolute;
          left: -100px;
        }
        .el-form-item__label {
          font-weight: 400;
          opacity: 0.8;
          padding: 0;
          font-size: 14px;
          color: #232323;
          padding-right: 16px;
        }

        .el-input,
        .el-textarea,
        .el-select {
          display: inline-block;
          width: 320px;

          .el-input__inner,
          .el-textarea__inner {
            width: 100%;
            height: 32px;
            border-radius: 0px;

            &:hover {
              border-color: #0081ff;
            }
          }

          .el-textarea__inner {
            height: 90px;
            font-family: inherit;
            color: #000;
          }

          .el-input__suffix {
            height: 32px;
          }

          .el-input__icon {
            line-height: 32px;
          }
        }

        .el-form-item__error {
          padding-top: 2px;
        }
      }
      .el-input-group--append {
        position: relative;
        .el-input-group__append {
          position: absolute;
          right: 0;
          width: 76px;
          top: 0;
          border: 0;
          background: none;
          &:hover {
            background: none !important;
          }
          .pro-getbtn {
            border-left: 1px solid #dcdfe6;
            height: 32px;
            color: #0081ff;
            line-height: 32px;
            text-align: center;
          }
        }
      }
    }

    .popbot {
      border-top: 1px solid #eeeeee;
      text-align: right;
      margin-top: 24px;
      padding: 16px 20px;

      .btn {
        border-radius: 2px;
        margin-left: 12px;
        padding: 0 24px;
        &.btn_disabled {
          background: #8bd1ff;
        }
      }
    }
    .msgs {
      font-size: 12px;
      line-height: 17px;
      height: 17px;
      display: block;
      margin: 0 0 -4px;
    }
  }
}
</style>
