<template>
  <div class="app-container container-flex">
    <el-card style="width: 250px; margin-right: 15px">
      <el-tree
        :data="optionsObj.EquipmentType"
        default-expand-all
        highlight-current
        @node-click="handleNodeClick"
      ></el-tree>
    </el-card>
    <!--工具栏-->

    <!-- 表单组件 -->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible.sync="crudCU"
      :title="crud.status.title"
      width="600px"
    >
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
        <el-form-item label="设备类型" prop="typeId">
          <treeselect
            v-model="form.typeId"
            disabled
            :defaultExpandLevel="3"
            :options="optionsObj.EquipmentType"
            :normalizer="normalizer"
            style="width: 280px"
            placeholder="选择所属类型"
          />
        </el-form-item>
        <el-form-item label="字段编号" prop="field">
          <el-select
            v-model="form.field"
            filterable
            size="small"
            class="filter-item"
            style="width: 280px"
          >
            <el-option v-for="item in fieldOptions" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="字段名称" prop="name">
          <el-input v-model="form.name" size="small" class="filter-item" style="width: 280px" />
        </el-form-item>
        <el-form-item label="字段单位" prop="unit">
          <el-input
            v-model="form.unit"
            size="small"
            class="filter-item"
            :disabled="form.isTag"
            style="width: 280px"
          />
        </el-form-item>
        <el-form-item label="组件类型" prop="componentType">
          <el-select
            v-model="form.componentType"
            filterable
            size="small"
            class="filter-item"
            style="width: 280px"
            :disabled="form.isTag"
            @change="handleComponentTypeChange"
          >
            <el-option
              v-for="item in optionsObj.HtmlComponentType"
              :key="item.value"
              :label="item.label"
              :value="+item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="组件配置" prop="componentConfig">
          <el-input
            v-model="form.componentConfig"
            size="small"
            style="width: 280px"
            :disabled="form.isTag"
            type="textarea"
            autosize
          />
        </el-form-item>
        <el-form-item label="默认值" prop="defaultValue">
          <el-input
            v-model="form.defaultValue"
            size="small"
            style="width: 280px"
            :disabled="form.isTag"
          />
        </el-form-item>
        <el-form-item label="校验" prop="rule">
          <el-input
            v-model="form.rule"
            size="small"
            type="textarea"
            autosize
            style="width: 280px"
          />
        </el-form-item>
        <el-form-item label="读权限设置" prop="readPermission">
          <el-input
            v-model="form.readPermission"
            size="small"
            style="width: 280px"
          />
        </el-form-item>
        <el-form-item label="写权限设置" prop="writePermission">
          <el-input
            v-model="form.writePermission"
            size="small"
            style="width: 280px"
          />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model.number="form.sort"
            :min="0"
            :max="999"
            controls-position="right"
            style="width: 280px"
          />
        </el-form-item>
        <el-form-item label="在窗口显示" prop="inWindowData">
          <el-switch
            v-model="form.inWindowData"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="true"
            :inactive-value="false"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="数据标签" prop="isTag">
          <el-switch
            v-model="form.isTag"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="true"
            :inactive-value="false"
            @change="handleIsTagChange"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="必填" prop="isRequired">
          <el-switch
            v-model="form.isRequired"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="true"
            :inactive-value="false"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="表列显示" prop="isTableCol">
          <el-switch
            v-model="form.isTableCol"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="true"
            :inactive-value="false"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="表列属性" prop="tableColAttr">
          <el-input
            v-model="form.tableColAttr"
            size="small"
            style="width: 280px"
            :disabled="!form.isTableCol"
            type="textarea"
            autosize
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" style="width: 280px" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU"> 取消 </el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">
          确认
        </el-button>
      </div>
    </el-dialog>
    <el-card style="flex-grow: 1">
      <div class="head-container">
        <crudOperation :permission="permission" />
      </div>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        style="width: 100%"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          v-for="item in extensionConfigTableOptions"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          :align="item.align"
          :fixed="item.fixed"
          :sortable="item.sortable"
        >
        </el-table-column>
        <!--   编辑与删除   -->
        <el-table-column
          v-if="
            checkPer(['admin', 'equipment:extensionconfig:edit', 'equipment:extensionconfig:del'])
          "
          label="操作"
          width="130px"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission" />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </el-card>
  </div>
</template>

<script>
import permission from '@/directive/permission'
import crudExtensionConfig from '@/api/equipment/extensionConfig'
import { getOptions } from '@/api/equipment/public'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
// import { crudOperation, rrOperation, udOperation, pagination } from '@crud'
import crudComps from '@crud'
import { extensionConfigTableOptions } from '../tableConfig'

// vue-treeselect
import Treeselect from '@riophae/vue-treeselect'
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

import {
  isPosNumber,
  isNegNumber,
  isNumber,
  isPosInteger,
  isNegInteger,
  isInteger,
} from '@/utils/validate'

const defaultForm = {
  id: '',
  typeId: '',
  field: undefined,
  name: '',
  unit: '',
  componentType: 1,
  componentConfig: '',
  dataType: undefined,
  readPermission: '',
  writePermission: '',
  rule: '',
  inWindowData: false,
  isTag: false,
  isRequired: false,
  isTableCol: false,
  tableColAttr: '',
  sort: 999,
  remark: '',
}

export default {
  name: 'EquipmentExtensionConfig',
  directives: { permission },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  components: { ...crudComps, Treeselect },
  cruds() {
    return CRUD({
      title: '设备类型扩展',
      url: 'equipment/extensionConfig/getList',
      listOrder: [],
      crudMethod: { ...crudExtensionConfig },
      optShow: { add: true, edit: true, del: true, reset: true },
      query: { typeId: 0 },
    })
  },
  computed: {
    crudCU() {
      return this.crud.status.cu > 0
    },
    VUE_APP_BASE_API() {
      return process.env.VUE_APP_BASE_API
    },
  },
  watch: {},
  data() {
    var chackNumber = (rule, value, callback) => {
      if (value && !isNumber(value)) return callback(new Error('请输入数字'))
      return callback()
    }
    var chackPosNumber = (rule, value, callback) => {
      if (value && !isPosNumber(value)) return callback(new Error('请输入正数'))
      return callback()
    }
    return {
      extensionConfigTableOptions,
      permission: {
        add: ['admin', 'equipment:extensionconfig:add'],
        edit: ['admin', 'equipment:extensionconfig:edit'],
        del: ['admin', 'equipment:extensionconfig:del'],
      },
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
      },
      fieldOptions: Array.from({ length: 50 }, (item, index) => index + 1),
      optionsObj: {
        DataType: [],
        HtmlComponentType: [],
        EquipmentType: [],
      },
      currType: 0,
    }
  },
  created() {
    this.getOptions()
  },
  methods: {
    // 新增前做的操作
    [CRUD.HOOK.beforeToAdd]() {
      if (!this.currType) {
        this.$message.error('请先选择设备类型')
        return false
      }
      this.form.typeId = this.currType
    },
    handleNodeClick(data) {
      this.currType = data.value
      this.query.typeId = data.value
      this.crud.toQuery()
    },
    normalizer(node) {
      if (node.children == null || node.children == 'null') {
        delete node.children
        return {
          id: node.value,
          label: node.label,
        }
      }
      return {
        id: node.value,
        label: node.label,
        children: node.children,
      }
    },
    handleIsTagChange(value) {
      if (value) {
        this.form.componentType = 3
        this.form.unit = null
        this.form.componentConfig = null
        this.form.defaultValue = null
      }
    },
    handleComponentTypeChange(value) {
      if ((value == 3 || value == 4) && !this.form.isTag) {
        this.form.componentConfig =
          '{\n  "options": {\n    "module": "",\n    "type": "",\n    "data": {}\n  }\n}'
      } else {
        this.form.componentConfig = ''
      }
    },
    getOptions() {
      Object.keys(this.optionsObj).forEach(async (key) => {
        try {
          let res = await getOptions(key)
          if (res.code === 20000) this.optionsObj[key] = res.data.content
        } catch (error) {
          console.log(error)
        }
      })
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container-flex {
  display: flex;
}

::v-deep .vue-treeselect {
  font-size: 13px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px 10px 0;
}

::v-deep .vue-treeselect .vue-treeselect__control {
  height: 30.5px;
}
</style>