<!--下订单，废弃-->
<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-select>
            </input-vue>
          </div>
          <div class="inputBox">
            <input-vue
              title="联系方式"
              width="300px"
              class="inputWidth"
            />
          </div>

          <div class="inputBox">
            <input-vue title="交付日期" width="300px" class="inputWidth">
              <el-date-picker
                v-model="value1"
                style="width: 300px"
                type="date"
                placeholder="请选择日期"
              />
            </input-vue>
          </div>
          <div class="inputBox">
            <input-vue title="收货人" width="300px" class="inputWidth" />
          </div>
        </div>
        <div class="inputContent">
          <div class="inputBox">
            <input-vue title="下单人" width="300px" class="inputWidth" />
          </div>

          <div class="inputBox">
            <input-vue title="签订日期" class="inputWidth">
              <el-date-picker
                v-model="value1"
                style="width: 300px"
                type="date"
              />
            </input-vue>
          </div>
          <div class="inputBox">
            <input-vue
              title="交付地址"
              width="300px"
              class="inputWidth"
            />
          </div>
          <div class="inputBox">
            <input-vue
              title="收货人联系方式"
              width="300px"
              class="inputWidth"
            />
          </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
                v-model="textarea1"
                style="width: 790px"
                type="textarea"
                :rows="3"
                placeholder="请输入备注"
              />
            </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 prop="name" label="产品品牌" />
          <el-table-column prop="address" label="产品名称" />
          <el-table-column prop="address" label="产品型号" />
          <el-table-column prop="address" label="产品数量" />
          <el-table-column prop="address" label="产品单价" />
        </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 },
  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>