<template>
  <div id="index-right">
    <div class="collapse-box">
      <a-collapse
        accordion
        v-model="activeKey"
        expandIconPosition="right"
      >
        <a-collapse-panel
          v-for="(item, index) in collapseData"
          :key="(index+1).toString()"
          :header="item.title"
        >
          <button class="enter-btn" slot="extra" type="setting" @click="enterHandleClick">
            进入
          </button>
          <div
            class="box"
            v-for="(i, k) in item.children"
            :key="k"
            @click="goPath( item.value, i.id,i.modelName,i.modelCode)"
          >
            <div class="img"></div>
            <div>
              <h2>{{ i.modelName }}</h2>
              <p>{{ i.modelCode }}</p>
            </div>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </div>

  </div>

</template>

<script type="text/ecmascript-6">
import Title from './Title'

import { getList } from '@/api/index/index'
// var path = ''

export default {
  components: {
    Title
  },
  data() {
    return {
      activeKey: [],
      collapseData: [
        { title: '主数据查询', value: 'search' },
        { title: '主数据新增', value: 'adding' },
        { title: '主数据变更', value: 'change' },
        { title: '主数据审批', value: 'audit' }
      ]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {

    getList() {
			const { collapseData } = this
      getList().then((res) => {
        if (res.code === 200) {
          const resRows = res.rows.splice(0, 8)
          collapseData.forEach((item) => {
            item.children = resRows
          })
					this.$set(this.$data, 'collapseData', collapseData)
					setImmediate(() => { this.activeKey = ['1'] })
        }
      })
    },
		goPath(value, id, modelName, modelCode) {
			var path = ''
			switch (value) {
				case 'search':
					path = '/masterDataManger/searchMasterData/'
				break
				case 'change':
					path = '/masterDataManger/changeMasterData/'
				break
				case 'audit':
					path = '/masterDataManger/auditMasterData/'
				break
				case 'adding':
					path = '/masterDataManger/addingMasterData/'
				break
			}
			this.$router.push({
				path: path,
				query: {
					id,
					modelName,
					modelCode
				}
			})
      console.log('id, modelName, modelCode: ', id, modelName, modelCode)
		},

    enterHandleClick() {
			this.$router.push({
				path: '/modelView/modelView/'
			})
      // event.stopPropagation()
    },
    activeKeyChange(key) {
      console.log(key)
    }
  }
}
</script>

<style lang='less' >
#index-right {
  .collapse-box {
    padding: 0 20px 25px;
    .ant-collapse {
      border: none;
      .ant-collapse-item {
        border-bottom: none;
        .ant-collapse-header {
          width: 100%;
          height: 50px;
          line-height: 48px;
          padding: 0 0 0 12px;
          box-shadow: 0px 1px 15px 0px#ebf0f7;
          border: solid 1px #e9eefd;
          font-size: 16px;
          color: #333333;
          .ant-collapse-extra {
            float: right;
            margin-right: 48px;

            .enter-btn {
              width: 60px;
              height: 22px;
              line-height: 20px;
              border-radius: 11px;
              background: #fff;
              position: relative;
              z-index: 10;
              border: solid 1px #2e6ef1;
              font-size: 14px;
              color: #2e6ef1;
              cursor: pointer;
            }
          }
        }
      }
      .ant-collapse-item-active {
        .ant-collapse-header {
          color: #4781f8;
          font-weight: bold;
          border: solid 1px rgba(17, 129, 248, 0.7);
          border-radius: 2px;
        }
      }
    }
    .ant-collapse-content {
      overflow: auto;
      color: rgba(0, 0, 0, 0.65);
      background: #fff;
      border-top: none;
      position: relative;

      .ant-collapse-content-box {
        padding: 20px 0;
        display: grid;
        justify-items: stretch;
        justify-content: space-between;
        grid-template-columns: 2fr 2fr;
        grid-gap: 15px 15px;
      }

      .box {
        width: 100%;
        height: 100px;
        background: #ffffff;
        box-shadow: 0px 1px 8px 0px #ebf0f7;
        border-radius: 3px;
        display: flex;
        align-items: center;
        padding-left: 20px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
				.img {
					position: absolute;
					bottom: -3px;
					right: 10px;
					width: 35px;
					height: 42px;
					background: url('../../assets/images/index/icon.png') no-repeat center bottom;
					background-size: 100% auto;
				}
				div{
					width: 100%;

					h2 {
						font-family: MicrosoftYaHei-Bold;
						font-size: 16px;
						color: #333333;
						width: 80%;
						overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap;
					}
					p {
						font-family: MicrosoftYaHei;
						font-size: 14px;
						line-height: 22px;
						color: #333333;
						opacity: 0.7;
						margin: 0;
					}
				}

      }
    }
  }
}
</style>
