<template>
  <div class="integral_rule_box">

    <el-row :gutter="40" style="width:100%;padding:20px;background:#FDF6EC;margin:0 0 20px 0;">
      <el-col :span="22" style="font-size:14px;color:#606266;padding-bottom:8px;">先【添加规则分类】，再【添加规则】;或者直接【导入规则】</el-col>
      <el-col :span="2"><img src="static/images/close_button_icon.png" style="float:right"></el-col>
      <el-col :span="24" style="font-size:14px;color:#606266;">
        <span>积分规则使用介绍</span>
        <span><a herf="#" style="color:#E6A23C;font-size:14px;margin-left:4px;">积分规则使用介绍</a></span>
      </el-col>
    </el-row>

    <el-row :gutter="0" class="rule_box">
      <el-col :span="4" class="rule_class">
        
        <el-row :gutter="0" style="margin:0;padding:0;">
          <el-col :span="24"><el-button plain style="display:inblpadding:10px 25px;margin:20px auto 0;">+ 添加规则分类</el-button></el-col>
          <el-col :span="24">
            <el-tree :data="data5" :props="defaultProps" @node-click="handleNodeClick" style="margin-top:28px;">
              <span slot-scope="{ node, data }" style="font-size:14px;color:#606266;"><i :class="node.icon"></i>{{ node.label }}</span>
            </el-tree>
          </el-col>
          <el-col>
            <div class="nopoint_box" v-show="data5 !== undefined && data5 == 0">
                <div class="noimg"></div>
                <span class="title">当前规则分类暂无规则</span>
                <span class="title" style="font-size:12px;color:#26A2FF;">添加规则</span>
            </div>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="20" class="rule_list">
      
       <el-row style="margin-top:20px;">
          <el-col :span="6" style="font-size:20px;color:#303133;line-height:36px;">分类名称过长过长</el-col>
          <el-col :span="3"><el-button plain style="padding:10px 12px;" @click="edit_rule = true">编辑</el-button></el-col>
       </el-row>

       <el-row :gutter="0" style="margin-top:20px;">
          <el-col :span="4"><el-button plain type="danger" style="">批量删除</el-button></el-col>
          <el-col :span="4"><el-button type="primary" style="" @click="add_rule = true">添加规则</el-button></el-col>
          <el-col :span="4"><el-button plain style="" @click="import_rule = true">导入规则</el-button></el-col>
          <el-col :span="4"><el-button plain style="" @click="export_rule = true">导出/修改规则</el-button></el-col>
          <el-col :span="7" style="padding-left:15px;float:right">
            <el-input v-model="input" placeholder="搜索规则内容" suffix-icon="el-icon-search" max="200" class="rule_search"></el-input>
          </el-col>
          <el-col :span="24">
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%;margin-top:20px;" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="50"></el-table-column>
              <el-table-column label="分类" width="96">
                <template slot-scope="scope">{{ scope.row.date }}</template>
              </el-table-column>
              <el-table-column prop="name" label="规则" width="476"></el-table-column>
              <el-table-column prop="address" label="积分" width="124" show-overflow-tooltip></el-table-column>
            </el-table>
          </el-col>
        </el-row>



      </el-col>
      
    </el-row>

    <el-dialog title="编辑规则分类" :visible.sync="edit_rule" width="38%" custom-class="alert_rule_box">
      <el-form :model="form">
        <el-form-item label="规则分类" :label-width="formLabelWidth" >
          <el-input autocomplete="off" placeholder="分类名称过长过长"></el-input>
        </el-form-item>
        <el-form-item label="上级分类" :label-width="formLabelWidth">
          <el-select placeholder="积分规则">
            <el-option label="积分规则一" value="shanghai"></el-option>
            <el-option label="积分规则二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="edit_rule = false">取 消</el-button>
        <el-button type="primary" @click="edit_rule = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="添加规则分类" :visible.sync="add_rule" width="38%" custom-class="alert_rule_box">
      <el-form :model="form">
        <el-form-item label="规则分类" :label-width="formLabelWidth" >
          <el-input autocomplete="off" placeholder="请输入分类名称"></el-input>
        </el-form-item>
        <el-form-item label="上级分类" :label-width="formLabelWidth">
          <el-select placeholder="积分规则">
            <el-option label="分类一" value="shanghai"></el-option>
            <el-option label="分类二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="add_rule = false">取 消</el-button>
        <el-button type="primary" @click="add_rule = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="导入规则" :visible.sync="import_rule" width="38%" custom-class="alert_rule_box">
      <div style="display:flex" class="export_box">
        <div class="export_list">
            <span style="display:block;">1、下载规则模版，填写好规则</span>
            <div class="imgbox" style="margin-top:30px;">
              <img src="static/images/excel_icon.png">
              <span style="display:block;margin-top:6px">规则表</span>
            </div>
            <el-button type="primary" style="margin-top:10px;">下载模版</el-button>
        </div>
        <div style="display:block;flex:1;" class="export_list">
            <span style="display:block;">2、上传填好的规则表</span>
            <div class="imgbox" style="margin-top:30px;">
              <img src="static/images/noexcel_icon.png">
              <span style="display:block;margin-top:6px">仅支持xls、xlsx格式文件</span>
            </div>
            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" style="margin-top:10px;"
            :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :file-list="fileList">
              <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
              <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
        </div>
      </div>
    </el-dialog>

    <el-dialog title="导出/修改规则" :visible.sync="export_rule" width="38%" custom-class="alert_rule_box">
      <div style="display:flex" class="export_box">
        <div class="export_list">
            <span style="display:block;">1、导出规则表</span>
            <div class="imgbox" style="margin-top:30px;">
              <img src="static/images/excel_icon.png">
              <span style="display:block;margin-top:6px">规则表</span>
            </div>
            <el-button type="primary" style="margin-top:10px;">导出</el-button>
        </div>
        <div style="display:block;flex:1;" class="export_list">
            <span style="display:block;">2、上传修改好的规则表</span>
            <div class="imgbox" style="margin-top:30px;">
              <img src="static/images/excel_icon.png">
              <span style="display:block;margin-top:6px">仅支持xls、xlsx格式文件</span>
            </div>
            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" style="margin-top:10px;"
            :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :file-list="fileList">
              <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
    data() {
      return {
        formLabelWidth: '128px',
        edit_rule: false,
        export_rule: false,
        import_rule: false,
        add_rule: false,
        data5: [{
          label: '一级 1',
          icon:'el-icon-share',
          children: [{
            label: '二级 1-1',
             icon: 'el-icon-share',
            children: [{
              label: '三级 1-1-1',
               icon: 'el-icon-share',
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        tableData: [{
          date: '能力分',
          name: '细则内容',
          address: '+11 B分'
        }, {
          date: '能力分',
          name: '细则内容',
          address: '+11 B分'
        }, {
          date: '能力分',
          name: '细则内容',
          address: '+11 B分'
        }, {
          date: '能力分',
          name: '细则内容',
          address: '+11 B分'
        }, {
          date: '能力分',
          name: '细则内容',
          address: '+11 B分'
        }, {
          date: '能力分',
          name: '细则内容',
          address: '+11 B分'
        }, {
          date: '能力分',
          name: '细则内容',
          address: '+11 B分'
        }],
      };
    },
    methods: {
      handleNodeClick(data) {
      },
      
    }
  };
</script>

<style scoped lang="scss">
.integral_rule_box{
  width:100%;
  .integral_event{
  width:100vw;
  max-width:1000px;
  padding:30px;
  }
  .rule_box{
  display: table;
  margin-top:20px;
  padding:0;
  background:#fff;
  }
  .rule_class{
    position:relative;
    display:block;
    text-align: center;
  }
  /deep/ .el-tree-node__expand-icon{
    padding: 6px 10px;
  }
  .rule_list{
    display:block;
    position:relative;
    padding:0 30px;
  }
  .rule_list:after{
    content:" ";
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:1px;
    background:#EBEEF5;
  }
  /deep/ .el-tree-node__content{
    margin:5px 0;
  }
  .rule_search /deep/ .el-input__suffix i{
    width: 58px;
    color:#909399;
    margin-right: -5px;
    background: #DCDFE6;
    border-radius: 0 4px 4px 0;
    }
    .nopoint_box{
    display:inline-block;
    text-align: center;
    width:100%;
    margin-bottom:10px;
    }
    .noimg{
    display:inline-block;
    text-align: center;
    width: 110px;
    height: 110px;
    margin: 22px auto 16px;
    background:url(/images/nodata_default.png) no-repeat center;
    background-size:99%;
    }
    .title{
    display:block;
    text-align: center;
    margin-top:10px;
    font-size:12px;
    color:#909399;
    }
    /deep/ .alert_rule_box{
      position:relative;
      top:15vh;
      padding-bottom:30px;
    }
    /deep/ .alert_rule_box .el-input__inner{
    width:300px;
    }
    /deep/ .alert_rule_box .export_box .export_list{
      position:relative;
      display:block;
      text-align:center;
      font-size:14px;
      color:#606266;
      margin-top:30px;
      flex:1;
    }
    /deep/ .alert_rule_box .export_box .export_list:after{
      content: " ";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 1px;
      background: none;
      border-left: 1px #EBEEF5 dashed;
    }
    /deep/ .alert_rule_box .export_box .export_list:nth-child(1):after{
      display:none;
    }
}
</style>