<template>
  <!--供应商不良推送-->
  <div class="app-container supplierBad">
    <div class="content">
      <div class="c-title">推送人信息</div>
      <div class="main">
        <div class="table-item" v-if="tableDataTotal > 0  && !isSkeleton">
          <el-button class="btn" icon="el-icon-plus" type="primary">添加推送人</el-button>
          <el-table
            class="fixed-table"
            :data="tableData"
            element-loading-text="Loading"
            border
            highlight-current-row
          >
            <el-table-column label="推送人姓名" prop="name" align="left" width="200"></el-table-column>
            <el-table-column label="推送电话" prop="contact" align="left"></el-table-column>
            <el-table-column
              label="操作"
              align="left"
              class-name="small-padding fixed-width"
              fixed="right"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.status===0" style="cursor: pointer;margin-right: 16px;color: #0081FF;" @click="handleClick(scope.row,1)">停用</span>
                <span v-if="scope.row.status===1" style="cursor: pointer;margin-right: 16px;color: #0081FF;" @click="handleClick(scope.row,1)">启用</span>
                <span style="cursor: pointer;color: #FF3C3C;" @click="handleClick(scope.row,2)">删除</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-box" v-if="tableDataTotal>pageSize">
            <el-pagination background :current-page="pageNum" :page-size="pageSize" :total="tableDataTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
          </div>
        </div>
        <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
        <div class="empty"  v-if="tableDataTotal === 0 && !isSkeleton">
          <img class="img" src="@/assets/images/empty.png">
          <div class="p1">暂无推送人信息</div>
          <div class="p2">抱歉,暂时没有相关数据展示~</div>
          <el-button class="btn" icon="el-icon-plus" type="primary" @click="visible=true">添加推送人</el-button>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="c-title">推送时间</div>
      <div class="main">
        <div class="main-item">
          <div class="label">推送频率</div>
          <el-radio-group v-model="radioTime" @change="radioBtn">
            <el-radio label="0">每天</el-radio>
            <el-radio label="1">工作日（排除节假日）</el-radio>
          </el-radio-group>
        </div>
        <div class="main-item" style="line-height: 32px;">
          <div class="label">推送时段</div>
          <el-time-picker
            is-range
            class="timePicker"
            v-model="time"
            value-format="HH:mm:ss"
            @change="changeTime"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围">
          </el-time-picker>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="visible" custom-class='dialog-claim' title="新增推送人信息" width="480px" >
      <div class="add-content">
        <div class="input">
          <div class="label">推送人姓名</div>
          <el-input class="name" placeholder="请输入推送人姓名" v-model="name"></el-input>
        </div>
        <div class="input">
          <div class="label">推送电话号码</div>
          <el-input class="name" placeholder="请输入推送人联系方式" v-model="contact"></el-input>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible=false">取消</el-button>
        <el-button type="primary" @click="handleAdd">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="handleVisible" custom-class='dialog-confirm' width="384px" :show-close="false">
      <template slot="title">
        <div v-if="status === 0"><img class="tip-img" src="@/assets/images/tips1.png" />停用账号</div>
        <div v-if="status === 1"><img class="tip-img" src="@/assets/images/tips1.png" />启用账号</div>
      </template>
      <div class="dialog-content">
        <div v-if="status === 0" class="text">确认停用账号?</div>
        <div v-if="status === 1" class="text">确认启用账号?</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleVisible=false">取消</el-button>
        <el-button type="primary" @click="handleUpdate">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="handleVisible1" custom-class='dialog-confirm' width="384px" :show-close="false">
      <template slot="title">
        <div><img class="tip-img" src="@/assets/images/tips1.png" />删除账号</div>
      </template>
      <div class="dialog-content">
        <div class="text">确认删除账号?</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleVisible1=false">取消</el-button>
        <el-button type="primary" @click="handleDelete">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { configKey,configUpdate } from "@/api/system/config";
  import { pageList,sysPush,updateStatus,sysPushDel } from "@/api/system/supplierBad";
  import skeleton from '../../component/skeleton'
  export default {
    name: 'supplierBad',
    components: {
      skeleton
    },
    data() {
      return {
        queryParams:{},
        tableData:[],
        visible:false,
        radioTime:'0',
        time:[],
        tableDataTotal:0,
        pageSize:10,
        pageNum:1,
        contact:'',
        name:'',
        handleVisible:false,
        handleVisible1:false,
        id:null,
        status:null,
        isSkeleton:true,
      }
    },
    created() {
      configKey("customer-badness-date-type").then(response => {
        this.radioTime=response.data.configValue
      });
      configKey("customer-badness-time-frame").then(response => {
        this.time=[this.converTime(response.data.configValue.split('-')[0]),this.converTime(response.data.configValue.split('-')[1])]
      });
      this.getList()
    },
    methods: {
      radioBtn(val){
        configUpdate({configKey:'customer-badness-date-type',configValue:val}).then(res => {
          this.$modal.success(res.msg);
        });
      },
      getList(){
        let params={
          pushTypeCode:'custoemr-badness',
          pageSize:this.pageSize,
          pageNum:this.pageNum,
        }
        pageList(params).then(res => {
          console.log(res)
          this.isSkeleton = false;
          this.tableData=res.rows;
          this.tableDataTotal=res.total
        })
      },
      handleClick(item,key){
        if(key === 1){
          this.status=item.status
          this.handleVisible=true
        }
        if(key === 2){
          this.handleVisible1=true
        }
        this.id=item.id
      },
      handleAdd(){
        let params={
          pushTypeCode:'custoemr-badness',
          pushType:'供应商不良',
          name:this.name,
          contact:this.contact,
        }
        sysPush(params).then(res => {
          console.log(res)
          if(res.code === 200){
            this.visible=false;
            this.$modal.success("新增成功");
            this.getList()
          }else {
            this.$message.error(res.msg);
          }
        })
      },
      handleUpdate(){
        let params={
          id:this.id,
          status:'1',
        }
        updateStatus(params).then(res => {
          console.log(res)
          this.handleVisible=false;
          this.getList()
        })
      },
      handleDelete(){
        sysPushDel(this.id).then(res => {
          console.log(res)
          this.handleVisible1=false;
          this.getList()
        })
      },
      changeTime(val){
        console.log(val)
        let time=val[0]+'-'+val[1]
        configUpdate({configKey:'customer-badness-time-frame',configValue:time}).then(res => {
          this.$modal.success(res.msg);
        });
      },
      converTime(time) {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const hour = time.split(':')[0];
        const minutes = time.split(':')[1];
        return new Date(year, month, day, hour, minutes);
      },
    }
  }
</script>

<style lang="scss" scoped>
  .supplierBad{
    .content{
      background: #ffffff;
      padding:16px;
      margin-bottom: 16px;
      .c-title{
        border-left: 2px solid rgba(35,35,35,0.8);;
        padding-left: 8px;
        font-size: 16px;
        height: 16px;
        line-height: 16px;
        font-weight: 700;
        color: #232323;
        margin-bottom: 16px;
      }
      .main{
        border-top: 1px solid #EEEEEE;
        padding-top: 20px;
      }
      .main-item {
        margin-bottom: 16px;
        display: -webkit-box;
        align-items: flex-start;
        .label {
          width: 88px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(35, 35, 35, 0.8);
        }
        .main-right {
          width: calc(100% - 112px);
          .checkbox{
            display: flex;
            align-items: flex-start;
            .checkbox-content-qx{
              margin-right: 24px;
            }
          }
        }
        ::v-deep .timePicker{
          width: 228px;
          height: 32px;
          .el-range__icon{
            line-height: 27px;
          }
          .el-range__close-icon{
            line-height: 27px;
          }
        }
        ::v-deep .phone{
          width: 228px;
          height: 32px;
          border-radius: 2px 2px 2px 2px;
        }
      }
      .table-item{
        .btn{
          padding: 10px 12px;
          margin:0 0 16px 0;
        }
      }
      .empty{
        margin: 0 auto;
        height: 276px;
        text-align: center;
        .img{
          width: 108px;
          height: 108px;
          margin-bottom: 12px;
          margin-top: 30px;
        }
        .p1{
          color: #232323;
          font-size: 14px;
        }
        .p2{
          color: rgba(35,35,35,0.4);
          font-size: 12px;
          margin-top: 8px;
          margin-bottom: 16px;
        }
        .btn{
          padding: 10px 12px;
        }
      }
    }
    ::v-deep .dialog-claim{
      margin:0 !important;
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      .el-dialog__header{
        display: block;
        padding:16px 20px;
        border-bottom: 1px solid #EEEEEE;
        font-size: 16px;
        font-weight: 700;
        color: #232323;
      }
      .el-dialog__body{
        padding: 24px 20px;
        font-size: 14px;
        .add-content{
          .input{
            display: -webkit-box;
            align-items: flex-start;
            line-height: 32px;
            margin-bottom: 12px;
            .label{
              font-size: 14px;
              color: rgba(35,35,35,0.8);
              width: 90px;
              text-align: right;
            }
            .name{
              width: 340px;
              height: 32px;
              margin-left: 12px;
              border-radius: 2px;
            }
            .el-input__inner{
              height: 32px;
            }
          }
        }
      }
      .el-dialog__footer{
        padding: 0;
      }
      .dialog-footer{
        border-top: 1px solid #EEEEEE;
        padding: 16px 20px;
      }
    }
    ::v-deep .dialog-confirm{
      .el-dialog__header{
        display: block;
        padding:20px 20px 8px 20px;
        font-size: 16px;
        color: #232323;
        font-weight: 700;
        line-height: 24px;
        img{
          width: 24px;
          height: 24px;
          margin-right: 12px;
          float: left;
        }

      }
      .el-dialog__body{
        padding: 0 20px 24px 20px;
        color: #666666;
        .text{
          padding-left: 36px;
        }
      }
    }
  }
</style>
