<template>
  <!-- 新增 -->
  <div id="tableWrap">
    <div style="margin-bottom:20px">
      <a-row>
        <a-col :span="18">
          <a-steps :current="num">
            <a-step>
              <template slot="title">
                选择要变更的数据
              </template>
            </a-step>
            <a-step title="编辑具体数据内容"/>
          </a-steps>
        </a-col>
      </a-row>
    </div>
    <div v-if="isHint">
      <a-table
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'radio' }"
        :columns="columns"
        :data-source="data"
        :scroll="{x: xscroll}"
        :pagination="{
          'hideOnSinglePage':true
        }"
      />
      <div class="footer-btn">
        <a-button class="closeBtn" type="work" @click="onClose">
          取消
        </a-button>
        <a-button class="submitBtn" :disabled="!hasSelected" type="add" @click="onNext">
          下一步
        </a-button>
      </div>
    </div>

    <div v-if="!isHint">
      <Add
        :selectedRows="selectedRows"
        :changesFrom="changesFrom"
        :isBack="true"
        :changeType="changeType"
        @onBack="onBack"
        :dataTemplate="dataTemplate"
        :modelId="modelId"
        :modelCode="modelCode"
        @onClose="onClose"
        :recordId="recordId"
        @getChangeList="getChangeList"
      />
    </div>

  </div>

</template>

<script type="text/ecmascript-6">
import { getChangeableData } from '@/api/masterDataManger/changeMasterData'
import Add from '../../addingMasterData/components/add.vue'
export default {
  components: {
    Add
  },
  data() {
    return {
    selectedRowKeys: [], // Check here to configure the default column
    selectedRows: {},
    loading: false,
    data: [],
    changeType: 'change',
    Hint: Boolean,
    recordId: '',
    num: 0,
    xscroll: 1300
    }
  },
  props: {
    changesFrom: {
        type: Array,
        default() {
            return []
      }
    },
    columns: {
        type: Array,
        default() {
            return []
      }
    },
    dataTemplate: {
        type: Object,
        default() {
            return {}
      }
    },
    modelId: {
      type: String,
      default() {
        return ''
      }
    },
    modelCode: {
      type: String,
      default() {
        return ''
      }
    },
    isHint: {
      type: Boolean,
      default() {
        return true
      }
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    }
  },
  mounted() {
    // if (Object.keys(this.selectedRows).length !== 0) {
    //   this.uploading = true
    //   console.log('uploading: ', this.uploading)
    // }
  },
  created() {
    this.$emit('changeShow', true)
    this.ChangeableData()
  },
  methods: {
    // 获取当前可变更数据接口
    ChangeableData() {
        const formData = new FormData()
        formData.append('modelId', this.modelId)
        formData.append('status', '')
        getChangeableData(formData).then(res => {
          this.data = res.data
        })
    },
    onClose() {
      this.dateChange = false
      this.$emit('getDateChange', this.dateChange)
    },
    onSave() {
      this.dateChange = false
      this.$emit('getDateChange', this.dateChange)
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      console.log('%c [ selectedRows ]-150', 'font-size:13px; background:pink; color:#bf2c9f;', selectedRows)
      this.recordId = selectedRows[0].record_id
      console.log('%c [ this.recordId ]-152', 'font-size:13px; background:pink; color:#bf2c9f;', this.recordId)
       delete selectedRows[0].record_id
       delete selectedRows[0].data_status
      this.selectedRows = selectedRows[0]
      this.selectedRowKeys = selectedRowKeys
    },
    onNext() {
      this.num = 1
      this.$emit('changeShow', false)
    },
    onBack() {
        this.num = 0
      this.$emit('changeShow', true)
    },
    getChangeList() {
      this.$emit('getChangeList')
    }
  },
  watch: {
      columns: {
        deep: true,
        immediate: true,
        handler(val) {
          const length = this.columns.length
          if (length > 9) {
            this.xscroll = this.columns.length * 200
          }
        }
      }
    }
}
</script>

<style lang="less" scoped>
#tableWrap{
  box-sizing: border-box;
  padding: 25px 30px;
  .footer-btn{
    margin-top: 20px;
    text-align: center;
    .ant-btn{
      margin: 0 20px;
    }
  }

}
</style>
