<!-- 业务系统管理 -->
<template>
  <div class="fullheight">
    <ht-table
      ref="htTable"
      quick-search-props="sysName,sysCode"
      :data="data"
      :selection="true"
      :show-export="false"
      :show-custom-column="false"
      :pageResult="pageResult"
      :default-sorter="[{direction: 'ASC', property: 'sn'}]"
      @load="loadData"
      @row-dblclick="handleDbClick"
    >
      <template v-slot:toolbar>
        <el-button
          size="small"
          type="primary"
          @click="showDialog()"
          icon="el-icon-plus"
          >添加</el-button
        >
        <ht-delete-button
          url="${cssc}/biz/base/systemInfo/v1/"
          :htTable="$refs.htTable"
          >删除</ht-delete-button
        >
        <el-button
          size="small"
          type="primary"
          plain
          @click="saveSn"
          icon="el-icon-finished"
          >保存排序号</el-button
        >
        <el-button
          size="small"
          type="primary"
          plain
          @click="refresh"
          icon="el-icon-refresh"
          >刷新缓存</el-button
        >
      </template>
      <template>
        <ht-table-column
          prop="sysName"
          label="业务系统名称"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="sysCode"
          label="业务系统编码"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="sysType"
          label="业务系统类型"
          :sortable="true"
          :filters="sysTypeOptions"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="sysUrl"
          label="访问地址"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="isQueue"
          label="创建队列"
          :filters="isQueueOptions"
          :show-overflow-tooltip="true"
          width="100"
        >
          <template slot-scope="{row}">
            <el-tag type="success" v-if="row.isQueue == 1">已创建</el-tag>
            <el-tag type="danger" v-else>未创建</el-tag>
          </template>
        </ht-table-column>
        <ht-table-column
          prop="isSendData"
          label="是否发送数据"
          :filters="sendDataOptions"
          width="120"
        >
          <template slot-scope="{row}">
            <el-tag type="success" v-if="row.isSendData == 1">是</el-tag>
            <el-tag type="danger" v-else>否</el-tag>
          </template>
        </ht-table-column>
        <ht-table-column
          prop="outTimes"
          label="数据过期时间"
          :show-overflow-tooltip="true"
          ><template slot-scope="{row}">
            {{ row.outTimes }}（毫秒）
          </template>
        </ht-table-column>
        <ht-table-column prop="sn" label="排序号" width="120" :sortable="true">
          <template v-slot="{row}">
            <el-input-number
              style="width: 100%"
              v-model="row.sn"
              :controls="false"
              @change="val => handleChangeSn(row, val)"
              :min="0"
            ></el-input-number>
          </template>
        </ht-table-column>
        <ht-table-column label="操作">
          <template v-slot="{row}">
            <el-dropdown
              size="mini"
              split-button
              @command="handleCommand"
              @click="
                handleCommand({
                  row,
                  type: 'config'
                })
              "
              ><i class="el-icon-collection"></i>采集配置
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  :icon="
                    `${row.isSendData ? 'el-icon-remove' : 'el-icon-upload2'}`
                  "
                  :command="{
                    row,
                    type: 'isSend'
                  }"
                  >{{
                    row.isSendData ? '停止发送数据' : '发送数据'
                  }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </ht-table-column>
      </template>
    </ht-table>
    <common-dialog
      width="1000px"
      title="业务系统信息"
      class="sp-manager__dialog"
      :visible="dialogVisible"
      :before-close="beforeCloseDialog"
      destroy-on-close
    >
      <el-form v-form data-vv-scope="BizSystemInfoForm">
        <el-row :gutter="10">
          <el-col :span="12">
            <ht-form-item label="系统名称" label-width="126px">
              <ht-input v-model="BizSystemInfo.sysName" validate="required" />
            </ht-form-item>
          </el-col>
          <el-col :span="12">
            <ht-form-item label="系统简称" label-width="126px">
              <ht-input
                v-model="BizSystemInfo.sysShortName"
                validate="required"
              />
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <ht-form-item label="系统编码" label-width="126px">
              <ht-input
                :disabled="!!BizSystemInfo.id && !!BizSystemInfo.sysCode"
                v-model="BizSystemInfo.sysCode"
                validate="required"
              />
            </ht-form-item>
          </el-col>
          <el-col :span="12">
            <ht-form-item label="系统类型" label-width="126px">
              <ht-select
                v-model="BizSystemInfo.sysType"
                validate="required"
                :options="sysTypeOptions"
              />
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <ht-form-item label="访问地址" label-width="126px">
              <ht-input validate="required" v-model="BizSystemInfo.sysUrl" />
            </ht-form-item>
          </el-col>
          <el-col :span="12">
            <ht-form-item label="联系电话" label-width="126px">
              <ht-input v-model="BizSystemInfo.sysPhone" />
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <ht-form-item label="联系人" label-width="126px">
              <ht-input v-model="BizSystemInfo.sysLink" />
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <ht-form-item label="是否发送数据" label-width="126px">
              <!-- <ht-input v-model="BizSystemInfo.isShow" /> -->
              <el-switch
                v-model="BizSystemInfo.isSendData"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </ht-form-item>
          </el-col>
          <el-col :span="12">
            <ht-form-item label="数据过期时间" label-width="126px">
              <ht-input
                type="number"
                :min="0"
                :step="1000"
                v-model="BizSystemInfo.outTimes"
              />
              毫秒
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <ht-form-item label="是否显示图标" label-width="126px">
              <!-- <ht-input v-model="BizSystemInfo.isShow" /> -->
              <el-switch
                v-model="BizSystemInfo.isShow"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </ht-form-item>
          </el-col>
          <el-col :span="12">
            <ht-form-item label="系统图标" label-width="126px">
              <el-button
                type="primary"
                icon="el-icon-plus"
                @click="handleSelectIcon"
                >选择图标</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-minus"
                plain
                @click="handleCancleIcon"
                >取消图标</el-button
              >
              <svgIcon
                icon-style="icon"
                :icon-class="BizSystemInfo.sysIcon ? BizSystemInfo.sysIcon : ''"
                v-show="BizSystemInfo.sysIcon"
                style="
                                    font-size: 24px;
                                    vertical-align: middle;
                                    margin-left: 20px;
                                "
              />
            </ht-form-item>
          </el-col>
          <el-col :span="4">
            <ht-form-item label="图标颜色" label-width="126px">
              <el-color-picker
                v-model="BizSystemInfo.sysIconColor"
              ></el-color-picker>
            </ht-form-item>
          </el-col>
          <el-col :span="8">
            <ht-form-item label="图标预览" label-width="126px">
              <div class="sys-item-container">
                <div
                  class="sys-icon-container"
                  :style="`background:${BizSystemInfo.sysIconColor}`"
                >
                  <svgIcon
                    icon-style="icon"
                    :icon-class="
                      BizSystemInfo.sysIcon ? BizSystemInfo.sysIcon : ''
                    "
                    v-show="BizSystemInfo.sysIcon"
                    class="sys-icon"
                  />
                </div>
                <div class="sys-name">
                  {{ BizSystemInfo.sysShortName }}
                </div>
              </div>
            </ht-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" style="text-align: right">
        <ht-submit-button
          url="/biz/base/systemInfo/v1/"
          context="cssc"
          :model="BizSystemInfo"
          :request-method="saveMethod"
          scope-name="BizSystemInfoForm"
          @after-save-data="afterSaveData"
          >保存</ht-submit-button
        >
        <el-button size="small" @click="beforeCloseDialog">取消</el-button>
      </div>
    </common-dialog>
    <collect-config ref="collectcConfig"></collect-config>
    <IconPanl @select="choseIcon" ref="iconPanl" />
  </div>
</template>
<script>
import CollectConfig from '@/views/Basic/modules/CollectConfig'
import basicData from '@/api/biz/basicData'
import IconPanl from '@/components/global/IconPanl.vue'
export default {
  components: {
    CollectConfig,
    IconPanl
  },
  data() {
    return {
      dialogVisible: false,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      BizSystemInfo: {
        sysType: 'BS',
        isShow: 1,
        sysIconColor: '#2faaff',
        isSendData: 0,
        outTimes: 0
      },
      saveMethod: 'POST',
      sysTypeOptions: [
        {key: 'BS', value: 'BS', text: 'BS'},
        {key: 'CS', value: 'CS', text: 'CS'}
      ],
      sendDataOptions: [
        {key: 1, value: 1, text: '是'},
        {key: 0, value: 0, text: '否'}
      ],
      isQueueOptions: [
        {key: 1, value: 1, text: '已创建队列'},
        {key: 0, value: 0, text: '未创建队列'}
      ],
      snObj: {}
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
  methods: {
    handleCommand(data) {
      if (data.type == 'config') {
        this.handleConfig(data.row)
      } else if (data.type == 'isSend') {
        this.isSendData(data.row)
      }
    },
    isSendData(row) {
      let data = this.qs.stringify({
        id: row.id,
        isSendData: row.isSendData == 0 ? 1 : 0
      })
      let headers = {'Content-type': 'application/x-www-form-urlencoded'}

      this.$http
        .request({
          url: '${cssc}/biz/base/systemInfo/v1/updateSendData',
          method: 'post',
          data: data,
          headers: headers
        })
        .then(res => {
          this.$message.success('修改成功')
          this.$refs.htTable.load()
        })
    },
    saveSn() {
      this.$http
        .post('${cssc}/biz/base/systemInfo/v1/updateSequence', this.snObj)
        .then(res => {
          this.$refs.htTable.load()
        })
    },
    handleChangeSn(row, val) {
      this.snObj[row.id] = val
    },
    refresh() {
      this.$http
        .post('${cssc}/biz/scada/pointSystem/v1/saveScadaPointCache')
        .then(res => {
          this.$message.success('刷新成功')
        })
    },
    choseIcon(icon) {
      this.BizSystemInfo.sysIcon = icon
      this.$forceUpdate()
    },
    handleSelectIcon() {
      this.$refs.iconPanl.dialogVisible = true
    },
    handleCancleIcon() {
      this.BizSystemInfo.sysIcon = ''
    },
    handleConfig(row) {
      this.$refs.collectcConfig.open(row)
    },
    handleDbClick(row) {
      this.showDialog(row.id)
    },
    showDialog(id) {
      if (id) {
        this.saveMethod = 'PUT'
        this.$http.get('${cssc}/biz/base/systemInfo/v1/' + id).then(
          resp => {
            this.BizSystemInfo = resp.data
            this.dialogVisible = true
          },
          error => {
            reject(error)
          }
        )
      } else {
        this.saveMethod = 'POST'
        this.dialogVisible = true
      }
    },
    beforeCloseDialog() {
      this.BizSystemInfo = {
        sysType: 'BS',
        isShow: 1,
        sysIconColor: '#2faaff'
      }
      this.dialogVisible = false
    },
    loadData(param, cb) {
      // console.log(param, 'param')
      basicData
        .loadBizSystemInfo(param)
        .then(response => {
          this.data = response.rows
          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
        })
        .finally(() => {
          if (cb) {
            cb()
          }
        })
    },
    afterSaveData() {
      setTimeout(() => {
        this.beforeCloseDialog()
        this.$refs.htTable.load()
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.sys-item-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: top;
  flex-flow: column;
  flex-wrap: wrap;
  cursor: pointer;

  .sys-icon-container {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .sys-icon {
    font-size: 26px;
    color: #fff;
  }
  .sys-name {
    font-size: 14px;
    font-weight: bold;
    margin-top: 6px;
  }
}
.inputs {
  width: 90%;
  /deep/ .el-input-number {
    width: 100%;
  }
}
</style>
