<template>
  <div class="apply-app-outer">
    <div class="apply-app-container">
      <div class="apply-toolbar">
        <Row span="24">
          <!-- LiuKexin 20201225 调整样式 -->
          <Button type="primary" style="padding: 0 8px" @click.stop="addSystem">
            <Icon custom="fa fa-plus-circle fa-fw" aria-hidden="true"></Icon
            >添加&nbsp;&nbsp;
          </Button>
          <Button
            type="text"
            style="margin-left: 8px; padding: 0px"
            @click.stop="deleSystem"
          >
            <Icon
              custom="fa fa-trash fa-fw"
              aria-hidden="true"
              style="color: red"
            ></Icon
            >删除
          </Button>
          <Divider type="vertical" />
          <!-- <ButtonGroup> -->
          <!-- <Button @click.stop="addSystem">
              <Icon custom="fa fa-fw fa-plus"></Icon>添加
            </Button>
            <Button @click="deleSystem">
              <Icon custom="fa fa-fw fa-close" style="color:red;"></Icon>删除
            </Button>  -->
          <!-- </ButtonGroup>&nbsp;&nbsp;&nbsp; -->
          <!--  <ButtonGroup>
            <Button style="border-radius:5px">
              <Icon custom="fa fa-fw fa-check-circle"></Icon>测试
            </Button>
            <Button style="display:none"></Button>
          </ButtonGroup>-->
          <SearchInput
            :value.sync="searchText"
            @on-clear="clearSearch"
            @on-click="searchByKeyword"
            :width="260"
          />
        </Row>
      </div>
      <div>
        <Table
          border
          :columns="columns"
          :data="systems"
          :loading="loading"
          :height="tableheight"
          @on-selection-change="onSelect"
          stripe
        >
          <!-- durui 20201117 DAG-393 统一按钮和表单字体 去掉 size="small" -->
          <template slot-scope="{ row, index }" slot="edit">
            <ButtonGroup>
              <Button
                class="operate-button"
                @click.stop="editSystem(row, index)"
              >
                <Icon custom="fa fa-fw fa-edit"></Icon>
              </Button>
              <Button class="operate-button" @click.stop="showMenuData(row)">
                <i class="fa fa-bars" aria-hidden="true"></i>
              </Button>
            </ButtonGroup>
          </template>
          <!-- LiuKexin 20210118 私钥和公钥的文字提示 start -->
          <template slot-scope="{ row }" v-for="field in fieldSlotList"  :slot="field.name">
            <div :key="field.index">
            <Tooltip
              :transfer="true"
              placement="bottom-start"
              style="margin-top: 8px; width: 100%"
              v-if="row[field.name] != null && row[field.name] != ''"
            >
              <p class="table-content">{{ row[field.name] }}</p>
              <p slot="content" class="file-code-content" style="word-break:break-all;whiteSpace:normal">
                {{ row[field.name] }}
              </p>
            </Tooltip>
            <p class="table-content" v-else>{{ row[field.name] }}</p>
            </div>
          </template>
          <!-- LiuKexin 20210118 私钥和公钥的文字提示 end -->
        </Table>
      </div>
      <template>
        <Modal
          v-model="modal"
          width="660"
          :footer-hide="true"
          class="modalClass"
        >
          <p slot="header">
            <span>
              <Icon :custom="'fa fa-' + sideComponentIcon"></Icon>
              {{ title }}</span
            >
          </p>
          <div class="form-editor">
            <iForm
              :model="system"
              :label-width="80"
              ref="formValidate"
              :rules="ruleValidate"
            >
              <Row>
                <iCol span="12">
                  <FormItem label="名称" prop="name">
                    <iInput
                      v-model.trim="system.name"
                      placeholder="请输入英文系统名称"
                    ></iInput>
                  </FormItem>
                </iCol>
                <iCol span="12">
                  <FormItem label="类型" prop="type">
                    <Select v-model="system.type">
                      <Option
                        v-for="item in typeList"
                        :key="item.value"
                        :value="item.value"
                        >{{ item.text }}</Option
                      >
                    </Select>
                  </FormItem>
                </iCol>
                <iCol span="24">
                  <FormItem label="中文名" prop="title">
                    <iInput
                      v-model.trim="system.title"
                      placeholder="请输入系统中文显示名称"
                    ></iInput>
                  </FormItem>
                </iCol>
                <iCol span="12">
                  <FormItem label="URL" prop="url">
                    <iInput
                      v-model.trim="system.url"
                      placeholder="请输入系统访问地址"
                    ></iInput>
                  </FormItem>
                </iCol>
                <iCol span="12">
                  <FormItem label="服务" prop="service">
                    <iInput
                      v-model="system.service"
                      placeholder="输入系统服务访问地址"
                    ></iInput>
                  </FormItem>
                </iCol>
                <iCol span="12">
                  <FormItem label="密钥ID" prop="keyid">
                    <iInput v-model="system.keyid" readonly></iInput>
                  </FormItem>
                </iCol>
                <iCol span="12">
                  <Button
                    icon="md-color-wand"
                    type="primary"
                    @click="createKey"
                    style="margin-left: 10px; margin-top: 0px"
                    >新建</Button
                  >
                </iCol>
                <iCol span="24">
                  <FormItem label="私钥" prop="privatekey">
                    <iInput
                      v-model="system.privatekey"
                      type="textarea"
                      readonly
                    ></iInput>
                  </FormItem>
                </iCol>
                <iCol span="24">
                  <FormItem label="公钥" prop="publickey">
                    <iInput
                      v-model="system.publickey"
                      type="textarea"
                      readonly
                    ></iInput>
                  </FormItem>
                </iCol>
                <iCol span="24">
                  <FormItem label="描述" prop="description">
                    <iInput
                      placeholder="请输入描述信息"
                      v-model.trim="system.description"
                      type="textarea"
                    ></iInput>
                  </FormItem>
                </iCol>
                <!-- Liukexin 20201228 按钮靠右 -->
                <iCol span="24" style="height: 32px">
                  <FormItem class="button-toolbar" style="text-align: right">
                    <Button @click="reset()" style="margin-left: 8px">
                      <!-- LiuKexin 20201216 添加图标 -->
                      <Icon custom="fa fa-refresh fa-fw"></Icon>重置</Button
                    >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <Button type="primary" @click="onOK()"
                      ><Icon custom="fa fa-fw fa-save"></Icon>保存</Button
                    >
                  </FormItem>
                </iCol>
              </Row>
            </iForm>
          </div>
        </Modal>
        <!-- LiuKexin 20210318 调整上间距 -->
        <Side
          :width="sideComponentWidth"
          v-model="showSide"
          style="
            margin-top: 120px;
            margin-right: 25px;
            background-color: #fff;
            height: auto;
          "
        >
          <Card class="side-card">
            <span slot="title">
              <Icon :custom="'fa fa-' + sideComponentIcon"></Icon>
              {{ sideComponentTitle }}
            </span>
            <component :is="sideComponent" :paraData="paraData"></component>
          </Card>
        </Side>
      </template>
    </div>
  </div>
</template>

<script>
import SearchInput from '_c/search-input/searchInput'
import { getSystems, create, addorEdit, dele } from '@/api/system'
import Side from '@/views/components/side/side'
export default {
  components: {
    Side,
    SearchInput,
  },
  data() {
    const validateTitle = (rule, value, callback) => {
      // lidecai 20200327 YZJ-2307 字符串校验不正确
      let reg = /^[\u4E00-\u9FA5]+$/
      if (value === '') {
        callback(new Error('名称不能为空'))
      } else {
        if (!reg.test(value)) {
          callback(new Error('请输入中文'))
        }
        callback()
      }
    }
    const validateName = (rule, value, callback) => {
      let ext = /(^[a-zA-Z]+$)/
      if (value === '') {
        callback(new Error('英文标识不能为空'))
      } else {
        if (!ext.test(value)) {
          callback(new Error('请输入英文'))
        }
        callback()
      }
    }
    return {
      paraData: {},
      showSide: false,
      sideComponentTitle: '',
      sideComponentIcon: '',
      sideComponentWidth: 0,
      sideComponent: null,
      columns: [
        //LiuKexin 20201225 字段样式
        {
          type: 'selection',
          width: 55, //LiuKexin 20201216 宽度
          align: 'center',
          fixed: 'left',
        },
        {
          title: '序号',
          width: 50,
          key: 'index',
          type: 'index',
          align: 'center',
          fixed: 'left',
          className: 'compact-cell',
        },
        {
          title: '操作',
          width: 80,
          align: 'center',
          slot: 'edit',
          fixed: 'left',
          className: 'compact-cell',
        },

        {
          title: '名称',
          width: 100,
          key: 'name',
          ellipsis: true,
          tooltip: true,
          resizable: true,
        },
        {
          title: '中文名',
          width: 120,
          key: 'title',
          ellipsis: true,
          tooltip: true,
          resizable: true,
        },
        {
          title: '类型',
          width: 100,
          key: 'type',
          ellipsis: true,
          tooltip: true,
          resizable: true,
        },
        {
          title: 'URL',
          width: 240,
          key: 'url',
          resizable: true, //LiuKexin 20210201 URL拖拽
          render(h, params) {
            /**Liukexin 20210118 render自定义文字提示 start */
            return h('Tooltip',
              {
                props: {
                  placement: 'bottom-start',
                  transfer: true,
                },
                style: { width: '100%', marginTop: '8px' },
              },
              [
                // LiuKexin 20210119 调整url的展示
                h('p', { class: 'url-table-content'},params.row.url,),
                [h('Button',{
                    props: {
                      type: 'text',
                      icon: 'md-open',
                      ghost: true,
                    },
                    style: {
                      color: '#2d8cf0',
                      padding:'0px',
                      float:'left'
                    },
                    on: {
                      click() {
                        window.open(params.row.url)
                      },
                    },
                  })],
                [
                  h(
                    'span',
                    {
                      slot: 'content',
                      style: {
                        whiteSpace: 'normal',
                        wordBreak: 'break-all',
                      },
                    },
                    params.row.url
                  ),
                ]
              ]
            )
            /**Liukexin 20210118 render自定义文字提示 end */
          },
        },
        {
          title: '服务',
          width: 200,
          key: 'service',
          ellipsis: true,
          tooltip: true,
          resizable: true,
        },
        {
          title: '密钥ID',
          width: 300,
          ellipsis: true,
          tooltip: true,
          resizable: true,
          key: 'keyid',
        },
        {
          title: '私钥',
          width: 300,
          ellipsis: true,
          slot:'privatekey',  //LiuKexin 20210118 插槽 自定义私钥
          resizable: true,
          key: 'privatekey',
        },
        {
          title: '公钥',
          width: 300,
          ellipsis: true,
          slot:'publickey', //LiuKexin 20210118 插槽 自定义公钥
          resizable: true,
          key: 'publickey',
        },
        {
          title: '描述',
          width: 200,
          key: 'description',
          ellipsis: true,
          tooltip: true,
          resizable: true,
        },
      ],
      // LiuKexin 20210118 私钥 公钥
      fieldSlotList:[
        {index:0,name:'privatekey'},
        {index:1,name:'publickey'}
      ],
      tableheight: 0,
      title: '',
      systems: [],
      system: {
        name: '',
        title: '',
        type: '',
        url: '',
        service: '',
        keyid: '',
        privatekey: '',
        publickey: '',
        description: '',
      },
      loading: false,
      modal: false,
      selection: [],
      ruleValidate: {
        name: [{ required: true, validator: validateName, trigger: 'blur' }],
        title: [{ required: true, validator: validateTitle, trigger: 'blur' }],
        type: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
        url: [{ required: true, message: 'URL不能为空', trigger: 'blur' }],
        service: [{ required: true, message: '服务不能为空', trigger: 'blur' }],
        keyid: [{ required: true, message: '密钥ID不能为空', trigger: 'blur' }],
        privatekey: [
          { required: true, message: '私钥不能为空', trigger: 'blur' },
        ],
        publickey: [
          { required: true, message: '公钥不能为空', trigger: 'blur' },
        ],
      },
      searchText: null,
      typeList: [],
      oldSystem: '',
    }
  },
  methods: {
    showMenuData(row) {
      //显示对应菜单数据
      this.paraData = {
        tableheight: this.tableheight - 43,
        id: row.id,
      }
      this.sideComponentTitle = '菜单展示'
      this.sideComponentIcon = 'pencil-square-o'
      this.sideComponentWidth = 1000
      this.showSide = true
      import('./menu').then((comp) => {
        this.sideComponent = comp.default
      })
    },
    clearSearch() {
      this.getSystems()
    },
    searchByKeyword() {
      this.getSystems()
    },
    initType() {
      let data = this.systems
      let typeList = []
      data.forEach((element) => {
        if (typeList.findIndex((type) => type.value === element.type) == -1) {
          typeList.push({
            value: element.type,
            text: this.getTypeText(element.type) + '（' + element.type + '）',
          })
        }
      })
      this.typeList = { ...typeList }
    },
    getTypeText(type) {
      let typeList = this.systems
        .filter((item) => item.type === type)
        .map((item) => item.title)
      if (typeList.length === 2) {
        return typeList[0]
      }
      const shoring = (s1, s2) => {
        if (s1 < s2) return -1
        return 1
      }
      return typeList.sort(shoring)[0]
    },
    createKey() {
      create().then((res) => {
        if (res.data === null || res.data.state !== 'ok') {
          this.$Notice.error({ title: '提示', desc: '生成key失败' })
        } else {
          this.system.privatekey = res.data.privateKey
          this.system.keyid = res.data.keyid
          this.system.publickey = res.data.publicKey
        }
      })
    },
    addSystem() {
      this.reset()
      this.title = '添加'
      this.sideComponentIcon = 'plus-circle' //LiuKexin 20201216 图标
      this.modal = true
      this.system.name = ''
      this.system.title = ''
      this.system.type = ''
      this.system.url = ''
      this.system.service = ''
      this.system.keyid = ''
      this.system.privatekey = ''
      this.system.publickey = ''
      this.system.description = ''
    },
    editSystem(row) {
      this.title = '编辑'
      this.sideComponentIcon = 'edit'
      this.modal = true
      this.oldSystem = row
      this.system = Object.assign({}, row)
    },
    onOK() {
      this.$refs.formValidate.validate((valid) => {
        if (valid) {
          addorEdit(this.system).then((res) => {
            if (res.data && res.data.state === 'ok') {
              this.$Notice.success({ title: '提示', desc: '保存成功' })
              this.getSystems()
            } else {
              this.$Notice.error({ title: '提示', desc: res.data.msg })
            }
          })
          this.modal = false
        }
      })
    },
    /**
     * 对重置功能添加判断
     * liuyimeng
     * 2020-03-01
     * **/
    reset() {
      if (this.title === '添加') {
        this.$refs.formValidate.resetFields()
      }
      if (this.title === '编辑') {
        this.system = Object.assign({}, this.oldSystem)
      }
    },
    deleSystem() {
      if (this.selection.length === 0) {
        this.$Notice.warning({ title: '提示', desc: '至少选择一项' }) //xiaoying 20200717 YZJ-3932 信息类型不正确
        return
      }
      this.$Modal.confirm({
        title: '温馨提示',
        content: '删除的数据不可恢复，是否确定删除？',
        onOk: () => {
          let ids = this.selection.map((item) => item.id)
          let data = {
            ids: ids.join(','),
          }
          dele(data).then((res) => {
            if (res.data && res.data.state === 'ok') {
              this.$Notice.success({ title: '提示', desc: '删除成功' })
              this.getSystems()
            } else {
              this.$Notice.error({ title: '提示', desc: res.data.msg })
            }
          })
        },
      })
    },
    onSelect(selection) {
      this.selection = selection
    },
    getSystems() {
      let params = {
        searchText: this.searchText,
      }
      getSystems(params).then((res) => {
        if (res.data && res.data.state === 'ok') {
          this.systems = res.data.systems
          this.selection = []
          this.initType()
        }
      })
    },
  },
  mounted() {
    this.tableheight = document.body.clientHeight - 192 //Liukexin 20210318 调整高度
    this.getSystems()
  },
}
</script>
<style>
.ivu-card-body {
  padding: 0px;
}
.operate-button {
  padding: 2px 7px;
  width: 30px;
}
.compact-cell .ivu-table-cell {
  padding-left: 5px;
  padding-right: 5px;
}
.apply-app-outer {
  height: 100%;
  padding: 24px;
}
.apply-app-container {
  height: 100%;
  text-align: left;
  background: #e9e9e9;
}
.apply-toolbar {
  padding: 5px 10px;
  padding-left: 4px;
  background-color: #fff;
  border: 1px solid #d7dde4;
  font-size: 14px;
}
.form-editor {
  position: relative;
  padding: 16px;
}
.apply-server-search-icon {
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 16px;
  text-align: center;
  color: #808695;
  position: absolute;
  right: 13%;
  z-index: 3;
}
/**LiuKexin 20201216 取消边框 */
.modalClass /deep/ .ivu-modal-body {
  padding: 0px;
}
/**LiuKexin 20210118 内容过长 溢出部分省略号 */
.table-content {
  width: 99%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
/* Liukexin 20210109 调整url的展示 */
.url-table-content {
  width: 160px;
  float: left;
  margin-top: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
/* LiuKexin 20210118 文字提示样式 */
.file-code-content {
  width: 100%;
  max-height: 60px;
  overflow: auto;
}
/*滚动条样式*/
.file-code-content::-webkit-scrollbar {
  width: 4px;
}
.file-code-content::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ccc;
}
.file-code-content::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>
