<template>
  <div class="serviceGuidePage H100">
    <div class="head_box">
      <h6>内容管理 / 业务服务指南</h6>
      <h4>业务服务指南</h4>
    </div>
    <div class="content_box">
      <div class="form_box h778px">
        <el-form :inline="true" :model="form" class="search-form" onsubmit="return false;">
          <el-form-item label="业务名称:">
            <el-input  size="mini" placeholder="请输入业务名称"  v-model="form.name" @keyup.enter.native="Search" clearable></el-input>
          </el-form-item>
          <el-form-item label="网点归属:" v-if="roleId != 3">
            <el-select size="mini" v-model="form.bankId" placeholder="请选择网点归属" filterable clearable @change="Search">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="mini"  type="primary" class="btn_form_search" @click="Search">查询</el-button>
          </el-form-item>
          <el-form-item class="r-float">
            <el-button size="mini" type="primary" v-show="roleId == 3"  class="btn_form_add"  icon="el-icon-plus" @click="addService">新&nbsp;&nbsp;&nbsp;建</el-button>
            <el-button size="mini" type="primary" v-show="roleId == 3"  class="btn_form_add" @click="handleSort">点击排序</el-button>
          </el-form-item>
        </el-form>
        <div class="scrool">
          <el-table style="width:100%;" ref="multipleTable" :data="tableData">
            <el-table-column prop="name"  width="70">
              <template slot-scope="scope">
                <div class="videoImg">
                  <img :src="scope.row.icon" alt="">
                </div>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="name" label="业务名称" ></el-table-column>

            <el-table-column label="创建人" prop="createEmployee" ></el-table-column>
            <el-table-column label="创建时间" prop="createTime" width="150">
              <template slot-scope="scope">
                {{scope.row.createTime | dateformat('YYYY-MM-DD HH:mm:ss')}}
              </template>
            </el-table-column>
            <el-table-column label="网点归属" prop="bankName" ></el-table-column>
            <el-table-column label="审核人" prop="reviewerName" ></el-table-column>
            <el-table-column label="状态" prop="status" >
              <template slot-scope="scope">
                <div class="statusBox">
                <span class="active"
                      :style="{'backgroundColor':(scope.row.status == 0 ? 'rgba(24,144,255,1)':(scope.row.status == 2 ||scope.row.status == 3 ? 'rgba(250,173,20,1)':(scope.row.status == 1 || scope.row.status == 6 ? 'rgba(245,34,45,1)':(scope.row.status == 4 ? 'rgba(82,196,26,1)':'rgba(0,0,0,0.25)'))))}"></span>
                  <span class="openKey">{{scope.row.status == 0 ? '编辑中':(scope.row.status == 1 ? '上线被驳回':(scope.row.status == 2 ? '上线审核中':(scope.row.status == 3 ? '下线审核中':(scope.row.status == 4 ?'上线中':(scope.row.status == 5 ?'下线中': '下线被驳回')))))}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" header-align="center" align="center">
              <template slot-scope="scope">
                <el-button-group>
                  <el-button title="编辑" v-if="(scope.row.status == '0' ||scope.row.status == '1') && roleId == 3"
                             size="mini" type="text" @click="openEdit(scope.row)">编辑 |
                  </el-button>
                  <el-button title="申请下线" type="text" size="mini"
                             v-if="(scope.row.status == '4' ||scope.row.status == '6') && roleId == 3"
                             @click="handleLine(scope.row)">申请下线 |
                  </el-button>
                  <el-button title="查看" type="text" size="mini"
                             v-if="roleId != 3 || (roleId == 3 && (scope.row.status == '2' ||scope.row.status == '3' ||scope.row.status == '4' ||scope.row.status == '5' ||scope.row.status == '6'))"
                             @click="openDetails(scope.row)">查看
                  </el-button>
                  <el-button title="删除" type="text" size="mini"
                             v-if="(scope.row.status == '0' ||scope.row.status == '1') && roleId == 3"
                             @click="handleDelete(scope.row)">删除
                  </el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination small background
                       @current-change="handleCurrentChange"
                       :current-page="page.currentPage"
                       :page-size="page.pageSize"
                       layout="prev, pager, next"
                       :total="page.total">
        </el-pagination>
      </div>
    </div>
    <div class="sort-dialog dialog-box">
      <el-dialog title="排序" :visible.sync="dialogVisible" width="48%">
        <span class="tips">Tips:拖动可改变业务列表在app端显示顺序！</span>
        <div class="hidden-box">
          <ul class="list">
            <li class="item" v-for="(item, i) in sortList" :key="item.id"
                v-dragging="{item: item, list: sortList, group: 'item' }">
              <img :src="item.icon" alt="" class="icon">
              <span class="title">{{item.name}}</span>
              <span class="index">{{i+1}}</span>
            </li>
          </ul>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogVisible = false">取 消</el-button>
          <el-button size="small" type="primary" @click="submitSort">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        page: {
          currentPage: 1, //当前页
          pageSize: null, //每页条数
          total: null, //总条数
        },
        form: {
          name: '',
          bankId: ''
        },
        options: '',
        tableData: [],
        disabled: true,
        roleId: '',
        userId: '',
        bankBranchId: '',
        dialogVisible: false,
        sortList: [],
      }
    },
    computed: {},
    mounted() {
      this.initData();
    },
    components: {},
    methods: {
      addService() {
        this.$router.push('/newServiceGuide');
      },
      initData() {
        this.roleId = localStorage.getItem('roleId');
        this.userId = localStorage.getItem('userId');
        this.bankBranchId = localStorage.getItem('bankBranchId');
        this.onSearch();
        this.getBranch();
      },
      // 归属网点列表渲染
      getBranch() {
        let _this = this;
        _this.$https({
          method: 'get',
          url: 'bankBranchInfo/getBankBox?action=query&roleId='+_this.roleId+'&bankId='+_this.bankBranchId,
          authType: this.backToken
        }).then((res) => {
            _this.options = res.data;
          }, (error) => {
            console.log(error)
          }
        )
      },
      // 获得数据接口
      getTableData(param) {
        let vm = this;
        vm.$https({
          url: "businessInfo/getList",
          method: 'get',
          authType: this.backToken
        }, param).then((res) => {
          let data = res.data;
          vm.page.pageSize = data.size;
          vm.page.total = data.total;
          vm.tableData = data.records;
        }).catch(function (err) {
          console.log(err);
        })
      },
      // 分页
      handleCurrentChange(val) {
        let _this = this;
        _this.page.currentPage = val;
        _this.onSearch();
      },
      onSearch() {
        let _this = this;
        let param = _this.getSearchQuery();
        _this.getTableData(param)
      },
      Search() {
        let _this = this;
        _this.page.currentPage = 1;
        let searchObj = {
          "_index": 1,
          "_size": _this.page.pageSize,
          "bankId":  _this.form.bankId,
          "name": _this.form.name,
          'roleId': _this.roleId,
          'userId': _this.userId,
          'currentBankId': _this.bankBranchId
        };
        this.getTableData(searchObj);
      },
      // // 获取当前查询参数
      getSearchQuery() {
        let _this = this;
        let searchObj = {
          "_index":  _this.page.currentPage,
          "_size": _this.page.pageSize,
          'roleId': _this.roleId,
          'userId': _this.userId,
          'currentBankId': _this.bankBranchId
        };
        for (let key in _this.form) {
          if (_this.form[key]) {
            searchObj[key] = _this.form[key];
          }
        }
        return searchObj;
      },
      // 编辑
      openEdit(row) {
        this.$router.push({path: '/newServiceGuide', query: {id: row.id}})
      },
      handleLine(row) {
        let _this = this;
        if (row.status == 4 || row.status == 6) {
          this.$confirm('是否下线当前业务?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            _this.$https({
              method: 'put',
              url: 'businessInfo/disable?id=' + row.id,
              authType: this.backToken
            }).then((res) => {
                _this.onSearch();
                this.$message({
                  type: 'success',
                  message: '下线成功!'
                });
              }, (error) => {
                this.$message({
                  type: 'fail',
                  message: "下线失败!" + error.response.data
                });
              }
            )
          })
        } else {
          this.$confirm('是否上线当前业务?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            _this.$https({
              method: 'put',
              url: 'businessInfo/enable?id=' + row.id,
              authType: this.backToken
            }).then((res) => {
                _this.onSearch();
                this.$message({
                  type: 'success',
                  message: '上线成功!'
                });
              }, (error) => {
                this.$message({
                  type: 'fail',
                  message: "上线失败!" + error.response.data
                });
              }
            )
          })
        }


      },
      // 查看详情
      openDetails(row) {
        this.$router.push({path: '/auditMsg', query: {id: row.id, isTitle: 0}});
      },
      // 删除
      handleDelete(row) {
        let _this = this;
        this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          _this.$https({
            method: 'delete',
            url: 'businessInfo/delete?id=' + row.id,
            authType: this.backToken
          }).then((res) => {
              this.$message({type: 'success', message: '删除成功!'});
              _this.Search();
            }, (error) => {
              this.$message({
                type: 'fail',
                message: "删除失败!" + error.response.data
              });
            }
          )
        })
      },
      handleSort() {
        this.dialogVisible = true;
        this.getSortList();
      },
      getSortList() {
        let _this = this;
        let params = {
          _size: 100,
          bankId: localStorage.getItem('bankBranchId'),
          roleId: localStorage.getItem('roleId')
        };
        _this.$https({
          method: 'get',
          url: 'businessInfo/getAppBusinessList',
        }, params).then((res) => {
            _this.sortList = res.data.records;
          }, (error) => {
          }
        )
      },
      submitSort() {
        let _this = this;
        let oldList = [];
        _this.sortList.forEach((e) => {
          let obj = {
            id: e.id
          };
          oldList.push(obj)
        });
        let params = {
          bankBranchId: localStorage.getItem('bankBranchId'),
          oldList: oldList
        }
        _this.$https({
          method: 'put',
          url: 'businessInfo/sort',
          authType: this.backToken
        }, params).then((res) => {
            _this.$message({
              type: 'success',
              message: res.data.message
            });
            _this.dialogVisible = false;
          }, (error) => {
          }
        )
      }
    }
  }
</script>

<style lang="less">
  @import '../../style/common';

  .serviceGuidePage {
    .content_box {
      min-width: 870px;
      .input_box {
        width: 100%;
        min-width: 815px;
        margin-bottom: 30px;
        .el-input, .el-select {
          max-width: 272px;
          /*height: 32px;*/
          background: rgba(255, 255, 255, 1);
          border-radius: 4px;
          .el-input__inner {
            height: 32px;
          }
          .el-input__suffix {
            height: 110%;
          }
        }

        .btn_form_search, .btn_form_add {
          height: 32px;
          text-align: center;
          padding: 0 15px;
        }
      }
      .videoImg {
        width: 100%;
        height: 48px;
        img {
          width: 48px;
          height: 48px;
        }
        .item{
          margin: 4px;
        }
        p {
          width: 100px;
          height: 100%;
          float: right;
          line-height: 48px;
          /*overflow: hidden;*/
          /*-webkit-line-clamp: 2;*/
          /*text-overflow: ellipsis;*/
          /*display: -webkit-box;*/
          /*! autoprefixer: off */
          /*-webkit-box-orient: vertical;*/
          /* autoprefixer: on */
        }
      }
      .scrool{
        width: 100%;
        height: calc(100% - 100px);
        overflow-x: hidden;
        overflow-y: scroll;
        .el-table {
          .el-table__header-wrapper {
            .el-table__header {
              .has-gutter tr th {
                background: rgba(250, 250, 250, 1);
              }
            }
          }
          .el-table__body-wrapper {
            width: 100%;
            table tbody tr td {
              padding: 6px 0px;
            }
          }
        }
      }
    }
  }
</style>