<template>
  <div id="transaction_info">
    <div style="display: flex; margin-bottom: 10px; flex-wrap: wrap">
      <el-input style="width: 300px; margin-top: 5px" prefix-icon="el-icon-search" v-model="taxName" clearable placeholder="请输入企业名称"></el-input>
      <el-input style="width: 300px; margin-right: 10px; margin-top: 5px" prefix-icon="el-icon-search" v-model="taxId" clearable
                placeholder="请输入企业税号"></el-input>
      <el-input style="width: 300px; margin-right: 10px; margin-top: 5px" prefix-icon="el-icon-search" v-model="payeeTaxName" clearable placeholder="请输入收款方企业名称"></el-input>
      <el-input style="width: 300px; margin-right: 10px; margin-top: 5px" prefix-icon="el-icon-search" v-model="payeeTaxId" clearable
                placeholder="请输入收款方企业税号"></el-input>
<!--      <el-select v-model="device" placeholder="请选择设备类型" style="margin-left: 10px">-->
<!--        <el-option-->
<!--            v-for="item in deviceList"-->
<!--            :key="item.value"-->
<!--            :label="item.label"-->
<!--            :value="item.value">-->
<!--        </el-option>-->
<!--      </el-select>-->
      <el-date-picker
          style="margin-right: 10px; margin-top: 5px"
          v-model="transactionTiem"
          type="datetimerange"
          range-separator="至"
          start-placeholder="支付开始日期"
          end-placeholder="支付结束日期"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      <el-select v-model="transactionStatus" placeholder="请选择交易状态" style="margin-right: 10px; margin-top: 5px">
        <el-option
            v-for="item in transactionStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="invoiceStatus" placeholder="请选择开票状态" style="margin-right: 10px; margin-top: 5px">
        <el-option
            v-for="item in invoiceStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-button style="margin-left: 5px; margin-top: 5px" type="primary" v-on:click="getSearchEnterprises">搜索</el-button>
    </div>
    <div>
      <el-table
          :data="enterprisesList"
          border
          :height="tableHeight">
        <el-table-column
            prop="entName"
            label="企业名称"
            width="180"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="entTaxId"
            label="企业税号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="payeeEntName"
            label="收款方企业名称"
            width="180"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="payeeEntTaxId"
            label="收款方企业税号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="deviceType"
            label="设备类型"
            width="100"
            :formatter="getDeviceName">
        </el-table-column>
        <el-table-column
            prop="productName"
            label="商品名称"
            width="150"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="productType"
            label="商品类型"
            width="120">
        </el-table-column>
        <el-table-column
            prop="transAmt"
            label="交易金额"
            width="120">
        </el-table-column>
        <el-table-column
            prop="payType"
            label="支付方式"
            width="90"
            :formatter="getPayName">
        </el-table-column>
        <el-table-column
            prop="trxId"
            label="支付平台交易id"
            width="120">
        </el-table-column>
        <el-table-column
            prop="payTime"
            label="交易完成时间"
            width="150">
        </el-table-column>
        <el-table-column
            prop="transStatus"
            label="交易状态"
            width="80"
            :formatter="getTransactionStatus">
        </el-table-column>
        <el-table-column
            prop="transErrorMsg"
            label="交易状态说明"
            width="120">
        </el-table-column>
        <el-table-column
          prop="oriPrice"
          label="产品原价"
          width="120">
      </el-table-column>
        <el-table-column
            prop="favouredPrice"
            label="优惠后的价格"
            width="120">
        </el-table-column>
        <el-table-column
            prop="productDesc"
            label="商品描述"
            width="150"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="signPayInfoId"
            label="对应得开票支付信息"
            width="150">
        </el-table-column>
        <el-table-column
            prop="fapiaoTodoId"
            label="待开发票id"
            width="120">
        </el-table-column>
        <el-table-column
            prop="invoiceReqFlowNo"
            label="开票请求流水号"
            width="120">
        </el-table-column>
        <el-table-column
            prop="dockType"
            label="支付平台"
            width="120">
        </el-table-column>
        <el-table-column
            prop="featureItems"
            label="商品对应的服务项目"
            width="300"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="transId"
            label="交易id"
            width="250">
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间"
            width="160">
        </el-table-column>
<!--        <el-table-column-->
<!--            label="操作"-->
<!--            align="center"-->
<!--            width="120"-->
<!--        >-->
<!--          <template slot-scope="scope">-->
<!--            <el-button @click="getEnterprisesInfo(scope.row)" type="primary">编辑</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
    </div>
    <div style="display: flex; justify-content: flex-end; margin-top: 10px">
      <el-pagination
          @size-change="getNumberPage"
          @current-change="getPageNumber"
          :current-page.sync="pageNumber"
          :page-sizes="[10, 30, 50, 100]"
          :page-size="numberPage"
          layout="total, sizes, prev, pager, next"
          :total="totalPage">
      </el-pagination>
    </div>
    <el-dialog
        title="签约企业信息"
        :visible.sync="isShow"
        width="50%"
        :before-close="enterprisesClose">
      <div style="display: flex; flex-direction: column">
        <div style="display: flex">
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end">
            <span style="text-align: right"><span style="color: red">*</span>企业税号：</span>
            <el-input style="width: 200px" v-model="companyId" placeholder="请输入企业税号"></el-input>
          </div>
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end">
            <span style="text-align: right"><span style="color: red">*</span>企业名称：</span>
            <el-input style="width: 200px" v-model="companyName" placeholder="请输入企业名称"></el-input>
          </div>
        </div>
        <div style="display: flex; margin-top: 5px">
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end" v-if="isEdit === false">
            <span style="text-align: right"><span style="color: red">*</span>支付平台客户id：</span>
            <el-input style="width: 200px" v-model="customerId" placeholder="请输入支付平台客户id"></el-input>
          </div>
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end" v-if="isEdit === true">
            <span style="text-align: right"><span style="color: red">*</span>支付平台客户id：</span>
            <el-input style="width: 200px" v-model="customerId" :disabled="true" placeholder="请输入支付平台客户id"></el-input>
          </div>
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end" v-if="isEdit === false">
            <span style="text-align: right"><span style="color: red">*</span>支付平台appid：</span>
            <el-input style="width: 200px" v-model="appId" placeholder="请输入appId"></el-input>
          </div>
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end" v-if="isEdit === true">
            <span style="text-align: right"><span style="color: red">*</span>支付平台appid：</span>
            <el-input style="width: 200px" v-model="appId" :disabled="true" placeholder="请输入appId"></el-input>
          </div>
        </div>
        <div style="display: flex; margin-top: 5px">
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end">
            <span style="text-align: right"><span style="color: red">*</span>支付平台：</span>
            <el-select v-model="payType" placeholder="请选择" v-if="isEdit === false">
              <el-option
                  v-for="item in payTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="payType" placeholder="请选择" :disabled="true" v-if="isEdit === true">
              <el-option
                  v-for="item in payTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end">
            <span style="text-align: right"><span style="color: red">*</span>支付平台加密类型：</span>
            <el-select v-model="payEncryptionType" placeholder="请选择" v-if="isEdit === false">
              <el-option
                  v-for="item in payEncryptionTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="payEncryptionType" placeholder="请选择" :disabled="true" v-if="isEdit === true">
              <el-option
                  v-for="item in payEncryptionTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div style="display: flex; margin-top: 5px">
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end" v-if="isEdit === false">
            <span style="text-align: right">支付平台企业机构id：</span>
            <el-input style="width: 200px" v-model="orgId" placeholder="请输入企业税号"></el-input>
          </div>
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end" v-if="isEdit === true">
            <span style="text-align: right">支付平台企业机构id：</span>
            <el-input style="width: 200px" v-model="orgId" :disabled="true" placeholder="请输入企业税号"></el-input>
          </div>
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end" v-if="isEdit === false">
            <span style="text-align: right">支付平台接口版本号：</span>
            <el-input style="width: 200px" v-model="version" placeholder="请输入企业名称"></el-input>
          </div>
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end" v-if="isEdit === true">
            <span style="text-align: right">支付平台接口版本号：</span>
            <el-input style="width: 200px" v-model="version" :disabled="true" placeholder="请输入企业名称"></el-input>
          </div>
        </div>
        <div style="display: flex; margin-top: 5px">
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end" v-if="isEdit === false">
            <span style="text-align: right">支付平台MD5加密key：</span>
            <el-input style="width: 200px" v-model="md5AppKey" placeholder="请输入企业税号"></el-input>
          </div>
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end" v-if="isEdit === true">
            <span style="text-align: right">支付平台MD5加密key：</span>
            <el-input style="width: 200px" v-model="md5AppKey" :disabled="true" placeholder="请输入企业税号"></el-input>
          </div>
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end" v-if="isEdit === false">
            <span style="text-align: right">支付平台RSA加密类型私钥：</span>
            <el-input style="width: 200px" v-model="rsaCusPriKey"  placeholder="请输入企业名称"></el-input>
          </div>
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end" v-if="isEdit === true">
            <span style="text-align: right">支付平台RSA加密类型私钥：</span>
            <el-input style="width: 200px" v-model="rsaCusPriKey" :disabled="true" placeholder="请输入企业名称"></el-input>
          </div>
        </div>
        <div style="display: flex; margin-top: 5px">
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end" v-if="isEdit === false">
            <span style="text-align: right">支付平台RSA加密类型公钥：</span>
            <el-input style="width: 200px" v-model="rsaTlPubKey" placeholder="请输入企业税号"></el-input>
          </div>
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end" v-if="isEdit === true">
            <span style="text-align: right">支付平台RSA加密类型公钥：</span>
            <el-input style="width: 200px" v-model="rsaTlPubKey" :disabled="true" placeholder="请输入企业税号"></el-input>
          </div>
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end" v-if="isEdit === false">
            <span style="text-align: right">通联支付-SM2加密类型私钥：</span>
            <el-input style="width: 200px" v-model="sm2CusPriKey" placeholder="请输入企业名称"></el-input>
          </div>
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end" v-if="isEdit === true">
            <span style="text-align: right">通联支付-SM2加密类型私钥：</span>
            <el-input style="width: 200px" v-model="sm2CusPriKey" :disabled="true" placeholder="请输入企业名称"></el-input>
          </div>
        </div>
        <div style="display: flex; margin-top: 5px">
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end" v-if="isEdit === false">
            <span style="text-align: right">通联支付-SM2加密类型公钥：</span>
            <el-input style="width: 200px" v-model="sm2TlPubKey" placeholder="请输入企业税号"></el-input>
          </div>
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end" v-if="isEdit === true">
            <span style="text-align: right">通联支付-SM2加密类型公钥：</span>
            <el-input style="width: 200px" v-model="sm2TlPubKey" :disabled="true" placeholder="请输入企业税号"></el-input>
          </div>
          <div style="display: flex; flex: 1; align-items: center">
          </div>
        </div>
      </div>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-button @click="enterprisesClose">取 消</el-button>
        <el-button type="primary" @click="saveEnterprisesInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import cache from '@/utils/cache'
import { AxiosRequestData } from '@/data/axios_request'

export default {
  name: 'transaction_info',
  data() {
    return {
      token: '',
      enterprisesList: [],
      ispId: '',
      entName: '',
      entTaxId: '',
      tableHeight: '',
      totalPage: 0,
      numberPage: 10,
      pageNumber: 1,
      pageNum: 1,
      pageSize: 10,
      isShow: false,
      companyName: '',
      companyId: '',
      payType: '',
      payEncryptionType: '',
      payTypeList: [
        {
          value: 'allin',
          label: 'allin'
        },
        {
          value: 'swiftpass',
          label: 'swiftpass'
        }
      ],
      payEncryptionTypeList: [
        {
          value: 'MD5',
          label: 'MD5'
        },
        {
          value: 'SM2',
          label: 'SM2'
        },
        {
          value: 'RSA',
          label: 'RSA'
        }
      ],
      customerId: '',
      appId: '',
      orgId: '',
      version: '',
      md5AppKey: '',
      rsaCusPriKey: '',
      rsaTlPubKey: '',
      sm2CusPriKey: '',
      sm2TlPubKey: '',
      infoId: '',
      isEdit: false,
      taxName: '',
      taxId: '',
      deviceList: [
        {
          value: '',
          label: '全部'
        },
        {
          value: 1,
          label: '证书'
        },
        {
          value: 2,
          label: '税控盘'
        },
        {
          value: 3,
          label: '金税盘'
        },
        {
          value: 4,
          label: '税控ukey'
        },
        {
          value: 5,
          label: '税控服务器'
        }
      ],
      device: '',
      transactionStatusList: [
        {
          value: '',
          label: '全部'
        },
        {
          value: 1,
          label: '未付款'
        },
        {
          value: 2,
          label: '已付款'
        }
      ],
      transactionStatus: '',
      invoiceStatusList: [
        {
          value: '',
          label: '全部'
        },
        {
          value: true,
          label: '已提交开票'
        },
        {
          value: false,
          label: '未提交开票'
        }
      ],
      invoiceStatus: '',
      payeeTaxName: '',
      payeeTaxId: '',
      transactionTiem: null
    }
  },
  created() {
    this.tableHeight = window.innerHeight - 250
    let company = JSON.parse(cache.getLocal('ISP'))
    this.ispId = company.ispId
    this.token = cache.getToken()
    this.getTransactionInfo()
  },
  mounted() {
    this.tableHeight = window.innerHeight - 250
    window.onresize = () => {
      return (() => {
        this.tableHeight = window.innerHeight - 250
      })()
    }
  },
  methods: {
    // 查询企业交易信息
    getSearchEnterprises() {
      this.pageNumber = 1
      this.numberPage = 10
      this.getTransactionInfo()
    },
    // 获取企业交易信息
    getTransactionInfo: async function () {
      let beginTime = null
      let endTime = null
      if (this.transactionTiem !== null) {
        beginTime = this.transactionTiem[0]
        endTime = this.transactionTiem[1]
      }
      if (this.token) {
        const url = '/marketing/trans/findAllTrans'
        let response = await AxiosRequestData(
            url,
            this.token,
            {
              entName: this.taxName,
              entTaxId: this.taxId,
              payeeEntName: this.payeeTaxName,
              payeeEntTaxId: this.payeeTaxId,
              // deviceType: 2,
              payTimeBegin: beginTime,
              payTimeEnd: endTime,
              transStatus: this.transactionStatus,
              hasCommitInvoice: this.invoiceStatus,
              pageNum: this.pageNumber,
              pageSize: this.numberPage
            },
            false,
            2
        )
        if (response) {
          if (response.code === 0) {
            this.enterprisesList = response.data.records
            this.totalPage = response.data.total
          }
        }
      }
    },
    // 获取当前页码
    getPageNumber(num) {
      this.pageNumber = num
      this.getTransactionInfo()
    },
    // 获取每页显示数据的数量
    getNumberPage(numPage) {
      this.numberPage = numPage
      this.getTransactionInfo()
    },
    // 显示新增企业信息页面
    enterprisesShow() {
      this.isShow = true
    },
    // 保存企业信息
    async saveEnterprisesInfo() {
      if (this.token) {
        const url = '/marketing/isp/signPay/info/save'
        let response = await AxiosRequestData(
            url,
            this.token,
            {
              infoId: this.infoId,
              ispId: this.ispId,
              entName: this.companyName,
              entTaxId: this.companyId,
              dockType: this.payType,
              cusId: this.customerId,
              signType: this.payEncryptionType,
              appId: this.appId,
              orgId: this.orgId,
              version: this.version,
              md5AppKey: this.md5AppKey,
              rsaCusPriKey: this.rsaCusPriKey,
              rsaTlPubKey: this.rsaTlPubKey,
              sm2CusPriKey: this.sm2CusPriKey,
              sm2TlPubKey: this.sm2TlPubKey,
              reqChannel: 4
            },
            false,
            1
        )
        if (response) {
          if (response.code === 0) {
            this.isShow = false
            this.$message({
              message: '保存成功！',
              type: 'success'
            })
            await this.getTransactionInfo()
            this.enterprisesClose()
          } else {
            this.$message.error(response.msg)
          }
        }
      }
    },
    // 企业信息页面关闭
    enterprisesClose() {
      this.isShow = false
      this.isEdit = false
      this.appId = ''
      this.createTime = ''
      this.customerId = ''
      this.companyName = ''
      this.companyId = ''
      this.infoId = ''
      this.ispId = ''
      this.lastUpdateBy = ''
      this.lastUpdateTime = ''
      this.md5AppKey = ''
      this.orgId = ''
      this.rsaCusPriKey = ''
      this.rsaTlPubKey = ''
      this.payEncryptionType = ''
      this.sm2CusPriKey = ''
      this.sm2TlPubKey = ''
      this.version = ''
      this.payType = ''
    },
    // 显示编辑信息页面
    getEnterprisesInfo(row) {
      this.isEdit = true
      this.isShow = true
      this.appId = row.appId
      this.createTime = row.createTime
      this.customerId = row.cusId
      this.companyName = row.entName
      this.companyId = row.entTaxId
      this.infoId = row.infoId
      this.ispId = row.ispId
      this.lastUpdateBy = row.lastUpdateBy
      this.lastUpdateTime = row.lastUpdateTime
      this.md5AppKey = row.md5AppKey
      this.orgId = row.orgId
      this.rsaCusPriKey = row.rsaCusPriKey
      this.rsaTlPubKey = row.rsaTlPubKey
      this.payEncryptionType = row.signType
      this.sm2CusPriKey = row.sm2CusPriKey
      this.sm2TlPubKey = row.sm2TlPubKey
      this.version = row.version
      this.payType = row.dockType
    },
    // 获取设备类型名称
    getDeviceName(row, column, cellValue) {
      let result = cellValue
      if (cellValue === 1) {
        result = '证书'
      } else if (cellValue === 2) {
        result = '税控盘'
      } else if (cellValue === 3) {
        result = '金税盘'
      } else if (cellValue === 4) {
        result = '税控ukey'
      } else if (cellValue === 5) {
        result = '税控服务器'
      }
      return result
    },
    // 获取交易状态
    getTransactionStatus(row, column, cellValue) {
      let result = cellValue
      if (cellValue === '1') {
        result = '未付款'
      } else if (cellValue === '2') {
        result = '已付款'
      }
      return result
    },
    // 获取支付方式名称
    getPayName(row, column, cellValue) {
      let result = cellValue
      if (cellValue === 'W01') {
        result = '微信支付'
      } else if (cellValue === 'A01') {
        result = '支付宝支付'
      }
      return result
    }
  }
}
</script>

<style scoped>

</style>
