<template>
    <div class="related-qualifications">
        <div class="relatedItem" v-for="(item,index) in zizhiList" :key="index">
            <van-collapse
                v-model="item.activeNames">
                <van-collapse-item :title="item.title" name="1">
                    <van-uploader
                        v-model="item.fileList"
                        multiple
                        :after-read="(file) => afterRead(file,item, index)"
                        :before-delete="(file,detail) => beforeDelete(file,detail,item)"
                    />
                </van-collapse-item>
            </van-collapse>
        </div>
        <div class="buttonBox">
            <div @click="turnOff">关闭</div>
            <div @click="commit">保存</div>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant'
import { upload } from '@/service/api_upload'
import myBus from '@/pages/homeItems/myBus'
import constant from '@/common/js/constant'

export default {
    name: 'RelatedQualifications',
    data() {
        return {
            zizhiList: [
                {
                    title: '组织框架图：',
                    fileList: [
                    ],
                    activeNames: ['1'],
                    frameworkMap: '',
                    frameworkMapList: []
                },
                {
                    title: '安全风险四色分布图：',
                    fileList: [
                    ],
                    activeNames: ['1'],
                    frameworkMap: '',
                    frameworkMapList: []
                },
                {
                    title: '企业平面图：',
                    fileList: [
                    ],
                    activeNames: ['1'],
                    frameworkMap: '',
                    frameworkMapList: []
                },
                {
                    title: '车间岗位布置图：',
                    fileList: [
                    ],
                    activeNames: ['1'],
                    frameworkMap: '',
                    frameworkMapList: []
                },
                {
                    title: '消防疏散路线图：',
                    fileList: [
                    ],
                    activeNames: ['1'],
                    frameworkMap: '',
                    frameworkMapList: []
                },
                {
                    title: '生产工艺流程图及简介：',
                    fileList: [],
                    activeNames: ['1'],
                    frameworkMap: '',
                    frameworkMapList: []
                }
            ],
            zizhiObj: {
                frameworkMap: '',
                fourColorMap: '',
                workshopPositionMap: '',
                companyMap: '',
                fireEvacuationRouteMap: '',
                productionProcessFlowMap: ''
            },
            fileIdList2: [],
            imageList: {}
        }
    },
    mounted() {
        this.getImage()
    },
    methods: {
        // 回显
        getImage() {
            this.imageList = JSON.parse(this.$route.query.imageList)
            console.log('img', this.imageList)
            this.zizhiList.forEach(item => {
                if (item.title === '组织框架图：') {
                    item.frameworkMap = this.imageList.frameworkMap
                    item.frameworkMapList = this.imageList.frameworkMap ? this.imageList.frameworkMap.split(',') : []
                    if (item.frameworkMapList && item.frameworkMapList.length > 0) {
                        item.frameworkMapList.forEach(e => {
                            item.fileList.push(
                                JSON.parse(
                                    '{"url":"' +
                                constant.BASE_URI +
                                '/wx/fileController/download/' +
                                e +
                                '","isImage": true}'
                                )
                            )
                        })
                    }
                }
                if (item.title === '安全风险四色分布图：') {
                    item.frameworkMap = this.imageList.fourColorMap
                    item.frameworkMapList = this.imageList.fourColorMap ? this.imageList.fourColorMap.split(',') : []
                    if (item.frameworkMapList && item.frameworkMapList.length > 0) {
                        item.frameworkMapList.forEach(e => {
                            item.fileList.push(
                                JSON.parse(
                                    '{"url":"' +
                                    constant.BASE_URI +
                                    '/wx/fileController/download/' +
                                    e +
                                    '","isImage": true}'
                                )
                            )
                        })
                    }
                }
                if (item.title === '企业平面图：') {
                    item.frameworkMap = this.imageList.companyMap
                    item.frameworkMapList = this.imageList.companyMap ? this.imageList.companyMap.split(',') : []
                    if (item.frameworkMapList && item.frameworkMapList.length > 0) {
                        item.frameworkMapList.forEach(e => {
                            item.fileList.push(
                                JSON.parse(
                                    '{"url":"' +
                                    constant.BASE_URI +
                                    '/wx/fileController/download/' +
                                    e +
                                    '","isImage": true}'
                                )
                            )
                        })
                    }
                }
                if (item.title === '车间岗位布置图：') {
                    item.frameworkMap = this.imageList.workshopPositionMap
                    item.frameworkMapList = this.imageList.workshopPositionMap ? this.imageList.workshopPositionMap.split(',') : []
                    if (item.frameworkMapList && item.frameworkMapList.length > 0) {
                        item.frameworkMapList.forEach(e => {
                            item.fileList.push(
                                JSON.parse(
                                    '{"url":"' +
                                    constant.BASE_URI +
                                    '/wx/fileController/download/' +
                                    e +
                                    '","isImage": true}'
                                )
                            )
                        })
                    }
                }
                if (item.title === '消防疏散路线图：') {
                    item.frameworkMap = this.imageList.fireEvacuationRouteMap
                    item.frameworkMapList = this.imageList.fireEvacuationRouteMap ? this.imageList.fireEvacuationRouteMap.split(',') : []
                    if (item.frameworkMapList && item.frameworkMapList.length > 0) {
                        item.frameworkMapList.forEach(e => {
                            item.fileList.push(
                                JSON.parse(
                                    '{"url":"' +
                                    constant.BASE_URI +
                                    '/wx/fileController/download/' +
                                    e +
                                    '","isImage": true}'
                                )
                            )
                        })
                    }
                }
                if (item.title === '生产工艺流程图及简介：') {
                    item.frameworkMap = this.imageList.productionProcessFlowMap
                    item.frameworkMapList = this.imageList.productionProcessFlowMap ? this.imageList.productionProcessFlowMap.split(',') : []
                    if (item.frameworkMapList && item.frameworkMapList.length > 0) {
                        item.frameworkMapList.forEach(e => {
                            item.fileList.push(
                                JSON.parse(
                                    '{"url":"' +
                                    constant.BASE_URI +
                                    '/wx/fileController/download/' +
                                    e +
                                    '","isImage": true}'
                                )
                            )
                        })
                    }
                }
            })
        },
        afterRead(file, item, index) {
            Toast.loading({
                message: '上传中...',
                forbidClick: true,
                duration: 0
            })
            if (file instanceof Array) {
                file.map(v => {
                    this.uploadImg2(v, item)
                })
            } else {
                this.uploadImg2(file, item)
            }
        },
        beforeDelete(file, detail, item) {
            // name.index代表图片的索引
            item.frameworkMapList.splice(detail.index, 1)
            console.log(detail)
            item.frameworkMap = item.frameworkMapList.toString()
            // console.log(vm.company.ryxxzp)
            return (file, name) => {
                const fileIndex = name.index
                item.frameworkMapList[detail.index].splice(fileIndex, 1)
            }
        },
        uploadImg2(file, item) {
            const formParam = new FormData() // 创建form对象
            formParam.append('file', file.file) // 通过append向form对象添加数据
            const config = {
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'MVVM-Key': String(new Date().getTime()),
                    xx: 'anything'
                } // 这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值
            } // 添加请求头
            return new Promise((resolve, reject) => {
                // axios.post('http://121.228.7.226:9001/wx/fileController/upload', formParam, config)
                upload(formParam, config)
                    .then(response => {
                        console.log('1', response)
                        console.log('2', item.fileList)
                        if (response.data.length) {
                            response.data.forEach(element => {
                                console.log('3', element)
                                item.frameworkMapList.push(element)
                            })
                        }
                        item.frameworkMap = item.frameworkMapList.toString()
                        Toast.clear()
                    }).catch((err, x) => {
                        reject(err, x)
                    })
            })
        },
        turnOff() {
            this.$router.push({ path: '/enterpriseInformation', query: { related: JSON.stringify(this.zizhiList) }})
        },
        commit() {
            this.zizhiList.forEach(item => {
                if (item.title === '组织框架图：') {
                    this.zizhiObj.frameworkMap = item.frameworkMap
                }
                if (item.title === '安全风险四色分布图：') {
                    this.zizhiObj.fourColorMap = item.frameworkMap
                }
                if (item.title === '企业平面图：') {
                    this.zizhiObj.companyMap = item.frameworkMap
                }
                if (item.title === '车间岗位布置图：') {
                    this.zizhiObj.workshopPositionMap = item.frameworkMap
                }
                if (item.title === '消防疏散路线图：') {
                    this.zizhiObj.fireEvacuationRouteMap = item.frameworkMap
                }
                if (item.title === '生产工艺流程图及简介：') {
                    this.zizhiObj.productionProcessFlowMap = item.frameworkMap
                }
            })
            this.$router.push({ path: '/enterpriseInformation', query: { related: JSON.stringify(this.zizhiList) }})
            Toast('保存成功')
        }
    }
}
</script>

<style lang="scss">
  .related-qualifications{
      padding:2vw 5vw;
      .relatedItem{
          display: flex;
          flex-direction: column;
          padding: 3vw 4vw;
          background: white;
          border-radius: 10px;
          margin: 3vw 0;
          .relatedItemTit{
              color: rgba(51, 51, 51, 1);
              margin: 0 0 2vw 0;
          }
      }
      .buttonBox{
          display: flex;
          justify-content: space-around;
          margin: 5vw 0;
          div{
              width: 40vw;
              height:12vw;
              display: flex;
              align-items: center;
              justify-content: center;
              background:rgba(29, 24, 188, 1) ;
              border-radius: 8px;
              color: white;
          }
      }
  }
</style>
