<template>
  <div>
    <form-option :title="title" :style="kvStyle" :rightButton="rightButton">
        <div class="table">
            <template v-if="fixedLine">
                <div class="item" v-for="(item, index) in arr" :key="index">
                    <el-row :class="{'fixedLine': fixedLine}">
                        <div class="item-bg">
                            <el-col :span="3">
                                <div class="label" :class="item.first?'margin-row':''" style="height:100%;">
                                    {{ item.label }}
                                </div>
                            </el-col>
                            <el-col :span="21">
                                <div class="value" :class="item.first?'margin-row':''">
                                    <slot name="slotValue" :row="item">
                                        <template v-if="item.type == 'img'">
                                            <el-image style="width: 100px; height: 100px" :src="baseUrl+'/v2/api/file/'+url+'/open'" lazy :preview-src-list="getImgUrls(item.value)" v-for="url in item.value" :key="url"></el-image>
                                        </template>
                                        <template v-else>
                                            {{ item.value }}
                                        </template>
                                    </slot>
                                </div>
                            </el-col>
                        </div>
                    </el-row>
                </div>
            </template>
            <template v-else>
                <div class="item" v-for="(item, index) in arr" :key="index">
                    <el-row :class="{'fixedLine': fixedLine}">
                        <div v-for="(data, j) in item" :key="2*index+j" :class="data.row?'item-bg1':'item-bg'">
                            <el-col :span="data.row?3:6">
                                <div class="label" :class="data.first?'margin-row':''" style="height:100%;">
                                    {{ data.label }}
                                </div>
                            </el-col>
                            <el-col :span="18">
                                <div class="value" :class="data.first?'margin-row':''">
                                    <slot name="slotValue" :row="data">
                                        {{ data.value }}
                                    </slot>
                                </div>
                            </el-col>
                        </div>
                    </el-row>
                </div>
            </template>
            <div v-if="enforce_result" class="imgdiv">
                <img v-if="enforce_result === 'PASS'" src="../assets/pass.png">
                <img v-else-if="enforce_result === 'NOT_PASS' || enforce_result === 'NO-PASS'" src="../assets/nopass.png">
                <!--<img v-else-if="enforce_result === 'OVERPASS'" src="../assets/nopass.png">-->
                <div class="no-check" v-else-if="enforce_result === 'OVERPASS'">不检查</div>
            </div>
        </div>
    </form-option>
  </div>
</template>

<script>
import FormOption from './FormOption.vue'

export default {
    props: ['title', 'list', 'kvStyle', 'rightButton', 'enforce_result', 'fixedLine'],
    components: {
        FormOption
    },
  data() {
    return {
      baseUrl: process.env.VUE_APP_API,
    }
  },
    computed: {
        arr() {
            return this.fixedLine ? this.list : this.changeArr()
        },
      apiUrl() {
        if (process.env.NODE_ENV == 'development') {
          return 'http://183.66.101.90:10023/v2/api'
        }
        return process.env.VUE_APP_API + '/v2/api'
      }
    },
    methods: {
      getImgUrls(list) {
        if (!list) return []
        let res = []
        list.forEach(item => {
          res.push(this.apiUrl + '/file/' + item + '/open')
        })
        return res
      },
        changeArr() {
            const res = []
            if (this.list && this.list.length > 0) {
                let loc = 0;
                this.list.map((item, index) => {
                    if (item.length) {
                        res[index] = item
                    } else {
                        loc = Math.floor(index / 2);
                        if (item.row) {
                            loc = res.length;
                        }
                        if (!res[loc]) {
                            res[loc] = [];
                        }
                        res[loc].push(item);
                    }
                })
            }
            return res
        },
    },
  mounted () {
      console.log('this.enforce_result', this.enforce_result)
  }
}
</script>

<style lang="scss">
.item {
    .el-row {
        display: flex;
        border: 1px solid #E6E6E6;
        border-right: none;
        &.fixedLine {
            display: block;
        }
        .el-col-18 {
            height: 100%;
            display: flex;
            align-items: center;
            background-color: white;
        }
        .el-col-3 {
            height: 100%;
            vertical-align: middle;
            background-color: #F7F8FA;
        }
    }
}
</style>

<style lang="scss" scoped>
    .table {
        padding: 15px 20px;
        position: relative;
    }

    .item {
        display: flex;
        align-items: center;
        margin-top: -1px;

        .item-bg {
            background-color: #F7F8FA;
            flex: 1;
            display: flex;
            align-items: center;
            border-right: 1px solid #E6E6E6;
        }
        .item-bg1 {
            flex: 1;
            border-right: 1px solid #E6E6E6;
        }

        .label {
            // background-color: #F7F8FA;
            border-left: 1px solid #E6E6E6;
            padding: 10px;
            text-align: right;
        }

        .label:nth-child(1) {
            margin-left: -1px;
        }

        .value {
            background-color: #FFFFFF;
            // border: 1px solid #E6E6E6;
            padding: 10px;
            text-align: left;
            margin-left: -1px;
        }

        .margin-row {
            margin-top: 1px;
        }
    }

    .el-row {
        width: 100% !important;
    }

    .imgdiv {
        width: 130px;
        height: 130px;
        position: absolute;
        left: 70%;
        bottom: 30px;
        opacity: 0.5;
        border-radius: 50%;

        img {
            width: 130px;
            height: 130px;
        }
        .no-check {
            width: 116px;
            height: 116px;
            color: #0079FE;
            border: 6px solid #0079FE;
            border-radius: 50%;
            font-size: 32px;
            text-align: center;
            line-height: 116px;
            transform: rotate(-30deg);
        }
    }
</style>
