<template>
	<sc-dialog class="aminui-main-container__dialog" v-model="visible" title="评价详情" width="80vw" top="10vh" :close-on-press-escape="false" @closed="$emit('closed')">
		<el-container class="aminui-main-container">
        	<el-header :class="['aminui-main-container__statistics-header', !isEvaluator ? 'has-bottom' : '']">
				<div v-if="!isEvaluator" class="statistics-panel">
                	<el-icon size="22" color="var(--el-color-primary)"><sc-icon-pie-monitor /></el-icon>
                	<sc-statistic title="评价得分:" :value="evaluate.score"></sc-statistic>
				</div>
			</el-header>

			<el-container class="aminui-main-container__table-main">
				<el-main class="nopadding">
                	<scTable class="scTable" ref="table" row-key="id" :apiObj="null" :data="list" :column="column" tableName="supplierEvalDetailTable" hidePagination>
						<template #supplierName>{{ evaluate.supplierName }}</template>
						<template #contractName>{{ evaluate.contractName }}</template>
						<template #status="scope">{{ formatStatus(scope.row) }}</template>
						<el-table-column label="操作" fixed="right" align="center" width="140">
							<template #default="scope">
								<template v-if="isEvaluator && scope.row.status == 'evaluate'">
									<el-button text @click="table_add(scope.row)">评价</el-button>
									<el-divider v-if="scope.row.status == 'done'" v-auth="'eval.back'" direction="vertical" />
								</template>
								<el-button v-if="scope.row.status == 'done'" v-auth="'eval.back'" text @click="table_back(scope.row)">退回</el-button>
							</template>
						</el-table-column>
					</scTable>
				</el-main>
			</el-container>
		</el-container>
	</sc-dialog>

	<eval-dialog v-if="dialog" ref="evalDialog" @success="setData" @closed="dialog = false"></eval-dialog>
</template>

<script>
	import { statusDic } from "@/views/supplier/evaluation/main";
	import evalDialog from "@/views/supplier/evaluation/components/eval";

	export default {
		emits: ["closed"],
		components: { evalDialog },

		data() {
			return {
				visible: false,
				detailList: [],
				evaluate: {
					id: null,
					score: null
				},
				column: [
					{ label: "供应商名称", prop: "supplierName", fixed: "left", width: "200", align: "center", showOverflowTooltip: true },
    				{ label: "合同名称", prop: "contractName", fixed: "left", width: "200", align: "center", showOverflowTooltip: true },
					{ label: "得分", prop: "score", width: "120", align: "center" },
					{ label: "等级", prop: "grade", width: "120", align: "center" },
					{ label: "评价人", prop: "evaluatorName", width: "140", align: "center" },
					{ label: "评价时间", prop: "evaluateTime", width: "200", align: "center" },
					{ label: "状态", prop: "status", width: "120", align: "center" }
				],

				dialog: false
			}
		},

		computed: {
			// 是否为评价人
			isEvaluator() {
				if (!this.detailList) return false;
				return this.detailList.findIndex(d => d.evaluatorId == this.$TOOL.data.get("OA_USER_INFO") && this.$TOOL.data.get("OA_USER_INFO").id || this.$TOOL.data.get("USER_INFO").id) != -1;
			},

			list() {
				if (!this.isEvaluator) return this.detailList;
				return this.detailList && this.detailList.filter(d => d.evaluatorId == this.$TOOL.data.get("OA_USER_INFO") && this.$TOOL.data.get("OA_USER_INFO").id || this.$TOOL.data.get("USER_INFO").id) || [];
			}
		},

		methods: {
			formatStatus(row) {
				if (row.status == "evaluate" && row.grade) return "已退回";
				return row.status && statusDic[row.status]["label"] || "";
			},

			// 显示
			open() {
				this.visible = true;
				return this;
			},

			// 表单注入数据
			async setData(id) {
				const { supplier, contract, evaluate, detailList } = await this.$API.supplier.evaluate.detail({ id });
				this.detailList = detailList.slice();
				this.evaluate = Object.assign({ supplierName: supplier.supplierName, contractName: contract.contractName }, evaluate);
			},

			table_add(row) {
				this.dialog = true;
            	this.$nextTick(() => this.$refs.evalDialog.open().setData(this.evaluate, row));
			},

			table_back({ id, evaluateId }) {
				this.$confirm("确认退回当前评价吗？", "提示", {
					type: "warning",
				}).then(() => {
					this.$API.supplier.evaluate.revert({ id, evaluateId }).then(() => {
						this.$message.success("操作成功");
						this.setData(evaluateId);
					}).catch(() => {});
				}).catch(() => {});
			}
		}
	}
</script>

<style lang="scss" scoped>
.aminui-main-container__dialog :deep(.el-dialog) .el-dialog__body {
  .aminui-main-container__statistics-header {
    padding: 0 15px;

    .statistics-panel {
      flex-basis: unset;
      padding: 5px 10px;
      background: rgba(202, 249, 130, 0.25);

      .el-icon {
        margin-right: 8px;
      }

      .sc-statistic {
        display: flex;
        align-content: center;

        .sc-statistic-content {
          margin-left: 5px;
          font-size: inherit;

          .sc-statistic-content-value {
            font-weight: 500;
          }
        }
      }
    }
  }

  .has-bottom {
    margin-bottom: 15px;
  }
}
</style>