<template>
  <Dialog
    :is-dialog-exist="visible"
    :dialog-style="{
      '--dialog-width': '60%',
      '--dialog-height': '790px',
      '--title-height': '51px'
    }"
    @close-dialog="handleClose"
  >
    <template v-slot:title>
      <div class="title">
        <h3>选择功能</h3>
      </div>
      <div class="search">
        <input
          v-model="keywords"
          type="text"
          placeholder="搜索"
          @keyup.enter="handleSearch"
        />
        <i class="el-icon-search" @click="handleSearch" />
      </div>
    </template>

    <el-tabs v-model="activeTab" class="tabs">
      <el-tab-pane
        v-for="(item, index) in data"
        :key="index"
        :label="item.name"
        :name="item.cateTag"
      ></el-tab-pane>
    </el-tabs>

    <el-divider direction="horizontal" content-position="left"></el-divider>
    <div v-if="activeTab === 'app_outside_link'">
      <el-form
        ref="linkForm"
        :model="linkForm"
        label-width="100px"
        style="margin: 20px"
      >
        <el-form-item
          label="链接"
          prop="url"
          :rules="[{ required: true, message: '链接不能为空' }]"
        >
          <el-input
            v-model="linkForm.url"
            autocomplete="off"
            placeholder="如：http://www.aaa.com"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            size="default"
            @click="submitForm('linkForm')"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div v-else class="module-list">
      <div
        v-for="(item, index) in modules"
        :key="index"
        class="module-item"
        :style="{ background: colors[index % colors.length] }"
      >
        <div class="text">{{ item.name }}</div>
        <el-button class="btn" round @click="handleModuleChecked(item)">
          选取
        </el-button>
      </div>
    </div>
  </Dialog>
</template>

<script>
import Dialog from '../Dialog'
import { fetchModules } from '@/api/components/select-module'

export default {
  name: 'SelectModule',
  components: {
    Dialog
  },
  model: {
    prop: 'visible',
    event: 'click'
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      data: [],
      keywords: '',
      activeTab: '',
      modules: [],
      linkForm: { url: '' },
      colors: [
        'linear-gradient(135deg, #55F9A0 0%, #46D790 100%)',
        'linear-gradient(135deg, #FFBC71 0%, #FFA540 100%)',
        'linear-gradient(134deg, #FF6988 0%, #FF4A65 100%)',
        'linear-gradient(135deg, #D980FA 0%, #9980FA 100%)',
        'linear-gradient(135deg, #A29BFE 0%, #6C5CE7 100%)',
        'linear-gradient(134deg, #FF6988 0%, #FF4A65 100%)',
        'linear-gradient(135deg, #74B9FF 0%, #0984E3 100%)',
        'linear-gradient(135deg, #F1C40F 0%, #F39C12 100%)'
      ],

      moduleList: [
        {
          name: '首页模块',
          color: '#46D790',
          background: 'linear-gradient(135deg, #55F9A0 0%, #46D790 100%)',
          checked: false
        },
        {
          name: '商品详情',
          color: '#FFA540',
          background: 'linear-gradient(135deg, #FFBC71 0%, #FFA540 100%)',
          checked: false
        },
        {
          name: '精选',
          color: '#FF4A65',
          background: 'linear-gradient(134deg, #FF6988 0%, #FF4A65 100%)',
          checked: false
        },
        {
          name: '消息',
          color: '#9980FA',
          background: 'linear-gradient(135deg, #D980FA 0%, #9980FA 100%)',
          checked: false
        },
        {
          name: '扫一扫',
          color: '#6C5CE7',
          background: 'linear-gradient(135deg, #A29BFE 0%, #6C5CE7 100%)',
          checked: true
        }
      ],
      cacheModules: []
    }
  },
  watch: {
    activeTab: {
      immediate: true,
      handler(val, oldVal) {
        this.handleTabChange(val)
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      fetchModules({})
        .then(response => {
          const { data } = response
          if (data.length > 0) {
            this.activeTab = data[0].cateTag
          }
          this.data = data
        })
        .catch(error => {
          console.error(error)
        })
    },
    handleTabChange(value) {
      console.log(value)
      this.data.forEach(element => {
        if (element.cateTag === value) {
          this.modules = element.list
        }
      })
      // this.cacheModules = this.moduleList // 切换tab缓存数据
    },
    handleModuleChecked(item) {
      item.cateTag = this.activeTab
      item.skipName = item.name
      this.$emit('change', item)
    },
    handleSearch() {
      if (!this.keywords) {
        if (this.cacheModules.length) {
          this.moduleList = this.cacheModules
        }
        return
      }
      this.moduleList = this.moduleList.filter(
        val => val.name.indexOf(this.keywords) !== -1
      )
    },
    handleClose() {
      this.$emit('close')
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.activeTab === 'app_outside_link') {
            this.$emit('change', {
              name: '自定义外链',
              skipName: '自定义外链',
              skipIdentifier: 'pub.flutter.url',
              requiredLogin: '0',
              requiredTaobaoAuth: '0',
              url: this.linkForm.url
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .title-area {
  border: 0 !important;
  .title h3 {
    height: 32px;
    line-height: 32px;
    font-size: 22px;
    color: #3f3f3f;
    padding: 0 25px;
    font-size: 500;
  }
  .search input {
    border: 0;
    height: 32px;
    line-height: 32px;
    width: 160px;
    background: #f5f7fa;
    border-radius: 16px;
    padding: 0 20px;
    font-size: 16px;
    position: relative;
  }
  .search i {
    position: relative;
    right: 24px;
    cursor: pointer;
  }
}
::v-deep .tabs {
  margin: 0 42px;
  .el-tabs__nav-wrap::after {
    background-color: #fff;
  }
  .el-tabs__item {
    font-size: 16px;
    font-weight: 500;
  }
  .el-tabs__header {
    margin: 10px 0 0 0;
  }
}
.hr {
  width: 100%;
  height: 5px;
  background: #f5f7fa;
}
.module-list {
  margin: 20px;
  display: flex;
  // justify-content: space-evenly;
  flex-wrap: wrap;
  .module-item {
    width: 224px;
    height: 111px;
    border-radius: 5px;
    margin-bottom: 20px;
    margin-left: 10px;
    color: #fff;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    .text {
      margin-bottom: 10px;
    }
    .btn {
      background: transparent;
      width: 120px;
      border: 1px solid #ffffff;
      color: #fff;
    }
    .active {
      background: #fff;
    }
    .checked {
      font-size: 16px;
      margin-right: 5px;
      filter: drop-shadow(#3799ff 80px 0);
      transform: translateX(-80px);
    }
  }
  .module-item:last-child() {
    margin-bottom: 0;
  }
}
</style>
