<template>
  <div class="contract-tabs">
    <div v-if="contractId" class="tabs-content">
      <el-tabs v-model="activeTab" type="card" tab-position="top" v-loading="tabLoading">
        <el-tab-pane label="下发订单" name="second">
          <OrderPage v-if="activeTab === 'second'" :contractId="contractId" />
        </el-tab-pane>
        <el-tab-pane label="财务状态" name="third">
          <KLPTable v-loading="loading" :data="financeList">
            <el-table-column label="收款日期" align="center" prop="dueDate" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="收款金额" align="center" prop="amount" />
            <el-table-column label="备注" align="center" prop="remark" />
          </KLPTable>
        </el-tab-pane>
        <el-tab-pane label="订单异议" name="fourth">
          <el-table v-loading="loading" :data="objectionList">
            <el-table-column label="编号" align="center" prop="objectionCode" />
            <el-table-column label="状态" align="center" prop="objectionStatus">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.objectionStatus === 0" type="danger">待处理</el-tag>
                <el-tag v-else-if="scope.row.objectionStatus === 1" type="success">已处理</el-tag>
                <el-tag v-else-if="scope.row.objectionStatus === 2" type="info">已关闭</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="处理人" align="center" prop="handleUser" />
            <el-table-column label="处理时间" align="center" prop="handleTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.handleTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remark" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="发货配卷" name="fifth">
          <CoilTable :data="coilList" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div v-else class="no-selection" style="display: flex; align-items: center; justify-content: center; height: 100%;">
      <el-empty description="请先选择合同" />
    </div>
  </div>
</template>

<script>
import OrderPage from "@/views/crm/order/index.vue";
import CoilTable from "../../components/CoilTable.vue";

export default {
  name: "ContractTabs",
  components: {
    OrderPage,
    CoilTable
  },
  props: {
    contractId: {
      type: [Number, String],
      default: null
    },
    financeList: {
      type: Array,
      default: () => []
    },
    objectionList: {
      type: Array,
      default: () => []
    },
    coilList: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    tabLoading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 活动tab
      activeTab: "second"
    };
  },
  methods: {
    // 解析时间
    parseTime(time, pattern) {
      if (!time) return '';
      const d = new Date(time);
      const year = d.getFullYear();
      const month = (d.getMonth() + 1).toString().padStart(2, '0');
      const day = d.getDate().toString().padStart(2, '0');
      const hours = d.getHours().toString().padStart(2, '0');
      const minutes = d.getMinutes().toString().padStart(2, '0');
      const seconds = d.getSeconds().toString().padStart(2, '0');
      return pattern
        .replace('{y}', year)
        .replace('{m}', month)
        .replace('{d}', day)
        .replace('{h}', hours)
        .replace('{i}', minutes)
        .replace('{s}', seconds);
    }
  }
};
</script>

<style scoped>
.contract-tabs {
  height: 100%;
  overflow-y: auto;
}
</style>