<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 { Storehouse_Contract_Get, Storehouse_Contract_Approval } from '@/api/storehouse/index'

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_out: number
  T_pdf: string
  T_remark: string
  T_submit: string
  T_type: number
  T_discount: number
  T_start_date: string
  T_end_date: string
  T_stamping_date: string
  T_submit_name: string
  T_project: string
  T_no_recoveries_money: number
  T_no_invoice_money: number
}

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 getStorehouseContractGet = async () => {
  const res: any = await Storehouse_Contract_Get({ User_tokey: globalStore.GET_User_tokey, T_number: route.params.id })
  if (res.Code === 200) {
    info.value = res.Data
    const { T_Product, T_invoice, T_recoveries } = res.Data
    tableData.value = T_Product
    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 Storehouse_Contract_Approval({
    User_tokey: globalStore.GET_User_tokey,
    T_number: route.params.id,
    T_state: state
  })
  if (res.Code === 200) {
    ElMessage.success('审核成功！！')
    getStorehouseContractGet()
  }
}
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()

const previewSn = (devicelist: string[]) => {
  drawerSnRef.value?.openDrawer()
  if (!devicelist) return
  tableSnData.value = devicelist.map((item: string) => {
    return {
      sn: item
    }
  })
}

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
})
</script>
<template>
  <div class="contract-detail">
    <div class="info">
      <h1>
        详情<span v-if="isVerify"> - {{ getState(info?.T_State!, 'T_State') }}</span>
      </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"
            ><span>{{ info?.T_number! }}</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_customer! }}</span></el-col
          >
        </el-row>
        <el-row>
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"
            ><span>{{ isVerify ? '产品' : '验证' }}明细</span></el-col
          >
          <el-col :span="21">
            <el-table border stripe :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle">
              <template v-for="item in columns" :key="item.prop">
                <el-table-column show-overflow-tooltip v-bind="item" v-if="item.fixed !== 'right'">
                  <template #default="{ row }" v-if="item.prop === item.name">
                    <span v-if="item.prop === 'T_product_relation_sn'">
                      <el-tag v-if="row.T_product_relation_sn === 1" effect="dark">是</el-tag>
                      <el-tag v-else type="success" effect="dark">否</el-tag>
                    </span>
                            <ImageCom v-if="item.prop === 'T_product_img'" :src="row.T_product_img" :key="row.Id"/>
                    <el-tooltip
                      v-if="item.prop === 'T_product_model'"
                      effect="dark"
                      :content="row.T_product_model"
                      placement="bottom"
                    >
                      {{ row.T_product_model }}
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column v-bind="item" v-if="item.fixed === 'right'">
                  <template #default="{ row }">
                    <el-button
                      type="primary"
                      :disabled="!row.T_product_relation_sn"
                      @click="previewSn(row.T_device_list)"
                      >查看</el-button
                    >
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </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_date! }}</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">
            <el-text type="danger">{{ info?.T_money! }}￥</el-text>
          </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">
            <el-text type="danger">{{ info?.T_discount! }}￥</el-text>
          </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_date! }}</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_start_date! }}</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_end_date! }}</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_stamping_date! }}</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">
            <span>{{ info?.T_project }}</span>
          </el-col>
        </el-row>

        <el-row v-if="isVerify">
          <!-- 1-未出库 2-已部分出库 3-已全部出库 -->
          <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>{{ getState(info?.T_out!, 'T_out') }}</span></el-col
          >
        </el-row>

        <el-row v-if="isVerify">
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"
            ><span v-if="isVerify">经办人</span><span v-else>合同负责人</span></el-col
          >
          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
            ><span>{{ info?.T_submit_name! }}</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"
            ><span>{{ info?.T_remark! }}</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"
            ><span v-if="!info?.T_pdf!">无</span>
            <el-button v-else type="primary" @click="previewPdf(info?.T_pdf!)">查看附件</el-button></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">
            <el-table
              border
              stripe
              :data="recoveriesTableData"
              style="width: 100%"
              :header-cell-style="headerCellStyle"
            >
              <el-table-column v-bind="item" v-for="item in columnsRecoveries" :key="item.prop"></el-table-column>
            </el-table>
          </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">
            <el-text type="danger">{{ info?.T_no_recoveries_money! }}￥</el-text>
          </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">
            <el-table border stripe :data="invoiceTableData" style="width: 100%" :header-cell-style="headerCellStyle">
              <el-table-column show-overflow-tooltip v-bind="item" v-for="item in columnsInvoice" :key="item.prop"></el-table-column>
            </el-table>
          </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"
            ><el-text type="danger">{{ info?.T_no_invoice_money! }}￥</el-text></el-col
          >
        </el-row>
      </div>

      <el-divider />
      <div class="submit">
        <el-button v-if="info?.T_State === 3 && isSale" type="danger" round @click="contractApproval(2)"
          >审核不通过</el-button
        >
        <el-button v-if="info?.T_State === 3 && isSale" type="success" round @click="contractApproval(1)"
          >审核通过</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>
