<template>
  <div id="invoice_red_letter_add" class="body">
    <div style="margin-bottom: 10px">
      <span><span style="color: red">*</span>申请方：</span>
      <el-radio-group v-model="buyer">
        <el-radio :label="1">购买方申请</el-radio>
        <el-radio :label="2">销货方申请</el-radio>
      </el-radio-group>
    </div>
    <div style="margin-bottom: 5px">
      <span style="font-weight: bold">对应蓝字发票信息</span>
    </div>
    <div>
      <div class="selectInfo">
        <div style="flex: 1">
          <span><span style="color: red">*</span>发票类型：</span>
          <el-select v-model="invoiceType" placeholder="请选择" style="width: 250px">
            <el-option
                v-for="item in invoiceTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div style="flex: 1">
          <span><span style="color: red">*</span>征税方式：</span>
          <el-select v-model="taxation" placeholder="请选择" style="width: 250px">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="selectInfo" v-if="buyer === 1">
        <div
            style="display: flex;flex: 1;align-items: center">
          <span><span style="color: red">*</span>是否抵扣：</span>
          <el-radio-group v-model="deduction" v-on:change="deductionChange">
            <el-radio :label="1">已抵扣</el-radio>
            <el-radio :label="2">未抵扣</el-radio>
          </el-radio-group>
        </div>
        <div style="flex: 1"></div>
      </div>
      <div v-if="invoiceStatus === 2 || buyer === 2">
        <div class="input_layout">
          <div style="flex: 1">
            <span><span style="color: red">*</span>发票代码：</span>
            <el-input v-model="invoiceCode" placeholder="请输入发票代码" class="input_class"></el-input>
          </div>
          <div style="flex: 1">
            <span><span style="color: red">*</span>发票号码：</span>
            <el-input v-model="invoiceNumber" placeholder="请输入发票号码" class="input_class"></el-input>
          </div>
        </div>
        <div class="input_layout">
          <div style="flex: 1">
            <span><span style="color: red">*</span>填开日期：</span>
            <el-date-picker
                v-model="invoiceDate"
                type="date"
                :editable="false"
                placeholder="选择发票填开日期" style="width: 250px" value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
          <div style="flex: 1">
          </div>
        </div>
      </div>
      <div v-if="false">
        <el-checkbox v-model="oilChecked">成品油专用发票</el-checkbox>
        <div style="margin-bottom: 5px; margin-top: 5px">
          <el-radio v-model="oilSelect" label="1">涉及销售数量变更，将增加销售方成品油库存数量，减少购货方成品油库存数量</el-radio>
        </div>
        <div style="margin-bottom: 5px">
          <el-radio v-model="oilSelect" label="1">仅涉及销售金额变更，不涉及购、销双方的成品油库存数量变动．需谨慎操作！</el-radio>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'invoice_red_letter_add',
  data() {
    return {
      buyer: 1,
      options: [{
        value: '1',
        label: '普通征税'
      }],
      taxation: '1',
      deduction: 1,
      invoiceCode: '',
      invoiceNumber: '',
      invoiceDate: '',
      oilChecked: false,
      oilSelect: '',
      invoiceStatus: 1,
      invoiceTypeList: [
        {
          value: 4,
          label: '增值税纸质专用发票'
        },
        {
          value: 2,
          label: '增值税电子专用发票'
        }
      ],
      invoiceType: 4
    }
  },
  methods: {
    // 设置抵扣状态
    deductionChange(value) {
      this.invoiceStatus = value
      this.invoiceCode = ''
      this.invoiceNumber = ''
      this.invoiceDate = ''
    },
    // 数据检查
    dataCheck() {
      if (this.buyer === '2' || this.deduction === 2) {
        if (this.invoiceCode === '') {
          this.$message({
            message: '发票代码不允许为空',
            type: 'warning'
          })
          return false
        }
        if (this.invoiceNumber === '') {
          this.$message({
            message: '发票号码不允许为空',
            type: 'warning'
          })
          return false
        }
        if (this.invoiceDate === '') {
          this.$message({
            message: '填开日期不允许为空',
            type: 'warning'
          })
          return false
        }
      }
      return true
    },
    // 清空数据
    cleanData() {
      this.buyer = 1
      this.taxation = '1'
      this.deduction = 1
      this.invoiceCode = ''
      this.invoiceNumber = ''
      this.invoiceDate = ''
      this.oilChecked = false
      this.oilSelect = ''
      this.invoiceStatus = 1
      this.invoiceType = 4
    }
  }
}
</script>

<style scoped>
.body {
  display: flex;
  flex-direction: column;
}

.selectInfo {
  display: flex;
  margin-bottom: 5px;
}

.input_layout {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.input_class {
  width: 250px;
}
</style>
