<template>
  <t-card :bordered="false">
    <t-tabs v-model="tabIndex" @change="tabIndexChange">
      <t-tab-panel :value="3" label="待审核" :destroyOnHide="false"></t-tab-panel>
      <t-tab-panel :value="1" label="已通过" :destroyOnHide="false"></t-tab-panel>
      <t-tab-panel :value="2" label="已拒绝" :destroyOnHide="false"></t-tab-panel>
    </t-tabs>
    <div class="form-step-container">
      <t-table
        rowKey="index"
        :data="list"
        :columns="columns"
        :stripe="false"
        :bordered="false"
        :hover="true"
        size="large"
        table-layout="auto"
        cellEmptyContent="-"
      >
        <template #member="{ row }">
          <div>{{ row.member.nikename }}</div>
        </template>
        <template #invoice_image="{ row }">
          <img v-if="row.invoice_image" :src="$store.state.user.apiUrl+row.invoice_image" style="width: 200px;">
        </template>
        <template #if_ssue="{ row }">
          <t-tag theme="primary" v-if="row.if_ssue==3">待审核</t-tag>
          <t-tag theme="success" v-if="row.if_ssue==1">已通过</t-tag>
          <t-tag theme="danger" v-if="row.if_ssue==2">已拒绝</t-tag>
        </template>
        <template #select="{ row }">
            <t-button @click="openInfo(row)" theme="primary">查看</t-button>
        </template>
      </t-table>
      <div style="margin-top: 30px">
        <t-pagination
          :total="total"
          :page-size="size"
          @current-change="onCurrentChange"
          :showPageSize="false"
        ></t-pagination>
      </div>
    </div>
    <t-dialog header="申请详情" :visible="infoMode" :onClose="onCloseMy" :closeOnOverlayClick="false" :cancelBtn="null" :confirmBtn="null" width="800px">
      <t-space direction="vertical">
        <t-descriptions :label-style="{ width: '200px', textAlign: 'left' }" bordered :column="2">
          <t-descriptions-item label="申请人">{{ info.header.name }}</t-descriptions-item>
          <t-descriptions-item label="公司名称">{{ info.header.unit }}</t-descriptions-item>
          <t-descriptions-item label="纳税人识别号">{{ info.header.taxpayer_identification_number }}
          </t-descriptions-item>
          <t-descriptions-item label="单位地址">{{ info.header.unit_address }}</t-descriptions-item>
          <t-descriptions-item label="单位电话">{{ info.header.telephone }}</t-descriptions-item>
          <t-descriptions-item label="银行基本户账号">{{ info.header.bank_basic_account_number }}</t-descriptions-item>
          <t-descriptions-item label="开户行">{{ info.header.bank }}</t-descriptions-item>
          <t-descriptions-item label="发票类别">{{ info.invoice_type==1?'普票':'专票' }}</t-descriptions-item>
          <t-descriptions-item label="发票金额">{{ info.money }} 元</t-descriptions-item>
          <t-descriptions-item label="发票图片">
            <img v-if="invoice_image!=''&&invoice_image!=null" :src="$store.state.user.apiUrl+invoice_image" style="width: 200px;">
            <t-upload
              :action="$store.state.user.apiUrl+'/api/common/upload'"
              v-model="invoice_image_show"
              accept="image/*"
              theme="custom"
              :data="{association_id:1}"
              :format-response="(response) => formatResponse(response)">
              <t-button theme="primary">上传发票</t-button>
            </t-upload>
          </t-descriptions-item>
        </t-descriptions>
        <div v-if="info.if_ssue==3" style="text-align: center">
          <t-popconfirm content="确定要审核通过吗？" @confirm="onSubmit(1)">
            <t-button theme="success">通过</t-button>
          </t-popconfirm>
          <t-popconfirm placement="top" @confirm="onSubmit(2)">
            <template slot="content">
              <div class="title">请说明拒绝原因</div>
              <div style="padding: 10px 0px">
                <t-input v-model="reason" placeholder="请输入" style="max-width: 500px"/>
              </div>
            </template>
            <t-button theme="danger" style="margin-left: 50px">拒绝</t-button>
          </t-popconfirm>
        </div>
      </t-space>
    </t-dialog>
  </t-card>

</template>
<script lang="ts">
import store from "@/store";

export default {
  data() {
    return {
      tabIndex: 3,
      page: 1,
      total: 0,
      size: 10,
      list: [],
      info: {
        header: {}
      },
      this_id:0,
      member_id:0,
      reason:'',
      infoMode: false,
      invoice_image_show: [],
      invoice_image:'',
      association: {},
      columns: [
        {colKey: 'member', title: '申请用户'},
        {colKey: 'money', title: '发票金额'},
        {colKey: 'if_ssue', title: '状态'},
        {colKey: 'createtime', title: '申请时间'},
        {colKey: 'invoice_image', title: '发票'},
        {colKey: 'select', title: '操作', width: 200, align: 'center'},
      ],
    }
  },
  mounted() {
    if (typeof (store.state.user.association) == 'object') {
      this.association = store.state.user.association;
    } else {
      this.association = JSON.parse(store.state.user.association);
    }
    console.log(this.association);
    this.getList();
  },
  methods: {
    onCurrentChange(d) {
      this.page = d;
    },
    tabIndexChange(d) {
      console.log(d);
    },
    onSubmit(this_if_ssue){
      if(this_if_ssue==1){
        if(this.invoice_image==''||this.invoice_image==null){
          this.$message.error('请上传发票图片！');
          return;
        }
      }else{
        if (this.reason==''){
          this.$message.error('请填写拒绝理由！');
          return;
        }
      }
      this.$request
        .post("/invoice_header/updateInvoiceHeader", {id:this.this_id,member_id:this.member_id,if_ssue: this_if_ssue, reason: this.reason,invoice_image:this.invoice_image})
        .then((res) => {
          console.log(res);
          if(res.code==1){
            this.$message.success(res.msg);
            this.infoMode=false;
            this.getList();
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getList() {
      this.$request
        .post("/invoice_header/getLogsForAssociation", {page: this.page, size: 10, if_ssue: this.tabIndex})
        .then((res) => {
          console.log(res);
          this.list = res.data.data;
          this.total = res.data.count;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    formatResponse(res) {
      console.log(res);
      this.invoice_image=res.data.url;
      return {url: res.data.fullurl};
    },
    onCloseMy() {
      this.addMode = false;
      this.infoMode = false;
    },
    openInfo(row) {
      this.this_id=row.id;
      this.member_id=row.member_id;
      this.$request
        .post("/invoice_header/getInvoiceLogWithHeader", {id: row.id})
        .then((res) => {
          console.log(res);
          this.info = res.data;
          this.invoice_image = this.info.invoice_image;
          this.infoMode = true;
        })
        .catch((e) => {
          console.log(e);
        });

    },
  }
}
</script>
<style scoped lang="less">

</style>
