<template>
  <div>
    <!--     查看预定信息对话框相关html元素  -->
    <el-dialog title="选择随行物品" v-loading.body="isLoadingShowed" element-loading-text="加载随行物品中"
               element-loading-spinner="el-icon-loading" :visible.sync="dialogVisible">
      <el-form :model="selected" :inline="true" ref="form4Selected" label-width="100px">
        <el-collapse v-model="activeTypes">
          <el-collapse-item v-for=" (val, key, index) in allAccItem " :title="getTypeName(key)" :name="key">
            <el-row :gutter="10">
              <el-col v-for=" item in val " :span="8" :style="{padding: '2px'}">
                <el-col :span="16" :style="{textAlign: 'center'}">
                  <span :style="{padding: '3px 10px', fontSize: '14px' ,display: 'inline-block'}">{{item.name}}</span>
                </el-col>
                <el-col :span="8">
                  <el-input v-model="selected[item.id]" clearable placeholder="数量" :disabled="readOnly"></el-input>
                </el-col>
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button v-if="!readOnly" @click="cancel()">取 消</el-button>
        <el-button v-if="!readOnly" @click="clear()">清 空</el-button>
        <el-button v-if="!readOnly" type="primary" @click="select()">确 定</el-button>
        <el-button v-if="readOnly" @click="clear()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  import {mapGetters} from 'vuex';

  export default {
    name: 'accItemSelector',
    props: ['selectedAccItem', 'isReadOnly'],
    data() {
      return {
        isLoadingShowed: true,
        dialogVisible: false,
        selected: {},
        readOnly: this.isReadOnly
      }
    },
    created() {
      this.$store.dispatch('loadAccItem').then(() => { // 读取随行物品列表
        this.isLoadingShowed = false;
      }).catch(() => {
        console.error('读取随行物品列表失败');
        this.isLoadingShowed = false;
      })
    },
    computed: {
      ...mapGetters([
        'allAccItem',
        'accompanyItemTypeAndCode',
        'allAccItemIdAndName'
      ]),
      activeTypes: {
        get: function () {
          let keys = [];
          for (let key in this.allAccItem) {
            keys = [...keys, key];
          }
          return keys;
        },
        set: function () {
          return;
        }
      }
    },
    methods: {
      select() {
        this.$emit('select', this.selected);
        this.dialogVisible = false;
      },
      clear() {
        this.selected = {};
        this.$emit('clear');
        this.dialogVisible = false;
      },
      show() {
        if (this.$utils.isUndefined(this.selectedAccItem)) {
          this.selected = {};
        } else {
          this.selected = this.selectedAccItem;
        }
        this.dialogVisible = true;
        this.readOnly = this.isReadOnly;
      },
      getTypeName: function (type) {
        if (this.$utils.isEmpty(this.accompanyItemTypeAndCode[type])) {
          return '未知';
        }
        return this.accompanyItemTypeAndCode[type].val;
      },
      getNameById: function (id) {
        if (this.$utils.isEmpty(this.allAccItemIdAndName) || this.$utils.isEmpty(this.allAccItemIdAndName[id])) {
          return '未知';
        }
        return this.allAccItemIdAndName[id];
      },
      cancel() {
        this.dialogVisible = false;
      }
    },
    watch: {
      selectedAccItem: function () {
        if (this.$utils.isUndefined(this.selectedAccItem)) {
          this.selected = {};
        } else {
          this.selected = this.selectedAccItem;
        }
      },
      isReadOnly: function () {
        this.readOnly = this.isReadOnly;
      }
    }
  }
</script>
