<!-- 扩展参数定义 -->
<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      @row-dblclick="handleDbClick"
      :data="data"
      :pageResult="pageResult"
      :selection="true"
      :quick-search-props="[
        {prop: 'name_', label: '参数名称'},
        {prop: 'code_', label: '参数编码'}
      ]"
      :default-sorter="[{direction: 'DESC', property: 'name_'}]"
      :show-export="false"
      :show-custom-column="false"
      ref="htTable"
    >
      <template v-slot:toolbar>
        <el-button
          size="small"
          @click="showDialog()"
          icon="el-icon-plus"
          type="primary"
          >添加</el-button
        >
        <ht-delete-button
          :url="demDeleteUrl"
          :htTable="$refs.htTable"
          @after-delete="afterDelete"
          :style="{marginLeft: '10px'}"
          >删除</ht-delete-button
        >
      </template>
      <template>
        <ht-table-column
          prop="name"
          label="参数名称"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="code"
          label="参数编码"
          :sortable="true"
          :show-overflow-tooltip="true"
        />

        <ht-table-column
          prop="type"
          label="参数类型"
          width="200"
          :filters="typeList"
          :sortable="true"
        >
          <template v-slot="{row}">
            <template v-for="item in typeList">
              <el-tag v-if="row.type == item.value" :key="item.value">{{
                item.name
              }}</el-tag>
            </template>
          </template>
        </ht-table-column>
        <ht-table-column
          prop="ctlType"
          label="控件类型"
          width="200"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
          <template v-slot="{row}">
            <el-tag v-if="row.ctlType == 'date'">日期</el-tag>
            <el-tag v-if="row.ctlType == 'input'">手动输入</el-tag>
            <el-tag v-if="row.ctlType == 'checkbox'">复选框</el-tag>
            <el-tag v-if="row.ctlType == 'radio'">单选按钮</el-tag>
            <el-tag v-if="row.ctlType == 'number'">数字</el-tag>
            <el-tag v-if="row.ctlType == 'select'">下拉框</el-tag>
          </template>
        </ht-table-column>
      </template>
    </ht-table>

    <common-dialog
      width="800px"
      title="扩展参数定义"
      class="sp-manager__dialog"
      :visible="dialogVisible"
      :before-close="handleClose"
      destroy-on-close
    >
      <el-form
        v-model="ProParam"
        data-vv-scope="tenantParamForm"
        class="form-single-row"
      >
        <ht-form-item label="参数类型" prop="type" label-width="100px">
          <!-- <ht-select
                        v-model="ProParam.type"
                        class="ht"
                        :options="tenantTypeList"
                        :props="{key: 'value', value: 'label'}"
                        validate="required"
                    /> -->
          <dict-select
            v-model="ProParam.type"
            dictCode="kzcslx"
            validate="required"
          >
          </dict-select>
        </ht-form-item>
        <ht-form-item label="参数名称" prop="name" label-width="100px">
          <ht-input
            v-model="ProParam.name"
            autocomplete="off"
            :validate="{
              required: true,
              regex: {
                exp: '^[\\s\\S]{1,21}$',
                message: '内容超出输入限制'
              }
            }"
            placeholder="请输入名称"
          ></ht-input>
        </ht-form-item>
        <ht-form-item label="参数编码" prop="code" label-width="100px">
          <ht-input
            v-model="ProParam.code"
            v-pinyin="ProParam.name"
            autocomplete="off"
            :validate="{
              required: true,
              alpha_num: true,
              regex: {
                exp: '^[\\s\\S]{1,50}$',
                message: '内容超出输入限制'
              }
            }"
            placeholder="请输入别名"
            :disabled="ProParam.id ? true : false"
          ></ht-input>
        </ht-form-item>
        <ht-form-item label="控件类型" prop="ctlType" label-width="100px">
          <ht-select
            validate="required"
            v-model="ProParam.ctlType"
            class="m-r"
            :options="ctlTypeOptions"
            @change="ctlTypeChecked"
            :disabled="ProParam.id ? true : false || readOnly"
          />
        </ht-form-item>
        <ht-form-item
          label="自定义选项"
          prop="ctlType"
          label-width="100px"
          v-if="isCusOprionsShow"
        >
          <el-button
            size="small"
            type="text"
            icon="el-icon-plus"
            @click="ProParam.json.push({})"
            >添加</el-button
          >
          <table class="form-table" cellspacing="0" cellpadding="0" border="0">
            <tbody>
              <tr class="sub-table-header">
                <th width="180">选项</th>
                <th width="180">值</th>
                <th width="150">操作</th>
              </tr>
              <tr
                v-for="(item, index) in ProParam.json"
                :key="index"
                :data-index="index"
                data-subname="ProParam.json"
              >
                <td width="150">
                  <ht-input v-model="item.value" :validate="{required: true}" />
                </td>
                <td width="150">
                  <ht-input v-model="item.key" :validate="{required: true}" />
                </td>
                <td class="trash">
                  <el-button
                    size="small"
                    type="text"
                    @click="ProParam.json.remove(item)"
                    >删除</el-button
                  >
                  <el-button
                    size="small"
                    type="text"
                    @click="move(ProParam.json, item, 'up')"
                    >上移</el-button
                  >
                  <el-button
                    size="small"
                    type="text"
                    @click="move(ProParam.json, item, 'down')"
                    >下移</el-button
                  >
                </td>
              </tr>
            </tbody>
          </table>
        </ht-form-item>
      </el-form>
      <div slot="footer">
        <ht-submit-button
          :url="saveRoleUrl"
          :model="ProParam"
          :isSubmit="isSubmit"
          :requestMethod="requestMethod"
          scopeName="tenantParamForm"
          @before-save-data="beforeSaveData"
          @after-save-data="afterSaveData"
          >保存</ht-submit-button
        >
        <el-button @click="dialogCancle('dialogVisible')">取消</el-button>
      </div>
    </common-dialog>
  </div>
</template>
<script>
import basicData from '@/api/biz/basicData'
import utils from '@/hotent-ui-util.js'
export default {
  computed: {
    demDeleteUrl: function() {
      return (
        window.context.cssc +
        '/biz/base/params/v1/paramsConf/deleteParamsConfByIds'
      )
    },
    saveRoleUrl: function() {
      let preUrl = window.context.cssc + '/biz/base/params/v1/paramsConf'
      if (this.ProParam.id) {
        preUrl += '/updateParamsConf'
      } else {
        preUrl += '/addParamsConf'
      }
      return preUrl
    },
    requestMethod: function() {
      return this.ProParam.id ? 'PUT' : 'POST'
    }
  },
  data() {
    return {
      dialogVisible: false,
      isCusOprionsShow: false, //自定义选项是否展示
      ProParam: {
        id: '',
        name: '',
        code: '',
        ctlType: '',
        ctrType: '',
        json: [],
        type: '1'
      },
      isSubmit: true,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      readOnly: false,
      ctlTypeOptions: [
        {key: 'input', value: '手动输入'},
        {key: 'select', value: '下拉框'},
        {key: 'checkbox', value: '复选框'},
        {key: 'radio', value: '单选按钮'},
        {key: 'date', value: '日期'},
        {key: 'number', value: '数字'}
      ],
      typeList: []
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
    this.getTypeList()
  },
  methods: {
    getTypeList() {
      this.typeList = utils.getDictItems('kzcslx')
      this.typeList.forEach(item => {
        item.text = item.name
      })
    },
    handleDbClick(row) {
      this.showDialog(row)
    },
    handleClose() {
      this.dialogVisible = false
      this.isCusOprionsShow = false
    },
    showDialog(row) {
      this.dialogVisible = true
      this.readOnly = false
      if (row) {
        this.$http
          .get(
            '${cssc}/biz/base/params/v1/paramsConf/getByCode/?code=' +
              `${row.code}`
          )
          .then(
            resp => {
              this.ProParam = resp.data
              this.dialogVisible = true
              if (resp.data.json != '') {
                resp.data.json = JSON.parse(resp.data.json)
                this.ProParam = resp.data
                this.ctlTypeChecked()
                setTimeout(() => this.$validator.validateAll('editDemForm'))
              }
            },
            error => {
              reject(error)
            }
          )
      } else {
        this.ProParam = {
          id: '',
          name: '',
          code: '',
          ctlType: '',
          json: [],
          type: '1'
        }
      }
    },
    dialogCancle(dialogVisible) {
      this[dialogVisible] = false
    },
    loadData(param, cb) {
      basicData
        .loadBizParamsInfo(param)
        .then(response => {
          this.data = response.rows
          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
        })
        .finally(() => cb())
    },
    async beforeSaveData() {
      if (['select', 'checkbox', 'box'].includes(this.ProParam.ctlType)) {
        if (this.ProParam.json.length === 0) {
          this.isSubmit = false
          this.$message({
            type: 'warning',
            message: '请添加自定义选项'
          })
          return
        }
      }
      this.isSubmit = true
      this.ProParam.ctrType = this.ProParam.ctlType
    },
    afterSaveData() {
      this.dialogVisible = false
      this.isCusOprionsShow = false
      this.$refs.htTable.load()
    },
    afterDelete() {
      this.$refs.htTable.load()
    },
    move(ary, item, direct) {
      this.ProParam.json = utils.arrayMove(ary, item, direct)
    },
    ctlTypeChecked() {
      var thisctlType = this.ProParam.ctlType
      if (
        thisctlType === 'input' ||
        thisctlType === 'date' ||
        thisctlType === 'number'
      ) {
        this.isCusOprionsShow = false
      } else {
        this.isCusOprionsShow = true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
div[aria-invalid='true'] >>> .el-input__inner,
div[aria-invalid='true'] >>> .el-input__inner:focus {
  border-color: #f56c6c;
}
.sub-table-header > th {
  text-align: center;
}
.trash {
  text-align: center;
}
</style>
