<template>
  <div class="app-container out-class">
    <div class="header-class">
      <h2>升降台快速报价工具表</h2>
      <span>（所有长度单位为m，重量单位为kg，功率为kW）</span>
    </div>
    <div class="note-class">
      <span>*双击文本框可输入内容，框内箭头可以展开选择，🔍可查看详情</span>
    </div>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="20">
        <div class="flex-container">
          <div class="flex-text">
            <span>🔍台体+底座</span>
          </div>
          <div class="flex-item">
            <div>
              <span>行程</span>
            </div>
            <el-input size="mini" v-model="first.xingcheng" placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>长</span>
            </div>
            <el-input size="mini" v-model="first.length" @change="firstChangeFn" placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>宽</span>
            </div>
            <el-input size="mini" v-model="first.width" @change="firstChangeFn" placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>台面重量</span>
            </div>
            <el-input size="mini" :disabled="true" v-model="first.taimianWeight" placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>台面加底座重量</span>
            </div>
            <el-input size="mini" :disabled="true" v-model="first.taimiandizuoWeight"
                      placeholder="0"></el-input>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="price-item">
          <div>
            <span>报价</span>
          </div>
          <div>
            <el-input size="mini" :disabled="true" v-model="first.firstPrice" placeholder="报价"></el-input>
          </div>
        </div>
      </el-col>

    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="20">
        <div class="flex-container">
          <div class="flex-text">
            <span>🔍剪臂</span>
          </div>
          <div class="flex-item">
            <div>
              <span>行程</span>
            </div>
            <el-input size="mini" :disabled="true" v-model="jianbi.xingcheng" placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>剪臂长边</span>
            </div>
            <el-input size="mini" :disabled="true" v-model="jianbi.jianbiLength" @change="jianbiChangeFn"
                      placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>剪臂宽边</span>
            </div>
            <el-input size="mini" :disabled="true" v-model="jianbi.jianbiWidth" @change="jianbiChangeFn"
                      placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>长边剪臂单个重量</span>
            </div>
            <el-input size="mini" v-model="jianbi.jianbichangWeight" @change="jianbiChangeFn"
                      placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>宽边剪臂单个重量</span>
            </div>
            <el-input size="mini" :disabled="true" v-model="jianbi.jianbikuanWeight" @change="jianbiChangeFn"
                      placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>长边叉数</span>
            </div>
            <el-input size="mini" :disabled="true" v-model="jianbi.changbianNum" @change="jianbiChangeFn"
                      placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>短板叉数</span>
            </div>
            <el-input size="mini" :disabled="true" v-model="jianbi.duanbianNum" @change="jianbiChangeFn"
                      placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>剪臂重量</span>
            </div>
            <el-input size="mini" :disabled="true" v-model="jianbi.jianbiWeight" @change="jianbiChangeFn"
                      placeholder="0"></el-input>
          </div>

        </div>
      </el-col>
      <el-col :span="4">
        <div class="price-item">
          <div>
            <span>报价</span>
          </div>
          <div>
            <el-input size="mini" :disabled="true" v-model="jianbi.jianbiPrice" placeholder="报价"></el-input>
          </div>
        </div>
      </el-col>

    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="20">
        <div class="flex-container">
          <div class="flex-text">
            <span>🔍刚性链</span>
          </div>
          <div class="flex-item">
            <div>
              <span>行程</span>
            </div>
            <el-input size="mini" v-model="first.xingcheng" placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>负载（动载荷）</span>
            </div>
            <el-input size="mini" v-model="second.fuzai" placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>单个链条自重</span>
            </div>
            <el-input size="mini" v-model="second.danzizhong" @change="secondChangeFn" placeholder="0"></el-input>
          </div>
          <div class="flex-item">
          <div>
            <span>台面+剪臂</span>
          </div>
          <el-input size="mini" v-model="second.taiAddjianbiWeight" @change="secondChangeFn" placeholder="0"></el-input>
        </div>
          <div class="flex-item">
            <div>
              <span>刚性链数量</span>
            </div>
            <el-input size="mini" v-model="second.shuliang" @change="secondChangeFn" placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>总负载（动载荷）</span>
            </div>
            <el-input size="mini" v-model="second.totalFuzai" @change="secondChangeFn" placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>单个刚性链负载</span>
            </div>
            <el-input size="mini" v-model="second.singleFuzai" @change="secondChangeFn" placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>刚性链型号</span>
            </div>
            <el-input size="mini" v-model="second.xinghao" placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>刚性链单价</span>
            </div>
            <el-select v-model="second.danjia" size="mini" style="width: 120px;" placeholder="请选择">
              <el-option v-for="item in secondDanjiaOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="price-item">
          <div>
            <span>报价</span>
          </div>
          <div>
            <el-input size="mini" :disabled="true" v-model="second.secondPrice" placeholder="报价"></el-input>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="20">
        <div class="flex-container">
          <div class="flex-text">
            <span>🔍电机</span>
          </div>
          <div class="flex-item">
            <div>
              <span>行程</span>
            </div>
            <el-input size="mini" :disabled="true" v-model="first.xingcheng" placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>速度（m/s）</span>
            </div>
            <el-input size="mini"  v-model="dianji.velocity" @change="dianjiChangeFn"
                      placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>计算功率</span>
            </div>
            <el-input size="mini" :disabled="true" v-model="dianji.calculatePower" @change="dianjiChangeFn"
                      placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>最小总功率</span>
            </div>
            <el-input size="mini" :disabled="true" v-model="dianji.minTotalPower" @change="dianjiChangeFn" placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>选取功率</span>
            </div>
            <el-input size="mini"  v-model="dianji.selectPower" @change="dianjiChangeFn"
                      placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>电机品牌</span>
            </div>
            <el-input size="mini"  v-model="dianji.dianjiBrand" @change="dianjiChangeFn"
                      placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>电机数量</span>
            </div>
            <el-input size="mini"  v-model="dianji.dianjiNum" @change="dianjiChangeFn"
                      placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>电机单价</span>
            </div>
            <el-input size="mini"  v-model="dianji.dianjiSinglePrice" @change="dianjiChangeFn"
                      placeholder="0"></el-input>
          </div>

        </div>
      </el-col>
      <el-col :span="4">
        <div class="price-item">
          <div>
            <span>报价</span>
          </div>
          <div>
            <el-input size="mini" :disabled="true" v-model="first.firstPrice" placeholder="报价"></el-input>
          </div>
        </div>
      </el-col>

    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="20">
        <div class="flex-container">
          <div class="flex-text">
            <span>🔍减速机</span>
          </div>

          <div class="flex-item">
            <div>
              <span>刚性链半径（m）</span>
            </div>
            <el-input size="mini" :disabled="true" v-model="dianji.calculatePower" @change="dianjiChangeFn"
                      placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>刚性链每转上升高度</span>
            </div>
            <el-input size="mini" :disabled="true" v-model="dianji.minTotalPower" @change="dianjiChangeFn" placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>输出扭矩</span>
            </div>
            <el-input size="mini"  v-model="dianji.selectPower" @change="dianjiChangeFn"
                      placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>刚性链输出转速</span>
            </div>
            <el-input size="mini"  v-model="dianji.dianjiBrand" @change="dianjiChangeFn"
                      placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>速比</span>
            </div>
            <el-input size="mini"  v-model="dianji.dianjiNum" @change="dianjiChangeFn"
                      placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>输入扭矩</span>
            </div>
            <el-input size="mini"  v-model="dianji.dianjiSinglePrice" @change="dianjiChangeFn"
                      placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>减速机型号</span>
            </div>
            <el-input size="mini"  v-model="dianji.dianjiSinglePrice" @change="dianjiChangeFn"
                      placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>减速机单价</span>
            </div>
            <el-input size="mini"  v-model="dianji.dianjiSinglePrice" @change="dianjiChangeFn"
                      placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>减速机数量</span>
            </div>
            <el-input size="mini"  v-model="dianji.dianjiSinglePrice" @change="dianjiChangeFn"
                      placeholder="0"></el-input>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="price-item">
          <div>
            <span>报价</span>
          </div>
          <div>
            <el-input size="mini" :disabled="true" v-model="first.firstPrice" placeholder="报价"></el-input>
          </div>
        </div>
      </el-col>

    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="20">
        <div class="flex-container">
          <div class="flex-text">
            <span>🔍减速机</span>
          </div>

          <div class="flex-item">
            <div>
              <span>联轴器型号</span>
            </div>
            <el-input size="mini" :disabled="true" v-model="dianji.calculatePower" @change="dianjiChangeFn"
                      placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>联轴器单价</span>
            </div>
            <el-input size="mini" :disabled="true" v-model="dianji.minTotalPower" @change="dianjiChangeFn" placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>联轴器数量</span>
            </div>
            <el-input size="mini"  v-model="dianji.selectPower" @change="dianjiChangeFn"
                      placeholder="0"></el-input>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="price-item">
          <div>
            <span>报价</span>
          </div>
          <div>
            <el-input size="mini" :disabled="true" v-model="first.firstPrice" placeholder="报价"></el-input>
          </div>
        </div>
      </el-col>

    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="20">
        <div class="flex-container">
          <div class="flex-text">
            <span>🔍制动器</span>
          </div>

          <div class="flex-item">
            <div>
              <span>制动器型号</span>
            </div>
            <el-input size="mini" :disabled="true" v-model="dianji.calculatePower" @change="dianjiChangeFn"
                      placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>制动器单价</span>
            </div>
            <el-input size="mini" :disabled="true" v-model="dianji.minTotalPower" @change="dianjiChangeFn" placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>制动器数量</span>
            </div>
            <el-input size="mini"  v-model="dianji.selectPower" @change="dianjiChangeFn"
                      placeholder="0"></el-input>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="price-item">
          <div>
            <span>报价</span>
          </div>
          <div>
            <el-input size="mini" :disabled="true" v-model="first.firstPrice" placeholder="报价"></el-input>
          </div>
        </div>
      </el-col>

    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="20">
        <div class="flex-container">
          <div class="flex-text">
            <span>🔍联轴器</span>
          </div>

          <div class="flex-item">
            <div>
              <span>联轴器型号</span>
            </div>
            <el-input size="mini" :disabled="true" v-model="dianji.calculatePower" @change="dianjiChangeFn"
                      placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>联轴器单价</span>
            </div>
            <el-input size="mini" :disabled="true" v-model="dianji.minTotalPower" @change="dianjiChangeFn" placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>联轴器数量</span>
            </div>
            <el-input size="mini"  v-model="dianji.selectPower" @change="dianjiChangeFn"
                      placeholder="0"></el-input>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="price-item">
          <div>
            <span>报价</span>
          </div>
          <div>
            <el-input size="mini" :disabled="true" v-model="first.firstPrice" placeholder="报价"></el-input>
          </div>
        </div>
      </el-col>

    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="20">
        <div class="flex-container">
          <div class="flex-text">
            <span>🔍辅料</span>
          </div>

          <div class="flex-item">
            <div>
              <span>直线导轨</span>
            </div>
            <el-input size="mini" :disabled="true" v-model="dianji.calculatePower" @change="dianjiChangeFn"
                      placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>限位装置</span>
            </div>
            <el-input size="mini" :disabled="true" v-model="dianji.minTotalPower" @change="dianjiChangeFn" placeholder="0"></el-input>
          </div>
          <div class="flex-item">
            <div>
              <span>联轴器数量</span>
            </div>
            <el-input size="mini"  v-model="dianji.selectPower" @change="dianjiChangeFn"
                      placeholder="0"></el-input>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="price-item">
          <div>
            <span>报价</span>
          </div>
          <div>
            <el-input size="mini" :disabled="true" v-model="first.firstPrice" placeholder="报价"></el-input>
          </div>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
export default {
  name: "RigidChain",
  data() {
    return {
      first: {
        xingcheng: "",
        length: "",
        width: "",
        taimianWeight: "",
        taimiandizuoWeight: "",
        firstPrice: 0
      },
      jianbi: {
        xingcheng: "",
        jianbiLength: "",
        jianbiWidth: "",
        jianbichangWeight: "",
        jianbikuanWeight: "",
        changbianNum: "",
        duanbianNum: "",
        jianbiWeight: "",
        jianbiPrice: ""
      },
      jianbiDanjiaOptions: [],
      secondDanjiaOptions: [],
      second: {
        xingcheng:"",
        fuzai: "",
        danzizhong: "",
        shuliang: "",
        taiAddjianbiWeight: "",
        totalFuzai:"",
        singleFuzai:"",
        xinghao: "",
        danjia: "",
        secondPrice: 0
      },
      dianji: {
        velocity: "",
        calculatePower: "",
        minTotalPower: "",
        selectPower: "",
        dianjiBrand: "",
        dianjiNum: "",
        dianjiSinglePrice: "",
        dianjiPrice: ""
      }
    };
  },
  created() {

  },
  methods: {
    //验证第一行数据，如果是空值，默认给0
    firstValid() {
      if (!this.first.xingcheng) {
        this.first.xingcheng = 0;
      }
      if (!this.first.length) {
        this.first.length = 0;
      }
      if (!this.first.width) {
        this.first.width = 0;
      }
    },
    jianbiValid() {
      if (!this.jianbi.xingcheng) {
        this.jianbi.xingcheng = 0;
      }
      if (!this.jianbi.jianbiLength) {
        this.jianbi.jianbiLength = 0;
      }
      if (!this.jianbi.jianbiWidth) {
        this.jianbi.jianbiWidth = 0;
      }
      if (!this.jianbi.changbianNum) {
        this.jianbi.changbianNum = 0;
      }
      if (!this.jianbi.duanbianNum) {
        this.jianbi.duanbianNum = 0;
      }
      if (!this.jianbi.jianbichangWeight) {
        this.jianbi.jianbichangWeight = 0;
      }
      if (!this.jianbi.jianbikuanWeight) {
        this.jianbi.jianbikuanWeight = 0;
      }
      if (!this.jianbi.jianbiWeight) {
        this.jianbi.jianbiWeight = 0;
      }
    },
    secendValid(){
      if (!this.second.fuzai) {
        this.second.fuzai = 0;
      }
      if (!this.second.danzizhong) {
        this.second.danzizhong = 0;
      }
      if (!this.second.shuliang) {
        this.second.shuliang = 0;
      }
    },
    dianjiValid(){
      if (!this.dianji.velocity) {
        this.dianji.velocity = 0;
      }
      if(!this.dianji.selectPower){
        this.dianji.selectPower = 0;
      }
    },
    //第一行计算方法，就是数据改变的时候，都可以调用这个方法
    firstChangeFn() {
      this.firstValid();
      this.first.taimianWeight = this.first.length * this.first.width * 80;
      this.first.taimiandizuoWeight = this.first.taimianWeight * 2;
      this.first.firstPrice = this.first.taimiandizuoWeight * 20;
      this.jianbiChangeFn()
    },
    //剪臂计算方法
    jianbiChangeFn() {
      this.jianbiValid();
      this.jianbi.xingcheng = this.first.xingcheng;
      this.jianbi.jianbiLength = this.first.length - 0.3;
      this.jianbi.jianbiWidth = this.first.width - 0.3;
      this.jianbi.jianbichangWeight =parseFloat( (this.jianbi.jianbiLength * 0.12 * 0.02 * 8000).toFixed(2));
      this.jianbi.jianbikuanWeight =parseFloat ((this.jianbi.jianbiWidth * 0.12 * 0.02 * 8000).toFixed(2));
      //长边叉数
      this.jianbi.changbianNum = parseFloat((this.jianbi.xingcheng / (this.jianbi.jianbiLength * 0.8) ).toFixed(2)+ 1);
      this.jianbi.duanbianNum = parseFloat((this.jianbi.xingcheng / (this.jianbi.jianbiWidth * 0.8) ).toFixed(2)+ 1);
      //剪臂重量
      this.jianbi.jianbiWeight = parseFloat((this.jianbi.changbianNum * 2 * 2 * this.jianbi.jianbichangWeight + this.jianbi.duanbianNum * 2 * 2 * this.jianbi.jianbikuanWeight).toFixed(2));
      this.jianbi.jianbiPrice =parseFloat(( this.jianbi.jianbiWeight * 26).toFixed(2));
      this.secondChangeFn();
    },
    //刚性链计算方法
    secondChangeFn() {
      this.secendValid();
      this.second.xingcheng = this.first.xingcheng;
      this.second.taiAddjianbiWeight = this.first.taimianWeight+this.jianbi.jianbiWeight;
      //总负载
      this.second.totalFuzai = parseFloat((this.second.fuzai + this.second.danzizhong*this.second.shuliang+this.second.taiAddjianbiWeight).toFixed(2));
      //单个负载
      this.second.singleFuzai = parseFloat((this.second.totalFuzai/this.second.shuliang).toFixed(2));
      this.dianjiChangeFn();
    },
    //电机计算方法
    dianjiChangeFn() {
      this.dianjiValid();
      this.dianji.calculatePower = parseFloat((this.dianji.velocity * this.second.totalFuzai/102/0.7).toFixed(2));
      this.dianji.minTotalPower = this.dianji.calculatePower * 1.2;
    }
  }
};
</script>
<style scoped>
* {
  font-family: '微软雅黑', sans-serif; /* 设置全局字体为SimSun */
}
.out-class {
  height: auto;
  width: 99%;
  margin: auto;
  border: 1px solid black;
  padding: 10px;
}

.header-class {
  color: #409EFF;
  text-align: center;
}

.note-class {
  font-size: 10px;
  color: darkgrey;
}

.out-class .el-divider--horizontal {
  margin: 5px 0;
}

.flex-container {
  display: flex;
  align-items: center;
  padding: 10px;
  /* justify-content: space-between; */
}

.flex-text {
  height: 0px;
  width: 100px;
}

.flex-item {
  align-items: center;
  margin-left: 10px;
}

.flex-container span {
  color: #409EFF;
  margin-bottom: 2px;
}

.flex-item span {
  color: black;
}

.flex-container .el-input {
  margin-top: 5px;
  width: 120px;
}

.price-item {
  padding: 10px;
  align-items: center;
}

.price-item .el-input {
  margin-top: 5px;
  width: 120px;
}
</style>
