<template>
    <div class="commodity-pass-page">
        <Card>
        <div class="top-info">
            <div class="left">
                <label class="label">商户通证地址：</label>
                <span class="value">
                    {{tokenImgData.externalTokenAddr}}
                </span>
                &nbsp;<Button type="default" size="small" @click="handleCopy">复制</Button>
            </div>
            <div class="right">
              <label class="label">地址二维码：</label>

                <img :src="tokenImgData.qrUrl" alt="" @click="clickImg" style="width:40px;height:40px ">
            </div>
        </div>
        <div class="search-con">
        <Input
          placeholder="请输入标识名称"
          class="search-input"
          v-model="searchContent.labelName"
          style="width: 200px"
          clearable
        />
        <Input
          placeholder="请输入商品编号"
          class="search-input"
          v-model="searchContent.goodsId"
          style="width: 200px"
          clearable
        />
        <Input
          placeholder="请输入商品名称关键字"
          class="search-input"
          v-model="searchContent.goodsName"
          style="width: 200px"
          clearable
        />
          <Select
          placeholder="请选择状态"
          class="search-input"
          style="width:200px"
          v-model="searchContent.status"
        >
          <Option value>全部</Option>
          <Option value="0">未绑定</Option>
          <Option value="1">已绑定</Option>
        </Select>
        <ButtonGroup class="search-btngroup">
          <Button @click="handleSearch" type="primary">搜索</Button>
          <Button type="primary" @click="handleRefresh">
            <Icon type="md-refresh" />
          </Button>
        </ButtonGroup>
            </div>
        <tables
        ref="tables"
        editable
        pagable
        v-model="tableData"
        :columns="columns"
        :currentPage="searchContent.pageNum"
        :pageSize="searchContent.pageSize"
        :totalSize="totalSize"
        :loading="loading"
        @on-change="handleCurrentChange"
      />
      <bigImg v-if="showImg" @clickit="viewImg" :imgSrc="tokenImgData.qrUrl" @click="viewImg"></bigImg>
      </Card>
    </div>
</template>
<script>
import Tables from '_c/tables'
import { formatTime } from '@/libs/tools'
import bigImg from './big-img.vue'
export default {
  inject: ['reload'],
  components: {
    Tables,
    bigImg
  },
  data () {
    return {
      showImg: false,
      searchContent: {
        goodsId: '',
        goodsName: '',
        status: '',
        pageNum: 1,
        pageSize: 10
      },
      columns: [
        { title: '编号', key: 'commodityPassId', minWidth: 120, align: 'center' },
        { title: '标识名称', key: 'labelName', width: 120, align: 'center' },
        { title: '绑定商品编号', key: 'goodsId', minWidth: 180, align: 'center' },
        { title: '绑定商品名称', key: 'goodsName', minWidth: 150, align: 'center' },
        { title: '可用数量', key: 'availableNumber', minWidth: 100, align: 'center' },
        { title: '状态',
          key: 'status',
          width: 100,
          align: 'center',
          render: (h, params) => {
            return h('div', params.row.status === 0 ? '未绑定' : '已绑定')
          }
        },
        { title: '入库时间',
          key: 'createTime',
          width: 160,
          align: 'center',
          render: (h, params) => {
            return h('div', formatTime(params.row.createTime))
          }
        },
        { title: '操作',
          width: 200,
          align: 'center',
          fixed: 'right',
          render: (h, params) => {
            let recordsBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  margin: '5px'
                },
                on: {
                  click: this.handleRecords(params.row)
                }
              },
              '操作记录'
            )
            let addGoodBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: this.handleAdd(params.row)
                },
                style: {
                  margin: '5px',
                  //   display: this.isBrand ? 'inline-block' : 'none'
                  display: params.row.status === 0 ? 'inline-block' : 'none'
                }
              },
              '发布商品'
            )
            return h('div', [recordsBtn, addGoodBtn])
          }
        }
      ],
      totalSize: 0,
      tableData: [],
      tokenImgData: {},
      loading: false
    }
  },
  methods: {
    clickImg (e) {
      this.showImg = true
      // 获取当前图片地址
      this.imgSrc = e.currentTarget.src
    },
    viewImg () {
      this.showImg = false
    },
    handleCopy () {
      console.log(1)
      this.$copyText(this.tokenImgData.externalTokenAddr).then((e) => {
        this.$Message.success('复制成功')
      })
    },
    handleSearch () {
      this.searchContent.pageNum = 1
      this.requestData()
    },
    handleCurrentChange (pageNum) {
      this.searchContent.pageNum = pageNum
      this.requestData()
    },
    handleRefresh () {
      this.reload()
    },
    requestData () {
      this.loading = true
      this.api({
        apiName: 'externalTokenList',
        postdata: this.searchContent,
        success: (res) => {
          this.totalSize = res.data.total
          this.tableData = res.data.records
        },
        complete: () => {
          this.loading = false
        }
      })
    },
    tokenRead () {
      this.api({
        apiName: 'externalTokenRead',
        success: (res) => {
          this.tokenImgData = res.data
        }
      })
    },
    handleRecords (row) {
      return () => {
        this.$router.push({ name: 'trading_records', query: { commodityPassId: row.commodityPassId, labelName: row.labelName } })
      }
    },
    handleAdd (row) {
      return () => {
        let query = { labelName: row.labelName, commodityPassId: row.commodityPassId, availableNumber: row.availableNumber }
        this.$router.push({ name: 'commodity_add_good', query })
      }
    }
  },
  created () {
    this.tokenRead()
    this.requestData()
  }
}
</script>
<style lang="less" scoped>
.commodity-pass-page {
  .top-info {
    display: flex;
    justify-content: space-between;
    .left,.right{
      display: flex;
      align-items: center;
    }
  }
    .search-con {
        padding: 10px 0;
    }
    .search-input {
        margin-right: 10px;
    }
}
</style>
