/**
  录入退货物流
 */
<template>
  <div class="rebackExpress">
    <h1>退货物流</h1>
    <div class="inputContainer">
      <div>
        <span>物流公司：</span>
        <el-select v-model="express" filterable placeholder="请选择物流公司（可输入内容进行搜索）">
          <el-option v-for="item in options" :key="item.dictId" :label="item.dictName" :value="item.dictId">
          </el-option>
        </el-select>
      </div>
      <div>
        <span>物流单号：</span>
        <el-input v-model="expressid" maxlength="20" placeholder="请输入物流单号" />
      </div>
    </div>
    <el-button @click="submitExpress">确认提交</el-button>
  </div>
</template>

<script>
import {
  getExpressCompany
} from '@/api/user/express.js'
export default {
  data() {
    return {
      options: [],
      expressid: '',
      express: '',
      value: null
    }
  },
  created() {
    this.getExpressOption()
  },
  methods: {
    async getExpressOption() {
      const response = await getExpressCompany()
      const res = response.data
      if (res.code === '200') {
        this.options = res.data
      } else {
        this.$message({
          message: res.message,
          type: 'warning'
        })
      }
    },
    submitExpress() {
      this.$emit('submit', {
        deliverFormid: this.expressid,
        express: this.express
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.rebackExpress {
	height: 200px;
	padding: 20px 30px;
	border: 1px solid #F3F4F5;

	.inputContainer {
		height: 40px;
		margin-top: 10px;
		display: flex;

		div {
			flex: 1;
			display: flex;
			align-items: center;

			span {
				width: 150px;
				text-align: right;
			}

			>>>.el-input__inner {
				border-radius: 0;
			}
		}
	}

	.el-button {
		width: 200px;
		height: 50px;
		display: block;
		margin: 30px auto;
		color: #FFEBC4;
		background-color: #333333;
		border-radius: 0;
	}
}
</style>
