<template>
  <div class="NoteAccount">
    <div class="header">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item>
          <el-button type="primary" @click="onAdd()">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onChangeTable()">修改</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onDelete()">删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-select v-model="page.parentId" placeholder="全部单位名称">
            <el-option label="全部单位名称" value="" />
            <el-option label="短信服务中心" value="66" />
            <el-option label="市场部" value="96" />
            <el-option label="博物馆" value="99" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="page.apitype" placeholder="全部账户类型">
            <el-option v-for="item in apitypeList" :key="item.id" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="page.usestate" placeholder="全部状态">
            <el-option label="全部状态" value="" />
            <el-option label="停用" value="0" />
            <el-option label="启用" value="1" />
            <el-option label="异常" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <Table v-show="flag" class="table" :loading="loading" :data="tableData" :list="tableList" :total="total" @selectionChange="onSelectionChange" @currentChange="onCurrentChange" @sizeChange="onSizeChange">
      <template #type="data">
        <div v-show="data.item === 'usestate'">
          {{ data.scope.usestate === 1 ? '启用' : '异常' }}
          <span v-show="data.scope.usestate === 0">停用</span>
        </div>
        <div v-show="data.item === 'operation'">
          <el-link type="primary" class="link" @click="onAbstract(data.scope.id)">摘要</el-link>
          <el-link type="primary" @click="onLinks()">链接日记</el-link>
        </div>
      </template>
    </Table>
    <bulletFrame :loading="loading" :table-type="tableType" :table-item="tableItem" :dialog-visible="dialogVisible" @onLoading="onLoading" @dialogVisibleChange="onDialogVisibleChange" @getCustCustApiList="getCustCustApiList" />
    <el-dialog
      :title="cardType === 1 ? '短信账号-摘要' : '短信账号-链接信息'"
      :visible.sync="abstractdialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-card v-show="cardType === 1" class="box-card" shadow="never">
        <div v-for="item in apitypeList2" :key="item.id" class="text item">
          <div v-show="item.value === abstractCardList.apitype">
            接入方式：{{ item.label }}
          </div>
        </div>
        <div class="text item">
          服务器地址：
        </div>
        <div class="text item">
          服务器端口：{{ abstractCardList.apiPort }}
        </div>
        <div class="text item">
          账号：{{ abstractCardList.account }}
        </div>
        <div class="text item">
          接口密码：{{ abstractCardList.password }}
        </div>
        <div class="text item">
          最大流量：{{ abstractCardList.subspeed }}
        </div>
        <div class="text item">
          最大连接数：1
        </div>
      </el-card>
      <el-card v-show="cardType === 2" class="box-card" shadow="never">
        <div class="text item">
          服务器：{{ abstractCardList.apiIp + ':' + abstractCardList.apiPort }}
        </div>
        <div class="text item">
          前客户端链接IP：{{ abstractCardList.apiIp + ':' + abstractCardList.apiPort }}
        </div>
        <div class="text item">
          登录时间：
        </div>
        <div class="text item">
          最后链接日记：
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import Table from '@/components/Table/index.vue'
import bulletFrame from '@/views/Account/NoteAccount/components/bulletFrame.vue'
import { custCustApiListAPI, custCustApiRemoveAPI, custCustApiApinameAPI, custCustApiGetAPI } from '@/api/Account/NoteAccount'

export default {
  name: 'NoteAccount',

  components: {
    Table,
    bulletFrame
  },

  data() {
    return {
      page: {
        limit: 10,
        offset: 0,
        usestate: '',
        apitype: '',
        parentId: '',
        id: ''
      },
      total: 0,
      cardType: '',

      form: {
        usestate: '',
        apitype: '',
        parentId: ''
      },

      tableData: [],
      tableItem: [],
      tableList: [
        {
          id: 1,
          label: '序号',
          prop: 'uid',
          flag: false
        },
        {
          id: 2,
          label: '单位名称',
          prop: 'unitName',
          flag: false
        },
        {
          id: 3,
          label: '账号名称',
          prop: 'apiName',
          flag: false
        },
        {
          id: 4,
          label: '短信账号',
          prop: 'account',
          flag: false
        },
        {
          id: 5,
          label: '接口类型',
          prop: 'apitype',
          flag: false
        },
        {
          id: 6,
          label: '绑定IP',
          prop: 'apiIp',
          flag: false
        },
        {
          id: 7,
          label: '联系人',
          prop: 'dtName',
          flag: false
        },
        {
          id: 8,
          label: '手机号码',
          prop: 'dtMobile',
          flag: false
        },
        {
          id: 9,
          label: '备注',
          prop: '',
          flag: false
        },
        {
          id: 10,
          label: '状态',
          prop: 'usestate',
          flag: true
        },
        {
          id: 11,
          label: '操作',
          prop: 'operation',
          flag: true
        }
      ],
      apitypeList: [
        {
          id: 1,
          label: '全部账户类型',
          value: ''
        },
        {
          id: 2,
          label: '内部WEB',
          value: 0
        },
        {
          id: 3,
          label: '塞亚API',
          value: 1
        },
        {
          id: 4,
          label: 'CMPP20',
          value: 2
        },
        {
          id: 5,
          label: 'CMPP30',
          value: 3
        },
        {
          id: 6,
          label: '步云API',
          value: 4
        },
        {
          id: 7,
          label: 'CMAS_API',
          value: 5
        },
        {
          id: 8,
          label: 'MAS_DB',
          value: 6
        },
        {
          id: 9,
          label: 'MAS_WES',
          value: 7
        },
        {
          id: 10,
          label: '迈远API',
          value: 8
        }
      ],
      apitypeList2: [
        {
          id: 2,
          label: '内部WEB',
          value: 0
        },
        {
          id: 3,
          label: '塞亚API',
          value: 1
        },
        {
          id: 4,
          label: 'CMPP20',
          value: 2
        },
        {
          id: 5,
          label: 'CMPP30',
          value: 3
        },
        {
          id: 6,
          label: '步云API',
          value: 4
        },
        {
          id: 7,
          label: 'CMAS_API',
          value: 5
        },
        {
          id: 8,
          label: 'MAS_DB',
          value: 6
        },
        {
          id: 9,
          label: 'MAS_WES',
          value: 7
        },
        {
          id: 10,
          label: '迈远API',
          value: 8
        }
      ],
      abstractCardList: {},

      flag: false,
      dialogVisible: false,
      abstractdialogVisible: false,
      loading: false,
      tableType: '',
      loadingInstance: ''
    }
  },

  async created() {
    // this.getCustCustApiApiname()
    this.getCustCustApiList()
    this.flag = true
  },

  methods: {
    async getCustCustApiApiname() {
      const res = await custCustApiApinameAPI()
      console.log(res)
    },
    async getCustCustApiList() {
      this.loading = true
      const res = await custCustApiListAPI(this.page)
      this.tableData = res.rows.map((item, index) => {
        return { ...item, uid: index + 1 }
      })
      this.total = res.total
      this.loading = false
    },
    onDialogVisibleChange() {
      this.dialogVisible = !this.dialogVisible
    },
    onSelectionChange(value) {
      this.tableItem = value
    },
    onAdd() {
      this.tableType = 1
      this.dialogVisible = true
    },
    onChangeTable() {
      if (this.tableItem.length > 1 || this.tableItem.length < 1) {
        return this.$message({
          message: '只能选中一项哦',
          type: 'warning'
        })
      }
      this.tableType = 2
      this.dialogVisible = true
    },
    onDelete() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.loading = true
        await custCustApiRemoveAPI({ id: this.tableItem[0].id })
        this.getCustCustApiList(this.page)
        this.loading = false
      })
    },
    onLoading() {
      this.loading = !this.loading
    },
    async onSearch() {
      this.loading = true
      const res = await custCustApiListAPI(this.page)
      this.tableData = res.rows.map((item, index) => {
        return { ...item, uid: index + 1 }
      })
      this.total = res.total
      this.loading = false
    },
    onCurrentChange(value) {
      this.page.offset = value
      this.getCustCustApiList(this.page)
    },
    onSizeChange(value) {
      this.page.limit = value
      this.getCustCustApiList(this.page)
    },
    async onAbstract(id) {
      this.cardType = 1
      const res = await custCustApiGetAPI({ id })
      console.log(res)
      this.abstractCardList = res.data
      this.abstractdialogVisible = true
    },
    handleClose() {
      this.abstractdialogVisible = false
    },
    onLinks() {
      this.cardType = 2
      this.abstractdialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .link {
  margin-right: 1px;
}
::v-deep .el-card__body .item {
  margin-bottom: 20px;
}
</style>
