<template>
    <div>
        <el-form :inline="true" class="demo-form-inline form">
            <el-form-item>
                <Area @click="handleNodeClick" ref="area"></Area>
            </el-form-item>

            <el-form-item>
                <Timeinterval :interval="3" ref="interval" :timeOptions="timeOptions"></Timeinterval>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" class="ml10" icon="el-icon-search" @click="onsubmit">查询</el-button>
                <el-button type="primary" icon="el-icon-refresh" @click="Reset">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row>
            <el-col :span="24">
                <div class="button mb10">
                    <el-button type="primary" icon="el-icon-s-claim" @click="planReviewFn('')">审核</el-button>
                </div>
                <el-table
                    stripe
                    :data="planapprovalData"
                    :height="height"
                    border
                    style="width: 100%"
                    v-loading="isLoading"
                    header-cell-class-name="table_header"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <template v-for="(item, index) in tableHeaderPlanapproval">
                        <el-table-column
                            :prop="item.prop"
                            :label="item.label"
                            :key="index"
                            :min-width="item.width"
                        ></el-table-column>
                    </template>
                </el-table>
                <el-pagination
                    background
                    align="right"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="ruleForm.pageNum"
                    :page-sizes="[20, 30, 40, 50, 100]"
                    :page-size="ruleForm.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="planapprovalData.length"
                    class="mt10"
                ></el-pagination>
            </el-col>
        </el-row>

        <!-- 审核弹窗 -->
        <el-dialog :close-on-click-modal="false" title="普测计划审核" :visible.sync="planReview" width="800px">
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-divider content-position="left" style="font-size: 18px; font-weight: bolder">
                        基本信息
                    </el-divider>
                    <el-form :inline="true" :model="formdata" class="forms" :disabled="true" label-width="120px">
                        <el-form-item label="普测负责单位:">
                            <el-input v-model="formdata.orgName" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="计划开始时间:">
                            <el-date-picker
                                v-model.trim="formdata.planStartTime"
                                type="date"
                                placeholder="选择计划开始时间"
                            ></el-date-picker>
                        </el-form-item>
                        <el-form-item label="计划结束时间:">
                            <el-date-picker
                                v-model.trim="formdata.planEndTime"
                                type="date"
                                placeholder="选择计划结束时间"
                            ></el-date-picker>
                        </el-form-item>
                        <el-form-item label="普测计划编号:">
                            <el-input v-model="formdata.planNo" placeholder="请输入普测计划编号"></el-input>
                        </el-form-item>
                        <el-form-item label="计划名称:">
                            <el-input v-model="formdata.planName" placeholder="请输入计划名称"></el-input>
                        </el-form-item>
                        <el-form-item label="测试负责人:">
                            <el-input v-model="formdata.leader" placeholder="请输入测试负责人"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="14">
                    <el-divider content-position="left" style="font-size: 18px; font-weight: bolder">
                        添加电站
                    </el-divider>
                    <el-tree
                        :data="treeData"
                        show-checkbox
                        node-key="id"
                        style="overflow-y: auto; height: 480px"
                        default-expand-all
                        :props="defaultProps"
                        :check-strictly="true"
                        ref="tree"
                    ></el-tree>
                </el-col>
            </el-row>
            <el-divider content-position="left" style="font-size: 18px; font-weight: bolder">审核意见</el-divider>
            <!-- <div style="width: 100%; display: flex; justify-content: center">
                <div class="shyj">{{ textContent }}</div>
            </div> -->
            <el-input type="textarea" :rows="2" placeholder="请输入审核意见!" v-model="textarea"></el-input>
            <div slot="footer" style="display: flex; justify-content: center">
                <el-button type="primary" size="small" class="ml20" @click="passFn">通过</el-button>
                <el-button type="primary" size="small" class="ml20" @click="failFn">不通过</el-button>
                <el-button type="primary" size="small" class="ml20" @click="cancelFn">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Area from '@/views/components/Area/Area.vue'
import Timeinterval from '../../../components/Timeinterval.vue'
import {
    queryPlanAudit,
    initDetpStataionTree,
    checkPlanAudit,
  queryPlanOne
} from '@/api/Process-supervision/tiaoHarmonicmanagement/harmonicmanagement'
export default {
    components: { Area, Timeinterval },
  props: {
    son:String
  },
    data() {
        return {
            vh: '',
            height: null,
            isLoading: false,
            isLoading1: false,
            planReview: false,
            item: ['', ''],
            // 查询数据
            ruleForm: {
                currentPage: 1,
                pageSize: 20,
                planStartTime: '',
                planEndTime: '',
                orgNo: ''
            },
            formdata: {
                company: '杭州公司本部',
                startTime: '',
                endTime: '',
                number: '',
                name: '',
                chargePerson: '',
                substation: '',
                Bus: ''
            },
            textarea: '',

            tableHeaderPlanapproval: [
                { prop: 'orgName', label: '所属单位' },
                { prop: 'planNo', label: '普测计划编号' },
                { prop: 'planName', label: '普测计划名称' },
                { prop: 'planStartTime', label: '开始时间' },
                { prop: 'planEndTime', label: '结束时间' },
                { prop: 'subCount', label: '普测变电站数量' },
                { prop: "createPersonName", label: "创建用户" },
            ],
            planapprovalData: [],
            planReviewData: [],
            multipleSelection: [],
            device: '',
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'name',
                disabled: 'flag'
            },
            timeOptions: [
                { label: '年份', value: 1 },
                { label: '季度', value: 2 },
                { label: '月份', value: 3 }
            ]
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        this.ruleForm.orgNo = JSON.parse(window.sessionStorage.getItem('Info')).deptId
        this.onsubmit()
        initDetpStataionTree({
            orgId: JSON.parse(window.sessionStorage.getItem('Info')).deptId
        }).then(res => {
            this.treeData = res.data
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
      //查询详情
      queryPlanOneDetail(planId){

        let data = {planId:planId}
        queryPlanOne(data).then(res => {
          if(res.code === 'A0000'){
            this.planReview = true
            this.isLoading1 = true
            this.formdata = res.data
            setTimeout(() => {
              this.$refs.tree.setCheckedKeys(res.data.subIds)
            }, 0)
          }

        })
      },

        setHeight() {
            this.height = window.sessionStorage.getItem('appheight') - 215
        },
        //查询
        onsubmit() {
            this.isLoading = true

            this.item = this.$refs.interval.timeValue
            this.ruleForm.planStartTime = this.item[0]
            this.ruleForm.planEndTime = this.item[1]
            queryPlanAudit(this.ruleForm).then(res => {
                this.isLoading = false
                this.planapprovalData = res.data.records
            })
        },
        //审核
        planReviewFn(planId) {

        console.log(planId)

          if(planId && planId!==''){
            //说明是从代办页面点击过来的
            this.queryPlanOneDetail(planId)
          }else {

            if (this.multipleSelection.length == 1) {
              this.planReview = true
              this.isLoading1 = true

              this.formdata = this.multipleSelection[0]
              setTimeout(() => {
                this.$refs.tree.setCheckedKeys(this.multipleSelection[0].subIds)
              }, 0)
            } else {
              this.$message({
                message: this.multipleSelection.length == 0 ? '请选择1条数据查看详情!' : '只能选择1条数据查看详情!',
                type: 'warning'
              })
            }
          }

        },
        //普测计划审核通过
        passFn() {
            checkPlanAudit({
                checkResult: 1,
                planNo: this.formdata.planNo,
                checkComment: this.textarea,
                checkPerson: JSON.parse(window.sessionStorage.getItem('Info')).loginName
            }).then(res => {
                if (res.code == 'A0000') {
                    this.$message({
                        message: '审核 通过成功!',
                        type: 'success'
                    })
                    this.onsubmit()
                    this.planReview = false
                }
            })
        },
        //普测计划不通过
        failFn() {
            checkPlanAudit({
                checkResult: 0,
                planNo: this.formdata.planNo,
                checkComment: this.textarea,
                checkPerson: JSON.parse(window.sessionStorage.getItem('Info')).loginName
            }).then(res => {
                if (res.code == 'A0000') {
                    this.$message({
                        message: '审核 不通过成功!',
                        type: 'success'
                    })
                    this.onsubmit()
                    this.planReview = false
                }
            })
        },
        // 取消
        cancelFn() {
            this.planReview = false
        },
        // 切换选项
        handleNodeClick(data) {
            //console.log(data);
            this.ruleForm.orgNo = data.id
        },
        //勾选
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        //重置
        Reset() {
            this.$refs.area.form.valueTitle = JSON.parse(window.sessionStorage.getItem('Info')).deptName
            this.ruleForm.orgNo = JSON.parse(window.sessionStorage.getItem('Info')).deptId
            this.$refs.interval.intervald = 3
        },
        //序号
        rowClassName({ row, rowIndex }) {
            row.number = rowIndex + 1
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.ruleForm.pageSize = val
            this.onsubmit()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.ruleForm.currentPage = val
            this.onsubmit()
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
::v-deep .el-table .cell {
    text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}

.button {
    float: right;
    margin-right: 5px;
}

::v-deep .forms {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .el-form-item {
        display: flex;
        width: 100%;
        .el-form-item__content {
            flex: 1 !important;
            .el-select {
                width: 100%;
            }

            .el-date-editor {
                width: 100%;
            }
        }
    }
}
</style>
