<template>
    <div class="app-container">
        <el-card>
            <div class="chartsbox" ref="charts"></div>
        </el-card>
        <el-card class="spacing-top-10">
            <el-row>
                <el-col :span="6">
                    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="50px"
                        style="margin-top: 8px;height: 40px">
                        <el-form-item label="单位" prop="companyId">
                            <el-select v-model="queryParams.companyId" filterable placeholder="请选择"
                                style="width: 360px;margin-right: 10px;" @change="handleQuery">
                                <el-option v-for="item in companyList" :key="item.id" :label="item.companyName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                            <!-- <el-button type="primary" icon="el-icon-search" size="mini"
                                @click="handleQuery">搜索</el-button>
                            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="18" v-if="isCheck">
                    <div class="flex">
                        <el-descriptions :column="6" border style="width: 100%;">
                            <el-descriptions-item label="夜班出勤数" label-class-name="my-checkname"
                                content-class-name="my-checkvalue">{{ checkData[0].nm_score }}</el-descriptions-item>
                            <el-descriptions-item label="上午班出勤数" label-class-name="my-checkname"
                                content-class-name="my-checkvalue">{{ checkData[0].am_score }}</el-descriptions-item>
                            <el-descriptions-item label="下午班出勤数" label-class-name="my-checkname"
                                content-class-name="my-checkvalue">{{ checkData[0].pm_score }}</el-descriptions-item>
                            <el-descriptions-item label="应出勤数" label-class-name="my-checkname"
                                content-class-name="my-checkvalue">{{ checkData[0].shoud_score }}</el-descriptions-item>
                            <el-descriptions-item label="实际出勤数" label-class-name="my-checkname"
                                content-class-name="my-checkvalue">{{ checkData[0].sum_score }}</el-descriptions-item>
                            <el-descriptions-item label="出勤率" label-class-name="my-checkname"
                                content-class-name="my-checkvalue">{{ checkData[0].percent }}%</el-descriptions-item>
                        </el-descriptions>
                        <div class="el-icon-question cus" style="color: #1890ff; font-size: 22px;" v-if="$store.state.user.showRules"
                            @click="rulsDetail = true"></div>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="spacing-top-10">
            <div>
                <div class="part-title"><span class="el-icon-caret-right"></span>单位信息</div>
                <el-descriptions :column="2" border class="spacing-top-10">
                    <el-descriptions-item label="单位简称" label-class-name="com-label" content-class-name="com-content">
                        <el-button type="text" @click="detailsShow = true;">{{ companyItem.shortName }}</el-button>
                    </el-descriptions-item>
                    <el-descriptions-item label="单位名称" label-class-name="com-label" content-class-name="com-content">
                        {{ companyItem.companyName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="单位负责人" label-class-name="com-label" content-class-name="com-content">
                        {{ companyItem.leader }}
                    </el-descriptions-item>
                    <el-descriptions-item label="联系方式" label-class-name="com-label" content-class-name="com-content">
                        {{ companyItem.leaderTel }}
                    </el-descriptions-item>
                </el-descriptions>
            </div>
            <!-- <div style="margin-top: 20px;">
                <el-row :gutter="20">
                    <el-col :span="16">
                        <el-table :data="contractPerson" style="width: 100%">
                            <el-table-column prop="userName" label="用户名" min-width="40"> </el-table-column>
                            <el-table-column prop="nickName" label="姓名" min-width="70"> </el-table-column>
                            <el-table-column prop="sex" label="性别" width="55" align="center">
                                <template slot-scope="scope"
                                    v-if="scope.row.sex !== null && scope.row.sex !== '' && scope.row.sex !== undefined">
                                    <el-tag :type="scope.row.sex === '0' ? '' : 'danger'" effect="dark">{{
                                        scope.row.sex === '0' ? '男' : '女' }}</el-tag>
                                </template>
</el-table-column>
<el-table-column prop="phonenumber" label="手机号" width="110" align="center"></el-table-column>
<el-table-column prop="cardId" label="身份证号" width="140" align="center">
    <template slot-scope="scope">
                                    {{ scope.row.cardId.replace(/^(.{6})(?:\d+)(.{2})$/, "$1**********$2") || '--' }}
                                </template>
</el-table-column>
<el-table-column prop="contractNameShort" label="所属合同"> </el-table-column>
</el-table>
</el-col>
<el-col :span="8">
    <el-table :data="contractList" style="width: 100%">
        <el-table-column prop="shortName" label="合同"> </el-table-column>
        <el-table-column prop="peopleNum" label="合同人数" width="75" align="center"> </el-table-column>
        <el-table-column prop="personCnt" label="已绑定人数" width="90" align="center">
        </el-table-column>
    </el-table>
</el-col>
</el-row>
</div> -->
        </el-card>
        <el-card class="spacing-top-10">
            <div class="part-title"><span class="el-icon-caret-right"></span>合同信息</div>
            <el-table :data="contractList" class="spacing-top-10" style="width: 100%">
                <el-table-column label="合同简称" align="center" prop="shortName" min-width="100" fixed>
                    <template slot-scope="scope">
                        <el-button type="text" @click="openDetail(scope.row)">{{ scope.row.shortName }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="合同名称" align="left" prop="contractName" min-width="120">
                    <template slot-scope="scope">
                        <template>
                            <el-button type="text" @click="jumpTo(scope.row)">{{ scope.row.contractName }}</el-button>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="合同人数" align="center" prop="peopleNum" width="80" />
                <el-table-column label="运维人数" align="center" prop="personCnt" width="80" />
                <el-table-column label="运维人员" prop="" min-width="120">
                    <template slot-scope="scope">
                        <el-tag slot="reference" class="cus"
                            v-show="scope.row.personCnt !== undefined && scope.row.personList !== null"
                            style="margin-right: 3px;margin-bottom: 3px;" v-for="item in scope.row.personList"
                            @click="checkPeopleItem(item.id)">
                            {{ item.nickName }}
                        </el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog title="统计规则" :visible.sync="rulsDetail" width="1000px">
            <div v-html="checkRule"></div>
        </el-dialog>
        <!-- 单位详情 -->
        <detailItem :detailsShow="detailsShow" :detailsItem="companyItem" @isOpen='isOpen'></detailItem>
        <!-- 合同详情 -->
        <detailContractItem :detailsShow="contractShow" :detailsItem="contractItem"
            :contractQualificationList="contractQualificationList" :filebox="filebox" :attachmentData="attachmentData"
            @isOpen='isContractShow' @isfileboxShow="isfileboxShow"></detailContractItem>
        <!-- 人员详情 -->
        <detailPersonItem :open="personOpen" :activeTab="activeTab" :form="personForm" @isOpen='isPersonOpen'>
        </detailPersonItem>
    </div>
</template>
<script>
import detailItem from '@/views/resource/company/detailItem.vue';
import detailContractItem from '@/views/resource/contract/detailItem.vue';
import detailPersonItem from '@/views/resource/person/detailItem.vue';
import store from "@/store";
import * as echarts from "echarts";
import { getcChartData, companyCheck, checkCount } from "@/api/view/vcompany";
import { listCompany, getCompany } from "@/api/resource/company";
import { getContractPerson, listContract, getFileItems, getContractQualif, getFileType } from "@/api/resource/contract";

export default {
    name :"Vcompany",
    dicts: ['sys_user_sex', 'per_qualification', 'per_degree'],
    components: { detailItem, detailContractItem, detailPersonItem },
    data() {
        return {

            detailsShow: false,//单位弹窗
            contractItem: {},
            contractShow: false,//合同弹窗
            contractQualificationList: [],
            filebox: false,
            attachmentData: {},
            personForm: {},
            // 当前激活的标签页
            activeTab: 'basic',
            personOpen: false,

            charts: null,
            bar: {
                contractCnt: [],
                personCnt: [],
                xname: [],
            },
            companyList: [],
            queryParams: {
                companyId: '',
            },
            companyItem: {},//单位信息
            contractPerson: [], // 人员列表
            contractList: [],//合同列表
            checkData: [],//考勤信息
            isCheck: false,
            rulsDetail: false,
            checkRule: '',
        }
    },
    created() {
        // 附件类型
        this.getfileTypes();
        this.getCompanyList();
        this.getBarData();
        this.getCheckCount();
    },
    methods: {
        getCheckCount() {
            checkCount().then((res) => {
                this.checkRule = res.data.remark;
            })
        },
        // 附件类型
        getfileTypes() {
            getFileType({}).then((res) => {
                this.attachmentData.fileType = res.rows;
            })
        },
        // 单位列表
        getCompanyList() {
            listCompany({ pageSize: 999 }).then(response => {
                this.companyList = response.rows;
                this.queryParams.companyId = response.rows[0].id;
                this.getComDetail();
                this.getContractList();
                // 考勤
                this.getCompanyCheck();
            });
        },
        getCompanyCheck() {
            this.isCheck = false;
            companyCheck(({ companyId: this.queryParams.companyId })).then((res) => {
                this.checkData = res.data;
                if (res.data.length !== 0) {
                    this.isCheck = true;
                }
            })
        },
        getComDetail() {
            getCompany(this.queryParams.companyId).then((res) => {
                this.companyItem = res.data;
            })
        },
        getBarData() {
            getcChartData({}).then((res) => {
                this.bar.contractCnt = res.data.contractCnt;
                this.bar.personCnt = res.data.personCnt;
                this.bar.xname = res.data.xname;
                this.drawBarChart();
            })
        },
        drawBarChart() {
            const contractAmountCompanyChart = echarts.init(this.$refs.charts);
            let option = {
                grid: {
                    left: 30,
                    right: 50,
                    top: 30,
                    bottom: 50
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        color: 'red',
                        crossStyle: {
                            color: '#666',
                        },
                    },
                    formatter: function (params) {
                        var res;
                        res = '<div>' + params[0].name + '</div>' +
                            '<div>' + params[0].marker + '<span>合同数：</span>' + params[0].data + '个</div>' +
                            '<div>' + params[1].marker + '<span>人数：</span>' + params[1].data + '个</div>'
                        return res
                    }
                },
                legend: {
                    data: ['合同数量', '人员数量'],
                    x: 'center',
                    icon: 'rect',
                    itemWidth: 12, // 设置宽度
                    itemHeight: 12, // 设置高度
                    textStyle: {//图例文字的样式
                        color: '#666',
                        fontSize: 14
                    }
                },
                xAxis: [{
                    type: 'category',
                    data: this.bar.xname,
                    axisLabel: {
                        interval: 0,
                        rotate: 45,
                        formatter: function (value) {
                            if (value.length > 5) {
                                return value.slice(0, 5) + '...'
                            } else {
                                return value
                            }
                        },
                    },
                    axisPointer: {
                        type: 'shadow'
                    }
                }],
                yAxis: [{
                    type: 'value',
                    name: '合同数(个)',
                    min: 0,
                    axisLabel: {
                        formatter: '{value} ',
                        textStyle: {
                            color: 'rgb(82,172,232)',
                            fontSize: 14 //更改坐标轴文字大小
                        }
                    },
                    splitLine: {//隐藏背景线
                        show: false
                    },
                    axisLine: {
                        show: true
                    },
                    axisTick: {
                        show: true
                    },
                },
                {
                    type: 'value',
                    name: '人数(个)',
                    min: 0,
                    axisLabel: {
                        formatter: '{value}',
                        textStyle: {
                            color: 'rgb(250,138,38)',
                            fontSize: 14 //更改坐标轴文字大小
                        }
                    },
                    splitLine: {//隐藏背景线
                        show: false
                    },
                    axisLine: {
                        show: true
                    },
                    axisTick: {
                        show: true
                    },
                }
                ],
                series: [{
                    name: '合同数量',
                    type: 'bar',
                    data: this.bar.contractCnt,
                    barWidth: '10%',
                    itemStyle: {
                        normal: {
                            color: 'rgb(82,172,232)'
                        }
                    },
                },
                {
                    name: '人员数量',
                    type: 'bar',
                    yAxisIndex: 1,
                    barWidth: '10%',
                    data: this.bar.personCnt,
                    itemStyle: {
                        normal: {
                            color: 'rgb(250,138,38)'
                        }
                    },
                }
                ]
            };
            contractAmountCompanyChart.setOption(option);
        },
        // 人员
        getPersonList() {
            this.contractPerson = [];
            if (this.contractList.length !== 0) {
                for (var i = 0; i < this.contractList.length; i++) {
                    getContractPerson({ contractIds: this.contractList[i].id }).then(response => {
                        if (response.data.length !== 0) {
                            this.contractPerson = this.contractPerson.concat(response.data);
                        }
                    })
                }
            }
        },
        // 合同
        getContractList() {
            listContract({ partyBCompanyId: this.queryParams.companyId }).then(response => {
                this.contractList = response.rows;
                // this.getPersonList();
            })
        },
        // 搜索
        handleQuery() {
            this.getComDetail();//单位信息
            this.getContractList();
            // 考勤
            this.getCompanyCheck();

        },
        // 重置
        resetQuery() {
            this.resetForm("queryForm");
            this.getCompanyList();
        },
        // 单位详情 关闭
        isOpen(val) {
            this.detailsShow = val;
        },
        // 详情查看
        async openDetail(row) {
            this.contractItem = row;
            this.contractShow = true;
            // 附件类型
            for (var i = 0; i < this.attachmentData.fileType.length; i++) {
                this.attachmentData.fileType[i].fileItems = [];
                await getFileItems({ attType: this.attachmentData.fileType[i].dictValue, relationId: row.id, relationType: 2, attStatus: 0 }).then((res) => {
                    if (res.rows.length !== 0) {
                        this.attachmentData.fileType[i].fileItems.push(res.rows);
                    }
                })
            }
            // 获取资质信息
            getContractQualif({
                contractId: row.id
            }).then(res => {
                this.contractQualificationList = res.rows;
            });
            this.filebox = true;
        },
        isfileboxShow(val) {
            this.filebox = val;
        },
        isContractShow(val) {
            this.contractShow = val;
        },
        // 跳转合同信息展示
        jumpTo(row) {
            this.$router.push(
                {
                    path: '/view/vcontract',
                    query: {
                        id: row.id
                    }
                }
            )
        },
        // 人员详情
        checkPeopleItem(id) {
            this.personForm.id = id;
            this.personOpen = true;
        },
        isPersonOpen(val) {
            this.personOpen = val;
        }
    },
}

</script>
<style scoped>
.chartsbox {
    width: 100%;
    height: 260px;
}

.el-tag--dark.el-tag--danger {
    background-color: pink;
    border-color: pink;
}

.maincolor {
    color: #409EFF;
}
</style>
<style>
.com-label {
    width: 200px;
}

.my-checkvalue {
    width: 95px;
    font-size: 18px;
    font-weight: bold;
    text-align: center !important;
}

.my-checkname {
    background: #f4f9fb !important;
    text-align: center !important;
}
</style>