<template>
  <div class="chain-management-page">
    <Card>
      <div class="search-con">
        <Input
          placeholder="请输入名称关键字或者通证标识"
          class="search-input"
          v-model="searchContent.keyword"
          style="width: 200px;margin-right:10px"
          clearable
        />
        <ButtonGroup class="search-btngroup">
          <Button type="primary" @click="handleSearch">查找</Button>
          <Button type="primary" @click="handleRefresh">
            <Icon type="md-refresh" />
          </Button>
        </ButtonGroup>
        <Button type="info" @click="handleAdd" style="margin-left: 20px"
          >+ 添加</Button
        >
      </div>
      <tables
        ref="tables"
        editable
        pagable
        v-model="tableData"
        :columns="columns"
        :currentPage="searchContent.pageNum"
        :pageSize="searchContent.pageSize"
        :totalSize="totalSize"
        :loading="loading"
        @on-change="handleCurrentChange"
      />
        <Modal
        :title="modalTitle"
        v-model="modalStatus"
        @on-cancel="handleCancel"
      >
        <div class="model-item">
          <label class="label">标识：</label>
          <Input
          placeholder="请输入通证标识，大写字母与数字，15字符以内"
          :maxlength="20"
          v-model="chainObj.passIdentification"
          :disabled="this.chainObj.passId !=''"
          />
        </div>
        <div class="model-item">
          <label class="label">名称：</label>
          <Input
          placeholder="请输入通证名称，20字以内"
            v-model="chainObj.name"
          />
        </div>
        <div class="model-item">
          <label class="label">备注：</label>
          <Input
          placeholder="请输入备注，200字以内"
          type="textarea"
            v-model="chainObj.remark"
          />
        </div>
        <div slot="footer">
          <Button
            type="primary"
            @click="handleSubmitAdd"
          >
            确定
          </Button>
        </div>
      </Modal>
    </Card>
  </div>
</template>
<script>
import Tables from '_c/tables'
import { formatTime } from '@/libs/tools'
import { BlockChainState, BlockChainStateObj } from '@/enums'
export default {
  inject: ['reload'],
  components: {
    Tables
  },
  data () {
    return {
      loading: false,
      modalStatus: false,
      modalTitle: '新增通证',
      chainObj: {
        blockChainId: '',
        passId: '',
        passIdentification: '',
        name: '',
        remark: '',
        updateTime: ''
      },
      searchContent: {
        keyword: '',
        pageNum: 1,
        pageSize: 10
      },
      columns: [
        { title: '编号', key: 'passId', align: 'left', minWidth: 150 },
        { title: '通证标识', key: 'passIdentification', align: 'center', minWidth: 100 },
        { title: '通证名称', key: 'name', align: 'center', minWidth: 100 },
        { title: '备注', key: 'remark', align: 'center', minWidth: 120 },
        { title: '状态',
          key: 'navigationName',
          align: 'center',
          minWidth: 100,
          render: (h, params) => {
            let obj = BlockChainStateObj[params.row.status]
            return h(
              'Tag',
              {
                props: {
                  color: obj.color
                }
              },
              obj.label
            )
          }
        },
        { title: '入库时间',
          key: 'createTime',
          align: 'center',
          minWidth: 150,
          render: (h, params) => {
            return h('span', formatTime(params.row.createTime))
          }
        },
        { title: '更新时间',
          key: 'updateTime',
          align: 'center',
          minWidth: 150,
          render: (h, params) => {
            return h('span', formatTime(params.row.updateTime))
          }
        },
        { title: '操作',
          key: 'navigationName',
          align: 'center',
          minWidth: 240,
          render: (h, params) => {
            let validState = params.row.status
            let statusBtn = h(
              'Button',
              {
                props: {
                  type: status == BlockChainState.STOP ? 'primary' : 'primary',
                  size: 'small'
                },
                on: {
                  click: this.handleUpdateStatus(params.row)
                },
                style: {
                  marginRight: '5px'
                  // display: status == OffShelfType.GROUNDING ? 'inline-block' : 'none'
                }
              },
              validState == BlockChainState.STOP ? '启 用' : '停 用'
            )
            let editBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: this.handleUpdate(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '编 辑'
            )
            let delBtn = h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: this.handleDelete(params.row)
                },
                style: {
                  marginRight: '5px',
                  display: validState == BlockChainState.STOP ? 'inline-block' : 'none'
                }
              },
              '删 除'
            )
            return h('div', [statusBtn, editBtn, delBtn])
          }
        }
      ],
      totalSize: 0,
      tableData: []
    }
  },
  created () {
    this.initData()
  },
  methods: {
    initData () {
      let blockChainId = this.$route.query.blockChainId
      this.name = this.$route.query.name

      this.searchContent = {
        blockChainId: blockChainId,
        keyword: '',
        pageNum: 1,
        pageSize: 10
      }
      this.requestData()
    },
    requestData () {
      this.loading = true
      this.api({
        apiName: 'blockChainPassList',
        postdata: this.searchContent,
        success: (res) => {
          this.tableData = res.data.records
          this.totalSize = res.data.total
        },
        complete: () => {
          this.loading = false
        }
      })
    },
    handleSearch () {
      this.searchContent.pageNum = 1
      this.requestData()
    },
    handleRefresh () {
      this.reload()
    },
    handleCurrentChange () {
      this.searchContent.pageNum = pageNum
      this.requestData()
    },
    handleUpdateStatus (row) {
      return () => {
        let updateTime = row.updateTime
        let passId = row.passId
        // console.log('passId',passId)
        let validState = row.status == 1 ? 2 : 1
        let title = row.status == BlockChainState.STOP ? '启用' : '停用'
        this.$Modal.confirm({
          title,
          content: `确认要 ${title} 名称为 ${row.name} 的区块链 ？`,
          onOk: () => {
            this.api({
              apiName: 'blockChainPassValid',
              postdata: { passId, updateTime, validState },
              success: () => {
                this.requestData()
                this.$Notice.success({ title: `操作成功！` })
              }
            })
          }
        })
      }
    },
    handleUpdate (row) {
      return () => {
        this.modalStatus = true
        this.modalTitle = '编辑通证'
        this.chainObj = {
          passId: row.passId,
          passIdentification: row.passIdentification,
          name: row.name,
          remark: row.remark,
          updateTime: row.updateTime
        }
      }
    },
    handleDelete (row) {
      return () => {
        this.$Modal.confirm({
          title: '删除',
          content: `您确认要删除名称为${row.name} 的区块链？`,
          onOk: () => {
            this.api({
              apiName: 'blockChainPassDelete',
              postdata: row.passId,
              success: () => {
                this.requestData()
                this.$Notice.success({ title: `操作成功！` })
              }
            })
          }
        })
      }
    },
    handleAdd () {
      this.modalStatus = true
      this.modalTitle = '新增通证'
      this.chainObj.blockChainId = this.$route.query.blockChainId
    },
    cancel () {
      this.chainObj = {
        passId: '',
        passIdentification: '',
        name: '',
        remark: '',
        updateTime: ''
      }
    },
    handleCancel () {
      this.modalStatus = false
      this.cancel()
    },
    checkForm () {
      let { blockChainId, passId, passIdentification, name, remark, updateTime } = this.chainObj
      let errMsg = ''
      let form
      if (passId) {
        form = {
          passId,
          name,
          remark,
          updateTime
        }
      } else {
        form = {
          blockChainId,
          passIdentification,
          name,
          remark
        }
      }

      if (!passIdentification) {
        return { errMsg: '请输入通证标识！' }
      }
      if (!/^[A-Z][A-Z0-9]{1,14}$/.test(passIdentification)) {
        return { errMsg: '请输入正确标识' }
      }
      if (!name) {
        return { errMsg: '请输入通证名称！' }
      }
      if (!remark) {
        return { errMsg: '请输入备注！' }
      }
      return { errMsg, form }
    },
    handleSubmitAdd () {
      let { errMsg, form } = this.checkForm()
      if (errMsg) {
        return this.$Notice.warning({ title: errMsg })
      }
      let apiName = this.chainObj.passId ? 'blockChainPassUpdate' : 'blockChainPassSave'

      // console.log('form', form)
      // console.log('apiName', apiName)
      this.api({
        apiName,
        postdata: form,
        success: (res) => {
          this.requestData()
        },
        complete: () => {
          this.modalStatus = false
          this.$Notice.success({ title: '操作成功' })
          this.cancel()
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.search-con {
    padding: 10px 0;
}
.model-item {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    .label {
      display: inline-block;
      width: 100px;
      text-align: right;
    }
  }
</style>
