<template>
  <div class="app-container">
    <el-table
      v-loading="loading"
      border
      :data="tableData"
      size="small"
      style="width: 100%"
    >
      <el-table-column
        type="index"
        label="序号"
        fixed="left"
        align="center"
      />
      <el-table-column
        prop="orderId"
        :show-overflow-tooltip="true"
        fixed="left"
        label="订单编号(商户订单号)"
        width="140"
        align="center"
      />
      <el-table-column
        prop="iPlat"
        label="渠道"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.iPlat | getChannel }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="payId"
        :show-overflow-tooltip="true"
        label="订单号"
        align="center"
        width="140"
      />
      <el-table-column
        prop="custName"
        label="客户姓名"
        align="center"
      />
      <el-table-column
        prop="custOrgName"
        label="客户营业部"
        align="center"
      />
      <el-table-column
        prop="fundAccount"
        label="资金账号(用户标识)"
        align="center"
        width="130"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.fundAccount == scope.row.mobile ? '--' : scope.row.fundAccount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="手机号"
        align="center"
        width="110"
      />
      <el-table-column
        prop="custRiskLevel"
        :show-overflow-tooltip="true"
        label="客户风测等级"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.custRiskLevel | getCustomRiskLevel }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="productName"
        :show-overflow-tooltip="true"
        label="产品名称"
        align="center"
      />
      <el-table-column
        prop="productType"
        :show-overflow-tooltip="true"
        label="产品类型"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.productType | getProductType }}</span>
        </template>
      </el-table-column>
      <!-- 风险等级 -->
      <el-table-column
        prop="productRiskLevel"
        :show-overflow-tooltip="true"
        label="产品风险等级"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.productRiskLevel | getRiskLevel }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="投顾账号"
        align="center"
        prop="tgAccount"
      />
      <el-table-column
        label="投顾名称"
        align="center"
        prop="tgName"
      />
      <el-table-column
        label="投顾营业部"
        align="center"
        prop="tgOrgName"
      />
      <el-table-column
        prop="payType"
        :show-overflow-tooltip="true"
        label="支付方式"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.payType | getPayType }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="productPrice"
        label="产品定价"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.payType === 13">{{ scope.row.commissionRate }}‰</span>
          <span v-else>{{ (scope.row.productPrice / 100).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="优惠券ID"
        align="center"
        prop="couponId"
      />
      <el-table-column
        label="优惠券名称"
        align="center"
        prop="couponName"
      />
      <el-table-column
        label="优惠金额/天数"
        align="center"
        prop="couponValue"
      />
      <el-table-column
        prop="payTotal"
        label="支付金额"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.payType === 13">--</span>
          <span v-else>{{ (scope.row.payTotal / 100).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="cancelAmount"
        label="退款金额"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.orderStatus===100">{{ (scope.row.cancelAmount / 100).toFixed(2) }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderStatus"
        :show-overflow-tooltip="true"
        label="订单状态"
        align="center"
        min-width="85"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.orderStatus | getOrderStatus(scope.row.payType) }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="supportStatus"
        label="信用账号提拥状态"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.payType === 13 ? scope.row.supportStatus : '' | getCommissionStatus }}
        </template>
      </el-table-column>
      <el-table-column
        prop="conquerStatus"
        label="信用账号降拥状态"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.payType === 13 && scope.row.orderStatus === 100 ? scope.row.conquerStatus : '' | getCommissionStatus }}
        </template>
      </el-table-column> -->
      <el-table-column
        prop="refundStatus"
        :show-overflow-tooltip="true"
        label="退款状态"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.payType === 13">--</span>
          <span v-else>{{ scope.row.refundStatus | getRefundStatus(scope.row.payType) }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="refundStatus"
        :show-overflow-tooltip="true"
        label="解约状态"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.payType === 13">{{ getRefundStatus(scope.row.refundStatus, 13) }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="isRenew"
        :show-overflow-tooltip="true"
        label="是否续订"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.isRenew === 1 ? '续订' : '新订' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="下单时间"
        align="center"
        prop="createTime"
        width="90"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="支付时间"
        align="center"
        prop="payTime"
        width="90"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.payTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="生效时间"
        align="center"
        prop="moduleStart"
        width="90"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.moduleStart) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="到期时间"
        align="center"
        prop="moduleEnd"
        width="90"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.moduleEnd) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="申请退款时间"
        align="center"
        prop="applyRefundTime"
        width="90"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.payType === 13 || !scope.row.applyRefundTime">--</span>
          <span v-else>{{ parseTime(scope.row.applyRefundTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="退款成功时间"
        align="center"
        prop="approveRefundTime"
        width="90"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.orderStatus === 100 && scope.row.approveRefundTime">{{ parseTime(scope.row.approveRefundTime) }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="申请解约时间"
        align="center"
        prop="applyRefundTime"
        width="90"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.payType === 13 && scope.row.applyRefundTime">{{ parseTime(scope.row.applyRefundTime) }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column
        label="解约成功时间"
        align="center"
        prop="approveRefundTime"
        width="90"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.payType === 13 && scope.row.approveRefundTime">{{ parseTime(scope.row.approveRefundTime) }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="applyReason"
        :show-overflow-tooltip="true"
        label="解约理由"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.payType === 13 && scope.row.applyReason">{{ scope.row.applyReason }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="agreementNo"
        :show-overflow-tooltip="true"
        label="天威协议编号"
        align="center"
      >
      </el-table-column> -->
      <el-table-column
        prop="valid"
        :show-overflow-tooltip="true"
        label="权限状态"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.valid === 1 ? '有效' : '无效' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="applyReason"
        :show-overflow-tooltip="true"
        label="退款理由"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.payType === 13 || !scope.row.applyReason">--</span>
          <span v-else>{{ scope.row.applyReason }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="examineReason"
        :show-overflow-tooltip="true"
        label="退款审核说明"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.refundStatus === 210">{{ scope.row.examineReason }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="tyReason"
        :show-overflow-tooltip="true"
        label="签约审核理由"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="referNo"
        :show-overflow-tooltip="true"
        label="推荐人编号"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="referName"
        :show-overflow-tooltip="true"
        label="推荐人姓名"
        align="center"
      >
      </el-table-column> -->
      <el-table-column
        prop="ascriptionId"
        :show-overflow-tooltip="true"
        label="归属关系ID"
        align="center"
      />
      <el-table-column
        prop="ascriptionMobile"
        :show-overflow-tooltip="true"
        label="归属关系手机号"
        align="center"
      />
      <el-table-column
        prop="productSponsorId"
        :show-overflow-tooltip="true"
        label="产品推荐人ID"
        align="center"
      />
      <el-table-column
        prop="productSponsorMobile"
        :show-overflow-tooltip="true"
        label="产品推荐人手机号"
        align="center"
      />
      <el-table-column
        label="操作"
        align="center"
        width="80"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            v-show="scope.row.refundStatus === 180 && scope.row.orderStatus === 95"
            type="text"
            size="mini"
            class="inline-btn"
            @click="reviewed(scope.row)"
          >{{ scope.row.payType === 13 ? '解约' : '退款' }}审核</el-button>
          <el-button
            v-show="[220].includes(scope.row.orderStatus) && scope.row.payType !== 14 && scope.row.payType !== 13"
            type="text"
            size="mini"
            class="inline-btn"
            style="margin-left: 0px;"
            @click="refund(scope.row)"
          >直接退款</el-button>
          <el-button
            v-show="[95, 220].includes(scope.row.orderStatus) && scope.row.payType === 13"
            type="text"
            size="mini"
            class="inline-btn"
            style="margin-left: 0px;"
            @click="refund(scope.row)"
          >直接解约</el-button>
          <!-- <el-button
            v-show="[170].includes(scope.row.orderStatus)"
            type="text"
            size="mini"
            class="inline-btn"
            style="margin-left: 0px;"
            @click="signing(scope.row)"
          >签约审核</el-button> -->
        </template>
      </el-table-column>
      <!-- v-show="scope.row.orderStatus === 220 && scope.row.valid === 1" -->
      <el-table-column
        prop="title"
        fixed="right"
        :show-overflow-tooltip="true"
        label="签约协议"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            class="inline-btn"
            @click="agreement(scope.row)"
          >协议详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="current"
      :page-size="size"
      :total="total"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
    <refundApplication ref="refund" />
    <refundLication ref="directRefund" />
    <agreementDetails ref="details" />
  </div>
</template>

<script>
import { queryUnderOrderList, queryOrderList, queryContractList } from '@/api/order.js'
import { parseTime } from '@/utils/index'
import refundApplication from './refundApplication.vue'
import agreementDetails from './agreementDetails.vue'
import refundLication from './refundLication.vue'
export default {
  components: {
    refundApplication,
    agreementDetails,
    refundLication
  },
  props: {},
  data() {
    return {
      loading: false,
      tableData: [],
      orderIds: [],
      current: 1,
      size: 10,
      total: 0
    }
  },
  computed: {},
  watch: {},
  created() {
    this.queryUnderOrderListFn()
  },
  mounted() {},
  methods: {
    parseTime,
    async queryUnderOrderListFn() {
      this.loading = true
      const res = await queryUnderOrderList()
      if (res.code !== 0) return this.$message.error(res.message)
      if (res.data && res.data.length > 0) {
        this.orderIds = res.data
        this.getOrderList()
      }
      this.loading = false
    },
    // 查询订单
    async getOrderList() {
      const params = {}
      params.offset = (this.current - 1) * this.size
      params.size = this.size
      params.orderIds = this.orderIds
      const res = await queryOrderList(params)
      if (res.code === 0) {
        this.tableData = res.data.list
        this.total = res.data.total
      } else {
        this.$message.error(res.message)
      }
      // console.log(params)
    },
    sizeChange(val) {
      this.current = 1
      this.size = val
      this.getOrderList()
    },
    pageChange(val) {
      this.current = val
      this.getOrderList()
    },
    getRiskLevel(row) {
      switch (row) {
        case 1:
          return 'C1保守型'
        case 2:
          return 'C2谨慎型'
        case 3:
          return 'C3稳健型'
        case 4:
          return 'C4积极型'
        case 5:
          return 'C5激进型'
        default:
          break
      }
    },
    // 审核退款
    reviewed(row) {
      // console.log(row)
      // this.$confirm('是否要进行退款申请?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      const _this = this.$refs.refund
      _this.id = row.orderId
      _this.createTime = row.createTime
      _this.form.applyReason = row.applyReason
      _this.form.cancelAmount = row.cancelAmount
      _this.data = row
      _this.dialog = true
      // }).catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消申请'
      //   })
      // })
    },
    // vip直接退款
    refund(row) {
      const _this = this.$refs.directRefund
      _this.id = row.orderId
      _this.createTime = row.createTime
      _this.data = row
      _this.dialog = true
    },
    // 协议详情(无弹窗)
    async agreement(row) {
      const _this = this.$refs.details
      const params = {}
      params.agreementNo = row.agreementNo
      // params.sdOrderId = row.sdOrderId
      if (row.agreementNo.indexOf('-') !== -1) {
        return this.$message.error('该历史订单没有找到原合同')
      }
      const data = await queryContractList(params)
      if (data.code === 0) {
        // _this.createTime = row.createTime
        // data.data.map((v, k) => {
        //   v.status = k + 1
        // })
        // console.log(data.data)
        if (!data.data.length) {
          return this.$message.error('暂无协议!')
        }
        _this.data = data.data
        _this.dialog = true
        // if (!data.data[0].htid) {
        //   return this.$message.error('天威电子协议生成中，如有需要请联系天威相关人员。')
        // } else {
        //   _this.dialog = true
        // }
        // if (row.sdOrderId) {
        //   if (data.data.length === row.agreementNo.split(',').length) {
        //     _this.dialog = true
        //   } else {
        //     this.$message.error('天威电子协议生成中，如有需要请联系天威相关人员。')
        //   }
        // } else {
        //   if (data.data.length === 3) {
        //     _this.dialog = true
        //   } else {
        //     this.$message.error('天威电子协议生成中，如有需要请联系天威相关人员。')
        //   }
        // }
      } else {
        _this.error = data.message
        this.$message.error(data.message)
      }
    }
  }
}
</script>
<style scoped lang="scss">
.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
