<template>
  <div id="tableWrap">
    <div style="margin-bottom:20px">
      <a-row>
        <a-col :span="16">
          <a-steps :current="num">
            <a-step>
              <template slot="title">
                选择要变更状态的数据
              </template>
            </a-step>
            <a-step title="确定变更状态"/>
          </a-steps>
        </a-col>
      </a-row>
    </div>

    <div
      style="margin-top:20px"
      v-if="isHint"
    >
      <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1" tab="已启用">
          <div v-show="isSucceed" style="text-align: center;">
            <a-spin />
          </div>
          <a-table
            v-show="!isSucceed"
            :data-source="datas"
            :columns="journalDate"
            :scroll="{x: xscroll}"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :pagination="{
              'hideOnSinglePage':true,
              'onChange':onPageChange,
            }"
          >
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="2" tab="已停用" force-render>
          <div v-show="isSucceed" style="text-align: center;">
            <a-spin />
          </div>
          <a-table
            v-show="!isSucceed"
            :data-source="data"
            :columns="journalDate"
            :scroll="{x: xscroll}"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :pagination="{
              'hideOnSinglePage':true
            }"
          >
          </a-table>
        </a-tab-pane>
      </a-tabs>
      <div class="footer-btn">
        <a-button class="closeBtn" type="work" @click="onClose">
          取消
        </a-button>
        <a-button class="submitBtn" type="add" :disabled="!hasSelected" @click="onNext">
          下一步
        </a-button>
      </div>
    </div>
    <div
      style="margin-top:20px"
      v-if="!isHint">
      <div style="font-size:22px;color:red">
        共计 {{ changeStatus.length }} 条数据，需要更改为{{ statusKey==='1'?'停用':'启用' }}状态，如确定请提交审批
      </div>
      <div class="footer-btn">
        <a-button class="closeBtn" type="work" @click="onBack">
          上一步
        </a-button>
        <a-button class="submitBtn" type="add" @click="onSubmit">
          提交审批
        </a-button>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { getChangeableData, changeStatus } from '@/api/masterDataManger/changeMasterData'
export default {
  data() {
    return {
      selectedRowKeys: [], // Check here to configure the default column
      selectedRows: {},
      showdate: '',
      showStateChange: true,
      datas: [],
      data: [],
      changeStatus: [],
      statusKey: '1',
      num: 0,
      xscroll: 1300,
      isSucceed: true
    }
  },
 props: {
    tableData: {
      type: Array,
         default() {
            return []
      }
    },
    journalDate: {
      type: Array,
         default() {
            return []
      }
    },
    isHint: {
      type: Boolean,
      default() {
        return true
      }
    },
    modelId: {
      type: String,
      default() {
        return ''
      }
    },
    modelCode: {
      type: String,
      default() {
        return ''
      }
    }
  },
   computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    }
  },
  created() {
    this.$emit('changeShow', true)
    this.ChangeableData('0')
  },
  methods: {
    onPageChange(e) {
      const selectedRowKeys = []
      const selectedRows = []
      this.onSelectChange(selectedRowKeys, selectedRows)
      // console.log('清空啦！！！！！')
    },
    // 获取当前可变更数据接口
    ChangeableData(data) {
     var that = this
     if (data === '0') {
       that.isSucceed = true
        const formData = new FormData()
        formData.append('modelId', this.modelId)
        formData.append('status', data)
        getChangeableData(formData).then(res => {
          that.datas = res.data
          that.isSucceed = false
        })
     } else {
        that.isSucceed = true
        const formData = new FormData()
        formData.append('modelId', this.modelId)
        formData.append('status', data)
        getChangeableData(formData).then(res => {
          that.data = res.data
          that.isSucceed = false
        })
     }
    },
     callback(key) {
       this.onPageChange()
       this.statusKey = key
       if (key === '1') {
         this.ChangeableData('0')
       } else {
          this.ChangeableData('1')
       }
    },
    onClose() {
      this.showStateChange = false
      this.$emit('getShowStateChange', this.showStateChange)
    },
    onNext() {
      this.num = 1
      this.$emit('changeShow', false)
    },
    onBack() {
      this.num = 0
      this.$emit('changeShow', true)
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.changeStatus = selectedRows.map(Item => {
        return Item.record_id
      })
      // console.log('选中： ', selectedRowKeys, 'selectedRows: ', selectedRows)
    },
    onSubmit() {
      if (this.statusKey === '1') {
        const data = {
        modelId: this.modelId,
        status: '1',
        ids: this.changeStatus.toString()
      }
      changeStatus(data).then(res => {
        if (res.code === 200) {
          this.$notification.open({
            message: res.msg,
            icon: <a-icon type="smile" style="color: #108ee9" />
          })
          this.$emit('getChangeList')
          this.onClose()
        }
      })
      } else {
         const data = {
        modelId: this.modelId,
        status: '0',
        ids: this.changeStatus.toString()
      }
      changeStatus(data).then(res => {
        this.$emit('getChangeList')
        this.onClose()
      })
      }
      }
    },
    watch: {
      journalDate: {
        deep: true,
        immediate: true,
        handler(val) {
          const length = this.journalDate.length
          if (length > 9) {
            this.xscroll = this.journalDate.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>
