<template>
  <el-dialog title="勾选导出列" :before-close="cancel" :visible.sync="dialogVisible" width="400px">
    <el-table
      :data="exportColumnList"
      v-bind="{
        height: '100%',
        style: 'width: 100%',
        border: true,
        headerCellClassName: 'headerRowColor',
        size: 'mini'
      }"
    >
      <el-table-column
        v-bind="{
          label: '显示',
          prop: '',
          width: '80px'
        }"
      >
        <template slot="header" slot-scope="scope">
          <div>
            <el-checkbox v-model="isExport"></el-checkbox>
            <span style="margin-left: 5px">导出</span>
          </div>
        </template>
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isExport"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        v-bind="{
          label: '列名',
          prop: ''
        }"
      >
        <template slot-scope="scope">
          <div>
            {{ scope.row.label }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="cancel">取 消</el-button>
      <el-button size="mini" type="primary" @click="determine">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    columnList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: false,
      isExport: true,
      exportColumnList: []
    }
  },
  watch: {
    columnList: {
      handler() {
        if (this.columnList && this.columnList.length) {
          this.exportColumnList = this.columnList.map(item => {
            return { ...item.exportField, isExport: true }
          })
          this.dialogVisible = true
        } else {
          this.exportColumnList = []
          this.dialogVisible = false
        }
      },
      deep: true
    },
    exportColumnList: {
      handler() {
        this.isExport = this.exportColumnList.every(item => item.isExport === true)
      },
      deep: true
    },
    isExport() {
      if (this.exportColumnList.every(item => item.isExport === true) !== this.isExport) {
        this.exportColumnList.map(item => {
          item.isExport = this.isExport
        })
      }
    }
  },
  methods: {
    cancel() {
      this.$emit('cancel')
    },
    determine() {
      this.$emit(
        'determine',
        this.exportColumnList.filter(item => item.isExport)
      )
    }
  }
}
</script>

<style lang="scss" scoped></style>
