<template>
 <el-dialog  :title="title" width='1000px' :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">
            <el-select
              v-model="value"
              filterable
              style="width: 300px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </input-vue>
        </div>
        <div class="inputBox">
          <input-vue
            title="联系方式"
            width="300px"
            class="inputWidth"
          
          ></input-vue>
        </div>
       
        <div class="inputBox">
          <input-vue title="交付日期" width="300px" class="inputWidth">
            <el-date-picker
              v-model="value1"
              style="width: 300px"
              type="date"
              placeholder="请选择日期"
            >
            </el-date-picker
          ></input-vue>
        </div>
        <div class="inputBox">
          <input-vue title="收货人" width="300px" class="inputWidth"> </input-vue>
        </div>
       
      </div>
      <div class="inputContent">
        <div class="inputBox">
          <input-vue title="下单人" width="300px" class="inputWidth"> </input-vue>
        </div>
        
        <div class="inputBox">
          <input-vue title="签订日期" class="inputWidth">
            <el-date-picker
              v-model="value1"
              style="width: 300px"
              type="date"
            
            >
            </el-date-picker
          ></input-vue>
        </div>
        <div class="inputBox">
          <input-vue
            title="交付地址"
            width="300px"
            class="inputWidth"
          ></input-vue>
        </div>
        <div class="inputBox">
          <input-vue
            title="收货人联系方式"
            width="300px"
            class="inputWidth"
           
          ></input-vue>
        </div>
      </div>
    </div>
    <div class="content">
        <div class="inputContent">
            <div class="inputBox">
          <input-vue title="备注" class="inputWidth" style=" justify-content: space-between;" placeholder="请输入备注">
            <el-input
              style="width: 790px"
              type="textarea"
              :rows="3"
              placeholder="请输入备注"
              v-model="textarea1"
            >
            </el-input>
          </input-vue>
       </div>
        </div>
    </div>
    <div class="footer">
      <div class="title">需求产品清单:</div>
      <el-table
        height="200"
        :data="tableData"
        :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="name" label="产品品牌"> </el-table-column>
        <el-table-column prop="address" label="产品名称"> </el-table-column>
        <el-table-column prop="address" label="产品型号"> </el-table-column>
        <el-table-column prop="address" label="产品数量"> </el-table-column>
        <el-table-column prop="address" label="产品单价"> </el-table-column>
      </el-table>
    </div>
  </div>
  
</el-dialog>
</template>

<script>

import { tableRowClassName } from "../../../../utils/myUtils/changeTableTr";
import InputVue from '../../input/inputVue.vue';
import RedStar from '../../redStar.vue';
export default {
  components: {  InputVue, RedStar, RedStar, InputVue },
  props: {
    isShowInfo: {
      type: Boolean,
      default: false,
    },
    title:''
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    tableRowClassName: tableRowClassName,
    close() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.codeDialog {
  width: 1000px;

  .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 {
    padding: 20px;
    box-sizing: border-box;
    .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>