<template>
  <el-dialog
    :visible.sync="visibleDialog"
    :close-on-click-modal="false"
    :lock-scroll="false"
    title="发票换开"
    width="1080px"
    custom-class="el-dialog__body-p8"
    :before-close="closeDialog"
  >
    <el-row>
      <el-col :span="24" class="tip-waring">
        <img width="14px" src="../../../../assets/img/shopmall/icon-waring.png" alt="">
        温馨提示：目前平台仅支持电子普票换开，纸质发票换开请联系卖家协商
      </el-col>
    </el-row>
    <el-row class="form-content">
      <el-col :span="12" :offset="4">
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="订单编号">
            <el-input v-model="form.num" />
          </el-form-item>
          <el-form-item label="发票类型">
            <el-select v-model="form.type" placeholder="请选择活动区域">
              <el-option label="电子普通发票" value="invoice" />
            </el-select>
          </el-form-item>
          <el-form-item label="抬头类型">
            <div class="headType">
              <span :class="[form.headType==1 ? 'active' : '']" @click="changeHeadType('1')">个人</span>
              <span :class="[form.headType==2 ? 'active' : '']" @click="changeHeadType('2')">单位</span>
            </div>
          </el-form-item>
          <el-form-item v-if="form.headType==1" label="发票抬头">
            <el-input v-model="form.headTypeName" disabled />
          </el-form-item>
          <el-form-item v-if="form.headType==2" label="单位名称">
            <el-select v-model="form.company" placeholder="请填写单位名称" filterable>
              <el-option label="单位1" value="1" />
              <el-option label="单位2" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="form.headType==2" label="纳税人识别号">
            <el-select v-model="form.company" placeholder="请填写单位名称" filterable>
              <el-option label="单位1" value="1" />
              <el-option label="单位2" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="form.headType==2" label="更多选项">
            <div class="more-content">
              <el-row class="more-tip">
                <el-col :span="23">
                  <span @click="changeMoreShow">填写单位地址、电话、开户银行及账号</span>
                </el-col>
                <el-col :span="1">
                  <i :class="[moreShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down']" @click="changeMoreShow" />
                </el-col>
              </el-row>
              <el-row v-if="moreShow" class="content-item">
                <el-col :span="4" :offset="1">
                  单位地址
                </el-col>
                <el-col :span="18">
                  <el-input placeholder="请填写单位地址" />
                </el-col>
              </el-row>
              <el-row v-if="moreShow" class="content-item">
                <el-col :span="4" :offset="1">
                  单位电话
                </el-col>
                <el-col :span="18">
                  <el-input placeholder="请填写单位电话" />
                </el-col>
              </el-row>
              <el-row v-if="moreShow" class="content-item">
                <el-col :span="4" :offset="1">
                  开户银行
                </el-col>
                <el-col :span="18">
                  <el-input placeholder="请填写开户银行" />
                </el-col>
              </el-row>
              <el-row v-if="moreShow" class="content-item">
                <el-col :span="4" :offset="1">
                  银行账号
                </el-col>
                <el-col :span="18">
                  <el-input placeholder="请填写银行账号" />
                </el-col>
              </el-row>
            </div>
          </el-form-item>
          <el-form-item label="发票内容">
            <div class="headType">
              <span :class="[form.headType==1 ? 'active' : '']" @click="changeHeadType('1')">商品明细</span>
              <span :class="[form.headType==2 ? 'active' : '']" @click="changeHeadType('2')">商品类别</span>
            </div>
            <span>
              <i class="el-icon-warning-outline" />
              发票内容将显示详细商品名称与价格信息
            </span>
          </el-form-item>
          <el-form-item label="收票人手机">
            <el-input v-model="form.phone" />
          </el-form-item>
          <el-form-item label="收票人邮箱">
            <el-input v-model="form.email" />
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary">
        确 定
      </el-button>
      <el-button @click="closeDialog">
        取 消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'ApplyReplaceMentDialog',
  props: {
    visibleDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        num: '',
        type: 'invoice',
        headType: '1',
        headTypeName: '个人',
        company: '1',
        phone: '',
        email: ''
      },
      moreShow: false
    }
  },
  methods: {
    //   关闭弹窗
    closeDialog() {
      this.$emit('update:visibleDialog', false)
    },
    // 改变发票抬头类型
    changeHeadType(val) {
      this.form.headType = val
    },
    // 更多选项展开
    changeMoreShow() {
      this.moreShow = !this.moreShow
    }
  }
}
</script>

<style scoped lang="less">
.tip-waring {
    color: #F59A23;
    padding: 5px 15px;
    margin-top: 5px;
    background-color: #fff7eb;
}
.form-content {
    margin-top: 20px;
    .headType {
        display: flex;
        span {
            display: block;
            padding: 5px 15px;
            margin-right: 10px;
            border: 1px solid #e3e4e5;
            cursor: pointer;
        }
        span.active {
            background: url('~@/assets/img/shopmall/icon-selected.png') no-repeat;
            background-size: 20px 20px;
            background-position: 100% 100%;
            border: 1px solid #fe6b2a;
        }
    }
    .more-content {
        border: 1px solid #e3e4e5;
        padding: 5px;
        .more-tip {
            margin-left: 15px;
            cursor: pointer;
        }
        .content-item {
            margin: 10px 0;
        }
    }
}
</style>
