<template>
  <LayoutContent :breads="[{title: '资源位列表'}]">
    <div>
      <i-button type="primary" @click="showAddResourcePannel(true)">添加资源位</i-button>
    </div>
    <LayoutTable :columns="columns" :data="data">
    </LayoutTable>
    <!--添加资源位弹出层-->
    <div v-if="showAddPan" class="resource-add-container">
      <i-card class="resource-add-card">
        <p slot="title">添加资源位</p>
        <a href="javascript:void(0)" slot="extra" @click="showAddResourcePannel(false)">
          <i-icon type="ios-close" size="24"></i-icon>
        </a>
        <div class="resource-add-content">
          <i-row>
            <i-col span="8"><label>选择平台:</label></i-col>
            <i-col span="16">
              <i-select class="platform-select" v-model="platform">
                <i-option value="1">App</i-option>
                <i-option value="2">小程序</i-option>
              </i-select>
            </i-col>
          </i-row>
          <i-row>
            <i-col span="8"><label>资源名称:</label></i-col>
            <i-col span="16">
              <i-input class="name-input" v-model="resourceName" placeholder="请输入资源名称"></i-input>
            </i-col>
          </i-row>
          <i-row>
            <i-col span="24">
              <i-button type="primary" @click="saveResource">保 存</i-button>
            </i-col>
          </i-row>
        </div>
      </i-card>
    </div>
  </LayoutContent>

</template>

<script>
import {Button} from 'iview'; //eslint-disable-line
import ResourceService from '@/service/resource-service';
import dayjs from 'dayjs';
import util from '@/libs/util';

export default {
  name: 'resourcelist',
  data() {
    return {
      data: [],
      columns: [{
        title: 'ID',
        key: 'id',
        width: 100
      }, {
        title: '资源名称',
        key: 'name',
        width: 200
      }, {
        title: '平台',
        key: 'platform',
        width: 100
      }, {
        title: '位置码',
        key: 'code',
        width: 300
      }, {
        title: '创建时间',
        key: 'createTime',
        width: 200,
        render: (h, {row}) => {
          /*return (
            <div>{dayjs.unix(row.createTime).format('YYYY-MM-DD HH:mm:ss')}</div>
          );*/
          return h('div', {style: {color: '#999'}}, dayjs.unix(row.createTime).format('YYYY-MM-DD HH:mm:ss'));
        }
      }, {
        title: '操作',
        width: 270,
        align: 'center',
        render: (h, {row}) => {
          /*return (
            <div>
              <i-button type="success" size="small" onClick={() => this.onToEditor(row)}>内容编辑</i-button>
            </div>
          );*/
          return h('div',{},[
            h('i-button', {props: {type: 'success', size: 'small'}, on:{click: () => this.onToEditor(row)}}, '内容编辑'),
            h('i-button', {props: {type: 'primary', size: 'small'}, style:{marginLeft: '20px', display: row.showEditButton}, on:{click: () => this.onEditResource(row)}}, '修改信息'),
          ]);
        }
      }],
      showAddPan: false,
      platform: '1',
      resourceName: '',
      editResourceId: 0 // 当前需要修改的resourceId
    };
  },
  created() {
    this.resourceService = new ResourceService();
    this.fetchData();
  },
  methods: {
    onToEditor({id, name, sortId}) {
      if (sortId === 2) {
        util.jumpUrl(`resource-edit.html?id=${id}&name=${name}`);
      } else if(sortId === 3) {
        util.jumpUrl(`resource-edit-new.html?id=${id}&name=${name}`);
      }

    },
    async fetchData() {
      this.$Loading.start();
      const result = await this.resourceService.list();

      if (result.code === 200) {
        for (let i = 0; i < result.data.length; i++) {
          result.data[i].showEditButton = 'inline-block';
          if (result.data[i].sortId === 2) {
            result.data[i].showEditButton = 'none';
          }
        }
        this.data = result.data;
        this.$Loading.finish();
      } else {
        result.message && this.$Message.warning(result.message);
        this.$Loading.error();
      }
    },
    showAddResourcePannel(show) {
      this.showAddPan = show;
    },
    saveResource() {
      let self = this;
      if (this.resourceName) {
        let data = {
          name: this.resourceName,
          platformId: this.platform,
          sortId: 3
        };
        if (this.editResourceId) {
          Object.assign(data, {}, {id: this.editResourceId});
        }

        this.resourceService.addOrUpdateResource(data).then(result => {
          if (result && result.code === 200) {
            self.showAddPan = false;
            self.$Message.success('保存成功!');
            self.fetchData();
            self.platform = '1';
            self.editResourceId = 0;
            self.resourceName = '';
          } else {
            self.$Message.error(result.message);
          }
        });
      }
    },
    onEditResource(data) {
      console.log(data);
      this.platform = ['0', 'APP', '小程序'].indexOf(data.platform).toString();
      this.resourceName = data.name;
      this.editResourceId = data.id;
      this.showAddResourcePannel(true);
    }
  }
};
</script>

<style>
  .resource-add-container {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
  }

  .resource-add-card {
    position: absolute;
    width: 600px;
    margin-top: 30px;
    left: 50%;
    margin-left: -300px;
  }

  .platform-select, .name-input {
    width: 200px;
    margin: 0 auto;
  }

  .ivu-row {
    border-bottom: 1px solid #e3e3e3;
  }

  .ivu-row:hover {
    background-color: #aefdff;
  }
  
  .ivu-col {
    text-align: center;
    height: 50px;
    line-height: 50px;
  }

  .ivu-col:nth-child(odd) {
    border-right: 1px solid #e4e4e4;
  }

  .ivu-card-body {
    margin: 0;
    padding: 0;
  }
</style>