<template>
  <div class='framework'>
    <el-dialog
        :visible.sync="isShowMixPickerFramework"
        width="390px"
        :show-close="false"
        :before-close="toggleMixPickerShow">
      <div class="main">

        <div class="container">
          <div class="left">
            <mix-picker
                :unitList.sync="unitList"
                :selectType="selectType"
                :selectWay="selectWay"
            ></mix-picker>
          </div>
          <template v-if="false">
            <div class="right">
              <ul class="unitList">
                <li v-for="item in selectPersonList">
                  <unit-item :unitData.sync="item"></unit-item>
                </li>
              </ul>
            </div>
            <div class="center"></div>
          </template>
        </div>
        <template v-if="isShowNotice">
          <el-alert
              title="请完成选择再提交!"
              type="warning">
          </el-alert>
        </template>
        <div class="buttonList">
          <div class="customBtn primary" @click="confirmSelect">确定</div>
          <div class="customBtn" @click="toggleMixPickerShow">取消</div>
        </div>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  //vuex
  import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
  //通信总线
  import Bus from 'common/js/bus.js'
  //公共混入
  import commonMixin from 'common/js/commonMixin'
  import mixPicker from './mixPicker'
  import unitItem from './unitItem'
  
  export default {
    name: "framework",
    mixins: [commonMixin],
    data() {
      return {
        isShowMixPickerFramework: false,
        personList: [],
        selectPersonList: [],
        isShowNotice: false,
      }
    },
    props: ['unitList', 'selectType', 'selectWay'],
    computed: {},
    watch: {},
    methods: {


      //================================

      toggleMixPickerShow() {
        this.isShowMixPickerFramework = !this.isShowMixPickerFramework
      },
      setEvent() {
        Bus.$on('personListModify', (payload) => {
          if (payload.type) {
            this.personList.push(payload.item)
          } else {
            if (this.personList.indexOf(payload.item) === -1) {
              console.log('等于-1')
              return
            }
            for (let i = 0; i < this.personList.length; i++) {
              if (this.personList[i]._id === payload.item._id) {
                this.personList.splice(i, 1)
              }
            }
          }
        })

        Bus.$on('addPersonSelect', (payload) => {
        })
      },
      confirmSelect() {
        if (!this.personList.length) {
          this.$message('请完成选择再提交!')
          this.isShowNotice = true
          return
        }
        this.$emit('confirmSelect', this.personList)
        this.toggleMixPickerShow()
      }
    },
    filters: {},
    components: {mixPicker, unitItem},
    activated() {
    },
    mounted() {
      this.setEvent()
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/css/config.styl"
  @import "./mixPicker.styl"
  .framework

    .main
      width 100%
      background-color #FFFFFF
      padding 20px 0

      .container
        //width 720px
        width 300px
        height 440px
        margin auto

        & > div
          height 100%

        .left, .right
          border 1px solid #DCDCDC
          border-radius 5px
          width 300px
          position relative

        .left
          float left

        .right
          float right

        .center
          overflow hidden

      .buttonList
        margin-top 20px
        text-align center
</style>