<template>
  <div class="app-container">

    <div class="filter-container">
    <el-input v-model="search.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item" @keyup.enter.native="searchData"/>
    <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
      搜索
    </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-plus"
        @click="$router.push({name:'增加客户档案'})">
        增加客户档案
      </el-button>
    </div>
    <el-table
      :data="tableData"
      v-loading="listLoading"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all>
      <el-table-column
        prop="clientCode"
        label="客户编号">
      </el-table-column>
     <el-table-column
        label="客户名称"
        prop="clientName"
      >
      </el-table-column>
      <el-table-column
        prop="addressArea"
        label="客户区域">
      </el-table-column>
      <el-table-column
        prop="addressTagName"
        label="客户地址">
      </el-table-column>

      <el-table-column
        prop="remark"
        label="备注说明">
      </el-table-column>
      <el-table-column
        prop="saleMan"
        label="所属业务员">
      </el-table-column>

      <el-table-column
        prop="clientLevel"
        label="客户级别">
      </el-table-column>
      <el-table-column
        prop="sendKind"
        label="默认发货方式">
      </el-table-column>
      <el-table-column align="center" label="状态" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <el-tag v-if="row.voidFlag==0" type="success">
            启用
          </el-tag>
          <el-tag v-else="row.voidFlag==1" type="danger">
            禁用
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button @click="$router.push({path:'/baseInfo/editClient',query:{id:row.id}})" type="primary" size="mini">
            编辑
          </el-button>
          <el-button @click="handleBalanceLimit(row)" type="warning" size="mini">
            设置信用额度
          </el-button>
          <div style="margin-top: 10px">
          <el-button @click="editStatus(row.id,'1')" type="danger" v-if="row.voidFlag==0" size="mini">
            禁用
          </el-button>
          <el-button @click="editStatus(row.id,'0')" v-else="row.voidFlag==1" size="mini">
            启用
          </el-button>
          </div>


        </template>
      </el-table-column>

    </el-table>
    <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page" :limit.sync="listData.pageSize" @pagination="getClientInfo" />

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" >
      <el-form label-width="130px" label-position="right">
        <el-form-item label="信用额度">
         <el-input :disabled="true" v-model="balanceLimit"></el-input>
        </el-form-item>
        <el-form-item label="设置信用额度">
          <el-input v-model="balance.balacneLimit"></el-input>
        </el-form-item>
        <el-form-item label="欠款标记">
          <el-radio v-model="balance.debtFlag" :label="0">是</el-radio>
          <el-radio v-model="balance.debtFlag" :label="1">否</el-radio>
        </el-form-item>
<!--        <el-form-item label="客户预存款余额">-->
<!--          <el-input v-model="balanceLimit.balanceMoney"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="欠款禁用到期时间">
          <el-date-picker
            v-model="balance.debtTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="激活密码">
          <el-button @click="getActivePwd()" type="primary" >
            获取激活密码
          </el-button>

          <span id="activePassword">{{balance.activePassword}}</span>
<!--          <button class="btn" @click="copyLink" data-clipboard-action="copy" data-clipboard-target="#activePassword">复制-->
<!--          </button>-->
          <el-button v-if="balance.activePassword != ''" class="btn" @click="copyLink" size="mini" data-clipboard-action="copy" data-clipboard-target="#activePassword">复制</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveBalance()">确 定</el-button>
      </div>
    </el-dialog>
<!--    <servicedialog @tableRefresh="tableRefresh" ref="menuDialog" :dialogStatus="dialogStatus" :menuId="menuId" :titleDialog="titleDialog" :dialogVisible="dialogVisible"/>-->
    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog"></cancledialog>
  </div>
</template>

<script>
  import {getClientInfoList,getActivePassword,getBalanceLimit,saveBalanceLimit} from '@/api/baseInfo/client/clientInfo.js'
  import Cancledialog from '@/components/Dialog/Cancledialog.vue'
  import Pagination from '@/components/Pagination'
  import Clipboard from 'clipboard'

  export default {
    components: {
      Cancledialog,Pagination
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          0: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        dialogStatus: 1,//1增加，2修改
        dialogTitle: '',
        dialogVisible: false,
        search: {
          keyWord:''
        },
        balanceLimit:'',
        balance:{
          clientId: '',
          debtFlag: 0,
          balacneLimit:'',
          debtTime:'',
          activePassword:''
        },
        options:[],

        listData:{
          total:0,
          page: 1,
          pageSize:10
        },

        confirmdialog:false,
        listLoading: false,
        tableData: [],
        menuId:''
      }
    },
    mounted() {
      this.getClientInfo();
    },
    methods: {
      //获取客户列表
      getClientInfo() {
        const _that = this
        _that.listLoading = true
        var params = _that.search;
        var page = {
          pageIndex:_that.listData.page,
          pageSize: _that.listData.pageSize,
        }
        var data = {
          "params": JSON.stringify(params),
          "page": JSON.stringify(page),
        }
        // console.log(data);
        getClientInfoList(data).then(response => {
          console.log(response)
          const data = response.data
          // //  组合表单数据
          _that.tableData = data
          _that.listData.total = response.total
          // console.log(_that.tableData)
          _that.listLoading = false
        }).catch(err => {
          _that.$message.error(err)
          _that.listLoading = false
        })
      },
      //设置信用额度
      handleBalanceLimit(row){
        const _that = this
        _that.dialogTitle = '信用额度设置'
        _that.dialogVisible = true;
        _that.getBalance(row.id);

      },
      //获取信用额度
      getBalance(id){
        const _that = this

        var data = {
          id:id
        }
        getBalanceLimit(data).then(response => {
          console.log(response)
          if (response.httpCode == 200) {
            var data = response.data
            _that.balanceLimit = data.balacneLimit
            _that.balance={
              clientId: data.clientId,
              debtFlag: data.debtFlag,
              balacneLimit:data.balacneLimit,
              debtTime:data.debtTime,
              activePassword:'',
            }
          } else {
            _that.$message.error(res.msg)
          }
        }).catch(err => {
          _that.$message.error(err)
        })
      },
      //获取激活密码
      getActivePwd(){
        const _that = this

        var data = {}
        getActivePassword(data).then(response => {
          console.log(response)
          if (response.httpCode == 200) {
            _that.balance.activePassword = response.data
          } else {
            _that.$message.error(res.msg)
          }
        }).catch(err => {
          _that.$message.error(err)
        })
      },

      //复制
      copyLink () {
        var _that = this
        let clipboard = new Clipboard('.btn')
        clipboard.on('success', e => {
          _that.$message({
            message: '复制成功',
            type: 'success'
          });
          clipboard.destroy() // 使用destroy可以清楚缓存
        })
        clipboard.on('error', e => {
          _that.$message.error('复制失败')
          clipboard.destroy()
        })
      },

      //保存信用额度
      saveBalance(){
        const _that = this
        var info = JSON.stringify(_that.balance)
        var data = {
          clientBalanceLimit:info
        }
        // console.log(data);
        // return
        saveBalanceLimit(data).then(response => {
          console.log(response)
          if (response.httpCode == 200) {
            _that.dialogVisible = false
            _that.$message({
              message: '设置成功',
              type: 'success'
            });
            _that.tableRefresh();
          } else {
            _that.$message.error(res.msg)
          }
        }).catch(err => {
          _that.$message.error(err)

          _that.dialogVisible = true
        })
      },
      //刷新变革
      tableRefresh(){
        //刷新变革
        this.getClientInfo()
      },
      //启用禁用
      editStatus(id,status){
        var _that = this;
        var printerTypeInfo = {
          id:id,
          voidFlag:status
        }
        var params = {
          "info": JSON.stringify(printerTypeInfo),
        }

        var url = '/baseinfo/voidClientInfo';
        _that.$refs.confirmDialog.updataClick(params, url);
      },
      //搜索
      searchData(){
        this.listData.page = 1;
        this.getClientInfo()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .filter-container {
    margin-bottom: 15px;
  }
</style>
