<template>
    <!-- 协议管理 -->
    <div class="app-container" id="agreement">
        <el-row>
            <el-form
                :model="queryParams"
                ref="queryForm"
                size="small"
                :inline="true"
                v-show="showSearch"
                label-width="80px"
            >
                <el-form-item label="关键字" prop="keyWord">
                    <el-input
                        v-model="queryParams.keyWord"
                        placeholder="请输入关键字"
                        clearable
                        maxlength="50"
                        style="width: 240px"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="协议编号" prop="agreementCode">
                    <el-input
                        v-model="queryParams.agreementCode"
                        placeholder="请输入协议编号"
                        clearable
                        maxlength="50"
                        style="width: 240px"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="往来单位" prop="unitId">
                    <el-select
                        v-model="queryParams.unitId"
                        placeholder="请选择往来单位"
                        clearable
                    >
                        <el-option
                            v-for="(item, i) in unitList"
                            :key="i"
                            :label="item.unitName"
                            :value="item.unitId"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工程名称" prop="projectId">
                    <el-select
                        v-model="queryParams.projectId"
                        placeholder="请选择工程名称"
                        clearable
                    >
                        <el-option
                            v-for="(item, i) in projectList"
                            :key="i"
                            :label="item.projectName"
                            :value="item.projectId"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <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-row>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['picking:protocol:add']"
                    >新建</el-button
                >
            </el-col>

            <!--      <el-col :span="1.5">-->
            <!--        <el-button-->
            <!--          type="success"-->
            <!--          plain-->
            <!--          icon="el-icon-edit"-->
            <!--          size="mini"-->
            <!--          :disabled="single"-->
            <!--          @click="handleUpdate"-->
            <!--          v-hasPermi="['store:labelType:edit']"-->
            <!--        >修改</el-button>-->
            <!--      </el-col>-->
            <!--      <el-col :span="1.5">-->
            <!--        <el-button-->
            <!--          type="danger"-->
            <!--          plain-->
            <!--          icon="el-icon-delete"-->
            <!--          size="mini"-->
            <!--          :disabled="multiple"-->
            <!--          @click="handleDelete"-->
            <!--          v-hasPermi="['store:labelType:remove']"-->
            <!--        >删除</el-button>-->
            <!--      </el-col>-->
            <el-col :span="1.5">
                <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    @click="handleExport"
                    v-hasPermi="['picking:protocol:export']"
                    >导出</el-button
                >
            </el-col>
            <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="getList"
            ></right-toolbar>
        </el-row>

        <el-table
            v-loading="loading"
            :data="agreementList"
            @selection-change="handleSelectionChange"
            border
        >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column
                align="center"
                label="序号"
                type="index"
                :index="
                    indexContinuation(queryParams.pageNum, queryParams.pageSize)
                "
            />
            <el-table-column
                label="协议编号"
                align="center"
                prop="agreementCode"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="合同编号"
                align="center"
                prop="contractCode"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="协议类型"
                align="center"
                prop="protocol"
                :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.protocol == 1">内部单位</span>
                    <span v-if="scope.row.protocol == 2">外部单位</span>
                </template>
            </el-table-column>
            <el-table-column
                label="附件图片"
                align="center"
                prop="fileName"
                :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <div
                        v-for="(item, index) in scope.row.imgUrlList"
                        :key="index"
                        @click="openImg(item)"
                        style="color: #02a7f0; cursor: pointer"
                        >{{ scope.row.imgNameList[index] }}</div
                    >
                </template>
            </el-table-column>
            <el-table-column
                label="签订日期"
                align="center"
                prop="signTime"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="往来单位"
                align="center"
                prop="unitName"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="工程名称"
                align="center"
                prop="projectName"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="开始日期"
                align="center"
                prop="planStartTime"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="租赁期限(天)"
                align="center"
                prop="leaseDay"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="授权人"
                align="center"
                prop="authPerson"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="联系电话 "
                align="center"
                prop="phone"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="备注"
                align="center"
                prop="remark"
                :show-overflow-tooltip="true"
            />
            <el-table-column label="操作" align="center" width="120">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleUpdate(scope.row)"
                        v-hasPermi="['picking:protocol:edit']"
                        >编辑</el-button
                    >
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                        v-hasPermi="['picking:protocol:del']"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <!-- 新增编辑弹窗 -->
        <el-dialog
            :title="title"
            :visible.sync="open"
            width="1200px"
            append-to-body
            :close-on-click-modal="false"
        >
            <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="120px"
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="合同编号" prop="contractCode">
                            <el-input
                                maxlength="50"
                                v-model="form.contractCode"
                                placeholder="请输入合同编号"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="往来单位" prop="unitId">
                            <el-select
                                v-model="form.unitId"
                                filterable
                                placeholder="请选择往来单位"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in unitList"
                                    :key="item.unitId"
                                    :label="item.unitName"
                                    :value="item.unitId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="工程名称" prop="projectId">
                            <el-select
                                v-model="form.projectId"
                                filterable
                                placeholder="请选择工程名称"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in projectList"
                                    :key="item.projectId"
                                    :label="item.projectName"
                                    :value="item.projectId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="协议类型" prop="protocol">
                            <el-select
                                v-model="form.protocol"
                                filterable
                                placeholder="请选择协议类型"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in protocolList"
                                    :key="item.protocolId"
                                    :label="item.protocolName"
                                    :value="item.protocolId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="开始日期" prop="planStartTime">
                            <el-date-picker
                                style="width: 100%"
                                v-model="form.planStartTime"
                                value-format="yyyy-MM-dd"
                                type="date"
                                placeholder="请选择开始日期"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="租赁期限(天)" prop="leaseDay">
                            <el-input-number
                                v-model="form.leaseDay"
                                placeholder="请输入租赁期限(天)"
                                controls-position="right"
                                :min="0"
                                :max="9999"
                                style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="签订日期" prop="signTime">
                            <el-date-picker
                                v-model="form.signTime"
                                style="width: 100%"
                                value-format="yyyy-MM-dd"
                                type="date"
                                placeholder="请选择签订日期"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="授权人" prop="authPerson">
                            <el-input
                                maxlength="50"
                                v-model="form.authPerson"
                                placeholder="请输入授权人"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="联系方式" prop="phone">
                            <el-input
                                v-model="form.phone"
                                placeholder="请输入联系方式"
                                maxlength="11"
                                onkeyup="this.value = this.value.replace(/[^\d]/g,'');"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备注" prop="remark">
                            <el-input
                                v-model="form.remark"
                                type="textarea"
                                placeholder="请输入备注"
                                maxlength="100"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="20">
                        <el-form-item label="合同照片" prop="fileName">
                            <el-upload
                                :http-request="
                                    (obj) => imgUpLoad(obj, 'fileUrl')
                                "
                                action="#"
                                :limit="3"
                                :file-list="fileList"
                                :show-file-list="true"
                                list-type="picture-card"
                                accept=".png, .jpg, .jpeg"
                                :on-success="handleAvatarSuccess"
                                :class="{ disabled: uploadDisabled }"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove"
                            >
                                <i
                                    class="el-icon-plus avatar-uploader-icon"
                                ></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" height="650px" :src="dialogImageUrl" alt />
        </el-dialog>
    </div>
</template>

<script>
import {
    getAgreementList,
    getAgreementInfoId,
    addAgreement,
    updateAgreement,
    removeAgreement,
    getUnitList,
    getProjectList,
} from '@/api/claimAndRefund/receive'
import { imgUpLoad, fileUpLoad } from '@/api/system/upload'

export default {
    name: 'Agreement',
    dicts: ['sys_normal_disable'],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 往来单位数据
            unitList: [],
            // 工程数据
            projectList: [],
            // 表格数据
            agreementList: [],

            protocolList: [
                { protocolId: 1, protocolName: '内部单位' },
                { protocolId: 2, protocolName: '外部单位' },
            ],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 日期范围
            dateRange: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                keyWord: undefined,
                agreementCode: '',
                projectId: '',
                unitId: '',
            },
            // 表单参数
            form: {},
            //图片上传
            uploadHeader: process.env.VUE_APP_BASE_API,
            imageUrl: '',
            imageName: '',
            fileList: [],
            checkUrlList: [],
            checkUrlNameList: [],
            dialogImageUrl: '',
            dialogVisible: false,
            //上传地址
            // uploadUrl:'http://192.168.0.14:21624/system',//线上服务器地址+system
            // uploadUrl:'http://112.29.103.165:21624/system',//线上服务器地址+system
            uploadUrl: process.env.VUE_APP_BASE_API + '/system', // 上传的图片服务器地址
            // 表单校验
            rules: {
                contractCode: [
                    {
                        required: true,
                        message: '合同编号不能为空',
                        trigger: 'blur',
                    },
                ],
                signTime: [
                    {
                        required: true,
                        message: '签订日期不能为空',
                        trigger: 'blur',
                    },
                ],
                unitId: [
                    {
                        required: true,
                        message: '往来单位不能为空',
                        trigger: 'blur',
                    },
                ],
                projectId: [
                    {
                        required: true,
                        message: '工程名称不能为空',
                        trigger: 'blur',
                    },
                ],
            },
            peopleOpen: false,
            noticeOpen: false,
            nform: {
                notice: '',
            },
            nrules: {
                notice: [
                    {
                        required: true,
                        message: '通知内容不能为空',
                        trigger: 'blur',
                    },
                ],
            },
            deptName: undefined,
        }
    },
    computed: {
        //图片上传1张后，隐藏上传框
        uploadDisabled() {
            return this.checkUrlList.length > 4
        },
    },
    created() {
        this.getList()
        this.getUnitList()
        this.getProjectList()
    },
    methods: {
        //获取单位类型 ,getUnitList, getProjectList
        getUnitList() {
            getUnitList().then((response) => {
                this.unitList = response.data
            })
        },
        getProjectList() {
            getProjectList().then((response) => {
                this.projectList = response.data
            })
        },

        /** 查询字典类型列表 */
        getList() {
            this.loading = true
            getAgreementList(this.queryParams).then((response) => {
                this.agreementList = response.rows
                this.agreementList.forEach((item) => {
                    if (item.fileUrl) {
                        item.imgUrlList = item.fileUrl.split(',')
                        item.imgNameList = item.fileName.split(',')
                    }
                })
                this.total = response.total
                this.loading = false
            })
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        // 表单重置
        reset() {
            this.form = {
                agreementId: undefined,
                dictName: undefined,
                dictType: undefined,
                fileUrl: undefined,
                fileName: undefined,
                status: '0',
                remark: undefined,
            }
            this.fileList = []
            this.resetForm('form')
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            // this.dateRange = []
            this.resetForm('queryForm')
            this.queryParams.pageNum = 1
            this.queryParams.pageSize = 10
            this.getList()
            // this.handleQuery()
        },
        handleNotice() {
            this.noticeOpen = true
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset()
            this.fileList = []
            this.checkUrlList = []
            this.checkUrlNameList = []
            this.open = true
            this.title = '新建'
        },
        // 图片上传
        imgUpLoad(param, name, index) {
            // console.log(param,'image')
            param.type = 'ma'
            imgUpLoad(param)
                .then((res) => {
                    if (res.code == 200) {
                        this.checkUrlList.push(res.data.fileUrl)
                        this.checkUrlNameList.push(res.data.fileName)
                    } else {
                        // this.$msgError(res.msg)
                        this.$modal.msgError(res.msg)
                    }
                })
                .catch((error) => {
                    // this.$msgError(error)
                    this.$modal.msgError(error)
                })
        },
        handleAvatarSuccess(res, file) {
            console.log('success')
        },
        handleExceed(files, fileList) {
            this.$message.warning('最多只可以上传五张图片')
        },
        handleRemove(file, fileList) {
            let sum = 0
            this.checkUrlNameList.forEach((item, index) => {
                if (item == file.name) {
                    sum = index
                }
            })
            this.checkUrlNameList.splice(sum, 1)
            this.checkUrlList.splice(sum, 1)
        },
        //图片点击查看
        handlePictureCardPreview(file) {
            console.log(file)
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
        //图片查看
        openImg(url) {
            // this.dialogImageUrl = this.uploadUrl + url
            this.dialogImageUrl = url
            this.dialogVisible = true
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.agreementId)
            console.log(this.ids)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset()
            // const agreementId = row.agreementId
            let param = {
                agreementId: row.agreementId,
            }
            getAgreementInfoId(param).then((response) => {
                this.form = response.data
                if (response.data.leaseDay == null) {
                    this.form.leaseDay = undefined
                }
                this.fileList = []
                this.checkUrlList = []
                this.checkUrlNameList = []
                if (
                    response.data &&
                    typeof response.data.fileUrl === 'string' &&
                    typeof response.data.fileName === 'string'
                ) {
                    try {
                        if (response.data.fileUrl != '') {
                            let [urlArr, nameArr] = [
                                response.data.fileUrl,
                                response.data.fileName,
                            ].map((str) => str.split(','))

                            if (urlArr.length !== nameArr.length) {
                                return
                            }
                            console.log(urlArr)
                            let fileList = urlArr.map((url, i) => ({
                                name: nameArr[i],
                                url: `${this.uploadUrl}${url}`,
                            }))
                            console.log(fileList)
                            this.fileList = fileList
                            this.checkUrlList = urlArr
                            this.checkUrlNameList = nameArr
                        }
                    } catch (error) {
                        console.error('处理合同照片时发生错误:', error)
                    }
                }

                this.open = true
                this.title = '编辑'
            })
        },
        /** 提交按钮 */
        submitForm: function () {
            this.form.fileUrl = this.checkUrlList.join(',')
            this.form.fileName = this.checkUrlNameList.join(',')
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.form.agreementId != undefined) {
                        updateAgreement(this.form).then((response) => {
                            this.$modal.msgSuccess('修改成功')
                            this.open = false
                            this.getList()
                        })
                    } else {
                        addAgreement(this.form).then((response) => {
                            this.$modal.msgSuccess('新增成功')
                            this.open = false
                            this.getList()
                        })
                    }
                }
            })
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            // const agreementId = row.agreementId;
            let param = {
                agreementId: row.agreementId + '',
            }
            this.$modal
                .confirm('是否确认删除所选择的数据项？')
                .then(function () {
                    return removeAgreement(param)
                })
                .then(() => {
                    this.getList()
                    this.$modal.msgSuccess('删除成功')
                })
                .catch(() => {})
        },
        /** 导出按钮操作 */
        handleExport() {
            if (this.ids.length) {
                this.download(
                    'material/agreementInfo/export',
                    {
                        dataCondition: this.ids,
                    },
                    `协议_${new Date().getTime()}.xlsx`,
                )
            } else {
                this.$modal.msgWarning('请选择要导出的数据')
            }
        },
    },
}
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
    width: 60px !important;
    margin-bottom: 10px;
}
//隐藏图片上传框的css
::v-deep.disabled {
    .el-upload--picture-card {
        display: none;
    }
}
</style>
