
<script lang="ts">
import { Component } from 'vue-property-decorator';
import template from "./common.component.html"
import BaseRecordComponent from "hbt-common/components/common/baseRecord.component.vue"
import FormComponent from "hbt-common/components/common/form.component.vue"
import TableComponent from "hbt-common/components/common/table.component.vue"
import ManagerService from "@/service/manager.service"
import FormOption from "hbt-common/models/formOptions"
import BtnOption from "hbt-common/models/btnOptions"
import MapComponent from "@/components/map.component.vue"
import mapboxgl from "mapbox-gl";
@Component({
    template,
    components: {
        FormComponent,
        TableComponent,
        MapComponent
    },
} as any)
export default class HiddenDangerFilesComponent extends BaseRecordComponent<any> {
    public tableService = new ManagerService();

    public params = {} as any;

    public isFile = true;

    public isAction = false;

    public isPlan = false;
    // 显示治理列表按钮
    public isManager = false;
    // 是否显示删改查按钮
    public isBase = false;

    public tableActionWidth = "150";

    public formActions = [{
        name: "查询",
        value: "search",
        icon: "el-icon-search",
        type: "primary"
    }, {
        name: "清空",
        icon: "el-icon-tickets",
        value: "reset"
    }];
    public tableActions = [{
        name: "批量删除",
        value: "delete",
        plain: true,
        icon: "el-icon-delete",
        type: "danger"
    }];
    public footerActions = [{
        name: "选择全部",
        value: "selectAll",
        type: "primary"
    }, {
        name: "反向选择",
        value: "reverse"
    }];
    public formOptions: FormOption<BtnOption>[] = [];

    public showUpdate = false;
    public updateParams = {} as any;
    public updateOptions: FormOption<BtnOption>[] = [];
    public updateOptions2: FormOption<BtnOption>[] = [];
    public updateOptions3: FormOption<BtnOption>[] = [];
    public updateOptions4: FormOption<BtnOption>[] = [];
    public updateActions = [];

    public selectData = [];
    public levelMap = ["", "一般隐患", "重大隐患"]
    public reformModeMap = ["", "即查即改", "限期整改"];
    public executeResultMap = ["", "完成", "降低标准完成", "未完成", "延期完成", "延期未完成"];
    public isReadonly = true
    public isSureMap = ["未确认", "确认"];
    public isPassMap = ["不通过", "通过"];
    public isAcceptMap = ["不接受", "接受"];

    public fileList = [] as any;
    public photoList = [] as any;

    public fileList2 = [] as any;
    public photoList2 = [] as any;
    public showFile = false;
    public currentUrl = null;
    public center = [118.751353, 31.969568];
    public marker: any = null;
    public map: any = null;
    public showMap = false;

    public riskSource = [] as any;

    public executeResultList = [{
        text: "完成",
        value: 1
    }, {
        text: "降低标准完成",
        value: 2
    }, {
        text: "未完成",
        value: 3
    }, {
        text: "延期完成",
        value: 4,
    }, {
        text: "延期未完成",
        value: 5
    }];

    created() {
        //重大危险源
        this.initRiskSource()
    }

    public getTableData() {
        this.tableService.selectByPage2(this.params).then(res => {
            this.tableData = res.data as any;
            this.getTableCallback();
        })
    }

    public getMap(map) {
        this.map = map;
        this.addMarker();
    }
    public addMarker() {
        this.marker = new mapboxgl.Marker({ draggable: !this.isReadonly && this.updateParams.status < 2 })
            .setLngLat(this.center)
            .addTo(this.map);
        this.map.flyTo({ center: this.center })
    }

    public onDragEnd() {
        const lngLat = this.marker.getLngLat();
        this.updateParams.locationLng = lngLat.lng;
        this.updateParams.locationLat = lngLat.lat;
        this.center = [lngLat.lng, lngLat.lat]
        // this.updateParams.locationName = lngLat.lng+","+lngLat.lat;
        this.handleClose()
    }



    public getTableCallback() {
        this.formOptions = [{
            name: "隐患等级",
            key: "level",
            type: "select",
            datas: [{
                name: "一般隐患",
                value: 1
            }, {
                name: "重大隐患",
                value: 2
            }]
        }, {
            name: "隐患分类",
            key: "classify",
            type: "select",
            datas: this.$store.state.prevention_dangrous_type
        }, {
            name: "整改方式",
            key: "reformMode",
            type: "select",
            datas: [{
                name: "即查即改",
                value: 1
            }, {
                name: "限期整改",
                value: 2
            }]
        }]

        this.updateOptions = [{
            name: "隐患编号",
            key: "number",
            disable: true,
            width: "calc(50% - 20px)",
            require: true,
            showError: false,
            type: "text"
        }, {
            name: "隐患来源",
            key: "source",
            format: "sourceName",
            type: "select",
            width: "calc(50% - 20px)",
            require: true,
            showError: false,
            datas: this.$store.state.prevention_danger_resource
        }, {
            name: "隐患标题",
            key: "title",
            width: "100%",
            require: true,
            showError: false,
            type: "text"
        }, {
            name: "隐患描述",
            width: "100%",
            key: "description",
            require: true,
            showError: false,
            type: "text"
        }, {
            name: "隐患级别",
            key: "level",
            format: "levelName",
            type: "select",
            width: "calc(50% - 20px)",
            require: true,
            showError: false,
            datas: [{
                name: "一般隐患",
                value: 1
            }, {
                name: "重大隐患",
                value: 2
            }]
        }, {
            name: "整改方式",
            key: "reformMode",
            format: "reformModeName",
            type: "select",
            width: "calc(50% - 20px)",
            require: true,
            showError: false,
            datas: [{
                name: "即查即改",
                value: 1
            }, {
                name: "限期整改",
                value: 2
            }]
        }, {
            name: "隐患位置",
            key: "locationName",
            type: "text",
            width: "calc(50% - 20px)",
            require: true,
            showError: false,
            unit: {
                type: "btn",
                name: (this.updateParams.status > 1 || this.isReadonly) ? "查看定位" : "点击定位",
                value: "fixed",
                btnType: "primary"
            }
        }, {
            name: "隐患分类",
            key: "classify",
            format: "classifyName",
            type: "select",
            width: "calc(50% - 20px)",
            require: true,
            showError: false,
            datas: this.$store.state.prevention_dangrous_type
        }, {
            name: "整改部门",
            key: "reformDeptId",
            format: "reformDeptName",
            type: "treeSelect",
            width: "calc(50% - 20px)",
            require: true,
            expandLevel: Infinity,
            showError: false,
            datas: this.$store.state.deptTreeList
        }, {
            name: "整改责任人",
            key: "reformUserId",
            format: "reformUserName",
            type: "select",
            width: "calc(50% - 20px)",
            require: true,
            showError: false,
            datas: this.$store.state.userList,
        }, {
            name: "验证人",
            key: "verifyUserId",
            format: "verifyUserName",
            type: "select",
            width: "calc(50% - 20px)",
            require: true,
            showError: false,
            datas: this.$store.state.userList,
        }, {
            name: "整改时限",
            key: "reformDeadline",
            type: "date",
            subType: "datetime",
            format: "yyyy-MM-dd HH",
            width: "calc(50% - 20px)",
            require: true,
            showError: false,
        }, {
            name: "隐患照片",
            key: "photo",
            ref: "photo",
            type: "upload",
            width: "calc(50% - 20px)",
            require: true,
            showError: false,
            autoUpload: true,
            onPreview: this.onPreview,
            accept: "image/png, image/jpeg",
            listType: "picture-card",
            fileList: this.photoList,
            icon: "el-icon-plus",
        }, {
            name: "相关附件",
            key: "file",
            ref: "file",
            type: "upload",
            width: "calc(50% - 20px)",
            showError: false,
            onPreview: this.onPreview,
            autoUpload: true,
            accept: "image/png, image/jpeg,.doc,.docx,.xls,.xlsx,.pdf",
            listType: "text",
            tip: this.isReadonly ? "" : "请上传.pdf,.png,.jpg,.doc.docx,.xls,.xlsx格式文件",
            fileList: this.fileList,
            btn: [{
                name: "上传",
                value: "upload",
                hide: this.isReadonly,
                size: "small",
                type: "primary"
            }]
        }, {
            name: "隐患类别",
            key: "dangerType",
            format: "dangerTypeName",
            type: "select",
            width: "calc(50% - 20px)",
            require: true,
            showError: false,
            datas: this.$store.state.prevention_danger_type,
        }, {
            name: "检查类型",
            key: "inspectType",
            format: "inspectTypeName",
            type: "select",
            width: "calc(50% - 20px)",
            require: true,
            showError: false,
            datas: this.$store.state.prevention_danger_check_type,
        }, {
            name: "违章人数",
            key: "violateNumber",
            type: "number",
            width: "calc(50% - 20px)",
            showError: false,
        }, {
            name: "专业分类",
            key: "professionClassify",
            format: "professionClassifyName",
            type: "select",
            width: "calc(50% - 20px)",
            showError: false,
            datas: this.$store.state.prevention_major_type,
        }, {
            name: "属性分类",
            key: "attributeClassify",
            format: "attributeClassifyName",
            type: "select",
            width: "calc(50% - 20px)",
            showError: false,
            datas: this.$store.state.prevention_safe_reason,
        }, {
            name: "发生环节",
            key: "occurNode",
            format: "occurNodeName",
            type: "select",
            width: "calc(50% - 20px)",
            showError: false,
            datas: this.$store.state.prevention_occur_step,
        }, {
            name: "违反规定条款",
            key: "violateTerm",
            type: "textarea",
            width: "100%",
            showError: false,
        }, {
            name: "隐患整改要求",
            key: "reformDemand",
            type: "textarea",
            width: "100%",
            showError: false,
        }, {
            name: "重大危险源名称",
            key: "majorHazard",
            format: "majorHazardName",
            type: "select",
            width: "calc(50% - 20px)",
            require: true,
            showError: false,
            datas: this.riskSource
        },]

        this.updateOptions2 = [{
            name: "隐患确认",
            key: "reformConfirmFlag",
            format: "reformConfirmFlagName",
            type: "radio",
            width: "100%",
            require: true,
            showError: false,
        }, {
            name: "原因说明",
            type: "textarea",
            width: "100%",
            key: "reformReasonDescription",
            require: true,
            hide: this.updateParams.reformConfirmFlag,
            showError: false,
            placeholder: "请输入未确认原因"
        }, {
            name: "治理人",
            type: "select",
            width: "calc(50% - 20px)",
            require: true,
            key: "executeUserId",
            format: "executeUserName",
            showError: false,
            hide: this.updateParams.reformConfirmFlag === 0,
            datas: this.$store.state.userList
        }, {
            name: "治理时限",
            type: "date",
            subType: "datetime",
            width: "calc(50% - 20px)",
            require: true,
            key: "executeDeadline",
            format: "yyyy-MM-dd HH:mm",
            showError: false,
            hide: this.updateParams.reformConfirmFlag === 0,
        }, {
            name: "治理措施及要求",
            type: "textarea",
            width: "100%",
            key: "executeMeasure",
            require: true,
            hide: this.updateParams.reformConfirmFlag === 0,
            showError: false,
            placeholder: "请输入治理措施与要求"
        }, {
            name: "治理资金",
            type: "number",
            width: "35%",
            key: "executeMoney",
            require: true,
            hide: this.updateParams.reformConfirmFlag === 0,
            showError: false,
            unit: {
                name: "¥",
                type: "text"
            }
        }, {
            name: "",
            type: "textarea",
            width: "calc(65% - 40px)",
            key: "executeMoneySource",
            hide: this.updateParams.reformConfirmFlag === 0,
            placeholder: "请输入资金来源"
        }, {
            name: "确认人",
            type: "text",
            width: "calc(50% - 20px)",
            key: "realConfirmUserName",
            require: true,
            disable: true,
        }, {
            name: "确认时间",
            type: "date",
            subType: "datetime",
            width: "calc(50% - 20px)",
            require: true,
            key: "realConfirmTime",
            format: "yyyy-MM-dd HH:mm",
            showError: false,
        }]
        this.updateOptions3 = [{
            name: "接受确认",
            key: "executeConfirmFlag",
            format: "executeConfirmFlagName",
            type: "radio",
            width: "100%",
            require: true,
            showError: false,
        }, {
            name: "整改结果",
            key: "executeResult",
            format: "executeResultName",
            type: "radio",
            hide: this.updateParams.executeConfirmFlag === 0,
            width: "100%",
            require: true,
            showError: false,
            datas: this.executeResultList
        }, {
            name: "治理情况汇报",
            type: "textarea",
            width: "100%",
            key: "executeSituation",
            require: true,
            hide: this.updateParams.executeConfirmFlag === 0,
            showError: false,
            placeholder: "请输入治理措施与要求"
        }, {
            name: "原因说明",
            type: "textarea",
            width: "100%",
            key: "executeReasonDescription",
            require: true,
            hide: this.updateParams.executeConfirmFlag,
            showError: false,
            placeholder: "请输入未确认原因"
        }, {
            name: "照片及相关附件",
            key: "file2",
            type: "upload",
            hide: this.updateParams.executeConfirmFlag === 0,
            width: "100%",
            showError: false,
            onPreview: this.onPreview,
            autoUpload: true,
            accept: "image/png, image/jpeg,.doc,.docx,.xls,.xlsx,.pdf",
            listType: "text",
            tip: this.isReadonly ? "" : "请上传.pdf,.png,.jpg,.doc.docx,.xls,.xlsx格式文件",
            fileList: this.fileList2,
            btn: [{
                name: "点击上传附件",
                value: "upload",
                hide: this.isReadonly,
                size: "small",
                type: "primary"
            }]
        }, {
            name: "整改人",
            type: "text",
            width: "calc(50% - 20px)",
            key: "realExecuteUserName",
            require: true,
            disable: true,
        }, {
            name: "整改时间",
            type: "date",
            subType: "datetime",
            width: "calc(50% - 20px)",
            require: true,
            key: "realExecuteTime",
            format: "yyyy-MM-dd HH:mm",
            showError: false,
        }]
        this.updateOptions4 = [{
            name: "验证结果",
            key: "verifyConfirmFlag",
            format: "verifyConfirmFlagName",
            type: "radio",
            width: "100%",
            require: true,
            showError: false,
        }, {
            name: "验证情况",
            type: "textarea",
            width: "100%",
            key: "verifySituation",
            placeholder: "请输入验证情况"
        }, {
            name: "照片",
            key: "photo2",
            type: "upload",
            width: "100%",
            autoUpload: true,
            onPreview: this.onPreview,
            accept: "image/png, image/jpeg",
            listType: "picture-card",
            fileList: this.photoList2,
            icon: "el-icon-plus",
        }, {
            name: "验证人",
            type: "text",
            width: "calc(50% - 20px)",
            key: "realVerifyUserName",
            require: true,
            disable: true,
        }, {
            name: "验证时间",
            type: "date",
            subType: "datetime",
            width: "calc(50% - 20px)",
            require: true,
            key: "realVerifyTime",
            format: "yyyy-MM-dd HH:mm",
            showError: false,
        }]
    }

    public buildTable() {
        this.tableColumn.push({
            name: '隐患整改状态', width: "120", filters: [{ text: "已整改", value: 5 }, { text: "已作废", value: 7 }, { text: "整改中", value: 0 }], filterMethod: (data, row) => {
                return row.status == data;
            }, render: (data) => {
                if (data.status === 5) {
                    return "<span class='color_1'>已整改</span>"
                } else if (data.status === 7) {
                    return "已作废"
                } else {
                    return "<span class='color_2'>整改中</span>"
                }
            }
        });
        this.tableColumn.push({ name: '隐患来源', width: "150", render: (data) => this.$store.getters.prevention_danger_resource_map[data.source] });
        this.tableColumn.push({ name: '隐患标题', width: "150", key: "title" });
        this.tableColumn.push({ name: '隐患描述', width: "300", key: "description" });
        this.tableColumn.push({ name: '隐患等级', render: (data) => this.levelMap[data.level] });
        this.tableColumn.push({ name: '隐患分类', render: (data) => this.$store.getters.prevention_dangrous_type_map[data.dangerType] });
        this.tableColumn.push({ name: '整改方式', render: (data) => this.reformModeMap[data.reformMode] });
        this.tableColumn.push({ name: '隐患位置', width: "150", key: "locationName" });
        this.tableColumn.push({ name: '治理责任人', width: "100", key: "executeUserName" });
        this.tableColumn.push({
            name: '整改结果', width: "100", filters: this.executeResultList, filterMethod: (data, row) => {
                return row.executeResult == data;
            }, render: (data) => this.executeResultMap[data.executeResult]
        });
        this.tableColumn.push({ name: '整改时限', width: "120", key: "reformDeadline" });
    }

    public callback(data, type?) {
        if (type) {
            this.params[type] = data;
            this.getTableData();
            return
        }
        // 查询
        if (data.value === "search") {
            this.getTableData()
            // 重置
        } else if (data.value === "reset") {
            this.reset()
            // 反选
        } else if (data.value === "reverse") {
            this.toggleAll()
            // 全选
        } else if (data.value === "selectAll") {
            this.selectAll()
        } else if (data.value === "delete") {
            this.deleteData(this.selectData.map((item: any) => item.id))
        } else if (data.value === "cancel") {
            this.handleClose()

        } else if (data.value === "fixed") {
            this.showMap = true

        }
    }
    // 重置数据
    public reset() {
        this.params = {
            pageNum: 1,
            pageSize: 20,
        } as any;
        this.getTableData()
    }


    //重大危险源
    public initRiskSource() {
        this.riskSource = [] as any;
        this.riskSource = JSON.parse(JSON.stringify(this.$store.state.prevention_risk_source));
        this.riskSource.unshift({
            name: '不涉及',
            value: 0,
        })
        this.getTableCallback()
    }

    public showUpdateModel(row) {
        this.initRiskSource()
        Object.assign(this.updateParams, {
            verifyConfirmFlagName: this.isPassMap[row.verifyConfirmFlag],
            executeConfirmFlagName: this.isAcceptMap[row.executeConfirmFlag],
            reformConfirmFlagName: this.isSureMap[row.reformConfirmFlag],
            executeResultName: this.executeResultMap[row.executeResult],
            sourceName: this.$store.getters.prevention_danger_resource_map[row.source],
            attributeClassifyName: this.$store.getters.prevention_safe_reason_map[row.attributeClassify],
            classifyName: this.$store.getters.prevention_dangrous_type_map[row.classify],
            dangerTypeName: this.$store.getters.prevention_danger_type_map[row.dangerType],
            inspectTypeName: this.$store.getters.prevention_danger_check_type_map[row.inspectType],
            levelName: this.levelMap[row.level],
            occurNodeName: this.$store.getters.prevention_occur_step_map[row.occurNode],
            professionClassifyName: this.$store.getters.prevention_major_type_map[row.professionClassify],
            reformModeName: this.reformModeMap[row.reformMode],
        }, row);
        this.updateParams.majorHazard = +this.updateParams.majorHazard
        this.updateParams.majorHazardName = !this.updateParams.majorHazard? '不涉及' : this.$store.getters.prevention_risk_source_map[this.updateParams.majorHazard]
        this.getTableCallback()
        // 获取url
        if (row.resourceId) {
            this.tableService.getFileUrls({ ids: row.resourceId.split(",") }).then((photos: any) => {
                this.photoList = photos.data.map(item => {
                    return {
                        name: item.originalName,
                        url: item.url,
                        type: item.type,
                        id: item.id
                    }
                })

                this.getTableCallback()
            })
        }
        if (row.resourceOtherId) {
            this.tableService.getFileUrls({ ids: row.resourceOtherId.split(",") }).then((files: any) => {
                this.fileList = files.data.map(item => {
                    return {
                        name: item.originalName,
                        url: item.url,
                        type: item.type,
                        id: item.id
                    }
                })
                this.getTableCallback()
            })
        }

        if (row.executeResourceId) {
            this.tableService.getFileUrls({ ids: row.executeResourceId.split(",") }).then((files: any) => {
                this.fileList2 = files.data.map(item => {
                    return {
                        name: item.originalName,
                        url: item.url,
                        type: item.type,
                        id: item.id
                    }
                })
                this.getTableCallback()
            })
        }
        if (row.verifyResourceId) {
            this.tableService.getFileUrls({ ids: row.verifyResourceId.split(",") }).then((files: any) => {
                this.photoList2 = files.data.map(item => {
                    return {
                        name: item.originalName,
                        url: item.url,
                        type: item.type,
                        id: item.id
                    }
                })
                this.getTableCallback()
            })
        }
        this.showUpdate = true
    }
    public onPreview(file) {
        if (file.type.indexOf("png") >= 0 || file.type.indexOf("jp") >= 0) {
            this.currentUrl = file.url;
            this.showFile = true;
        } else {
            window.open(file.url, "_blank")
        }
    }

    public handleClose() {
        if (this.showMap) {
            this.showMap = false;
            this.marker.remove();
            this.marker = null;
            return
        }
        this.updateParams = {} as any
        this.showUpdate = false;
    }


    public selectable(row) {
        return row.status === 5
    }


    public toggleAll() {

        this.tableData.datas.filter(item => item.status === 5).forEach((item, index) => {
            (this.$refs.multipleTable as any).toggleRowSelection(item);
        })
    }
    public selectAll() {
        if (!this.selectData.length) {
            this.toggleAll()
        } else {
            this.tableData.datas.forEach((item, index) => {
                const find = this.selectData.find((data: any) => data.id === item.id);
                if (!find && item.status == 5) {
                    (this.$refs.multipleTable as any).toggleRowSelection(item);
                }
            })
        }
    }

    public handleSelectionChange(data) {
        this.selectData = data;
    }

    public change(data, item) {
        //
    }
}
</script>
<style lang="scss" scoped src="../common.component.scss"></style>
