<template>
  <!-- <el-card class="box-card"> -->
  <!-- <el-form :model="formData" :rules="rules"> -->
  <el-form
    :inline="false"
    label-position="right"
    status-icon
    label-width="120px"
    class="demo-ruleForm card-scroll"
    style="padding-right: 18px"
  >
    <el-tabs v-model="activeTagName">
      <el-tab-pane label="基本信息" name="basicInfo">
        <input v-model="formData.id" type="hidden" name="id">
        <!-- <el-form :model="formData"> -->
        <el-form-item label="名称" prop="name">
          <el-input v-model="formData.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="全名">
          <el-input v-model="formData.fullName" />
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="formData.state" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formData.remark" type="textarea" :row="3" />
        </el-form-item>
      </el-tab-pane>

      <!-- 设备概述 -->
      <el-tab-pane label="设备概述" name="craneSummaryDTO">
        <el-form-item label="名称">
          <el-input v-model="formData.craneSummaryDTO.name" />
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="formData.craneSummaryDTO.specification" />
        </el-form-item>
        <el-form-item label="制造厂">
          <el-input v-model="formData.craneSummaryDTO.produceCompany" />
        </el-form-item>
        <el-form-item label="出厂编号">
          <el-input v-model="formData.craneSummaryDTO.produceNumber" />
        </el-form-item>

        <el-form-item label="制造日期">
          <el-date-picker
            v-model="formData.craneSummaryDTO.produceTime"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="安装日期">
          <el-date-picker
            v-model="formData.craneSummaryDTO.installTime"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="投用日期">
          <el-date-picker v-model="formData.craneSummaryDTO.startTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" />
        </el-form-item>

        <el-form-item label="设备使用年限">
          <el-input v-model="formData.craneSummaryDTO.ageLimit" />
        </el-form-item>

        <UnitNumberInput
          label="原值"
          :min="0"
          :precision="2"
          :number-model.sync="formData.craneSummaryDTO.originPrice"
          :unit-model.sync="formData.craneSummaryDTO.originPriceUnit"
          use-unit="price"
        />

        <!-- <el-form-item label="原值">
          <el-row>
            <el-col :span="6">
              <el-input-number v-model="formData.craneSummaryDTO.originPrice" :min="0" />
            </el-col>
            <el-col :span="6" :offset="1">
              <el-select v-model="formData.craneSummaryDTO.originPriceUnit" placeholder="请选择">
                <el-option v-for="item in commonUnits.price" :key="item" :label="item" :value="item" />
              </el-select>
            </el-col>
          </el-row>
        <el-input v-model="formData.craneSummaryDTO.originPrice" />
        </el-form-item> -->

        <!-- <el-form-item label="设备重量" /> -->

        <el-form-item label="外形尺寸">
          <el-input v-model="formData.craneSummaryDTO.profile" />
        </el-form-item>

        <el-form-item label="图号">
          <el-input v-model="formData.craneSummaryDTO.imageNumber" />
        </el-form-item>

        <!-- <el-form-item label="使用动力介质名称" /> -->

        <el-form-item label="设备使用单位">
          <el-input v-model="formData.craneSummaryDTO.usedUnit" />
        </el-form-item>

        <!-- <el-form-item label="设计生产能力" />
        <el-form-item label="生产原料要求" />
        <el-form-item label="生产产品特征" /> -->

        <el-form-item label="设备功能简介">
          <el-input v-model="formData.craneSummaryDTO.usedUnit" type="textarea" />
        </el-form-item>
      </el-tab-pane>

      <!-- 技术参数 -->
      <el-tab-pane label="技术参数" name="techParamsDTO">
        <!-- <h4>设备总体参数</h4>
        <el-divider />
        <el-form-item label="名称">
          <el-input v-model="formData.craneSummaryDTO.name" />
        </el-form-item>

        驱动部分
        <el-divider />

        传动部分
        <el-divider /> -->

        <el-collapse v-model="activeCollapseName">
          <el-collapse-item title="设备总体参数" name="1">
            <!-- <el-form-item label="长度">
              <el-row>
                <el-col :span="6">
                  <el-input-number v-model="formData.techParamsDTO.length" :min="0" :precision="2" />
                </el-col>
                <el-col :span="6">
                  <el-select v-model="formData.techParamsDTO.lengthUnit" placeholder="请选择">
                    <el-option v-for="item in commonUnits.length" :key="item" :label="item" :value="item" />
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item> -->
            <UnitNumberInput
              label="长度"
              :min="0"
              :precision="2"
              :number-model.sync="formData.techParamsDTO.length"
              :unit-model.sync="formData.techParamsDTO.lengthUnit"
              use-unit="length"
            />
            <UnitNumberInput
              label="宽度"
              :min="0"
              :precision="2"
              :number-model.sync="formData.techParamsDTO.width"
              :unit-model.sync="formData.techParamsDTO.widthUnit"
              use-unit="length"
            />
            <UnitNumberInput
              label="最高点距轨面"
              :min="0"
              :precision="2"
              :number-model.sync="formData.techParamsDTO.highestValueToRail"
              :unit-model.sync="formData.techParamsDTO.highestValueToRailUnit"
              use-unit="length"
            />
            <UnitNumberInput
              label="轨面标高"
              :min="0"
              :precision="2"
              :number-model.sync="formData.techParamsDTO.railSurfaceHeight"
              :unit-model.sync="formData.techParamsDTO.railSurfaceHeightUnit"
              use-unit="length"
            />
            <UnitNumberInput
              label="大车缓冲器行程"
              :min="0"
              :precision="2"
              :number-model.sync="formData.techParamsDTO.bigCarBufferDistance"
              :unit-model.sync="formData.techParamsDTO.bigCarBufferDistanceUnit"
              use-unit="length"
            />
            <UnitNumberInput
              label="小车缓冲器行程"
              :min="0"
              :precision="2"
              :number-model.sync="formData.techParamsDTO.smallCarBufferDistance"
              :unit-model.sync="formData.techParamsDTO.smallCarBufferDistanceUnit"
              use-unit="length"
            />
          </el-collapse-item>
          <el-collapse-item title="驱动部分" name="2">
            <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
            <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
          </el-collapse-item>
          <el-collapse-item title="传动部分" name="3">
            <div>简化流程：设计简洁直观的操作流程；</div>
            <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
            <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
          </el-collapse-item>
          <el-collapse-item title="设备基础参数及特征值" name="4">
            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
          </el-collapse-item>
        </el-collapse>

      </el-tab-pane>
    </el-tabs>
  </el-form>

  <!-- </el-card> -->
</template>

<script>

import Mixins_AddDialogForm from '@/mixins/AddDialogForm'
import commonUnits from '@/lib/commonUnits'
import UnitNumberInput from '@/components/UnitNumberInput/index.vue'

export default {
  name: 'CraneComponentAddDeviceDialog',
  components: {
    UnitNumberInput
  },
  mixins: [Mixins_AddDialogForm],
  props: {},
  data() {
    return {
      activeTagName: 'basicInfo',
      activeCollapseName: '设备总体参数',

      commonUnits: commonUnits,

      orgFormData: {
        id: null,
        createTime: null,
        updateTime: null,
        name: '15#天车',
        remark: null,
        fullName: null,
        state: null,
        test: '123',
        craneSummaryDTO: {
          id: null,
          createTimestamp: null,
          updateTimestamp: null,
          createTime: null,
          updateTime: null,
          name: '15#天车',
          specification: 'QD20/5t-28m',
          produceCompany: '河南东升起重机械有限公司',
          produceNumber: '7030004',
          produceTime: '2007-11-01',
          installTime: '2008-05-05',
          startTime: '2008-12-05',
          originPrice: 71.709,
          originPriceUnit: '万元',
          ageLimit: 20,
          profile: '跨度28米/3米',
          imageNumber: null,
          usedUnit: '碳钢薄板厂冷轧工序',
          introduction: '酸轧跨1B-1C区101-105线，设计为遥控天车主要用于生产废料倒运，检修。'
        },
        techParamsDTO: {
          id: null,
          createTimestamp: null,
          updateTimestamp: null,
          createTime: null,
          updateTime: null,
          length: 29000.0,
          lengthUnit: 'mm',
          width: 7934.0,
          widthUnit: 'mm',
          highestValueToRail: 2187.0,
          highestValueToRailUnit: 'mm',
          railSurfaceHeight: 0.0,
          railSurfaceHeightUnit: null,
          bigCarBufferDistance: 150.0,
          bigCarBufferDistanceUnit: 'mm',
          smallCarBufferDistance: 75.0,
          smallCarBufferDistanceUnit: 'mm',
          powerGenerationgTotalCapacity: 0.0,
          powerGenerationgTotalCapacityUnit: null,
          mainHoistWeight: 20.0,
          mainHoistWeightUnit: 'T',
          deputyHoistWeight: 5.0,
          deputyHoistWeightUnit: 'T',
          bigCarLength: 28.0,
          bigCarLengthUnit: '米',
          smallCarLength: 3.0,
          smallCarLengthUnit: '米',
          workLevel: 'M5',
          mainHoistMinSpeed: 2.0,
          mainHoistMinSpeedUnit: 'm/min',
          mainHoistMaxSpeed: 12.0,
          mainHoistMaxSpeedUnit: 'm/min',
          deputyHostMinSpeed: 1.95,
          deputyHostMinSpeedUnit: 'm/min',
          deputyHostMaxSpeed: 19.5,
          deputyHostMaxSpeedUnit: 'm/min',
          bigCarMinSpeed: 12.0,
          bigCarminSpeedUnit: 'm/min',
          bigCarMaxSpeed: 120.0,
          bigCarMaxSpeedUnit: 'm/min',
          smallCarMinSpeed: 4.5,
          smallCarminSpeedUnit: 'm/min',
          smallCarMaxSpeed: 45.0,
          smallCarMaxSpeedUnit: 'm/min',
          mainHoistHeight: 21.0,
          mainHoistHeightUnit: '米',
          deputyHoistHeight: 23.0,
          deputyHoistHeightUnit: '米'
        }
      }

    }
  },
  created() { },
  mounted() {
    console.log('[FormData]', this.commonUnits)
  },
  methods: {
    // tabClickHandle(tab, event) {
    //   console.log(tab, event)
    // }
  }
}
</script>

<style lang="stylus" scoped>

</style>
