<!--
 * @Date: 2022-03-24 09:55:13
 * @LastEditTime: 2022-06-11 22:26:55
 * @LastEditors: your name
 * @Description: 服务管理-编辑服务
 * have a nice day!
-->

<template>
  <div class="service-edit">
    <div class="scrollbar">
      <div class="service-form-wrapper service-edit-wrapper">
        <header class="title">
          <p class="manageTitle">服务</p>
          <el-button
            size="small"
            type="primary"
            class="btn-save"
            @click="editSubmitHandler"
          >保存</el-button>
        </header>
        <main class="content">
          <el-form
            ref="serviceForm"
            class="service-form"
            :model="serviceForm"
            label-position="right"
            label-width="72px"
            size="mini"
          >
            <el-row
              :gutter="60"
              type="flex"
            >
              <el-col :span="8">
                <el-form-item
                  label="服务名称"
                  prop="serviceName"
                >
                  <el-input
                    v-model="serviceForm.serviceName"
                    placeholder="请输入服务名称"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  label="类型"
                  prop="serviceType"
                  label-width="44px"
                >
                  <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="6">
                <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="6">
                <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="8">
                <el-form-item
                  label="服务描述"
                  prop="serviceDescribe"
                >
                  <el-input
                    v-model="serviceForm.serviceDescribe"
                    placeholder="请输入描述"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  label="采集线程"
                  prop="threads"
                >
                  <el-input
                    v-model="serviceForm.threads"
                    type="number"
                    placeholder="请输入采集线程数"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label="是否同步"
                  prop="isAsynchronous"
                >
                  <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="6">
                <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="12">
                <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="12">
                <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="4">
                <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="4">
                <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="4">
                <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="4">
                <el-form-item
                  label="循环次数"
                  prop="loopCount"
                >
                  <el-input
                    v-model="serviceForm.loopCount"
                    type="number"
                    placeholder="请输入循环次数"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  label="循环频率"
                  prop="frequencyCount"
                >
                  <el-input
                    v-model="serviceForm.frequencyCount"
                    type="number"
                    placeholder="请输入循环频率"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <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-row>
          </el-form>
        </main>
      </div>
      <div class="service-tables">
        <div class="service-table-wrapper service-edit-wrapper">
          <header class="title">
            <p class="manageTitle">输出</p>
            <el-button
              size="small"
              type="primary"
              class="btn-white"
              @click="btnAddClickHandler(1)"
            >新增</el-button>
          </header>
          <main class="content">
            <DataTable
              ref="serviceOutputTable"
              data-id="7"
              :data-content="{ serviceID: serviceID }"
              :rows="12"
              :min-height="45"
              margin-top="0"
              :is-btn="false"
              :is-dialog="true"
            />
          </main>
        </div>
        <div class="service-table-wrapper service-edit-wrapper">
          <header class="title">
            <p class="manageTitle">部署机器</p>
            <el-button
              size="small"
              type="primary"
              class="btn-white"
              @click="btnAddClickHandler(2)"
            >新增</el-button>
          </header>
          <main class="content">
            <DataTable
              ref="serviceMachineTable"
              data-id="3"
              :data-content="{ serviceID: serviceID }"
              :rows="12"
              :min-height="45"
              margin-top="0"
              :is-btn="false"
              :is-dialog="true"
              :selection-enable="true"
              @selection-change="machineSelectionChangeHandler"
            />
          </main>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import NoData from '@/components/nodata'
// import Dialog from '@/layout/components/Dialog'
import DataTable from '@/components/Table'
import { myQuery } from '@/api/dataIntegration'

// import query from './mixins/query'
import operate from './mixins/operate'

export default {
  components: {
    // NoData,
    // Dialog,
    DataTable
  },
  mixins: [
    // query,
    operate
  ],
  data() {
    return {
      serviceID: Number(this.$route.query.serviceID),
      operateDialogType: null,
      delObj: {},
      deleteDialogType: null,
      tempCheckedKeys: [],
      serviceForm: {
        serviceName: '',
        serviceType: null,
        dataSourceID: null,
        lifeCycleCol: '',
        serviceDescribe: '',
        threads: null,
        isAsynchronous: 1,
        datatype: null,
        computingMethod: '',
        validationExpression: '',
        startTime: null,
        stopTime: null,
        retryCount: null,
        loopCount: null,
        frequencyCount: null,
        frequencyUnit: null
      },
      targetList: [],
      protocolList: [],
      nodeList: [],
      checkedNodeKeys: [],
      serviceAndNodeList: [],
      dataSourceList: [],
      checkedSourceKeys: [],
      serviceAndSourceList: [],
      processList: [],
      checkedProcessKeys: [],
      outputList: []
    }
  },
  mounted() {
    this.queryServiceByID(this.serviceID)
    this.getDataSourceList()
  },
  methods: {
    editSubmitHandler() {
      this.$refs['serviceForm'].validate(valid => {
        if (valid) {
          this.updateService()
        }
      })
    },
    btnAddClickHandler(flag) {
      switch (flag) {
        case 1:
          this.$refs['serviceOutputTable'].handleAdd()
          break
        case 2:
          this.$refs['serviceMachineTable'].handleAdd()
          break
        default:
          break
      }
    },
    async machineSelectionChangeHandler(selection, row) {
      const isSelected = selection.findIndex(item => item.deployNodeID === row.deployNodeID) > -1
      const event = isSelected ? 1 : 3
      try {
        const message = await this.updateServiceNode(event, row)
        this.$message.success(message ?? '操作成功')
      } catch (error) {
        this.$message.error(error)
        this.$refs['serviceMachineTable'].toggleRowSelection(row, !isSelected)
      }
    },
    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 { listValues } = await myQuery(ID)
        return listValues
      } catch (error) {
        this.$message.error(error)
        return []
      }
    },
    async queryServiceByID(serviceID) {
      const serviceInfo = await myQuery(39, serviceID)
      Object.entries(serviceInfo.listValues[0]).forEach(([key, value]) => {
        this.serviceForm[key] = value
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.service-edit {
  margin: 0 -24px;
  padding-bottom: 16px;
  overflow: hidden;
  .scrollbar {
    height: calc(100vh - 120px);
    padding: 0 24px;
    overflow-x: hidden;
    overflow-y: auto;
    .service-edit-wrapper {
      padding: 26px 24px 0 24px;
      .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24px;
        &:nth-of-type(2) {
          margin-top: 10px;
        }
        .manageTitle {
          height: 32px;
          line-height: 30px;
        }
        .el-button {
          width: 64px;
          height: 32px;
          border: none;
          &.btn-white {
            background-color: #ffffff;
            border: 1px solid #92ace2;
            color: #2d67e3;
          }
          &:hover {
            background-color: #487be8;
            color: #ffffff;
          }
        }
      }
      .content {
        margin: 0;
      }
    }
    ::v-deep .service-form-wrapper {
      background: #ffffff;
      box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      .service-form {
        > .el-row {
          flex-wrap: wrap;
          > .el-col {
            .el-form-item {
              margin-bottom: 25px;
              .el-form-item__label {
                padding-right: 16px;
              }
              .el-input,
              .el-select {
                width: 100%;
                height: 32px;
              }
            }
          }
        }
        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;
        }
      }
    }
    .service-tables {
      width: 100%;
      // height: ;
      display: flex;
      margin: 0 -12px;
      .service-table-wrapper {
        padding-left: 12px;
        padding-right: 12px;
        &:nth-child(1) {
          flex: 1 1 624px;
        }
        &:nth-child(2) {
          flex: 0 1 624px;
        }
      }
    }
  }
  .dialog-checkbox {
    .content {
      margin-left: 16px;
      .el-checkbox-group {
        margin-right: 24px;
        .el-checkbox {
          margin-bottom: 24px;
          font-family: Helvetica, Microsoft YaHei;
          color: #303133;
        }
      }
    }
  }
  ::v-deep #dialog-form .el-select .el-input__inner {
    width: 100%;
  }
}
</style>
