<template>
  <view class="content">
    <view class="uni-list">
      <view class="uni-list-cell">
        <view class="uni-list-cell-left">
          车间：
        </view>
        <view class="uni-list-cell-db">
          <picker @change="bindPickerChange" :value="index" :range="unitRange">
            <view class="uni-input">{{unitRange[index]}}</view>
          </picker>
        </view>
      </view>
    </view>
    <uni-section title="自定义列数" type="line" padding>
      <uni-grid :column="3" :highlight="true" @change="change">
        <uni-grid-item v-for="(item, index) in 9" :index="index" :key="index">
          <view class="grid-item-box" style="background-color: #fff;">
            <uni-icons type="image" :size="30" color="#777" />
            <text class="text">{{username}}</text>
            <text class="text">{{age}}</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </uni-section>
    <button type="default" @click="addAge">add</button>
  </view>
</template>

<script>
  import store from '@/store/index.js'
  import { mapState, mapMutations } from 'vuex'

  export default {
    data() {
      return {
        unitRange: ['IOT', 'SMART', '光源板厂', '自动化中心'],
        index: 0
      }
    },
    onLoad() {

    },
    methods: {
      ...mapMutations(['addAge']),
      bindPickerChange: function(e) {
        this.index = e.detail.value
      }
    },
    computed: {
      ...mapState({
        username: state => state.homeModule.username,
        age: state => state.homeModule.age
      })
    }
  }
</script>

<style>
  .uni-list-cell-left {
    font-weight: bold;
  }
  .uni-list {
    padding: 10px;
  }
  .uni-list-cell {
    display: flex;
    flex-direction: row;
  }
  .uni-input {
    color: #f00;
  }
  .grid-item-box {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
  }

  .grid-item-box-row {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
  }
</style>
