<template>
    <div class="pd10" v-loading="isLoading" element-loading-text="数据加载中">
        <el-form :inline="true" :model="formData" class="demo-form-inline">
            <el-form-item>
                <Area @click="handleNodeClick" ref="area" @send="takeover"></Area>
            </el-form-item>
            <el-form-item>
                <Timeinterval ref="Timeinterval" :interval="3"></Timeinterval>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="onSubmit1">查询</el-button>
                <el-button size="small" type="primary" icon="el-icon-delete" @click="deleteFn">删除</el-button>
                <el-button size="small" type="primary" v-if="biaoCode === 'tjrbpush'" @click="push">上送网公司</el-button>
                <el-button size="small" type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
            </el-form-item>
        </el-form>
        <vxe-table stripe :data="tableData" size="mini" ref="historyData"
            :row-config="{ isCurrent: true, isHover: true }" :height="vh" border style="width: 100%"
            header-cell-class-name="table_header" :header-cell-style="{
                height: '25px',
                padding: '0px'
            }" :row-style="{ height: '28px' }" :cell-style="{ padding: '0px' }" @checkbox-all="selectAllChangeEvent"
            @checkbox-change="handleSelectionChange">
            <vxe-table-column type="checkbox" align="center" width="55"></vxe-table-column>
            <vxe-table-column field="workPlanName" show-overflow align="center" title="计划名称"
                min-width="120px"></vxe-table-column>
            <vxe-table-column field="supvOrgName" show-overflow align="center" title="监督单位"
                min-width="120px"></vxe-table-column>
            <vxe-table-column field="planSupvDate" show-overflow align="center" title="计划监督时间"
                min-width="120px"></vxe-table-column>
            <vxe-table-column field="applyComment" show-overflow align="center" title="调整原因"
                min-width="120px"></vxe-table-column>
            <vxe-table-column field="adjustTime" show-overflow align="center" title="调整时间"
                min-width="120px"></vxe-table-column>
            <vxe-table-column field="otherRemark" show-overflow align="center" title="其他要求"
                min-width="120px"></vxe-table-column>
            <vxe-table-column field="planStatus" show-overflow align="center" title="计划状态" min-width="120px"
                :formatter="formFilter"></vxe-table-column>
            <!-- <vxe-table-column field="province" show-overflow align="center" title="上次调整时间" min-width="120px"></vxe-table-column> -->
            <vxe-table-column field="isUploadHead" show-overflow align="center" title="上送标识" min-width="120px">
                <template slot-scope="scope">
                    <el-tag type="primary" size="small" style="color: #409eff; background: #ecf5ff"
                        v-if="scope.row.isUploadHead == 0">
                        未上送
                    </el-tag>
                    <el-tag type="primary" size="small" style="color: #67c23a; background: #f0f9eb"
                        v-if="scope.row.isUploadHead == 1">
                        已上送
                    </el-tag>
                    <el-tag type="primary" size="small" style="color: #909399; background: #f4f4f5"
                        v-if="scope.row.isUploadHead == 2">
                        取消上送
                    </el-tag>
                    <el-tag type="primary" size="small" style="color: orange; background: #f4f4f5"
                        v-if="scope.row.isUploadHead == 3">
                        待重新上送
                    </el-tag>
                </template>
            </vxe-table-column>
            <vxe-table-column field="updateUserName" show-overflow align="center" title="更新人"
                min-width="120px"></vxe-table-column>
            <vxe-table-column field="updateTime" show-overflow align="center" title="更新时间"
                min-width="120px"></vxe-table-column>
            <vxe-table-column field="province" show-overflow align="center" title="操作" min-width="120px">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="modifyFn(scope.row)">修改</el-button>
                </template>
            </vxe-table-column>
        </vxe-table>
        <el-pagination background align="right" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="formData.pageNum" :page-sizes="[20, 30, 50, 100]" :page-size="formData.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total" class="mt10"></el-pagination>
        <!-- 修改 -->
        <el-dialog :close-on-click-modal="false" title="修改" :visible.sync="modifyInformation" width="40%" height="80%">
            <el-form :inline="true" :model="form" class="form" ref="form" label-width="120px" :rules="rules">
                <el-form-item label="计划名称:" prop="workPlanName" class="mt10">
                    <el-input v-model="form.workPlanName" :disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="监督单位:" class="mt10" prop="supvOrgName">
                    <Organization @click="handleNodeClick1" ref="Organization" :valueTitle="valueTitle"
                        :disabled="disabled" :editCheckCode="editCheckCode"></Organization>
                </el-form-item>
                <el-form-item label="计划监督时间:" prop="planSupvDate" class="mt10">
                    <el-date-picker v-model="form.planSupvDate" value-format="yyyy-MM-dd" type="month"
                        :disabled="disabled" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="调整原因:" prop="applyComment" class="mt10">
                    <el-input v-model="form.applyComment"></el-input>
                </el-form-item>
                <el-form-item label="调整时间:" prop="adjustTime" class="mt10">
                    <el-date-picker v-model="form.adjustTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                        placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="其他要求:" prop="otherRemark" class="mt10">
                    <el-input v-model="form.otherRemark"></el-input>
                </el-form-item>
                <el-form-item label="计划状态:" prop="planStatus" class="mt10">
                    <el-select v-model="form.planStatus" clearable placeholder="请选择计划状态">
                        <el-option v-for="item in planStatus" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="上次调整时间:" prop="adjustTime" class="mt10">
                    <el-date-picker
                        v-model="form.adjustTime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetime"
                        :disabled="disabled"
                        placeholder="选择日期"
                    >
                    </el-date-picker>
                </el-form-item> -->
                <!-- <el-form-item label="更新人:" prop="updateUserName" class="mt10">
                    <el-input v-model="form.updateUserName" :disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="更新时间:" prop="updateTime" class="mt10">
                    <el-date-picker
                        v-model="form.updateTime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetime"
                        :disabled="disabled"
                        placeholder="选择日期"
                    >
                    </el-date-picker>
                </el-form-item> -->
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="modifyInformation = false">取 消</el-button>
                <el-button type="primary" @click="modifyinformationFn">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import Area from '@/views/components/Area/Area.vue'
import Organization from './Area/Organization.vue'
import Timeinterval from '@/views/components/TimePicker/index4'
import { dicData } from '@/assets/commjs/dictypeData'
import { pagePlanHis, updatePlanHis, delPlanHis, pushPlanHis } from '@/api/Supervisionmanage2/history'
import { listRoleMenu, updateRoleMenu } from '@/api/admin/role'
export default {
    components: { Area, Timeinterval, Organization },
    props: {},
    data() {
        return {
            biaoCode: '',
            id: JSON.parse(window.sessionStorage.getItem('Info')).roleList[0],
            isLoading: false,
            modifyInformation: false,
            disabled: false,
            zoom: '', //图表焦点校验
            vh: undefined,
            editCheckCode: '',
            valueTitle: '',
            formData: {
                orgId: '',
                searchBeginTime: '',
                searchEndTime: '',
                pageNum: 1,
                pageSize: 20
            },
            form: {
                id: '',
                workPlanName: '',
                supvOrgName: '',
                supvOrgId: '',
                planSupvDate: '',
                applyComment: '',
                adjustTime: '',
                otherRemark: '',
                planStatus: '',
                updateUserName: '',
                updateTime: ''
            },
            rules: {
                applyComment: [{ required: true, message: '请输入调整原因', trigger: 'blur' }],
                adjustTime: [{ required: true, message: '请输入调整时间', trigger: 'change' }],
                otherRemark: [{ required: true, message: '请输入其他要求', trigger: 'blur' }],
                planStatus: [{ required: true, message: '请选择计划状态', trigger: 'change' }]
            },
            total: 0,
            tableData: [],
            planStatus: [],
            multipleSelection: []
        }
    },
    created() {
        this.getclassificationData()
    },
    mounted() {
        this.listmenuRoleList()
        this.zoom = 1 / document.body.style.zoom

        // this.onSubmit();
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 95
            this.zoom = 1 / document.body.style.zoom
        },
        //获取权限
        listmenuRoleList() {
            let p = { id: this.id }
            listRoleMenu(p).then(response => {
                let ids = []
                //console.log("权限资源",response.data)
                response.data.forEach(item => {
                    if (item.code === 'tjrbpush') {
                        this.biaoCode = item.code
                    }
                })
            })
        },
        takeover(val) {
            this.formData.orgId = val[0].code
            this.onSubmit()
        },
        //获取类型
        getclassificationData() {
            //计划状态
            this.planStatus = dicData('plan_status', [])
        },
        handleSelectionChange(val) {
            // console.log(val);
            this.multipleSelection = val.records
        },
        selectAllChangeEvent(val) {
            // console.log(val);
            this.multipleSelection = val.records
        },
        onSubmit1() {
            this.formData.pageNum = 1
            this.onSubmit()
        },
        //查询
        onSubmit() {
            this.isLoading = true
            // this.$refs.Timeinterval.timeOptions = [
            //   // { label: "年份", value: 1 },
            //   // { label: "季度", value: 2 },
            //   { label: "月份", value: 3 },
            //   // { label: "周", value: 4 },
            //   // // { label: "自定义", value: 5 },
            // ]
            this.item = this.$refs.Timeinterval.timeValue
            this.formData.searchBeginTime = this.item[0]
            this.formData.searchEndTime = this.item[1]
            pagePlanHis(this.formData).then(res => {
                this.tableData = res.data.records
                this.total = res.data.total
                this.isLoading = false
            })
        },
        //数据过滤
        formFilter(row, column) {
            if (row.column.property == 'planStatus') {
                let title = ''
                this.planStatus.forEach(item => {
                    if (item.id == row.row.planStatus) {
                        title = item.name
                    }
                })
                return title
            } else {
                return row.row[row.column.property]
            }
        },
        //修改
        modifyFn(val) {
            this.modifyInformation = true
            this.form = JSON.parse(JSON.stringify(val))
            // this.planStatus.forEach(item=>{
            //       if( item.gvalue == this.form.planStatus ){
            //         this.form.planStatus =item.name
            //       }
            //   })
            this.disabled = true
            this.valueTitle = val.supvOrgName
            this.editCheckCode = val.supvOrgId
        },
        //修改确定
        modifyinformationFn() {
            this.$refs.form.validate(value => {
                // console.log(value);
                if (value == true) {
                    this.$confirm('是否确认修改?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                        .then(() => {
                            //   this.planStatus.forEach(item=>{
                            //   // console.log(item);
                            //   if(this.form.planStatus == item.id){
                            //     this.form.planStatus = item.gvalue
                            //   }
                            // })
                            updatePlanHis(this.form).then(res => {
                                if (res.code == 'A0000') {
                                    this.$message({
                                        type: 'success',
                                        message: res.message
                                    })
                                }
                                this.onSubmit()
                                this.modifyInformation = false
                            })
                        })
                        .catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消修改'
                            })
                        })
                }
            })
        },
        //导出
        exportEvent() {
            pagePlanHis({
                searchBeginTime: this.formData.searchBeginTime,
                searchEndTime: this.formData.searchEndTime,
                orgId: this.formData.orgId,
                pageNum: 1,
                pageSize: this.total
            }).then(res => {
                res.data.records.forEach(item => {
                    if (item.isUploadHead == 0) {
                        item.isUploadHead = '未上送'
                    } else if (item.isUploadHead == 1) {
                        item.isUploadHead = '已上送'
                    } else if (item.isUploadHead == 2) {
                        item.isUploadHead = '取消上送'
                    }
                })
                this.$refs.historyData.exportData({
                    filename: '监督计划变更历史数据', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'xlsx', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    data: res.data.records, // 数据源 // 过滤那个字段导出
                    columnFilterMethod: function (column, $columnIndex) {
                        return !(column.$columnIndex === 0)
                    }
                })
            })
        },
        //计划上送网公司
        push() {
            if (this.multipleSelection.length == 0) {
                this.$message({
                    showClose: true,
                    message: '请选择一条数据上送网公司!!!',
                    type: 'warning'
                })
                return
            }
            // let isUpload = []
            // this.multipleSelection.forEach(item=>{
            //   isUpload.push(item.isUploadHead)
            // })
            // if(isUpload.includes(1) == true){
            //       this.$message({
            //               type: "warning",
            //               message: '已上送,无需重复上送',
            //               });
            //               return
            // }else{
            this.$confirm('是否确认上送网公司?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    let ids = []
                    this.multipleSelection.forEach(item => {
                        ids.push(item.id)
                    })

                    pushPlanHis(ids).then(res => {
                        if ((res.code == 'A0000')) {
                            this.$message({
                                type: 'success',
                                message: res.message
                            })
                        }
                        this.onSubmit()
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消上送'
                    })
                })
            // }
        },
        // 删除
        deleteFn() {
            if (this.multipleSelection.length == 0) {
                this.$message({
                    showClose: true,
                    message: '请选择一条数据删除!!!',
                    type: 'warning'
                })
                return
            }
            this.$confirm('是否确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    let planIds = []
                    this.multipleSelection.forEach(item => {
                        planIds.push(item.id)
                    })

                    delPlanHis(planIds).then(res => {
                        if ((res.code == 'A0000')) {
                            this.$message({
                                type: 'success',
                                message: res.message
                            })
                        }
                        this.onSubmit()
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.formData.pageSize = val
            this.onSubmit()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.formData.pageNum = val
            this.onSubmit()
        },
        handleNodeClick(data) {
            this.formData.orgId = data.code
        },
        handleNodeClick1(data) {
            this.form.supvOrgId = data.code
            this.form.supvOrgName = data.name
        }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');

::v-deep .el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
    height: 32px;
}

::v-deep .form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .el-form-item {
        display: flex;
        width: 48%;

        .el-form-item__content {
            flex: 1 !important;

            .el-select {
                width: 100%;
            }

            .el-input__inner {
                width: 100% !important;
            }

            .el-date-editor {
                width: 100%;
            }
        }
    }
}

::v-deep .vxe-table .cell {
    text-align: center;
}
</style>
