<template>
  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title + '-列表', essential: true }]">
    <template slot-scope="{ activeKey, data }">
      <div
        :style="{
          width: '100%',
          height: activeKey == 'list' ? '100%' : '0px',
          overflow: 'hidden'
        }"
      >
        <template-page
          ref="pageRef"
          :get-list="getList"
          :table-attributes="tableAttributes"
          :table-events="tableEvents"
          :options-evens-group="optionsEvensGroup"
          :moreParameters="moreParameters"
          :column-parsing="columnParsing"
          :exportList="exportList"
          :defaultSearchData="defaultSearchData"
          :operation="operation()"
        >
        </template-page>
      </div>
      <zj-page-container v-if="~['details'].indexOf(activeKey)">
        <zj-page-fill>
          <div style="box-sizing: border-box; padding: 20px">
            <el-card size="mini">
              <div slot="header" class="clearfix">
                <span>基础信息</span>
              </div>
              <el-descriptions :column="4" border>
                <el-descriptions-item labelStyle="width:110px" label="网点名称">{{
                  `(${formData.websitId})${formData.websitName}`
                }}</el-descriptions-item>
                <el-descriptions-item labelStyle="width:110px" label="订单单号">{{
                  formData.orderId
                }}</el-descriptions-item>
                <el-descriptions-item labelStyle="width:110px" label="关联工单">{{
                  formData.workerOrderId
                }}</el-descriptions-item>
                <el-descriptions-item labelStyle="width:110px" label="工单品牌">{{
                  formData.brand
                }}</el-descriptions-item>
                <el-descriptions-item labelStyle="width:110px" label="客户姓名">{{
                  formData.userName
                }}</el-descriptions-item>
                <el-descriptions-item labelStyle="width:110px" label="客户电话">{{
                  formData.userMobile
                }}</el-descriptions-item>
                <el-descriptions-item labelStyle="width:110px" label="师傅姓名">{{
                  formData.workerName
                }}</el-descriptions-item>
                <el-descriptions-item labelStyle="width:110px" label="师傅身份证号">{{
                  formData.identity
                }}</el-descriptions-item>
                <el-descriptions-item labelStyle="width:110px" label="师傅联系电话">{{
                  formData.workerMobile
                }}</el-descriptions-item>
                <el-descriptions-item labelStyle="width:110px" label="订单金额">{{
                  formData.totalAmount
                }}</el-descriptions-item>
                <el-descriptions-item labelStyle="width:110px" label="工单销售类型">{{
                  { OWN: '自有', OUT: '外购' }[formData.settlementType]
                }}</el-descriptions-item>
                <el-descriptions-item labelStyle="width:110px" label="支付状态">{{
                  { WAIT: '待支付', PAID: '已支付' }[formData.payStatus]
                }}</el-descriptions-item>
                <el-descriptions-item labelStyle="width:110px" label="支付订单号">{{
                  formData.orderId
                }}</el-descriptions-item>
                <el-descriptions-item labelStyle="width:110px" label="支付时间">{{
                  formData.payTime
                }}</el-descriptions-item>
                <el-descriptions-item labelStyle="width:110px" label="微信流水号">{{
                  formData.transcationId
                }}</el-descriptions-item>
                <el-descriptions-item labelStyle="width:110px" label="分账金额">{{
                  formData.websitAmount
                }}</el-descriptions-item>
                <el-descriptions-item labelStyle="width:110px" label="师傅分账金额">{{
                  formData.workerAmount
                }}</el-descriptions-item>
                <el-descriptions-item labelStyle="width:110px" label="手续费">{{
                  formData.workerProceAmount
                }}</el-descriptions-item>
                <el-descriptions-item labelStyle="width:110px" label="-">-</el-descriptions-item>
                <el-descriptions-item labelStyle="width:110px" label="创建人">{{
                  formData.createBy
                }}</el-descriptions-item>
                <el-descriptions-item labelStyle="width:110px" label="创建时间">{{
                  formData.createTime
                }}</el-descriptions-item>
                <el-descriptions-item labelStyle="width:110px" label="结算人">{{
                  formData.settlementName
                }}</el-descriptions-item>
                <el-descriptions-item labelStyle="width:110px" label="结算时间">{{
                  formData.settlementTime
                }}</el-descriptions-item>
              </el-descriptions>
            </el-card>
            <br />
            <el-card size="mini">
              <div slot="header" class="clearfix">
                <span>订单信息</span>
              </div>
              <el-table :data="formData.settlementOrderItemList" border show-summary>
                <el-table-column prop="goodsName" label="名称"> </el-table-column>
                <el-table-column prop="chargeType" label="收费类型">
                  <template slot-scope="scope">
                    {{ { ACC: '配件', SERV: '服务', MCC: '辅材' }[scope.row.chargeType] }}
                  </template>
                </el-table-column>
                <el-table-column prop="num" label="数量"> </el-table-column>
                <el-table-column prop="normAmount" label="收费标准"> </el-table-column>
                <el-table-column prop="totalAmount" label="订单金额"> </el-table-column>
                <el-table-column prop="workerProceAmount" label="手续费"> </el-table-column>
                <el-table-column prop="workerAmount" label="师傅分账金额"> </el-table-column>
              </el-table>
            </el-card>
            <br />
            <el-card size="mini">
              <div slot="header" class="clearfix">
                <span>分账信息</span>
              </div>
              <el-table :data="[formData]" border>
                <el-table-column prop="workerAmount" label="分账金额"> </el-table-column>
                <el-table-column prop="openId" label="分账接收方类型"> </el-table-column>
                <el-table-column prop="openId" label="分账接收方账号"> </el-table-column>
                <el-table-column prop="status" label="分账结果">
                  <template slot-scope="scope">
                    {{ { WAIT: '待结算', OK: '完成', YC: '异常结算', LINE: '线下结算' }[scope.row.status] }}
                  </template>
                </el-table-column>
                <el-table-column prop="settlementTime" label="分账完成时间"> </el-table-column>
                <el-table-column prop="ycRemark" label="分账失败原因"> </el-table-column>
                <el-table-column prop="transcationId" label="分账明细单号"> </el-table-column>
              </el-table>
            </el-card>
            <el-card size="mini">
              <div slot="header" class="clearfix">
                <span>其他费用信息</span>
              </div>
              <el-table
                :data="[
                  {
                    chargeType: 'SERV',
                    amountName: '服务费用',
                    normAmount: formData.servicePrice || 0,
                    sfsxf: Math.ceil((formData.servicePrice || 0) * 0.6) / 100,
                    sffzje: formData.servicePrice - Math.ceil((formData.servicePrice || 0) * 0.6) / 100
                  },
                  {
                    chargeType: 'SERV',
                    amountName: '其他费用',
                    normAmount: formData.otherPrice || 0,
                    sfsxf: Math.ceil((formData.otherPrice || 0) * 0.6) / 100,
                    sffzje: formData.otherPrice - Math.ceil((formData.otherPrice || 0) * 0.6) / 100
                  }
                ]"
                border
              >
                <el-table-column prop="amountName" label="费用名称"> </el-table-column>
                <el-table-column prop="normAmount" label="费用金额"> </el-table-column>
                <el-table-column prop="sffzje" label="师傅分账金额"> </el-table-column>
                <el-table-column prop="sfsxf" label="师傅手续费"> </el-table-column>
              </el-table>
            </el-card>
          </div>
        </zj-page-fill>
        <div style="box-sizing: border-box; padding: 10px 20px; text-align: right">
          <el-button
            v-if="formData.status === 'WAIT'"
            type="primary"
            @click="gosettlementOrderNewSettlement(formData, data.removeTab)"
            >结算分账</el-button
          >
          <el-button
            v-if="formData.status === 'YC'"
            type="primary"
            @click="gosettlementOrderNewLineSettlement(formData, data.removeTab)"
            >线下结算分账</el-button
          >
          <el-button @click="data.removeTab()">返回</el-button>
        </div>
      </zj-page-container>
    </template>
  </zj-tab-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import {
  settlementOrderNewListPageV2,
  settlementOrderNewPageExport,
  settlementOrderNewDetail,
  settlementOrderNewLineSettlement,
  settlementOrderNewSettlement
} from '@/api/settleManagElecpay'
import operation_mixin from '@/components/template/operation_mixin.js'
export default {
  components: { TemplatePage },
  mixins: [import_mixin, operation_mixin],
  data() {
    return {
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true,
        selectable: this.selectable
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],
      formData: {
        settlementOrderItemList: []
      },
      defaultSearchData: []
    }
  },
  created() {
    if (this?.$route?.params?.pageCode) {
      this.defaultSearchData = [
        {
          param: this?.$route?.params?.pageType,
          compare: '=',
          value: this?.$route?.params?.pageCode,
          label: this?.$route?.params?.pageName
        }
      ]
    }
  },
  computed: {
    moreParameters() {
      return [
        {
          name: '结算状态',
          key: 'status',
          value: this?.$route?.params?.pageCode || '',
          conditions: [
            {
              label: '全部',
              value: ''
            },
            {
              label: '待结算',
              value: 'WAIT'
            },
            {
              label: '已完成',
              value: 'OK'
            },
            {
              label: '异常结算',
              value: 'YC'
            },
            {
              label: '线下结算',
              value: 'LINE'
            }
          ]
        }
      ]
    },
    // 事件组合
    optionsEvensGroup() {
      return [
        [
          [
            this.optionsEvensAuth('batchLedger', {
              click: () => {
                if (this.recordSelected.length === 0) {
                  this.$message.warning('请勾选数据')
                  return
                }
                settlementOrderNewSettlement({
                  id: this.recordSelected.map(item => item.settlementOrderId).join(',')
                }).then(res => {
                  this.$message({ type: 'success', message: `结算成功!` })
                  this.$refs.pageRef.refreshList()
                })
              }
            })
          ]
        ]
      ]
    }
  },
  methods: {
    // 列表请求函数
    getList(pam, cb) {
      try {
        if (pam.status) {
          pam.params.push({ param: 'status', compare: '=', value: pam.status })
        }
        cb && cb(pam)
        return settlementOrderNewListPageV2(pam)
      } catch (error) {}
    },
    // 列表导出函数
    exportList: settlementOrderNewPageExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    selectable(row, index) {
      return ['WAIT'].includes(Object.entries(row.selectMapData.status).find(([key, val]) => val == row.status)?.[0])
    },
    // 表格操作列
    operation() {
      return this.operationBtn({
        details: {
          click: ({ row, index, column }) => {
            settlementOrderNewDetail({
              id: row.settlementOrderId
            }).then(res => {
              this.formData = res.data
              this.openForm()
            })
          }
        },
        settle: {
          conditions: ({ row, index, column }) => {
            return row.status === 'WAIT'
          },
          btnType: 'text',
          prompt: '是否确定结算？',
          click: ({ row, index, column }) => {
            this.gosettlementOrderNewSettlement(row)
          }
        },
        offlineSettle: {
          conditions: ({ row, index, column }) => {
            return row.status === 'YC'
          },
          btnType: 'text',
          prompt: '是否确定结算？',
          click: ({ row, index, column }) => {
            this.gosettlementOrderNewLineSettlement(row)
          }
        }
      })
    },
    gosettlementOrderNewLineSettlement(row, cb) {
      settlementOrderNewLineSettlement({
        id: row.settlementOrderId
      }).then(res => {
        this.$message({ type: 'success', message: `结算成功!` })
        this.$refs.pageRef.refreshList()
        this.$data.formData = this.$options.data().formData
        cb && cb()
      })
    },
    gosettlementOrderNewSettlement(row, cb) {
      settlementOrderNewSettlement({
        id: row.settlementOrderId
      }).then(res => {
        this.$message({ type: 'success', message: `结算成功!` })
        this.$refs.pageRef.refreshList()
        this.$data.formData = this.$options.data().formData
        cb && cb()
      })
    },
    openForm() {
      this.$refs.tabPage.addTab({
        // 对应显示的模块
        activeKey: 'details',
        // 唯一标识
        key: 'details',
        // 页签名称
        label: '详情',
        // 打开时事件
        triggerEvent: () => {},
        // 关闭时事件
        closeEvent: () => {
          this.$data.formData = this.$options.data().formData
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
