<!-- 列表的展开、收起 -->
<template>
  <div v-if="tableDatas[rowIndex][`${colProp}MoreFlag`]">
    <el-row v-for="(item, index) in tableDatas[rowIndex][`${colProp}BtnFlag`] ? tableDatas[rowIndex][colProp].slice(0, 2) : tableDatas[rowIndex][colProp]" :key="index">
      <span>{{item[valueProp]}}</span>
    </el-row>
    <i v-show="tableDatas[rowIndex][`${colProp}BtnFlag`]" @click="changeShow(rowIndex, tableDatas[rowIndex])" class="el-icon-arrow-down very_list"></i>
    <i v-show="!tableDatas[rowIndex][`${colProp}BtnFlag`]" @click="changeShow(rowIndex, tableDatas[rowIndex])" class="el-icon-arrow-up very_list"></i>
  </div>
  <div v-else>
    <el-row v-for="(item, index) in tableDatas[rowIndex][colProp]" :key="index">
      <span>{{item[valueProp]}}</span>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ExpandCollapse',
  props: {
    // 表格数据
    sourceData: {
      type: Array,
      required: true,
      default: function () {
        return null
      }
    },
    // 列字段
    colProp: {
      type: String,
      required: true,
      default: function () {
        return null
      }
    },
    // 值字段
    valueProp: {
      type: String,
      required: true,
      default: function () {
        return null
      }
    },
    // 列表数据的行index
    rowIndex: {
      type: Number,
      required: true,
      default: function () {
        return null
      }
    },
    definedFlag: {
      type: Boolean,
      default: function () {
        return true
      }
    }
  },
  data () {
    return {
    }
  },
  computed: {
    tableDatas: {
      get () {
        this.sourceData.forEach(it => {
          if (it[this.colProp] && it[this.colProp].length > 2) {
            this.$set(it, `${this.colProp}MoreFlag`, true)
            this.$set(it, `${this.colProp}BtnFlag`, true)
          } else {
            this.$set(it, `${this.colProp}MoreFlag`, false)
            this.$set(it, `${this.colProp}BtnFlag`, false)
          }
        })
        return this.sourceData
      }
    }
  },
  methods: {
    changeShow (index, row) {
      let $this = this
      if (row[`${$this.colProp}BtnFlag`]) {
        this.$set(this.tableDatas[index], `${$this.colProp}BtnFlag`, !row[`${$this.colProp}BtnFlag`])
      } else {
        this.$set(this.tableDatas[index], `${$this.colProp}BtnFlag`, !row[`${$this.colProp}BtnFlag`])
      }
    }
  }
}
</script>

<style scoped>

</style>
