<template>
  <!-- 协议管理 新增、编辑 表单组件 -->
  <div>
    <!--  form-新增 level0 -->
    <el-form
      label-width="100px"
      size="medium"
      ref="typeParamsRefLv0"
      :model="typeParamsLv0"
      v-if="subSort === 1 && sendData.level === 0"
    >
      <el-form-item label="新增类型编码" prop="code">
        <el-input v-model="typeParamsLv0.code" disabled />
      </el-form-item>
      <el-form-item label="新增类型名称" prop="name">
        <el-input v-model="typeParamsLv0.name" />
      </el-form-item>
    </el-form>
    <!--  form-新增 level1 -->
    <el-form
      label-width="100px"
      size="medium"
      ref="typeParamsRefLv1"
      :model="typeParamsLv1"
      v-if="subSort === 1 && sendData.level === 1"
    >
      <el-form-item label="新增类型编码" prop="code">
        <el-input v-model="typeParamsLv1.code" disabled />
      </el-form-item>
      <el-form-item label="新增类型名称" prop="name">
        <el-input v-model="typeParamsLv1.name"  />
      </el-form-item>
    </el-form>
    <!--  form-新增 level2 -->
    <el-form
      label-width="100px"
      size="medium"
      ref="typeParamsRefLv2"
      :model="typeParamsLv2"
      v-if="subSort === 1 && sendData.level === 2"
    >
      <el-form-item label="新增类型编码" prop="code">
        <el-input v-model="typeParamsLv2.code" disabled />
      </el-form-item>
      <el-form-item label="新增类型名称" prop="name">
        <el-input v-model="typeParamsLv2.name"  />
      </el-form-item>
    </el-form>
    <!--  form-新增 level3 -->
    <el-form
      label-width="100px"
      size="medium"
      ref="typeParamsRefLv3"
      :model="typeParamsLv3"
      :rules="typeParamsLv3Rules"
      v-if="subSort === 1 && sendData.level === 3"
    >
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="机具类型">
            <el-input v-model="sendData.label" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格型号" prop="name">
            <el-input v-model="typeParamsLv3.name" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="数量" prop="storageNum">
            <el-input v-model="typeParamsLv3.storageNum" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="额定载荷" prop="rateLoad">
            <el-input v-model="typeParamsLv3.rateLoad" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="试验载荷" prop="testLoad">
            <el-input v-model="typeParamsLv3.testLoad" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="持荷时间(分)" prop="rateLoad">
            <el-input v-model="typeParamsLv3.holdTime" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="购置价格" prop="buyPrice">
            <el-input v-model="typeParamsLv3.buyPrice" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="租赁价格" prop="leasePrice">
            <el-input v-model="typeParamsLv3.leasePrice" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <!--        <el-col :span="12">
                  <el-form-item label="丢赔价格" prop="losePrice">
                    <el-input v-model="typeEditParamsLv4.losePrice" />
                  </el-form-item>
                </el-col>-->
        <el-col :span="12">
          <el-form-item label="是否需要试验" prop="isTest">
            <el-select v-model="typeParamsLv3.isTest">
              <el-option
                v-for="item in ifTestRange"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管理模式" prop="manageType">
            <el-select v-model="typeParamsLv3.manageType">
              <el-option
                v-for="item in manageTypeRange"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">

<!--        <el-col :span="12">
          <el-form-item label="抽检比例(%)" prop="checkRate">
            <el-input v-model="typeParamsLv3.checkRate" />
          </el-form-item>
        </el-col>-->
        <el-col :span="12">
          <el-form-item label="计量单位" prop="unitId">
            <!--            <el-input v-model="typeEditParamsLv4.unitName" />-->
            <el-select v-model="typeParamsLv3.unitId">
              <el-option
                v-for="item in meterRange"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!--      <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="预警数量" prop="warnNum">
                  <el-input v-model="typeEditParamsLv4.warnNum" />
                </el-form-item>
              </el-col>
            </el-row>-->
    </el-form>
    <!--  form-修改 level1 -->
    <el-form
      label-width="100px"
      size="medium"
      ref="typeEditParamsRefLv1"
      :model="typeEditParamsLv1"
      :rules="typeEditParamsLv1Rules"
      v-if="subSort === 2 && editParams.level === '1'"
    >
      <el-form-item label="类型名称" prop="name">
        <el-input v-model="typeEditParamsLv1.name"  />
      </el-form-item>
      <el-form-item label="类型编码" prop="code">
        <el-input v-model="typeEditParamsLv1.code" disabled />
      </el-form-item>
<!--      <el-form-item label="检验方式" prop="testType">
        <el-input v-model="typeEditParamsLv1.testType" />
      </el-form-item>
      <el-form-item label="检验结果" prop="testResult">
        <el-input v-model="typeEditParamsLv1.testResult" />
      </el-form-item>-->
    </el-form>
    <!--  form-修改 level2 -->
    <el-form
      label-width="100px"
      size="medium"
      ref="typeEditParamsRefLv2"
      :model="typeEditParamsLv2"
      :rules="typeEditParamsLv2Rules"
      v-if="subSort === 2 && editParams.level === '2'"
    >
      <el-form-item label="类型名称" prop="name">
        <el-input v-model="typeEditParamsLv2.name"  />
      </el-form-item>
      <el-form-item label="类型编码" prop="code">
        <el-input v-model="typeEditParamsLv2.code" disabled />
      </el-form-item>
<!--      <el-form-item label="检验方式" prop="testType">
        <el-input v-model="typeEditParamsLv2.testType" />
      </el-form-item>
      <el-form-item label="检验结果" prop="testResult">
        <el-input v-model="typeEditParamsLv2.testResult" />
      </el-form-item>-->
    </el-form>
    <!--  form-修改 level3 -->
    <el-form
      label-width="100px"
      size="medium"
      ref="typeEditParamsRefLv3"
      :model="typeEditParamsLv3"
      :rules="typeEditParamsLv3Rules"
      v-if="subSort === 2 && editParams.level === '3'"
    >
      <el-form-item label="类型名称" prop="name">
        <el-input v-model="typeEditParamsLv3.name"  />
      </el-form-item>
      <el-form-item label="类型编码" prop="code">
        <el-input v-model="typeEditParamsLv3.code" disabled />
      </el-form-item>
<!--      <el-form-item label="检验方式" prop="testType">
        <el-input v-model="typeEditParamsLv3.testType" />
      </el-form-item>
      <el-form-item label="检验结果" prop="testResult">
        <el-input v-model="typeEditParamsLv3.testResult" />
      </el-form-item>-->
    </el-form>
    <!--  form-修改 level4 -->
    <el-form
      label-width="100px"
      size="medium"
      ref="typeEditParamsRefLv4"
      :model="typeEditParamsLv4"
      :rules="typeEditParamsLv4Rules"
      v-if="subSort === 2 && editParams.level === '4'"
    >
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="机具类型">
            <el-input v-model="editParams.constructionType" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格型号" prop="name">
            <el-input v-model="typeEditParamsLv4.name" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="数量" prop="storageNum">
            <el-input v-model="typeEditParamsLv4.storageNum" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="额定载荷" prop="rateLoad">
            <el-input v-model="typeEditParamsLv4.rateLoad" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="试验载荷" prop="testLoad">
            <el-input v-model="typeEditParamsLv4.testLoad" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="持荷时间(分)" prop="rateLoad">
            <el-input v-model="typeEditParamsLv4.holdTime" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="购置价格" prop="buyPrice">
            <el-input v-model="typeEditParamsLv4.buyPrice" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="租赁价格" prop="leasePrice">
            <el-input v-model="typeEditParamsLv4.leasePrice" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
<!--        <el-col :span="12">
          <el-form-item label="丢赔价格" prop="losePrice">
            <el-input v-model="typeEditParamsLv4.losePrice" />
          </el-form-item>
        </el-col>-->
        <el-col :span="12">
          <el-form-item label="是否需要试验" prop="isTest">
            <el-select v-model="typeEditParamsLv4.isTest">
              <el-option
                v-for="item in ifTestRange"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管理模式" prop="manageType">
            <el-select v-model="typeEditParamsLv4.manageType">
              <el-option
                v-for="item in manageTypeRange"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">

<!--        <el-col :span="12">
          <el-form-item label="抽检比例(%)" prop="checkRate">
            <el-input v-model="typeEditParamsLv4.checkRate" />
          </el-form-item>
        </el-col>-->
        <el-col :span="12">
          <el-form-item label="计量单位" prop="unitId">
<!--            <el-input v-model="typeEditParamsLv4.unitName" />-->
            <el-select v-model="typeEditParamsLv4.unitId">
              <el-option
                v-for="item in meterRange"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
<!--      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="预警数量" prop="warnNum">
            <el-input v-model="typeEditParamsLv4.warnNum" />
          </el-form-item>
        </el-col>
      </el-row>-->
    </el-form>
    <!--  新增-按钮群  -->
    <div
      v-if="subSort === 1"
      style="display: flex; justify-content: right"
    >
      <el-button type="success" @click="onSubmitAdd(sendData.level)">确认</el-button>
      <el-button
        @click="
              () => {
                  this.$emit('closeDialog')
              }
          "
      >取消</el-button
      >
    </div>
    <!--  编辑-按钮群  -->
    <div
      v-if="subSort === 2"
      style="display: flex; justify-content: right"
    >
      <el-button type="success" @click="onSubmitEdit()">确认</el-button>
      <el-button
        @click="
              () => {
                  this.$emit('closeDialog')
              }
          "
      >取消</el-button
      >
    </div>
  </div>
</template>

<script>
import {
  queryIdWhenAddMa,
  submitAddForm,
  submitEditForm,
  queryMeterListApi,
  queryInfoWhenEditMa
} from '@/api/material/type'
export default {
  name: 'FormType',
  props: {
    editParams: {
      type: Object,
      default: () => null,
    },
    sendData: {
      type: Object,
      default: () => null
    },
    sendInfo: {
      type: Object | Array,
      default: () => null
    },
    treeMethod: {
      type: Function,
      default: () => null
    }
  },
  created() {
    this.getRanges()
  },
  mounted() {
    if (this.editParams) {
      console.log(this.editParams)
      // 查询回显数据
      queryInfoWhenEditMa({
        id: this.editParams.id
      }).then(res => {
        let addInfo = res.data
        // 返回参数经过除法处理
        addInfo.buyPrice = addInfo.buyPrice / this.priceDex
        addInfo.leasePrice = addInfo.leasePrice / this.priceDex
        addInfo.storageNum = addInfo.storageNum / this.storageDex
        // 查询接口
        switch(this.editParams.level) {
          case '1':
            Object.assign(this.typeEditParamsLv1, addInfo)
            break;
          case '2':
            Object.assign(this.typeEditParamsLv2, addInfo)
            break;
          case '3':
            Object.assign(this.typeEditParamsLv3, addInfo)
            break;
          case '4':
            Object.assign(this.typeEditParamsLv4, addInfo)
            break;
        }
      }).catch(err => {})
      this.subSort = 2
      this.editLevel = this.editParams.level
    } else {
      this.subSort = 1
      // 新增时调用查取id的接口
      queryIdWhenAddMa({
        id: this.sendData.id
      }).then(res => {
        console.log(res)
        // 根据不同level置入表单中
        switch(this.sendData.level) {
          case 0:
            this.typeParamsLv0.code = res.data.code
            break;
          case 1:
            this.typeParamsLv1.code = res.data.code
            break;
          case 2:
            this.typeParamsLv2.code = res.data.code
            break;
          case 3:
            this.typeParamsLv3.code = res.data.code
            break;
        }
      }).catch(err => {})
    }
    console.log(this.subSort)
  },
  data() {
    return {
      subSort: null, // 提交类型：新增 1 / 修改 2
      // 物资新增表单 Lv0
      typeParamsLv0: {
        code: undefined,
        name: undefined,
      },
      // 物资新增表单 Lv1
      typeParamsLv1: {
        code: undefined,
        name: undefined,
      },
      // 物资新增表单 Lv2
      typeParamsLv2: {
        code: undefined,
        name: undefined,
      },
      // 物资新增表单 Lv3
      typeParamsLv3: {
        name: undefined, // 规格型号
        storageNum: undefined, // 数量
        rateLoad: undefined, // 额定载荷
        testLoad: undefined, // 试验载荷
        holdTime: undefined, // 持荷时间(分)
        buyPrice: undefined, // 购置价格
        leasePrice: undefined, // 租赁价格
        // losePrice: undefined, // 丢失赔偿价格
        isTest: undefined, // 是否需要试验
        manageType: undefined, // 管理方式
        // checkRate: undefined, // 抽检比例
        unitId: undefined, // 计量单位
      },
      // 物资修改表单 Lv1
      typeEditParamsLv1: {
        name: undefined, // 类型名称
        code: undefined, // 类型编码
        // testType: undefined, // 检验方式
        // testResult: undefined, // 检验结果
      },
      // 物资修改表单 Lv2
      typeEditParamsLv2: {
        name: undefined, // 类型名称
        code: undefined, // 类型编码
        // testType: undefined, // 检验方式
        // testResult: undefined, // 检验结果
      },
      // 物资修改表单 Lv3
      typeEditParamsLv3: {
        name: undefined, // 类型名称
        code: undefined, // 类型编码
        // testType: undefined, // 检验方式
        // testResult: undefined, // 检验结果
      },
      // 物资修改表单 Lv4
      typeEditParamsLv4: {
        name: undefined, // 规格型号
        storageNum: undefined, // 数量
        rateLoad: undefined, // 额定载荷
        testLoad: undefined, // 试验载荷
        holdTime: undefined, // 持荷时间(分)
        buyPrice: undefined, // 购置价格
        leasePrice: undefined, // 租赁价格
        // losePrice: undefined, // 丢失赔偿价格
        isTest: undefined, // 是否需要试验
        manageType: undefined, // 管理方式
        // checkRate: undefined, // 抽检比例
        unitId: undefined, // 计量单位
      },
      fileList: [],
      // 租赁单位下拉框
      unitSelRange: [],
      // 租赁工程下拉框
      projSelRange: [],
      // 校验规则
      typeParamsLv3Rules: {
        name: [
          {
            required: true,
            message: '请输入规格型号',
            trigger: 'blur',
          },
        ],
        storageNum: [
          {
            required: true,
            message: '请输入数量',
            trigger: 'blur',
          },
        ],
        buyPrice: [
          {
            required: true,
            message: '请输入购置价格',
            trigger: 'blur',
          },
        ],
        leasePrice: [
          {
            required: true,
            message: '请输入租赁价格',
            trigger: 'blur',
          },
        ],
        losePrice: [
          {
            required: true,
            message: '请输入丢失赔偿价格',
            trigger: 'blur',
          },
        ],
        /* checkRate: [
          {
            required: true,
            message: '请输入抽检比例',
            trigger: 'blur',
          },
        ], */
      },
      typeEditParamsLv1Rules: {
        /* scrapNum: [
            {
                required: true,
                message: '请选择租赁单位',
                trigger: 'blur',
            },
        ],
        pro_unit: [
            {
                required: true,
                message: '请输入授权人',
                trigger: 'blur',
            },
        ],
        pro_type_of: [
            {
                required: true,
                message: '请选择租赁工程',
                trigger: 'blur',
            },
        ],
        pro_type: [
            {
                required: true,
                message: '请输入联系电话',
                trigger: 'blur',
            },
        ], */
      },
      typeEditParamsLv2Rules: {},
      typeEditParamsLv3Rules: {},
      typeEditParamsLv4Rules: {
        name: [
          {
            required: true,
            message: '请输入规格型号',
            trigger: 'blur',
          },
        ],
        storageNum: [
          {
            required: true,
            message: '请输入数量',
            trigger: 'blur',
          },
        ],
        buyPrice: [
          {
            required: true,
            message: '请输入购置价格',
            trigger: 'blur',
          },
        ],
        leasePrice: [
          {
            required: true,
            message: '请输入租赁价格',
            trigger: 'blur',
          },
        ],
        losePrice: [
          {
            required: true,
            message: '请输入丢失赔偿价格',
            trigger: 'blur',
          },
        ],
        /* checkRate: [
          {
            required: true,
            message: '请输入抽检比例',
            trigger: 'blur',
          },
        ], */
      },
      // 下拉选
      ifTestRange: [
        { label: '是', value: '1' },
        { label: '否', value: '0' },
      ],
      manageTypeRange: [
        { label: '编码追溯', value: '0' },
        { label: '数量 + 编码', value: '1' },
        { label: '数量', value: '2' },
      ],
      meterRange: [],
      editLevel: undefined,
      // 全局变量
      storageDex: 1000, // 库存保留三位小数
      priceDex: 100, // 价格保留两位小数
    }
  },
  methods: {
    /** 获取各类下拉 */
    async getRanges() {
      // 计量单位下拉
      let meterRes = await queryMeterListApi()
      this.meterRange = meterRes.data.data.map(item => {
        return {
          label: item.dictLabel,
          value: item.dictCode
        }
      })
    },
    /** 确认按钮-新增 */
    onSubmitAdd(level) {
      switch(level) {
        case 0:
          this.typeParamsLv0.id = this.sendData.id
          this.typeParamsLv0.level = this.sendData.level
          submitAddForm(this.typeParamsLv0).then(res => {
            this.$modal.msgSuccess('新增成功')
          }).catch(err => {})
          break;
        case 1:
          this.typeParamsLv1.id = this.sendData.id
          this.typeParamsLv1.level = this.sendData.level
          submitAddForm(this.typeParamsLv1).then(res => {
            this.$modal.msgSuccess('新增成功')
          }).catch(err => {})
          break;
        case 2:
          this.typeParamsLv2.id = this.sendData.id
          this.typeParamsLv2.level = this.sendData.level
          submitAddForm(this.typeParamsLv2).then(res => {
            this.$modal.msgSuccess('新增成功')
          }).catch(err => {})
          break;
        case 3:
          console.log(this.typeParamsLv3)
          this.typeParamsLv3.id = this.sendData.id
          this.typeParamsLv3.level = this.sendData.level
          // 参数经过乘法处理
          this.typeParamsLv3.buyPrice = Number(this.typeParamsLv3.buyPrice) * this.priceDex
          this.typeParamsLv3.leasePrice = Number(this.typeParamsLv3.leasePrice) * this.priceDex
          this.typeParamsLv3.storageNum = Number(this.typeParamsLv3.storageNum) * this.storageDex
          submitAddForm(this.typeParamsLv3).then(res => {
            this.$modal.msgSuccess('新增成功')
          }).catch(err => {})
          break;
      }
      // 2. 成功之后通知父组件关闭弹框
      this.$emit('closeDialog', true)
      // this.$emit('treeMethod')
      this.treeMethod()
      /* this.$refs.typeEditParamsRef.validate((valid) => {
        if (valid) {
          console.log('校验通过', this.typeEditParams)
          // 1. 表单校验通过后调后台 Api
          if(this.subSort === 1) {
            addProtocolApi(this.protocolParams).then(res => {
              console.log(res)
            }).catch(err => {
              console.log(err)
            })
          } else if(this.subSort === 2) {
            editProtocolApi(this.protocolParams).then(res => {
              console.log(res)
            }).catch(err => {
              console.log(err)
            })
          }
          // 2. 成功之后通知父组件关闭弹框
          this.$emit('closeDialog', true)
        }
      }) */
    },
    /** 确认按钮-编辑 */
    onSubmitEdit() {
      console.log(this.editLevel)
      switch (this.editLevel) {
        case '1':
          this.$refs.typeEditParamsRefLv1.validate(valid => {
            if(valid) {
              submitEditForm(this.typeEditParamsLv1).then(res => {
                this.$modal.msgSuccess('修改成功')
              })
            }
          })
          break;
        case '2':
          this.$refs.typeEditParamsRefLv2.validate(valid => {
            if(valid) {
              submitEditForm(this.typeEditParamsLv2).then(res => {
                this.$modal.msgSuccess('修改成功')
              })
            }
          })
          break;
        case '3':
          this.$refs.typeEditParamsRefLv3.validate(valid => {
            if(valid) {
              submitEditForm(this.typeEditParamsLv3).then(res => {
                this.$modal.msgSuccess('修改成功')
              })
            }
          })
          break;
        case '4':
          // 参数经过乘法处理
          this.typeEditParamsLv4.buyPrice = Number(this.typeEditParamsLv4.buyPrice) * this.priceDex
          this.typeEditParamsLv4.leasePrice = Number(this.typeEditParamsLv4.leasePrice) * this.priceDex
          this.typeEditParamsLv4.storageNum = Number(this.typeEditParamsLv4.storageNum) * this.storageDex
          this.$refs.typeEditParamsRefLv4.validate(valid => {
            if(valid) {
              submitEditForm(this.typeEditParamsLv4).then(res => {
                this.$modal.msgSuccess('修改成功')
              })
            }
          })
          break;
      }
      // 2. 成功之后通知父组件关闭弹框
      this.$emit('closeDialog', true)
      this.treeMethod()
      /* this.$refs.typeEditParamsRef.validate((valid) => {
        if (valid) {
          console.log('校验通过', this.typeEditParams)
          // 1. 表单校验通过后调后台 Api
          if(this.subSort === 1) {
            addProtocolApi(this.protocolParams).then(res => {
              console.log(res)
            }).catch(err => {
              console.log(err)
            })
          } else if(this.subSort === 2) {
            editProtocolApi(this.protocolParams).then(res => {
              console.log(res)
            }).catch(err => {
              console.log(err)
            })
          }
          // 2. 成功之后通知父组件关闭弹框
          this.$emit('closeDialog', true)
        }
      }) */
    },
  },
}
</script>

<style scoped>
::v-deep .el-select {
  width: 100%;
}
::v-deep .el-form-item__label{
  font-weight: normal;
}
</style>
