<style>
@import '../../assets/css/customerManage.css';
</style>
<template>
  <div class="customerManage">
    <div class="tools">
        <h1>客户审批</h1>
        <div style="width: 340px;">
            <el-input placeholder="请输入客户名称/手机" v-model="msg.CustomerName" class="input-with-select">
                <el-button slot="append"  icon="el-icon-search" @click="getList"></el-button>
            </el-input>
        </div>
        <div>&nbsp;</div>
    </div>
    <div class="query-box" :style="{'padding-bottom': '10px'}">
         <el-row v-if="!multipleSelection.length" :gutter="30">
            <el-col :span="4">
                <span class="font-size-12" style="padding-right: 10px">客户类型</span>
                <el-select size="mini" v-model="msg.CustomerStatus" placeholder="请选择" @change="getList">
                    <el-option
                            v-for="item in WhereTypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                </el-select>
            </el-col>
        </el-row>
        <div v-else class="flex-center">
            <p class="font-size-12">已选 <span class="font-color-link">{{multipleSelection.length}}</span> 项</p>
            <!-- <div class="selection-box">
               <el-button  v-for="(item, index) in selectionList" :key="index" @click="item.myFun"><i :class="item.class"></i>{{item.name}}</el-button>
            </div> -->
        </div>
    </div>
    <div class="page-content">
        <el-table 
            v-if="loading"
            v-loading="true"
            :data="[]">
            <el-table-column 
                v-for="(item, index) in queryType2" :key="index"
                :label="item.label">
            </el-table-column>
        </el-table>
        <el-table
            v-if="!loading"
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            height="660"
            border
            row-class-name="font-size-12"
            @selection-change="handleSelectionChange">
            <el-table-column fixed type="selection" width="40"></el-table-column>
            <el-table-column 
                fixed
                prop="CustomerName"
                label="客户名称"
                width="120"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <p @click="openDetails(scope)" class="font-color-link cp">{{scope.row.CustomerName}}</p>
                </template>
            </el-table-column>
            <el-table-column
                prop="Contact"
                label="联系人"
                v-if="queryType[1].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="ContactNumber"
                label="联系电话"
                v-if="queryType[2].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="creatTime"
                label="提交时间"
                v-if="queryType[3].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="EmName"
                label="来源"
                v-if="queryType[4].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CustomerStatus"
                label="状态"
                v-if="queryType[5].show"
                show-overflow-tooltip>
                <template  slot-scope="scope">
                    <span v-if="scope.row.CustomerStatus === 0 || scope.row.CustomerStatus === 1" class="font-color-warning">待审批</span>
                    <span v-if="scope.row.CustomerStatus === 2 || scope.row.CustomerStatus === 3" class="font-color-success">已审批</span>
                </template>
            </el-table-column>
            <el-table-column 
                width="40"
                fixed="right">
                <template slot="header" slot-scope="scope">
                    <el-popover
                        placement="bottom"
                        width="240">
                        <mySelect :queryType="queryType" @listenTochildEvent="showMessageFromChild"/>
                        <i class="el-icon-s-operation cp" slot="reference"></i>
                    </el-popover>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div>
        <el-pagination
            class="Mypagination"
            background
            @current-change="handleCurrentChange"
            :page-sizes="[30, 60, 90, 100]"
            :page-size="msg.pageSize"
            layout="sizes, prev, pager, next"
            @size-change="handleSizeChange"
            :total="total">
        </el-pagination>
    </div>
   <el-drawer
        :with-header="false"
        size='30%'
        :visible.sync="drawer"
        direction="rtl"
        :before-close="handleClose">
        <approvalBox :CustomerId="CustomerId" :CustomerStatus="CustomerStatus" @getList="reload()"/>
    </el-drawer>
  </div>
</template>
<script>
import mySelect from "../dialogModel/select";
import approvalBox from "./approvalBox"
export default {
    components: {
        mySelect,
        approvalBox
    },
  data() {
    return {
        CustomerId: 0,
        queryType2: [
            {
                label: '客户名称',
                show: true,
            },{
                label: '联系人',
                show: true,
            },{
                label: '电话',
                show: true,
            },{
                label: '提交时间',
                show: true,
            },{
                label: '来源',
                show: true,
            },{
                label: '状态',
                show: true,
            }
        ],
        queryType: [
            {
                label: '客户名称',
                show: true,
            },{
                label: '联系人',
                show: true,
            },{
                label: '电话',
                show: true,
            },{
                label: '提交时间',
                show: true,
            },{
                label: '来源',
                show: true,
            },{
                label: '状态',
                show: true,
            }
        ],
        drawer: false,
        loading: true,
        tableData: [],
        multipleSelection: [],
        userInfo: {},
        msg:{
            pageIndex:1,
            pageSize:30,
            CustomerStatus:-1,
        },
        CustomerStatus: 0,
        total: 0,
        WhereTypeList: [
            {
                id: -1,
                name: '全部'
            },{
                id: 1,
                name: '待审批'
            },{
                id: 2,
                name: '已审批'
            }
        ],
    };
  },
  mounted() {
      this.getList()
    },
  methods: {
    reload(){
        this.getList()
        this.drawer = false
    },
    showMessageFromChild(list){
        this.mySelectCtrl=!this.mySelectCtrl
        if (list) {
            this.queryType = list
            this.getList()
        }
    },
    getList(){
        this.apipost('/api/CustomerExamine/GetMyDeptCustomerList',this.msg,res=>{
            if(res.data.resultCode==1){
                this.tableData = res.data.data.pageData
                this.loading=false
            }else{
                this.$message.error(res.data.message)
            }
        },err=>{})
    },
    handleSizeChange(val) {
        this.msg.pageSize = val
        this.getList();
    },
    handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
    },
    handleSelectionChange(val) {
        this.multipleSelection = val.map(x=>
            x.CustomerId
        )
    },
    handleClose(done) {
        done();
    },
    openDetails(scope){ 
        this.drawer = true
        this.CustomerStatus = scope.row.CustomerStatus
        this.CustomerId = scope.row.CustomerId
        this.CustomerName = scope.row.CustomerName
        this.drawer = true
    },
  }
};
</script>
