<template>
    <el-dialog title="订单详情"   width="950px" :visible.sync="isShowInfo" append-to-body @close='close'>
    <div class="codeDialog">
   
    <div class="content">
      <div class="inputContent">
        <div class="inputBox">
          <input-vue title="订单号" class="inputWidth"     width="300px"  v-model="orderInfo.orderId" :disabled="true">
          </input-vue>
        </div>
        <div class="inputBox">
          <input-vue
            title="下单人"
            width="300px"
            class="inputWidth"
            placeholder="请输入下单人"
             v-model="orderInfo.userName" :disabled="true"
          ></input-vue>
        </div>
        <div class="inputBox">
          <input-vue title="下单人角色" class="inputWidth" width="300px"  v-model="orderInfo.userRole" :disabled="true"> </input-vue>
        </div>
        <div class="inputBox">
          <input-vue title="交付日期" class="inputWidth" width="300px"  v-model="orderInfo.deliveryDate" :disabled="true"></input-vue>
        </div>
        <div class="inputBox">
          <input-vue title="收货人联系方式" class="inputWidth" width="300px"  v-model="orderInfo.receiverPhone" :disabled="true"> </input-vue>
        </div>
        <div class="inputBox">
          <input-vue title="备注" class="inputWidth" placeholder="请输入备注"  >
          <el-input
          v-model="orderInfo.remark" :disabled="true"
          style="width:300px"
  type="textarea"
  :rows="2"
  placeholder="请输入内容"
  >
</el-input>
          </input-vue>
        </div>
      </div>
      <div class="inputContent">
        <div class="inputBox">
          <input-vue title="订单来源" class="inputWidth" width="300px"  v-model="orderInfo.orderSource" :disabled="true"> </input-vue>
        </div>
        <div class="inputBox">
          <input-vue
            title="联系方式"
            
            class="inputWidth"
            placeholder="请输入联系方式"
           width="300px"  v-model="orderInfo.userPhone" :disabled="true" />
        </div>
        <div class="inputBox">
          <input-vue title="签订日期" class="inputWidth " width="300px"  v-model="orderInfo.signDate" :disabled="true" />
      
        </div>
        <div class="inputBox">
          <input-vue
            title="收货人"
            
            class="inputWidth"
            placeholder="请输入收货人"
            width="300px"  v-model="orderInfo.receiver" :disabled="true" />
        </div>
        <div class="inputBox">
          <input-vue
            title="交付地址"
          
            class="inputWidth"
            placeholder="请输入交付地址"
            width="300px"  v-model="orderInfo.deliveryAddress" :disabled="true"   />
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="title">需求产品清单:</div>
      <el-table
      height="200"
      :data="orderInfo.productList"
      :row-class-name="tableRowClassName"
      :header-cell-style="{
        'text-align': 'center',
        background: '  #2483b3',
        color: 'white',
      }"
      :row-style="{ 'text-align': 'center' }"
      style="width: 100%"
    >
     
      <!-- <el-table-column prop="date" label="序号"> </el-table-column> -->
      <el-table-column prop="brandName" label="产品品牌"> </el-table-column>
      <el-table-column prop="productName" label="产品名称"> </el-table-column>
      <el-table-column prop="categoryName" label="产品型号"> </el-table-column>
      <el-table-column prop="productQuantity" label="产品数量"> </el-table-column>
      <el-table-column prop="productPrice" label="产品单价"> </el-table-column>
    </el-table>
    </div>
    </div>
</el-dialog>
</template>

<script>
import InputVue from "../../input/inputVue.vue";
import dialogHeader from "../dialogHeader.vue";
import RedStar from "../../redStar.vue";
import { tableRowClassName } from '../../../../utils/myUtils/changeTableTr'
import { detail } from '../../../../api/sales/orderList'

export default {
  components: { dialogHeader, InputVue, RedStar },
  props: {
    isShowInfo: {
      type: Boolean,
      default: false,
    },
    dataInfo:''
  },
 data(){
  return{
    orderInfo:''
  }
 },
  methods: {
    tableRowClassName: tableRowClassName,
    close() {
      this.$emit("close");
    },
  },
  watch:{
    dataInfo:{
      handler(value){
        console.log(value);
        if(!value.id)return
        
        detail({id:value.id}).then(res => {
          this.orderInfo = res
        })
      },
      deep:true,
      immediate:true 
    }
  }
};
</script>

<style lang="scss" scoped>
.codeDialog {
  width: 900px;
 
  
  .content {
    padding: 10px;
    display: flex;
    .inputContent {
      padding-right: 40px;
      display: flex;
      flex: 1;
      // justify-content: space-between;
      flex-direction: column;
      .inputBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
  .footer{
    .title{
      margin-bottom: 10px;
    }
  }
  .btnBox {
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    .save,
    .close {
      width: 100px;
    }
  }
}
</style>