<!--信息牌配置-->
<template>
  <div class="creditScoreList">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">信息牌配置</p>
      <p class="page-top-title-out-p" @click="handleClick('','','back')">返回</p>
    </div>
    <div class="rewardPointsListPage">
      <el-table class="table-box" v-loading="loading" border :data="tableData" style="margin-top:20px;">
        <el-table-column label="排序" align="left" class-name="small-padding fixed-width" width="80">
          <template slot-scope="scope">
            <el-input
              onkeyup="value=value.replace(/[^\d]/g,'')"
              :disabled="scope.row.isSpecial==2"
              class="serial"
              v-model="scope.row.orderNum"
              @change="categorySort(scope.row)"
              maxLength="3"
              placeholder="序号">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="类目名称" align="left" prop="brandName"/>
        <el-table-column label="内容类型" align="left" prop="brandType">
          <template slot-scope="scope">
            <span v-if="scope.row.brandType==1">文字</span>
            <span v-if="scope.row.brandType==2">图片</span>
          </template>
        </el-table-column>
        <el-table-column label="颜色" align="left" prop="showColour">
          <template slot-scope="scope">
            <p :style="'width:40px;height:23px;margin:0;background:'+scope.row.showColour"></p>
          </template>
        </el-table-column>
        <el-table-column label="创建人" align="left" prop="createName"/>
        <el-table-column label="创建时间" align="left" prop="createTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime,"{y}-{m}-{d} {h}:{i}") }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="left" class-name="small-padding fixed-width" width="120">
          <template slot-scope="scope">
            <el-switch
              @click.native="categoryShow(scope.row)"
              class="switch captcha-img"
              :active-value="true"
              :inactive-value="false"
              active-color="#FF9900"
              inactive-color="#999"
              v-model="scope.row.isShow"
              active-text="启用"
              inactive-text="停用"
              disabled
            ></el-switch>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        style="margin-top:20px;"
        v-show="total>0"
        :total="total"
        layout="total, prev, pager, next, sizes, jumper"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { laboratoryInfoBrandAdd, laboratoryInfoBrandDelete, laboratoryInfoBrandList, laboratoryInfoBrandUpdate } from '@/api/integratedManagement/index'
export default {
  name: "creditScoreList",
  props: {
    propsData:{},
  },
  data() {
    return {
      //加载状态
      loading:false,
      // 查询参数
      queryParams: {
        page: 1,
        pageSize:20,
      },
      //列表数据
      tableData:[],
      total:0,

    }
  },
  created(){
    this.getList()
  },
  methods:{
    //返回上级页面
    backPage(){
      this.$parent.goPage(1);
    },
    handleClick(index,row,doType){
      let _this=this;
      if(doType=='add'){//添加
        this.open = true;
      }else if(doType=='back'){//返回
        this.$parent.handleClick('','','back');
      }
    },
    categoryShow(row){
      let self = this;
      let num=0;
      for(let i=0;i< this.tableData.length;i++){
        if(this.tableData[i].isShow==1){
          num++
        }
      }
      if(num>=8 && row.isShow==2){
        this.msgError("信息牌启用个数不能超过8个!");
      }else{
        //启用&停用
        let text = row.isShow  ? "停用" : "启用";
        this.$confirm('是否确认' + text + '?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
        }).then(() => {
          let obj={
            brandId:row.brandId,
            isShow:!row.isShow,
            orderNum:row.orderNum,
          }
          laboratoryInfoBrandUpdate(obj).then( response => {
            self.msgSuccess(response.message);
            self.open = false;
            self.getList();
          });
        }).catch(() => {});
      }

    },
    categorySort(row){
      let obj={
        brandId:row.brandId,
        orderNum:row.orderNum,
      }
      laboratoryInfoBrandUpdate(obj).then( response => {
        this.msgSuccess(response.message);
        this.open = false;
        this.getList();
      });
    },
    /** 查询数据 */
    getList() {
      this.loading = true;
      laboratoryInfoBrandList(this.queryParams).then( response => {
        this.$set(this,'tableData',response.data.records);
        this.$set(this,'total',response.data.total);
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryParams");
      this.handleQuery();
    },
  },
}
</script>

<style lang="scss">
.serial{
  width: 60px;
}
.category-show{
  width: 80px;
  .category-switch .el-switch__label {
    position: absolute;
    display: none;
    color: #fff !important;
  }


  .category-switch .el-switch__label--right span {
    margin-left: 10px;
  }

  .category-switch .el-switch__label--left {
    z-index: 1;
  }

  .category-switch .el-switch__label--left span {
    margin-left: 24px;
  }

  .category-switch .el-switch__label.is-active {
    display: block;
  }

  .category-switch.el-switch .el-switch__core,
  .el-switch .el-switch__label {
    width: 72px !important;
    margin: 0;
  }
}
</style>

<style scoped lang="scss">
.creditScoreList {
  flex:1;
  display: flex!important;
  flex-direction: column;
  overflow: hidden;
  .title-box{
    display: flex;
    border-bottom: 1px solid #E0E0E0;
    p:nth-child(1){
      flex:1;
      line-height:80px;
      color:#0045AF;
      font-size:18px;
      margin-left:20px;
    }
    p:nth-child(2){
      margin:20px;
    }
  }
  .rewardPointsListPage{
    flex:1;
    display: flex!important;
    flex-direction: column;
    overflow: hidden;
    padding:20px;
  }
}
</style>
<style lang="scss">
  .creditScoreList{
    .el-table{
      .el-input--medium .el-input__inner{
        height:30px;
        line-height:30px;
        width:55px;
        text-align: center;
        padding:0 10px;
      }
    }
    .pagination-container{
      height: 45px;
    }
  }
</style>
