/*资源管理*/
<template>
  <div class="resource">
    <div class="header">
      <span>当前资源情况 {{ useResCount }}/{{ totalResCount }}</span>
    </div>
    <el-table
      ref="table"
      v-loading="loading"
      stripe
      size="small"
      height="80%"
      :data="listData"
      element-loading-text="拼命加载中"
      :row-class-name="tableRowClassName"
      @sort-change="sortChange"
    >
      <el-table-column
        v-for="(header, index) in headerData"
        :key="index"
        align="center"
        :prop="header.prop"
        :label="header.label"
        :sortable="header.sortable"
        :width="header.prop == 'index' ? 60 : ''"
      >
        <template slot-scope="scope">
          <span
            v-if="header.prop == 'operation'"
            slot="content"
            class="operation"
            @click="viewResource(scope.row['resId'])"
            >查看资源</span
          >
          <span
            v-else-if="header.prop == 'type'"
            slot="content"
            :title="getType(scope.row[header.prop])"
            >{{ getType(scope.row[header.prop]) }}</span
          >
          <span
            v-else-if="header.prop == 'state'"
            slot="content"
            :title="getState(scope.row[header.prop])"
            >{{ getState(scope.row[header.prop]) }}</span
          >
          <span
            v-else-if="header.prop == 'starttime'||header.prop == 'endtime'"
            slot="content"
            :title="formatTime(scope.row[header.prop])"
            >{{ formatTime(scope.row[header.prop]) }}</span
          >

          <span v-else slot="content" :title="scope.row[header.prop]">{{
            scope.row[header.prop]
          }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination
        :pagination-config="paginationConfig"
        @putPagination="getPagination"
      ></Pagination>
      <!-- <el-button
        v-if="userType != 2"
        type="danger"
        size="mini"
        plain
        round
        @click.native.prevent="getResource"
        >购买资源</el-button 
      > -->
    </div>

    <ViewResource :view-config="viewConfig" @putView="getView" />
    <BuyResource :buy-config="buyConfig" @putBuy="getBuy" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import ViewResource from './components/ViewResource'
import BuyResource from './components/BuyResource'
import { formatType, formatStatus,parseTime } from '@/utils/index'
import { request } from '@/utils/request'
export default {
  name: 'Resource',
  components: { Pagination, ViewResource, BuyResource },
  data() {
    return {
      userType: this.$store.getters.userType || 0, // 用户类型（0-个人 1-企业 2-子账户）
      paginationConfig: {
        hideSinglePage: false,
        page: 1,
        size: 15,
        sizeList: [10, 15, 30, 50],
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
      },
      viewConfig: {
        isShow: false,
        data: {},
      },
      buyConfig: {
        isShow: false,
        num: '',
        intergal: '',
        selectGoodsCode: '',
        times: 30,
        specs: '',
        resType: '0',
        numList: [],
        point: '0',
      },
      useResCount: '0', // 已使用资源数
      totalResCount: '0', //总资源数
      point: '0', // 剩余积分
      loading: false, // 是显示加载
      headerData: [], // 头部数据
      listData: [], // 数据列表
      checkedList: [],
      orderSortName: '',
      orderSortType: '',
    }
  },
  computed: {},
  created() {
    this.getAccount() // 获取资源信息
    this.addHeader() // 添加表头文字
    this.getData() // 获取资源列表
  },
  methods: {
    // 添加表头文字
    addHeader() {
      const header = []
      header.push({ label: '序号', prop: 'index' })
      header.push({ label: '资源名称', prop: 'name', sortable: 'custom' })
      header.push({ label: '资源编号', prop: 'number', sortable: 'custom' })
      header.push({ label: '资源类型', prop: 'type', sortable: 'custom' })
      header.push({ label: '开始时间', prop: 'starttime', sortable: 'custom' })
      header.push({ label: '结束时间', prop: 'endtime', sortable: 'custom' })
      header.push({ label: '规格', prop: 'capacity', sortable: 'custom' })
      header.push({ label: '状态', prop: 'state', sortable: 'custom' })
      header.push({ label: '操作', prop: 'operation' })
      this.headerData = header
    },
    // 获取资源列表
    getData() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      setTimeout(() => {
        const params = {
          transCode: 'C00024',
          state: '', // 资源状态(1-可分配 2-已分配 3-已到期 4-已删除）
          type: '0', // 资源类型(0-通用）
          name: '', // 资源名称
          page: this.paginationConfig.page,
          count: this.paginationConfig.size,
        }
        if (this.orderSortName) {
          params.orderSortName = this.orderSortName
        }
        if (this.orderSortType) {
          params.orderSortType = this.orderSortType
        }
        request(params)
          .then((res) => {
            this.listData = []
            loading.close()
            this.listData = res.rows
            this.paginationConfig.total = res.total
            this.listData.map((item, index) => {
              item.index =
                (this.paginationConfig.page - 1) * this.paginationConfig.size +
                index +
                1
            })
          })
          .catch((err) => {
            loading.close()
          })
      }, 1500)
    },
    // 获取资源信息
    getAccount() {
      const params = {
        transCode: 'C00001',
      }
      request(params)
        .then((res) => {
          this.useResCount = res.useResCount
          this.totalResCount = res.totalResCount
          this.point = res.point
        })
        .catch((err) => {})
    },
    // 获取类型
    getType(type) {
      return formatType(type)
    },
    // 获取状态
    getState(state) {
      return formatStatus(state)
    },
    // 选中行
    tableRowClassName(row, rowIndex) {
      if (row.row.operation == true) {
        return 'selected'
      } else {
        return ''
      }
    },
    // 查看资源
    viewResource(resId) {
      const params = {
        transCode: 'C00029',
        resId: resId,
      }
      request(params)
        .then((res) => {
          this.viewConfig = {
            isShow: true,
            data: res,
          }
        })
        .catch((err) => {})
    },
    // 购买资源
    getResource() {
      //获取商品列表
      const params = {
        transCode: 'C00022',
        type: '4', // 类型(1-充值，2-增加子账户上限 4-购买资源)
        subType: '0', // 资源类型(0-通用）
        saleUnit: '', // 出售方式(0-整卖 1-零卖)
      }
      request(params)
        .then((res) => {
          this.buyConfig = {
            isShow: true,
            intergal: res.rows.filter((tmp) => tmp.saleUnit == 0)[0].salePrice,
            num: res.rows.filter((tmp) => tmp.saleUnit == 0)[0].returnGoods,
            times: 30,
            specs: res.rows.filter((tmp) => tmp.saleUnit == 0)[0].remarks,
            resType: '0',
            numList: res.rows.filter((tmp) => tmp.saleUnit == 0),
            selectGoodsCode: res.rows.filter((tmp) => tmp.saleUnit == 0)[0]
              .goodsCode,
            point: this.point,
          }
        })
        .catch((err) => {})
    },
    // 获取分页操作
    getPagination(data) {
      this.paginationConfig = data
      this.getData()
    },
    // 获取查看发票操作
    getView(data) {
      this.viewConfig.isShow = false
      if (data) {
      }
    },
    // 获取buy操作
    getBuy(data) {
      this.buyConfig.isShow = false
      if (data) {
        this.getData()
        this.getAccount()
      }
    },
    formatTime(time) {
      return parseTime(time)
    },
    // 排序
    sortChange(column, prop, order) {
      if (column.prop == 'number') {
        this.orderSortName = 'res_num'
      } else if (column.prop == 'starttime') {
        this.orderSortName = 'start_time'
      } else if (column.prop == 'endtime') {
        this.orderSortName = 'end_time'
      } else {
        this.orderSortName = column.prop
      }

      this.orderSortType = column.order == 'descending' ? 'desc' : 'asc'
      this.getData()
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.resource {
  @include w_h(100%, 100%);
  background: $color_f;
  .el-table {
    color: $color_9;
    .operation:hover {
      color: #2cae00;
      cursor: pointer;
    }
  }
  .pagination {
    @include flex();
    padding: 20px 10px;
    font-size: 12px;
    color: $color_9;
  }
}
</style>

<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.resource {
  .header {
    @include flex();
    @include w_h(100%, 40px);
    padding: 10px;
    font-size: 18px;
    font-weight: 700;
  }
  .el-table {
    .cell {
      white-space: nowrap;
    }
    th {
      color: $color_f;
      background: #004498;
    }
    td,
    th.is-leaf {
      font-size: 12px;
      border: none;
    }
    .selected {
      color: $color_3;
    }
  }
}
</style>
