<template>
    <div class="editable-cell-container">
        <div class="title-div">
            <span>{{title}}</span>
            <div class="hurdle"></div>
            <a class="a-href" @click="showEdit = !showEdit">编辑</a>
        </div>
        <el-form
            class="info-form"
            inline
            label-width="150px"
            v-model="info">
            <template v-for="(item, idx) in fieldList">
                <el-form-item :label="item.title+'：'" class="item-width" :key="item.fieldCode+'_'+idx">
                    <template v-if="!!item.systemFlag">
                        <template v-if="showEdit">
                            <el-input v-model="info[item.fieldCode]" v-if="item.fieldType == 0 || item.fieldType == 6"></el-input>
                            <el-input v-model="info[item.fieldCode]" v-else-if="item.fieldType == 1" type="textarea" autosize></el-input>
                            <el-select
                                v-else-if="item.fieldType == 2 || item.fieldType == 3"
                                :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-date-picker
                                :format="item.fieldOperations.typeValue"
                                value-format="timestamp"
                                v-else-if="item.fieldType == 4"
                                v-model="info[item.fieldCode]"
                                type="date"
                                :placeholder="item.fieldDescription">
                            </el-date-picker>
                            <el-date-picker
                                v-else-if="item.fieldType == 5"
                                v-model="info[item.fieldCode]"
                                type="daterange"
                                range-separator="至"
                                :format="item.fieldOperations.typeValue"
                                value-format="timestamp"
                                :start-placeholder="item.fieldOperations.startDescription"
                                :end-placeholder="item.fieldOperations.endDescription">
                            </el-date-picker>
                            <vue-gic-upload-image
                                v-else-if="item.fieldType == 7"
                                projectName="gic-web"
                                wxFlag="0"
                                :actionUrl="uploadUrl"
                                :imageList="(!!info[item.fieldCode] ? info[item.fieldCode].split(',') : [])"
                                :limitW="500"
                                :limitH="500"
                                :maxImageLength="5"
                                @uploadOnSuccess="uploadOnSuccess"
                                @sortImg="sortImg"
                                @deleteImage="deleteImage">
                            </vue-gic-upload-image>
                        </template>
                        <template v-else>
                            <div>{{info[item.fieldCode]}}</div>
                        </template>
                    </template>
                    <template v-else>
                        <el-input v-model="defineObj[item.fieldCode]" v-if="item.fieldType == 0 || item.fieldType == 6"></el-input>
                            <el-input v-model="defineObj[item.fieldCode]" v-else-if="item.fieldType == 1" type="textarea" autosize></el-input>
                            <el-select
                                v-else-if="item.fieldType == 2 || item.fieldType == 3"
                                :multiple="item.fieldType == 3"
                                :collapse-tags="item.fieldType == 3"
                                v-model="defineObj[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-date-picker
                                :format="item.fieldOperations.typeValue"
                                value-format="timestamp"
                                v-else-if="item.fieldType == 4"
                                v-model="defineObj[item.fieldCode]"
                                type="date"
                                :placeholder="item.fieldDescription">
                            </el-date-picker>
                            <el-date-picker
                                v-else-if="item.fieldType == 5"
                                v-model="defineObj[item.fieldCode]"
                                type="daterange"
                                range-separator="至"
                                :format="item.fieldOperations.typeValue"
                                value-format="timestamp"
                                :start-placeholder="item.fieldOperations.startDescription"
                                :end-placeholder="item.fieldOperations.endDescription">
                            </el-date-picker>
                            <vue-gic-upload-image
                                v-else-if="item.fieldType == 7"
                                projectName="gic-web"
                                wxFlag="0"
                                :actionUrl="uploadUrl"
                                :imageList="(!!defineObj[item.fieldCode] ? defineObj[item.fieldCode].split(',') : [])"
                                :limitW="500"
                                :limitH="500"
                                :maxImageLength="5"
                                @uploadOnSuccess="uploadOnSuccess"
                                @sortImg="sortImg"
                                @deleteImage="deleteImage">
                            </vue-gic-upload-image>
                        <div v-else>{{defineObj[item.fieldCode]}}</div>
                    </template>
                </el-form-item>
            </template>
        </el-form>
    </div>
</template>
<script>
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
let soan= `<span></span>`;
export default {
    name: "editableCell",
    props: {
        info: {
            type: Object,
            required: true
        },
        items: {
            type: Array,
            required: true
        },
        title: {
            type: String,
            default: ""
        },
        fieldList: {
            type: Array,
            required: true
        }
    },
    data() {
        let  local = window.location.origin;
        if (local.indexOf('localhost')!= -1) {
            local = 'http://www.gicdev.com';
        }
        return {
            showEdit: false,
            uploadUrl:  local + "/haoban-manage-web/upload-img"
        };
    },
    methods: {
        uploadOnSuccess() {},
        sortImg() {},
        deleteImage() {}
    },
    computed: {
        defineObj() {
            console.log(JSON.parse(this.info.defineString));
            return JSON.parse(this.info.defineString);
        }
    }
}
</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: 65px;
        .item-width {
            width: 49%;
            .el-input, .el-textarea {
                width: 350px;
            }
        }
    }
}
</style>

