<template>
  <div class="userList">
    <div class="content">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>供应商管理</el-breadcrumb-item>
        <el-breadcrumb-item>待审批采购商</el-breadcrumb-item>
        <el-breadcrumb-item>{{ changetitle }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="flex changeindex">
        <div v-for="(item,index) in changelist" :key="index" :class="[changeindex==index?'active':'']" @click="change(index,item)">{{ item }}</div>
      </div>
      <dataTable v-show="changeindex==0" :table-data="itemList" :columns="columns" :page-obj="pageObj" :checklist="checklist">
        <el-table-column slot="operate" label="操作" align="center" fixed="right" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="approval(scope.row)">审批</el-button>
          </template>
        </el-table-column>
      </dataTable>
      <dataTable v-show="changeindex==1" :table-data="itemList" :columns="columns" :page-obj="pageObj" :checklist="checklist">
        <el-table-column slot="operate" label="操作" align="center" fixed="right" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="handleBack(scope.$index, scope.row)">撤销</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </dataTable>

    </div>
  </div>
</template>

<script>
import dataTable from '@components/dataTable.vue'
export default {
  name: 'powerList',
  components: {
    dataTable
  },
  data() {
    return {
      changeindex: '0',
      checklist: [{
        title: '单位名称',
        type: 'input',
        model: 'company',
        placeholder: '请输入'
      }],
      changetitle: '待审批',
      changelist: ['待审批', '已拒绝'],
      columns: [{
        label: '单位名称',
        prop: 'company'
      },
      {
        label: '行业类型',
        prop: 'name'
      },
      {     
        label: '管理员',
        prop: 'province'
      },

      {
        label: '申请时间',
        prop: 'date',
        sortable: true
      },
      {
        label: '类别',
        prop: 'type'
      },
      {
        slot: 'operate'
      }
      ],
      itemList: [{
        date: '2016-05-02',
        name: '制作业',
        province: '麻花图',
        company: '腾讯1',
        reason: '企业资质不够',
        type: '初次注册',
        person: '王五'
      }, {
        date: '2016-05-02',
        name: '制作业',
        province: '麻花图',
        company: '腾讯1',
        reason: '企业资质不够',
        type: '初次注册',
        person: '王五'
      }, {
        date: '2016-05-02',
        name: '制作业',
        province: '麻花图',
        company: '腾讯1',
        reason: '企业资质不够',
        type: '初次注册',
        person: '王五'
      }, {
        date: '2016-05-02',
        name: '制作业',
        province: '麻花图',
        company: '腾讯1',
        reason: '企业资质不够',
        type: '初次注册',
        person: '王五'
      }],
      pageObj: {
        size: 10,
        total: 1,
        currentPage: 1,
        sizes: [100, 200, 300],
        func: (currentPage) => {
          this.pageTurning(currentPage)
        }
      }
    }
  },
  methods: {
    handleClick(row) {
      console.log(row)
      this.$router.push('/admin/purchasers/userDetail')
    },
    // 删除状态列表
    change(index, item) {
      this.changeindex = index
      this.changetitle = item
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.$message.success('删除成功')
          this.itemList.splice(index, 1)
        })
        .catch(() => {})
    },
    // 撤销操作
    handleBack(index, row) {
      // 二次确认
      this.$confirm('确定要撤销吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.$message.success('撤销成功')
          this.itemList.splice(index, 1)
        })
        .catch(() => {})
    },
    approval() {
      this.$router.push('/admin/supply/isApproval')
    }
  }
}
</script>

<style scoped>
	.changeindex {
		margin-top: 10px;
		border-bottom: 1px solid #F0F2F5;
		margin-bottom: 10px;
	}

	.changeindex>div {
		width: 50px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		margin-right: 50px;
		z-index: 99
	}

	.changeindex>.active {
		color: #2288EE;
		border-bottom: 2px solid #2288EE;
	}
</style>
