<template>
    <d2-container>
        <div v-if="isExpend" class="d2-fl d2-tree-view" >
            <pubilc-tree ref="Tree" :type="type" @orgId="getOrgId"  @action="action" ></pubilc-tree>
        </div>
        <div @click="isExpend = !isExpend" :class="[{'angle-view':isExpend},{'angle-view-none':!isExpend}]">
            <i :class="['fa', {'fa-angle-left':isExpend},{'fa-angle-right':!isExpend}]"></i>
        </div>
        <div :class="[{'d2-fl':isExpend},{'d2-table-view':isExpend},{'d2-table-view-full':!isExpend}]" >
            <div class="d2-table-view-header">
                <el-form label-width="100px" labelPosition="right" size="small" :inline="true" :model="filter" @keyup.enter.native="handleList" class="demo-form-inline">
                    <el-form-item label="人员工号">
                        <el-input style="width: 192px" v-model="filter.channelNm" placeholder="车道名称" clearable/>
                    </el-form-item>
                    <el-form-item label="停车卡类型" prop="areaId">
                        <el-select v-model="filter.areaId" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.areaId"
                                    :label="item.areaNm"
                                    :value="item.areaId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="下发状态" prop="areaId">
                        <el-select v-model="filter.areaId" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.areaId"
                                    :label="item.areaNm"
                                    :value="item.areaId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="卡号">
                        <el-input style="width: 192px" v-model="filter.channelNm" placeholder="车道名称" clearable/>
                    </el-form-item>
                    <el-form-item>
                        <el-button   type="primary" @click="handleList('1')">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="d2-table-view-content">
                <div class="d2-table-view-handle">
                    <el-button @click="onCreateClick" size="small">下发</el-button>
                    <el-button size="small" @click="onMutilDelClick">删除</el-button>
                    <el-button size="small">导出</el-button>
                </div>
                <d2-crud
                        title="车辆名单"
                        ref="d2Crud"
                        :options="tableOptions"
                        :loading="loading"
                        :columns="columns"
                        :data="data"
                        @edit="handleRowEdit"
                        @delete="handleRowRemove"
                        selection-row
                        @selection-change="handleSelectionChange"
                >
                </d2-crud>
            </div>
            <div class="d2-table-view-footer">
                <el-pagination
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        :page-size="tableOptions.pageList[0]"
                        :page-sizes="tableOptions.pageList"
                        :current-page.sync="currentPage"
                        layout="total,sizes, prev, pager, next,jumper"
                        :total="pagination.total"
                ></el-pagination>
            </div>
        </div>
        <el-dialog
                :title="diaLogName"
                :visible.sync="operVisible"
                @close="clearForm"
                width="40%"
                :close-on-click-modal="false"
        >
            <el-form ref="form" :model="form" label-width="110px" labelPosition="right" :rules="rules">
                <el-row :gutter="15">
                    <el-col :span="24">
                        <el-form-item label="选择人员" prop="channelId">
                            <el-input maxlength="20" disabled v-model.trim="form.channelId" placeholder="系统自动生成"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="选择设备" prop="channelNm">
                            <el-input maxlength="10" v-model.trim="form.channelNm"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <zl-button :loading="staLoading" @click="operInstance">下发</zl-button>
      </span>
        </el-dialog>
    </d2-container>
</template>
<script>
  import { tableOptions } from '../../../../assets/options'
  import {getAreaOptions} from '@/api/parking/costRules'
  import {getMangeTrafficList,getWorkStationOptions,getEquipmentOptions,saveOrUpdateTraffic,getTrafficById,onDeleteTraffic} from '@/api/parking/mangeTraffic'
  export default {
    name: 'cateUser',
    components: {

    },
    data () {
      return {
        isExpend:true,
        type:'equ',
        schannelIds:[],
        schannelIdss:"",
        equipmentOptions:[],
        workStationOptions:[],
        options:[],
        time:"",
        options:[],
        stationId:[],
        stationIds:"",
        isCreate:false,
        userId:"",
        staLoading: false,
        multipleSelection:[],
        func: {
          add: false,
          delete: false,
          update: false,
          select: false
        },
        falg: true,
        isExpend: true,
        tableOptions,
        loading: false,
        operVisible: false,
        diaLogName: '车场名单下发',
        lanuchs: [],
        form: {
          channelId:"",
          channelNm:"",
          ioTyp:"",
          openMode:"",
          areaId:"",
          stationId:"",
          eqpId:""
        },
        filter: {
          pageSize: 10,
          pageNum: 1,
          channelNm:"",
          areaId:""
        },
        pagination: {
          total: 0
        },
        currentPage: 1,
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        columns: [
          {
            title: '人员编号',
            key: 'channelId',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '人员姓名',
            key: 'channelNm',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '部门名称',
            key: 'channelNm',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '车牌号码',
            key: 'ioTyp',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '车辆型号',
            key: 'areaNm',
            minWidth: '150',
            showOverflowTooltip: true
          },
          {
            title: '车辆颜色',
            key: 'staticonNm',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '名单类型',
            key: 'openMode',
            minWidth: '90',
            // formatter (row, column, cellValue, index) {
            //   if (cellValue === "0") {
            //     return '否'
            //   }else if(cellValue === "1"){
            //     return '是'
            //   }
            // }
          },
          {
            title: '停车卡类型',
            key: 'eqpNm',
            minWidth: '150',
            showOverflowTooltip: true
          },
          {
            title: '有效开始时间',
            key: 'eqpNm',
            minWidth: '150',
            showOverflowTooltip: true
          },
          {
            title: '有效结束时间',
            key: 'eqpNm',
            minWidth: '150',
            showOverflowTooltip: true
          },
          {
            title: '车牌颜色',
            key: 'eqpNm',
            minWidth: '150',
            showOverflowTooltip: true
          },
          {
            title: '车位',
            key: 'eqpNm',
            minWidth: '150',
            showOverflowTooltip: true
          },
          {
            title: '车辆图片',
            key: 'eqpNm',
            minWidth: '150',
            showOverflowTooltip: true
          },
          {
            title: '储值余额',
            key: 'eqpNm',
            minWidth: '150',
            showOverflowTooltip: true
          },
          {
            title: '卡号',
            key: 'eqpNm',
            minWidth: '150',
            showOverflowTooltip: true
          },
          {
            title: '区域',
            key: 'eqpNm',
            minWidth: '150',
            showOverflowTooltip: true
          },
          {
            title: '下发状态',
            key: 'eqpNm',
            minWidth: '150',
            showOverflowTooltip: true
          },
          {
            title: '下发时间',
            key: 'eqpNm',
            minWidth: '150',
            showOverflowTooltip: true
          },
        ],
        data: [],
        rules: {
          channelNm:[{required: true, message: '车道名称不能为空', trigger: 'blur'}],
          eqpId:[{required: true, message: '请选择对应设备', trigger: 'blur'}],
        }
      }
    },

    methods: {
      action(data){
        if(data.alias === 'top'){
          this.filter.parentId = ''
        }else{
          this.filter.parentId = data.id
        }
        this.falg = false
        this.quId = data.id
        this.quName = data.name
        this.form.parentId = data.id
        this.form.superName = data.name
        this.handleList()
      },
      getOrgId(val){
        this.form.orgId = val
      },

      onCreateClick(){
        this.operVisible=true
      },
      handleTreeNode () {
        this.handleList()
      },
      handleList (val) {
        if (val) {
          this.filter.pageNum = 1
          this.currentPage = 1
        }
        this.loading = true
        // getMangeTrafficList(this.filter)
        //   .then(res => {
        //     // console.log(res)
        //     this.loading = false
        //     this.data = res.page.list
        //     this.pagination.total = res.page.total
        //   })
        //   .catch(err => {
        //     this.loading = false
        //   })
      },
      handleSelectionChange(val) {
        this.isCreate=false
        this.multipleSelection = val;
      },
      handleCurrentChange (val) {
        this.filter.pageNum = val
        this.handleList()
      },
      handleSizeChange (val) {
        this.filter.pageNum = 1
        this.filter.pageSize = val
        this.handleList()
      },
      operInstance (val) {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.staLoading = true
            // saveOrUpdateTraffic(this.form).then(res => {
            //   this.staLoading = false
            //   this.clearForm()
            //   if (val == 2) {
            //     this.operVisible = false
            //     this.$message({
            //       message: '操作成功',
            //       type: 'success'
            //     })
            //     this.handleTreeNode()
            //   } else {
            //     this.clearForm()
            //   }
            //
            // }).catch(err => {
            //   this.staLoading = false
            // })
          }
        })
      },
      handleRowEdit ({index, row}) {
        this.diaLogName = '修改'
        // this.form.stationId=row.stationId
        // getTrafficById({channelId:row.channelId}).then(res => {
        //   this.form = res.parkChannel
        // })
        this.operVisible = true
      },
      onMutilDelClick(){
        if(!this.multipleSelection.length){
          this.$message({
            message: '请选择记录',
            type: 'warning'
          })
        }else{
          this.$confirm(`确定删除当前车道?`, '确认操作', {
            confirmButtonText: '确定',
            cancelButtonText: '放弃',
            type: 'warning'
          }).then(() => {
            this.multipleSelection.forEach((item,index)=>{
              this.schannelIds.push(item.channelId)
            })
            this.schannelIdss=this.schannelIds.join(",")
            // onDeleteTraffic({channelIds:this.schannelIdss}).then(res=>{
            //   this.$message({
            //     message: '删除成功',
            //     type: 'success'
            //   })
            //   this.handleTreeNode()
            // })
          })
        }
      },
      handleRowRemove ({index, row}) {
        // console.log(row)
        this.$confirm(`确定删除当前车道?`, '确认操作', {
          confirmButtonText: '确定',
          cancelButtonText: '放弃',
          type: 'warning'
        }).then(() => {
          // onDeleteTraffic({channelIds:row.channelId}).then(res=>{
          //   this.$message({
          //     message: '删除成功',
          //     type: 'success'
          //   })
          //   this.handleTreeNode()
          // })
        })
      },
      clearForm () {
        this.form = {}
        this.diaLogName = '新增'
      },
    },
    mounted () {
      this.filter.pageSize = this.tableOptions.pageList[0]
      this.tableOptions = this.$calcTableHeight(tableOptions, 102)
      this.handleTreeNode()
    }
  }
</script>
<style>
    .d2-table-view-full{
        height: 100%;
    }
    .timeBox{
        margin-top: 10px;
    }
    .timePay{
        margin-left: 8px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .timeLabel label{
        width: 110px !important;
    }
    .bankLabel label{
        font-size: 13px;
    }
    .el-form-item__label {
        text-align: left !important;
    }
    .d2-table-view{
        overflow: hidden;
    }
    .d2-table-view-content{
        height: 100%;
    }
    .el-table{
        height: 450px !important;
    }
</style>