<template>
  <page-header-wrapper>
    <div @click="Tablevisible=false">
      <DeviceTag />
      <!-- 头部搜索 -->
      <div class="table ">
        <a-form>
          <a-row :gutter="24">
            <a-col :md="12" :lg="4" :xs="12" class="mb-15">
              <a-input placeholder="请输入设备序列号" v-model="queryParam.BusinessId"></a-input>
            </a-col>
            <a-col :md="12" :lg="4" :xs="12" class="mb-15">
              <a-input placeholder="请选择客户" v-model="queryParam.BusinessName" @click.stop="Tablevisible=true" />
            </a-col>
            <a-col :md="12" :lg="4" :xs="12" class="mb-15">
              <a-input placeholder="请输入手机号" v-model="queryParam.TelPhone" />
            </a-col>
            <a-col :md="12" :lg="4" :xs="12" class="mb-15">
              <a-select v-model="Type" @change="handleChangeType" class="select">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">未激活</a-select-option>
                <a-select-option value="2">正常</a-select-option>
                <a-select-option value="3">销毁</a-select-option>
                <a-select-option value="4">已撤销</a-select-option>
                <a-select-option value="5">已销毁</a-select-option>
              </a-select>
            </a-col>
            <a-col :md="12" :lg="4" :xs="12" class="mb-15">
              <a-select default-value="0" v-model="Status" @change="handleChangeStatus" class="select">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">小白WIFI秤</a-select-option>
                <a-select-option value="2">小白4G秤</a-select-option>
              </a-select>
            </a-col>
            <a-col :md="12" :lg="4" :xs="12" class="mb-15">
              <a-input placeholder="请输入备注" v-model="queryParam.remarks" />
            </a-col>
          </a-row>
          <a-row :style="{ textAlign: 'right' }">
            <a-col :md="24" :xs="24" class="mb-15">
              <a-button type="primary" html-type="submit" @click="handleSubmit">查询</a-button>
            </a-col>
          </a-row>
        </a-form>
        <!-- 选择客户 -->
        <create-table
          ref="createTable" 
          v-show="Tablevisible" 
          :loading="confirmLoading" 
          @ok="handleTableOk" 
        />

        <!-- 表格 -->
        <a-table
          ref="table" 
          bordered 
          :columns="columns" 
          :data-source="data"
          :scroll="{x: 1200}"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
          <a slot="equname" slot-scope="text,record">
            <span @click="handleSub(record)">{{ text }}</span>
          </a>
          <a slot="bindcount" slot-scope="text">
            <a-tooltip placement="bottomRight">
              <template slot="title">
                <span>查看绑定情况</span>
              </template>
               <router-link :to="{ path: '/device/Bindcount' }">
                {{ text }}
              </router-link>
            </a-tooltip>
          </a>
          <span slot="customTitle">绑定人数</span>
          <span slot="Type" slot-scope="text">{{ text==1?'小白WIFI秤':'小白4G秤' }}</span>
          <span slot="status" slot-scope="text">
            <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
          </span>
          <span slot="createtime" slot-scope="createtime"> {{ createtime | formatDate }} </span>
          <a slot="action" slot-scope="text, record" @click="handleEdit(record)">编辑</a>
          <template slot="title" >
            <a-row>
              <a-col :span="24">
                <div class="f-l">
                  <a-button type="primary" @click="handleAdd" class="mr-15">新增 </a-button>
                  <a-button type="primary" @click="handleAlloc" :disabled="disabled" class="mr-15">分配 </a-button>
                  <a-button type="primary" @click="handleReback" :disabled="disabled">回收 </a-button>
                </div>
              </a-col>
            </a-row>
          </template>
        </a-table>
      </div>
      <!-- 编辑 -->
      <create-form 
        ref="createModal" 
        :visible="visible" 
        :loading="confirmLoading" 
        :model="mdl" 
        @cancel="handleCancel"
        @ok="handleOk" />
      <!-- 选择服务商 -->
      <Service-table :visible="Servicevisible" :loading="confirmLoading" @ok="handleServiceOk" @cancel="handleServiceCancel" />
      <!-- 设备二维码 -->
      <a-modal v-model="visibleQuname" title="设备二维码" @ok="visibleQuname = false" :footer="null" width="300px">
        <div class="img"><img :src="headimgurl" /></div>
      </a-modal>
    </div>
  </page-header-wrapper>

</template>

<script>
  
  const columns = [{
      title: '客户',
      dataIndex: 'RealName',
    },
    {
      title: '设备名称',
      dataIndex: 'equname',
      scopedSlots: {
        customRender: 'equname'
      }
    },
    {
      title: '设备型号 ',
      dataIndex: 'Type',
      scopedSlots: {
        customRender: 'Type'
      },
    },
    {
      title: '设备状态',
      dataIndex: 'status',
      needTotal: true,
      scopedSlots: {
        customRender: 'status'
      }
    },
    {
      title: '最近测量时间',
      dataIndex: 'createtime',
      width:180
    },
    {
      title: '手机号',
      dataIndex: 'TelPhone',
      width:120
    },
    {
      dataIndex: 'bindcount',
      key: 'bindcount',
      slots: {
        title: 'customTitle'
      },
      scopedSlots: {
        customRender: 'bindcount'
      },
    },
    {
      title: '备注',
      dataIndex: 'Desc',
      width:120,
      ellipsis: true,
    },
    {
      title: '操作',
      key: 'action',
       fixed: 'right',
       width:60,
      scopedSlots: {
        customRender: 'action'
      },
    },
  ]
  const statusMap = {
    0: {
      status: 'default',
      text: '关闭'
    },
    1: {
      status: 'processing',
      text: '运行中'
    },
    2: {
      status: 'success',
      text: '正常'
    },
    3: {
      status: 'error',
      text: '异常'
    }
  }
  import CreateForm from './components/CreateForm'
  import CreateTable from '../components/CreateTable'
  import ServiceTable from './components/ServiceTable'
  import DeviceTag from '@/components/device/device.vue'
  import data from '@/static/data.json'
  export default {
    components: {
      CreateForm,
      CreateTable,
      ServiceTable,
      DeviceTag,
    },
    data() {
      return {
        data,
        columns,
        visibleQuname: false,
        headimgurl:'',
        disabled: true,
        selectedRowKeys: [],
        loading: false,
        userClick: true,
        Type: '请选择设备状态',
        Status: '请选择型号',
        // ipagination: {
        //   current: 1,
        //   pageSize: 10,
        //   total: data.length,
        //   showSizeChanger: true,
        //   pageSizeOptions: ['10','20','30'],  //这里注意只能是字符串，不能是数字
        //   showTotal: (total, range) => `共有 ${total}条`
        // },
        // 查询参数
        queryParam: {
          BusinessId: '',
          Type: 0,
          Status: 0,
        },
        visible: false,
        confirmLoading: false,
        mdl: null,
        Tablevisible: false,
        Servicevisible: false,
      }
    },
    filters: {
      statusFilter(type) {
        return statusMap[type].text
      },
      statusTypeFilter(type) {
        return statusMap[type].status
      }
    },
    created() {
      this.data = data.data
    },
    computed: {
      hasSelected() {
        return this.selectedRowKeys.length > 0
      },
    },
    methods: {
      onShowSizeChange(current, pageSize) {
         console.log(current, pageSize)
       },
      handleAdd() {
        this.mdl = null
        this.visible = true
        this.confirmLoading = false
      },
      handleEdit(record) {
        this.visible = true
        this.mdl = { ...record
        }
      },
     
      // 绑定情况
      handleSub(record) {
        console.log(record)
        this.headimgurl=record.headimgurl
        this.visibleQuname=true
      },
      
      //选择客户
      handleTableOk(item) {
        this.Tablevisible = false
        this.confirmLoading = true
        console.log(item)
      },
      //分配
      handleAlloc() {
        if (this.selectedRowKeys.length <= 0) {
          this.$message.info('请选择设备')
        } else {
          console.log('111')
          this.Servicevisible = true
          this.confirmLoading = false
        }
      },
      //选择服务商
      handleServiceOk(data) {
        console.log(data)
      },
      //取消选择服务商
      handleServiceCancel() {
        this.Servicevisible = false
      },
      //回收
      handleReback() {
        console.log(this.selectedRowKeys)
        if (this.selectedRowKeys.length <= 0) {
          this.$message.info('请选择设备')
        } else {
          this.$confirm({
            content: '确定回收？',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
              console.log('OK')
            },
            onCancel() {
              console.log('Cancel')
            },
          })
        }
      },
      //搜索
      handleSubmit() {
        console.log(this.queryParam)
      },

      // 取消添加/编辑
      handleCancel() {
        console.log('取消')
        this.visible = false
        const form = this.$refs.createModal.form
        form.resetFields()
      },
      // 确定添加/编辑
      handleOk() {
        const that = this
        const form = that.$refs.createModal.form
        that.confirmLoading = true
        form.validateFields((errors, values) => {
          if (!errors) {
            console.log('values', values)
            if (values.id) {
              // 修改 e.g.
              new Promise((resolve, reject) => {
                setTimeout(() => {
                  resolve()
                }, 1000)
              }).then(res => {
                that.visible = false
                that.confirmLoading = false
                form.resetFields()
                that.$message.info('修改成功')
              })
            } else {
              // 新增
              new Promise((resolve, reject) => {
                setTimeout(() => {
                  resolve()
                }, 1000)
              }).then(res => {
                that.visible = false
                that.confirmLoading = false
                form.resetFields()
                that.$refs.table.refresh()

                that.$message.info('新增成功')
              })
            }
          } else {
            that.confirmLoading = false
          }
        })
      },
      //选择表格
      onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys)
        this.selectedRowKeys = selectedRowKeys
        if (selectedRowKeys.length > 0) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      },
      //
      handleChangeStatus(value) {
        console.log(`selected ${value}`)
        this.queryParam.Status = value
      },
      handleChangeType(value) {
        console.log(`selected ${value}`)
        this.queryParam.Type = value
      },
      handleLock() {
        this.$router.push('/device/Bindcount')
      }
    },
  }
</script>
<style lang="less" scoped="scoped">
  .table {
    position: relative;
    background-color: #fff;
    margin-top: 20px;
    padding: 15px 25px;
  }
  .img{
    width: 100%;
    text-align: center;
    img{
      width: 180px;
      height: 180px;
    }
  }
</style>
