<template>
  <div class="app-container calendar-list-container">
    <el-table :key='tableKey' :data="list" v-loading.body="listLoading"
              border fit highlight-current-row
              style="width: 100%">
      <el-table-column align="center" label="ID" width="65">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column  align="center" label="公司名称">
        <template slot-scope="scope">
          <span>{{scope.row.companyName}}</span>
        </template>
      </el-table-column>
      <el-table-column  align="center" label="申请人">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>

      <el-table-column  align="center" label="联系方式">
        <template slot-scope="scope">
          <span>{{scope.row.tel}}</span>
        </template>
      </el-table-column>
      <el-table-column width="180" align="center" label="购买数量">
        <template slot-scope="scope">
          <span>{{scope.row.count}}</span>
        </template>
      </el-table-column>
      <el-table-column width="180" align="center" label="状态">
        <template slot-scope="scope">
          <span>{{applyState[scope.row.state].label}}</span>
        </template>
      </el-table-column>
      <el-table-column width="180" align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{scope.row.createTime}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="150" fixed="right">
        <template slot-scope="scope">
          <el-button v-if="btn_buy && scope.row.state == 0" size="small" class="el-button el-button--text el-button--small" @click="handleBuy(scope.row)">认购</el-button>
          <el-button v-if="btn_cancel && scope.row.state == 0" size="small" class="el-button el-button--text el-button--small" style="color:red;" @click="handleCancel(scope.row)">放弃</el-button>
          <el-button v-if="btn_del" size="small" class="el-button el-button--text el-button--small" style="color:red;" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                     layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
  import {
    page,
    delObj,
    buyStock,
    cancelApply
  } from 'api/branchCompany/stockApply/index';
  import { mapGetters } from 'vuex';
  import rsCode from '../../../utils/rsCode';

  export default {
    name: 'branchCompanyStock',
    data() {
      return {
        form: {
          id: null,
          companyId: null,
          companyName: null,
          name: null,
          tel: null,
          count: null,
          state: null
        },
        rules: {
          // companyName: [
          //   {
          //     required: true,
          //     message: '请输入用户',
          //     trigger: 'blur'
          //   }
          // ],
        },
        applyState: {
          '-1': {
            key: -1,
            label: '放弃购买'
          },
          0: {
            key: 0,
            label: '申请中'
          },
          1: {
            key: 1,
            label: '确认购买'
          }
        },
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20
        },
        dialogFormVisible: false,
        dialogStatus: '',
        btn_del: true,
        btn_buy: true,
        btn_cancel: true,
        tableKey: 0
      }
    },
    created() {
      this.getList();
      this.btn_del = this.elements['branchCompany/stockApply:btn_delete'];
    },
    computed: {
      ...mapGetters([
        'elements'
      ]),
      provinceRegions() {
        return getSonRegionByCodes(1);
      },
      cityRegions() {
        if (!this.$utils.isInteger(this.form.addrProvince)) {
          return null;
        }
        return getSonRegionByCodes(this.form.addrProvince);
      }
    },
    methods: {
      handleBuy(row) {
        this.$confirm('此操作将确认购买, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            buyStock(row.id)
              .then(() => {
                this.$notify({
                  title: '成功',
                  message: '操作成功',
                  type: 'success',
                  duration: 2000
                });
                this.getList();
              });
          });
      },
      handleCancel(row) {
        this.$confirm('此操作将放弃购买, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            cancelApply(row.id)
              .then(() => {
                this.$notify({
                  title: '成功',
                  message: '操作成功',
                  type: 'success',
                  duration: 2000
                });
                this.getList();
              });
          });
      },
      handleDelete(row) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            delObj(row.id)
              .then(() => {
                this.$notify({
                  title: '成功',
                  message: '删除成功',
                  type: 'success',
                  duration: 2000
                });
                const index = this.list.indexOf(row);
                this.list.splice(index, 1);
              });
          });
      },
      getList() {
        this.listLoading = true;
        page(this.listQuery)
          .then(response => {
            this.list = response.data.list;
            this.total = response.data.total;
            this.listLoading = false;
          })
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      }
    }
  }
</script>
