<!--订单详情弹窗-->
<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 v-model="orderInfo.orderId" title="订单号" class="inputWidth" width="300px" :disabled="true" />
          </div>
          <div class="inputBox">
            <input-vue
              v-model="orderInfo.userName"
              title="下单人"
              width="300px"
              class="inputWidth"
              placeholder="请输入下单人"
              :disabled="true"
            />
          </div>
          <div class="inputBox">
            <input-vue v-model="orderInfo.userRole" title="下单人角色" class="inputWidth" width="300px" :disabled="true" />
          </div>
          <div class="inputBox">
            <input-vue v-model="orderInfo.deliveryDate" title="交付日期" class="inputWidth" width="300px" :disabled="true" />
          </div>
          <div class="inputBox">
            <input-vue v-model="orderInfo.receiverPhone" title="收货人联系方式" class="inputWidth" width="300px" :disabled="true" />
          </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="请输入内容"
              />
            </input-vue>
          </div>
        </div>
        <div class="inputContent">
          <div class="inputBox">
            <input-vue v-model="orderInfo.orderSource" title="订单来源" class="inputWidth" width="300px" :disabled="true" />
          </div>
          <div class="inputBox">
            <input-vue
              v-model="orderInfo.userPhone"

              title="联系方式"
              class="inputWidth"
              placeholder="请输入联系方式"
              width="300px"
              :disabled="true"
            />
          </div>
          <div class="inputBox">
            <input-vue v-model="orderInfo.signDate" title="签订日期" class="inputWidth " width="300px" :disabled="true" />
          </div>
          <div class="inputBox">
            <input-vue
              v-model="orderInfo.receiver"

              title="收货人"
              class="inputWidth"
              placeholder="请输入收货人"
              width="300px"
              :disabled="true"
            />
          </div>
          <div class="inputBox">
            <input-vue
              v-model="orderInfo.deliveryAddress"

              title="交付地址"
              class="inputWidth"
              placeholder="请输入交付地址"
              width="300px"
              :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 prop="productName" label="产品名称" />
          <el-table-column prop="categoryName" label="产品型号" />
          <el-table-column prop="productQuantity" label="产品数量" />
          <el-table-column prop="productPrice" label="产品单价" />
        </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: {}
    }
  },
  watch: {
    dataInfo: {
      handler(value) {
        console.log(value)
        if (!value?.id) return

        detail({ id: value.id }).then(res => {
          this.orderInfo = res
        })
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    tableRowClassName: tableRowClassName,
    close() {
      this.$emit('close')
    }
  }
}
</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>