<script setup lang="ts">
import { shallowRef, ref, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { GlobalStore } from '@/stores/index'
import { fnMd5 } from '@/utils/common'
import { ElMessage } from 'element-plus'
import Drawer from '@/components/Drawer/index.vue'
import ImageCom from '@/components/Image/index.vue'
import { ColumnProps } from '@/components/TableBase/interface/index'
import { percentage_Get, percentage_Approval } from '@/api/percentage/index'
import PercentageTable from './PercentageTable.vue'
import {
  royalty,
  columnsRemit,
  labelsInvoice,
  useStapublicFun
} from '@/hooks/useTablePublic'
interface InfoType {
  Id: number
  T_State: number
  T_approver: string
  T_approver_name: string
  T_customer: string
  T_date: string
  T_money: number
  T_number: string
  T_uuid_name:string
  T_out: number
  T_pdf: string
  T_remark: string
  T_submit: string
  T_type: number
  T_discount: number
  T_submit_name: string
  T_project: string
  T_approval_money: any
  T_approval_opinion: any
  T_task_id: string
  T_device_type: string
  T_verify_type: string
  T_verifyCompany: any
}

const route = useRoute()
const router = useRouter()
const isSale = ref(false)
const isVerify = ref(true)
const tableSnData = ref<any[]>([])
const tableData = ref<any[]>([])
const invoiceTableData = ref<any[]>([])
const recoveriesTableData = ref<any[]>([])
const info = ref<InfoType | undefined>()
const globalStore = GlobalStore()
const drawerSnRef = ref<InstanceType<typeof Drawer> | null>(null)
const headerCellStyle = shallowRef({
  background: '#909399',
  height: '50px',
  color: '#fff'
})

let columns: ColumnProps[] = [
  { type: 'index', label: '序号', width: 80, align: 'center ' },
  { label: '产品图片', prop: 'T_product_img', align: 'center ', name: 'T_product_img' },
  { label: '产品名称', prop: 'T_product_name', align: 'center ' },
  { label: '产品分类', prop: 'T_product_class_name', align: 'center ' },
  { label: '产品型号', prop: 'T_product_model', align: 'center ', name: 'T_product_model' },
  { label: '产品规格', prop: 'T_product_spec', align: 'center ' },
  {
    label: '是否关联SN',
    prop: 'T_product_relation_sn',
    align: 'center ',
    width: 120,
    name: 'T_product_relation_sn'
  },
  { label: '数量', prop: 'T_product_total', align: 'center ' },
  { label: '已出库数量', prop: 'T_product_out', align: 'center ' },
  { prop: 'operation', label: '操作', width: 100, fixed: 'right', align: 'center ' }
]

const VerifyColumns: ColumnProps[] = [
  { type: 'index', label: '序号', width: 80, align: 'center ' },
  { label: '产品图片', prop: 'T_product_img', align: 'center ', name: 'T_product_img' },
  { label: '产品名称', prop: 'T_product_name', align: 'center ' },
  { label: '产品分类', prop: 'T_product_class_name', align: 'center ' },
  { label: '产品型号', prop: 'T_product_model', align: 'center ', name: 'T_product_model' },
  { label: '产品规格', prop: 'T_product_spec', align: 'center ' },
  { label: '数量', prop: 'T_product_total', align: 'center ' },
  { label: '单价', prop: 'T_price', align: 'center ' },
  { label: '总价', prop: 'total', align: 'center ' }
]

const columnsRecoveries = [
  { type: 'index', label: '序号', width: 80, align: 'center ' },
  { label: '回款时间', prop: 'T_date', align: 'center ' },
  { label: '回款金额', prop: 'T_money', align: 'center ' }
]

const columnsInvoice = [
  { type: 'index', label: '序号', width: 80, align: 'center ' },
  { label: '开票时间', prop: 'T_date', align: 'center ' },
  { label: '开票金额', prop: 'T_money', align: 'center ' }
]

const snColumns = [
  { type: 'index', label: '序号', width: 80, align: 'center ' },
  { label: 'SN', prop: 'sn', align: 'center ' }
]
const tableDatalty = ref<any[]>([])//提成
const getStorehouseContractGet = async () => {
  const res: any = await percentage_Get({ User_tokey: globalStore.GET_User_tokey, T_id: route.params.id })

  console.log('提成详情', route.params, res)
  if (res.Code === 200) {
    info.value = res.Data
    const { T_Product, T_remit, T_invoice, T_recoveries,T_item } = res.Data
    tableData.value = T_Product
    tableDatalty.value = T_item
    T_remit && InvoiceRef.value?.setMoneyDeatil(T_remit)
    invoiceTableData.value = T_invoice
    recoveriesTableData.value = T_recoveries
    if (!isVerify.value && T_Product) {
      tableData.value = T_Product.map((item: any) => {
        item.total = item.T_product_total * item.T_price
        return item
      })
    }
  }
}
const previewPdf = (str: string) => window.open(str)

const contractApproval = async (state: number) => {
  const res: any = await percentage_Approval({
    User_tokey: globalStore.GET_User_tokey,
    T_id: route.params.id,
    T_state: state
  })
  if (res.Code === 200) {
    ElMessage.success('审核成功！！')
    getStorehouseContractGet()
    router.back()
  }
}
const getState = (val: number, type: string) => {
  switch (val) {
    case 1:
      return type === 'T_State' ? '已通过' : '未出库'
    case 2:
      return type === 'T_State' ? '未通过' : '已部分出库'
    case 3:
      return type === 'T_State' ? '待审核' : '已全部出库'
  }
}

/**
 * 回调
 */
const callbackSnDrawer = (done: () => void) => done()


onMounted(() => {
  const { params } = route
  getStorehouseContractGet()
  params.verify && (isVerify.value = false)
  params.type === fnMd5('contract') && (isSale.value = true)

  columns = isVerify.value ? columns : VerifyColumns
})
onUnmounted(() => {
  isSale.value = false
})

const InvoiceRef = ref<InstanceType<typeof PercentageTable> | null>(null)

</script>
<template>
  <div class="contract-detail">
    <div class="info">
      <h1>
        {{ route.params.titles }}
      </h1>
      <el-divider />
      <div class="content">
        <el-row>
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>公司名称</span></el-col>
          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
            <div>{{ info?.T_verifyCompany.T_name }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>任务编号</span></el-col>
          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"><span>{{ info?.T_task_id! }}</span></el-col>
        </el-row>
        <el-row v-if="isVerify">
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>提成类型</span></el-col>
          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
            <span>{{ info?.T_type! == 1 ? '验证实施' : '报告编写' }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>设备类型</span></el-col>
          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
            <div>{{ info?.T_device_type }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>验证类型</span></el-col>
          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
            <div>{{ info?.T_verify_type }}</div>
          </el-col>
        </el-row>
        <el-row v-if="isVerify">
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>提成金额</span></el-col>
          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
            <span>{{ info?.T_money! }}</span></el-col>
        </el-row>

        <el-row>
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>提成人员</span></el-col>
          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
            <div>{{ info?.T_uuid_name! }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>审批金额</span></el-col>
          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
            <div>{{ info?.T_approval_money }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>审批意见</span></el-col>
          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
            <div>{{ info?.T_approval_opinion }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>状态</span></el-col>
          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
            <div>{{ useStapublicFun(info?.T_State) }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>打款明细</span></el-col>
          <el-col :span="21">
            <PercentageTable ref="InvoiceRef" :columns="columnsRemit" :showTable="false" title="打款明细" :labels="labelsInvoice">
              <template #add="{ AddDetail }">
                <el-button type="primary" @click="AddDetail">
                  <el-icon>
                    <Plus />
                  </el-icon><span style="margin-left: 6px">添加</span>
                </el-button>
              </template>
            </PercentageTable>
          </el-col>
        </el-row>
      </div>
      <el-divider />
      <div class="submit">
        <el-button v-if="route.params.titles=='审核'" type="danger" round @click="contractApproval(3)">审核不通过</el-button>
        <el-button v-if="route.params.titles=='审核'" type="success" round @click="contractApproval(2)">审核通过</el-button>
        <el-button type="primary" round @click="router.back()">返回</el-button>
      </div>
    </div>
    <Drawer ref="drawerSnRef" :handleClose="callbackSnDrawer" size="30%">
      <el-table :data="tableSnData" style="width: 100%; height: 99%" :header-cell-style="headerCellStyle">
        <template v-for="item in snColumns" :key="item">
          <el-table-column show-overflow-tooltip v-if="item.type === 'index'" v-bind="item" />
          <el-table-column show-overflow-tooltip v-if="item.prop" v-bind="item" />
        </template>
      </el-table>
    </Drawer>
  </div>
</template>

<style scoped lang="scss">
.contract-detail {
  height: 100%;
  font-weight: bold;
  color: var(--el-text-color-secondary);

  .info {
    height: 100%;
    padding: 20px;

    h1 {
      font-size: 24px;

      span {
        color: #f56c6c;
      }
    }

    & .content {
      height: calc(100% - 72px - 25px - 40px);
      overflow-y: auto;

      .el-row {
        margin-bottom: 16px;
      }
    }

    .submit {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
