<template>
  <div>
    <el-form :model="form" label-width="160px" v-loading="loading">
      <el-row>
        <el-col :span="8">
          <el-form-item label="开卷机张力">
            <el-input v-model="form.porTension" @change="syncModal" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入口活套张力">
            <el-input v-model="form.celTension" @change="syncModal" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="清洗段张力">
            <el-input v-model="form.cleanTension" @change="syncModal" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="炉区张力">
            <el-input v-model="form.furTension" @change="syncModal" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="冷却塔张力">
            <el-input v-model="form.towerTension" @change="syncModal" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="光整机不投张力">
            <el-input v-model="form.tmNoneTension" @change="syncModal" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="光整机入口张力">
            <el-input v-model="form.tmEntryTension" @change="syncModal" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="光整机出口张力">
            <el-input v-model="form.tmExitTension" @change="syncModal" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="光整机轧制力">
            <el-input v-model="form.tmRollforce" @change="syncModal" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="光整机弯辊力">
            <el-input v-model="form.tmBendforce" @change="syncModal" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="光整机防皱辊插入量">
            <el-input v-model="form.tmAcrMesh" @change="syncModal" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="光整机防颤辊插入量">
            <el-input v-model="form.tmBrMesh" @change="syncModal" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="拉矫机延伸率">
            <el-input v-model="form.tlElong" @change="syncModal" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="拉矫机矫直辊插入量1">
            <el-input v-model="form.tlLvlMesh1" @change="syncModal" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="拉矫机矫直辊插入量2">
            <el-input v-model="form.tlLvlMesh2" @change="syncModal" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="炉火段预热段出口板温">
            <el-input v-model="form.preheatingSection" @change="syncModal" />
          </el-form-item>
        </el-col>
        
        <el-col :span="8">
          <el-form-item label="炉火段加热段出口板温">
            <el-input v-model="form.heatingSection" @change="syncModal" />
          </el-form-item>
        </el-col>
        
        <el-col :span="8">
          <el-form-item label="炉火段冷却段出口板温">
            <el-input v-model="form.coolingSection" @change="syncModal" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import createFetch from '@/api/l2/plan'

export default {
  props: {
    income: {
      type: Object,
      required: true
    },
    baseURL: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      fetchApi: {},
      form: {
        // 全线张力
        porTension: undefined, // 开卷机张力
        celTension: undefined, // 入口活套张力
        cleanTension: undefined, // 清洗段张力
        furTension: undefined, // 炉区张力
        towerTension: undefined, // 冷却塔张力
        tmNoneTension: undefined, // 光整机不投张力
        tmEntryTension: undefined, // 光整机入口张力
        tmExitTension: undefined, // 光整机出口张力
        tlNoneTension: undefined, // 拉矫机不投张力
        tlExitTension: undefined, // 拉矫机出口张力
        coatTension: undefined, // 后处理张力
        cxlTension: undefined, // 出口活套张力
        trTension: undefined, // 卷取机张力

        // 光整机
        tmRollforce: undefined, // 光整机轧制力
        tmBendforce: undefined, // 光整机弯辊力
        tmAcrMesh: undefined, // 光整机防皱辊插入量
        tmBrMesh: undefined, // 光整机防颤辊插入量

        // 拉矫机
        tlElong: undefined, // 拉矫机延伸率
        tlLvlMesh1: undefined, // 拉矫机矫直辊插入量1
        tlLvlMesh2: undefined, // 拉矫机矫直辊插入量2
        tlAcbMesh: undefined, // 拉矫机防横弓插入量

        // 炉火段
        preheatingSection: undefined, // 炉火段预热段出口板温
        heatingSection: undefined, // 炉火段加热段出口板温
        coolingSection: undefined, // 炉火段冷却段出口板温
      },
      loading: false
    }
  },
  mounted() {
    this.fetchApi = createFetch(this.baseURL)
    this.fetchSetup()
  },
  methods: {
    async fetchSetup() {
      this.loading = true
      const { entryThick, yieldPoint, steelGrade, spmElongation, spmRollforce, entryWidth } = this.income
      const res1 = await this.fetchApi.getTension({
        thick: entryThick,
        yieldStren: yieldPoint
      })
      if (res1.data) {
        // 全线张力的各种参数
        this.form.porTension = res1.data.value1;
        this.form.celTension = res1.data.value2;
        this.form.cleanTension = res1.data.value3;
        this.form.furTension = res1.data.value4;
        this.form.towerTension = res1.data.value5;
        this.form.tmNoneTension = res1.data.value6;
        this.form.tmEntryTension = res1.data.value7;
        this.form.tmExitTension = res1.data.value8;
        this.form.tlNoneTension = res1.data.value9;
        this.form.tlExitTension = res1.data.value10;
        this.form.coatTension = res1.data.value11;
        this.form.cxlTension = res1.data.value12;
        this.form.trTension = res1.data.value13;
      }
      

      const res2 = await this.fetchApi.getTl({
        thick: entryThick,
        yieldStren: yieldPoint,
        steelGrade: steelGrade
      })
      if (res2.data) {
        this.form.tlElong = res2.data.value1;
        this.form.tlLvlMesh1 = res2.data.value2;
        this.form.tlLvlMesh2 = res2.data.value3;
        this.form.tlAcbMesh = res2.data.value4;
      }

      const res3 = await this.fetchApi.getRollforce({
        thick: entryThick,
        yieldStren: yieldPoint,
        steelGrade: steelGrade,
        elong: spmElongation
      })
      if (res3.data) {
        this.form.tmRollforce = res3.data.value1;
      }

      const res4 = await this.fetchApi.getBendforce({
        width: entryWidth,
        rollForce: spmRollforce
      })
      if (res4.data) {
        this.form.tmBendforce = res4.data.value1;
      }

      const res5 = await this.fetchApi.getMesh({
        thick: entryThick,
        yieldStren: yieldPoint,
        steelGrade: steelGrade
      })
      if (res5.data) {
        this.form.tmAcrMesh = res5.data.value1;
        this.form.tmBrMesh = res5.data.value2;
      }

      const res6 = await this.fetchApi.getFur(steelGrade)
      if (res6.data) {
        this.form.preheatingSection = res6.data.value1;
        this.form.heatingSection = res6.data.value2;
        this.form.coolingSection = res6.data.value3;
      }

      console.log('表单初始化完成', this.form)
      this.syncModal()
      this.loading = false
    },
    syncModal() {
      this.$emit('input', this.form)
    }
  }
}
</script>