<template>
  <div>
    <a-card title="自助机列表">
      <a-radio-group
        style="margin-bottom: 10px"
        v-model="termStatus"
        @change="getTermManagerList"
        default-value="active,inactive"
        button-style="solid"
      >
        <a-radio-button value="active,inactive">
          全部
        </a-radio-button>
        <a-radio-button value="active">
          已激活
        </a-radio-button>
        <a-radio-button value="inactive">
          已禁用
        </a-radio-button>
      </a-radio-group>
      &nbsp;
      <a-button
        @click="blackManage"
        type="danger"
      >
        黑名单管理
      </a-button>
      <a-form-model
        class="search-box"
        :model="form"
        layout="inline"
      >
        <a-form-model-item
          label="名称"
          prop="nickname"
        >
          <a-input
            placeholder="请输入名称"
            v-model="form.nickname"
            allow-clear
          />
        </a-form-model-item>
        <a-form-model-item
          label="mac"
          prop="mac"
        >
          <a-input
            placeholder="请输入mac"
            v-model="form.mac"
            allow-clear
          />
        </a-form-model-item>
        <a-form-model-item>
          <a-button
            type="primary"
            @click="getTermManagerList"
          >
            搜索
          </a-button>
        </a-form-model-item>
      </a-form-model>
      <a-spin :spinning="loading">
        <a-table
          :columns="columns"
          :data-source="termList"
          :pagination="pagination"
          :row-key="record => record.id"
          @change="handleTableChange"
          :scroll="{x:1200}"
        >
          <template
            slot="nickname"
            slot-scope="text, record"
          >
            <a-input
              v-if="record.editable"
              style="margin: -5px 0; width:120px"
              :value="record[`nicknameVal`]"
              @change="e => handleChange(e.target.value, record.id, 'nickname')"
            />
            <template v-else>
              {{ record.nickname || '暂无' }}
            </template>
          </template>

          <template
            slot="term_status_detail"
            slot-scope="text, record"
          >
            <ul v-if="record.term_status_detail">
              <li>打印机状态: {{ record.term_status_detail.printerStatus }}</li>
              <li>剩余纸张数: {{ record.term_status_detail.paperCount }}</li>
              <li>剩余碳带数: {{ record.term_status_detail.ribbonCount }}</li>
            </ul>
          </template>

          <template
            slot="description"
            slot-scope="text, record"
          >
            <a-input
              v-if="record.editable"
              style="margin: -5px 0; width:120px"
              :value="record[`descriptionVal`]"
              @change="e => handleChange(e.target.value, record.id, 'description')"
            />
            <template v-else>
              {{ record.description || '暂无' }}
            </template>
          </template>

          <template
            slot="store_code"
            slot-scope="text, record"
          >
            <a-input
              v-if="record.editable"
              style="margin: -5px 0; width:120px"
              :value="record[`store_codeVal`]"
              @change="e => handleChange(e.target.value, record.id, 'store_code')"
            />
            <template v-else>
              {{ record.store_code || '' }}
            </template>
          </template>

          <template
            slot="status"
            slot-scope="text, record"
          >
            <span :style="{color: record.status==='active'?'#1BAAAC':'#81A1A2'}">
              {{ record.status==='active'?'已激活':'已禁用' }}
            </span>
          &nbsp;
            <a-button
              size="small"
              :type="record.status==='active'?'danger':'primary'"
              @click="handleActive(record)"
            >
              {{ record.status==='active'?'禁用':'激活' }}
            </a-button>
          </template>

          <template
            slot="operation"
            slot-scope="text, record"
          >
            <a-button
              size="small"
              type="primary"
              @click="$refs.bindScenic.show(record)"
            >
              绑定景点
            </a-button>
            <template v-if="record.editable">
              <a-button
                size="small"
                type="primary"
                :loading="record.updateLoading"
                @click="saveRow(record.id)"
              >
                保存
              </a-button>
              <a-button
                size="small"
                @click="cancel(record.id)"
              >
                取消
              </a-button>
            </template>
            <template v-else>
              <a-button
                size="small"
                type="primary"
                @click="handleEdit(record.id)"
              >
                编辑
              </a-button>
              <a-button
                size="small"
                type="danger"
                @click="showDelete(record.id)"
              >
                删除
              </a-button>
            </template>
          </template>
        </a-table>
      </a-spin>
    </a-card>
    <a-modal
      v-model="deleteVisible"
      title="确认"
      on-ok="deleteTerm"
    >
      <template slot="footer">
        <a-button
          key="back"
          @click="deleteVisible = false"
        >
          取消
        </a-button>
        <a-button
          type="danger"
          @click="blockTerm"
        >
          删除并加入黑名单
        </a-button>
        <a-button
          key="submit"
          type="danger"
          @click="deleteTerm"
        >
          删除
        </a-button>
      </template>
      <p>确认删除？</p>
    </a-modal>
    <a-modal
      v-model="blackVisible"
      title="黑名单管理"
      :footer="null"
    >
      <a-table
        :columns="blackColumns"
        :data-source="blackList"
        :pagination="false"
        :row-key="record => record.id"
      >
        <template
          slot="operation"
          slot-scope="text, record"
        >
          <a-button
            size="small"
            type="primary"
            @click="recoverTerm(record.id)"
          >
            恢复
          </a-button>
        </template>
      </a-table>
    </a-modal>

    <BindScenic ref="bindScenic"></BindScenic>
  </div>
</template>

<script>
import { getTermManager, activeTerm, deleteTerm, blockTerm, getBlackList, recoverTerm, updateTermById } from '@/api/saleChannel/term'
import BindScenic from './term/BindScenic'

const columns = [
  {
    title: '名称',
    width: 160,
    dataIndex: 'nickname',
    key: 'nickname',
    scopedSlots: { customRender: 'nickname' }
  },
  {
    title: '本地ip',
    dataIndex: 'local_ip',
    key: 'local_ip'
  },
  {
    title: '终端状态',
    width: 160,
    dataIndex: 'term_status_detail',
    key: 'term_status_detail',
    scopedSlots: { customRender: 'term_status_detail' }
  },
  {
    title: '描述',
    width: 200,
    dataIndex: 'description',
    key: 'description',
    scopedSlots: { customRender: 'description' }
  },
  {
    title: 'Mac',
    dataIndex: 'mac',
    key: 'mac'
  },
  // {
  //   title: '创建时间',
  //   dataIndex: 'create_time',
  //   key: 'create_time'
  // },
  {
    title: '最后在线时间',
    dataIndex: 'last_online_time',
    key: 'last_online_time'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    width: 220,
    dataIndex: 'operation',
    key: 'operation',
    fixed: 'right',
    scopedSlots: { customRender: 'operation' }
  }
]

const columns2 = [
  {
    title: '名称',
    width: 160,
    dataIndex: 'nickname',
    key: 'nickname',
    scopedSlots: { customRender: 'nickname' }
  },
  {
    title: '本地ip',
    dataIndex: 'local_ip',
    key: 'local_ip'
  },
  {
    title: '终端状态',
    width: 160,
    dataIndex: 'term_status_detail',
    key: 'term_status_detail',
    scopedSlots: { customRender: 'term_status_detail' }
  },
  {
    title: '描述',
    width: 200,
    dataIndex: 'description',
    key: 'description',
    scopedSlots: { customRender: 'description' }
  },
  {
    title: '门店编码',
    width: 200,
    dataIndex: 'store_code',
    key: 'store_code',
    scopedSlots: { customRender: 'store_code' }
  },
  {
    title: 'Mac',
    dataIndex: 'mac',
    key: 'mac'
  },
  // {
  //   title: '创建时间',
  //   dataIndex: 'create_time',
  //   key: 'create_time'
  // },
  {
    title: '最后在线时间',
    dataIndex: 'last_online_time',
    key: 'last_online_time'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    width: 220,
    dataIndex: 'operation',
    key: 'operation',
    fixed: 'right',
    scopedSlots: { customRender: 'operation' }
  }
]
export default {
  created () {
    this.getTermManagerList()
    if(this.project_name==='chongpangpang'||this.project_name==='demo'){
      this.columns=columns2
    }
  },
  components: {
    BindScenic
  },
  data () {
    return {
      columns,
      project_name: localStorage.mgt_project,
      loading: false,
      updateLoading: false,
      blackColumns: [
        {
          title: 'Mac',
          dataIndex: 'mac',
          key: 'mac'
        },
        {
          title: '描述',
          dataIndex: 'description',
          key: 'description'
        }, {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      termList: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      form:{
        nickname:'',
        mac:'',
      },
      termStatus: 'active,inactive',
      deleteVisible: false,
      termToDelete: 0,
      blackVisible: false,
      blackList: []
    }
  },
  methods: {
    getTermManagerList () {
      this.loading = true
      const params = {
        ...this.form,
        pageNum: this.pagination.pageNum,
        status: this.termStatus.split(',')
      }
      function isJSON (data) {
        try {
          if (typeof JSON.parse(data) === 'object') {
            return true
          } else {
            return false
          }
        } catch (e) {
          return false
        }
      }

      getTermManager(params).then(res => {
        this.pagination.total = res.extraInfo.total
        this.termList = res.extraInfo.list
        this.termList.forEach(item => {
          item.term_status_detail = isJSON(item.term_status_detail) ? JSON.parse(item.term_status_detail) : null
        })
        this.loading = false
      })
    },
    handleActive (value) {
      activeTerm(value.id, value.status === 'active' ? 0 : 1).then(res => {
        this.$message.success('操作成功')
        this.getTermManagerList()
      })
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination.pageNum = pagination.current
      this.getTermManagerList()
    },
    showDelete (id) {
      this.termToDelete = id
      this.deleteVisible = true
    },
    deleteTerm () {
      deleteTerm(this.termToDelete).then(res => {
        this.deleteVisible = false
        this.$message.success('操作成功')
        this.getTermManagerList()
      })
    },
    blockTerm () {
      blockTerm(this.termToDelete).then(res => {
        this.deleteVisible = false
        this.$message.success('操作成功')
        this.getTermManagerList()
      })
    },
    blackManage () {
      getBlackList().then(res => {
        this.blackList = res.extraInfo.list
      })
      this.blackVisible = true
    },
    recoverTerm (id) {
      recoverTerm(id).then(res => {
        this.blackVisible = false
      })
    },
    handleEdit (id) {
      const target = this.termList.find(item => item.id === id)
      this.$set(target, 'editable', !target.editable)
      this.$set(target, 'nicknameVal', target.nickname)
      this.$set(target, 'descriptionVal', target.description)
      this.$set(target, 'store_codeVal', target.store_code)
    },
    handleChange (value, id, col) {
      const target = this.termList.find(item => item.id === id)
      // 使用一个新字段记录新值，保存后更新到原有字段上
      this.$set(target, `${col}Val`, value)
    },
    // 取消
    cancel (id) {
      const target = this.termList.find(item => item.id === id)
      this.$set(target, 'editable', false)
    },
    saveRow (id) {
      const target = this.termList.find(item => item.id === id)

      this.$set(target, 'updateLoading', true)
      updateTermById(id, {
        description: target.descriptionVal,
        nickname: target.nicknameVal,
        store_code: target.store_codeVal,
      }).then(res => {
        target.description = target.descriptionVal
        target.nickName = target.nickNameVal
        target.store_code = target.store_codeVal
        this.$set(target, 'editable', false)
        this.$set(target, 'updateLoading', false)
        this.$message.success('更新成功。')

        this.getTermManagerList()
      })
    },
    getTermStatus (data) {
      function isJSON (data) {
        try {
          if (typeof JSON.parse(data) === 'object') {
            return true
          } else {
            return false
          }
        } catch (e) {
          return false
        }
      }

      return isJSON(data) ? JSON.parse(data) : null
    }

  }
}
</script>

<style scoped>
.small-btn{
  margin-left: 8px;
}
</style>
