<script setup>
import { contractInterface } from "@/api/api.js";
import { useRouter} from 'vue-router';
import { ElLoading } from 'element-plus'

const $router = useRouter()

const props = defineProps({
  tableList: {
    type: Array,
    default: [],
  },
  typeLable: {
    type: String,
    default: "",
  },
})
const emits=defineEmits(['isPreviewHistoryDetail','allocationDetail','allocationDetailList'])

// 查看合同
const lookContractHandler=async(item)=>{
  if (item.FormalType == "非标") {
    const loading = ElLoading.service({
      lock: true,
      text: "Loading",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)",
    });
    const res = await contractInterface.getHistoryDetail({
      ContractCode: item.ContractCode,
    });
    if (res.Ret === 200) {
      emits("isPreviewHistoryDetail", res);
      loading.close();
    }
  } else {
    let { href } = $router.resolve({
      path: "/contractdtl",
      query: { contractid: item.ContractId },
    });
    window.open(href, "_blank");
  }
}

// 查看公司详情
const lookCompanyNameHandler=(item)=>{
  const { href } = $router.resolve({
    path: "/customDetail",
    query: {
      id: item.CompanyId,
    },
  });
  window.open(href, "_blank");
}
// 派点详情
const detailsHandler=(item)=>{
  emits("allocationDetail", item);
}
// 派点
const allocationDetail=(item)=>{
  if (item.IsGray) return;
  emits("allocationDetailList", item);
}

</script>

<template>
  <div>
    <el-table border :data="props.tableList" size="large">
      <el-table-column align="center" prop="ContractCode" label="合同编号" width="160">
        <template #default="{ row }">
          <span class="editsty" @click="lookContractHandler(row)">{{ row.ContractCode }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="FormalType" label="转正类型" width="90"> </el-table-column>
      <el-table-column align="center" prop="ContractType" label="合同类型" width="100"></el-table-column>
      <el-table-column align="center" prop="CompanyName" label="公司名称">
        <template #default="{ row }">
          <span class="editsty" @click="lookCompanyNameHandler(row)">{{ row.CompanyName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="SellerName" label="所属销售" width="90"> </el-table-column>
      <el-table-column align="center" prop="Money" label="合同金额" width="130"> </el-table-column>
      <el-table-column align="center" prop="StartDate" label="合同期限" width="200">
        <template #default="{ row }">
          <span>{{ `${row.StartDate} - ${row.EndDate}` }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="PermissionName" label="签约套餐" width="200">
        <template #default="{ row }">
          <el-tag style="margin: 0 10px 5px 0" v-for="item in row.PermissionName.split(',')" :key="item" size="small">{{ item }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="IsAllocation" label="状态" width="90" v-if="!props.typeLable">
        <template #default="{ row }">
          <span :style="{ color: row.IsAllocation == 0 ? '#FF8A00' : row.IsAllocation == 1 ? '#67C23A' : '' }">{{ row.IsAllocation == 0 ? "未派点" : row.IsAllocation == 1 ? "已派点" : "" }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="MoneyPoint" label="获得派点" width="90" v-if="props.typeLable"> </el-table-column>
      <el-table-column align="center" prop="ContractCode" label="操作" v-if="!props.typeLable">
        <template #default="{ row }">
          <span v-if="row.IsAllocation == 0" :class="row.IsGray ? '' : 'editsty'" @click="allocationDetail(row)">派点</span>
          <span v-if="row.IsAllocation == 1" class="editsty" @click="detailsHandler(row)">派点详情</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="ContractCode" width="110" label="派点详情" v-if="props.typeLable">
        <template #default="{ row }">
          <span class="editsty" @click="detailsHandler(row)">查看</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style scoped lang=""></style>
