<template>
	<div class="diaClass">
		<!--		工作流引用  显示表单-->
		<!--		{{workflow.workId}}-->

    <el-card>

      <el-form :model="form" label-width="120px" label-position="right" inline ref="ruleFormRef"  >
        <el-row>
          <el-col :span="8">
            <el-form-item label="物料编码" prop="itemCd">
              <el-input v-model="form.itemCd" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物料名称" prop="itemNm">
              <el-input v-model="form.itemNm" readonly>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请日期" prop="applyDt">
              <el-input v-model="form.applyDt" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="8">
            <el-form-item label="年份" prop="year">
              <el-input v-model="form.year" readonly></el-input>

            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计量单位" prop="uom">
              <el-select   v-model="form.uom" clearable style="" disabled>
                <el-option v-for="(option,i) in dictList.MEASURING_UNIT" :key="i" :value="option.dicCode" :disabled="option.disabled"
                           :label="option.dicName"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="规格型号" prop="specType" >
              <el-input v-model="form.specType" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="specType">
              <el-input readonly
                        v-model="form.remark"
                        :autosize="{ minRows: 2, maxRows: 4 }"
                        type="textarea"
                        placeholder=""
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </el-card>

    <el-card class="box-card" v-show="true">
      <el-table :data="tableDataMx" border highlight-current-row>
        <el-table-column type="index" label="行号" align="center" width="60">
          <template #default="scope">
            <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="true" prop="tradePartnerName" label="客户名称" header-align="center" align="center"
                         width="240"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="qty" label="计划量" header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="priceCash" label="现汇价格" header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="priceBill" label="承兑价格" header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="remark" label="备注" header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>

      </el-table>
    </el-card>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance,
		nextTick
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()
	import style from '@/tools/style'
	const cardBodyStyle = ref(style.card)
	/**
	 * 新增表单form
	 */
	const form = ref({
		id: '',

	})
  const tableDataMx = ref([])

	import {
		useWorkflowStore
	} from "@/stores/workflow"
	const workflow = useWorkflowStore()
  const dictList = ref({})
  const dictData = () => {
    var url = 'framework/Common/querySelectorList'
    var param = {
      type: JSON.stringify([ 'MEASURING_UNIT'])
    }
    proxy.$axios.get(url, param).then(response => {
      if (response.data.code == '0') {
        dictList.value = response.data.data
      } else {
        ElMessage.error('操作失败！' + response.data.msg)
      }
    })

  }
  const currentPage = ref(1)
  const pageSize = ref(10)
  const getFrom = () =>{
    var url = 'sal/PlanHead/queryByWorkId'
    var param = {
      id: workflow.workId
    }
    proxy.$axios.get(url, param).then(response => {
      if (response.data.code == '0') {
        form.value = response.data.data
        getTableLine(response.data.data.id)
      } else {
        ElMessage.error('操作失败！' + response.data.msg)
      }
    })
  }
  const getTableLine = (id) =>{
    var url = 'sal/PlanLine/queryAll'
    var param = {
      params: JSON.stringify({fId: id})
    }
    proxy.$axios.post(url, param).then(response => {
      if (response.data.code == 0) {
        tableDataMx.value = response.data.data.records
      } else {
        ElMessage({
          type: 'error',
          message: '操作失败' + response.data.msg
        });
      }
    });
  }

	//
	onMounted(() => {
    dictData()
    getFrom()


	})
</script>

<style scoped>
::v-deep .el-form-item {
  width: 100%
}

::v-deep .el-dialog__body {
  background-color: #F2F6FC;
}

.el-date-editor--date {
  width: 100%;
}

::v-deep .diaClass .el-form-item__label {
  width: 140px !important;
}

</style>
