<!--
 * @Date: 2022-04-12 17:49:47
 * @LastEditTime: 2022-06-11 17:30:55
 * @LastEditors: your name
 * @Description: 服务管理-首页
 * have a nice day!
-->

<template>
  <div class="service-home">
    <div class="wrap">
      <DataTable
        ref="serviceTable"
        data-id="2"
        :rows="12"
        width="800px"
        label-width="110px"
        :min-height="70"
        :is-dialog="false"
        @handleAdd="showCreateDialog"
        @handleEdit="btnEditClickHandler"
      />
      <!--新增弹框-->
      <Dialog
        :flag="createDialogVisible"
        width="878px"
      >
        <div class="dialog-create">
          <div class="title">新增服务</div>
          <main class="content">
            <el-form
              ref="serviceForm"
              class="service-form"
              :model="serviceForm"
              :rules="serviceFormRules"
              label-position="right"
              label-width="82px"
              size="mini"
            >
              <el-row
                :gutter="36"
                type="flex"
              >
                <el-col :span="24">
                  <el-form-item
                    label="服务名称"
                    prop="serviceName"
                  >
                    <el-input
                      v-model="serviceForm.serviceName"
                      placeholder="请输入服务名称"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="类型"
                    prop="serviceType"
                  >
                    <el-select
                      v-model="serviceForm.serviceType"
                      clearable
                    >
                      <el-option
                        :value="1"
                        label="管理前端"
                      />
                      <el-option
                        :value="2"
                        label="管理后端"
                      />
                      <el-option
                        :value="3"
                        label="业务前端"
                      />
                      <el-option
                        :value="4"
                        label="业务后端"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="是否同步"
                    label-width="114px"
                  >
                    <el-radio-group v-model="serviceForm.isAsynchronous">
                      <el-radio :label="0">是</el-radio>
                      <el-radio :label="1">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="数据来源"
                    prop="dataSourceID"
                  >
                    <el-select
                      v-model="serviceForm.dataSourceID"
                      clearable
                    >
                      <el-option
                        v-for="dataSource in dataSourceList"
                        :key="dataSource.dataSourceID"
                        :value="dataSource.dataSourceID"
                        :label="dataSource.dataSourceName"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="生命周期ID键名"
                    prop="lifeCycleCol"
                    label-width="114px"
                  >
                    <el-input
                      v-model="serviceForm.lifeCycleCol"
                      placeholder="请输入生命周期ID键名"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="采集线程"
                    prop="threads"
                  >
                    <el-input
                      v-model="serviceForm.threads"
                      type="number"
                      placeholder="请输入采集线程数"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="数据类型"
                    prop="datatype"
                  >
                    <el-select
                      v-model="serviceForm.datatype"
                      clearable
                    >
                      <el-option
                        label="JSON"
                        :value="1"
                      />
                      <el-option
                        label="XML"
                        :value="2"
                      />
                      <el-option
                        label="自定义"
                        :value="3"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item
                    label="取值规则"
                    prop="computingMethod"
                  >
                    <el-input
                      v-model="serviceForm.computingMethod"
                      placeholder="请输入取值规则"
                      type="textarea"
                      :autosize="{ minRows: 4, maxRows: 4 }"
                      resize="none"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item
                    label="检测规则"
                    prop="validationExpression"
                  >
                    <el-input
                      v-model="serviceForm.validationExpression"
                      placeholder="请输入检测规则"
                      type="textarea"
                      :autosize="{ minRows: 4, maxRows: 4 }"
                      resize="none"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="启动时间"
                    prop="startTime"
                  >
                    <el-date-picker
                      v-model="serviceForm.startTime"
                      type="datetime"
                      format="yyyy-MM-dd HH:mm"
                      value-format="yyyy-MM-dd HH:mm"
                      placeholder="请选择启动时间"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="停止时间"
                    prop="stopTime"
                  >
                    <el-date-picker
                      v-model="serviceForm.stopTime"
                      type="datetime"
                      format="yyyy-MM-dd HH:mm"
                      value-format="yyyy-MM-dd HH:mm"
                      placeholder="请选择停止时间"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="失败重试次数"
                    prop="retryCount"
                    label-width="100px"
                  >
                    <el-input
                      v-model="serviceForm.retryCount"
                      type="number"
                      placeholder="请输入重试次数"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="循环次数"
                    prop="loopCount"
                  >
                    <el-input
                      v-model="serviceForm.loopCount"
                      type="number"
                      placeholder="请输入循环次数"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="循环频率"
                    prop="frequencyCount"
                  >
                    <el-input
                      v-model="serviceForm.frequencyCount"
                      type="number"
                      placeholder="请输入循环频率"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="循环频率单位"
                    prop="frequencyUnit"
                    label-width="100px"
                  >
                    <el-select
                      v-model="serviceForm.frequencyUnit"
                      clearable
                    >
                      <el-option
                        label="天"
                        :value="24 * 60 * 60 * 1000"
                      />
                      <el-option
                        label="小时"
                        :value="60 * 60 * 1000"
                      />
                      <el-option
                        label="分钟"
                        :value="60 * 1000"
                      />
                      <el-option
                        label="秒"
                        :value="1000"
                      />
                      <el-option
                        label="毫秒"
                        :value="1"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item
                    label="服务描述"
                    prop="serviceDescribe"
                  >
                    <el-input
                      v-model="serviceForm.serviceDescribe"
                      placeholder="请输入描述"
                      type="textarea"
                      :autosize="{ minRows: 4, maxRows: 4 }"
                      resize="none"
                      clearable
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </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'
import DataTable from '@/components/Table'
export default {
  name: 'ProtocolHome',
  components: {
    Dialog,
    DataTable
  },
  data() {
    return {
      serviceList: [],
      createDialogVisible: false,
      serviceForm: {
        serviceName: '',
        serviceType: null,
        dataSourceID: null,
        lifeCycleCol: '',
        isAsynchronous: 1,
        threads: null,
        datatype: null,
        computingMethod: '',
        validationExpression: '',
        startTime: null,
        stopTime: null,
        retryCount: null,
        loopCount: null,
        frequencyCount: null,
        frequencyUnit: null,
        serviceDescribe: ''
      },
      serviceFormRules: {
        serviceName: [{ required: true, message: '请输入服务名称', trigger: ['change', 'blur'] }]
      },
      dataSourceList: [],
      deleteDialogVisible: false,
      delObj: {}
    }
  },
  methods: {
    // 新增-弹框
    showCreateDialog() {
      this.getDataSourceList()
      this.createDialogVisible = true
    },
    // 新增-提交
    createSubmitHandler() {
      this.$refs['serviceForm'].validate(valid => {
        if (valid) {
          this.createService()
        }
      })
    },
    // 新增-关闭
    hideCreateDialog() {
      this.$refs['serviceForm'].resetFields()
      this.createDialogVisible = false
    },
    // 编辑-跳转
    btnEditClickHandler(item) {
      this.$router.push({
        path: '/systemSettings/serviceEdit',
        query: { serviceID: item.serviceID }
      })
    },
    getServiceList() {
      this.$refs['serviceTable'].getQuery()
    },
    async getDataSourceList() {
      const dataSourceList = await this.getSelectOption(21)
      this.dataSourceList = dataSourceList.map(item => {
        item[item.setlabel] = item.k
        item[item.setvalue] = item.v
        return item
      })
    },
    async getSelectOption(id) {
      try {
        const { code, returnData, message } = await Query({
          id,
          dataContent: []
        })
        if (Number(code) === 0) {
          return returnData.listValues
        } else {
          this.$message.error(message ?? '失败')
          return []
        }
      } catch (error) {
        console.log('错误', error)
      }
    },
    async createService() {
      try {
        this.serviceForm['event'] = 1
        const res = await GeneralDataReception({
          serviceId: 3,
          dataContent: JSON.stringify(this.serviceForm)
        })
        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)
      }
    }
  }
}
</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 .service-form {
        display: flex;
        flex-wrap: wrap;
        > .el-row {
          flex-wrap: wrap;
          > .el-col > .el-form-item {
            margin-bottom: 20px;
            .el-form-item__label {
              padding-right: 16px;
            }
            .el-input,
            .el-select {
              width: 100%;
            }
          }
        }
        label,
        span,
        button,
        input,
        optgroup,
        select,
        textarea {
          font-family: Helvetica, Microsoft YaHei;
          font-size: 14px;
          font-weight: 400;
        }
        label {
          color: #303133;
        }
        input {
          color: #101116;
          &::-webkit-outer-spin-button,
          &::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
          }
          &[type='‘number’'] {
            -moz-appearance: textfield !important;
          }
        }
        .el-radio {
          font-weight: 400;
        }
      }
    }
  }
}
</style>
