<script setup lang="ts">
import { 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 { 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_submit_name: string
  T_type: number
}

const route = useRoute()
const router = useRouter()
const isSale = ref(false)
const tableSnData = ref<any[]>([])
const info = ref<InfoType | undefined>()
const globalStore = GlobalStore()
const drawerSnRef = ref<InstanceType<typeof Drawer> | null>(null)

const columns = [
  { 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 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
    tableData.value = res.Data.T_Product
  }
}
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 tableData = ref<any[]>([])

/**
 * 回调
 */
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
  if (params.type === fnMd5('contract')) {
    isSale.value = true
  }
  getStorehouseContractGet()
})
onUnmounted(() => {
  isSale.value = false
})
</script>
<template>
  <div class="contract-detail">
    <div class="info">
      <h1>
        详情 - <span>{{ 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>
          <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>合同类型</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 :span="21">
            <el-table
              :data="tableData"
              style="width: 100%"
              border
              stripe
              :header-cell-style="{
                background: '#909399',
                height: '50px',
                color: '#fff'
              }"
            >
              <template v-for="item in columns" :key="item.prop">
                <el-table-column 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>
                    <el-image
                      v-if="item.prop === 'T_product_img'"
                      style="height: 50px"
                      :src="row.T_product_img"
                      :preview-src-list="[row.T_product_img]"
                      :preview-teleported="true"
                      fit="cover"
                    />
                    <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>
          <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">
            <!-- <span>{{ info.T_money }}</span> -->
            <el-text type="danger">{{ info?.T_money! }}￥</el-text>
          </el-col>
        </el-row>

        <el-row>
          <!-- 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>
          <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_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>
      </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="{
          background: '#dedfe0',
          height: '50px'
        }"
      >
        <template v-for="item in snColumns" :key="item">
          <el-table-column v-if="item.type === 'index'" v-bind="item" />
          <el-table-column 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: scroll;
      .el-row {
        margin-bottom: 16px;
      }
    }
    .submit {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
