<!--
  @description: 发票审核
  @Modifier：qk
  @routerPath:/examine
  @date：2019/1/7
-->
<template>
  <div class="reconciliatio">
    <div class="shopmall-page-title">
      发票审核管理
    </div>
    <div class="shopmall-page-reconciliation">
      <div class="shopmall-page-left">
        <p>
          <table>创建人</table>
          <el-input v-model.trim="formitInfo.departName" style="width:70%;" placeholder="" />
        </p>
        <p>
          <table>发票抬头</table>
          <el-input v-model.trim="formitInfo.invoiceTitle" style="width:70%;" placeholder="" />
        </p>
        <p>
          <table>税号</table>
          <el-input v-model.trim="formitInfo.taxpayerNum" style="width:70%;" placeholder="" />
        </p>
        <p>
          <table>审核状态</table>
          <el-select v-model="formitInfo.auditStatus" style="width:70%;" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </p>
      </div>
      <div class="shopmall-page-right">
        <el-button type="purple" @click="searchList">
          搜索
        </el-button>
        <el-button type="gray" @click="resetList">
          重置
        </el-button>
      </div>
    </div>
    <div class="nav">
      <div class="tel_text">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column
            prop="createBy"
            label="创建人名称"
          />
          <el-table-column
            prop="invoiceTitle"
            label="发票抬头"
          />
          <el-table-column
            prop="taxpayerIdentificationNumber"
            label="发票税号"
          />
          <el-table-column
            prop="bankaccount"
            label="账号"
          />
          <el-table-column
            label="发票类型"
          >
            <template slot-scope="scope">
              <p v-if="scope.row.invoiceType === '00'">
                普通发票
              </p>
              <p v-if="scope.row.invoiceType === '01'">
                增值发票
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="bankname"
            label="开户行"
          />
          <el-table-column
            prop="taxpayeraddr"
            label="地址"
          />
          <el-table-column
            prop="taxpayertel"
            label="电话"
          />
          <el-table-column
            label="审核状态"
          >
            <template slot-scope="scope">
              <p v-if="scope.row.auditStatus === '00'">
                待审核
              </p>
              <p v-if="scope.row.auditStatus === '01'">
                审核通过
              </p>
              <p v-if="scope.row.auditStatus === '02'">
                驳回
              </p>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
          >
            <template slot-scope="scope">
              <el-button v-if="scope.row.auditStatus !== '01'" type="text" size="small" @click="handleClick(scope.row)">
                审核
              </el-button>
              <el-button v-if="scope.row.auditStatus === '01'" type="text" size="small" @click="handleClick(scope.row)">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-row class="pagination shopmall-pagination p16" style="clear:both;margin:20px 0">
        <div class="page-number fl">
          共{{ Math.ceil(total /formitInfo.pageSize) }}页
          {{ total }}条
        </div>
        <el-pagination
          :current-page="formitInfo.pageNo"
          :total="total"
          :page-sizes="[12,24,48]"
          class="fr"
          background
          layout="prev, pager, next, sizes"
          @current-change="pickHandle"
          @size-change="handleSizeChange"
        />
      </el-row>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      title="发票审核详情"
      width="60%"
      custom-class="shop_mall_dialog"
    >
      <div class="p8">
        <p v-if="flg" class="mb10">
          <span style="font-weight: 700">发票基本信息：</span>
        </p>
        <table v-if="flg" class="from_table">
          <tr>
            <td>发票抬头：</td>
            <td>{{ tableDataDtail.invoiceInfo.invoiceTitle }}</td>
            <td>发票税号：</td>
            <td>{{ tableDataDtail.invoiceInfo.taxpayerIdentificationNumber }}</td>
          </tr>
          <!-- 00 普通发票   01 增值发票 -->
          <tr v-if="invoiceType=== '01'">
            <td>账户：</td>
            <td>{{ tableDataDtail.invoiceInfo.bankaccount }}</td>
            <td>开户行：</td>
            <td>{{ tableDataDtail.invoiceInfo.bankname }}</td>
          </tr>
          <!-- 00 普通发票   01 增值发票 -->
          <tr v-if="invoiceType=== '01'">
            <td>电话：</td>
            <td>{{ tableDataDtail.invoiceInfo.taxpayertel }}</td>
            <td>地址：</td>
            <td>{{ tableDataDtail.invoiceInfo.taxpayeraddr }}</td>
          </tr>
          <tr v-if="invoiceType=== '01'">
            <td>营业执照附件：</td>
            <td colspan="3">
              <!-- <upload
                ref="upload"
                :title="``"
                :data="upLoadData"
                :file-list="fileList"
                :auto-upload="true"
                :limit="1"
                :action="importFileUrl"
                file-ref="fileRef"
              /> -->
              <downloadFile :data="upLoadData" />
            </td>
          </tr>
        </table>
        <div class="children_box">
          <!-- <div v-if="flg" class="children_box_top">
            <el-row :gutter="24">
              <el-col :span="12">
                <p> <span style="font-weight: 500">发票基本信息：</span></p>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <p> <span style="font-weight: 500">发票抬头：</span>{{ tableDataDtail.invoiceInfo.invoiceTitle }}</p>
              </el-col>
              <el-col :span="12">
                <p> <span style="font-weight: 500">发票税号：</span>{{ tableDataDtail.invoiceInfo.taxpayerIdentificationNumber }}</p>
              </el-col>
            </el-row>

            <el-row v-if="invoiceType=== '01'" :gutter="24">
              <el-col :span="12">
                <p> <span style="font-weight: 500">账户：</span> {{ tableDataDtail.invoiceInfo.bankaccount }}</p>
              </el-col>
              <el-col :span="12">
                <p> <span style="font-weight: 500">开户行：</span>{{ tableDataDtail.invoiceInfo.bankname }}</p>
              </el-col>
            </el-row>

            <el-row v-if="invoiceType=== '01'" :gutter="24">
              <el-col :span="12">
                <p> <span style="font-weight: 500">电话：</span>{{ tableDataDtail.invoiceInfo.taxpayertel }}</p>
              </el-col>
              <el-col :span="12">
                <p> <span style="font-weight: 500">地址：</span>{{ tableDataDtail.invoiceInfo.taxpayeraddr }}</p>
              </el-col>
            </el-row>

            <el-row v-if="invoiceType=== '01'" :gutter="24">
              <el-col :span="8">
                <p>
                  <span style="font-weight: 500">营业执照附件：</span>
                </p>
              </el-col>
              <el-col :span="16">
                <upload
                  ref="upload"
                  :data="upLoadData"
                  :file-list="fileList"
                  :auto-upload="true"
                  :limit="1"
                  :action="importFileUrl"
                  file-ref="fileRef"
                />
              </el-col>
            </el-row>
          </div> -->
          <div class="children_box_rig mt10">
            <p style="font-weight: 700">
              记录：
            </p>
            <el-table
              ref="multipleTables"
              :data="tableDataDtail.invoiceLog"
              tooltip-effect="dark"
              style="width: 100%;margin-top:10px;"
            >
              <el-table-column
                label="角色/岗位"
                min-width="45px"
                align="center"
              >
                <template slot-scope="scope">
                  {{ scope.row.role === 'shopPlatAdmin' ? '电商平台管理员' : scope.row.role === 'shopAdmin' ? '电商采购部门负责人' : '电商采购人' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="operator"
                label="处理人"
                min-width="45px"
                align="center"
              />
              <el-table-column
                prop="operation"
                label="操作类型"
                min-width="30px"
                align="center"
              />
              <el-table-column
                prop="operateTime"
                label="操作时间"
                min-width="50px"
                align="center"
              />
              <el-table-column
                prop="content"
                label="意见说明"
                min-width="110px"
              />
            </el-table>
          </div>
          <div class="children_box_bottom mt10">
            <p style="font-weight: 700">
              意见：
            </p>
            <el-input
              v-model="formitInfStatus.auditOptions"
              :rows="2"
              type="textarea"
              placeholder="请输入内容"
              style="margin-top:10px;"
            />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="code !== '01' && statust !== '02'" type="purple" @click="adoptClick">通 过</el-button>
        <el-button v-if="code !== '01' && statust !== '02'" type="purple" @click="rejectClick">驳 回</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getAuditInvoices, auditInvocieInfo, auditInvocie } from '../../../api/shoppingmall/order'
import upload from '@/components/common/updownload/upload.vue'
import { upLoadFileUrl, downLoadFileUrl } from '@/api/common/uploadCenter'
// 组件
import downloadFile from '@comp/common/updownload/downloadFile'
// import { randomData } from '@/assets/js/utils/index'
export default {
  components: {
    upload,
    downloadFile
  },
  props: {
  },
  data() {
    return {
      statust: '',
      importFileUrl: upLoadFileUrl,
      downLoadFileUrl: downLoadFileUrl,
      fileList: [], // 营业执照附件
      upLoadData: {
        // 营业执照附件参数
        fileType: 'shop_invoice_business_license_base',
        bizId: ''
      },
      textarea: '',
      flg: false,
      dialogVisible: false,
      formitInfo: {
        // 创建人
        departName: null,
        // 发票抬头
        invoiceTitle: null,
        // 税号
        taxpayerNum: null,
        // 审核状态 00 待审核 01 审核通过 02 驳回
        auditStatus: null,
        pageNo: 1,
        pageSize: 10
      },
      options: [{
        value: '0',
        label: '驳回'
      }, {
        value: '1',
        label: '审核通过'
      }, {
        value: '2',
        label: '待审核'
      }],
      tableData: [
      ],
      tableDataDtail: {},
      formitInfDtail: {
        id: ''
      },
      formitInfStatus: {
        id: '',
        auditOptions: '',
        auditStatus: ''
      },
      total: null,
      code: '',
      invoiceType: '' // 发票类型
    }
  },
  computed: {

  },
  watch: {
    'dialogVisible'(val) {
      if (!val) {
        this.fileList = []
        this.formitInfStatus.auditOptions = ''
      }
    }
  },
  mounted() {
    this.initData()
    // this.upLoadData.bizId = randomData()
  },
  methods: {
    handleClose(done) {
      done()
    },
    adoptClick() {
      this.formitInfStatus.auditStatus = '1'
      auditInvocie(this.formitInfStatus).then(res => {
        this.$message({
          message: '发票审核成功',
          type: 'success'
        })
        this.dialogVisible = false
        this.initData()
      })
    },
    rejectClick() {
      if (this.formitInfStatus.auditOptions) {
        this.formitInfStatus.auditStatus = '0'
        auditInvocie(this.formitInfStatus).then(res => {
          this.dialogVisible = false
          this.initData()
        })
      } else {
        this.$message({
          message: '驳回时，意见不能为空',
          type: 'warning'
        })
      }
    },
    searchList() {
      this.initData()
    },
    resetList() {
      this.formitInfo = {
        departName: null,
        invoiceTitle: null,
        taxpayerNum: null,
        auditStatus: null,
        pageNo: 1,
        pageSize: 10
      }
      this.initData()
    },
    initData() {
      getAuditInvoices(this.formitInfo).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    handleClick(val) {
      this.invoiceType = val.invoiceType // 发票类型
      this.statust = val.auditStatus
      this.code = val.auditStatus
      this.formitInfDtail.id = val.id
      this.formitInfStatus.id = val.id
      auditInvocieInfo(this.formitInfDtail).then(res => {
        this.flg = true
        this.tableDataDtail = res.data
        this.upLoadData.bizId = this.tableDataDtail.invoiceInfo.shopInvoiceBusinessLicenseBase
        // // 营业执照附件回显
        // getFileDetail(this.upLoadData).then(res => {
        //   const fileListData = res.data
        //   const len = fileListData.length
        //   for (let i = 0; i < len; i++) {
        //     const fileDataOne = {
        //       name: fileListData[0].title + '.' + fileListData[0].extend,
        //       url: fileListData[0].path,
        //       fileId: fileListData[0].fileId,
        //       downLoadFileUrl: this.downLoadFileUrl + '?fileId=' + fileListData[0].fileId + '&fileType=' +
        //         fileListData[0].fileType,
        //       fileType: 'shop_invoice_business_license_base',
        //       raw: {
        //         type: fileListData[0].extend
        //       },
        //       look: true
        //     }
        //     this.fileList = []
        //     this.fileList.push(fileDataOne)
        //   }
        // })
      })
      this.dialogVisible = true
    },
    pickHandle(val) {
      this.formitInfo.pageNo = val
      this.initData()
    },
    handleSizeChange(val) {
      this.formitInfo.pageSize = val
      this.initData()
    }
  }
}
</script>
<style scoped lang="less">
.shopmall-page-reconciliation{
   width: 100%;
   height: 60px;
   padding:0 15px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom:1px solid rgba(238, 238, 238, 1);
}
.shopmall-page-left {
    display: flex;
    align-items: center;
    width: 85%;
    p{
        width: 25%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        table{
            margin-right:10px;
        }
    }
}
.shopmall-page-right{
    width: 15%;
    display: flex;
    justify-content: flex-end;
}
.nav{
   width: 100%;
   padding:0 15px;
   align-items: center;
   border-bottom:1px solid rgba(238, 238, 238, 1);
   .searchInput{
    width: 40%;
    display: flex;
    justify-content: flex-end;
   }
}
.tel_text{
  margin-top: 20px;
}
.children_box_top{
 line-height: 2;
}

</style>
