<template>
    <div class="campusNavigationContainer">
        <div class="contentForm">
            <div class="contentFormTitle">
                <span>院区导航</span>
            </div>
            <div class="contentFormContent">
                <div class="senior-setup">
                    <el-form ref="proSetting" :model="setup"  label-width="120px">
                    <div class="senior-setup-item" v-for="(domain, index) in setup.setList" :key="domain.key">
                        <div class="sortIndex">{{index + 1}}、</div>
                        <div class="senior-setup-item-internal">
                        <div class="internal-form-item">
                            <el-form-item
                            label="上传照片"
                            :key="domain.key"
                            :prop="'setList.' + index + '.photo'"
                            :rules="{
                                required: true, message: '上传照片', trigger: ['blur','change']
                            }"
                            >
                            <upload-img-single v-model="domain.photo" />
                            <!-- <el-input v-model="domain.photo" type="textarea" :autosize="{ minRows: 2}"></el-input> -->
                            </el-form-item>            
                        </div>
                        <div class="internal-form-item">
                            <el-form-item
                            label="标题"
                            :key="domain.key"
                            :prop="'setList.' + index + '.title'"
                            :rules="{
                                required: true, message: '标题', trigger: ['blur','change']
                            }"
                            >
                            <el-input v-model="domain.title"></el-input>
                            </el-form-item> 
                        </div>
                        </div>
                        <div class="senior-setup-item-bottom">
                        <el-button size="small" icon="el-icon-document-copy" @click="toCopy(domain)">复制</el-button>
                        <el-button size="small" icon="el-icon-folder-delete" @click="toDelete(domain)">删除</el-button>
                        <el-button size="small" icon="el-icon-top" @click="toTop(setup.setList,index)">上移</el-button>
                        <el-button size="small" icon="el-icon-bottom" @click="toBottom(setup.setList,index)">下移</el-button>
                        </div>
                    </div>
                    </el-form>
                    <div class="senior-setup-button">
                        <el-button icon="el-icon-plus" @click="addDomain">添加</el-button>      
                    </div>
                </div>
            </div>
            <div class="confirm">
                <el-button class="button-width" type="primary" :loading="submitLoading" @click="beforeSubmit">更新信息
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
import UploadImgSingle from '@/components/imageUploadSingle/index';
import {debounce , uuid } from '@/utils/index';
import hospitalOverviewAPI from "@/api/hospitalOverview";
export default {
    name: 'campusNavigation',
    components: {UploadImgSingle},
    data() {
        return {
            submitLoading: false,
            title: '',
            colSize: 22,
            setup: {
                setList: []
            },
            originSetList: []
        };
    },
    mounted() {
        this.initData()
    },
    methods: {
    toDelete(item) {
      let index = this.setup.setList.indexOf(item)
      if (index !== -1) {
        this.setup.setList.splice(index, 1)
      }
    },
    addDomain() {
      this.setup.setList.push({
            photo: '', //上传照片
            title: '', //标题
            sortIndex: '', //序号
            key: uuid()
      });
    },
    toCopy(domain) {
      this.setup.setList.push({
            photo: domain.photo, //上传照片
            title: domain.title, //标题
            sortIndex: '', //序号
            key: uuid()
      });
    },
    toTop(arr, index) {
      let newArr = JSON.parse(JSON.stringify(arr));
      if (index > 0) {
        [newArr[index - 1], newArr[index]] = [newArr[index], newArr[index - 1]];
      }
      this.setup.setList = newArr;
    },
    toBottom(arr, index) {
      let newArr = JSON.parse(JSON.stringify(arr));
      if (index < newArr.length - 1) {
        [newArr[index], newArr[index + 1]] = [newArr[index + 1], newArr[index]];
      }
      this.setup.setList = newArr;
    },
    initData() {
        this.setup.setList = []
        hospitalOverviewAPI.getHospitalNavigationList({}).then(res => {
            if (res.code === 1000) {
                let data = res.data
                if(data && data.length) {
                    data.forEach(item => {
                        item.key = uuid()
                    });
                }
                this.originSetList = JSON.parse(JSON.stringify(data))
                this.setup.setList = JSON.parse(JSON.stringify(data))
                this.setup.setList.sort(function (a, b) {
                    return a.sortIndex - b.sortIndex;
                });
            } else {
                this.setup.setList = []
            }
        }).catch(err => {
            this.$message.error("获取数据失败，请重试")
        })
    },
    submitcontent() {
        let setListArray = [];
        this.setup.setList.forEach((e,index) => {
            let newItem = {
                id: e.id ? e.id : null,
                title: e.title,
                photo: e.photo,
                sortIndex: index + 1
            }
            setListArray.push(newItem)
        })
        this.originSetList.forEach(item => {
            if(!this.setup.setList.find(q => q.id && q.id === item.id)) {
                setListArray.push({
                    id: item.id,
                    status: "delete"
                })
            }
        })
        hospitalOverviewAPI.addOrUpdateHospitalNavigationList(setListArray).then(res => {
            if (res.code === 1000) {
                this.$message.success("更新信息成功！");
                this.submitLoading = false;
                this.initData()
            } else {
                this.$message.error("更新信息失败！");
                this.submitLoading = false;
            }
        }).catch(err => {
            console.error(err)
            this.$message.error("更新信息失败！");
            this.submitLoading = false
        })
    },
    beforeSubmit: debounce(function (){
        if (!(this.setup.setList && this.setup.setList.length)) {
            // this.$message.error('当前表单未设置');
            this.submitcontent()
        }else {
          this.$refs.proSetting.validate((valid) => {
            if (valid) {
                if (this.submitLoading) {
                    return
                }
                this.submitLoading = true;
                this.submitcontent()
            }
          })
        }
    },
        2000,
        true
    ),
    },
}
</script>

<style scoped lang="scss">
.campusNavigationContainer {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: left;
    /*添加css样式*/
    ::v-deep  input::-webkit-outer-spin-button,
    ::v-deep  input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    ::v-deep  input[type="number"] {
        -moz-appearance: textfield;
    }

    .contentForm {
        .contentFormTitle {
            font-size: $font-common-second-third;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .contentFormContent {
            .senior-setup {
                overflow: auto;
                margin: 0 auto;
                // width: 900px;
                background: #ffffff;
                margin-top: 10px;
                padding: 15px 20px;
            .senior-setup-item {
                width: 900px;
                min-height: 190px;
                background-color: $background-color-grey;
                padding: 20px 20px;
                box-sizing: border-box;
                position: relative;
                margin-bottom: 30px;
                .sortIndex {
                    position: absolute;
                    top: 8px;
                    left: 10px;
                    font-weight: bold;
                }
                .senior-setup-item-internal {
                    width: 860px;
                    min-height: 120px;
                    display: flex;
                    flex-wrap: wrap;
                .internal-form-item {
                    width: 430px;
                    min-height: 60px;
                }
                }
                .senior-setup-item-bottom {
                    display: flex;
                    justify-content: flex-end;
                }
            }
            .senior-setup-button {
                width: 900px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            }            
        }

        .confirm {
            width: 90%;
            margin-top: 60px;
            margin-bottom: 40px;
            text-align: left;
        }
    }
    .button-width {
        width: 120px;
    }
    ::v-deep  .w-e-text-container {
        height:  400px !important;
    }
}
</style>