<template>
    <div class="editable-cell-container">
        <div class="title-div">
            <span>{{title}}</span>
            <div class="hurdle"></div>
            <a class="a-href" @click="showEdit = true">编辑</a>
        </div>
        <el-form
            class="info-form"
            :rules="rules"
            inline
            label-width="150px"
            ref="cell_form"
            :model="info">
            <template v-for="(item, idx) in fieldList">
                <el-form-item :label="item.title+'：'" class="item-width" :key="item.fieldCode+'_'+idx" :prop="item.fieldCode">
                    <template v-if="showEdit">
                        <el-input v-model="info[item.fieldCode]" v-if="item.fieldType == 0" :placeholder="item.fieldDescription" :disabled="item.fieldEdited != '1'"></el-input>
                        <el-input v-model="info[item.fieldCode]" v-if="item.fieldType == 6" :placeholder="item.fieldDescription"  :disabled="item.fieldEdited != '1'"></el-input>
                        <el-input v-model="info[item.fieldCode]" v-else-if="item.fieldType == 1" type="textarea" autosize  :disabled="item.fieldEdited != '1'"></el-input>
                        <template
                            v-else-if="item.fieldType == 2 || item.fieldType == 3">
                            <el-select
                                :disabled="item.fieldEdited != '1'"
                                v-if="item.systemFlag == 1"
                                :multiple="item.fieldType == 3"
                                :collapse-tags="item.fieldType == 3"
                                v-model="info[item.fieldCode]"
                                :placeholder="item.fieldDescription">
                                <el-option
                                    v-for="cho in item.fieldOperations.fieldContent"
                                    :key="cho.key"
                                    :label="cho.name"
                                    :value="cho.key">
                                </el-option>
                            </el-select>
                            <el-select
                                v-else
                                :disabled="item.fieldEdited != '1'"
                                :multiple="item.fieldType == 3"
                                :collapse-tags="item.fieldType == 3"
                                v-model="info[item.fieldCode]"
                                :placeholder="item.fieldDescription">
                                <el-option
                                    v-for="(cho, index) in item.fieldOperations.fieldContent"
                                    :key="cho.key + '_' + index"
                                    :label="cho.name"
                                    :value="cho.name">
                                </el-option>
                            </el-select>
                        </template>
                        <el-date-picker
                            :disabled="item.fieldEdited != '1'"
                            :format="item.fieldOperations.typeValue"
                            :value-format="item.fieldOperations.typeValue"
                            v-else-if="item.fieldType == 4"
                            v-model="info[item.fieldCode]"
                            type="date"
                            :placeholder="item.fieldDescription">
                        </el-date-picker>
                        <el-date-picker
                            :disabled="item.fieldEdited != '1'"
                            v-else-if="item.fieldType == 5"
                            v-model="info[item.fieldCode]"
                            type="daterange"
                            range-separator="至"
                            :format="item.fieldOperations.typeValue"
                            :value-format="item.fieldOperations.typeValue"
                            :start-placeholder="item.fieldOperations.startDescription"
                            :end-placeholder="item.fieldOperations.endDescription">
                        </el-date-picker>
                        <vue-office-upload-image
                            v-else-if="item.fieldType == 7"
                            projectName="haoban-manage-web"
                            wxFlag="0"
                            :actionUrl="uploadUrl"
                            :imageList="info[item.fieldCode]"
                            :limitW="500"
                            :limitH="500"
                            :maxImageLength="5"
                            @uploadOnSuccess="uploadOnSuccess"
                            @sortImg="sortImg"
                            @deleteImage="deleteImage">
                        </vue-office-upload-image>
                    </template>
                    <template v-else>
                        <div v-if="item.fieldType == 0 || item.fieldType == 1 || item.fieldType == 6">{{info[item.fieldCode]}}</div>
                        <template v-else-if="item.fieldType == 2">
                            <div v-if="item.systemFlag == 1">{{!!item.fieldOperations.fieldContent[info[item.fieldCode] * 1 - 1] ? item.fieldOperations.fieldContent[info[item.fieldCode] * 1 - 1].name : ""}}</div>
                            <div v-else>{{info[item.fieldCode]}}</div>
                        </template>
                        <div v-else-if="item.fieldType == 3"></div>
                        <div v-else-if="item.fieldType == 4">{{info[item.fieldCode] | formatDate(item.fieldOperations.typeValue)}}</div>
                        <div v-else-if="item.fieldType == 5">{{info[item.fieldCode].join("至")}}</div>
                        <div v-else-if="item.fieldType == 7" class="img-box">
                            <div class="item-imgs" v-for="(img, index) in info[item.fieldCode]" :key="index + img.url"><a href=""><img :src="img.url"></a></div>
                        </div>
                    </template>
                </el-form-item>
            </template>
        </el-form>
        <div class="handle-form-btns t-ct m-b-60" v-if="showEdit">
            <el-button type="primary" @click="saveEdit">保存</el-button>
            <el-button @click="cancelEdit">取消</el-button>
        </div>
    </div>
</template>
<script>
import { formatDate, deepClone } from '@/utils/index';
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
let soan= `<span></span>`;
export default {
    name: "editableCell",
    props: {
        info: {
            type: Object,
            required: true
        },
        staticInfo: {
            type: Object,
            required: true
        },
        items: {
            type: Array,
            required: true
        },
        title: {
            type: String,
            default: ""
        },
        fieldList: {
            type: Array,
            required: true
        }
    },
    filters: {
        formatDate
    },
    data() {
        return {
            showEdit: false,
            uploadUrl: "/haoban-manage-web/upload-img"
        };
    },
    methods: {
        // 图片上传成功回掉，拿区返回的图片URL渲染预览图
        uploadOnSuccess(res, list) {
            res.file.url = res.res.result[0].qcloudImageUrl;
            list.push(res.file);
        },
        // 保存编辑
        saveEdit() {
            let ths = this;
            ths.$refs.cell_form.validate(valid => {
                // 表单验证
                if (valid) {
                    let newInfo = deepClone(ths.info);
                    let params = {};
                    let fieldList = ths.fieldList;
                    let defineObj = JSON.parse(ths.staticInfo.defineString);
                    let objToString = [];
                    fieldList.forEach(field => { // 将当前单元格的所有自定义字段抽离出来转化成json字符串
                        params[field.fieldCode] = newInfo[field.fieldCode];
                        // 字段类型0：单行输入框，1：多行输入框，2：单选框 3:多选框 4:日期 5:日期区间 6：数字输入框 7：图片上传
                        if (field.fieldType == 5) {
                            params[field.fieldCode] = newInfo[field.fieldCode].join(",");
                        }
                        if (field.fieldType == 7) {
                            let arr = [];
                            newInfo[field.fieldCode].forEach(img => {
                                arr.push(img.url);
                            });
                            params[field.fieldCode] = arr.join(",");
                        }
                        if (field.systemFlag != 1) {
                            objToString.push({fieldCode: field.fieldCode, fieldValue: newInfo[field.fieldCode]});
                            if (field.fieldType == 5) {
                                objToString.push({fieldCode: field.fieldCode, fieldValue: newInfo[field.fieldCode].join(",")});
                            }
                            if (field.fieldType == 7) {
                                let arr = [];
                                newInfo[field.fieldCode].forEach(img => {
                                    arr.push(img.url);
                                });
                                objToString.push({fieldCode: field.fieldCode, fieldValue: arr.join(",")});
                            }
                            delete params[field.fieldCode];
                        }
                    });
                    params["jsonString"] = JSON.stringify(objToString) == "[]" ? "" : JSON.stringify(objToString);
                    params["recordId"] = ths.$route.query.recordId;
                    ths.submitEdit(params);
                }
            });
        },
        submitEdit(params) {
            let ths = this;
            getRequest("/haoban-manage-web/record/save-record-detail", params)
            .then(res => {
                console.log(res, "submitEdit");
                if (res.data.errorCode == 1) {
                    ths.showEdit = false;
                    ths.$emit("subSuccess");
                } else {
                    ths.$message({
                        message: res.data.message
                    });
                }
            })
            .catch(e => {
                ths.$message({
                    message: e.message
                });
            });
        },
        cancelEdit() {
            this.$refs.cell_form.clearValidate(); // 清楚表单验证
            let nowObj = this.info;
            let oldObj = this.staticInfo;
            for (let key in nowObj) {
                nowObj[key] = oldObj[key];
            }
            this.showEdit = false;
        }
    },
    computed: {
        defineObj() {
            return JSON.parse(this.clerkInfo.defineString);
        },
        rules() {
            let ths = this;
            let obj = {};
            let fields = ths.fieldList;
            let onlyNum = (rule, value, callback) => {
                if (value) {
                    let reg = new RegExp("^[0-9]*$");;
                    if (!reg.test(value * 1)) {
                        return callback(new Error("请输入数字!"));
                    } else {
                        return callback();
                    }
                } else {
                    return callback();
                }
            };
            fields.forEach(field => {
                let arr = [];
                if (field.fieldType == 0 || field.fieldType == 1) {
                    if (!!field.minCount && field.maxCount) {
                        arr.push({
                            min: field.minCount,
                            message: "至少填写" + field.minCount + "个字符",
                            trigger: "change"
                        });
                    }
                    if (!field.minCount && !!field.maxCount) {
                        arr.push({
                            max: field.maxCount,
                            message: "至多填写" + field.maxCount + "个字符",
                            trigger: "change"
                        });
                    }
                    if (!!field.minCount && !!field.maxCount) {
                        arr.push({
                            min: field.minCount,
                            max: field.maxCount,
                            message: '长度在 ' + field.minCount +' 到 ' + field.maxCount + '个字符',
                            trigger: "change"
                        });
                    }
                }
                if (field.fieldType == 6) {
                    arr.push({validator: onlyNum, message: field.fieldName + '必须为数字', trigger: "change"});
                }
                obj[field.fieldCode] = arr;
            });
            return obj;
        }
    }
}
</script>
<style lang="scss">
.editable-cell-container {
    .title-div {
        width: 100%;
        display: flex;
        height: 16px;
        margin-bottom: 45px;
        .hurdle {
            flex: 1;
            height: 0;
            border-top: 1px solid #E4E7ED;
            margin: 8px 10px 0;
        }
        .a-href {
            font-size: 14px;
            margin-top: 1px;
        }
    }
    .info-form {
        margin-bottom: 50px;
        .item-width {
            width: 49%;
            .el-input, .el-textarea {
                width: 350px;
            }
            .img-box {
                display: flex;
                width: 360px;
                flex-wrap: wrap;
                .item-imgs {
                    display: inline-block;
                    vertical-align: middle;
                    margin-right: 8px;
                    margin-bottom: 8px;
                    width: 104px;
                    height: 104px;
                    box-sizing: border-box;
                    border: 1px solid #dcdfe6;
                    border-radius: 4px;
                    cursor: pointer;
                    a {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin: 8px;
                        height: 86px;
                        width: 86px;
                        -webkit-box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        box-sizing: border-box;
                        border-radius: 0;
                        img {
                            position: static;
                            display: block;
                            max-width: 86px;
                            max-height: 86px;
                        }
                    }
                }
            }
        }
    }
}
</style>

