<template>
  <div class="invoice-add">
    <div class="invoice-add__header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="(item, index) in $route.matched"
          :key="index"
          :to="{ path: item.path }"
          >{{ item.name }}</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="invoice-add__body">
      <el-form
        class="invoice-content"
        ref="form"
        :model="form"
        label-width="100px"
      >
        <div class="invoice-content__header">
          <el-form-item label="选择订单："
            ><el-select
              class="select"
              v-model="value1"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <div class="total">
            合计金额：
            <span class="note">￥999</span>
          </div>
        </div>

        <div class="invoice-content__header">
          <el-form-item label="发票类型：">
            <el-radio v-model="radio1" label="1">普通发票</el-radio>
            <el-radio v-model="radio1" label="2">增值税发票</el-radio>
          </el-form-item>
          <el-form-item label="申请主体：">
            <el-radio v-model="radio2" label="1">个人</el-radio>
            <el-radio v-model="radio2" label="2">企业</el-radio>
          </el-form-item>
        </div>

        <div class="invoice-content__body">
          <el-form-item label="发票抬头：">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="单位税号：">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="单位地址：">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="电话号码：">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="开户银行：">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="银行账号：">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="收件地址：">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="收件人：">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="收件手机：">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </div>

        <div class="invoice-content__footer">
          <div class="invoice-price">
            本次申请开票金额（元）：
            <span class="note">1998.00</span>
          </div>
          <div class="btns">
            <div class="cancel" @click="cancel">取消</div>
            <div class="ok">提交申请</div>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyInvoice",
  data() {
    return {
      form: {},
      options: [
        {
          value: "1",
          label: "黄金糕",
        },
        {
          value: "2",
          label: "双皮奶",
        },
        {
          value: "3",
          label: "蚵仔煎",
        },
        {
          value: "4",
          label: "龙须面",
        },
        {
          value: "5",
          label: "北京烤鸭",
        },
      ],
      value1: [],
      radio1: "",
      radio2: "",
    };
  },
  mounted() {},
  methods: {
    cancel() {
      this.$router.go(-1);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.invoice-add {
  overflow: hidden;
  &__header {
    border-bottom: 1px solid #eee;
    margin-top: 24px;
    padding-bottom: 20px;
  }
  &__body {
    .invoice-content {
      &__header {
        margin-top: 20px;
        width: 1110px;
        padding: 10px 12px;
        background: #fafbfc;
        border: 1px solid #eeeeee;
        box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.04);
        border-radius: 8px;

        .select {
          width: 1000px;
        }

        .total {
          margin-top: 10px;
          margin-left: 80px;
          font-size: 14px;

          .note {
            color: #ff3b30;
          }
        }
      }

      &__body {
        margin-top: 20px;
        width: 1110px;
        padding: 10px 12px;
        background: #fafbfc;
        border: 1px solid #eeeeee;
        box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.04);
        border-radius: 8px;
      }

      &__footer {
        margin-top: 20px;
        padding-bottom: 40px;

        .invoice-price {
          border-top: 1px solid #eee;
          border-bottom: 1px solid #eee;
          line-height: 50px;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          .note {
            font-size: 18px;
            color: #ff3b30;
            font-weight: bold;
            margin-left: 10px;
          }
        }

        .btns {
          margin-top: 20px;
          .cancel {
            display: inline-block;
            margin: 0 10px;
            cursor: pointer;
            width: 122px;
            height: 32px;
            background: #ffffff;
            border: 1px solid #3f8dfd;
            border-radius: 16px;
            text-align: center;
            font-size: 16px;
            line-height: 30px;
            color: #3f8dfd;
          }

          .ok {
            display: inline-block;
            margin: 0 10px;
            cursor: pointer;
            width: 122px;
            height: 32px;
            background: #3f8dfd;
            border-radius: 16px;
            color: #fff;
            text-align: center;
            line-height: 32px;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
