<template>
    <el-container class="aminui-main-container">
        <el-header class="aminui-main-container__statistics-header">
            <div class="statistics-panel">
                <div class="top-panel">
                    <el-icon size="22" color="var(--el-color-blue)"><sc-icon-bar /></el-icon>
                    <sc-statistic title="服务类别"></sc-statistic>
                </div>
                <div class="bottom-panel">
                    <scEcharts ref="supplierType" :option="option1" @chartClick="chartClick"></scEcharts>
                </div>
            </div>

            <div class="statistics-panel">
                <div style="--panel-background: rgba(245,154,35,0.25);" class="top-panel">
                    <el-icon size="22" color="#594d9c"><sc-icon-pie-list /></el-icon>
                    <sc-statistic title="评价完成进度"></sc-statistic>
                </div>
                <div class="bottom-panel">
                    <scEcharts ref="evalStatus" :option="option2" @chartClick="chartClick"></scEcharts>
                </div>
            </div>
            <div class="statistics-panel">
                <div style="--panel-background: rgba(149,242,4,0.25);" class="top-panel">
                    <el-icon size="22" color="var(--el-color-blue)"><sc-icon-bar-square /></el-icon>
                    <sc-statistic title="供方评价等级"></sc-statistic>
                </div>
                <div class="bottom-panel">
                    <scEcharts ref="evalGrade" :option="option3" @chartClick="chartClick"></scEcharts>
                </div>
            </div>
        </el-header>

		<el-header class="aminui-main-container__query-header">
            <el-form :model="params">
                <el-row :gutter="15">
					<el-col :lg="8" :md="12" :xs="24">
						<el-form-item label="供应商名称:">
                            <el-select v-model="params.supplierId" clearable placeholder="请选择供应商">
                                <el-option v-for="item in suppliers" :key="item.id" :label="item.supplierName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
					</el-col>
                    <el-col :lg="8" :md="12" :xs="24">
						<el-form-item label="服务类别:">
                            <tree-select ref="typeTreeSelect" v-model="params.supplierTypeId" :apiObj="$API.supplier.type" check-strictly clearable placeholder="请选择服务类别" @finished="getCensus"></tree-select>
                        </el-form-item>
					</el-col>
                    <el-col :lg="8" :md="12" :xs="24">
                        <el-form-item label="评价等级:">
                            <el-select v-model="params.grade" clearable placeholder="请选择评价等级">
					            <el-option label="A" value="A"></el-option>
					            <el-option label="B" value="B"></el-option>
					            <el-option label="C" value="C"></el-option>
                            </el-select>
                        </el-form-item>
					</el-col>
                    <template v-if="paramsIsCollapse">
                        <el-col :lg="8" :md="12" :xs="24">
                            <el-form-item label="评价状态:">
                                <el-select v-model="params.status" clearable placeholder="请选择评价状态">
                                    <el-option v-for="(item, key) in statusDic" :key="key" :label="item.label" :value="key"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :lg="8" :md="12" :xs="24">
                            <el-form-item label="类型:">
                                <el-select v-model="params.evaluateType" clearable placeholder="请选择考核评价类型">
                                    <el-option v-for="(label, key) in evaluateTypeDic" :key="key" :label="`${label}考核评价`" :value="key"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :lg="12" :md="14" :xs="24">
                            <el-form-item label="评价完成时间:">
                                <el-date-picker type="daterange" v-model="finishDate" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </template>
                </el-row>
            </el-form>

            <el-button-group>
                <el-button type="primary" icon="el-icon-search" @click="reloadTable('add')">查询</el-button>
                <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
                <el-button text @click="paramsIsCollapse = !paramsIsCollapse">
                    <template v-if="paramsIsCollapse">收起<el-icon><el-icon-arrow-up-bold /></el-icon></template>
                    <template v-else>更多<el-icon><el-icon-arrow-down-bold /></el-icon></template>
                </el-button>
            </el-button-group>
        </el-header>

        <el-container class="aminui-main-container__table-main">
            <el-header>
                <div class="left-panel">
                    <el-button type="primary" @click="table_add">新增</el-button>
                </div>
            </el-header>

            <el-main class="nopadding">
                <scTable class="scTable" ref="table" row-key="id" :apiObj="api" :params="params" :column="column" tableName="supplierEvalTable" pageParams="current">
                    <template #supplierNo="scope">{{ scope.row.supplier.supplierNo }}</template>
                    <template #supplierName="scope">{{ scope.row.supplier.supplierName }}</template>
                    <template #supplierType="scope">{{ formatSupplierType(scope.row.supplier.supplierTypeId) }}</template>
                    <template #evaluateType="scope">{{ formatEvalType(scope.row.evaluateType) }}</template>
                    <template #contractName="scope">{{ scope.row.contract.contractName }}</template>
                    <template #status="scope">
                        {{ formatStatus(scope.row.status, "label") }}<sc-status-indicator :type="formatStatus(scope.row.status, 'type')"></sc-status-indicator>
                    </template>
                    <template #finishTime="scope">
                        <template v-if="scope.row.status == 'done'">{{ scope.row.evaluateFinishTime }}
                        </template>
                    </template>
                    <el-table-column label="操作" fixed="right" align="center" width="240">
                        <template #default="scope">
                            <template v-if="scope.row.status == 'active'">
                                <el-button text @click="table_active(scope.row)">发起评价</el-button><el-divider direction="vertical" />
                                <el-button text @click="table_edit(scope.row)">编辑</el-button><el-divider direction="vertical" />
                                <el-button text @click="table_del(scope.row)">删除</el-button><el-divider direction="vertical" />
                            </template>
                            <!-- 强制撤回 -->
                            <el-button text @click="table_detail(scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                </scTable>
            </el-main>
        </el-container>
    </el-container>

    <list-dialog v-if="dialog.list" ref="listDialog" @success="reloadTable" @closed="dialog.list = false"></list-dialog>
    <detail-dialog v-if="dialog.detail" ref="detailDialog" @closed="reloadTable(), getCensus(), dialog.detail = false"></detail-dialog>
</template>

<script>
import { column, evaluateTypeDic, statusDic } from "./main";
import listDialog from "./components/add";
import detailDialog from "./components/detail";

export default {
    components: {
        listDialog,
        detailDialog
    },

    data() {
        return {
            column, evaluateTypeDic, statusDic,
            option1: {
                tooltip: { confine: true, formatter: "{b}: {c}" },
                series: [{
                    name: "supplierTypeId",
                    type: "pie",
                    data: [],
                    label: false,
                    labelLine: false,
                    animationDuration: 2500,
                    animationDurationUpdate: 2500
                }]
            },

            option2: {
                color: ["#e6a23c", "#67c23a"],
                tooltip: { confine: true, formatter: "{b}: {c}" },
                legend: { orient: "vertical", left: "57%", top: "center" },
                series: [{
                    name: "status",
                    type: "pie",
                    center: ["35%", "50%"] ,
                    data: [
                        { value: 0, name: "待评价", status: "evaluate" },
                        { value: 0, name: "已完成评价", status: "done" }
                    ],
                    label: false,
                    labelLine: false,
                    animationDuration: 2500,
                    animationDurationUpdate: 2500
                }]
            },

            option3: {
                tooltip: { confine: true, formatter: "{b}评级: {d}%" },
                legend: { orient: "vertical", left: "57%", top: "center", formatter: "{name}评级" },
                series: [{
                    name: "grade",
                    type: "pie",
                    center: ["35%", "50%"] ,
                    data: [
                        { value: 0, name: "A", grade: "A" },
                        { value: 0, name: "B", grade: "B" },
                        { value: 0, name: "C", grade: "C" }
                    ],
                    label: false,
                    labelLine: false,
                    animationDuration: 2500,
                    animationDurationUpdate: 2500
                }]
            },

            suppliers: [],
            api: this.$API.supplier.evaluate,
            params: {
                orderBy: "createTime_desc",
                supplierId: null,
                supplierTypeId: null,
                grade: null,
                status: null,
                evaluateType: null
            },
            finishDate: [],

            paramsIsCollapse: false,
            dialog: {
                detail: false,
                list: false
            }
        }
    },

    computed: {
        supplierTypes() {
            return this.$refs.typeTreeSelect && this.$refs.typeTreeSelect.treeList || [];
        }
    },

    mounted() {
        this.getSupplier();
    },

    methods: {
        formatSupplierType(value) {
            return this.supplierTypes.find(l => l.id == value) && this.supplierTypes.find(l => l.id == value).name || "";
        },

        formatEvalType(value) {
            return evaluateTypeDic[value] || "";
        },

        formatStatus(value, key) {
            return statusDic[value][key] || "";
        },

        async getCensus() {
            this.option1.series[0].data = this.supplierTypes.map(item => ({ name: item.name, value: 0, supplierTypeId: item.id }));
            const { supplierTypeCountList, supplierStatusCountList, supplierGradeCountList } = await this.$API.supplier.evaluate.getTongJi();
            if (supplierTypeCountList) this.option1.series[0].data.forEach(item => item.value = supplierTypeCountList.find(r => r.supplierTypeId == item.supplierTypeId) && supplierTypeCountList.find(r => r.supplierTypeId == item.supplierTypeId).commonCount || 0);
            if (supplierStatusCountList) this.option2.series[0].data.forEach(item => item.value = supplierStatusCountList.find(s => s.status == item.status) && supplierStatusCountList.find(s => s.status == item.status).commonCount || 0);
            if (supplierGradeCountList) this.option3.series[0].data.forEach(item => item.value = supplierGradeCountList.find(g => g.grade == item.name) && supplierGradeCountList.find(g => g.grade == item.name).commonCount || 0);
        },

        async getSupplier() {
            this.suppliers = await this.$API.supplier.list.all();
        },

        reloadTable(mode = "add") {
            this.params["evaluateFinishTimeBegin"] = this.finishDate && this.finishDate[0] && (this.finishDate[0] + " 00:00:00") || null;
            this.params["evaluateFinishTimeEnd"] = this.finishDate && this.finishDate[1] && (this.finishDate[1] + " 23:59:59") || null;
            const page = mode == "add" && 1 || this.$refs.table.currentPage;
            this.$refs.table.reload(this.params, page);
        },

        reset() {
            this.params.orderBy = "createTime_desc";
            this.params.supplierId = null;
            this.params.supplierTypeId = null;
            this.params.grade = null;
            this.params.status = null;
            this.params.evaluateType = null;
            this.finishDate = [];
            this.reloadTable();
        },
        
        // 添加明细
        table_add() {
            this.dialog.list = true;
            this.$nextTick(() => this.$refs.listDialog.open());
        },

        // 编辑明细
        table_edit(row) {
            this.dialog.list = true;
            this.$nextTick(() => this.$refs.listDialog.open("edit").setData(row.id));
        },

        // 发起评价
        table_active({ id }) {
            this.$API.supplier.evaluate.active({ id }).then(() => {
                this.$message.success("操作成功");
                this.getCensus();
                this.reloadTable();
            }).catch(() => {});
        },

        // 删除明细
        table_del({ id }) {
            this.$confirm("确认删除当前考核评价吗？", "提示", {
                type: "warning",
                confirmButtonText: "删除"
            }).then(() => {
                this.$API.supplier.evaluate.del({ id }).then(() => {
                	this.$message.success("操作成功");
                	this.reloadTable();
                }).catch(() => {});
            }).catch(() => {});
        },

        table_detail(row) {
            this.dialog.detail = true;
            this.$nextTick(() => this.$refs.detailDialog.open().setData(row.id));
        },

        chartClick({ seriesName, data }) {
            this.params[seriesName] = data[seriesName];
            this.params.orderBy = "score_desc";
            this.reloadTable();
        }
    }
}
</script>

<style lang="scss" scoped>
.aminui-main-container {
  .aminui-main-container__query-header {
    margin-bottom: 15px;
  }

  .aminui-main-container__statistics-header {
    margin-bottom: 0;

    .statistics-panel {
      flex-direction: column;

      &::before {
        display: none;
      }

      .top-panel {
        --panel-background: rgba(0, 0, 255, 0.06);
        display: flex;
        align-items: center;
        padding: 5px;
        background: var(--panel-background);

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

        .sc-statistic :deep(.sc-statistic-title) {
          line-height: 22px;
          font-weight: normal;
          color: #000;
        }
      }

      .bottom-panel {
        width: 100%;
        height: 160px;
      }
    }
  }
}

@media (max-width: 992px) {
  .aminui-main-container {
    .aminui-main-container__statistics-header {
      margin-bottom: 15px;
      padding-bottom: 8px;
    }

    .aminui-main-container__query-header {
      padding-bottom: 18px;
    }
  }
}
</style>