<!--
 * @Date: 2022-04-12 17:49:47
 * @LastEditTime: 2022-04-28 15:14:53
 * @LastEditors: your name
 * @Description: 服务管理-首页
 * have a nice day!
-->

<template>
  <div class="service-home">
    <div class="wrap">
      <div class="service-header flex">
        <div class="manageTitle">服务管理</div>
        <div class="btn-create">
          <el-button
            class="btn-white"
            size="small"
            @click="showCreateDialog"
          >新增</el-button>
        </div>
      </div>
      <div class="service-content">
        <el-row :gutter="24">
          <el-col
            v-for="item in serviceList"
            :key="item.serviceID"
            :span="4"
          >
            <div class="grid-content">
              <div class="grid-content-hand flex">
                <div class="title flex-wrap">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="item.serviceName"
                    placement="bottom"
                  >
                    <div class="name">{{ item.serviceName }}</div>
                  </el-tooltip>
                  <!-- <div class="name">{{ item.serviceName }}</div> -->
                  <i
                    class="loger"
                    @click="btnEditClickHandler(item)"
                  />
                </div>
                <i
                  class="el-icon-close icon"
                  @click="showDeleteDialog(item)"
                />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <!--删除弹框-->
      <Dialog :flag="deleteDialogVisible">
        <div class="dialog-delete">
          <div class="del-title">删除服务</div>
          <div class="content er">
            <div class="log">
              你是否确认删除{{ delObj.serviceName }}？
            </div>
          </div>
          <div class="del-foot right t30">
            <el-button
              size="medium"
              class="r25 r26"
              type="danger"
              @click="deleteSubmitHandler"
            >删除</el-button>
            <el-button
              size="medium"
              class="r26"
              @click="hideDeleteDialog"
            >取消</el-button>
          </div>
        </div>
      </Dialog>
      <Dialog
        :flag="createDialogVisible"
        width="600px"
      >
        <div class="dialog-create">
          <div class="title">新增服务</div>
          <main class="content">
            <el-form
              ref="createForm"
              class="create-form"
              :model="createForm"
              :rules="createFormRules"
              label-position="right"
              label-width="82px"
              size="mini"
            >
              <el-form-item
                label="服务名称"
                prop="serviceName"
              >
                <el-input
                  v-model="createForm.serviceName"
                  placeholder="请输入服务名称"
                  clearable
                />
              </el-form-item>
              <el-form-item
                label="描述"
                prop="serviceDescribe"
              >
                <el-input
                  v-model="createForm.serviceDescribe"
                  placeholder="请输入描述"
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  resize="none"
                  clearable
                />
              </el-form-item>
              <el-form-item label="是否同步">
                <el-radio-group v-model="createForm.isAsynchronous">
                  <el-radio :label="0">是</el-radio>
                  <el-radio :label="1">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="来源"
                prop="protocolID"
              >
                <el-select
                  v-model="createForm.protocolID"
                  placeholder="请选择来源"
                >
                  <el-option
                    v-for="item in protocolList"
                    :key="item.protocolID"
                    :value="item.protocolID"
                    :label="item.protocolName"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                label="并发线程数"
                prop="threads"
                label-width="96px"
              >
                <el-input
                  v-model="createForm.threads"
                  placeholder="请输入并发线程数"
                  clearable
                />
              </el-form-item>
              <el-form-item
                label="来源配置"
                prop="connectConfig"
              >
                <el-input
                  v-model="createForm.connectConfig"
                  placeholder="请输入来源配置"
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  resize="none"
                  clearable
                />
              </el-form-item>
            </el-form>
          </main>
          <div class="foot">
            <el-button
              size="medium"
              type="primary"
              class="r25 r26"
              @click="createSubmitHandler"
            >提交</el-button>
            <el-button
              size="medium"
              class="r26"
              @click="hideCreateDialog"
            >取消</el-button>
          </div>
        </div>
      </Dialog>
    </div>
  </div>
</template>

<script>
import Dialog from '@/layout/components/Dialog/index.vue'
import { GeneralDataReception, Query } from '@/api/dataIntegration'
import { regular } from '@/utils/validate'

export default {
  name: 'ProtocolHome',
  components: { Dialog },
  data() {
    return {
      serviceList: [],
      createDialogVisible: false,
      createForm: {
        serviceName: '',
        serviceDescribe: '',
        isAsynchronous: 0,
        protocolID: '',
        threads: '',
        connectConfig: ''
      },
      createFormRules: {
        serviceName: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
        protocolID: [{ required: true, message: '请选择来源', trigger: 'blur' }],
        threads: [
          { required: true, message: '请输入并发线程数', trigger: 'blur' },
          { pattern: regular.positiveInteger, message: '请输入正整数', trigger: ['blur', 'change'] }
        ]
      },
      protocolList: [],
      deleteDialogVisible: false,
      delObj: {}
    }
  },
  mounted() {
    this.getServiceList()
  },
  methods: {
    // 新增-弹框
    showCreateDialog() {
      this.getProtocolList()
      this.createDialogVisible = true
    },
    // 新增-提交
    createSubmitHandler() {
      this.$refs['createForm'].validate(valid => {
        if (valid) {
          this.createService()
        }
      })
    },
    // 新增-关闭
    hideCreateDialog() {
      this.$refs['createForm'].resetFields()
      this.createDialogVisible = false
    },
    // 编辑-跳转
    btnEditClickHandler(item) {
      this.$router.push({ path: '/systemSettings/serviceEdit', query: { serviceID: item.serviceID } })
    },
    // 删除-弹框
    showDeleteDialog(item) {
      this.delObj = item
      this.deleteDialogVisible = true
    },
    // 删除-提交
    deleteSubmitHandler() {
      this.deleteService()
    },
    // 删除-关闭
    hideDeleteDialog() {
      this.deleteDialogVisible = false
    },
    async getServiceList() {
      try {
        const res = await Query({
          id: 3,
          dataContent: []
        })
        if (Number(res.code) === 0) {
          this.serviceList = res.returnData
        } else {
          this.$message.error(res.message ?? '失败')
        }
      } catch (error) {
        console.log('错误', error)
      }
    },
    async getProtocolList() {
      try {
        const res = await Query({
          id: 1,
          dataContent: []
        })
        if (Number(res.code) === 0) {
          this.protocolList = res.returnData
        } else {
          this.$message.error(res.message ?? '失败')
        }
      } catch (error) {
        console.log('错误', error)
      }
    },
    async createService() {
      try {
        this.createForm['operate'] = 1
        const res = await GeneralDataReception({
          serviceId: 3,
          dataContent: JSON.stringify(this.createForm)
        })
        if (Number(res.code) === 0) {
          this.$message.success(res.message ?? '成功')
          this.hideCreateDialog()
          this.getServiceList()
        } else {
          this.$message.error(res.message ?? '失败')
        }
      } catch (error) {
        console.log('错误', error)
      }
    },
    async deleteService() {
      try {
        this.delObj['operate'] = 3
        const res = await GeneralDataReception({
          serviceId: 3,
          dataContent: JSON.stringify(this.delObj)
        })
        if (Number(res.code) === 0) {
          this.$message.success(res.message ?? '成功')
          this.hideDeleteDialog()
          this.getServiceList()
        } else {
          this.$message.error(res.message ?? '失败')
        }
      } catch (error) {
        console.log('错误', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.service-home {
  .wrap {
    padding: 16px 0;
    .service-header {
      line-height: 32px;
      font-size: 14px;
      .btn-white {
        border: 1px solid #9ebbf7;
        background: #f5f7fa;
        -webkit-box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
        box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
        border-radius: 4px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #2d67e3;
      }
      margin-bottom: 30px;
    }
    .service-content {
      .grid-content {
        height: 120px;
        background: #ffffff;
        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        padding: 25px;
        margin-bottom: 24px;
        .title {
          font-size: 16px;
          font-family: Helvetica;
          font-weight: bold;
          color: #101116;
          white-space: nowrap;
          max-width: 80%;
          text-overflow: ellipsis;
          overflow: hidden;
          .name {
            white-space: nowrap;
            max-width: 80%;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .loger {
            width: 14px;
            height: 14px;
            margin-left: 24px;
            background: url('../../../../assets/status/ic_edit_default.png') no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
            position: relative;
            top: 2px;
          }
          .loger:hover {
            background: url('../../../../assets/status/ic_edit_hovar.png') no-repeat;
            background-size: 100% 100%;
          }
        }
        .icon {
          cursor: pointer;
          font-size: 16px;
          color: #606266;
        }
      }
    }
    .dialog-create {
      ::v-deep .create-form {
        display: flex;
        flex-wrap: wrap;
        > .el-form-item {
          &:not(:nth-child(4), :nth-child(5)) {
            width: 100%;
          }
          &:nth-child(5) {
            margin-left: 34px;
            flex: 1;
          }
        }
      }
    }
  }
}
</style>
