<template>
  <div>
    <el-table border :data="tableList">
      <el-table-column align="center" prop="ContractCode" label="合同编号" width="160">
        <template slot-scope="{ 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 slot-scope="{ 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="260">
        <template slot-scope="{ row }">
          <span> {{row.Quarter ? `${row.Quarter}(${row.StartDate} - ${row.EndDate})`:`${row.StartDate} - ${row.EndDate}` }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="PermissionName" label="签约套餐" width="200">
        <template slot-scope="{ row }">
          <el-tag style="margin: 0 10px 5px 0" v-for="item in row.PermissionName.split(',')" :key="item" size="mini">{{ item }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="IsAllocation" label="状态" width="90" v-if="!typeLable">
        <template slot-scope="{ 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="typeLable"> </el-table-column>
      <el-table-column align="center" prop="ContractCode" label="操作" v-if="!typeLable">
        <template slot-scope="{ row }">
          <span v-if="row.IsAllocation == 0 && row.ContractType !=  '打分派点'" :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="typeLable">
        <template slot-scope="{ row }">
          <span class="editsty" @click="detailsHandler(row)">查看</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { dataMainInterface, customInterence, contractInterface } from "@/api/api.js";
export default {
  name: "",
  components: {},
  props: {
    tableList: {
      type: Array,
      default: [],
    },
    typeLable: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 查看合同
    async lookContractHandler(item) {
      if (item.FormalType == "非标") {
        const loading = this.$loading({
          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) {
          this.$emit("isPreviewHistoryDetail", res);
          loading.close();
        }
      } else {
        let { href } = this.$router.resolve({
          path: "/contractdtl",
          query: { contractid: item.ContractId },
        });
        window.open(href, "_blank");
      }
    },

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