<template>
  <div class="management-container-component">
    <Table :data="dataList.records" style="width: 100%" border>
      <table-column prop="name" label="店铺名称" />
      <table-column prop="code" label="店铺编码" />
      <table-column prop="posType.desc" label="店铺类型" width="180" />
      <table-column prop="duty" label="负责人" width="180" />
      <table-column prop="contactTel" label="联系电话" width="180" />
      <table-column label="合同状态" width="180">
        <template slot-scope="scope">
          {{ scope.row.status.code | state }}
        </template>
      </table-column>
      <table-column prop="createTime" label="创建时间" width="180" />
      <table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native.prevent="checkRow(scope.row, true)"
          >
            查看
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="checkRow(scope.row, false)"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="prohibit(scope.row)"
          >
            {{ scope.row.status.code | prohibitTips }}
          </el-button>
        </template>
      </table-column>
    </Table>
    <pagination
      v-show="dataList.total > 0"
      :limit.sync="form.size"
      :page.sync="form.current"
      :total="Number(dataList.total)"
      @pagination="fetch"
    />
    <Dialog
      :center="true"
      :title="checkData.check ?'查看商家': '修改商家'"
      :visible.sync="checkVisible"
      :fullscreen="!true"
      :before-close="closeCheckDialog"
      class="check-dialog"
      width="55%"
    >
      <checkDialog v-if="checkVisible" :data-map="checkData" @close="closeCheckDialog" />
    </Dialog>
  </div>
</template>
<script>
import Management from '@/api/Management.js'
import { Table, TableColumn, Dialog } from 'element-ui'
import Pagination from '@/components/Pagination'
import checkDialog from '@/components/Management/checkDialog'
export default {
  components: { Table, TableColumn, Dialog, checkDialog, Pagination },
  filters: {
    state(code) {
      const stateMap = {
        NORMAL: '有效',
        FORBIDDEN: '无效'
      }
      return stateMap[code]
    },
    prohibitTips(code) {
      const stateMap = {
        NORMAL: '禁用',
        FORBIDDEN: '启用'
      }
      return stateMap[code]
    }
  },
  props: {
    dataList: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      checkVisible: false,
      checkData: {
        status: {}
      },
      form: {
        current: 1,
        size: 10
      }
    }
  },
  methods: {
    fetch() {
      this.$emit('fetch', this.form)
    },
    checkRow(item, v) {
      item.check = v
      this.checkVisible = true
      this.checkData = item
      console.log(this.checkData, 11)
    },
    closeCheckDialog() {
      this.checkVisible = false
      this.checkData = {}
    },
    prohibit(item) {
      const code = item.status.code
      const stateMap = {
        NORMAL: '禁用',
        FORBIDDEN: '启用'
      }
      console.log((item))
      this.$confirm(`是否${stateMap[code]}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.prohibitPut(item)
      })
    },
    async prohibitPut(item) {
      const code = item.status.code
      const id = item.id
      const stateMap = {
        NORMAL: '禁用',
        FORBIDDEN: '启用'
      }
      const prohibitMap = {
        NORMAL: 'FORBIDDEN',
        FORBIDDEN: 'NORMAL'
      }
      const res = await Management.editTenant({
        id,
        status: {
          code: prohibitMap[code]
        }
      })
      const resData = res.data
      if (resData.code === 0) {
        item.status.code = prohibitMap[code]
        this.$message({
          type: 'success',
          message: `${stateMap[code]}成功!`
        })
      } else {
        this.$message({
          type: 'error',
          message: `${stateMap[code]}失败!`
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.management-container-component {
  padding: 0 20px;
}

/deep/ .el-table {
  th {
      background: #EEF3FF;
      color:#333333;
      font-size:16px;
      font-weight: 400;
      border-color: #E0E5EB;
      text-align: center;
  }
  td {
    font-size: 14px;
    text-align: center;
    color: #666666;
  }

  .cell {
      text-align: center;
      white-space: pre-line;/*保留换行符*/
  }
}
</style>
