<template>
    <div>
        <div>
            <div class="flex-title">生产数据导出工单</div>
            <el-form
                ref="form"
                :model="form"
                :rules="rule"
                label-width="130px"
                style="margin-top: 30px"
                :disabled="disabled"
            >
                <div class="flex-header">
                    <el-form-item
                        label="申请部门:"
                        prop="applyDepartment"
                        style="width: 25%; margin-right: 10px"
                    >
                        <el-input v-model="form.applyDepartment" :disabled="true"
                        ></el-input>
                    </el-form-item>

                    <el-form-item
                        label="申请科室:"
                        prop="applyOffice"
                        style="width: 25%; margin-right: 10px"
                    >
                        <el-input v-model="form.applyOffice" :disabled="true"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="拟稿人:" prop="proposer" :disabled="true"
                    >
                        <el-input v-model="form.proposer" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="拟稿时间:" prop="proposerTime"
                    >
                        <el-input
                            v-model="form.proposerTime"
                            :disabled="true"
                        ></el-input>
                    </el-form-item>
                </div>

                <div class="flex-header">
                    <el-form-item
                        label="文件标题:"
                        prop="needName"
                        style="width: 42%; margin-right: 10px"
                    >
                        <el-input v-model="form.needName" placeholder="关于XX单位导出XX业务XX数据的申请"></el-input>
                    </el-form-item>

                    <el-form-item label="文件编号:" prop="needNo"
                                  style="width: 42%; margin-left: 11px"
                    >
                        <el-input v-model="form.needNo" :disabled="true"></el-input>
                    </el-form-item>
                </div>

                <div class="flex-header">
                    <el-form-item
                        style="width: 33%; margin-right: 10%"
                        label="联系电话:"
                        prop="phoneNo"
                    >
                        <el-input v-model="form.phoneNo" :disabled="true"></el-input>
                    </el-form-item>

                    <el-form-item label="需求类型:" prop="requirementType"
                                  style="width: 33%; margin-right: 10%"

                    >
                        <el-select v-model="form.requirementType" placeholder="需求类型">
                            <el-option
                                v-for="(item, index) in requirementTypeList"
                                :label="item.name"
                                :value="item.code"
                                :key="index"
                            >{{ item.name }}
                            </el-option
                            >
                        </el-select>
                    </el-form-item>

                    <el-form-item label="数据导出类型:" prop="exportType"
                                  style="width: 33%; margin-right: 10%"

                    >
                        <el-select v-model="form.exportType" placeholder="数据导出类型">
                            <el-option
                                v-for="(item, index) in exportTypeList"
                                :label="item.name"
                                :value="item.code"
                                :key="index"
                            >{{ item.name }}
                            </el-option
                            >
                        </el-select>
                    </el-form-item>
                </div>


                <div class="flex-header">
                    <el-form-item
                        label="数据库名:"
                        style="width: 33%; margin-right: 10%"
                        prop="sourceDatabase"
                    >
                        <el-input v-model="form.sourceDatabase"
                                  placeholder="库名或IP"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="数据表:" prop="sourceTable"
                                  style="width: 33%; margin-right: 10%"

                    >
                        <el-input v-model="form.sourceTable" placeholder="用户.表名"></el-input>
                    </el-form-item>

                    <el-form-item label="主机IP:" prop="hostIp"
                                  style="width: 33%; margin-right: 10%"

                    >
                        <el-input v-model="form.hostIp" placeholder="数据源所在主机IP"></el-input>
                    </el-form-item>
                </div>

                <div class="flex-header">
                    <el-form-item
                        style="width: 90%; margin-right: 10%"
                        label="导出文件名称:"
                        prop="exportFileName"
                    >
                        <el-input v-model="form.exportFileName" placeholder="导出文件名称"></el-input>
                    </el-form-item>
                </div>
                <div class="flex-header">
                    <el-form-item
                        style="width: 90%; margin-right: 10%"
                        label="文件路径:"
                        prop="exportFilePath"
                    >
                        <el-input v-model="form.exportFilePath"
                                  placeholder="导出文件所在路径"
                        ></el-input>
                    </el-form-item>
                </div>

                <div class="flex-header">
                    <el-form-item
                        style="width: 90%; margin-right: 10%"
                        label-width="120px" label="需求内容:"
                        prop="requirementContent"
                    >
                        <el-input type="textarea"
                                  show-word-limit v-model="form.requirementContent"
                                  placeholder="如为明细级数据导出，请详细描述具体原由，至少50字。"
                        ></el-input>
                    </el-form-item>
                </div>

                <div class="flex-header">
                    <el-form-item
                        label="是否涉及敏感信息:"
                        style="white-space: nowrap;margin-right: 10%"
                        prop="isSensitiveInformation"
                    >
                        <el-select v-model="form.isSensitiveInformation" placeholder="请选择">
                            <el-option label="是" value="是"></el-option>
                            <el-option label="否" value="否"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="flex-header">
                    <el-form-item
                        style="width: 90%; margin-right: 10%"
                        label-width="120px" label="涉敏信息范围:"
                        prop="sensitiveScope"
                    >
                        <el-input type="textarea" @input="change($event)"
                                  :disabled="this.isEditSensitiveScope"
                                   v-model="form.sensitiveScope"></el-input>
                    </el-form-item>
                </div>

                <div class="flex-load" style="display: flex; flex-direction: column">
                    <el-form-item label="附件:" :disabled="disabled" prop="mkFileShareAttachList">
                        <my-upload :showFileList ="true" :drag ="!disabled" :disabled ="disabled"  @uploadBack="uploadBack" @delloadBack="delloadBack"
                                   @clickDownload="downloadOne" :fileInfo="fileInfo"
                                   @downloadBack = "downloadBack"
                                   :fileList="list.mkFileShareAttachList"
                                   style="width: 30% !important"></my-upload>

                    </el-form-item>
                    <div @click="downExcel" class="el-upload__tip" slot="tip">
                        附件模板： 生产数据导出申请表.doc
                    </div>
                </div>

            </el-form>
        </div>
        <div></div>
        <div></div>
    </div>
</template>

<script>
    import myUpload from "../../../components/uploadMultiConfig";

    export default {
        components: {
            myUpload,
        },
        data() {
            var validateRequirementContent = (rule, value, callback) => {
                if (!this.disabled) {
                    if (this.form.exportType === '2' && (!value || value.length < 50)) {
                        callback(new Error('如为明细级数据导出，请详细描述具体原由，至少50字。'));
                    } else if (!value) {
                        callback(new Error('请输入需求内容'));
                    } else {
                        callback();
                    }
                } else {
                    callback();
                }
            };

            var validateSensitiveScope = (rule, value, callback) => {
                if (!this.disabled) {
                    if (this.form.isSensitiveInformation === "是") {
                        if (!value) {
                            callback(new Error('请输入涉敏信息范围'));
                        } else {
                            callback();
                        }
                    } else {
                        callback();
                    }
                } else {
                    callback();
                }
            };
            return {
                fileInfo: {
                    type: "bt1n",
                    typename: "上传文件",
                    limit: 5,
                    url: "/market/waf/upload",
                    fileList: [],
                },
                //需求类型
                requirementTypeList: [],
                //数据导出类型
                exportTypeList: [],
                isEditSensitiveScope: false,

                form: {
                },
                rule: {},
                copyRule: {
                    needName: [
                        {required: true, message: "请输入文件标题", trigger: "blur"},
                    ],
                    requirementType: [
                        {required: true, message: "请选择需求类型", trigger: "change"},
                    ],
                    exportType: [
                        {required: true, message: "请选择数据导出类型", trigger: "change"},
                    ],
                    exportFileName: [
                        {required: true, message: "请选择导出文件名称", trigger: "blur"},
                    ],
                    requirementContent: [
                        {validator: validateRequirementContent, trigger: "blur"},
                    ],
                    isSensitiveInformation: [
                        {required: true, message: "请选择是否涉及敏感信息", trigger: "change"},
                    ],
                    mkFileShareAttachList: [
                        {required: true, message: "请选择上传附件", trigger: "change"},
                    ],
                    sensitiveScope: [
                        {validator: validateSensitiveScope, trigger: 'blur'}
                    ],
                },
                temprulers: {
                    sensitiveScope: [
                        {required: true, message: "请输入涉敏信息范围", trigger: "blur"},
                    ],
                }
            };
        },
        props: {
            list: {
                type: Object,
                default: () => {
                },
            },
            disabled: {
                type: Boolean,
                default: () => {
                },
            },
        },
        mounted() {
            if (this.list.mkFileShareAttachList) {
                this.$refs.upload.attList = this.list.mkFileShareAttachList;
                this.list.mkFileShareAttachList.map((item) => {
                    item.name = item.fileName;
                });
            }
        },
        created() {
            this.getRequirementTypeList();
            this.getExportTypeList();
            this.form = this.list;
            this.isList = this.list;
            if (!this.disabled) {
                 this.rule = this.copyRule;
            }
            this.fileInfo.fileList = this.list.mkFileShareAttachList;
        },
        watch: {
            "form.isSensitiveInformation": {
                handler(newVal, oldVal) {
                    if (!this.disabled) {
                        if (newVal === "否") {
                            this.isEditSensitiveScope = true;
                            this.form.sensitiveScope = "";
                        } else {
                            this.isEditSensitiveScope = false;
                        }
                    }
                },
            },
        },
        methods: {
            change(){
                this.$forceUpdate();
            },
            getRequirementTypeList() {
                this.$http({
                    url: "/market/sysConfig/queryList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {"type": "1"},
                }).then((res) => {
                    this.requirementTypeList = res.data;
                });
            },
            getExportTypeList() {
                this.$http({
                    url: "/market/sysConfig/queryList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {"type": "2"},
                }).then((res) => {
                    this.exportTypeList = res.data;
                });
            },
            clickLLength(e) {
                if (e !== 0) {
                    this.Length = true;
                } else {
                    this.Length = false;
                }
            },
            clickSelect(e) {
            },

            uploadBack(v) {
                if (v && v.fileName) {
                    v.name = v.fileName;
                }
                if (this.form.mkFileShareAttachList) {
                    this.form.mkFileShareAttachList = [];
                    this.form.mkFileShareAttachList = v;
                } else {
                    let mkFileShareAttachList = [];
                    mkFileShareAttachList = v;
                    this.$set(this.form, "mkFileShareAttachList", mkFileShareAttachList);
                }
            },
            downloadBack(v) {
            },
            delloadBack(v) {
                this.form.mkFileShareAttachList = v;
                this.$http({
                    url: "/market/waf/update",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: this.form,
                }).then((res) => {
                });
            },
            downloadOne(e) {
                let list = {
                    id: e.fileCode,
                    fileName: e.fileName,
                };

                this.$http({
                    url: "/market/waf/downFile",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    responseType: "blob",
                    data: list,
                }).then((response) => {
                    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                        let blob = new Blob([response.data], {
                            type: "application/vnd.ms-excel",
                        });
                        //window.navigator.msSaveOrOpenBlob(blob, this.form.needName);
                        window.navigator.msSaveOrOpenBlob(
                            blob,
                            list.fileName
                        );
                    } else {
                        /* 火狐谷歌的文件下载方式 */
                        var blob = new Blob([response.data]);
                        var downloadElement = document.createElement("a");
                        var href = window.URL.createObjectURL(blob);
                        downloadElement.href = href;
                        downloadElement.download =
                            list.fileName;
                        document.body.appendChild(downloadElement);
                        downloadElement.click();
                        document.body.removeChild(downloadElement);
                        window.URL.revokeObjectURL(href);
                    }
                });
            },
            download() {
                if (this.form.mkFileShareAttachList.length > 1) {
                    this.$http({
                        url: "/market/CMKFile/downAllFile",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        responseType: "blob",
                        data: {mkFileShareAttachList: this.form.mkFileShareAttachList},
                    }).then((response) => {
                        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                            let blob = new Blob([response.data], {
                                type: "application/vnd.ms-excel",
                            });
                            window.navigator.msSaveOrOpenBlob(
                                blob,
                                new Date().getTime().toString() + ".zip"
                            );
                        } else {
                            /* 火狐谷歌的文件下载方式 */
                            var blob = new Blob([response.data]);
                            var downloadElement = document.createElement("a");
                            var href = window.URL.createObjectURL(blob);
                            downloadElement.href = href;
                            downloadElement.download = this.form.needName + ".zip";
                            document.body.appendChild(downloadElement);
                            downloadElement.click();
                            document.body.removeChild(downloadElement);
                            window.URL.revokeObjectURL(href);
                        }
                        if (this.infolist.authType === "3") {
                            this.dialogCli(10);
                        }
                    });
                } else {
                    let list = {
                        id: this.form.mkFileShareAttachList[0].fileCode,
                        fileName: this.form.mkFileShareAttachList[0].fileName,
                    };
                    this.$http({
                        url: "/market/waf/downFile",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        responseType: "blob",
                        data: list,
                    }).then((response) => {
                        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                            let blob = new Blob([response.data], {
                                type: "application/vnd.ms-excel",
                            });
                            //window.navigator.msSaveOrOpenBlob(blob, this.form.needName);
                            window.navigator.msSaveOrOpenBlob(
                                blob,
                                this.form.mkFileShareAttachList[0].fileName
                            );
                        } else {
                            /* 火狐谷歌的文件下载方式 */
                            var blob = new Blob([response.data]);
                            var downloadElement = document.createElement("a");
                            var href = window.URL.createObjectURL(blob);
                            downloadElement.href = href;
                            downloadElement.download =
                                this.form.mkFileShareAttachList[0].fileName;
                            document.body.appendChild(downloadElement);
                            downloadElement.click();
                            document.body.removeChild(downloadElement);
                            window.URL.revokeObjectURL(href);
                        }
                    });
                }
            },
            //上传文件钩子函数
            clickUpload(file) {
            },
            //下载文件
            downExcel() {
                this.$http({
                    url: "/market/scsjdcProProcess/downloadTemp",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    responseType: "blob",
                    data: {},
                }).then((response) => {
                    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                        let blob = new Blob([response.data], {
                            type: "application/vnd.ms-excel",
                        });
                        window.navigator.msSaveOrOpenBlob(blob, "生产数据导出申请表.doc");
                    } else {
                        /* 火狐谷歌的文件下载方式 */
                        var blob = new Blob([response.data]);
                        var downloadElement = document.createElement("a");
                        var href = window.URL.createObjectURL(blob);
                        downloadElement.href = href;
                        downloadElement.download = "生产数据导出申请表.doc";
                        document.body.appendChild(downloadElement);
                        downloadElement.click();
                        document.body.removeChild(downloadElement);
                        window.URL.revokeObjectURL(href);
                    }
                });
            },
            changeSelect(e) {
            },
        },
    };
</script>

<style lang="scss" scoped>
    ::v-deep .el-upload-list {
        width: 23rem;
    }

    .flex-title {
        text-align: center;
        font-size: 24px;
        line-height: 60px;
        border-bottom: 1px solid #e1e1e1;
        font-weight: bold;
    }

    .flex-header {
        margin-top: 20px;
        display: flex;
        //   justify-content: space-between;
        border-bottom: 1px solid #e1e1e1;

        ::v-deep .el-form-item {
            width: 25%;
            margin-right: 5%;
        }
    }

    .flex-input-tare {
        ::v-deep .el-form-item {
            width: 100%;
            margin-right: 5%;
        }
    }

    .el-upload__tip {
        color: red;
    }

    ::v-deep .el-input--suffix .el-input__inner {
        width: 119% !important;
    }

    ::v-deep .el-input__inner {
        color: black !important;
    }

    ::v-deep .el-textarea.is-disabled .el-textarea__inner {
        color: black !important;
    }
</style>
