<template>
  <Dialog
    :is-dialog-exist="createModuleDialog"
    title="添加新模板"
    :dialog-style="{
      '--dialog-width': '738px',
      '--dialog-height': '641px',
      '--title-height': '51px',
      '--footer-height': '60px'
    }"
    @close-dialog="handleClose"
  >
    <div>
      <el-container class="create-module">
        <el-main>
          <div class="inner">
            <el-form ref="layoutForm" :model="layoutForm" label-position="top">
              <el-form-item
                v-for="(item, index) in modeList"
                :key="index"
                label="活动性质"
                class="else-style"
                prop="type"
              >
                <div slot="label" class="filter-label-wrap">
                  <div>
                    <VerticalLine
                      bg-color="#1890FF"
                      line-height="14px"
                      line-width="4px"
                      fix-top="-1px"
                    ></VerticalLine
                    >{{ item.name }}
                  </div>
                </div>
                <div class="img-checked">
                  <div
                    v-for="(checkItem, idx) in item.list"
                    :key="idx"
                    class="img-wrap"
                  >
                    <div class="el-checkbox-group">
                      <el-checkbox
                        :key="checkItem.type"
                        fill
                        border
                        :label="checkItem.type"
                        name="type"
                        @change="val => imgCheckChange(idx, item, val)"
                      >
                        <div class="img-wrap">
                          <img
                            :src="
                              '/pic/custom-center/modules/' +
                                checkItem.type +
                                '.png'
                            "
                            alt=""
                          />

                          <p class="text">
                            {{ checkItem.name }}
                          </p>
                        </div>
                      </el-checkbox>
                    </div>
                  </div>
                </div>
              </el-form-item>

              <el-form-item> </el-form-item>
            </el-form>
          </div>
        </el-main>
      </el-container>
    </div>
    <div slot="footer" class="footer">
      <el-button type="primary" @click="submitForm('layoutForm')"
        >确定</el-button
      >
      <el-button @click="resetForm('layoutForm')">取消</el-button>
    </div>
  </Dialog>
</template>

<script>
/**
 * @author: 过飞
 * @createData: 2020年08月31日 13:56:50
 * @version：v1.0
 *
 * @desc: 选择图形单选,提交布局信息.
 */
// import RadioImg from '@/components/RadioImg/RadioImg'
import VerticalLine from '@/components/VerticalLine/VerticalLine'

import Dialog from '@/components/Dialog'
export default {
  name: 'CreateModule',

  components: {
    // RadioImg
    VerticalLine,
    Dialog
  },

  mixins: [],

  props: {
    createModuleDialog: {
      type: Boolean,
      default: false
    },
    modeList: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      filterName: '',
      layoutForm: {
        searchBar: []
      },
      // 记录选中模块
      selectedItem: []
    }
  },

  computed: {},

  watch: {
    createModuleDialog: function(nVal, oVal) {
      if (nVal === true) {
        this.selectedItem = []
      }
    }
  },

  created() {},

  mounted() {},

  methods: {
    submitForm(formName) {
      this.$emit('submit', this.selectedItem)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    imgCheckChange(idx, item, val) {
      const checkItem = item.list[idx]
      if (val) {
        this.selectedItem[checkItem.type] = {
          idx,
          item
        }
      } else {
        delete this.selectedItem[checkItem.type]
      }
    },
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss" scoped>
.create-module {
  // height: 100%;
  .form-btn-wrap {
    // display: flex;
    // position: absolute;
    // bottom: 0;
    // left: 0;
    // right: 0;
    margin: auto;
    justify-content: center;
    background-color: #ffffff;

    box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.04);
    border-top: 1px solid #f8f8f8;
    padding: 10px 0;
  }
  .else-style {
    &::v-deep .el-form-item__label {
      display: block;
    }
  }
  .inner {
    // height: 100%;
    .filter-key {
      // display: flex;
      // position: relative;
      // justify-content: flex-end;
      .filter-inner {
        // position: absolute;
        top: 4px;
        right: 0;
        z-index: 10;
      }
    }

    .img-checked {
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;

      .img-wrap {
        & > img {
          width: 265px;
        }
        & > .text {
          text-align: center;
          margin: 14px;
        }
      }

      &::v-deep .el-checkbox {
        position: relative;
        height: auto;
        width: auto;
        padding: 0;
        margin: 0 40px 25px 0;
        &:nth-child(3) {
          margin-right: 0;
        }
      }
      &::v-deep .el-checkbox__input {
        position: absolute;
        top: 0;
        right: 0;
      }
      &::v-deep .el-checkbox__inner {
        border-color: transparent;
        background-color: transparent;
      }
      &::v-deep .is-checked > .el-checkbox__inner {
        background-color: #1890ff;
      }
      &::v-deep .el-checkbox__label {
        padding-left: 0;
      }
    }
  }
}

.footer {
  box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.04);
  padding: 12px;
  justify-content: center;
  align-content: center;
  text-align: center;
}
</style>
